Update index.html

ESP32/static/index.html

@@ -5,39 +5,146 @@
       <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;
+            backdrop-filter: blur(10px);
-            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
-            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
+            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: 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;
-            margin-bottom: 20px;
-            color: #ffffff;
-         }
-         
-         div {
-            margin: 12px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
             }
 
             label {
@@ -45,49 +152,19 @@
             }
 
             input[type="radio"] {
-            appearance: none;
+               width: 22px;
-            width: 20px;
+               height: 22px;
-            height: 20px;
-            border-radius: 50%;
-            border: 2px solid #ffffff;
-            transition: 0.3s;
-         }
-         
-         input[type="radio"]:checked {
-            background: #4CAF50;
             }
 
             #colorPicker {
-            background: #007bff;
+               padding: 12px 24px;
-            border: none;
-            padding: 10px 20px;
-            color: white;
                font-size: 16px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: 0.3s;
-         }
-         
-         #colorPicker:hover {
-            background: #0056b3;
-         }
-         
-         input[type="range"] {
-            width: 100%;
-            cursor: pointer;
-            -webkit-appearance: none;
-            background: #4CAF50;
-            height: 5px;
-            border-radius: 5px;
             }
 
             input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
                width: 20px;
                height: 20px;
-            background: #ffffff;
+            }
-            border-radius: 50%;
-            cursor: pointer;
          }
       </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);