| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Mark Attendance</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: 15px 0;
|
| 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);
|
| }
|
| 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;
|
| }
|
| 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: 20px;
|
| font-size: 18px;
|
| padding: 15px;
|
| border-radius: 5px;
|
| background-color: #f8f9fa;
|
| display: inline-block;
|
| min-width: 60%;
|
| }
|
| .success {
|
| color: #27ae60;
|
| font-weight: 600;
|
| }
|
| .error {
|
| color: #e74c3c;
|
| font-weight: 600;
|
| }
|
| .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;
|
| }
|
| .video-container {
|
| position: relative;
|
| margin: 0 auto;
|
| width: 320px;
|
| max-width: 100%;
|
| }
|
| .camera-overlay {
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| bottom: 0;
|
| border: 2px solid rgba(52, 152, 219, 0.5);
|
| border-radius: 8px;
|
| pointer-events: none;
|
| }
|
| .loading {
|
| display: none;
|
| margin: 20px auto;
|
| border: 5px solid #f3f3f3;
|
| border-radius: 50%;
|
| border-top: 5px solid #3498db;
|
| width: 40px;
|
| height: 40px;
|
| animation: spin 1s linear infinite;
|
| }
|
| @keyframes spin {
|
| 0% { transform: rotate(0deg); }
|
| 100% { transform: rotate(360deg); }
|
| }
|
| </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>Mark Attendance</h2>
|
| </div>
|
| <select id="class-select-mark">
|
| <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>
|
| <div class="video-container">
|
| <video id="video" width="300" autoplay></video>
|
| <div class="camera-overlay"></div>
|
| </div>
|
| <button onclick="scanFace()" class="btn">
|
| <i class="fas fa-user-check"></i> Scan Face
|
| </button>
|
| <div id="result"></div>
|
| <p id="status">Select class and click "Scan Face"</p>
|
| </div>
|
|
|
| <script src="/static/js/webcam.js"></script>
|
| <script>
|
| let selectedVoice = null;
|
|
|
| function selectVoice() {
|
| const voices = speechSynthesis.getVoices();
|
| console.log('Available voices:', voices);
|
| selectedVoice = voices.find(voice =>
|
| voice.lang === 'en-GB' &&
|
| voice.name.includes('Google UK English Female')
|
| ) || voices.find(voice => voice.lang === 'en-GB');
|
|
|
| if (!selectedVoice) {
|
| console.log('Desired voice not found, using default');
|
| } else {
|
| console.log('Selected voice:', selectedVoice.name);
|
| }
|
| }
|
|
|
|
|
| if (speechSynthesis.getVoices().length > 0) {
|
| selectVoice();
|
| } else {
|
| speechSynthesis.onvoiceschanged = selectVoice;
|
| }
|
| </script>
|
| <script>
|
| function scanFace() {
|
| const className = document.getElementById('class-select-mark').value;
|
| if (!className) return alert('Please select a class');
|
| document.getElementById('status').innerText = 'Scanning...';
|
| captureFrame([], true).then(image => {
|
| fetch('/api/identify_face', {
|
| method: 'POST',
|
| headers: {'Content-Type': 'application/json'},
|
| body: JSON.stringify({class_name: className, image: image})
|
| })
|
| .then(res => res.json())
|
| .then(data => {
|
| const result = document.getElementById('result');
|
| if (data.status === 'success') {
|
|
|
| fetch('/api/get_attendance_average', {
|
| method: 'POST',
|
| headers: {'Content-Type': 'application/json'},
|
| body: JSON.stringify({class_name: className, enrollment: data.enrollment})
|
| })
|
| .then(res => res.json())
|
| .then(avgData => {
|
| let overallPercentage;
|
| if (avgData.error) {
|
| console.error(avgData.error);
|
| overallPercentage = 'N/A';
|
| } else {
|
| overallPercentage = avgData.overall_percentage;
|
| }
|
| result.innerHTML = `
|
| <p>Is this you? <strong>${data.name}</strong> (${data.enrollment})</p>
|
| <button id="checkin-btn" class="btn">Check In</button>
|
| <button id="checkout-btn" class="btn">Check Out</button>
|
| <button id="rescan-btn" class="btn">Rescan</button>
|
| `;
|
| document.getElementById('status').innerText = '';
|
| document.getElementById('checkin-btn').onclick = () => handleAction('checkin', className, data.enrollment, data.name, overallPercentage);
|
| document.getElementById('checkout-btn').onclick = () => handleAction('checkout', className, data.enrollment, data.name, overallPercentage);
|
| document.getElementById('rescan-btn').onclick = () => { result.innerHTML = ''; document.getElementById('status').innerText = 'Select class and click "Scan Face"'; };
|
| });
|
| } else {
|
| result.innerHTML = `<span class="error">${data.message}</span><br><button id="rescan-btn" class="btn">Rescan</button>`;
|
| document.getElementById('rescan-btn').onclick = () => { result.innerHTML = ''; document.getElementById('status').innerText = 'Select class and click "Scan Face"'; };
|
| }
|
| });
|
| });
|
| }
|
|
|
| function handleAction(action, className, enrollment, name, overallPercentage) {
|
| let data = { class_name: className, enrollment: enrollment, name: name };
|
| if (action === 'checkin') {
|
| const pin = prompt('Enter PIN and Check-in (4-digit PIN):');
|
| if (!pin || !/^\d{4}$/.test(pin)) {
|
| alert('Please enter a valid 4-digit PIN.');
|
| return;
|
| }
|
| data.pin = pin;
|
| }
|
| fetch(`/api/${action}`, {
|
| method: 'POST',
|
| headers: {'Content-Type': 'application/json'},
|
| body: JSON.stringify(data)
|
| })
|
| .then(res => res.json())
|
| .then(data => {
|
| alert(data.message);
|
| document.getElementById('result').innerHTML = '';
|
| document.getElementById('status').innerText = 'Select class and click "Scan Face"';
|
| if (data.status === 'success') {
|
| const now = new Date();
|
| const hour = now.getHours();
|
| let greeting;
|
| if (action === 'checkin') {
|
| if (hour < 12) {
|
| greeting = `Good morning, ${name}. Your overall attendance average is ${overallPercentage} percent.`;
|
| } else if (hour < 17) {
|
| greeting = `Good afternoon, ${name}. Your overall attendance average is ${overallPercentage} percent.`;
|
| } else {
|
| greeting = `Good evening, ${name}. Your overall attendance average is ${overallPercentage} percent.`;
|
| }
|
| } else if (action === 'checkout') {
|
| greeting = `Get well soon, see you tomorrow, ${name}. Your overall attendance average is ${overallPercentage} percent.`;
|
| }
|
| speakMessage(greeting);
|
| }
|
| });
|
| }
|
|
|
| function speakMessage(message) {
|
| if ('speechSynthesis' in window) {
|
| const utterance = new SpeechSynthesisUtterance(message);
|
| if (selectedVoice) {
|
| utterance.voice = selectedVoice;
|
| }
|
| speechSynthesis.speak(utterance);
|
| } else {
|
| console.log('Speech synthesis not supported');
|
| }
|
| }
|
|
|
| initWebcam('video');
|
| </script>
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
|
| </body>
|
| </html> |
