From fbfbbd4013530bb0af80635fface782e3311fc09 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Fri, 29 Sep 2017 01:30:43 +0200
Subject: [PATCH] [fix] update encrypt theme

---
 .../themes/exposure/static/css/style-page.css |  71 ++++++++++-
 .../themes/exposure/templates/encrypted.html  | 110 +-----------------
 2 files changed, 76 insertions(+), 105 deletions(-)

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index 4a533b1..db06902 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -129,9 +129,12 @@ a {
 }
 
 footer {
+    position: relative;
+    right: 0;
+    bottom: 0;
+    left: 0;
     margin-top: 6em;
     text-align: center;
-    position: relative;
     font-family: 'crimson', serif;
     font-size: 11px;
     color: #555;
@@ -517,3 +520,69 @@ span.left img, span.right img {
 .clear {
   clear: both;
 }
+
+.staticrypt-hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+}
+
+.staticrypt-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+  box-sizing: border-box;
+}
+
+.staticrypt-form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+
+.staticrypt-form input {
+  outline: 0;
+  background: #292525;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.staticrypt-form .staticrypt-decrypt-button {
+  text-transform: uppercase;
+  outline: 0;
+  background: #91C25F;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.staticrypt-html {
+  height: 100%;
+}
+
+.staticrypt-body {
+  background: #FFF; /* fallback for old browsers */
+  font-family: "Arial", sans-serif;
+}
+
+.staticrypt-instructions {
+  margin-top: -1em;
+  margin-bottom: 1em;
+}
+
+.staticrypt-title {
+  font-size: 1.5em;
+}
diff --git a/prosopopee/themes/exposure/templates/encrypted.html b/prosopopee/themes/exposure/templates/encrypted.html
index 1bea17a..8dd4f6a 100644
--- a/prosopopee/themes/exposure/templates/encrypted.html
+++ b/prosopopee/themes/exposure/templates/encrypted.html
@@ -11,118 +11,21 @@
     <meta http-equiv="expires" content="0"/>
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
     <meta http-equiv="pragma" content="no-cache"/>
-
-    <style>
-.staticrypt-hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border: 0;
-  border-top: 1px solid #eee;
-}
-
-.staticrypt-page {
-  width: 360px;
-  padding: 8% 0 0;
-  margin: auto;
-  box-sizing: border-box;
-}
-
-.staticrypt-form {
-  position: relative;
-  z-index: 1;
-  background: #FFFFFF;
-  max-width: 360px;
-  margin: 0 auto 100px;
-  padding: 45px;
-  text-align: center;
-  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
-}
-
-.staticrypt-form input {
-  outline: 0;
-  background: #f2f2f2;
-  width: 100%;
-  border: 0;
-  margin: 0 0 15px;
-  padding: 15px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.staticrypt-form .staticrypt-decrypt-button {
-  text-transform: uppercase;
-  outline: 0;
-  background: #4CAF50;
-  width: 100%;
-  border: 0;
-  padding: 15px;
-  color: #FFFFFF;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.staticrypt-form .staticrypt-decrypt-button:hover, .staticrypt-form .staticrypt-decrypt-button:active, .staticrypt-form .staticrypt-decrypt-button:focus {
-  background: #43A047;
-}
-
-.staticrypt-html {
-  height: 100%;
-}
-
-.staticrypt-body {
-  margin-bottom: 1em;
-  background: #76b852; /* fallback for old browsers */
-  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
-  background: -moz-linear-gradient(right, #76b852, #8DC26F);
-  background: -o-linear-gradient(right, #76b852, #8DC26F);
-  background: linear-gradient(to left, #76b852, #8DC26F);
-  font-family: "Arial", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.staticrypt-instructions {
-  margin-top: -1em;
-  margin-bottom: 1em;
-}
-
-.staticrypt-title {
-  font-size: 1.5em;
-}
-
-.staticrypt-footer {
-  position: fixed;
-  height: 20px;
-  font-size: 16px;
-  padding: 2px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin-bottom: 0;
-}
-
-.staticrypt-footer p {
-  margin: 2px;
-  text-align: center;
-  float: right;
-}
-
-.staticrypt-footer a {
-  text-decoration: none;
-}
-    </style>
+    <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
   </head>
 
   <body class="staticrypt-body">
     <div class="staticrypt-page">
       <div class="staticrypt-form">
         <div class="staticrypt-instructions">
+          <img id="logo" src="./../static/img/logo.svg">
           <p class="staticrypt-title">{{ gallery.title }}</p>
         </div>
 
         <hr class="staticrypt-hr">
 
         <form id="staticrypt-form" action="#" method="post">
+          <div id="error" style="color: red; padding-bottom: 10px; height: 20px;"></div>
           <input id="staticrypt-password"
                  type="password"
                  name="password"
@@ -134,10 +37,9 @@
       </div>
 
     </div>
-    <footer class="staticrypt-footer">
-      <p class="pull-right">Created with <a href="https://robinmoisson.github.io/staticrypt">StatiCrypt</a></p>
+     <footer style="position: absolute;">
+      <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
     </footer>
-
     <script type="text/javascript" src="../static/js/crypto-js.min.js" charset="utf-8"></script>
 
     <script>
@@ -151,7 +53,7 @@ document.getElementById('staticrypt-form').addEventListener('submit', function(e
     var plainHTML = CryptoJS.AES.decrypt(encryptedMsg, passphrase).toString(CryptoJS.enc.Utf8);
   }
   catch(err) {
-    alert('Bad passphrase !');
+    document.getElementById("error").innerHTML = "Wrong keyword entry."
     return;
   }