Merge remote-tracking branch 'origin/251221-webui-redisign' into beta

# Conflicts: # www/index.html # www/links.html # www/main.js
2026-03-11 00:02:12 +03:00
parent 072cdd7c44 3984a074a1
commit 002070991c
9 changed files with 2334 additions and 429 deletions
@@ -6,8 +6,8 @@
    <title>add - go2rtc</title>
    <style>
        main > button {
-            background-color: #444;
-            color: white;
+            background-color: var(--bg-secondary);
+            color: var(--text-secondary);
            cursor: pointer;
            padding: 14px;
            width: 100%;
@@ -80,7 +80,8 @@
    </div>
    <script>
        document.getElementById('stream').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            div.style.display = div.style.display === 'grid' ? 'none' : 'grid';
        });

        document.getElementById('stream-form').addEventListener('submit', async ev => {
@@ -102,7 +103,9 @@
    </div>
    <script>
        document.getElementById('alsa').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('alsa-table', 'api/alsa');
        });
    </script>
@@ -139,7 +142,9 @@
        }

        document.getElementById('homekit').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await reloadHomeKit();
        });

@@ -184,7 +189,9 @@
    </div>
    <script>
        document.getElementById('dvrip').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('dvrip-table', 'api/dvrip');
        });
    </script>
@@ -196,7 +203,9 @@
    </div>
    <script>
        document.getElementById('devices').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('devices-table', 'api/ffmpeg/devices');
        });
    </script>
@@ -208,7 +217,9 @@
    </div>
    <script>
        document.getElementById('hardware').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('hardware-table', 'api/ffmpeg/hardware');
        });
    </script>
@@ -227,7 +238,8 @@
    </div>
    <script>
        document.getElementById('nest').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            div.style.display = div.style.display === 'grid' ? 'none' : 'grid';
        });

        document.getElementById('nest-form').addEventListener('submit', async ev => {
@@ -247,7 +259,9 @@
    </div>
    <script>
        document.getElementById('gopro').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('gopro-table', 'api/gopro');
        });
    </script>
@@ -259,7 +273,9 @@
    </div>
    <script>
        document.getElementById('hass').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('hass-table', 'api/hass');
        });
    </script>
@@ -275,7 +291,9 @@
    </div>
    <script>
        document.getElementById('onvif').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('onvif-table', 'api/onvif');
        });

@@ -309,7 +327,8 @@
    </div>
    <script>
        document.getElementById('ring').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            div.style.display = div.style.display === 'grid' ? 'none' : 'grid';
        });

        async function handleRingAuth(ev) {
@@ -365,7 +384,8 @@
    </div>
    <script>
        document.getElementById('tuya').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            div.style.display = div.style.display === 'grid' ? 'none' : 'grid';
        });

        document.getElementById('tuya-credentials-form').addEventListener('submit', async ev => {
@@ -405,7 +425,9 @@
    </div>
    <script>
        document.getElementById('roborock').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('roborock-table', 'api/roborock');
        });

@@ -423,7 +445,9 @@
    </div>
    <script>
        document.getElementById('v4l2').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('v4l2-table', 'api/v4l2');
        });
    </script>
@@ -449,7 +473,11 @@
    </div>
    <script>
        async function wyzeReload(ev) {
-            if (ev) ev.target.nextElementSibling.style.display = 'grid';
+            if (ev) {
+                const div = ev.target.nextElementSibling;
+                if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+                div.style.display = 'grid';
+            }

            const r = await fetch('api/wyze', {'cache': 'no-cache'});
            const data = await r.json();
@@ -520,7 +548,11 @@
    </div>
    <script>
        async function xiaomiReload(ev) {
-            if (ev) ev.target.nextElementSibling.style.display = 'grid';
+            if (ev) {
+                const div = ev.target.nextElementSibling;
+                if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+                div.style.display = 'grid';
+            }

            document.getElementById('xiaomi-login-form').style.display = 'flex';
            document.getElementById('xiaomi-captcha-form').style.display = 'none';
@@ -575,7 +607,9 @@
    </div>
    <script>
        document.getElementById('webtorrent').addEventListener('click', async ev => {
-            ev.target.nextElementSibling.style.display = 'grid';
+            const div = ev.target.nextElementSibling;
+            if (div.style.display === 'grid') { div.style.display = 'none'; return; }
+            div.style.display = 'grid';
            await getSources('webtorrent-table', 'api/webtorrent');
        });
    </script>
@@ -9,10 +9,16 @@
            height: 100%;
        }

+        main {
+            flex: 0 0 auto;
+            padding: 10px 0;
+        }
+
        #config {
            flex: 1 1 auto;
-            border-top: 1px solid #ccc;
+            border-top: 1px solid var(--border-color);
            min-height: 300px;
+            overflow: hidden;
        }
    </style>
 </head>
@@ -116,8 +122,12 @@

        ensureYamlLanguage();

-        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        monaco.editor.setTheme(prefersDark ? 'vs-dark' : 'vs');
+        const getTheme = () => document.documentElement.getAttribute('data-theme') === 'light' ? 'vs' : 'vs-dark';
+        monaco.editor.setTheme(getTheme());
+
+        window.addEventListener('themeChanged', () => {
+            monaco.editor.setTheme(getTheme());
+        });

        const editor = monaco.editor.create(container, {
            language: 'yaml',
@@ -1173,8 +1183,6 @@
        };

        const layout = () => {
-            const top = container.getBoundingClientRect().top;
-            container.style.height = `${Math.max(200, window.innerHeight - top)}px`;
            editor.layout();
        };
        window.addEventListener('resize', layout);
@@ -4,53 +4,451 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>go2rtc</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
    <style>
+        /* Page-specific styles for index.html */
        .controls {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 24px;
+            margin-bottom: 32px;
            display: flex;
            flex-wrap: wrap;
-            gap: 10px;
+            gap: 20px;
            align-items: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

-        .info {
-            color: #888;
-            white-space: pre;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        .btn-primary {
+            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-electric));
+            color: var(--bg-primary);
+            border: none;
+            padding: 12px 28px;
+            border-radius: 6px;
+            font-family: 'JetBrains Mono', monospace;
+            font-weight: 700;
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            box-shadow: var(--glow-cyan);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
+
+        .btn-primary::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        .btn-primary:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
+        }
+
+        .btn-primary:active {
+            transform: translateY(0);
+        }
+
+        .mode-selector {
+            display: flex;
+            gap: 16px;
+            align-items: center;
+            padding: 12px 20px;
+            background: var(--bg-secondary);
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+        }
+
+        .mode-label {
+            color: var(--text-muted);
+            text-transform: uppercase;
+            font-size: 11px;
+            letter-spacing: 1px;
+            font-weight: 700;
+        }
+
+        .checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .checkbox-wrapper input[type="checkbox"] {
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border: 2px solid var(--border-color);
+            border-radius: 3px;
+            cursor: pointer;
+            position: relative;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .checkbox-wrapper input[type="checkbox"]:checked {
+            background: var(--accent-cyan);
+            border-color: var(--accent-cyan);
+            box-shadow: var(--glow-cyan);
+        }
+
+        .checkbox-wrapper input[type="checkbox"]:checked::after {
+            content: '✓';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: var(--bg-primary);
+            font-size: 12px;
+            font-weight: 700;
+        }
+
+        .checkbox-wrapper label {
+            color: var(--text-secondary);
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            cursor: pointer;
+        }
+
+        /* Table */
+        .streams-table {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        thead {
+            background: var(--bg-secondary);
+            border-bottom: 2px solid var(--accent-cyan);
+        }
+
+        th {
+            text-align: left;
+            padding: 16px 20px;
+            font-weight: 700;
+            text-transform: uppercase;
+            font-size: 11px;
+            letter-spacing: 1px;
+            color: var(--accent-cyan);
+        }
+
+        th label {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            cursor: pointer;
+        }
+
+        td {
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tbody tr {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        tbody td:first-child {
+            position: relative;
+        }
+
+        tbody td:first-child::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 3px;
+            height: 100%;
+            background: var(--accent-cyan);
+            transform: scaleY(0);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        tbody tr:hover {
+            background: rgba(0, 217, 255, 0.05);
+        }
+
+        tbody tr:hover td:first-child::before {
+            transform: scaleY(1);
+        }
+
+        tbody tr:last-child td {
+            border-bottom: none;
+        }
+
+        /* Stream name with checkbox */
+        .stream-name {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .stream-name label {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            cursor: pointer;
+            font-weight: 500;
+        }
+
+        /* Live indicator */
+        .online-count {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-weight: 700;
+        }
+
+        .live-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--accent-green);
+            box-shadow: var(--glow-green);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.6; transform: scale(1.2); }
+        }
+
+        .offline-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--text-muted);
+        }
+
+        .delete-link {
+            color: var(--accent-red);
+        }
+
+        .delete-link:hover {
+            color: #ff6b81;
+        }
+
+        /* Info footer */
+        .info {
+            margin-top: 32px;
+            padding: 20px 24px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-muted);
+            font-size: 12px;
+            white-space: pre;
+            font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
+        }
+
+        .info-item {
+            display: flex;
+            gap: 8px;
+        }
+
+        .info-label {
+            color: var(--accent-cyan);
+            text-transform: uppercase;
+            font-weight: 700;
+        }
+
+        /* Responsive - page specific */
+        @media (max-width: 768px) {
+            .controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .mode-selector {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            table, thead, tbody, th, td, tr {
+                display: block;
+            }
+
+            thead {
+                display: none;
+            }
+
+            tr {
+                margin-bottom: 16px;
+                border: 1px solid var(--border-color);
+                border-radius: 8px;
+                overflow: hidden;
+            }
+
+            td {
+                position: relative;
+                padding-left: 50%;
+                border: none;
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            td:last-child {
+                border-bottom: none;
+            }
+
+            td::before {
+                content: attr(data-label);
+                position: absolute;
+                left: 16px;
+                top: 16px;
+                color: var(--accent-cyan);
+                font-weight: 700;
+                text-transform: uppercase;
+                font-size: 11px;
+            }
+        }
+
    </style>
 </head>
 <body>

-<script src="main.js"></script>
+<header>
+    <div class="container">
+        <nav>
+            <span class="logo">GO2RTC</span>
+            <div class="nav-links">
+                <a href="index.html" class="nav-link active">Streams</a>
+                <a href="add.html" class="nav-link">Add Stream</a>
+                <a href="config.html" class="nav-link">Config</a>
+                <a href="log.html" class="nav-link">Logs</a>
+                <a href="net.html" class="nav-link">Network</a>
+            </div>
+            <a href="https://github.com/AlexxIT/go2rtc" target="_blank" class="nav-link docs-link">docs</a>
+            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+                <span class="theme-icon">🌙</span>
+            </button>
+        </nav>
+    </div>
+</header>

 <main>
-    <div class="controls">
-        <button>stream</button>
-        modes
-        <label><input type="checkbox" name="webrtc" checked>webrtc</label>
-        <label><input type="checkbox" name="mse" checked>mse</label>
-        <label><input type="checkbox" name="hls" checked>hls</label>
-        <label><input type="checkbox" name="mjpeg" checked>mjpeg</label>
+    <div class="container">
+        <div class="controls">
+            <button class="btn-primary">View Streams</button>
+            <div class="mode-selector">
+                <span class="mode-label">Modes:</span>
+                <label class="checkbox-wrapper">
+                    <input type="checkbox" name="webrtc" checked>
+                    <span>WebRTC</span>
+                </label>
+                <label class="checkbox-wrapper">
+                    <input type="checkbox" name="mse" checked>
+                    <span>MSE</span>
+                </label>
+                <label class="checkbox-wrapper">
+                    <input type="checkbox" name="hls" checked>
+                    <span>HLS</span>
+                </label>
+                <label class="checkbox-wrapper">
+                    <input type="checkbox" name="mjpeg" checked>
+                    <span>MJPEG</span>
+                </label>
+            </div>
+        </div>
+
+        <div class="streams-table">
+            <table>
+                <thead>
+                    <tr>
+                        <th>
+                            <label>
+                                <input id="selectall" type="checkbox">
+                                Stream Name
+                            </label>
+                        </th>
+                        <th>Status</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="streams">
+                </tbody>
+            </table>
+        </div>
+
+        <div class="info"></div>
    </div>
-    <table>
-        <thead>
-        <tr>
-            <th><label><input id="selectall" type="checkbox">name</label></th>
-            <th>online</th>
-            <th>commands</th>
-        </tr>
-        </thead>
-        <tbody id="streams">
-        </tbody>
-    </table>
-    <div class="info"></div>
 </main>

 <script>
+    // Theme management
+    function initTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+
+        setTheme(theme);
+
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem('theme')) {
+                setTheme(e.matches ? 'dark' : 'light');
+            }
+        });
+    }
+
+    function setTheme(theme) {
+        const html = document.documentElement;
+        const themeIcon = document.querySelector('.theme-icon');
+
+        if (theme === 'light') {
+            html.setAttribute('data-theme', 'light');
+            if (themeIcon) themeIcon.textContent = '☀️';
+        } else {
+            html.removeAttribute('data-theme');
+            if (themeIcon) themeIcon.textContent = '🌙';
+        }
+    }
+
+    function toggleTheme() {
+        const html = document.documentElement;
+        const currentTheme = html.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+    }
+
+    // Initialize theme before page loads
+    initTheme();
+
+    // Theme toggle button handler
+    document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
+
    let templates = [
        '<a href="stream.html?src={name}">stream</a>',
        '<a href="links.html?src={name}">links</a>',
-        '<a href="#" data-name="{name}">delete</a>',
+        '<a href="#" class="delete-link" data-name="{name}">delete</a>',
    ];
    let readOnly = false;

