controls.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css">
    <style>
        body { padding: 2rem; background: transparent; color: var(--text-color); }
        .control-group { margin-bottom: 2rem; }
        label { display: block; font-size: 0.7rem; color: var(--dim-color); margin-bottom: 0.8rem; letter-spacing: 2px; }
        input[type="range"] { 
            width: 100%; 
            appearance: none; 
            background: rgba(0, 229, 255, 0.1); 
            height: 2px;
            outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            width: 12px;
            height: 12px;
            background: var(--text-color);
            border: 1px solid var(--bg-color);
            cursor: pointer;
            box-shadow: var(--glow-shadow);
        }
        .header { border-bottom: 1px solid var(--dim-color); margin-bottom: 2rem; padding-bottom: 0.5rem; }
    </style>
</head>
<body>
    <div class="header">
        <span class="window-title">SYSTEM::CRT_CALIBRATION_V1.0</span>
    </div>
    
    <!-- GEOMETRY_PINCH -->
    <div class="control-group">
        <label>SINGULARITY_BREADTH [<span id="pinch-val">0.15</span>]</label>
        <input type="range" id="pinch" min="0" max="0.8" step="0.01" value="0.15">
    </div>

    <!-- GEOMETRY_INTERVAL -->
    <div class="control-group">
        <label>GRAVITY_SPIKE_INTERVAL [<span id="p-interval-val">4</span>s]</label>
        <input type="range" id="p-interval" min="0.25" max="10" step="0.25" value="4">
    </div>

    <!-- GEOMETRY_RANDOM -->
    <div class="control-group">
        <label>STOCHASTIC_DRIFT [<span id="p-random-val">0.5</span>]</label>
        <input type="range" id="p-random" min="0" max="1" step="0.05" value="0.5">
    </div>

    <!-- NOISE_FLOOR -->
    <div class="control-group">
        <label>DECOHERENCE_FLOOR [<span id="noise-val">0.25</span>]</label>
        <input type="range" id="noise" min="0" max="1" step="0.01" value="0.25">
    </div>

    <!-- BURST_INTERVAL -->
    <div class="control-group">
        <label>CAPACITOR_CYCLE_RATE [<span id="freq-val">4</span>s]</label>
        <input type="range" id="freq" min="0.25" max="10" step="0.25" value="4">
    </div>

    <!-- SNAP_INTENSITY -->
    <div class="control-group">
        <label>BURNOUT_MAGNITUDE [<span id="snap-val">1.8</span>]</label>
        <input type="range" id="snap" min="1" max="4" step="0.1" value="1.8">
    </div>

    <!-- RAINBOW_BLEED -->
    <div class="control-group">
        <label>COLOUR_SUB_BLEED [<span id="bleed-val">0.2</span>]</label>
        <input type="range" id="bleed" min="0" max="1" step="0.01" value="0.2">
    </div>

    <!-- PHOSPHOR_TRAILS -->
    <div class="control-group">
        <label>PHOSPHOR_TRAILS [<span id="trails-val">0.3</span>]</label>
        <input type="range" id="trails" min="0" max="1" step="0.01" value="0.3">
    </div>

    <!-- STOCHASTICITY -->
    <div class="control-group">
        <label>PIXEL_STOCHASTICITY [<span id="stoch-val">0.4</span>]</label>
        <input type="range" id="stoch" min="0" max="1" step="0.01" value="0.4">
    </div>

    <!-- COMPRESSION_BUFFER -->
    <div class="control-group">
        <label>COMPRESSION_BUFFER_DRIFT [<span id="c-buffer-val">0.15</span>]</label>
        <input type="range" id="c-buffer" min="0" max="1" step="0.01" value="0.15">
    </div>

    <!-- RED_GRID_BUNCHING -->
    <div class="control-group">
        <label>GRID_BUNCHING [<span id="g-bunch-val">0.45</span>]</label>
        <input type="range" id="g-bunch" min="0" max="1" step="0.01" value="0.45">
    </div>

    <!-- RED_GRID_FALLOFF -->
    <div class="control-group">
        <label>POWER_FALLOFF [<span id="g-falloff-val">0.15</span>]</label>
        <input type="range" id="g-falloff" min="0" max="1" step="0.01" value="0.15">
    </div>

    <!-- RED_GRID_ALPHA -->
    <div class="control-group">
        <label>GRID_INTENSITY [<span id="g-alpha-val">0.4</span>]</label>
        <input type="range" id="g-alpha" min="0" max="1" step="0.01" value="0.4">
    </div>

    <script>
        const ids = ['pinch', 'p-interval', 'p-random', 'noise', 'freq', 'snap', 'bleed', 'trails', 'stoch', 'c-buffer', 'g-bunch', 'g-falloff', 'g-alpha'];
        function broadcast() {
            const config = {};
            ids.forEach(id => {
                const val = document.getElementById(id).value;
                document.getElementById(id + '-val').innerText = val;
                config[id] = parseFloat(val);
            });
            window.parent.postMessage({ type: 'CRT_UPDATE', config }, '*');
        }

        ids.forEach(id => {
            document.getElementById(id).addEventListener('input', broadcast);
        });
        
        // Initial broadcast
        window.addEventListener('load', broadcast);
    </script>
</body>
</html>