diff --git a/rootfs/usr/share/www/index.html b/rootfs/usr/share/www/index.html index 5b614bb..d1b0f85 100644 --- a/rootfs/usr/share/www/index.html +++ b/rootfs/usr/share/www/index.html @@ -10,64 +10,159 @@
- Home Assistant logo -
Preparing Home Assistant
+
+ Home Assistant logo + Preparing Home Assistant +
- 
-        
-
- (this can take up to 20 minutes) + 

       

 
-      

-        
While waiting, some suggestions:

-        

-          Read our founder's vision for the
-            perfect home automation.
-        

-        
-        

-          Join our community via
-          forums,
-          chat or
-          newsletter.
-        

+      

+        This may take up to 20 minutes
While waiting, some suggestions:
+      

+      
+      
+        
+          
+        
+        Read our founder's vision for perfect home automation
+        
+          
+        
+      
+      
+        
+          
+        
+        Get the free newsletter
+        
+          
+        
+      
+      
+        
+          
+        
+        Join the forums
+        
+          
+        
+      
+      
+        
+          
+        
+        Join the Discord chat
+        
+          
+        
+      
     

 
-    
     
     
   
diff --git a/rootfs/usr/share/www/static/apple-badge.svg b/rootfs/usr/share/www/static/apple-badge.svg
deleted file mode 100644
index a94fffd..0000000
--- a/rootfs/usr/share/www/static/apple-badge.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
-
-
-
-	
-	
-	
-		
-			
-			
-		
-	
-	
-		
-		
-		
-		
-		
-		
-		
-		
-	
-	
-		
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-			
-		
-	
-
-
\ No newline at end of file
diff --git a/rootfs/usr/share/www/static/apple.svg b/rootfs/usr/share/www/static/apple.svg
new file mode 100644
index 0000000..ccb36cd
--- /dev/null
+++ b/rootfs/usr/share/www/static/apple.svg
@@ -0,0 +1,46 @@
+
+  Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917
+  
+    
+      
+        
+        
+      
+      
+        
+          
+            
+            
+          
+        
+        
+          
+          
+          
+          
+          
+          
+          
+          
+        
+      
+    
+    
+      
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+      
+    
+  
+
\ No newline at end of file
diff --git a/rootfs/usr/share/www/static/google-badge.png b/rootfs/usr/share/www/static/google-badge.png
deleted file mode 100644
index 11557ec..0000000
Binary files a/rootfs/usr/share/www/static/google-badge.png and /dev/null differ
diff --git a/rootfs/usr/share/www/static/google.svg b/rootfs/usr/share/www/static/google.svg
new file mode 100644
index 0000000..0e1970e
--- /dev/null
+++ b/rootfs/usr/share/www/static/google.svg
@@ -0,0 +1,2 @@
+
+image/svg+xml
\ No newline at end of file
diff --git a/rootfs/usr/share/www/static/styles.css b/rootfs/usr/share/www/static/styles.css
index 0c1b622..1f3a963 100644
--- a/rootfs/usr/share/www/static/styles.css
+++ b/rootfs/usr/share/www/static/styles.css
@@ -15,14 +15,6 @@ body {
   font-family: Roboto, Helvetica, Arial, sans-serif;
 }
 
-a {
-  color: #03a9f4;
-}
-
-h1 {
-  margin: 20px 0 0;
-}
-
 .content {
   box-sizing: border-box;
   padding: 24px 16px;
@@ -30,36 +22,71 @@ h1 {
   max-width: 432px;
   margin: 64px auto 0;
   background-color: #ffffff;
-  border: 1px solid rgba(0, 0, 0, .12);
+  border: 1px solid rgba(0, 0, 0, 0.12);
 }
 
-.header {
+.loading {
   text-align: center;
-  font-size: 1.96em;
+}
+.header {
+  font-size: 1.7rem;
+  font-weight: 300;
+  margin-bottom: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 300;
-}
-
-.loading {
-  text-align: center;
+  gap: 16px;
 }
-.loading img {
-  max-width: 100px;
+.header img {
+  width: 48px;
+  height: 48px;
 }
 
 .read-more {
-  margin: 40px auto 16px;
+  margin: 16px auto;
   max-width: 400px;
   text-align: center;
 }
+.badges {
+  display: flex;
+  gap: 16px;
+  height: 56px;
+  margin-bottom: 8px;
+  justify-content: center;
+}
+.badges a {
+  display: contents;
+}
+.badges img {
+  min-width: 0;
+}
 .suggestion {
-  margin: 24px 0;
+  height: 56px;
+  padding: 8px 24px 8px 16px;
+  color: currentColor;
+  text-decoration: none;
+  transition: background-color 150ms;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  box-sizing: border-box;
+}
+.suggestion:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.suggestion:focus-visible {
+  background-color: rgba(0, 0, 0, 0.08);
 }
-.app-links {
-  margin-top: 8px;
+.suggestion:active {
+  background-color: rgba(0, 0, 0, 0.12);
 }
+.suggestion svg {
+  flex-shrink: 0;
+}
+.suggestion .chevron {
+  margin-left: auto;
+}
+
 .spinner {
   width: 40px;
   height: 40px;
@@ -67,7 +94,6 @@ h1 {
   position: relative;
   margin: 20px auto;
 }
-
 .double-bounce1,
 .double-bounce2 {
   width: 100%;
@@ -79,34 +105,11 @@ h1 {
   top: 0;
   left: 0;
 
-  -webkit-animation: sk-bounce 2s infinite ease-in-out;
   animation: sk-bounce 2s infinite ease-in-out;
 }
-
 .double-bounce2 {
-  -webkit-animation-delay: -1s;
   animation-delay: -1s;
 }
-
-pre {
-  display: block;
-  margin: auto;
-  max-width: 450px;
-  padding-bottom: 8px;
-  text-align: left;
-  white-space: pre-line;
-}
-
-@-webkit-keyframes sk-bounce {
-  0%,
-  100% {
-    -webkit-transform: scale(0);
-  }
-  50% {
-    -webkit-transform: scale(1);
-  }
-}
-
 @keyframes sk-bounce {
   0%,
   100% {
@@ -119,6 +122,18 @@ pre {
   }
 }
 
+pre {
+  display: block;
+  margin: auto;
+  max-width: 450px;
+  padding-bottom: 8px;
+  text-align: left;
+  white-space: pre-line;
+}
+pre:empty {
+  display: none;
+}
+
 @media (prefers-color-scheme: dark) {
   html {
     color: #e1e1e1;
@@ -126,7 +141,17 @@ pre {
 
   .content {
     background-color: #1c1c1c;
-    border-color:rgba(225, 225, 225, 0.12);
+    border-color: rgba(225, 225, 225, 0.12);
+  }
+
+  .suggestion:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  .suggestion:focus-visible {
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+  .suggestion:active {
+    background-color: rgba(255, 255, 255, 0.12);
   }
 }