Redesign browser GUI: drop tabs, 3-column layout, labels above sliders

- Remove tab system (nav#tabs, tab-btn, tab-content) from HTML/CSS/JS
- Permanent 3-column grid: manual controls (left, 16em) | LCD+pot (center) | progress (right, fills remaining)
- LCD panel stacks above pot SVG in center column, both hidden until connected
- Step plates no longer max-width capped, fill the right column
- Slider labels moved above the slider+readout row via flex-direction: column

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DF16nV2ispNw1C9SbvqbRQ
This commit is contained in:
2026-06-27 21:35:25 +02:00
co-authored by Claude Sonnet 4.6
parent b4e7007c4a
commit 5c2a301f1f
3 changed files with 80 additions and 99 deletions
-9
View File
@@ -875,15 +875,6 @@ document.getElementById('sud-message-ok').addEventListener('click', () => {
sendMsg('Sud', {Confirm: true});
});
document.querySelectorAll('.tab-btn').forEach((btn) => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach((c) => c.classList.remove('active'));
btn.classList.add('active');
document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
});
});
setInterval(() => {
blinkOn = !blinkOn;
stepPlates.forEach(applyLedColor);