Spaces:

Moai633
/

Smart-Attendance-System-II

Sleeping

App Files Files Community

Subh775 commited on Jun 30

Commit

0e736c9

verified ·

1 Parent(s): adbf28d

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +636 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,636 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smart Attendance System</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+        }
+        .header {
+            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+        .header p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+        }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            padding: 30px;
+            background: #f8fafc;
+        }
+        .stat-card {
+            background: white;
+            padding: 25px;
+            border-radius: 15px;
+            text-align: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .stat-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+        }
+        .stat-number {
+            font-size: 2.5rem;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .stat-label {
+            color: #64748b;
+            font-size: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .total { color: #3b82f6; }
+        .present { color: #10b981; }
+        .absent { color: #ef4444; }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            padding: 30px;
+        }
+        .section {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        .section h2 {
+            color: #1e293b;
+            margin-bottom: 20px;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+        .camera-container {
+            position: relative;
+            margin-bottom: 20px;
+        }
+        #video {
+            width: 100%;
+            max-width: 400px;
+            border-radius: 10px;
+            border: 3px solid #e2e8f0;
+        }
+        .camera-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 200px;
+            height: 200px;
+            border: 2px dashed #4f46e5;
+            border-radius: 50%;
+            pointer-events: none;
+        }
+        .controls {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+            color: white;
+        }
+        .btn-success {
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            color: white;
+        }
+        .btn-danger {
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            color: white;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+        }
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #374151;
+            font-weight: 600;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e2e8f0;
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: #4f46e5;
+        }
+        .status-message {
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-weight: 600;
+            text-align: center;
+        }
+        .status-success {
+            background: #dcfce7;
+            color: #166534;
+            border: 1px solid #bbf7d0;
+        }
+        .status-error {
+            background: #fef2f2;
+            color: #991b1b;
+            border: 1px solid #fecaca;
+        }
+        .attendance-list {
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .attendance-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px;
+            border-bottom: 1px solid #e2e8f0;
+            transition: background-color 0.3s ease;
+        }
+        .attendance-item:hover {
+            background: #f8fafc;
+        }
+        .attendance-item:last-child {
+            border-bottom: none;
+        }
+        .attendance-name {
+            font-weight: 600;
+            color: #1e293b;
+        }
+        .attendance-time {
+            color: #64748b;
+            font-size: 0.9rem;
+        }
+        .time-display {
+            background: #f1f5f9;
+            padding: 10px;
+            border-radius: 8px;
+            text-align: center;
+            margin-bottom: 20px;
+            font-family: 'Courier New', monospace;
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #1e293b;
+        }
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #64748b;
+        }
+        .spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #4f46e5;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @media (max-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr;
+                gap: 20px;
+                padding: 20px;
+            }
+            .stats-grid {
+                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+                gap: 15px;
+                padding: 20px;
+            }
+            .header h1 {
+                font-size: 2rem;
+            }
+            .controls {
+                flex-direction: column;
+            }
+            .btn {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎯 Smart Attendance System</h1>
+            <p>Advanced Face Recognition Attendance Management</p>
+        </div>
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-number total" id="totalUsers">{{ stats.total_users }}</div>
+                <div class="stat-label">Total Users</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number present" id="presentToday">{{ stats.present_today }}</div>
+                <div class="stat-label">Present Today</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number absent" id="absentToday">{{ stats.absent_today }}</div>
+                <div class="stat-label">Absent Today</div>
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="section">
+                <h2>📷 Face Recognition</h2>
+                <div class="time-display" id="currentTime"></div>
+                <div class="camera-container">
+                    <video id="video" autoplay muted></video>
+                    <div class="camera-overlay"></div>
+                </div>
+                <div class="controls">
+                    <button class="btn btn-primary" id="startCamera">Start Camera</button>
+                    <button class="btn btn-success" id="checkIn">Check In</button>
+                    <button class="btn btn-danger" id="checkOut">Check Out</button>
+                </div>
+                <div id="recognitionStatus"></div>
+            </div>
+            <div class="section">
+                <h2>👤 Add New User</h2>
+                <form id="addUserForm" enctype="multipart/form-data">
+                    <div class="form-group">
+                        <label for="userName">Full Name</label>
+                        <input type="text" id="userName" name="name" required placeholder="Enter full name">
+                    </div>
+                    <div class="form-group">
+                        <label for="faceImage">Face Photo</label>
+                        <input type="file" id="faceImage" name="face_image" accept="image/*" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary" style="width: 100%;">Add User</button>
+                </form>
+                <div id="addUserStatus"></div>
+                <h3 style="margin-top: 30px; margin-bottom: 15px; color: #1e293b;">📋 Today's Attendance</h3>
+                <div class="attendance-list" id="attendanceList">
+                    <div class="loading">
+                        <div class="spinner"></div>
+                        Loading attendance...
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let video;
+        let isRecognizing = false;
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', function() {
+            updateCurrentTime();
+            setInterval(updateCurrentTime, 1000);
+            loadAttendanceData();
+            setInterval(loadAttendanceData, 30000); // Refresh every 30 seconds
+            setupEventListeners();
+        });
+        function updateCurrentTime() {
+            const now = new Date();
+            const options = {
+                timeZone: 'Asia/Kolkata',
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: true
+            };
+            document.getElementById('currentTime').textContent = now.toLocaleString('en-IN', options);
+        }
+        function setupEventListeners() {
+            document.getElementById('startCamera').addEventListener('click', startCamera);
+            document.getElementById('checkIn').addEventListener('click', () => recognizeAndMark('check_in'));
+            document.getElementById('checkOut').addEventListener('click', () => recognizeAndMark('check_out'));
+            document.getElementById('addUserForm').addEventListener('submit', addUser);
+        }
+        async function startCamera() {
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: {
+                        width: { ideal: 640 },
+                        height: { ideal: 480 },
+                        facingMode: 'user'
+                    }
+                });
+                video = document.getElementById('video');
+                video.srcObject = stream;
+                document.getElementById('startCamera').textContent = 'Camera Active';
+                document.getElementById('startCamera').disabled = true;
+                showStatus('Camera started successfully!', 'success');
+            } catch (error) {
+                console.error('Error accessing camera:', error);
+                showStatus('Error accessing camera. Please check permissions.', 'error');
+            }
+        }
+        async function recognizeAndMark(type) {
+            if (!video || !video.srcObject || isRecognizing) {
+                showStatus('Please start the camera first or wait for current recognition to complete.', 'error');
+                return;
+            }
+            isRecognizing = true;
+            const actionText = type === 'check_in' ? 'Checking In' : 'Checking Out';
+            showStatus(`${actionText}... Please look at the camera.`, 'info');
+            try {
+                // Capture frame from video
+                const canvas = document.createElement('canvas');
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(video, 0, 0);
+                const imageData = canvas.toDataURL('image/jpeg', 0.8);
+                const response = await fetch('/api/recognize', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        image: imageData,
+                        type: type
+                    })
+                });
+                const result = await response.json();
+                if (result.success) {
+                    const actionPast = type === 'check_in' ? 'checked in' : 'checked out';
+                    showStatus(`✅ ${result.name} successfully ${actionPast} at ${result.time}! (Confidence: ${result.confidence}%)`, 'success');
+                    loadAttendanceData(); // Refresh attendance list
+                    loadStats(); // Refresh statistics
+                } else {
+                    showStatus(`❌ ${result.message}`, 'error');
+                }
+            } catch (error) {
+                console.error('Recognition error:', error);
+                showStatus('Recognition failed. Please try again.', 'error');
+            } finally {
+                isRecognizing = false;
+            }
+        }
+        async function addUser(event) {
+            event.preventDefault();
+            const formData = new FormData();
+            const nameInput = document.getElementById('userName');
+            const imageInput = document.getElementById('faceImage');
+            if (!nameInput.value.trim()) {
+                showUserStatus('Please enter a name.', 'error');
+                return;
+            }
+            if (!imageInput.files[0]) {
+                showUserStatus('Please select a face image.', 'error');
+                return;
+            }
+            formData.append('name', nameInput.value.trim());
+            formData.append('face_image', imageInput.files[0]);
+            showUserStatus('Adding user... Please wait.', 'info');
+            try {
+                const response = await fetch('/api/add_user', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.json();
+                if (result.success) {
+                    showUserStatus(`✅ ${result.message}`, 'success');
+                    document.getElementById('addUserForm').reset();
+                    loadStats(); // Refresh statistics
+                } else {
+                    showUserStatus(`❌ ${result.message}`, 'error');
+                }
+            } catch (error) {
+                console.error('Add user error:', error);
+                showUserStatus('Failed to add user. Please try again.', 'error');
+            }
+        }
+        async function loadStats() {
+            try {
+                const response = await fetch('/api/stats');
+                const stats = await response.json();
+                document.getElementById('totalUsers').textContent = stats.total_users;
+                document.getElementById('presentToday').textContent = stats.present_today;
+                document.getElementById('absentToday').textContent = stats.absent_today;
+            } catch (error) {
+                console.error('Error loading stats:', error);
+            }
+        }
+        async function loadAttendanceData() {
+            try {
+                const response = await fetch('/api/stats');
+                const data = await response.json();
+                const attendanceList = document.getElementById('attendanceList');
+                if (data.today_attendance && data.today_attendance.length > 0) {
+                    attendanceList.innerHTML = data.today_attendance.map(record => `
+                        <div class="attendance-item">
+                            <div>
+                                <div class="attendance-name">${record.name}</div>
+                                <div class="attendance-time">
+                                    ${record.check_in ? `In: ${record.check_in}` : 'Not checked in'}
+                                    ${record.check_out ? ` | Out: ${record.check_out}` : ''}
+                                </div>
+                            </div>
+                            <div style="color: ${record.check_out ? '#10b981' : '#f59e0b'};">
+                                ${record.check_out ? '✅ Complete' : '🕐 Active'}
+                            </div>
+                        </div>
+                    `).join('');
+                } else {
+                    attendanceList.innerHTML = `
+                        <div class="attendance-item" style="justify-content: center; color: #64748b;">
+                            📝 No attendance records for today
+                        </div>
+                    `;
+                }
+                // Update stats
+                document.getElementById('totalUsers').textContent = data.total_users;
+                document.getElementById('presentToday').textContent = data.present_today;
+                document.getElementById('absentToday').textContent = data.absent_today;
+            } catch (error) {
+                console.error('Error loading attendance:', error);
+                document.getElementById('attendanceList').innerHTML = `
+                    <div class="attendance-item" style="justify-content: center; color: #ef4444;">
+                        ❌ Error loading attendance data
+                    </div>
+                `;
+            }
+        }
+        function showStatus(message, type) {
+            const statusDiv = document.getElementById('recognitionStatus');
+            statusDiv.innerHTML = `<div class="status-message status-${type === 'success' ? 'success' : 'error'}">${message}</div>`;
+            if (type === 'success') {
+                setTimeout(() => {
+                    statusDiv.innerHTML = '';
+                }, 5000);
+            }
+        }
+        function showUserStatus(message, type) {
+            const statusDiv = document.getElementById('addUserStatus');
+            statusDiv.innerHTML = `<div class="status-message status-${type === 'success' ? 'success' : 'error'}">${message}</div>`;
+            if (type === 'success') {
+                setTimeout(() => {
+                    statusDiv.innerHTML = '';
+                }, 5000);
+            }
+        }
+        // Add visual feedback for camera status
+        document.getElementById('video').addEventListener('loadedmetadata', function() {
+            this.style.border = '3px solid #10b981';
+        });
+        // Handle page visibility changes to manage camera
+        document.addEventListener('visibilitychange', function() {
+            if (document.hidden && video && video.srcObject) {
+                // Optionally pause video when page is hidden
+                video.pause();
+            } else if (!document.hidden && video && video.srcObject) {
+                video.play();
+            }
+        });
+    </script>
+</body>
+</html>