| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Attendr - Smart Attendance System</title>
|
| <link rel="stylesheet" href="style.css">
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link
|
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800&display=swap"
|
| rel="stylesheet">
|
| </head>
|
|
|
| <body>
|
|
|
|
|
| {% include '_navbar.html' %}
|
|
|
|
|
| <section class="section">
|
| <div class="container">
|
| <div class="text-center" style="max-width: 900px; margin: 0 auto;">
|
| <h1 class="fade-in">Smart Attendance System</h1>
|
| <p class="fade-in" style="font-size: 1.25rem; margin-bottom: 2rem; color: var(--color-text-secondary);">
|
| AI-powered attendance verification using facial recognition, geolocation, and auto-refresh codes
|
| </p>
|
|
|
|
|
| <div class="grid grid-3 mt-3 mb-3">
|
| <div class="glass-card fade-in" style="animation-delay: 0.1s;">
|
| <div style="font-size: 3rem; margin-bottom: 1rem;">🎭</div>
|
| <h3>Face Recognition</h3>
|
| <p>Biometric verification ensures only registered students can mark attendance</p>
|
| </div>
|
|
|
| <div class="glass-card fade-in" style="animation-delay: 0.2s;">
|
| <div style="font-size: 3rem; margin-bottom: 1rem;">📍</div>
|
| <h3>GPS Verification</h3>
|
| <p>Location-based validation confirms physical presence in the classroom</p>
|
| </div>
|
|
|
| <div class="glass-card fade-in" style="animation-delay: 0.3s;">
|
| <div style="font-size: 3rem; margin-bottom: 1rem;">🔄</div>
|
| <h3>Auto-Refresh Codes</h3>
|
| <p>Time-limited codes prevent sharing and proxy attendance</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="flex-center gap-2 mt-3">
|
| <a href="/student" class="btn btn-primary">
|
| <span>👤</span>
|
| <span>Student Portal</span>
|
| </a>
|
| <a href="/lecturer" class="btn btn-secondary">
|
| <span>👨🏫</span>
|
| <span>Lecturer Dashboard</span>
|
| </a>
|
| <a href="/register" class="btn btn-outline">
|
| <span>📝</span>
|
| <span>Register</span>
|
| </a>
|
| </div>
|
|
|
|
|
| <div class="glass-card mt-3 text-left">
|
| <h2 class="mb-2">How It Works</h2>
|
| <div class="grid grid-2 gap-2">
|
| <div>
|
| <h3 style="color: var(--color-primary-light);">For Students</h3>
|
| <ol style="padding-left: 1.5rem; color: var(--color-text-secondary);">
|
| <li style="margin-bottom: 0.5rem;">Register your account and face</li>
|
| <li style="margin-bottom: 0.5rem;">Login and enable camera/GPS permissions</li>
|
| <li style="margin-bottom: 0.5rem;">System verifies your face and location</li>
|
| <li style="margin-bottom: 0.5rem;">Enter the attendance code from lecturer</li>
|
| <li style="margin-bottom: 0.5rem;">Attendance marked instantly!</li>
|
| </ol>
|
| </div>
|
| <div>
|
| <h3 style="color: var(--color-secondary);">For Lecturers</h3>
|
| <ol style="padding-left: 1.5rem; color: var(--color-text-secondary);">
|
| <li style="margin-bottom: 0.5rem;">Register lecturer account</li>
|
| <li style="margin-bottom: 0.5rem;">Login and create attendance session</li>
|
| <li style="margin-bottom: 0.5rem;">Display auto-refreshing code to students</li>
|
| <li style="margin-bottom: 0.5rem;">Monitor real-time attendance updates</li>
|
| <li style="margin-bottom: 0.5rem;">Export reports for record-keeping</li>
|
| </ol>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="glass-card mt-3 text-left">
|
| <h2 class="mb-2">AI Logic & Security</h2>
|
| <p style="color: var(--color-text-secondary); margin-bottom: 1.5rem;">
|
| Attendr implements five Knowledge Representation (KR) rules using First-Order Logic to ensure
|
| secure, fraud-proof attendance:
|
| </p>
|
| <div class="grid grid-2 gap-2">
|
| <div class="alert alert-info">
|
| <div>
|
| <strong>KR Rule #1: Face Recognition</strong><br>
|
| <small>∀x ((CapturedFace(x) ∧ MatchStored(x)) → FaceMatch(x))</small>
|
| </div>
|
| </div>
|
| <div class="alert alert-info">
|
| <div>
|
| <strong>KR Rule #2: Location Verification</strong><br>
|
| <small>∀x[(Student(x) ∧ IsWithinAllowedArea(x)) → VerifiedLocation(x)]</small>
|
| </div>
|
| </div>
|
| <div class="alert alert-info">
|
| <div>
|
| <strong>KR Rule #3: Device Readiness</strong><br>
|
| <small>∀d ((CameraOn(d) ∧ GPSOn(d)) → StartVerification(d))</small>
|
| </div>
|
| </div>
|
| <div class="alert alert-info">
|
| <div>
|
| <strong>KR Rule #4: Attendance Validation</strong><br>
|
| <small>∀x ((FaceMatch(x) ∧ LocationValid(x)) → GrantCodeAccess(x))</small>
|
| </div>
|
| </div>
|
| </div>
|
| <div class="alert alert-success mt-2">
|
| <div>
|
| <strong>KR Rule #5: Auto-Refresh Code Confirmation</strong><br>
|
| <small>∀x ((ValidCodeEntry(User,x) ∧ WithinCycle(Code,x)) → MarkPresent(System,x))</small>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <script>
|
|
|
| document.addEventListener('DOMContentLoaded', () => {
|
| const cards = document.querySelectorAll('.fade-in');
|
| cards.forEach((card, index) => {
|
| card.style.animationDelay = `${index * 0.1}s`;
|
| });
|
| });
|
|
|
|
|
| async function logout() {
|
| if (!confirm('Are you sure you want to logout?')) return;
|
|
|
| try {
|
| const response = await fetch('/api/auth/logout', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' }
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (data.success) {
|
| alert(data.message);
|
| window.location.href = '/';
|
| } else {
|
| alert('Logout failed');
|
| }
|
| } catch (error) {
|
| alert('Logout failed');
|
| }
|
| }
|
| </script>
|
| </body>
|
|
|
| </html> |
