From 3a6e753fd4271a29d2c2333b794e371aacd79344 Mon Sep 17 00:00:00 2001
From: Nico <67909777+nicolaeser@users.noreply.github.com>
Date: Sun, 2 Mar 2025 04:25:40 +0100
Subject: [PATCH] Adding advanced Styling (#1)

---
 ESP32/static/index.html | 177 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 165 insertions(+), 12 deletions(-)

diff --git a/ESP32/static/index.html b/ESP32/static/index.html
index 9945a6b..3234a9d 100644
--- a/ESP32/static/index.html
+++ b/ESP32/static/index.html
@@ -4,38 +4,194 @@
       <title>BusyLight</title>
       <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;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+         }
+
+         /* Glassmorphism Container */
+         section {
+            background: rgba(255, 255, 255, 0.1);
+            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: 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: 28px;
+            margin-bottom: 30px;
+            color: #ffffff;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+         }
+
+         /* Radio Buttons */
+         div {
+            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: 20px;
+            font-weight: 500;
+            margin-right: 15px;
+            cursor: pointer;
+         }
+
+         input[type="radio"] {
+            appearance: none;
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            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: linear-gradient(135deg, #007bff, #0056b3);
+            border: none;
+            padding: 15px 30px;
+            color: white;
+            font-size: 18px;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+         }
+
+         #colorPicker:hover {
+            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: 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: 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>
    <body onload="initForm()">
-      <h1>Status</h1>
       <section>
-
+         <h1>BusyLight Status</h1>
          <div>
             <input type="radio" name="status" id="off" value="off" onclick="putStatus(this.value)" />
             <label for="off">OFF</label>
          </div>
-        
          <div>
             <input type="radio" name="status" id="busy" value="busy" onclick="putStatus(this.value)" />
             <label for="busy">Busy</label>
          </div>
-
          <div>
             <input type="radio" name="status" id="available" value="available" onclick="putStatus(this.value)" />
             <label for="available">Available</label>
          </div>
-
          <div>
             <input type="radio" name="status" id="away" value="away" onclick="putStatus(this.value)" />
             <label for="away">Away</label>
          </div>
-
          <div>
             <input type="radio" name="status" id="colored" value="colored" onclick="openColorPicker()" />
-            <label for="colored">Colored: </label>
+            <label for="colored">Colored</label>
             <button id="colorPicker">Pick color</button>
          </div>
-
          <div>
             <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" onchange="putBrightness(this.value)"/>
             <label for="brightness">Brightness</label>
@@ -48,7 +204,6 @@
             alphaChannel: false
          };
 
-         //var colorPicker = new JSColor("colorPicker", "{preset:'default', onChange: 'putColor(this)'}")
          var colorPickerOpts = {};
          colorPickerOpts["preset"] = "rgb";
          colorPickerOpts["format"] = "rgb";
@@ -102,7 +257,6 @@
             statusRadio.checked = true;
          }
 
-
          async function putStatus(status) {
             var s = await setStatus(status);
             setColorPickerColor(status);
@@ -131,6 +285,5 @@
             var b = await setBrightness(brightness);
          }
       </script>
-
    </body>
-</html>
\ No newline at end of file
+</html>