settings.html

<div>
    <label class="text-sm font-medium text-gray-400 mb-2 block">Split Screen</label>
    <div class="flex items-center gap-3 mt-2">
        <label class="text-sm text-gray-300 mr-2">Default layout:</label>
        <select id="splitscreen-default-layout" class="bg-dark-600 border border-gray-700 rounded-lg px-2 py-1.5 text-xs text-gray-300 outline-none">
            <option value="top-bottom">Top / Bottom (2P)</option>
            <option value="left-right">Left / Right (2P)</option>
            <option value="tri-top">Tri — 1 Top / 2 Bottom (3P)</option>
            <option value="tri-bottom">Tri — 2 Top / 1 Bottom (3P)</option>
            <option value="quad">Quad (4P)</option>
        </select>
    </div>
    <div class="flex items-center gap-3 mt-3">
        <label class="text-sm text-gray-300 cursor-pointer flex items-center gap-2">
            <input type="checkbox" id="splitscreen-always-split" class="accent-blue-500 w-4 h-4">
            Always enter split screen
        </label>
        <span class="text-xs text-gray-500">Automatically split every song on play</span>
    </div>
    <div class="mt-4">
        <label class="text-sm text-gray-300 block mb-1">LAN room key</label>
        <div class="flex items-center gap-3">
            <code id="splitscreen-room-key" class="text-base font-mono tracking-widest text-blue-300">——————</code>
            <button type="button" id="splitscreen-room-key-regen" class="bg-dark-600 border border-gray-700 rounded-lg px-2 py-1 text-xs text-gray-300 cursor-pointer">Regenerate</button>
        </div>
        <span class="text-xs text-gray-500 block mt-1">
            Devices on your network join a shared panel at <code>http://&lt;this-machine&gt;:&lt;port&gt;/?ss=KEY</code>.
            The key is permanent so viewers can bookmark it; regenerating invalidates old bookmarks.
        </span>
    </div>
</div>