75 lines
3.3 KiB
HTML
75 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>NextNVR — Casa Alba Mindelo</title>
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<h1>🎥 NextNVR</h1>
|
||
<nav id="tabs">
|
||
<button data-tab="live" class="tab active">Live Wall</button>
|
||
<button data-tab="playback" class="tab">Playback</button>
|
||
<button data-tab="settings" class="tab">Settings</button>
|
||
</nav>
|
||
<span id="status-dot" class="status offline" title="Server status">●</span>
|
||
</header>
|
||
|
||
<main id="content">
|
||
<!-- Live Wall: 4×2 grid + focus overlay -->
|
||
<section id="tab-live" class="tab-panel active">
|
||
<div id="grid" class="grid-4x2"></div>
|
||
<div id="focus-overlay" class="focus-overlay hidden">
|
||
<div class="focus-toolbar">
|
||
<button id="focus-prev">◀</button>
|
||
<span id="focus-title">Camera</span>
|
||
<span id="focus-time" class="focus-time">00:00 live</span>
|
||
<button id="focus-close">✕</button>
|
||
<button id="focus-next">▶</button>
|
||
</div>
|
||
<img id="focus-video" alt="Live stream">
|
||
<div id="focus-thumbs" class="thumb-strip"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Playback: clip browser -->
|
||
<section id="tab-playback" class="tab-panel">
|
||
<div class="playback-controls">
|
||
<select id="pb-camera"><option value="">— Select Camera —</option></select>
|
||
<div class="preset-group">
|
||
<button class="preset active" data-preset="today">Today</button>
|
||
<button class="preset" data-preset="yesterday">Yesterday</button>
|
||
<button class="preset" data-preset="week">Last 7 Days</button>
|
||
<button class="preset" data-preset="custom">Custom ▾</button>
|
||
</div>
|
||
<div id="pb-custom-range" class="hidden" style="display:flex;gap:8px;align-items:center">
|
||
<input type="date" id="pb-from">
|
||
<span>→</span>
|
||
<input type="date" id="pb-to">
|
||
</div>
|
||
<button id="pb-load" class="btn-primary">Load Clips</button>
|
||
</div>
|
||
<div id="pb-clips" class="clip-grid"></div>
|
||
<div id="pb-player" class="clip-player hidden">
|
||
<video id="pb-video" controls></video>
|
||
<button id="pb-close">✕ Close</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Settings: camera configuration & onboarding -->
|
||
<section id="tab-settings" class="tab-panel">
|
||
<div class="settings-toolbar">
|
||
<button id="btn-scan" class="btn-primary">🔍 Scan Network (ONVIF)</button>
|
||
<button id="btn-save" class="btn-success">💾 Save Configuration</button>
|
||
<span id="settings-status"></span>
|
||
</div>
|
||
<div id="camera-cards"></div>
|
||
<div id="scan-results" class="scan-results hidden"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="/app.js"></script>
|
||
</body>
|
||
</html>
|