Mercurial > lbo > hg > analyrics

changeset 42:dfef5a8263c3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Make login form more beautiful
author Lewin Bormann <lbo@spheniscida.de>
date Mon, 18 Jul 2022 08:21:35 -0700
parents 0534f0e4ea7d
children 2ecb25f3adfe
files assets/index.html.hbs assets/login.html.hbs
diffstat 2 files changed, 30 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- a/assets/index.html.hbs	Mon Jul 18 08:12:42 2022 -0700
+++ b/assets/index.html.hbs	Mon Jul 18 08:21:35 2022 -0700
@@ -75,6 +75,7 @@
     {{#if flash}}<div id="flash"><span id="flashtext">{{flash}}<span></div>{{/if}}
     {{#if error}}<div id="error"><span id="errortext">{{error}}</span></div>{{/if}}
 
+    {{#if loggedin}}
     <!-- Time navigation -->
     <div class="timeindicator">
         from {{ date.today }} ({{date.duration}} days)
@@ -90,7 +91,6 @@
 
 
     <!-- Plots -- only shown when logged in. -->
-    {{#if loggedin}}
     <div class="plotrow row1">
         <div class="plotframe fullwidth">
         <div class="plottitle">Visits and Sessions</div>
--- a/assets/login.html.hbs	Mon Jul 18 08:12:42 2022 -0700
+++ b/assets/login.html.hbs	Mon Jul 18 08:21:35 2022 -0700
@@ -4,15 +4,39 @@
 
         <meta name="robots" content="noindex">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <style>
+            #logo { color: #22bb22; font-size: 20pt; font-style: bold; }
+            #header { color: #bb2222; }
+            #flashtext {  }
+            .flash { text-align: center; border-style: solid; border-color: #22aa22; margin-left: 30%; margin-right: 30%; }
+
+            #loginformbox {  display: flex; justify-content: center; }
+            #loginform { }
+            #innerformbox { width: 25em; text-align: right; }
+            .entryline { padding: 3px; }
+            .submitbutton { text-align: right; padding: 1em; }
+
+            input { height: 2.5em; border: lightgray solid; }
+            input:focus { outline: 0; }
+            label { }
+        </style>
     </head>
     <body>
+    <div id="header">
+        <span id="logo">AnaLyrics</span>
+    </div>
 {{#if flash}}<div class="flash">{{flash}}</div>{{/if}}
 
-        <form action="" method="POST">
-            <label>User name: </label><input type="text" name="username" />
-            <label>Password: </label><input type="text" name="password" />
-            <input type="submit" value="Log in" />
-        </form>
+        <div id="loginformbox">
+            <div id="innerformbox">
+            <form action="" method="POST" id="loginform">
+                <div class="entryline"><label>User name: </label><input type="text" name="username" /></div>
+                <div class="entryline"><label>Password: </label><input type="password" name="password" /></div>
+                <div class="submitbutton"><input type="submit" value="Log in" /></div>
+            </form>
+            </div>
+        </div>
 
 
     </body>