joachim/vehicle-counter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark Mode fuer alle Seiten (Toggle + System-Default)

Browse Source 
- 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>
This commit is contained in:
Joachim Hummel
2026-06-01 19:44:49 +02:00
parent e30aae2781
commit b8298e584f
3 changed files with 134 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
templates/index.html
View File

@@ -4,18 +4,44 @@
<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-top: 50px;
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;
@@ -24,17 +50,43 @@
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>