iGoX/busylight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
iGoX
2026-03-21 01:22:32 +01:00
parent d1c9e3f225
commit e95c8e75e9
75 changed files with 3783 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
ESP32/static/index.html Normal file
View File

@@ -0,0 +1,289 @@
<!doctype html>
<html>
<head>
<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()">
<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>
<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>
</div>
</section>
<script>
jscolor.presets.rgb = {
format: 'rgb',
alphaChannel: false
};
var colorPickerOpts = {};
colorPickerOpts["preset"] = "rgb";
colorPickerOpts["format"] = "rgb";
colorPickerOpts["alphaChannel"] = false;
colorPickerOpts["onChange"] = "putColor(this)";
var colorPicker = new JSColor("#colorPicker", colorPickerOpts);
async function initForm() {
var s = await getStatus();
var c = await getColor();
var b = await getBrightness();
var statusRadio;
switch (s.status) {
case 'off':
statusRadio = document.getElementById('off');
break;
case 'busy':
statusRadio = document.getElementById('busy');
break;
case 'available':
statusRadio = document.getElementById('available');
break;
case 'away':
statusRadio = document.getElementById('away');
break;
case 'colored':
statusRadio = document.getElementById('colored');
colorPicker.fromString('rgb(' + c.color.r + ',' + c.color.g + ',' + c.color.b + ')');
break;
}
statusRadio.checked = true;
brightnessRange = document.getElementById('brightness');
brightnessRange.value = b.brightness * 100;
setColorPickerColor(s.status);
}
function openColorPicker() {
colorPicker.show();
}
async function putColor(picker) {
var color = {};
color.r = Math.round(picker.channel('R'));
color.g = Math.round(picker.channel('G'));
color.b = Math.round(picker.channel('B'));
var s = await setColor(color);
statusRadio = document.getElementById('colored');
statusRadio.checked = true;
}
async function putStatus(status) {
var s = await setStatus(status);
setColorPickerColor(status);
}
function setColorPickerColor(status) {
switch (status) {
case 'off':
colorPicker.fromString('rgb(0,0,0)');
break;
case 'busy':
colorPicker.fromString('rgb(255,0,0)');
break;
case 'available':
colorPicker.fromString('rgb(0,255,0)');
break;
case 'away':
colorPicker.fromString('rgb(246,190,0)');
break;
}
}
async function putBrightness(value) {
var brightness = {};
brightness.brightness = value/100;
var b = await setBrightness(brightness);
}
</script>
</body>
</html>