diff --git a/client.html b/client.html
index 42b2487..283fadf 100644
--- a/client.html
+++ b/client.html
@@ -61,6 +61,26 @@
}
#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 {
position: fixed;
top: 10px;
@@ -145,6 +165,9 @@
Connecting...
+
+ ☀️ 100%
+
Idle — control will be released soon. Move your mouse to stay in control.
@@ -239,7 +262,9 @@
const queueList = document.getElementById('queue-list');
const loadingEl = document.getElementById('loading-overlay');
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 pc = null;
@@ -286,6 +311,12 @@
setMuted(!canvas.muted);
});
+ brightnessSlider.addEventListener('input', () => {
+ const val = brightnessSlider.value;
+ canvas.style.filter = `brightness(${val}%)`;
+ brightnessValue.textContent = `${val}%`;
+ });
+
function updateQueuePanel(controller, queue, restarting) {
let html = '';
if (restarting) {