gilles/go2rtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(links, add, index, info, probe, log, main, styles): update styles and improve layout - refactor button and input styles for consistency across pages - enhance responsive design for better usability on mobile devices - adjust spacing and margins for a cleaner look - unify color scheme and hover effects for links and buttons - remove unused font imports to optimize loading performance

Browse Source
This commit is contained in:
Sergey Krashevich
2026-03-11 02:12:52 +03:00
parent 5fced9a580
commit 27b04ed9d8
8 changed files with 343 additions and 932 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/probe.html
+49 -171
View File
@@ -4,115 +4,78 @@
<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;
margin-bottom: 20px;
}
.page-title {
font-family: 'Orbitron', sans-serif;
font-size: 32px;
color: var(--accent-cyan);
text-shadow: var(--glow-cyan);
margin-bottom: 8px;
font-size: 20px;
font-weight: 600;
margin-bottom: 4px;
}
.page-subtitle {
color: var(--text-secondary);
font-size: 14px;
font-size: 13px;
}
.stream-name-display {
color: var(--accent-electric);
font-weight: 700;
color: var(--accent);
font-weight: 600;
}
.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);
padding: 16px;
margin-bottom: 16px;
}
.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);
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.json-viewer {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 20px;
padding: 14px;
overflow-x: auto;
font-size: 13px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.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;
}
.json-key { color: var(--accent); }
.json-string { color: var(--green); }
.json-number { color: var(--yellow); }
.json-boolean { color: var(--accent-hover); font-weight: 600; }
.json-null { color: var(--text-muted); font-style: italic; }
.json-bracket { color: var(--text-secondary); }
.json-line { margin: 2px 0; }
.json-indent { display: inline-block; width: 18px; }
.loading {
text-align: center;
padding: 60px 20px;
padding: 40px 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);
width: 28px;
height: 28px;
border: 2px solid var(--border-color);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 16px;
animation: spin 0.8s linear infinite;
margin-bottom: 12px;
}
@keyframes spin {
@@ -120,47 +83,24 @@
}
.error {
background: rgba(255, 71, 87, 0.1);
border: 1px solid var(--accent-red);
background: var(--bg-card);
border: 1px solid var(--red);
border-radius: 8px;
padding: 24px;
color: var(--accent-red);
padding: 20px;
color: var(--red);
text-align: center;
}
.error-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
@media (max-width: 768px) {
.page-title {
font-size: 24px;
}
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
</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>
<script src="main.js"></script>
<main>
<div class="container">
@@ -168,60 +108,19 @@
<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>
<p class="page-subtitle">Codec 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>Probing stream...</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');
@@ -235,7 +134,6 @@
} 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');
@@ -262,14 +160,11 @@
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>';
html += '</div></div>';
content.innerHTML = html;
}
@@ -277,27 +172,13 @@
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 (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>';
}
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>';
@@ -311,10 +192,7 @@
if (typeof obj === 'object') {
const keys = Object.keys(obj);
if (keys.length === 0) {
return '<span class="json-bracket">{}</span>';
}
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>';