mkrieger/busylight
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update index.html

Browse source
This commit is contained in:
Nico 2025-02-26 20:55:35 +01:00 • committed by GitHub
parent 441747df03
commit 5c0ff17c8b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 112 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

149
ESP32/static/index.html
View file

@ -5,89 +5,166 @@
<script src="static/libs/busylight-api.js"></script> <script src="static/libs/busylight-api.js"></script>
<script src="static/libs/jscolor.min.js"></script> <script src="static/libs/jscolor.min.js"></script>
<style> <style>
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e); background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
margin: 0;
padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; min-height: 100vh;
overflow: hidden;
} }
/* Glassmorphism Container */
section { section {
background: rgba(255, 255, 255, 0.1); 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%; 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 { h1 {
font-size: 24px; font-size: 28px;
margin-bottom: 20px; margin-bottom: 30px;
color: #ffffff; color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
} }
/* Radio Buttons */
div { div {
margin: 12px 0; margin: 20px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 { label {
font-size: 18px; font-size: 20px;
font-weight: 500;
margin-right: 15px;
cursor: pointer;
} }
input[type="radio"] { input[type="radio"] {
appearance: none; appearance: none;
width: 20px; width: 25px;
height: 20px; height: 25px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #ffffff; border: 3px solid #ffffff;
transition: 0.3s; transition: all 0.3s ease;
cursor: pointer;
} }
input[type="radio"]:checked { input[type="radio"]:checked {
background: #4CAF50; background: #4CAF50;
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
} }
/* Color Picker Button */
#colorPicker { #colorPicker {
background: #007bff; background: linear-gradient(135deg, #007bff, #0056b3);
border: none; border: none;
padding: 10px 20px; padding: 15px 30px;
color: white; color: white;
font-size: 16px; font-size: 18px;
border-radius: 8px; border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
} }
#colorPicker:hover { #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"] { input[type="range"] {
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
background: #4CAF50; background: linear-gradient(135deg, #4CAF50, #45a049);
height: 5px; height: 10px;
border-radius: 5px; border-radius: 5px;
outline: none;
transition: all 0.3s ease;
} }
input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 20px; width: 25px;
height: 20px; height: 25px;
background: #ffffff; background: #ffffff;
border-radius: 50%; border-radius: 50%;
cursor: pointer; 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> </style>
</head> </head>
@ -127,7 +204,6 @@
alphaChannel: false alphaChannel: false
}; };
//var colorPicker = new JSColor("colorPicker", "{preset:'default', onChange: 'putColor(this)'}")
var colorPickerOpts = {}; var colorPickerOpts = {};
colorPickerOpts["preset"] = "rgb"; colorPickerOpts["preset"] = "rgb";
colorPickerOpts["format"] = "rgb"; colorPickerOpts["format"] = "rgb";
@ -181,7 +257,6 @@
statusRadio.checked = true; statusRadio.checked = true;
} }
async function putStatus(status) { async function putStatus(status) {
var s = await setStatus(status); var s = await setStatus(status);
setColorPickerColor(status); setColorPickerColor(status);