Modernize login and admin pages

webapi/public/css/vspd.css

@@ -67,3 +67,51 @@ footer .code {
         text-align: center;
     }
 }
+
+.btn {
+    outline: 0;
+    -webkit-box-shadow: 1px 3px 14px 0px rgba(0,0,0,0.19);
+            box-shadow: 1px 3px 14px 0px rgba(0,0,0,0.19);
+}
+
+.btn:focus, .btn:active,
+.btn-primary:not(:disabled):not(.disabled):active:focus,
+.btn-primary:not(:disabled):not(.disabled).active:focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border-color: transparent;
+}
+
+.btn-small {
+    padding: 6px 10px;
+    font-size: 13px;
+}
+
+.block__content h1 {
+    color: #091440;
+    font-size: 24px;
+    padding-bottom: 10px;
+}
+
+.block__content {
+    background-color: #ffffff;
+    padding: 20px 30px; 
+    color: #3D5873;
+    line-height: 1.4;
+}
+
+.block__content th {
+    font-weight: normal;
+    padding-right: 15px;
+    text-align: right;
+}
+
+.block__content table td {
+    word-break: break-word;
+    font-family: "vspd-code";
+}
+
+.block__content table th {
+    vertical-align: top;
+    white-space: nowrap;
+}

webapi/templates/admin.html

@@ -1,25 +1,44 @@
 {{ template "header" . }}
 
+<div class="vsp-overview pt-4 pb-3 mb-3">
+    <div class="container">
+
+        <div class="d-flex flex-wrap">
+            <h1 class="mr-auto text-nowrap">Admin Panel</h1>
+            
+            <div class="row">
+                <a class="m-2 btn btn-primary btn-small" href="/admin/backup" download>Backup</a>
+                
+                <form class="p-2" action="/admin/logout" method="post">
+                    <button type="submit" class="btn btn-primary btn-small">Logout</button>
+                </form>
+            </div>
+        </div>
+        
+
         {{ template "vsp-stats" .VspStats }}
 
-<section>
+    </div>
-    <h3>Admin</h3>
+</div>
 
-    <a class="btn btn-primary" href="/admin/backup" download>Backup Database</a>
+<div class="container">
+
+    <div class="row">
+
+        <div class="col-12 p-3">
+            <div class="block__content">
+                <h1>Ticket Search</h1>
     
-    <form class="my-2" action="/admin/logout" method="post">
-        <button class="btn btn-primary" type="submit">Logout</button>
-    </form>
 
                 <form class="my-2" action="/admin/ticket" method="post">
                     <input type="text" name="hash" size="64" minlength="64" maxlength="64" required placeholder="Ticket hash">
-        <button class="btn btn-primary" type="submit">Search</button>
+                    <button class="ml-3 btn btn-primary" type="submit">Search</button>
                 </form>
 
                 {{ with .SearchResult }}
                     {{ if .Found }}
                         {{ with .Ticket }}
-                <table class="table table-dark my-2 ticket-table">
+                            <table class="table mt-4 mb-0">
                                 <tr>
                                     <th>Hash</th>
                                     <td>{{ .Hash }}</td>
@@ -77,10 +96,15 @@
                             </table>
                         {{ end }}
                     {{ else }}
-            <p>No ticket with hash <span class="code">"{{ .Hash }}"</span></p>
+                        <p>No ticket found with hash <span class="code">{{ .Hash }}</span></p>
                     {{ end }}
                 {{ end }}
 
-</section>
+            </div>
+        </div>
+
+    </div>
+
+</div>
 
 {{ template "footer" . }}

webapi/templates/login.html

@@ -1,15 +1,15 @@
 {{ template "header" . }}
 
-<section>
+<div class="py-4 container">
-    <h3>Login</h3>
+    <h1>Login</h1>
     <form action="/admin" method="post">
         <input type="password" name="password" required placeholder="Enter password">
-        <button class="btn btn-primary" type="submit">Login</button>
+        <button class="ml-3 btn btn-primary" type="submit">Login</button>
     </form>
 
     {{ if .IncorrectPassword }}
         <p>Incorrect password</p>
     {{ end }}
-</section>
+</div>
 
 {{ template "footer" . }}