index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PanelDisplayTools - Web Tools</title>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg: #0f1419;
            --surface: #1a1f26;
            --border: #2d3640;
            --text: #e6edf3;
            --text-dim: #8b949e;
            --accent: #00e676;
            --hover: #00c853;
            --card-hover: #252b33;
        }

        body {
            font-family: 'IBM Plex Mono', monospace;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .container {
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 1.75rem;
            border-bottom: 2px solid var(--border);
        }

        h1 {
            font-family: 'JetBrains Mono', monospace;
            font-size: 3rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 0.5rem;
        }

        .subtitle {
            color: var(--text-dim);
            font-size: 1rem;
            margin-top: 0.75rem;
        }

        /* ---- the primary tools: large side-by-side cards ---- */
        .primary-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .tool-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 2rem;
            text-decoration: none;
            color: var(--text);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--accent);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .tool-card:hover {
            background: var(--card-hover);
            border-color: var(--accent);
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 230, 118, 0.1);
        }

        .tool-card:hover::before {
            transform: scaleY(1);
        }

        .tool-card h2 {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.4rem;
            color: var(--accent);
            margin-bottom: 0.75rem;
            font-weight: 700;
        }

        .tool-card p {
            color: var(--text-dim);
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .tool-card.big {
            padding: 2.25rem 2.5rem;
        }

        .tool-card.big .big-head {
            display: flex;
            align-items: center;
            gap: 1.4rem;
            margin-bottom: 1.1rem;
        }

        .tool-card.big .tool-icon {
            flex: 0 0 auto;
            width: 76px;
            height: 76px;
        }

        .tool-card.big h2 {
            font-size: 1.9rem;
            margin-bottom: 0.35rem;
        }

        .tool-card.big .tagline {
            color: var(--text);
            font-size: 0.95rem;
        }

        .tool-card.big p {
            font-size: 0.95rem;
        }


        /* ---- grouped secondary tools ---- */
        .group-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-dim);
            margin: 2.25rem 0 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .group-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        .group-note {
            font-size: 0.8rem;
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0;
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .tools-grid.small .tool-card {
            padding: 1.3rem 1.5rem;
        }

        .tools-grid.small .tool-card h2 {
            font-size: 1.05rem;
            margin-bottom: 0.5rem;
        }

        .tools-grid.small .tool-card p {
            font-size: 0.82rem;
            margin-bottom: 0.75rem;
        }

        .tools-grid.legacy .tool-card {
            opacity: 0.66;
        }

        .tools-grid.legacy .tool-card:hover {
            opacity: 1;
        }

        .tools-grid.legacy .tool-card h2 {
            color: var(--text-dim);
        }

        .supersede {
            display: block;
            font-size: 0.75rem;
            color: var(--text-dim);
            font-style: italic;
            margin-bottom: 0.75rem;
        }

        .tool-card .status {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status.ready {
            background: rgba(0, 230, 118, 0.15);
            color: var(--accent);
            border: 1px solid var(--accent);
        }

        .status.coming-soon {
            background: rgba(139, 148, 158, 0.15);
            color: var(--text-dim);
            border: 1px solid var(--border);
        }

        .status.in-dev {
            background: rgba(255, 152, 0, 0.15);
            color: #ff9800;
            border: 1px solid #ff9800;
        }

        .status.beta {
            background: rgba(41, 182, 246, 0.15);
            color: #29b6f6;
            border: 1px solid #29b6f6;
        }

        .status.legacy-chip {
            background: rgba(139, 148, 158, 0.12);
            color: var(--text-dim);
            border: 1px solid var(--border);
        }

        .tool-card.disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .tool-card.disabled:hover {
            transform: none;
            background: var(--surface);
            border-color: var(--border);
            box-shadow: none;
        }

        footer {
            text-align: center;
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 2px solid var(--border);
            color: var(--text-dim);
            font-size: 0.85rem;
        }

        footer a {
            color: var(--accent);
            text-decoration: none;
            transition: color 0.2s;
        }

        footer a:hover {
            color: var(--hover);
        }

        .info-box {
            background: rgba(139, 148, 158, 0.08);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 1rem 1.25rem;
            margin-top: 2rem;
            font-size: 0.85rem;
            color: var(--text-dim);
        }

        .info-box strong {
            color: var(--text);
        }

        @media (max-width: 900px) {
            .primary-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }

            .tools-grid {
                grid-template-columns: 1fr;
            }
        }
        /* Release-tier badge (js/build-channel.js; docs/development/release-process.md) */
        .wdt-channel{font:600 10px/1.6 'JetBrains Mono', monospace;padding:0 6px;border-radius:9px;margin-left:8px;white-space:nowrap;cursor:help;vertical-align:middle}
        .wdt-ch-prod{color:#8b949e;border:1px solid #2d3640}
        .wdt-ch-next{color:#0f1419;background:#ff9100;font-weight:700}
        .wdt-ch-local{color:#8b949e;border:1px dashed #2d3640}
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>PanelDisplayTools<span id="tierBadge"></span></h1>
            <p class="subtitle">Web-based tools for LED panel arena design and pattern creation</p>
        </header>

        <!-- Primary tools -->
        <div class="primary-grid">
            <a href="pattern_editor.html" class="tool-card big">
                <div class="big-head">
                    <!-- Pattern Designer icon: LED dot matrix with a lit wave -->
                    <svg class="tool-icon" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <rect x="2" y="2" width="60" height="60" rx="11" fill="none" stroke="#2d3640" stroke-width="2.5"/>
                        <g fill="#3a444f">
                            <circle cx="12" cy="12" r="2.4"/><circle cx="20" cy="12" r="2.4"/><circle cx="28" cy="12" r="2.4"/><circle cx="36" cy="12" r="2.4"/><circle cx="44" cy="12" r="2.4"/><circle cx="52" cy="12" r="2.4"/>
                            <circle cx="12" cy="20" r="2.4"/><circle cx="28" cy="20" r="2.4"/><circle cx="36" cy="20" r="2.4"/><circle cx="52" cy="20" r="2.4"/>
                            <circle cx="12" cy="28" r="2.4"/><circle cx="20" cy="28" r="2.4"/><circle cx="36" cy="28" r="2.4"/><circle cx="44" cy="28" r="2.4"/><circle cx="52" cy="28" r="2.4"/>
                            <circle cx="20" cy="36" r="2.4"/><circle cx="28" cy="36" r="2.4"/><circle cx="44" cy="36" r="2.4"/><circle cx="52" cy="36" r="2.4"/>
                            <circle cx="12" cy="44" r="2.4"/><circle cx="20" cy="44" r="2.4"/><circle cx="28" cy="44" r="2.4"/><circle cx="36" cy="44" r="2.4"/><circle cx="52" cy="44" r="2.4"/>
                            <circle cx="12" cy="52" r="2.4"/><circle cx="20" cy="52" r="2.4"/><circle cx="28" cy="52" r="2.4"/><circle cx="36" cy="52" r="2.4"/><circle cx="44" cy="52" r="2.4"/><circle cx="52" cy="52" r="2.4"/>
                        </g>
                        <!-- the lit sine wave -->
                        <g fill="#00e676">
                            <circle cx="12" cy="36" r="3.1"/>
                            <circle cx="20" cy="20" r="3.1"/>
                            <circle cx="28" cy="28" r="3.1"/>
                            <circle cx="36" cy="44" r="3.1"/>
                            <circle cx="44" cy="44" r="3.1"/>
                            <circle cx="44" cy="20" r="3.1"/>
                            <circle cx="52" cy="36" r="3.1"/>
                        </g>
                    </svg>
                    <div>
                        <h2>Pattern Designer</h2>
                        <span class="tagline">Design what the fly sees</span>
                    </div>
                </div>
                <p>Draw, generate, and combine full-arena patterns — gratings, starfields, spherical motion — with 2D grid editing and live 3D preview. Save patterns locally or push them straight to your repo.</p>
                <span class="status beta">Beta</span>
            </a>

            <a href="arena_studio.html" class="tool-card big">
                <div class="big-head">
                    <!-- Arena Studio icon: top-down panel ring with a play mark -->
                    <svg class="tool-icon" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <g>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#00e676" transform="rotate(0 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#00e676" transform="rotate(30 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#00e676" transform="rotate(60 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#3a444f" transform="rotate(90 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#3a444f" transform="rotate(120 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#00e676" transform="rotate(150 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#00e676" transform="rotate(180 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#00e676" transform="rotate(210 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#3a444f" transform="rotate(240 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#3a444f" transform="rotate(270 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#00e676" transform="rotate(300 32 32)"/>
                            <rect x="28.5" y="4" width="7" height="5.5" rx="1.2" fill="#00e676" transform="rotate(330 32 32)"/>
                        </g>
                        <circle cx="32" cy="32" r="15.5" fill="none" stroke="#2d3640" stroke-width="2"/>
                        <path d="M28 24.5 L41 32 L28 39.5 Z" fill="#00e676"/>
                    </svg>
                    <div>
                        <h2>Arena Studio</h2>
                        <span class="tagline">Run it on the arena</span>
                    </div>
                </div>
                <p>Run, edit, and bench-test G6 experiments in one tool over a single connection. Open a protocol, run the whole sequence with a recorded log, edit it in the three-zone designer, and drive the display directly from the Console.</p>
                <span class="status beta">Beta</span>
            </a>

        </div>

        <!-- Specialty tools -->
        <div class="group-title">Specialty tools <span class="group-note">design aids &amp; panel hardware utilities</span></div>
        <div class="tools-grid small">
            <a href="arena_editor.html" class="tool-card">
                <h2>Arena Layout</h2>
                <p>Configure arena geometry from standard configs or create custom layouts. 2D visualization with PDF export.</p>
                <span class="status ready">Ready</span>
            </a>

            <a href="arena_3d_viewer.html" class="tool-card">
                <h2>Arena 3D View</h2>
                <p>Interactive 3D visualization of cylindrical arenas. Preview test patterns and explore angular resolution.</p>
                <span class="status ready">Ready</span>
            </a>

            <a href="g6_panel_editor.html" class="tool-card">
                <h2>G6 Panel Patterns</h2>
                <p>Create and preview 20×20 pixel patterns for individual G6 panels. Supports GS2 and GS16 modes with real-time preview.</p>
                <span class="status ready">Ready</span>
            </a>

            <a href="icon_generator.html" class="tool-card">
                <h2>Pattern Icon Generator</h2>
                <p>Generate top-down cylindrical view icons from arena patterns. Supports single-frame and motion blur rendering.</p>
                <span class="status in-dev">In Development</span>
            </a>

            <a href="flasher/index.html" class="tool-card">
                <h2>G6 Panel Flash Programmer</h2>
                <p>Program a single G6 panel's firmware over WebUSB on the bench — pick a build, hold BOOTSEL, flash the published UF2. (For in-arena updates, use Arena Studio's Panel firmware tools.) Chrome/Edge only.</p>
                <span class="status in-dev">In Development</span>
            </a>

            <a href="panel_monitor.html" class="tool-card">
                <h2>Panel Serial Monitor</h2>
                <p>Read a running panel's USB-serial log live — a quick "is it alive?" check. Streams the boot banner + diagnostics; sends console commands to self-test builds. Chrome/Edge only.</p>
                <span class="status in-dev">In Development</span>
            </a>
        </div>

        <!-- Legacy tools -->
        <div class="group-title">Legacy tools <span class="group-note">superseded — new features land in Arena Studio</span></div>
        <div class="tools-grid small legacy">
            <a href="arena_console.html" class="tool-card">
                <h2>Arena Console</h2>
                <span class="supersede">Now the Console view in Arena Studio — this standalone gets bug fixes only.</span>
                <p>Live control for the G6 arena over Web Serial — connect a controller over USB and drive the display directly. PControl successor.</p>
                <span class="status legacy-chip">Maintenance</span>
            </a>

            <a href="experiment_designer_v3.html" class="tool-card">
                <h2>v3 Experiment Designer</h2>
                <span class="supersede">Now the Edit view in Arena Studio — this standalone gets bug fixes only.</span>
                <p>Edit Protocol v3 YAML — library of conditions + ordered sequence, with anchors and comments preserved on round-trip.</p>
                <span class="status legacy-chip">Maintenance</span>
            </a>

            <a href="experiment_designer.html" class="tool-card">
                <h2>Experiment Designer</h2>
                <span class="supersede">The older (pre-v3) protocol format — superseded by the v3 designer.</span>
                <p>Design experiment protocols with stimulus sequences and trial parameters. YAML export for MATLAB execution.</p>
                <span class="status legacy-chip">Legacy</span>
            </a>
        </div>

        <div class="info-box">
            <strong>Panel Generations:</strong> G4.1 and G6 are actively tested. G3 and G4 configurations are included for comparison and backward compatibility.
        </div>

        <footer>
            <p>
                <a href="https://github.com/reiserlab/webDisplayTools" target="_blank">GitHub</a> |
                <a href="https://github.com/reiserlab" target="_blank">Reiser Lab</a>
                <span id="tierSwitch"></span>
            </p>
        </footer>
    </div>
    <script src="js/build-channel.js"></script>
    <script>
        // Release tier badge + a discreet link to the other tier (docs/development/release-process.md).
        (function () {
            if (!window.BuildChannel) return;
            var b = BuildChannel.detect();
            BuildChannel.renderBadge(document, document.getElementById('tierBadge'), b);
            var host = document.getElementById('tierSwitch');
            if (!host || b.channel === 'local') return;
            var a = document.createElement('a');
            if (b.channel === 'next') {
                a.href = '../index.html';
                a.textContent = 'Production';
                a.title = 'The Production tools — the version the rigs run';
            } else {
                a.href = 'next/index.html';
                a.textContent = 'Next (testing build)';
                a.title = 'The Next tier: the release candidate being validated — not for routine experiments';
            }
            host.appendChild(document.createTextNode('| '));
            host.appendChild(a);
        })();
    </script>
</body>
</html>