spruce up ui, minor formatting (#86)

* spruce up ui, minor formatting * change to list style * update styles more * add chevrons * fix chevrons * Tweaks --------- Co-authored-by: Paulus Schoutsen <[email protected]>
home-assistant · Jun 28, 2023 · 6bfb060 · 6bfb060
1 parent 01c0a27
commit 6bfb060
Show file tree

Hide file tree

Showing 6 changed files with 264 additions and 138 deletions.
diff --git a/rootfs/usr/share/www/index.html b/rootfs/usr/share/www/index.html
@@ -10,64 +10,159 @@
   <body id="particles">
     <div class="content">
       <div class="loading">
-        <img src="/landingpage/static/logo.svg" alt="Home Assistant logo" />
-        <div class="header">Preparing Home&nbsp;Assistant</div>
+        <div class="header">
+          <img src="/landingpage/static/logo.svg" alt="Home Assistant logo" />
+          Preparing Home&nbsp;Assistant
+        </div>
         <div class="spinner" id="spinner" title="Click to show the log">
           <div class="double-bounce1"></div>
           <div class="double-bounce2"></div>
         </div>
-        <pre id="log">
-
-        </pre>
-        (this can take up to 20 minutes)
+        <pre id="log"></pre>
       </div>
 
-      <div class="read-more">
-        <h3>While waiting, some suggestions:</h3>
-        <div class="suggestion">
-          <a
-            href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/"
-            target="_blank"
-            >Read our founder's vision for the
-            perfect&nbsp;home&nbsp;automation.</a
-          >
-        </div>
-        <div id="app-links" class="suggestion">
-          Install the official Home Assistant apps
-          <div class="app-links">
-            <a
-              target="_blank"
-              href="https://apps.apple.com/app/home-assistant/id1099568401?mt=8"
-              ><img
-                alt="Get it on the Apple App Store"
-                src="/landingpage/static/apple-badge.svg"
-            /></a>
-
-            <a
-              target="_blank"
-              href="https://play.google.com/store/apps/details?id=io.homeassistant.companion.android&amp;pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"
-              ><img
-                alt="Get it on Google Play"
-                src="/landingpage/static/google-badge.png"
-            /></a>
-          </div>
-        </div>
-        <div class="suggestion">
-          Join our community via
-          <a href="https://community.home-assistant.io/" target="_blank"
-            >forums</a
-          >,
-          <a href="https://www.home-assistant.io/join-chat/" target="_blank"
-            >chat</a
-          > or
-          <a href="https://www.home-assistant.io/newsletter/" target="_blank"
-            >newsletter</a
-          >.
-        </div>
+      <h3 class="read-more">
+        This may take up to 20 minutes<br />While waiting, some suggestions:
+      </h3>
+      <div class="badges" id="app-links">
+        <a href="https://apps.apple.com/app/home-assistant/id1099568401?mt=8">
+          <img
+            src="/landingpage/static/apple.svg"
+            alt="Download on the App Store"
+          />
+        </a>
+        <a
+          href="https://play.google.com/store/apps/details?id=io.homeassistant.companion.android"
+        >
+          <img
+            src="/landingpage/static/google.svg"
+            alt="Get it on Google Play"
+          />
+        </a>
       </div>
+      <a
+        href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/"
+        class="suggestion"
+        target="_blank"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="badge"
+        >
+          <path
+            fill="currentColor"
+            d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m9 16v-2H6v2h9m3-4v-2H6v2h12Z"
+          />
+        </svg>
+        Read our founder's vision for perfect&nbsp;home&nbsp;automation
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="chevron"
+        >
+          <path
+            fill="currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </a>
+      <a
+        href="https://www.home-assistant.io/newsletter/"
+        target="_blank"
+        class="suggestion"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M20 3H4c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2M5 7h5v6H5V7m14 10H5v-2h14v2m0-4h-7v-2h7v2m0-4h-7V7h7v2Z"
+          />
+        </svg>
+        Get the free newsletter
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="chevron"
+        >
+          <path
+            fill="currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </a>
+      <a
+        href="https://community.home-assistant.io/"
+        target="_blank"
+        class="suggestion"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M17 12V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1m4-6h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1Z"
+          />
+        </svg>
+        Join the forums
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="chevron"
+        >
+          <path
+            fill="currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </a>
+      <a
+        href="https://www.home-assistant.io/join-chat/"
+        target="_blank"
+        class="suggestion"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"
+          />
+        </svg>
+        Join the Discord chat
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="chevron"
+        >
+          <path
+            fill="currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </a>
     </div>
 
-    <script></script>
     <script src="/landingpage/static/tsparticles.min.js"></script>
     <script src="/landingpage/static/scripts.js"></script>
   </body>

diff --git a/rootfs/usr/share/www/static/apple-badge.svg b/rootfs/usr/share/www/static/apple-badge.svg