File size: 6,210 Bytes
f742815 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Portal - Attendr</title>
<link rel="stylesheet" href="style.css">
<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>
<!-- Navigation -->
<!-- Navigation -->
{% include '_navbar.html' %}
<!-- Main Content -->
<section class="section">
<div class="container" style="max-width: 800px;">
<h1 class="text-center mb-3">Student Attendance Portal</h1>
<!-- Step 1: Student ID Input -->
<div id="step1" class="glass-card mb-2">
<h2>Step 1: Enter Student ID</h2>
<div class="form-group">
<label class="form-label">Student ID</label>
<input type="text" id="studentId" class="form-input" placeholder="e.g., A20EC0001">
</div>
<div class="form-group">
<label class="form-label">Select Session</label>
<select id="sessionSelect" class="form-select">
<option value="">Loading sessions...</option>
</select>
</div>
<button id="startBtn" class="btn btn-primary" disabled>Start Verification</button>
</div>
<!-- Step 2: Device Permissions -->
<div id="step2" class="glass-card mb-2 hidden">
<h2>Step 2: Enable Permissions</h2>
<p class="text-muted">We need access to your camera and location to verify your attendance.</p>
<div class="grid grid-2 gap-2 mt-2">
<div class="status-badge status-info" id="cameraStatus">
<span>📷</span>
<span>Camera: Waiting...</span>
</div>
<div class="status-badge status-info" id="gpsStatus">
<span>📍</span>
<span>GPS: Waiting...</span>
</div>
</div>
<button id="enablePermissionsBtn" class="btn btn-primary mt-2">Enable Camera & GPS</button>
</div>
<!-- Step 3: Face Verification -->
<div id="step3" class="glass-card mb-2 hidden">
<h2>Step 3: Face Verification</h2>
<p class="text-muted">Position your face in the frame for verification.</p>
<div class="video-container mt-2">
<video id="videoPreview" class="video-preview" autoplay playsinline></video>
<canvas id="canvas" style="display: none;"></canvas>
</div>
<div id="faceStatus" class="mt-2"></div>
<button id="verifyFaceBtn" class="btn btn-primary mt-2">Verify My Face</button>
</div>
<!-- Step 4: Location Verification -->
<div id="step4" class="glass-card mb-2 hidden">
<h2>Step 4: Location Verification</h2>
<p class="text-muted">Verifying you are in the classroom...</p>
<div id="locationStatus" class="mt-2"></div>
<button id="verifyLocationBtn" class="btn btn-primary mt-2">Verify Location</button>
</div>
<!-- Step 5: Attendance Code -->
<div id="step5" class="glass-card mb-2 hidden">
<h2>Step 5: Enter Attendance Code</h2>
<p class="text-muted">Enter the code displayed by your lecturer.</p>
<div class="form-group mt-2">
<label class="form-label">Attendance Code</label>
<input type="text" id="attendanceCode" class="form-input" placeholder="Enter 6-digit code"
maxlength="6"
style="text-transform: uppercase; font-size: 1.5rem; text-align: center; letter-spacing: 0.5rem;">
</div>
<button id="submitAttendanceBtn" class="btn btn-success mt-2">Mark Attendance</button>
</div>
<!-- Success Message -->
<div id="successMessage" class="glass-card hidden"
style="background: rgba(34, 197, 94, 0.1); border: 2px solid var(--color-success);">
<div class="text-center">
<div style="font-size: 4rem; margin-bottom: 1rem;">✅</div>
<h2 style="color: var(--color-success);">Attendance Marked Successfully!</h2>
<p id="successDetails" class="text-muted mt-2"></p>
<button onclick="location.reload()" class="btn btn-primary mt-2">Mark Another Attendance</button>
</div>
</div>
<!-- Error Display -->
<div id="errorDisplay" class="hidden"></div>
</div>
</section>
<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay hidden">
<div class="text-center">
<div class="spinner"></div>
<p class="mt-2" id="loadingText">Processing...</p>
</div>
</div>
<script src="{{ url_for('static', filename='js/student.js') }}"></script>
<script>
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> |