control-options.html

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>VisualThing options</title><style>
*{box-sizing:border-box}body{margin:0;padding:8px;background:#130c1d;color:#fff;font:17px Arial,sans-serif;user-select:none;-webkit-user-select:none}h2{font-size:15px;color:#cbb1dc;margin:0 0 8px}section{margin-bottom:14px}.effects{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}button{font:inherit;min-height:42px;color:#fff;background:#352044;border:1px solid #745186;border-radius:9px;padding:8px;touch-action:manipulation}button[aria-pressed=true]{background:#27ead5;color:#100a18;border-color:#27ead5}label{display:flex;align-items:center;gap:12px;margin:10px 0;min-height:38px}label span{width:170px;flex-shrink:0}input{flex:1;min-width:70px;accent-color:#27ead5}output{width:48px;text-align:right}.pages{display:flex;gap:7px;flex-wrap:wrap}#adjustments{display:grid;grid-template-columns:1fr}body::-webkit-scrollbar{width:5px}body::-webkit-scrollbar-thumb{background:#744193;border-radius:5px}
</style></head><body><section><h2>Visualizers</h2><div id="effects" class="effects"></div></section><section id="adjustments"><h2>Adjust</h2></section><section><div class="pages"><button id="pause">Pause visuals</button><button data-page="visualizer">Full VisualThing</button><button data-page="lyrics">Live lyrics</button><button data-page="queue">Up next</button><button data-page="recent">Recent</button><button data-page="devices">Speakers</button></div></section><script src="control-options.js"></script></body></html>