Skip to content

Commit

Permalink
Update layout of landingpage (#94)
Browse files Browse the repository at this point in the history 
* Update layout of landingpage

* Make dialog images load lazy

* Use var instead of const/let

* review

* Update styles.css

* add padding to link list

* fix qr dialog in firefox

* fix focus style

* Add error message when logs include "ERROR"
  • Loading branch information
@bramkragten
bramkragten authored Sep 11, 2023
1 parent c4951ee commit 981b338
Show file tree
Hide file tree
Showing 12 changed files with 1,501 additions and 312 deletions.
286 changes: 142 additions & 144 deletions rootfs/usr/share/www/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,169 +1,167 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Preparing Home Assistant</title>
<link rel="icon" type="image/svg+xml" href="/landingpage/static/logo.svg" />
<link rel="stylesheet" href="/landingpage/static/styles.css" />
</head>
<body id="particles">
<div class="content">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Preparing Home Assistant</title>
<link rel="icon" type="image/svg+xml" href="/landingpage/static/logo.svg" />
<link rel="stylesheet" type="text/css" href="/landingpage/static/dialog-polyfill.css" />
<link rel="stylesheet" type="text/css" href="/landingpage/static/styles.css" />
</head>

<body id="particles">
<div class="header">
<img src="/landingpage/static/logo.svg" alt="Home Assistant logo" />
</div>
<div class="content">
<div class="state-normal">
<h1>Preparing Home Assistant</h1>
<h2>This may take up to 20 minutes</h2>
<div class="loading">
<div class="header">
<img src="/landingpage/static/logo.svg" alt="Home Assistant logo" />
Preparing Home&nbsp;Assistant
<div class="progress">
<div class="indeterminate"></div>
</div>
<div class="spinner" id="spinner" title="Click to show the log">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<div class="state-error">
<h1>Error installing Home Assistant</h1>
<div role="alert" class="alert">
<svg class="alert-icon" preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24">
<g>
<path
d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z">
</path>
</g>
</svg>
<div class="alert-content">
An error occured while installing Home Assistant, check the logs below for more information.
</div>
<pre id="log"></pre>
</div>
</div>
<pre id="log"></pre>
<button id="show_logs">Show details</button>
</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 class="block-container">
<a target="_blank" rel="noreferrer noopener" class="link"
href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/">
<div class="content block">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z" />
</svg>
</div>
Read our vision
</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"
>
</a>
<div class="content link block" id="community" tabindex="0">
<div class="icon community">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" />
</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"
>
</div>
Join our community
</div>
<div class="content link block" id="app" tabindex="0">
<div class="icon app">
<svg xmlns="http://www.w3.org/2000/svg" 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"
/>
d="M3,4H20A2,2 0 0,1 22,6V8H18V6H5V18H14V20H3A2,2 0 0,1 1,18V6A2,2 0 0,1 3,4M17,10H23A1,1 0 0,1 24,11V21A1,1 0 0,1 23,22H17A1,1 0 0,1 16,21V11A1,1 0 0,1 17,10M18,12V19H22V12H18Z" />
</svg>
Get the free newsletter
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="chevron"
>
</div>
Download our app
</div>
</div>

<div class="footer">
<a href="https://www.home-assistant.io/getting-started/onboarding/" target="_blank"
rel="noreferrer noopener">Help</a>
</div>

<dialog id="dialog-community">
<div class="headline">
<h1>Join our community</h1>
<form id="form" slot="content" method="dialog">
<button class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg></button>
</form>
</div>
<div class="link-list">
<a href="https://community.home-assistant.io/" target="_blank" rel="noreferrer noopener" class="link">
<div>
<img loading="lazy" src="/landingpage/static/logo.svg" />
Home Assistant forums
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
</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"
>
<a href="https://www.home-assistant.io/newsletter/" target="_blank" rel="noreferrer noopener" class="link">
<div>
<img loading="lazy" src="/landingpage/static/logo.svg" />
Building the Open Home newsletter
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
</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"
>
<a href="https://www.home-assistant.io/join-chat/" target="_blank" rel="noreferrer noopener" class="link">
<div>
<img loading="lazy" src="/landingpage/static/logo_discord.png" />
Discord chat
</div>
<svg xmlns="http://www.w3.org/2000/svg" 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"
/>
d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
</svg>
Join the Discord chat
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="chevron"
>
</a>
<a href="https://twitter.com/home_assistant/" target="_blank" rel="noreferrer noopener" class="link">
<div>
<img loading="lazy" src="/landingpage/static/logo_twitter.png" />
Twitter
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
</svg>
</a>
</div>
</dialog>

<dialog id="dialog-app">
<div class="headline">
<h1>Download app</h1>
<form id="form" slot="content" method="dialog">
<button class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg></button>
</form>
</div>
<div class="app-qr">
<a target="_blank" rel="noreferrer noopener" href="https://apps.apple.com/app/home-assistant/id1099568401?mt=8">
<img loading="lazy" src="/landingpage/static/apple.svg" alt="Download on the App Store" class="icon" />
<img loading="lazy" src="/landingpage/static/qr-apple.svg" alt="Get it on Google Play" />
</a>
<a target="_blank" rel="noreferrer noopener"
href="https://play.google.com/store/apps/details?id=io.homeassistant.companion.android">
<img loading="lazy" src="/landingpage/static/google.svg" alt="Get it on Google Play" class="icon" />
<img loading="lazy" src="/landingpage/static/qr-google.svg" alt="Get it on Google Play" />
</a>
</div>
</dialog>

<script defer src="/landingpage/static/tsparticles.min.js"></script>
<script defer src="/landingpage/static/dialog-polyfill.js"></script>
<script defer src="/landingpage/static/scripts.js"></script>
</body>

<script src="/landingpage/static/tsparticles.min.js"></script>
<script src="/landingpage/static/scripts.js"></script>
</body>
</html>
</html>
Binary file added rootfs/usr/share/www/static/Roboto-Medium.woff2
View file
Binary file not shown.
Loading

0 comments on commit 981b338

Please sign in to comment.