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 charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Detection</title> <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> <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 { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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 { #uploadForm {
margin-bottom: 20px; margin-bottom: 20px;
} }
input[type="file"] { input[type="file"] {
margin-right: 10px; 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 { #startWebcam {
padding: 10px 20px; padding: 10px 20px;
@@ -24,17 +50,43 @@
color: white; color: white;
border: none; border: none;
border-radius: 5px; 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> </style>
</head> </head>
<body> <body>
<button id="themeToggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Theme umschalten" title="Hell/Dunkel umschalten">🌙</button>
<h1>Object Detection</h1> <h1>Object Detection</h1>
<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data"> <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept="video/*" required> <input type="file" name="file" accept="video/*" required>
<input type="submit" value="Upload Video"> <input type="submit" value="Upload Video">
</form> </form>
<a id="startWebcam" href="/start_webcam">Start Webcam Detection</a> <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> </body>
</html> </html>

43
templates/play_video.html
View File

@@ -4,7 +4,18 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Playback</title> <title>Video Playback</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> <style>
:root {
--bg: #f0f0f0; --fg: #213547; --panel: #ffffff;
--border: #cccccc; --muted: #555555;
}
:root[data-theme="dark"] {
--bg: #16181c; --fg: #e3e3e3; --panel: #23262b;
--border: #3a3f46; --muted: #9aa0a6;
}
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -12,9 +23,29 @@
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
background-color: #f0f0f0; background-color: var(--bg);
color: var(--fg);
transition: background-color 0.3s, color 0.3s;
padding: 20px; padding: 20px;
} }
.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);
}
.video-container { .video-container {
position: relative; position: relative;
width: 1020px; width: 1020px;
@@ -23,7 +54,7 @@
#videoFeed { #videoFeed {
width: 1020px; width: 1020px;
height: 600px; height: 600px;
border: 2px solid #ccc; border: 2px solid var(--border);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: block; display: block;
@@ -80,12 +111,13 @@
} }
.info { .info {
margin-top: 10px; margin-top: 10px;
color: #555; color: var(--muted);
font-size: 14px; font-size: 14px;
} }
</style> </style>
</head> </head>
<body> <body>
<button id="themeToggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Theme umschalten" title="Hell/Dunkel umschalten">🌙</button>
<h1>Video Playback with Object Detection</h1> <h1>Video Playback with Object Detection</h1>
<div class="video-container"> <div class="video-container">
<img id="videoFeed" src="{{ url_for('video_feed', filename=filename) }}" /> <img id="videoFeed" src="{{ url_for('video_feed', filename=filename) }}" />
@@ -227,5 +259,10 @@
} }
}, 100); }, 100);
</script> </script>
<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> </body>
</html> </html>

43
templates/webcam.html
View File

@@ -4,7 +4,18 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webcam Feed</title> <title>Webcam Feed</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> <style>
:root {
--bg: #f0f0f0; --fg: #213547; --panel: #ffffff;
--border: #cccccc; --muted: #555555;
}
:root[data-theme="dark"] {
--bg: #16181c; --fg: #e3e3e3; --panel: #23262b;
--border: #3a3f46; --muted: #9aa0a6;
}
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -12,9 +23,29 @@
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
background-color: #f0f0f0; background-color: var(--bg);
color: var(--fg);
transition: background-color 0.3s, color 0.3s;
padding: 20px; padding: 20px;
} }
.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);
}
.video-container { .video-container {
position: relative; position: relative;
width: 1020px; width: 1020px;
@@ -23,7 +54,7 @@
#videoFeed { #videoFeed {
width: 1020px; width: 1020px;
height: 600px; height: 600px;
border: 2px solid #ccc; border: 2px solid var(--border);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: block; display: block;
@@ -80,12 +111,13 @@
} }
.info { .info {
margin-top: 10px; margin-top: 10px;
color: #555; color: var(--muted);
font-size: 14px; font-size: 14px;
} }
</style> </style>
</head> </head>
<body> <body>
<button id="themeToggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Theme umschalten" title="Hell/Dunkel umschalten">🌙</button>
<h1>Webcam Object Detection</h1> <h1>Webcam Object Detection</h1>
<div class="video-container"> <div class="video-container">
<img id="videoFeed" src="{{ url_for('webcam_feed') }}" /> <img id="videoFeed" src="{{ url_for('webcam_feed') }}" />
@@ -227,5 +259,10 @@
} }
}, 100); }, 100);
</script> </script>
<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> </body>
</html> </html>