@@ -60,18 +458,18 @@
        templates = templates.filter(link => link.indexOf('delete') < 0);
    };

-    document.querySelector('.controls > button')
+    document.querySelector('.btn-primary')
        .addEventListener('click', () => {
            const url = new URL('stream.html', location.href);

-            const streams = document.querySelectorAll('#streams input');
+            const streams = document.querySelectorAll('#streams input[type="checkbox"]');
            streams.forEach(i => {
-                if (i.checked) url.searchParams.append('src', i.name);
+                if (i.checked && i.name) url.searchParams.append('src', i.name);
            });

            if (!url.searchParams.has('src')) return;

-            let mode = document.querySelectorAll('.controls input');
+            let mode = document.querySelectorAll('.mode-selector input[type="checkbox"]');
            mode = Array.from(mode).filter(i => i.checked).map(i => i.name).join(',');

            window.location.href = `${url}&mode=${mode}`;
@@ -79,7 +477,7 @@

    const tbody = document.getElementById('streams');
    tbody.addEventListener('click', async ev => {
-        if (ev.target.innerText !== 'delete') return;
+        if (!ev.target.classList.contains('delete-link')) return;

        ev.preventDefault();

@@ -103,7 +501,7 @@
    });

    document.getElementById('selectall').addEventListener('change', ev => {
-        document.querySelectorAll('#streams input').forEach(el => {
+        document.querySelectorAll('#streams input[type="checkbox"]').forEach(el => {
            el.checked = ev.target.checked;
        });
    });
@@ -125,7 +523,7 @@
                let tr = tbody.querySelector(`tr[data-id="${name}"]`);
                const online = value && value.consumers ? value.consumers.length : 0;
                const src = encodeURIComponent(name);
-                const links = templates.map(link => link.replace('{name}', src)).join(' ');
+                const links = templates.map(link => link.replace('{name}', src)).join('<span class="link-separator">/</span>');

                if (!tr) {
                    tr = document.createElement('tr');
@@ -134,10 +532,30 @@
                }

                const isChecked = checkboxStates[name] ? 'checked' : '';
+                const dotClass = online > 0 ? 'live-dot' : 'offline-dot';
+
                tr.innerHTML =
-                    `<td><label><input type="checkbox" name="${name}" ${isChecked}>${name}</label></td>` +
-                    `<td><a href="api/streams?src=${src}">${online} / info</a> / <a href="api/streams?src=${src}&video=all&audio=all&microphone">probe</a> / <a href="net.html?src=${src}">net</a></td>` +
-                    `<td>${links}</td>`;
+                    `<td data-label="Name">
+                        <div class="stream-name">
+                            <label>
+                                <input type="checkbox" name="${name}" ${isChecked}>
+                                <span>${name}</span>
+                            </label>
+                        </div>
+                    </td>` +
+                    `<td data-label="Status">
+                        <div class="online-count">
+                            <span class="${dotClass}"></span>
+                            ${online > 0 ? `<span>${online} viewer${online !== 1 ? 's' : ''}</span>` : '<span>offline</span>'}
+                        </div>
+                        <span class="link-separator">/</span>
+                        <a href="info.html?src=${src}">info</a>
+                        <span class="link-separator">/</span>
+                        <a href="probe.html?src=${src}">probe</a>
+                        <span class="link-separator">/</span>
+                        <a href="net.html?src=${src}">network</a>
+                    </td>` +
+                    `<td data-label="Actions">${links}</td>`;
            }

            // Remove old rows
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stream Info - go2rtc</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        /* Page-specific styles for info.html */
+
+        .page-header {
+            margin-bottom: 32px;
+        }
+
+        .page-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 32px;
+            color: var(--accent-cyan);
+            text-shadow: var(--glow-cyan);
+            margin-bottom: 8px;
+        }
+
+        .page-subtitle {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+
+        .stream-name-display {
+            color: var(--accent-electric);
+            font-weight: 700;
+        }
+
+        .info-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+
+        .card-title {
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 16px;
+            padding-bottom: 12px;
+            border-bottom: 2px solid var(--border-color);
+        }
+
+        .json-viewer {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 20px;
+            overflow-x: auto;
+            font-size: 13px;
+        }
+
+        .json-key {
+            color: var(--accent-cyan);
+            font-weight: 700;
+        }
+
+        .json-string {
+            color: var(--accent-green);
+        }
+
+        .json-number {
+            color: var(--accent-yellow);
+        }
+
+        .json-boolean {
+            color: var(--accent-electric);
+            font-weight: 700;
+        }
+
+        .json-null {
+            color: var(--text-muted);
+            font-style: italic;
+        }
+
+        .json-bracket {
+            color: var(--text-secondary);
+        }
+
+        .json-line {
+            margin: 4px 0;
+        }
+
+        .json-indent {
+            display: inline-block;
+            width: 20px;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--text-secondary);
+        }
+
+        .loading-spinner {
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            border: 3px solid var(--border-color);
+            border-top-color: var(--accent-cyan);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 16px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .error {
+            background: rgba(255, 71, 87, 0.1);
+            border: 1px solid var(--accent-red);
+            border-radius: 8px;
+            padding: 24px;
+            color: var(--accent-red);
+            text-align: center;
+        }
+
+        .error-title {
+            font-size: 18px;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+
+        @media (max-width: 768px) {
+            .page-title {
+                font-size: 24px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<header>
+    <div class="container">
+        <nav>
+            <a href="index.html" class="logo">GO2RTC</a>
+            <div class="nav-links">
+                <a href="index.html" class="nav-link">Streams</a>
+                <a href="add.html" class="nav-link">Add Stream</a>
+                <a href="config.html" class="nav-link">Config</a>
+                <a href="log.html" class="nav-link">Logs</a>
+                <a href="net.html" class="nav-link">Network</a>
+            </div>
+            <a href="https://github.com/AlexxIT/go2rtc" target="_blank" class="nav-link docs-link">docs</a>
+            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+                <span class="theme-icon">🌙</span>
+            </button>
+        </nav>
+    </div>
+</header>
+
+<main>
+    <div class="container">
+        <a href="index.html" class="back-link">← Back to Streams</a>
+
+        <div class="page-header">
+            <h1 class="page-title">Stream Information</h1>
+            <p class="page-subtitle">Detailed information for stream: <span class="stream-name-display" id="stream-name"></span></p>
+        </div>
+
+        <div id="content">
+            <div class="loading">
+                <div class="loading-spinner"></div>
+                <div>Loading stream information...</div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<script>
+    // Theme management
+    function initTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+
+        setTheme(theme);
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem('theme')) {
+                setTheme(e.matches ? 'dark' : 'light');
+            }
+        });
+    }
+
+    function setTheme(theme) {
+        const html = document.documentElement;
+        const themeIcon = document.querySelector('.theme-icon');
+
+        if (theme === 'light') {
+            html.setAttribute('data-theme', 'light');
+            if (themeIcon) themeIcon.textContent = '☀️';
+        } else {
+            html.removeAttribute('data-theme');
+            if (themeIcon) themeIcon.textContent = '🌙';
+        }
+    }
+
+    function toggleTheme() {
+        const html = document.documentElement;
+        const currentTheme = html.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+    }
+
+    initTheme();
+    document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
+
+    // Get stream name from URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const streamName = urlParams.get('src');
+
+    if (!streamName) {
+        document.getElementById('content').innerHTML = `
+            <div class="error">
+                <div class="error-title">Error</div>
+                <div>No stream name provided</div>
+            </div>
+        `;
+    } else {
+        document.getElementById('stream-name').textContent = decodeURIComponent(streamName);
+
+        // Fetch stream info
+        const url = new URL('api/streams', location.href);
+        url.searchParams.set('src', streamName);
+
+        fetch(url, {cache: 'no-cache'})
+            .then(r => {
+                if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+                return r.json();
+            })
+            .then(data => {
+                displayInfo(data);
+            })
+            .catch(error => {
+                document.getElementById('content').innerHTML = `
+                    <div class="error">
+                        <div class="error-title">Failed to load stream information</div>
+                        <div>${error.message}</div>
+                    </div>
+                `;
+            });
+    }
+
+    function displayInfo(data) {
+        const content = document.getElementById('content');
+
+        let html = '<div class="info-card">';
+        html += '<div class="card-title">Stream Data</div>';
+        html += '<div class="json-viewer">';
+        html += formatJSON(data, 0);
+        html += '</div>';
+        html += '</div>';
+
+        content.innerHTML = html;
+    }
+
+    function formatJSON(obj, indent = 0) {
+        const indentStr = '<span class="json-indent"></span>'.repeat(indent);
+        let html = '';
+
+        if (obj === null) {
+            return `<span class="json-null">null</span>`;
+        }
+
+        if (typeof obj === 'string') {
+            return `<span class="json-string">"${escapeHtml(obj)}"</span>`;
+        }
+
+        if (typeof obj === 'number') {
+            return `<span class="json-number">${obj}</span>`;
+        }
+
+        if (typeof obj === 'boolean') {
+            return `<span class="json-boolean">${obj}</span>`;
+        }
+
+        if (Array.isArray(obj)) {
+            if (obj.length === 0) {
+                return '<span class="json-bracket">[]</span>';
+            }
+
+            html += '<span class="json-bracket">[</span>\n';
+            obj.forEach((item, i) => {
+                html += '<div class="json-line">' + indentStr + '<span class="json-indent"></span>';
+                html += formatJSON(item, indent + 1);
+                if (i < obj.length - 1) html += '<span class="json-bracket">,</span>';
+                html += '</div>';
+            });
+            html += '<div class="json-line">' + indentStr + '<span class="json-bracket">]</span></div>';
+            return html;
+        }
+
+        if (typeof obj === 'object') {
+            const keys = Object.keys(obj);
+            if (keys.length === 0) {
+                return '<span class="json-bracket">{}</span>';
+            }
+
+            html += '<span class="json-bracket">{</span>\n';
+            keys.forEach((key, i) => {
+                html += '<div class="json-line">' + indentStr + '<span class="json-indent"></span>';
+                html += `<span class="json-key">"${escapeHtml(key)}"</span>: `;
+                html += formatJSON(obj[key], indent + 1);
+                if (i < keys.length - 1) html += '<span class="json-bracket">,</span>';
+                html += '</div>';
+            });
+            html += '<div class="json-line">' + indentStr + '<span class="json-bracket">}</span></div>';
+            return html;
+        }
+
+        return String(obj);
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+</script>
+
+</body>
+</html>
@@ -3,18 +3,262 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>links - go2rtc</title>
+    <title>Links - go2rtc</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
    <style>
-        div > li {
-            list-style-type: none;
-            padding-left: 10px;
-            position: relative;
+        /* Page-specific styles for links.html */
+        .container {
+            max-width: 1200px;
        }

-        div > li:before {
-            content: "-";
-            position: absolute;
-            left: 0;
+        .page-header {
+            margin-bottom: 32px;
+        }
+
+        .page-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 32px;
+            color: var(--accent-cyan);
+            text-shadow: var(--glow-cyan);
+            margin-bottom: 8px;
+        }
+
+        .stream-name {
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-family: monospace;
+            word-break: break-all;
+            overflow-wrap: break-word;
+        }
+
+        .section {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+
+        .section-title {
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            margin-bottom: 16px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .link-list {
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .link-item {
+            display: flex;
+            align-items: flex-start;
+            padding: 12px;
+            background: var(--bg-secondary);
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+            transition: all 0.3s;
+            flex-wrap: wrap;
+            word-break: break-word;
+            overflow-wrap: break-word;
+        }
+
+        .link-item:hover {
+            border-color: var(--accent-cyan);
+            box-shadow: var(--glow-cyan);
+        }
+
+        .link-item::before {
+            content: '▸';
+            color: var(--accent-cyan);
+            margin-right: 12px;
+            font-size: 14px;
+        }
+
+        .link-item a {
+            color: var(--accent-cyan);
+            text-decoration: none;
+            font-weight: 500;
+            margin-right: 8px;
+            word-break: break-all;
+            overflow-wrap: break-word;
+            max-width: 100%;
+        }
+
+        .link-item a:hover {
+            color: var(--accent-electric);
+            text-decoration: underline;
+        }
+
+        .link-item a::after,
+        .action-link::after {
+            content: none;
+        }
+
+        .link-description {
+            color: var(--text-secondary);
+            font-size: 13px;
+        }
+
+        .code-block {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 16px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            color: var(--accent-green);
+            overflow-x: auto;
+            margin-top: 12px;
+            word-break: break-all;
+            white-space: pre-wrap;
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            margin-top: 16px;
+        }
+
+        .radio-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .radio-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .radio-label:hover {
+            border-color: var(--accent-cyan);
+        }
+
+        .radio-label input[type="radio"] {
+            accent-color: var(--accent-cyan);
+        }
+
+        .input-group {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+
+        input[type="text"] {
+            flex: 1;
+            padding: 12px 16px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            color: var(--text-primary);
+            font-size: 14px;
+            transition: all 0.3s;
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            border-color: var(--accent-cyan);
+            box-shadow: var(--glow-cyan);
+        }
+
+        button {
+            padding: 12px 24px;
+            background: var(--accent-cyan);
+            color: #0a0e1a;
+            border: none;
+            border-radius: 6px;
+            font-weight: 700;
+            text-transform: uppercase;
+            font-size: 12px;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        button:hover {
+            background: var(--accent-electric);
+            box-shadow: var(--glow-cyan);
+            transform: translateY(-2px);
+        }
+
+        .action-links {
+            display: flex;
+            gap: 12px;
+            margin-top: 12px;
+        }
+
+        .action-link {
+            padding: 8px 16px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            color: var(--accent-cyan);
+            text-decoration: none;
+            font-size: 13px;
+            transition: all 0.3s;
+        }
+
+        .action-link:hover {
+            border-color: var(--accent-cyan);
+            box-shadow: var(--glow-cyan);
+        }
+
+        .action-link.delete {
+            color: var(--accent-red);
+        }
+
+        .action-link.delete:hover {
+            border-color: var(--accent-red);
+        }
+
+        #homekit-qrcode {
+            margin-top: 16px;
+            padding: 16px;
+            background: white;
+            display: inline-block;
+            border-radius: 8px;
+        }
+
+        .note {
+            color: var(--text-muted);
+            font-size: 13px;
+            font-style: italic;
+            margin-top: 8px;
+        }
+
+        @media (max-width: 768px) {
+            .input-group {
+                flex-direction: column;
+            }
+
+            button {
+                width: 100%;
+            }
+
+            .action-links {
+                flex-direction: column;
+            }
        }
    </style>
 </head>
@@ -23,263 +267,360 @@
 <script src="main.js"></script>

 <main>
-    <div id="links"></div>
-    <script>
-        const src = new URLSearchParams(location.search).get('src').replace(/[<">]/g, ''); // sanitize
+    <div class="container">
+        <a href="index.html" class="back-link">← Back to Streams</a>
+        
+        <div class="page-header">
+            <h1 class="page-title">Stream Links</h1>
+            <div class="stream-name">Stream: <span id="stream-name"></span></div>
+        </div>

-        const links = document.getElementById('links');
+        <div id="links"></div>

-        links.innerHTML = `
-        <h2>Any codec in source</h2>
-        <li><a href="stream.html?src=${src}">stream.html</a> with auto-select mode / browsers: all / codecs: H264, H265*, MJPEG, JPEG, AAC, PCMU, PCMA, OPUS</li>
-        <li><a href="api/streams?src=${src}">info.json</a> page with active connections</li>
+        <div id="homekit" class="section" style="display: none">
+            <h2 class="section-title">🏠 HomeKit Server</h2>
+        </div>
+
+        <div class="section">
+            <h2 class="section-title">🎵 Play Audio</h2>
+            <div class="form-group">
+                <div class="radio-group">
+                    <label class="radio-label">
+                        <input type="radio" name="play" value="file" checked>
+                        <span><strong>File</strong> - Play remote (https://example.com/song.mp3) or local (/media/song.mp3) file</span>
+                    </label>
+                    <label class="radio-label">
+                        <input type="radio" name="play" value="live">
+                        <span><strong>Live</strong> - Play remote live stream (radio, etc.)</span>
+                    </label>
+                    <label class="radio-label">
+                        <input type="radio" name="play" value="text">
+                        <span><strong>Text</strong> - Play Text To Speech (if your FFmpeg supports this)</span>
+                    </label>
+                </div>
+                <div class="input-group">
+                    <input id="play-url" type="text" placeholder="Enter path / url / text">
+                    <button id="play-send">Send</button>
+                </div>
+                <div class="note">For cameras with two-way audio support</div>
+            </div>
+        </div>
+
+        <div class="section">
+            <h2 class="section-title">📡 Publish Stream</h2>
+            <div class="code-block">YouTube:  rtmps://xxx.rtmp.youtube.com/live2/xxxx-xxxx-xxxx-xxxx-xxxx
+Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</div>
+            <div class="form-group">
+                <div class="input-group">
+                    <input id="pub-url" type="text" placeholder="Enter RTMPS URL">
+                    <button id="pub-send">Send</button>
+                </div>
+                <div class="note">Publish to YouTube, Telegram RTMPS server, etc.</div>
+            </div>
+        </div>
+
+        <div id="webrtc" class="section">
+            <h2 class="section-title">🎥 WebRTC Magic</h2>
+            <div class="form-group">
+                <div class="radio-group">
+                    <label class="radio-label">
+                        <input type="radio" name="webrtc" value="video+audio" checked>
+                        <span><strong>Video + Audio</strong> - Simple viewer</span>
+                    </label>
+                    <label class="radio-label">
+                        <input type="radio" name="webrtc" value="video+audio+microphone">
+                        <span><strong>Video + Audio + Microphone</strong> - Two-way audio from camera</span>
+                    </label>
+                    <label class="radio-label">
+                        <input type="radio" name="webrtc" value="camera+microphone">
+                        <span><strong>Camera + Microphone</strong> - Stream from browser</span>
+                    </label>
+                    <label class="radio-label">
+                        <input type="radio" name="webrtc" value="display+speaker">
+                        <span><strong>Display + Speaker</strong> - Broadcast software</span>
+                    </label>
+                </div>
+
+                <ul class="link-list">
+                    <li class="link-item">
+                        <a id="local" href="webrtc.html?src=">Local WebRTC viewer</a>
+                    </li>
+                    <li class="link-item">
+                        <span class="link-description">External WebRTC viewer:</span>
+                        <div class="action-links">
+                            <a id="shareadd" href="#" class="action-link">Share Link</a>
+                            <a id="shareget" href="#" class="action-link" style="display:none">Copy Link</a>
+                            <a id="sharedel" href="#" class="action-link delete" style="display:none">Delete</a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</main>
+
+<script>
+    const src = new URLSearchParams(location.search).get('src').replace(/[<">]/g, ''); // sanitize
+    document.getElementById('stream-name').textContent = src;
+
+    const links = document.getElementById('links');
+
+    links.innerHTML = `
+    <div class="section">
+        <h2 class="section-title">🌐 Any Codec in Source</h2>
+        <ul class="link-list">
+            <li class="link-item">
+                <a href="stream.html?src=${src}">stream.html</a>
+                <span class="link-description">Auto-select mode / Browsers: All / Codecs: H264, H265*, MJPEG, JPEG, AAC, PCMU, PCMA, OPUS</span>
+            </li>
+            <li class="link-item">
+                <a href="api/streams?src=${src}">info.json</a>
+                <span class="link-description">Active connections info</span>
+            </li>
+        </ul>
+    </div>
    `;

-        const url = new URL('api', location.href);
-        fetch(url, {cache: 'no-cache'}).then(r => r.json()).then(data => {
-            let rtsp = location.host + ':8554';
-            try {
-                const host = data.host.match(/^[^:]+/)[0];
-                const port = data.rtsp.listen.match(/[0-9]+$/)[0];
-                rtsp = `${host}:${port}`;
-            } catch (e) {
-            }
+    const url = new URL('api', location.href);
+    fetch(url, {cache: 'no-cache'}).then(r => r.json()).then(data => {
+        let rtsp = location.host + ':8554';
+        try {
+            const host = data.host.match(/^[^:]+/)[0];
+            const port = data.rtsp.listen.match(/[0-9]+$/)[0];
+            rtsp = `${host}:${port}`;
+        } catch (e) {
+        }

-            links.innerHTML += `
-            <li><a href="rtsp://${rtsp}/${src}">rtsp</a> with only one video and one audio / codecs: any</li>
-            <li><a href="rtsp://${rtsp}/${src}?mp4">rtsp</a> for MP4 recording (Hass or Frigate) / codecs: H264, H265, AAC</li>
-            <li><a href="rtsp://${rtsp}/${src}?video=all&audio=all">rtsp</a> with all tracks / codecs: any</li>
+        links.innerHTML += `
+        <div class="section">
+            <h2 class="section-title">📹 RTSP Streaming</h2>
+            <ul class="link-list">
+                <li class="link-item">
+                    <a href="rtsp://${rtsp}/${src}">rtsp://${rtsp}/${src}</a>
+                    <span class="link-description">One video + one audio / Codecs: Any</span>
+                </li>
+                <li class="link-item">
+                    <a href="rtsp://${rtsp}/${src}?mp4">rtsp://${rtsp}/${src}?mp4</a>
+                    <span class="link-description">For MP4 recording (Hass, Frigate) / Codecs: H264, H265, AAC</span>
+                </li>
+                <li class="link-item">
+                    <a href="rtsp://${rtsp}/${src}?video=all&audio=all">rtsp://${rtsp}/${src}?video=all&audio=all</a>
+                    <span class="link-description">All tracks / Codecs: Any</span>
+                </li>
+            </ul>
+            <div class="code-block">ffplay -fflags nobuffer -flags low_delay -rtsp_transport tcp "rtsp://${rtsp}/${src}"</div>
+        </div>

-            <pre>ffplay -fflags nobuffer -flags low_delay -rtsp_transport tcp "rtsp://${rtsp}/${src}"</pre>
+        <div class="section">
+            <h2 class="section-title">🎬 H264/H265 Source</h2>
+            <ul class="link-list">
+                <li class="link-item">
+                    <a href="stream.html?src=${src}&mode=webrtc">WebRTC stream</a>
+                    <span class="link-description">Browsers: All / Codecs: H264, PCMU, PCMA, OPUS / +H265 in Safari</span>
+                </li>
+                <li class="link-item">
+                    <a href="stream.html?src=${src}&mode=mse">MSE stream</a>
+                    <span class="link-description">Browsers: Chrome, Firefox, Safari Mac/iPad / Codecs: H264, H265*, AAC, PCMA*, PCMU*, PCM* / +OPUS in Chrome/Firefox</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/stream.mp4?src=${src}">stream.mp4 (legacy AAC)</a>
+                    <span class="link-description">Browsers: Chrome, Firefox / Codecs: H264, H265*, AAC</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/stream.mp4?src=${src}&mp4=flac">stream.mp4 (modern FLAC)</a>
+                    <span class="link-description">Browsers: Chrome, Firefox / Codecs: H264, H265*, AAC, FLAC (PCMA, PCMU, PCM)</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/stream.mp4?src=${src}&mp4=all">stream.mp4 (all audio)</a>
+                    <span class="link-description">Browsers: Chrome / Codecs: H264, H265*, AAC, OPUS, MP3, FLAC (PCMA, PCMU, PCM)</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/frame.mp4?src=${src}">frame.mp4</a>
+                    <span class="link-description">Snapshot in MP4 format / Browsers: All / Codecs: H264, H265*</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/stream.m3u8?src=${src}">stream.m3u8 (legacy HLS/TS)</a>
+                    <span class="link-description">Browsers: Safari all, Chrome Android / Codecs: H264</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/stream.m3u8?src=${src}&mp4">stream.m3u8 (legacy HLS/fMP4)</a>
+                    <span class="link-description">Browsers: Safari all, Chrome Android / Codecs: H264, H265*, AAC</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/stream.m3u8?src=${src}&mp4=flac">stream.m3u8 (modern HLS/fMP4)</a>
+                    <span class="link-description">Browsers: Safari all, Chrome Android / Codecs: H264, H265*, AAC, FLAC (PCMA, PCMU, PCM)</span>
+                </li>
+            </ul>
+        </div>

-            <h2>H264/H265 source</h2>
-            <li><a href="stream.html?src=${src}&mode=webrtc">stream.html</a> WebRTC stream / browsers: all / codecs: H264, PCMU, PCMA, OPUS / +H265 in Safari</li>
-            <li><a href="stream.html?src=${src}&mode=mse">stream.html</a> MSE stream / browsers: Chrome, Firefox, Safari Mac/iPad / codecs: H264, H265*, AAC, PCMA*, PCMU*, PCM* / +OPUS in Chrome and Firefox</li>
-            <li><a href="api/stream.mp4?src=${src}">stream.mp4</a> legacy MP4 stream with AAC audio / browsers: Chrome, Firefox / codecs: H264, H265*, AAC</li>
-            <li><a href="api/stream.mp4?src=${src}&mp4=flac">stream.mp4</a> modern MP4 stream with common audio / browsers: Chrome, Firefox / codecs: H264, H265*, AAC, FLAC (PCMA, PCMU, PCM)</li>
-            <li><a href="api/stream.mp4?src=${src}&mp4=all">stream.mp4</a> MP4 stream with any audio / browsers: Chrome / codecs: H264, H265*, AAC, OPUS, MP3, FLAC (PCMA, PCMU, PCM)</li>
-            <li><a href="api/frame.mp4?src=${src}">frame.mp4</a> snapshot in MP4-format / browsers: all / codecs: H264, H265*</li>
-            <li><a href="api/stream.m3u8?src=${src}">stream.m3u8</a> legacy HLS/TS / browsers: Safari all, Chrome Android / codecs: H264</li>
-            <li><a href="api/stream.m3u8?src=${src}&mp4">stream.m3u8</a> legacy HLS/fMP4 / browsers: Safari all, Chrome Android / codecs: H264, H265*, AAC</li>
-            <li><a href="api/stream.m3u8?src=${src}&mp4=flac">stream.m3u8</a> modern HLS/fMP4 / browsers: Safari all, Chrome Android / codecs: H264, H265*, AAC, FLAC (PCMA, PCMU, PCM)</li>
-
-            <h2>MJPEG source</h2>
-            <li><a href="stream.html?src=${src}&mode=mjpeg">stream.html</a> with MJPEG mode / browsers: all / codecs: MJPEG, JPEG</li>
-            <li><a href="api/stream.mjpeg?src=${src}">stream.mjpeg</a> MJPEG stream / browsers: all / codecs: MJPEG, JPEG</li>
-            <li><a href="api/stream.webp?src=${src}">stream.webp</a> Motion-WebP stream / browsers: all modern / codecs: MJPEG, JPEG</li>
-            <li><a href="api/frame.jpeg?src=${src}">frame.jpeg</a> snapshot in JPEG-format / browsers: all / codecs: MJPEG, JPEG</li>
-            <li><a href="api/frame.webp?src=${src}">frame.webp</a> snapshot in WebP-format / browsers: all modern / codecs: H264, H265, MJPEG, JPEG</li>
+        <div class="section">
+            <h2 class="section-title">📸 MJPEG Source</h2>
+            <ul class="link-list">
+                <li class="link-item">
+                    <a href="stream.html?src=${src}&mode=mjpeg">stream.html (MJPEG)</a>
+                    <span class="link-description">Browsers: All / Codecs: MJPEG, JPEG</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/stream.mjpeg?src=${src}">stream.mjpeg</a>
+                    <span class="link-description">MJPEG stream / Browsers: All / Codecs: MJPEG, JPEG</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/stream.webp?src=${src}">stream.webp</a>
+                    <span class="link-description">Motion-WebP stream / Browsers: All modern / Codecs: MJPEG, JPEG</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/frame.jpeg?src=${src}">frame.jpeg</a>
+                    <span class="link-description">Snapshot in JPEG format / Browsers: All / Codecs: MJPEG, JPEG</span>
+                </li>
+                <li class="link-item">
+                    <a href="api/frame.webp?src=${src}">frame.webp</a>
+                    <span class="link-description">Snapshot in WebP format / Browsers: All modern / Codecs: H264, H265, MJPEG, JPEG</span>
+                </li>
+            </ul>
+        </div>
        `;
-        });
-    </script>
+    });

-    <div id="homekit" style="display: none">
-        <h2>HomeKit server</h2>
-    </div>
-    <script>
-        fetch(`api/homekit?id=${src}`, {cache: 'no-cache'}).then(async (r) => {
-            if (!r.ok) return;
+    // HomeKit section
+    fetch(`api/homekit?id=${src}`, {cache: 'no-cache'}).then(async (r) => {
+        if (!r.ok) return;

-            const div = document.querySelector('#homekit');
-            div.innerHTML += `<div><a href="${r.url}">info.json</a> page with active connections</div>`;
-            div.style = '';
+        const div = document.querySelector('#homekit');
+        div.innerHTML += `<ul class="link-list"><li class="link-item"><a href="${r.url}">info.json</a><span class="link-description">Active connections</span></li></ul>`;
+        div.style.display = 'block';

-            /** @type {{name: string, category_id: string, setup_code: string, setup_id: string, setup_uri: string}} */
-            const data = await r.json();
-            if (data.setup_code === undefined) return;
+        const data = await r.json();
+        if (data.setup_code === undefined) return;

-            const script = document.createElement('script');
-            script.src = 'https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js';
-            script.async = true;
-            script.onload = () => {
-                /* global BigInt */
-                const categoryID = BigInt(data.category_id);
-                const pin = BigInt(data.setup_code.replaceAll('-', ''));
-                const payload = categoryID << BigInt(31) | BigInt(2 << 27) | pin;
-                const setupURI = `X-HM://${payload.toString(36).toUpperCase().padStart(9, '0')}${data.setup_id}`;
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js';
+        script.async = true;
+        script.onload = () => {
+            const categoryID = BigInt(data.category_id);
+            const pin = BigInt(data.setup_code.replaceAll('-', ''));
+            const payload = categoryID << BigInt(31) | BigInt(2 << 27) | pin;
+            const setupURI = `X-HM://${payload.toString(36).toUpperCase().padStart(9, '0')}${data.setup_id}`;

-                div.innerHTML += `<pre>Setup Name: ${data.name}
-Setup Code: ${data.setup_code}</pre>
+            div.innerHTML += `<div class="code-block">Setup Name: ${data.name}
+Setup Code: ${data.setup_code}</div>
 <div id="homekit-qrcode"></div>`;

-                /* global QRCode */
-                new QRCode('homekit-qrcode', {text: setupURI, width: 128, height: 128});
-            };
-            document.head.appendChild(script);
-        });
-    </script>
-
-    <div>
-        <h2>Play audio</h2>
-        <label><input type="radio" name="play" value="file" checked>
-            file - play remote (https://example.com/song.mp3) or local (/media/song.mp3) file
-        </label>
-        <label><input type="radio" name="play" value="live">
-            live - play remote live stream (radio, etc.)
-        </label>
-        <label><input type="radio" name="play" value="text">
-            text - play Text To Speech (if your FFmpeg support this)
-        </label>
-        <br>
-        <input id="play-url" type="text" placeholder="path / url / text">
-        <button id="play-send">send</button>
-        / cameras with two way audio support
-    </div>
-    <script>
-        document.getElementById('play-send').addEventListener('click', ev => {
-            ev.preventDefault();
-            // action - file / live / text
-            const action = document.querySelector('input[name="play"]:checked').value;
-            const url = new URL('api/ffmpeg', location.href);
-            url.searchParams.set('dst', src);
-            url.searchParams.set(action, document.getElementById('play-url').value);
-            fetch(url, {method: 'POST'});
-        });
-    </script>
-
-    <div>
-        <h2>Publish stream</h2>
-        <pre>YouTube:  rtmps://xxx.rtmp.youtube.com/live2/xxxx-xxxx-xxxx-xxxx-xxxx
-Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</pre>
-        <input id="pub-url" type="text" placeholder="url">
-        <button id="pub-send">send</button>
-        / Telegram RTMPS server
-    </div>
-    <script>
-        document.getElementById('pub-send').addEventListener('click', ev => {
-            ev.preventDefault();
-            const url = new URL('api/streams', location.href);
-            url.searchParams.set('src', src);
-            url.searchParams.set('dst', document.getElementById('pub-url').value);
-            fetch(url, {method: 'POST'});
-        });
-    </script>
-    <script>
-        const applyReadOnly = () => {
-            const ids = ['play-send', 'play-url', 'pub-send', 'pub-url'];
-            ids.forEach(id => {
-                const el = document.getElementById(id);
-                if (el) el.disabled = true;
-            });
+            new QRCode('homekit-qrcode', {text: setupURI, width: 128, height: 128});
        };
+        document.head.appendChild(script);
+    });

-        if (window.go2rtcReady) {
-            window.go2rtcReady.then(data => {
-                if (data && data.read_only) applyReadOnly();
-            });
-        }
-    </script>
+    // Play audio
+    document.getElementById('play-send').addEventListener('click', ev => {
+        ev.preventDefault();
+        const action = document.querySelector('input[name="play"]:checked').value;
+        const url = new URL('api/ffmpeg', location.href);
+        url.searchParams.set('dst', src);
+        url.searchParams.set(action, document.getElementById('play-url').value);
+        fetch(url, {method: 'POST'});
+    });

-    <div id="webrtc">
-        <h2>WebRTC Magic</h2>
-        <label><input type="radio" name="webrtc" value="video+audio" checked>
-            video+audio = simple viewer
-        </label>
-        <label><input type="radio" name="webrtc" value="video+audio+microphone">
-            video+audio+microphone = two way audio from camera
-        </label>
-        <label><input type="radio" name="webrtc" value="camera+microphone">
-            camera+microphone = stream from browser
-        </label>
-        <label><input type="radio" name="webrtc" value="display+speaker">
-            display+speaker = broadcast software
-        </label>
+    // Publish stream
+    document.getElementById('pub-send').addEventListener('click', ev => {
+        ev.preventDefault();
+        const url = new URL('api/streams', location.href);
+        url.searchParams.set('src', src);
+        url.searchParams.set('dst', document.getElementById('pub-url').value);
+        fetch(url, {method: 'POST'});
+    });

-        <br>
-        <li><a id="local" href="webrtc.html?src=">webrtc.html</a> local WebRTC viewer</li>
-
-        <li>
-            <a id="shareadd" href="#">share link</a>
-            <a id="shareget" href="#">copy link</a>
-            <a id="sharedel" href="#">delete</a>
-            external WebRTC viewer
-        </li>
-    </div>
-    <script>
-        function webrtcLinksUpdate() {
-            const media = document.querySelector('input[name="webrtc"]:checked').value;
-
-            const direction = media.indexOf('video') >= 0 || media === 'audio' ? 'src' : 'dst';
-            document.getElementById('local').href = `webrtc.html?${direction}=${src}&media=${media}`;
-
-            const share = document.getElementById('shareget');
-            share.href = `https://go2rtc.org/webtorrent/#${share.dataset.auth}&media=${media}`;
-        }
-
-        function share(method) {
-            const url = new URL('api/webtorrent', location.href);
-            url.searchParams.set('src', src);
-            return fetch(url, {method: method, cache: 'no-cache'});
-        }
-
-        function onshareadd(r) {
-            document.getElementById('shareget').dataset['auth'] = `share=${r.share}&pwd=${r.pwd}`;
-
-            document.getElementById('shareadd').style.display = 'none';
-            document.getElementById('shareget').style.display = '';
-            document.getElementById('sharedel').style.display = '';
-
-            webrtcLinksUpdate();
-        }
-
-        function onsharedel() {
-            document.getElementById('shareadd').style.display = '';
-            document.getElementById('shareget').style.display = 'none';
-            document.getElementById('sharedel').style.display = 'none';
-        }
-
-        function copyTextToClipboard(text) {
-            // https://web.dev/patterns/clipboard/copy-text
-            if (navigator.clipboard && window.isSecureContext) {
-                navigator.clipboard.writeText(text).catch(err => {
-                    console.error(err.name, err.message);
-                });
-            } else {
-                const textarea = document.createElement('textarea');
-                textarea.value = text;
-                textarea.style.opacity = '0';
-                document.body.appendChild(textarea);
-
-                textarea.focus();
-                textarea.select();
-
-                try {
-                    document.execCommand('copy');
-                } catch (err) {
-                    console.error(err.name, err.message);
-                }
-
-                document.body.removeChild(textarea);
-            }
-        }
-
-        document.getElementById('shareadd').addEventListener('click', ev => {
-            ev.preventDefault();
-            share('POST').then(r => r.json()).then(r => onshareadd(r));
+    // Read-only mode
+    const applyReadOnly = () => {
+        const ids = ['play-send', 'play-url', 'pub-send', 'pub-url'];
+        ids.forEach(id => {
+            const el = document.getElementById(id);
+            if (el) el.disabled = true;
        });
+    };

-        document.getElementById('shareget').addEventListener('click', ev => {
-            ev.preventDefault();
-            copyTextToClipboard(ev.target.href);
+    if (window.go2rtcReady) {
+        window.go2rtcReady.then(data => {
+            if (data && data.read_only) applyReadOnly();
        });
+    }

-        document.getElementById('sharedel').addEventListener('click', ev => {
-            ev.preventDefault();
-            share('DELETE').then(() => onsharedel());
-        });
+    // WebRTC functions
+    function webrtcLinksUpdate() {
+        const media = document.querySelector('input[name="webrtc"]:checked').value;
+        const direction = media.indexOf('video') >= 0 || media === 'audio' ? 'src' : 'dst';
+        document.getElementById('local').href = `webrtc.html?${direction}=${src}&media=${media}`;

-        document.getElementById('webrtc').addEventListener('click', ev => {
-            if (ev.target.tagName === 'INPUT') webrtcLinksUpdate();
-        });
+        const share = document.getElementById('shareget');
+        share.href = `https://go2rtc.org/webtorrent/#${share.dataset.auth}&media=${media}`;
+    }

-        share('GET').then(r => {
-            if (r.ok) r.json().then(r => onshareadd(r));
-            else onsharedel();
-        });
+    function share(method) {
+        const url = new URL('api/webtorrent', location.href);
+        url.searchParams.set('src', src);
+        return fetch(url, {method: method, cache: 'no-cache'});
+    }

+    function onshareadd(r) {
+        document.getElementById('shareget').dataset['auth'] = `share=${r.share}&pwd=${r.pwd}`;
+        document.getElementById('shareadd').style.display = 'none';
+        document.getElementById('shareget').style.display = '';
+        document.getElementById('sharedel').style.display = '';
        webrtcLinksUpdate();
-    </script>
-</main>
+    }
+
+    function onsharedel() {
+        document.getElementById('shareadd').style.display = '';
+        document.getElementById('shareget').style.display = 'none';
+        document.getElementById('sharedel').style.display = 'none';
+    }
+
+    function copyTextToClipboard(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            navigator.clipboard.writeText(text).catch(err => {
+                console.error(err.name, err.message);
+            });
+        } else {
+            const textarea = document.createElement('textarea');
+            textarea.value = text;
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.focus();
+            textarea.select();
+            try {
+                document.execCommand('copy');
+            } catch (err) {
+                console.error(err.name, err.message);
+            }
+            document.body.removeChild(textarea);
+        }
+    }
+
+    document.getElementById('shareadd').addEventListener('click', ev => {
+        ev.preventDefault();
+        share('POST').then(r => r.json()).then(r => onshareadd(r));
+    });
+
+    document.getElementById('shareget').addEventListener('click', ev => {
+        ev.preventDefault();
+        copyTextToClipboard(ev.target.href);
+    });
+
+    document.getElementById('sharedel').addEventListener('click', ev => {
+        ev.preventDefault();
+        share('DELETE').then(() => onsharedel());
+    });
+
+    document.getElementById('webrtc').addEventListener('click', ev => {
+        if (ev.target.tagName === 'INPUT') webrtcLinksUpdate();
+    });
+
+    share('GET').then(r => {
+        if (r.ok) r.json().then(r => onshareadd(r));
+        else onsharedel();
+    });
+
+    webrtcLinksUpdate();
+</script>

 </body>
 </html>
@@ -1,142 +1,99 @@
-document.head.innerHTML += `
-<style>
-    body {
-        background-color: white;  /* fix Hass black theme */
-        display: flex;
-        flex-direction: column;
-        font-family: Arial, sans-serif;
-        margin: 0;
+// Shared navigation component - loaded automatically by other pages
+if (!document.querySelector('.logo')) {
+    const head = document.head;
+    if (!head.querySelector('link[href*="fonts.googleapis.com"]')) {
+        head.insertAdjacentHTML(
+            'beforeend',
+            `
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
+`.trim(),
+        );
    }

-    /* navigation block */
-    nav {
-        background-color: #333;
-        overflow: hidden;
+    if (!head.querySelector('link[href="styles.css"]')) {
+        head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="styles.css">');
    }

-    nav a {
-        float: left;
-        display: block;
-        color: #f2f2f2;
-        text-align: center;
-        padding: 14px 16px;
-        text-decoration: none;
-        font-size: 17px;
-    }
+    // Common UI refresh intervals (ms)
+    window.SYSTEM_INFO_UPDATE_INTERVAL_MS = 2000;

-    nav a:hover {
-        background-color: #ddd;
-        color: black;
-    }
-
-    /* main block */
-    main {
-        padding: 10px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    /* checkbox */
-    label {
-        display: flex;
-        gap: 5px;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    input[type="checkbox"] {
-        width: 18px;
-        height: 18px;
-        cursor: pointer;
-    }
-
-    /* form */
-    form {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-    }
-
-    input[type="text"], input[type="email"], input[type="password"], select {
-        padding: 10px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        font-size: 16px;
-    }
-
-    button {
-        padding: 10px 20px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 16px;
-    }
-
-    /* table */
-    table {
-        width: 100%;
-        background-color: white;
-        border-collapse: collapse;
-        margin: 0 auto;
-        overflow: hidden;
-    }
-
-    th, td {
-        padding: 12px 15px;
-        text-align: left;
-        border-bottom: 1px solid #e0e0e0;
-    }
-
-    th {
-        background-color: #444;
-        color: white;
-    }
-
-    tr:nth-child(even) {
-        background-color: #fafafa;
-    }
-
-    tr:hover {
-        background-color: #edf7ff;
-        transition: background-color 0.3s ease;
-    }
-
-    /* table on mobile */
-    @media (max-width: 480px) {
-        table, thead, tbody, th, td, tr {
-            display: block;
-        }
-
-        th, td {
-            box-sizing: border-box;
-            width: 100% !important;
-            border: none;
-        }
-
-        tr {
-            margin-bottom: 10px;
-            border-radius: 4px;
-        }
-    }
-</style>
-`;
-
-// Common UI refresh intervals (ms)
-window.SYSTEM_INFO_UPDATE_INTERVAL_MS = 2000;
-
-document.body.innerHTML = `
+    document.body.innerHTML = `
 <header>
-    <nav>
-        <a href="index.html"><b>go2rtc</b></a>
-        <a href="add.html">add</a>
-        <a href="config.html">config</a>
-        <a href="log.html">log</a>
-        <a href="net.html">net</a>
-    </nav>
+    <div class="container">
+        <nav>
+            <span class="logo">GO2RTC</span>
+            <div class="nav-links">
+                <a href="index.html" class="nav-link">Streams</a>
+                <a href="add.html" class="nav-link">Add Stream</a>
+                <a href="config.html" class="nav-link">Config</a>
+                <a href="log.html" class="nav-link">Logs</a>
+                <a href="net.html" class="nav-link">Network</a>
+            </div>
+            <a href="https://github.com/AlexxIT/go2rtc" target="_blank" class="nav-link docs-link">docs</a>
+            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+                <span class="theme-icon">🌙</span>
+            </button>
+        </nav>
+    </div>
 </header>
 ` + document.body.innerHTML;

+    // Mark active nav link
+    const currentPage = location.pathname.split('/').pop() || 'index.html';
+    document.querySelectorAll('.nav-links .nav-link').forEach(link => {
+        if (link.getAttribute('href') === currentPage) {
+            link.classList.add('active');
+        }
+    });
+
+    // Theme management functions
+    function initTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+
+        setTheme(theme);
+
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem('theme')) {
+                setTheme(e.matches ? 'dark' : 'light');
+            }
+        });
+    }
+
+    function setTheme(theme) {
+        const html = document.documentElement;
+        const themeIcon = document.querySelector('.theme-icon');
+
+        if (theme === 'light') {
+            html.setAttribute('data-theme', 'light');
+            if (themeIcon) themeIcon.textContent = '☀️';
+        } else {
+            html.removeAttribute('data-theme');
+            if (themeIcon) themeIcon.textContent = '🌙';
+        }
+    }
+
+    function toggleTheme() {
+        const html = document.documentElement;
+        const currentTheme = html.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+        window.dispatchEvent(new Event('themeChanged'));
+    }
+
+    // Initialize theme
+    initTheme();
+
+    // Theme toggle button handler
+    document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
+}
+
 window.go2rtcReady = (async () => {
    try {
        const url = new URL('api', location.href);
@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stream Probe - go2rtc</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        /* Page-specific styles for probe.html */
+
+        .page-header {
+            margin-bottom: 32px;
+        }
+
+        .page-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 32px;
+            color: var(--accent-cyan);
+            text-shadow: var(--glow-cyan);
+            margin-bottom: 8px;
+        }
+
+        .page-subtitle {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+
+        .stream-name-display {
+            color: var(--accent-electric);
+            font-weight: 700;
+        }
+
+        .info-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+
+        .card-title {
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 16px;
+            padding-bottom: 12px;
+            border-bottom: 2px solid var(--border-color);
+        }
+
+        .json-viewer {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 20px;
+            overflow-x: auto;
+            font-size: 13px;
+        }
+
+        .json-key {
+            color: var(--accent-cyan);
+            font-weight: 700;
+        }
+
+        .json-string {
+            color: var(--accent-green);
+        }
+
+        .json-number {
+            color: var(--accent-yellow);
+        }
+
+        .json-boolean {
+            color: var(--accent-electric);
+            font-weight: 700;
+        }
+
+        .json-null {
+            color: var(--text-muted);
+            font-style: italic;
+        }
+
+        .json-bracket {
+            color: var(--text-secondary);
+        }
+
+        .json-line {
+            margin: 4px 0;
+        }
+
+        .json-indent {
+            display: inline-block;
+            width: 20px;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--text-secondary);
+        }
+
+        .loading-spinner {
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            border: 3px solid var(--border-color);
+            border-top-color: var(--accent-cyan);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 16px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .error {
+            background: rgba(255, 71, 87, 0.1);
+            border: 1px solid var(--accent-red);
+            border-radius: 8px;
+            padding: 24px;
+            color: var(--accent-red);
+            text-align: center;
+        }
+
+        .error-title {
+            font-size: 18px;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+
+        @media (max-width: 768px) {
+            .page-title {
+                font-size: 24px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<header>
+    <div class="container">
+        <nav>
+            <a href="index.html" class="logo">GO2RTC</a>
+            <div class="nav-links">
+                <a href="index.html" class="nav-link">Streams</a>
+                <a href="add.html" class="nav-link">Add Stream</a>
+                <a href="config.html" class="nav-link">Config</a>
+                <a href="log.html" class="nav-link">Logs</a>
+                <a href="net.html" class="nav-link">Network</a>
+            </div>
+            <a href="https://github.com/AlexxIT/go2rtc" target="_blank" class="nav-link docs-link">docs</a>
+            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+                <span class="theme-icon">🌙</span>
+            </button>
+        </nav>
+    </div>
+</header>
+
+<main>
+    <div class="container">
+        <a href="index.html" class="back-link">← Back to Streams</a>
+
+        <div class="page-header">
+            <h1 class="page-title">Stream Probe</h1>
+            <p class="page-subtitle">Detailed codec and stream analysis for: <span class="stream-name-display" id="stream-name"></span></p>
+        </div>
+
+        <div id="content">
+            <div class="loading">
+                <div class="loading-spinner"></div>
+                <div>Probing stream (video=all, audio=all, microphone)...</div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<script>
+    // Theme management
+    function initTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+
+        setTheme(theme);
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem('theme')) {
+                setTheme(e.matches ? 'dark' : 'light');
+            }
+        });
+    }
+
+    function setTheme(theme) {
+        const html = document.documentElement;
+        const themeIcon = document.querySelector('.theme-icon');
+
+        if (theme === 'light') {
+            html.setAttribute('data-theme', 'light');
+            if (themeIcon) themeIcon.textContent = '☀️';
+        } else {
+            html.removeAttribute('data-theme');
+            if (themeIcon) themeIcon.textContent = '🌙';
+        }
+    }
+
+    function toggleTheme() {
+        const html = document.documentElement;
+        const currentTheme = html.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+    }
+
+    initTheme();
+    document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
+
+    // Get stream name from URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const streamName = urlParams.get('src');
+
+    if (!streamName) {
+        document.getElementById('content').innerHTML = `
+            <div class="error">
+                <div class="error-title">Error</div>
+                <div>No stream name provided</div>
+            </div>
+        `;
+    } else {
+        document.getElementById('stream-name').textContent = decodeURIComponent(streamName);
+
+        // Fetch stream probe info
+        const url = new URL('api/streams', location.href);
+        url.searchParams.set('src', streamName);
+        url.searchParams.set('video', 'all');
+        url.searchParams.set('audio', 'all');
+        url.searchParams.set('microphone', '');
+
+        fetch(url, {cache: 'no-cache'})
+            .then(r => {
+                if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+                return r.json();
+            })
+            .then(data => {
+                displayProbe(data);
+            })
+            .catch(error => {
+                document.getElementById('content').innerHTML = `
+                    <div class="error">
+                        <div class="error-title">Failed to probe stream</div>
+                        <div>${error.message}</div>
+                    </div>
+                `;
+            });
+    }
+
+    function displayProbe(data) {
+        const content = document.getElementById('content');
+
+        let html = '<div class="info-card">';
+        html += '<div class="card-title">Probe Results</div>';
+        html += '<div class="json-viewer">';
+        html += formatJSON(data, 0);
+        html += '</div>';
+        html += '</div>';
+
+        content.innerHTML = html;
+    }
+
+    function formatJSON(obj, indent = 0) {
+        const indentStr = '<span class="json-indent"></span>'.repeat(indent);
+        let html = '';
+
+        if (obj === null) {
+            return `<span class="json-null">null</span>`;
+        }
+
+        if (typeof obj === 'string') {
+            return `<span class="json-string">"${escapeHtml(obj)}"</span>`;
+        }
+
+        if (typeof obj === 'number') {
+            return `<span class="json-number">${obj}</span>`;
+        }
+
+        if (typeof obj === 'boolean') {
+            return `<span class="json-boolean">${obj}</span>`;
+        }
+
+        if (Array.isArray(obj)) {
+            if (obj.length === 0) {
+                return '<span class="json-bracket">[]</span>';
+            }
+
+            html += '<span class="json-bracket">[</span>\n';
+            obj.forEach((item, i) => {
+                html += '<div class="json-line">' + indentStr + '<span class="json-indent"></span>';
+                html += formatJSON(item, indent + 1);
+                if (i < obj.length - 1) html += '<span class="json-bracket">,</span>';
+                html += '</div>';
+            });
+            html += '<div class="json-line">' + indentStr + '<span class="json-bracket">]</span></div>';
+            return html;
+        }
+
+        if (typeof obj === 'object') {
+            const keys = Object.keys(obj);
+            if (keys.length === 0) {
+                return '<span class="json-bracket">{}</span>';
+            }
+
+            html += '<span class="json-bracket">{</span>\n';
+            keys.forEach((key, i) => {
+                html += '<div class="json-line">' + indentStr + '<span class="json-indent"></span>';
+                html += `<span class="json-key">"${escapeHtml(key)}"</span>: `;
+                html += formatJSON(obj[key], indent + 1);
+                if (i < keys.length - 1) html += '<span class="json-bracket">,</span>';
+                html += '</div>';
+            });
+            html += '<div class="json-line">' + indentStr + '<span class="json-bracket">}</span></div>';
+            return html;
+        }
+
+        return String(obj);
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+</script>
+
+</body>
+</html>
@@ -4,5 +4,6 @@ import "embed"

 //go:embed *.html
 //go:embed *.js
+//go:embed *.css
 //go:embed *.json
 var Static embed.FS
@@ -0,0 +1,467 @@
+/* CSS Variables - Theme colors */
+:root {
+    --bg-primary: #0a0e14;
+    --bg-secondary: #151b24;
+    --bg-card: #1a2332;
+    --border-color: #2a3544;
+    --text-primary: #e6edf3;
+    --text-secondary: #8b949e;
+    --text-muted: #6e7681;
+    --accent-cyan: #00d9ff;
+    --accent-electric: #00ffff;
+    --accent-red: #ff4757;
+    --accent-green: #2ecc71;
+    --accent-yellow: #ffd93d;
+    --glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
+    --glow-red: 0 0 20px rgba(255, 71, 87, 0.3);
+    --glow-green: 0 0 20px rgba(46, 204, 113, 0.3);
+}
+
+[data-theme="light"] {
+    --bg-primary: #f5f7fa;
+    --bg-secondary: #ffffff;
+    --bg-card: #ffffff;
+    --border-color: #e1e4e8;
+    --text-primary: #24292e;
+    --text-secondary: #586069;
+    --text-muted: #6a737d;
+    --accent-cyan: #0366d6;
+    --accent-electric: #005cc5;
+    --accent-red: #d73a49;
+    --accent-green: #28a745;
+    --accent-yellow: #ffd33d;
+    --glow-cyan: 0 0 10px rgba(3, 102, 214, 0.2);
+    --glow-red: 0 0 10px rgba(215, 58, 73, 0.2);
+    --glow-green: 0 0 10px rgba(40, 167, 69, 0.2);
+}
+
+/* Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Base styles */
+body {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    min-height: 100vh;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Scan line effect */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.05) 0px,
+        rgba(0, 0, 0, 0.05) 1px,
+        transparent 1px,
+        transparent 2px
+    );
+    pointer-events: none;
+    z-index: 9999;
+    opacity: 0.3;
+}
+
+/* Animated gradient background */
+body::after {
+    content: '';
+    position: fixed;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(
+        circle at 50% 50%,
+        rgba(0, 217, 255, 0.03) 0%,
+        transparent 50%
+    );
+    animation: rotateGradient 20s linear infinite;
+    pointer-events: none;
+    z-index: 0;
+}
+
+@keyframes rotateGradient {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Container */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 24px;
+    position: relative;
+    z-index: 1;
+}
+
+/* Header */
+header {
+    background: var(--bg-secondary);
+    border-bottom: 2px solid var(--accent-cyan);
+    box-shadow: var(--glow-cyan);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(10px);
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 20px 0;
+}
+
+.logo {
+    font-family: 'Orbitron', sans-serif;
+    font-weight: 900;
+    font-size: 28px;
+    color: var(--accent-cyan);
+    text-shadow: var(--glow-cyan);
+    letter-spacing: 2px;
+    text-decoration: none;
+    position: relative;
+    animation: glitch 3s infinite;
+}
+
+@keyframes glitch {
+    0%, 90%, 100% { transform: translate(0); }
+    91% { transform: translate(-2px, 1px); }
+    92% { transform: translate(2px, -1px); }
+    93% { transform: translate(-1px, 2px); }
+}
+
+.nav-links {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    flex: 1;
+}
+
+.nav-link {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 12px;
+    letter-spacing: 1px;
+    padding: 8px 16px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden;
+}
+
+.nav-link::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
+}
+
+.nav-link:hover::before {
+    left: 100%;
+}
+
+.nav-link:hover,
+.nav-link.active {
+    color: var(--accent-cyan);
+    border-color: var(--accent-cyan);
+    box-shadow: var(--glow-cyan);
+}
+
+.docs-link {
+    font-size: 11px;
+    padding: 4px 10px;
+    opacity: 0.6;
+    margin-left: auto;
+}
+
+.docs-link:hover {
+    opacity: 1;
+}
+
+/* Theme toggle */
+.theme-toggle {
+    width: 48px;
+    height: 48px;
+    border: none;
+    border-radius: 6px;
+    background: var(--bg-card);
+    color: var(--accent-cyan);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    margin-left: auto;
+}
+
+.theme-toggle:hover {
+    background: var(--accent-cyan);
+    color: var(--bg-primary);
+}
+
+/* Main content */
+main {
+    padding: 40px 0;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Shared form styles */
+form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+select {
+    padding: 10px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 14px;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    font-family: 'JetBrains Mono', monospace;
+    transition: all 0.3s;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+select:focus {
+    outline: none;
+    border-color: var(--accent-cyan);
+    box-shadow: var(--glow-cyan);
+}
+
+button {
+    padding: 10px 20px;
+    border: 1px solid var(--accent-cyan);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    background: var(--bg-card);
+    color: var(--accent-cyan);
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+button:hover {
+    background: var(--accent-cyan);
+    color: var(--bg-primary);
+    box-shadow: var(--glow-cyan);
+}
+
+/* Checkbox */
+label {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    cursor: pointer;
+    color: var(--text-secondary);
+}
+
+input[type="checkbox"] {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--border-color);
+    border-radius: 3px;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+input[type="checkbox"]:checked {
+    background: var(--accent-cyan);
+    border-color: var(--accent-cyan);
+    box-shadow: var(--glow-cyan);
+}
+
+input[type="checkbox"]:checked::after {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--bg-primary);
+    font-size: 12px;
+    font-weight: 700;
+}
+
+/* Table */
+table {
+    width: 100%;
+    background: var(--bg-card);
+    border-collapse: collapse;
+    margin: 0 auto;
+    overflow: hidden;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+}
+
+th,
+td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+th {
+    background: var(--bg-secondary);
+    color: var(--accent-cyan);
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 11px;
+    letter-spacing: 1px;
+}
+
+tr:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+tr:hover {
+    background: rgba(0, 217, 255, 0.05);
+    transition: background-color 0.3s ease;
+}
+
+/* Links */
+a {
+    color: var(--accent-cyan);
+    text-decoration: none;
+    position: relative;
+    transition: color 0.3s;
+}
+
+a::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background: var(--accent-cyan);
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+a:hover {
+    color: var(--accent-electric);
+}
+
+a:hover::after {
+    width: 100%;
+}
+
+.link-separator {
+    color: var(--text-muted);
+    margin: 0 8px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nav {
+        gap: 16px;
+        padding: 12px 0;
+        flex-wrap: wrap;
+    }
+
+    .logo {
+        font-size: 20px;
+        flex-shrink: 0;
+    }
+
+    .nav-links {
+        order: 3;
+        flex: 1 1 100%;
+        gap: 8px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        padding-bottom: 4px;
+    }
+
+    .nav-links::-webkit-scrollbar {
+        display: none;
+    }
+
+    .nav-link {
+        flex-shrink: 0;
+        font-size: 11px;
+        padding: 6px 12px;
+    }
+
+    .docs-link {
+        order: 2;
+        margin-left: auto;
+        flex-shrink: 0;
+    }
+
+    .theme-toggle {
+        order: 1;
+        flex-shrink: 0;
+    }
+
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+        display: block;
+    }
+
+    th {
+        display: none;
+    }
+
+    tr {
+        margin-bottom: 10px;
+        border-radius: 4px;
+    }
+}
+
+.back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--accent-cyan);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 8px 16px;
+    border: 1px solid var(--accent-cyan);
+    border-radius: 6px;
+    transition: all 0.3s;
+    margin-bottom: 24px;
+}
+
+.back-link:hover {
+    background: var(--accent-cyan);
+    color: var(--bg-primary);
+    box-shadow: var(--glow-cyan);
+}