ui design updates

and fix typo and remove outdated comment
jantari · Feb 11, 2024 · 10e1e46 · 10e1e46
1 parent dde31de
commit 10e1e46
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 28 deletions.
diff --git a/main.go b/main.go
@@ -181,7 +181,7 @@ func viewPageHandler(w http.ResponseWriter, r *http.Request) {
 
     accept := r.Header.Get("Accept-Language")
     // NewMatcher returns the first element in the list in case no match is found,
-    // so we want to make sure the first element is the undefiend language as that's
+    // so we want to make sure the first element is the undefined language as that's
     // set up to handle all fallback scenarios.
     matcher := language.NewMatcher(serverLangs)
     tag, _ := language.MatchStrings(matcher, accept)
@@ -213,7 +213,6 @@ func viewPageHandler(w http.ResponseWriter, r *http.Request) {
             return
         }
 
-        // Fallback in case nothing matches
         var localizedTemplateToRender *template.Template
 
         // When clickthrough is not enabled or request is POST, show secret immediately.

diff --git a/templates/reveal.html b/templates/reveal.html
@@ -25,37 +25,42 @@
       }
 
       .button {
-        border: 4px solid transparent;
         border-radius: 50vh;
-        padding: 0.12em 0.6em 0.12em 0.6em;
+        padding: 0.2em 0.6em 0.2em 0.6em;
         width: fit-content;
-        transition: 0.5s;
-        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-        background: linear-gradient(110deg, cadetblue, darkturquoise, cadetblue) padding-box,
-                    linear-gradient(to right, darkturquoise, cadetblue) border-box;
-        background-size: 300% auto;
+        box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.22);
+        transition: background-position 0s, box-shadow 0.3s;
+        background: linear-gradient(110deg, cadetblue 0 40%, darkturquoise, cadetblue 60% 100%);
+        background-size: 250% auto;
       }
 
       .button:hover {
         cursor: pointer;
-        transition: 1s;
-        box-shadow: 4px 8px 16px 4px rgba(0,0,0,0.25);
-        background-position: right 100%;
+        transition: background-position 0.5s, box-shadow 0.6s;
+        box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.2);
+        background-position: right 125%;
       }
 
       .footer {
         position: fixed;
         bottom: 0;
         left: 50%;
         transform: translate(-50%, 0);
-        padding-bottom: 3rem;
+        padding-bottom: 5rem;
         user-select: none;
       }
 
       .monospace {
         font-family: monospace, monospace;
       }
 
+      #secret {
+        padding: 0.5em;
+        background: #00000011;
+        border: 1px dashed lightgray;
+        border-radius: 0.2em;
+      }
+
       /* Dark Theme overrides */
       @media (prefers-color-scheme: dark) {
         body {
@@ -64,7 +69,16 @@
         }
 
         .button {
-          border: 4px solid #00000040;
+          box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.44);
+        }
+
+        .button:hover {
+          box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.4);
+        }
+
+        #secret {
+          background: #FFFFFF11;
+          border: 1px dashed black;
         }
       }
     </style>
@@ -99,7 +113,7 @@
     </script>
   </head>
   <body>
-    <div style="font-size: 32px; padding: 3rem;" class="center">
+    <div style="font-size: 32px; padding: 5rem 3rem; box-sizing: border-box;" class="center">
       <div class="button" onclick="clickThrough()">
         {{ translate "msg_reveal" }}
       </div>

diff --git a/templates/view.html b/templates/view.html
@@ -25,37 +25,42 @@
       }
 
       .button {
-        border: 4px solid transparent;
         border-radius: 50vh;
-        padding: 0.12em 0.6em 0.12em 0.6em;
+        padding: 0.2em 0.6em 0.2em 0.6em;
         width: fit-content;
-        transition: 0.5s;
-        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-        background: linear-gradient(110deg, cadetblue, darkturquoise, cadetblue) padding-box,
-                    linear-gradient(to right, darkturquoise, cadetblue) border-box;
-        background-size: 300% auto;
+        box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.22);
+        transition: background-position 0s, box-shadow 0.3s;
+        background: linear-gradient(110deg, cadetblue 0 40%, darkturquoise, cadetblue 60% 100%);
+        background-size: 250% auto;
       }
 
       .button:hover {
         cursor: pointer;
-        transition: 1s;
-        box-shadow: 4px 8px 16px 4px rgba(0,0,0,0.25);
-        background-position: right 100%;
+        transition: background-position 0.5s, box-shadow 0.6s;
+        box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.2);
+        background-position: right 125%;
       }
 
       .footer {
         position: fixed;
         bottom: 0;
         left: 50%;
         transform: translate(-50%, 0);
-        padding-bottom: 3rem;
+        padding-bottom: 5rem;
         user-select: none;
       }
 
       .monospace {
         font-family: monospace, monospace;
       }
 
+      #secret {
+        padding: 0.5em;
+        background: #00000011;
+        border: 1px dashed lightgray;
+        border-radius: 0.2em;
+      }
+
       /* Dark Theme overrides */
       @media (prefers-color-scheme: dark) {
         body {
@@ -64,7 +69,16 @@
         }
 
         .button {
-          border: 4px solid #00000040;
+          box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.44);
+        }
+
+        .button:hover {
+          box-shadow: 2px 6px 12px 4px rgba(0,0,0,0.4);
+        }
+
+        #secret {
+          background: #FFFFFF11;
+          border: 1px dashed black;
         }
       }
     </style>
@@ -85,7 +99,7 @@
     </script>
   </head>
   <body>
-    <div style="font-size: 32px; padding: 3rem; box-sizing: border-box;" class="center">
+    <div style="font-size: 32px; padding: 5rem 3rem; box-sizing: border-box;" class="center">
       <div id="secret" class="monospace">
         {{- .Secret -}}
       </div>