From 5c0ff17c8bd51467fc1ee219379f20d4eff69534 Mon Sep 17 00:00:00 2001
From: Nico <67909777+nicolaeser@users.noreply.github.com>
Date: Wed, 26 Feb 2025 20:55:35 +0100
Subject: [PATCH] Update index.html

---
 ESP32/static/index.html | 149 ++++++++++++++++++++++++++++++----------
 1 file changed, 112 insertions(+), 37 deletions(-)

diff --git a/ESP32/static/index.html b/ESP32/static/index.html
index 95858b2..3234a9d 100644
--- a/ESP32/static/index.html
+++ b/ESP32/static/index.html
@@ -5,89 +5,166 @@
       <script src="static/libs/busylight-api.js"></script>
       <script src="static/libs/jscolor.min.js"></script>
       <style>
+         /* General Reset */
+         * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+         }
+
          body {
             font-family: 'Arial', sans-serif;
             background: linear-gradient(135deg, #1a1a2e, #16213e);
             color: #ffffff;
             text-align: center;
-            margin: 0;
-            padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            min-height: 100vh;
+            overflow: hidden;
          }
-         
+
+         /* Glassmorphism Container */
          section {
             background: rgba(255, 255, 255, 0.1);
-            padding: 20px;
-            border-radius: 15px;
-            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 30px;
+            border-radius: 20px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
             width: 90%;
-            max-width: 400px;
+            max-width: 500px;
+            animation: fadeIn 0.5s ease-in-out;
          }
-         
+
+         @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+         }
+
          h1 {
-            font-size: 24px;
-            margin-bottom: 20px;
+            font-size: 28px;
+            margin-bottom: 30px;
             color: #ffffff;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          }
-         
+
+         /* Radio Buttons */
          div {
-            margin: 12px 0;
+            margin: 20px 0;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            transition: all 0.3s ease;
          }
-         
+
+         div:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+         }
+
          label {
-            font-size: 18px;
+            font-size: 20px;
+            font-weight: 500;
+            margin-right: 15px;
+            cursor: pointer;
          }
-         
+
          input[type="radio"] {
             appearance: none;
-            width: 20px;
-            height: 20px;
+            width: 25px;
+            height: 25px;
             border-radius: 50%;
-            border: 2px solid #ffffff;
-            transition: 0.3s;
+            border: 3px solid #ffffff;
+            transition: all 0.3s ease;
+            cursor: pointer;
          }
-         
+
          input[type="radio"]:checked {
             background: #4CAF50;
+            border-color: #4CAF50;
+            box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
          }
-         
+
+         /* Color Picker Button */
          #colorPicker {
-            background: #007bff;
+            background: linear-gradient(135deg, #007bff, #0056b3);
             border: none;
-            padding: 10px 20px;
+            padding: 15px 30px;
             color: white;
-            font-size: 16px;
-            border-radius: 8px;
+            font-size: 18px;
+            border-radius: 12px;
             cursor: pointer;
-            transition: 0.3s;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
          }
-         
+
          #colorPicker:hover {
-            background: #0056b3;
+            background: linear-gradient(135deg, #0056b3, #003d80);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
          }
-         
+
+         /* Brightness Slider */
          input[type="range"] {
             width: 100%;
             cursor: pointer;
             -webkit-appearance: none;
-            background: #4CAF50;
-            height: 5px;
+            background: linear-gradient(135deg, #4CAF50, #45a049);
+            height: 10px;
             border-radius: 5px;
+            outline: none;
+            transition: all 0.3s ease;
          }
-         
+
          input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
+            width: 25px;
+            height: 25px;
             background: #ffffff;
             border-radius: 50%;
             cursor: pointer;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+         }
+
+         input[type="range"]:hover::-webkit-slider-thumb {
+            transform: scale(1.1);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+         }
+
+         /* Responsive Design */
+         @media (max-width: 600px) {
+            section {
+               padding: 20px;
+            }
+
+            h1 {
+               font-size: 24px;
+            }
+
+            label {
+               font-size: 18px;
+            }
+
+            input[type="radio"] {
+               width: 22px;
+               height: 22px;
+            }
+
+            #colorPicker {
+               padding: 12px 24px;
+               font-size: 16px;
+            }
+
+            input[type="range"]::-webkit-slider-thumb {
+               width: 20px;
+               height: 20px;
+            }
          }
       </style>
    </head>
@@ -127,7 +204,6 @@
             alphaChannel: false
          };
 
-         //var colorPicker = new JSColor("colorPicker", "{preset:'default', onChange: 'putColor(this)'}")
          var colorPickerOpts = {};
          colorPickerOpts["preset"] = "rgb";
          colorPickerOpts["format"] = "rgb";
@@ -181,7 +257,6 @@
             statusRadio.checked = true;
          }
 
-
          async function putStatus(status) {
             var s = await setStatus(status);
             setColorPickerColor(status);