UNLOZE/webclient-css
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added brightness slider

Browse Source
This commit is contained in:
jenz 2026-07-05 00:35:35 +01:00
parent 28d78f0f0e
commit d8d03cdf5a
1 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client.html
View File

@ -61,6 +61,26 @@
} }
#idle-warning.visible { display: block; } #idle-warning.visible { display: block; }
#brightness-control {
position: fixed;
bottom: 40px;
left: 10px;
background: rgba(0,0,0,0.7);
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
color: #fff;
font-family: monospace;
}
#brightness-control input[type=range] {
width: 80px;
accent-color: #4fc;
cursor: pointer;
}
#sound-toggle { #sound-toggle {
position: fixed; position: fixed;
top: 10px; top: 10px;
@ -145,6 +165,9 @@
<body> <body>
<div id="status">Connecting...</div> <div id="status">Connecting...</div>
<button id="sound-toggle">🔇 Unmute</button> <button id="sound-toggle">🔇 Unmute</button>
<div id="brightness-control">
☀️ <input type="range" id="brightness-slider" min="50" max="200" value="100" step="5"> <span id="brightness-value">100%</span>
</div>
<div id="idle-warning">Idle — control will be released soon. Move your mouse to stay in control.</div> <div id="idle-warning">Idle — control will be released soon. Move your mouse to stay in control.</div>
@ -240,6 +263,8 @@
const loadingEl = document.getElementById('loading-overlay'); const loadingEl = document.getElementById('loading-overlay');
const idleWarnEl = document.getElementById('idle-warning'); const idleWarnEl = document.getElementById('idle-warning');
const soundToggleEl = document.getElementById('sound-toggle'); const soundToggleEl = document.getElementById('sound-toggle');
const brightnessSlider = document.getElementById('brightness-slider');
const brightnessValue = document.getElementById('brightness-value');
let sigWs = null; let sigWs = null;
let pc = null; let pc = null;
@ -286,6 +311,12 @@
setMuted(!canvas.muted); setMuted(!canvas.muted);
}); });
brightnessSlider.addEventListener('input', () => {
const val = brightnessSlider.value;
canvas.style.filter = `brightness(${val}%)`;
brightnessValue.textContent = `${val}%`;
});
function updateQueuePanel(controller, queue, restarting) { function updateQueuePanel(controller, queue, restarting) {
let html = ''; let html = '';
if (restarting) { if (restarting) {