79 lines
3.7 KiB
HTML
79 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Student ID Photo Capture</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = { darkMode: 'class' };
|
|
</script>
|
|
<script>
|
|
(function () {
|
|
var stored = localStorage.getItem('theme');
|
|
var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
var isDark = stored ? stored === 'dark' : systemDark;
|
|
document.documentElement.classList.toggle('dark', isDark);
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4 transition-colors">
|
|
|
|
<button
|
|
id="theme-toggle"
|
|
class="fixed top-4 right-4 z-50 p-2 rounded-full bg-white dark:bg-gray-800 shadow-md border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
|
aria-label="Toggle dark mode"
|
|
>
|
|
<svg id="icon-sun" class="hidden w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1.5m0 15V21m9-9h-1.5m-15 0H3m15.364-6.364-1.06 1.06M6.697 17.303l-1.06 1.06m0-12.728 1.06 1.06m10.607 10.607 1.06 1.06M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z" />
|
|
</svg>
|
|
<svg id="icon-moon" class="hidden w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<main class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg w-full max-w-xl p-6 space-y-6 transition-colors">
|
|
<header>
|
|
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Student ID Photo Capture</h1>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Capture a photo from your webcam and save it using the student number.</p>
|
|
</header>
|
|
|
|
<div class="relative bg-black rounded-xl overflow-hidden aspect-video flex items-center justify-center">
|
|
<video id="video" class="w-full h-full object-cover" autoplay playsinline muted></video>
|
|
<img id="preview-img" class="hidden w-full h-full object-cover" alt="Captured student photo">
|
|
<p id="camera-status" class="absolute text-gray-300 text-sm">Requesting camera access…</p>
|
|
</div>
|
|
|
|
<canvas id="canvas" class="hidden"></canvas>
|
|
|
|
<div>
|
|
<label for="student-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Student Number</label>
|
|
<input
|
|
id="student-number"
|
|
type="text"
|
|
inputmode="numeric"
|
|
placeholder="e.g. 20231234"
|
|
class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg px-3 py-2 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
>
|
|
<p id="input-error" class="text-sm text-red-600 dark:text-red-400 mt-1 hidden">Please enter a student number before capturing.</p>
|
|
</div>
|
|
|
|
<button
|
|
id="capture-btn"
|
|
class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-medium py-2.5 rounded-lg transition-colors"
|
|
disabled
|
|
>
|
|
Capture Photo
|
|
</button>
|
|
|
|
<a id="download-link" class="hidden text-sm text-blue-600 dark:text-blue-400 hover:underline text-center" download>
|
|
Download didn't start? Click here.
|
|
</a>
|
|
</main>
|
|
|
|
<script src="js/theme.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|