Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update layout of landingpage #94

Merged
merged 9 commits into from
Sep 11, 2023
Merged

Update layout of landingpage #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
44d902b
Update layout of landingpage
bramkragten Sep 4, 2023
adaa111
Make dialog images load lazy
bramkragten Sep 4, 2023
e22c715
Use var instead of const/let
bramkragten Sep 4, 2023
67052d3
review
bramkragten Sep 7, 2023
51b15e0
Update styles.css
bramkragten Sep 7, 2023
94e4c67
add padding to link list
bramkragten Sep 7, 2023
4aa1c7c
fix qr dialog in firefox
bramkragten Sep 7, 2023
28a6181
fix focus style
bramkragten Sep 7, 2023
b38a90a
Add error message when logs include "ERROR"
bramkragten Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
286 changes: 142 additions & 144 deletions rootfs/usr/share/www/index.html
View file
Open in desktop
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
Open in desktop
Binary file not shown.
Loading