| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Register Face</title>
|
| <style>
|
| body {
|
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| margin: 0;
|
| padding: 0;
|
| background: linear-gradient(135deg, #f0f4f8 0%, #d7e1ec 100%);
|
| color: #333;
|
| line-height: 1.6;
|
| }
|
| .container {
|
| width: 100%;
|
| max-width: 800px;
|
| margin: 30px auto;
|
| padding: 30px;
|
| background-color: #fff;
|
| border-radius: 12px;
|
| box-shadow: 0 10px 25px rgba(0,0,0,0.12);
|
| text-align: center;
|
| border-top: 4px solid #1a4a7c;
|
| }
|
| h2 {
|
| color: #1a4a7c;
|
| margin-bottom: 25px;
|
| font-size: 28px;
|
| font-weight: 600;
|
| position: relative;
|
| padding-bottom: 10px;
|
| }
|
| h2:after {
|
| content: "";
|
| position: absolute;
|
| bottom: 0;
|
| left: 50%;
|
| transform: translateX(-50%);
|
| width: 80px;
|
| height: 3px;
|
| background: linear-gradient(90deg, #1a4a7c, #3498db);
|
| }
|
| .btn {
|
| display: inline-block;
|
| padding: 12px 24px;
|
| background: linear-gradient(to right, #1a4a7c, #3498db);
|
| color: white;
|
| text-decoration: none;
|
| border-radius: 8px;
|
| font-weight: 500;
|
| transition: all 0.3s;
|
| border: none;
|
| font-size: 16px;
|
| cursor: pointer;
|
| margin-top: 15px;
|
| box-shadow: 0 4px 8px rgba(26, 74, 124, 0.25);
|
| }
|
| .btn:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 6px 12px rgba(26, 74, 124, 0.35);
|
| background: linear-gradient(to right, #155785, #2980b9);
|
| }
|
| input[type="text"], select {
|
| width: 100%;
|
| padding: 12px 15px;
|
| margin: 10px 0;
|
| border: 1px solid #ddd;
|
| border-radius: 8px;
|
| box-sizing: border-box;
|
| font-size: 16px;
|
| background-color: #f9fbff;
|
| transition: all 0.3s;
|
| }
|
| input[type="text"]:focus, select:focus {
|
| border-color: #3498db;
|
| outline: none;
|
| box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
|
| background-color: #fff;
|
| }
|
| video {
|
| margin: 20px auto;
|
| border-radius: 8px;
|
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
| background-color: #eee;
|
| max-width: 100%;
|
| }
|
| #status {
|
| margin-top: 15px;
|
| font-weight: 500;
|
| color: #2c3e50;
|
| font-size: 16px;
|
| }
|
| .header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: 20px;
|
| }
|
| .back-link {
|
| color: #3498db;
|
| text-decoration: none;
|
| display: flex;
|
| align-items: center;
|
| font-weight: 500;
|
| transition: color 0.3s;
|
| }
|
| .back-link:hover {
|
| color: #1a4a7c;
|
| text-decoration: underline;
|
| }
|
| .form-container {
|
| margin-top: 20px;
|
| }
|
| .progress {
|
| margin-top: 10px;
|
| height: 10px;
|
| background-color: #eee;
|
| border-radius: 5px;
|
| overflow: hidden;
|
| position: relative;
|
| margin-bottom: 15px;
|
| }
|
| .progress-bar {
|
| height: 100%;
|
| background-color: #3498db;
|
| width: 0%;
|
| transition: width 0.5s ease;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <div class="header">
|
| <a href="/" class="back-link">
|
| <i class="fas fa-arrow-left"></i> Back to Home
|
| </a>
|
| <h2>Register Face</h2>
|
| </div>
|
| <div class="form-container">
|
| <select id="class-select" required>
|
| <option value="">Select Class</option>
|
| <option value="SY-19">SY-19</option>
|
| <option value="SY-20">SY-20</option>
|
| <option value="SY-21">SY-21</option>
|
| <option value="SY-22">SY-22</option>
|
| </select>
|
| <input type="text" id="name" placeholder="Enter your name" required>
|
| <input type="text" id="enrollment" placeholder="Enter Enrollment Number" required>
|
| <button onclick="startCapture()" class="btn">
|
| <i class="fas fa-camera"></i> Start Capture
|
| </button>
|
| <div class="video-container">
|
| <video id="video" width="300" autoplay></video>
|
| </div>
|
| <div class="progress">
|
| <div class="progress-bar" id="progress-bar"></div>
|
| </div>
|
| <p id="status">Select class, enter details, and click "Start Capture"</p>
|
| </div>
|
| </div>
|
| <script src="/static/js/webcam.js"></script>
|
| <script>
|
| let frames = [];
|
| let interval;
|
| const TOTAL_FRAMES = 120;
|
| function startCapture() {
|
| const className = document.getElementById('class-select').value;
|
| const name = document.getElementById('name').value.trim();
|
| const enrollment = document.getElementById('enrollment').value.trim();
|
| if (!className) return alert('Please select a class');
|
| if (!name) return alert('Please enter your name');
|
| if (!enrollment) return alert('Please enter enrollment number');
|
| frames = [];
|
| document.getElementById('status').innerHTML = 'Capturing...<br><small>Slowly move your head</small>';
|
| document.getElementById('progress-bar').style.width = '0%';
|
| interval = setInterval(() => {
|
| captureFrame(frames);
|
| const progress = (frames.length / TOTAL_FRAMES) * 100;
|
| document.getElementById('progress-bar').style.width = progress + '%';
|
| if (frames.length >= TOTAL_FRAMES) {
|
| clearInterval(interval);
|
| document.getElementById('status').innerHTML = 'Processing...';
|
| fetch('/api/register_face', {
|
| method: 'POST',
|
| headers: {'Content-Type': 'application/json'},
|
| body: JSON.stringify({
|
| class_name: className,
|
| name: name,
|
| enrollment: enrollment,
|
| images: frames
|
| })
|
| })
|
| .then(res => res.json())
|
| .then(data => {
|
| let msg = data.message;
|
| if (data.status === 'success') {
|
| msg += '. Please maintain consistent lighting.';
|
| }
|
| document.getElementById('status').innerHTML = msg;
|
| });
|
| }
|
| }, 1000);
|
| }
|
| initWebcam('video');
|
| </script>
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
|
| <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'93ecda75aef8e14d',t:'MTc0NzA4MzcwNy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
|
| </html> |
