From 6bfb0605a381874d3622bae3774562f202d2d18c Mon Sep 17 00:00:00 2001 From: Kendell R Date: Wed, 28 Jun 2023 07:54:41 -0700 Subject: [PATCH] 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 --- rootfs/usr/share/www/index.html | 193 ++++++++++++++----- rootfs/usr/share/www/static/apple-badge.svg | 42 ---- rootfs/usr/share/www/static/apple.svg | 46 +++++ rootfs/usr/share/www/static/google-badge.png | Bin 7734 -> 0 bytes rootfs/usr/share/www/static/google.svg | 2 + rootfs/usr/share/www/static/styles.css | 119 +++++++----- 6 files changed, 264 insertions(+), 138 deletions(-) delete mode 100644 rootfs/usr/share/www/static/apple-badge.svg create mode 100644 rootfs/usr/share/www/static/apple.svg delete mode 100644 rootfs/usr/share/www/static/google-badge.png create mode 100644 rootfs/usr/share/www/static/google.svg 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 11557ec62a281d5d79e028a8071a3170b791781c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 7734
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

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);
   }
 }