Joachim Hummel
b8298e584f
- CSS-Variablen fuer Hell/Dunkel, Umschalter (🌙/☀️) oben rechts - Default folgt prefers-color-scheme, Wahl wird in localStorage gemerkt - Theme wird vor dem Rendern gesetzt -> kein Flackern - index, webcam und play_video konsistent Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
93 lines
3.2 KiB
HTML
93 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Object Detection</title>
|
|
<script>
|
|
(function(){var t=localStorage.getItem('theme')||((window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light');document.documentElement.setAttribute('data-theme',t);})();
|
|
</script>
|
|
<style>
|
|
:root {
|
|
--bg: #ffffff; --fg: #213547; --panel: #ffffff;
|
|
--border: #cccccc; --muted: #555555;
|
|
}
|
|
:root[data-theme="dark"] {
|
|
--bg: #16181c; --fg: #e3e3e3; --panel: #23262b;
|
|
--border: #3a3f46; --muted: #9aa0a6;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding-top: 50px;
|
|
min-height: 100vh;
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
transition: background-color 0.3s, color 0.3s;
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
#uploadForm {
|
|
margin-bottom: 20px;
|
|
}
|
|
input[type="file"] {
|
|
margin-right: 10px;
|
|
color: var(--fg);
|
|
}
|
|
input[type="submit"] {
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
background-color: var(--panel);
|
|
color: var(--fg);
|
|
}
|
|
#startWebcam {
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
}
|
|
.theme-toggle {
|
|
position: fixed;
|
|
top: 12px;
|
|
right: 12px;
|
|
padding: 8px 12px;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background-color: var(--panel);
|
|
color: var(--fg);
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
.theme-toggle:hover {
|
|
border-color: var(--muted);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button id="themeToggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Theme umschalten" title="Hell/Dunkel umschalten">🌙</button>
|
|
<h1>Object Detection</h1>
|
|
|
|
<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
|
|
<input type="file" name="file" accept="video/*" required>
|
|
<input type="submit" value="Upload Video">
|
|
</form>
|
|
|
|
<a id="startWebcam" href="/start_webcam">Start Webcam Detection</a>
|
|
|
|
<script>
|
|
function applyThemeBtn(){var d=document.documentElement.getAttribute('data-theme')==='dark';var b=document.getElementById('themeToggle');if(b)b.textContent=d?'☀️':'🌙';}
|
|
function toggleTheme(){var n=document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',n);localStorage.setItem('theme',n);applyThemeBtn();}
|
|
applyThemeBtn();
|
|
</script>
|
|
</body>
|
|
</html>
|