From 40dc31e27ffcae259f894d66f7bf50101f302647 Mon Sep 17 00:00:00 2001
From: Anupam Kumar <kyteinsky@gmail.com>
Date: Fri, 15 Nov 2024 20:30:25 +0530
Subject: [PATCH] enh: auto dark mode in installing status page

and formatting

Signed-off-by: Anupam Kumar <kyteinsky@gmail.com>
---
 docker/data/installing.html | 175 +++++++++++++++++++++---------------
 1 file changed, 103 insertions(+), 72 deletions(-)
diff --git a/docker/data/installing.html b/docker/data/installing.html
index fc2ca2a..85ef798 100644
--- a/docker/data/installing.html
+++ b/docker/data/installing.html
@@ -1,75 +1,106 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta http-equiv="refresh" content="1" />
-        <meta charset="utf-8">
-        <style> 
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  margin: auto;
-  max-width: 700px;
-}
 
-.lds-ellipsis {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-}
-.lds-ellipsis div {
-  position: absolute;
-  top: 33px;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  background: #000;
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-.lds-ellipsis div:nth-child(1) {
-  left: 8px;
-  animation: lds-ellipsis1 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(2) {
-  left: 8px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(3) {
-  left: 32px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(4) {
-  left: 56px;
-  animation: lds-ellipsis3 0.6s infinite;
-}
-@keyframes lds-ellipsis1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes lds-ellipsis3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-@keyframes lds-ellipsis2 {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(24px, 0);
-  }
-}
-        </style>
-    </head>
-    <body>
-        <h1>Installing container</h1>
-        <p>Please wait until the server is ready. This page will redirect you to the login once done.</p>
-        <h2>Log:</h2>
-        <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-        <pre>
\ No newline at end of file
+<head>
+    <meta http-equiv="refresh" content="1" />
+    <meta charset="utf-8">
+    <style>
+        :root {
+            --font-color: #333;
+            --background-color: #fff;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --font-color: #eee;
+                --background-color: #1a1a1a;
+            }
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            margin: auto;
+            max-width: 800px;
+            color: var(--font-color);
+            background-color: var(--background-color);
+        }
+
+        .lds-ellipsis {
+            display: inline-block;
+            position: relative;
+            width: 80px;
+            height: 80px;
+        }
+
+        .lds-ellipsis div {
+            position: absolute;
+            top: 33px;
+            width: 13px;
+            height: 13px;
+            border-radius: 50%;
+            background: var(--font-color);
+            animation-timing-function: cubic-bezier(0, 1, 1, 0);
+        }
+
+        .lds-ellipsis div:nth-child(1) {
+            left: 8px;
+            animation: lds-ellipsis1 0.6s infinite;
+        }
+
+        .lds-ellipsis div:nth-child(2) {
+            left: 8px;
+            animation: lds-ellipsis2 0.6s infinite;
+        }
+
+        .lds-ellipsis div:nth-child(3) {
+            left: 32px;
+            animation: lds-ellipsis2 0.6s infinite;
+        }
+
+        .lds-ellipsis div:nth-child(4) {
+            left: 56px;
+            animation: lds-ellipsis3 0.6s infinite;
+        }
+        @keyframes lds-ellipsis1 {
+            0% {
+                transform: scale(0);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+
+        @keyframes lds-ellipsis3 {
+            0% {
+                transform: scale(1);
+            }
+
+            100% {
+                transform: scale(0);
+            }
+        }
+
+        @keyframes lds-ellipsis2 {
+            0% {
+                transform: translate(0, 0);
+            }
+
+            100% {
+                transform: translate(24px, 0);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Installing container</h1>
+    <p>Please wait until the server is ready. This page will redirect you to the login once done.</p>
+    <h2>Log:</h2>
+    <div class="lds-ellipsis">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <pre>
\ No newline at end of file
