sgrant/mccs-idphoto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial upload

Browse Source
This commit is contained in:
Skylar Grant 2026-07-08 10:56:04 -04:00
commit 272fb59545
5 changed files with 187 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
*.zip

9
css/style.css Normal file
View File

@ -0,0 +1,9 @@
/* Project-specific tweaks that go beyond Tailwind utility classes */
#camera-status {
pointer-events: none;
}
video#video {
transform: scaleX(-1); /* mirror the preview so it feels like a mirror, not a rear camera */
}

78
index.html Normal file
View File

@ -0,0 +1,78 @@
<!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>

83
js/app.js Normal file
View File

@ -0,0 +1,83 @@
const video = document.getElementById('video');
const previewImg = document.getElementById('preview-img');
const canvas = document.getElementById('canvas');
const cameraStatus = document.getElementById('camera-status');
const studentNumberInput = document.getElementById('student-number');
const inputError = document.getElementById('input-error');
const captureBtn = document.getElementById('capture-btn');
const downloadLink = document.getElementById('download-link');
let captured = false;
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
video.srcObject = stream;
cameraStatus.classList.add('hidden');
captureBtn.disabled = false;
} catch (err) {
cameraStatus.textContent = 'Unable to access camera: ' + err.message;
}
}
function sanitizeFilename(name) {
return name.trim().replace(/[^a-z0-9_-]+/gi, '_');
}
function showLiveView() {
previewImg.classList.add('hidden');
video.classList.remove('hidden');
downloadLink.classList.add('hidden');
captureBtn.textContent = 'Capture Photo';
captured = false;
}
function showCapturedView() {
video.classList.add('hidden');
previewImg.classList.remove('hidden');
captureBtn.textContent = 'Retake Photo';
captured = true;
}
function capturePhoto() {
if (captured) {
showLiveView();
return;
}
const studentNumber = studentNumberInput.value.trim();
if (!studentNumber) {
inputError.classList.remove('hidden');
studentNumberInput.focus();
return;
}
inputError.classList.add('hidden');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataUrl = canvas.toDataURL('image/png');
const filename = `${sanitizeFilename(studentNumber)}.png`;
previewImg.src = dataUrl;
downloadLink.href = dataUrl;
downloadLink.download = filename;
downloadLink.classList.remove('hidden');
showCapturedView();
downloadLink.click();
}
captureBtn.addEventListener('click', capturePhoto);
studentNumberInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
capturePhoto();
}
});
startCamera();

16
js/theme.js Normal file
View File

@ -0,0 +1,16 @@
const themeToggle = document.getElementById('theme-toggle');
const iconSun = document.getElementById('icon-sun');
const iconMoon = document.getElementById('icon-moon');
function updateIcons(isDark) {
iconSun.classList.toggle('hidden', !isDark);
iconMoon.classList.toggle('hidden', isDark);
}
updateIcons(document.documentElement.classList.contains('dark'));
themeToggle.addEventListener('click', () => {
const isDark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
updateIcons(isDark);
});