Design

web/index.html

@@ -3,35 +3,52 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>DynDns Updater</title>
+  <title>DynDNS Updater</title>
   <link rel="stylesheet" href="beer.min.css">
   <script type="module" src="beer.min.js" defer></script>
   <script src="alpine.min.js" defer></script>
+  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <meta name="apple-mobile-web-app-title" content="DynDNS Updater" />
+  <link rel="manifest" href="/site.webmanifest" />
 </head>
 
 <body>
   <main x-data="data" class="responsive">
-    <h2>DynDns Updater</h2>
-    <button class="small float-right" x-on:click="update">
-      <i>refresh</i>
-      <span>Update</span>
-    </button>
-    <table>
-      <tbody>
-        <tr>
-          <th>IPv4</td>
-          <td><span x-text="addrs.ipv4"></span></td>
-        </tr>
-        <tr>
-          <th>IPv6</td>
-          <td><span x-text="addrs.ipv6"></span></td>
-        </tr>
-        <tr>
-          <th>Last Update</td>
-          <td><span x-text="niceTime(lastUpdate)"></span></td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="row header">
+      <img src="icon.svg" class="large" />
+      <div class="max">
+        <h5>DynDNS Updater</h5>
+        <div>Keep your DNS records up to date</div>
+      </div>
+    </div>
+    <article class="secondary-container">
+      <h6>
+        Current IPs
+        <button class="small float-right" x-on:click="update">
+          <i>refresh</i>
+          <span>Update</span>
+        </button>
+      </h6>
+      <table>
+        <tbody>
+          <tr>
+            <th>IPv4</td>
+            <td><span x-text="addrs.ipv4"></span></td>
+          </tr>
+          <tr>
+            <th>IPv6</td>
+            <td><span x-text="addrs.ipv6"></span></td>
+          </tr>
+          <tr>
+            <th>Last Update</td>
+            <td><span x-text="niceTime(lastUpdate)"></span></td>
+          </tr>
+        </tbody>
+      </table>
+    </article>
     <template x-for="domain in domains">
       <article>
         <h6>
@@ -152,7 +169,20 @@
   <style>
     main {
       overflow: unset;
-      margin-top: 2rem;
+      margin-top: 2rem !important;
+    }
+
+    .header {
+      margin-bottom: 2rem;
+    }
+
+    table {
+      margin: 0 !important;
+    }
+
+    .logo {
+      width: 5rem;
+      height: 5rem;
     }
 
     .float-right {