Upload 11 files

static/css/style.css

@@ -0,0 +1,593 @@
+/* 
+ * Attendr - UTM Smart Attendance System
+ * Design Theme: UTM Universiti Teknologi Malaysia
+ * Primary Colors: Maroon (#8B1538) and Gold (#F4A900)
+ */
+
+/* ==================== IMPORTS ==================== */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800&display=swap');
+
+/* ==================== CSS VARIABLES ==================== */
+:root {
+  /* UTM Brand Colors */
+  --color-utm-maroon: #8B1538;
+  --color-utm-maroon-dark: #6B0F2A;
+  --color-utm-maroon-light: #A01D45;
+  --color-utm-gold: #F4A900;
+  --color-utm-gold-dark: #D49000;
+  --color-utm-gold-light: #FFB820;
+
+  /* Semantic Colors */
+  --color-primary: var(--color-utm-maroon);
+  --color-primary-dark: var(--color-utm-maroon-dark);
+  --color-primary-light: var(--color-utm-maroon-light);
+  --color-accent: var(--color-utm-gold);
+  --color-accent-dark: var(--color-utm-gold-dark);
+  --color-accent-light: var(--color-utm-gold-light);
+
+  /* UI Colors */
+  --color-success: #10B981;
+  --color-error: #EF4444;
+  --color-warning: #F59E0B;
+  --color-info: #3B82F6;
+
+  /* Neutral Colors */
+  --color-bg: #0F0A15;
+  --color-bg-secondary: #1A1425;
+  --color-surface: rgba(139, 21, 56, 0.1);
+  --color-surface-hover: rgba(139, 21, 56, 0.2);
+  --color-text: #F9FAFB;
+  --color-text-muted: #D1D5DB;
+  --color-border: rgba(244, 169, 0, 0.2);
+
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+
+  /* Border Radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-base: 300ms ease-in-out;
+  --transition-slow: 500ms ease-in-out;
+}
+
+/* ==================== RESET & BASE ==================== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: linear-gradient(135deg, #0F0A15 0%, #1A1425 50%, #0F0A15 100%);
+  background-attachment: fixed;
+  color: var(--color-text);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* UTM Pattern Background */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image:
+    radial-gradient(circle at 20% 50%, rgba(139, 21, 56, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(244, 169, 0, 0.1) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ==================== TYPOGRAPHY ==================== */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Outfit', 'Inter', sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--color-text);
+}
+
+h1 {
+  font-size: 2.5rem;
+  background: linear-gradient(135deg, var(--color-utm-maroon) 0%, var(--color-utm-gold) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+/* ==================== LAYOUT ==================== */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  position: relative;
+  z-index: 1;
+}
+
+.section {
+  padding: var(--spacing-2xl) 0;
+  position: relative;
+}
+
+/* ==================== NAVIGATION ==================== */
+.navbar {
+  background: rgba(15, 10, 21, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 2px solid var(--color-utm-gold);
+  padding: var(--spacing-md) 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 4px 20px rgba(139, 21, 56, 0.3);
+}
+
+.navbar-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbar-brand {
+  font-family: 'Outfit', sans-serif;
+  font-size: 1.75rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--color-utm-maroon) 0%, var(--color-utm-gold) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-decoration: none;
+  transition: transform var(--transition-fast);
+}
+
+.navbar-brand:hover {
+  transform: scale(1.05);
+}
+
+.navbar-nav {
+  display: flex;
+  list-style: none;
+  gap: var(--spacing-lg);
+  align-items: center;
+}
+
+.navbar-link {
+  color: var(--color-text);
+  text-decoration: none;
+  font-weight: 500;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  position: relative;
+}
+
+.navbar-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background: var(--color-utm-gold);
+  transition: width var(--transition-fast);
+}
+
+.navbar-link:hover {
+  color: var(--color-utm-gold);
+}
+
+.navbar-link:hover::after {
+  width: 80%;
+}
+
+/* ==================== GLASS CARD ==================== */
+.glass-card {
+  background: rgba(26, 20, 37, 0.7);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-xl);
+  box-shadow:
+    0 8px 32px rgba(139, 21, 56, 0.2),
+    inset 0 1px 0 rgba(244, 169, 0, 0.1);
+  transition: all var(--transition-base);
+}
+
+.glass-card:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 12px 40px rgba(139, 21, 56, 0.3),
+    inset 0 1px 0 rgba(244, 169, 0, 0.2);
+  border-color: rgba(244, 169, 0, 0.4);
+}
+
+/* ==================== BUTTONS ==================== */
+.btn {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.btn:hover::before {
+  width: 300px;
+  height: 300px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--color-utm-maroon) 0%, var(--color-utm-maroon-dark) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(139, 21, 56, 0.4);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, var(--color-utm-maroon-light) 0%, var(--color-utm-maroon) 100%);
+  box-shadow: 0 6px 20px rgba(139, 21, 56, 0.6);
+  transform: translateY(-2px);
+}
+
+.btn-secondary {
+  background: linear-gradient(135deg, var(--color-utm-gold) 0%, var(--color-utm-gold-dark) 100%);
+  color: var(--color-utm-maroon-dark);
+  box-shadow: 0 4px 15px rgba(244, 169, 0, 0.4);
+}
+
+.btn-secondary:hover {
+  background: linear-gradient(135deg, var(--color-utm-gold-light) 0%, var(--color-utm-gold) 100%);
+  box-shadow: 0 6px 20px rgba(244, 169, 0, 0.6);
+  transform: translateY(-2px);
+}
+
+.btn-success {
+  background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
+}
+
+.btn-success:hover {
+  background: linear-gradient(135deg, #10B981 0%, var(--color-success) 100%);
+  transform: translateY(-2px);
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--color-utm-gold);
+  border: 2px solid var(--color-utm-gold);
+}
+
+.btn-outline:hover {
+  background: var(--color-utm-gold);
+  color: var(--color-utm-maroon-dark);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ==================== FORMS ==================== */
+.form-group {
+  margin-bottom: var(--spacing-lg);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--spacing-sm);
+  font-weight: 600;
+  color: var(--color-utm-gold);
+}
+
+.form-input,
+.form-select {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: rgba(26, 20, 37, 0.6);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  font-size: 1rem;
+  transition: all var(--transition-fast);
+}
+
+.form-input:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--color-utm-gold);
+  box-shadow: 0 0 0 3px rgba(244, 169, 0, 0.1);
+  background: rgba(26, 20, 37, 0.8);
+}
+
+.form-select option {
+  background: #1A1425;
+  color: var(--color-text);
+}
+
+/* ==================== BADGES ==================== */
+.badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  background: rgba(139, 21, 56, 0.2);
+  color: var(--color-utm-gold);
+  border: 1px solid var(--color-utm-gold);
+}
+
+.badge-success {
+  background: rgba(16, 185, 129, 0.2);
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.badge-error {
+  background: rgba(239, 68, 68, 0.2);
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+/* ==================== CODE DISPLAY ==================== */
+.code-display {
+  font-family: 'Courier New', monospace;
+  font-size: 4rem;
+  font-weight: 800;
+  text-align: center;
+  padding: var(--spacing-xl);
+  background: linear-gradient(135deg, var(--color-utm-maroon) 0%, var(--color-utm-gold) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: 1rem;
+  text-shadow: 0 0 30px rgba(244, 169, 0, 0.5);
+}
+
+/* ==================== UTILITIES ==================== */
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+.mt-1 {
+  margin-top: var(--spacing-sm);
+}
+
+.mt-2 {
+  margin-top: var(--spacing-md);
+}
+
+.mt-3 {
+  margin-top: var(--spacing-lg);
+}
+
+.mb-1 {
+  margin-bottom: var(--spacing-sm);
+}
+
+.mb-2 {
+  margin-bottom: var(--spacing-md);
+}
+
+.mb-3 {
+  margin-bottom: var(--spacing-lg);
+}
+
+.hidden {
+  display: none !important;
+}
+
+.grid {
+  display: grid;
+  gap: var(--spacing-lg);
+}
+
+.grid-1 {
+  grid-template-columns: 1fr;
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.gap-1 {
+  gap: var(--spacing-sm);
+}
+
+.gap-2 {
+  gap: var(--spacing-md);
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* ==================== LOADING & OVERLAYS ==================== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(15, 10, 21, 0.9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(244, 169, 0, 0.2);
+  border-top-color: var(--color-utm-gold);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==================== ALERTS ==================== */
+.alert {
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-md);
+  border-left: 4px solid;
+}
+
+.alert-error {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: var(--color-error);
+  color: #FCA5A5;
+}
+
+.alert-success {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: var(--color-success);
+  color: #6EE7B7;
+}
+
+/* ==================== VIDEO & MEDIA ==================== */
+.video-container {
+  position: relative;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 2px solid var(--color-utm-gold);
+}
+
+.video-preview {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* ==================== STATUS BADGES ==================== */
+.status-badge {
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: rgba(26, 20, 37, 0.6);
+}
+
+.status-info {
+  border-color: var(--color-utm-gold);
+  background: rgba(244, 169, 0, 0.1);
+}
+
+/* ==================== RESPONSIVE ==================== */
+@media (max-width: 768px) {
+
+  .grid-2,
+  .grid-3 {
+    grid-template-columns: 1fr;
+  }
+
+  .navbar-nav {
+    gap: var(--spacing-sm);
+    font-size: 0.875rem;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  .code-display {
+    font-size: 2.5rem;
+    letter-spacing: 0.5rem;
+  }
+}
+
+/* ==================== ANIMATIONS ==================== */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.glass-card {
+  animation: fadeIn 0.5s ease-out;
+}

static/js/lecturer.js

@@ -0,0 +1,396 @@
+// Lecturer Dashboard JavaScript
+// Handles session creation, code display, and real-time attendance monitoring
+
+let currentSessionId = null;
+let refreshInterval = null;
+let sessionStartTime = null;
+let durationInterval = null;
+
+// ==================== INITIALIZATION ====================
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadClassrooms();
+    loadActiveSessions();
+    setupEventListeners();
+    prefillLecturerName();
+});
+
+async function prefillLecturerName() {
+    try {
+        const response = await fetch('/api/auth/current_user');
+        const data = await response.json();
+        if (data.success && data.data.role === 'lecturer') {
+            document.getElementById('lecturerName').value = data.data.name;
+        }
+    } catch (e) { console.error(e); }
+}
+
+function setupEventListeners() {
+    document.getElementById('createSessionBtn').addEventListener('click', createSession);
+    document.getElementById('endSessionBtn').addEventListener('click', endSession);
+    document.getElementById('exportBtn').addEventListener('click', exportAttendance);
+}
+
+// ==================== LOAD CLASSROOMS ====================
+
+async function loadClassrooms() {
+    try {
+        const response = await fetch('/api/classrooms');
+        const data = await response.json();
+
+        const select = document.getElementById('classroomSelect');
+        select.innerHTML = '<option value="">Select classroom...</option>';
+
+        if (data.success && data.data.length > 0) {
+            data.data.forEach(classroom => {
+                const option = document.createElement('option');
+                option.value = classroom.id;
+                option.textContent = `${classroom.name} - ${classroom.building}`;
+                select.appendChild(option);
+            });
+        }
+    } catch (error) {
+        console.error('Error loading classrooms:', error);
+        showMessage('Failed to load classrooms', 'error');
+    }
+}
+
+// ==================== LOAD ACTIVE SESSIONS ====================
+
+async function loadActiveSessions() {
+    try {
+        const response = await fetch('/api/get_active_sessions');
+        const data = await response.json();
+
+        const listDiv = document.getElementById('sessionsList');
+
+        if (data.success && data.data.length > 0) {
+            listDiv.innerHTML = data.data.map(session => `
+                <div class="glass-card mb-1" style="padding: 1rem; cursor: pointer;" onclick="selectSession(${session.id})">
+                    <strong>${session.course_name}</strong><br>
+                    <small class="text-muted">by ${session.lecturer_name}</small>
+                </div>
+            `).join('');
+        } else {
+            listDiv.innerHTML = '<p class="text-muted">No active sessions</p>';
+        }
+    } catch (error) {
+        console.error('Error loading sessions:', error);
+    }
+}
+
+// ==================== CREATE SESSION ====================
+
+async function createSession() {
+    const courseName = document.getElementById('courseName').value;
+    const lecturerName = document.getElementById('lecturerName').value;
+    const classroomId = document.getElementById('classroomSelect').value;
+
+    if (!courseName || !lecturerName || !classroomId) {
+        showMessage('Please fill in all fields', 'error');
+        return;
+    }
+
+    showLoading('Creating session...');
+
+    try {
+        const response = await fetch('/api/create_session', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                course_name: courseName,
+                lecturer_name: lecturerName,
+                classroom_id: parseInt(classroomId)
+            })
+        });
+
+        const data = await response.json();
+        hideLoading();
+
+        if (data.success) {
+            showMessage('Session created successfully!', 'success');
+            currentSessionId = data.data.id;
+            sessionStartTime = new Date();
+
+            // Clear form
+            document.getElementById('courseName').value = '';
+            document.getElementById('lecturerName').value = '';
+            document.getElementById('classroomSelect').value = '';
+
+            // Show session display
+            showSessionDisplay();
+            loadActiveSessions();
+            startCodeRefresh();
+            startDurationCounter();
+        } else {
+            showMessage(data.error, 'error');
+        }
+    } catch (error) {
+        hideLoading();
+        console.error('Create session error:', error);
+        showMessage('Failed to create session', 'error');
+    }
+}
+
+// ==================== SELECT SESSION ====================
+
+function selectSession(sessionId) {
+    if (currentSessionId === sessionId) return;
+    
+    currentSessionId = sessionId;
+    // Don't set sessionStartTime to new Date() here, 
+    // let fetchSessionData sync it from the server
+    
+    showSessionDisplay();
+    startCodeRefresh();
+    startDurationCounter();
+}
+
+// ==================== SESSION DISPLAY ====================
+
+function showSessionDisplay() {
+    document.getElementById('codeDisplayCard').classList.remove('hidden');
+    document.getElementById('statsCard').classList.remove('hidden');
+    document.getElementById('attendanceListCard').classList.remove('hidden');
+}
+
+function hideSessionDisplay() {
+    document.getElementById('codeDisplayCard').classList.add('hidden');
+    document.getElementById('statsCard').classList.add('hidden');
+    document.getElementById('attendanceListCard').classList.add('hidden');
+}
+
+// ==================== CODE REFRESH ====================
+
+async function startCodeRefresh() {
+    // Initial fetch
+    await fetchSessionData();
+
+    // Refresh every 5 seconds
+    if (refreshInterval) clearInterval(refreshInterval);
+    refreshInterval = setInterval(fetchSessionData, 5000);
+}
+
+async function fetchSessionData() {
+    if (!currentSessionId) return;
+
+    try {
+        const response = await fetch(`/api/get_session/${currentSessionId}`);
+        const data = await response.json();
+
+        if (data.success) {
+            const session = data.data;
+            const codeStatus = session.code_status;
+
+            // Sync session start time from server if not already set or different
+            if (session.start_time) {
+                const serverStartTime = new Date(session.start_time);
+                if (!sessionStartTime || Math.abs(sessionStartTime - serverStartTime) > 5000) {
+                    sessionStartTime = serverStartTime;
+                    console.log('Synced session start time with server:', sessionStartTime);
+                }
+            }
+
+            // Update code display
+            if (codeStatus && codeStatus.code) {
+                document.getElementById('attendanceCodeDisplay').textContent = codeStatus.code;
+                document.getElementById('codeTimer').textContent =
+                    `Refreshes in: ${codeStatus.time_remaining}s`;
+            }
+
+            // Fetch attendance records
+            await fetchAttendanceRecords();
+        }
+    } catch (error) {
+        console.error('Error fetching session data:', error);
+    }
+}
+
+// ==================== ATTENDANCE RECORDS ====================
+
+async function fetchAttendanceRecords() {
+    if (!currentSessionId) return;
+
+    try {
+        const response = await fetch(`/api/get_attendance/${currentSessionId}`);
+        const data = await response.json();
+
+        if (data.success) {
+            const records = data.data.records;
+
+            // Update count
+            document.getElementById('presentCount').textContent = records.length;
+
+            // Update list
+            const listDiv = document.getElementById('attendanceList');
+
+            if (records.length > 0) {
+                listDiv.innerHTML = records.map(record => {
+                    const time = new Date(record.marked_at).toLocaleTimeString();
+                    return `
+                        <div class="glass-card mb-1" style="padding: 0.75rem;">
+                            <div style="display: flex; justify-content: space-between; align-items: center;">
+                                <div>
+                                    <strong>${record.student.name}</strong><br>
+                                    <small class="text-muted">${record.student.student_id}</small>
+                                </div>
+                                <div class="text-right">
+                                    <div class="status-badge status-success" style="font-size: 0.75rem; padding: 0.25rem 0.5rem;">
+                                        ✓ ${time}
+                                    </div>
+                                    <small class="text-muted" style="display: block; margin-top: 0.25rem;">
+                                        ${record.distance_from_classroom.toFixed(0)}m away
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }).join('');
+            } else {
+                listDiv.innerHTML = '<p class="text-muted">No attendance records yet</p>';
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching attendance:', error);
+    }
+}
+
+// ==================== DURATION COUNTER ====================
+
+function startDurationCounter() {
+    if (durationInterval) clearInterval(durationInterval);
+
+    durationInterval = setInterval(() => {
+        if (!sessionStartTime) {
+            document.getElementById('sessionDuration').textContent = '00:00:00';
+            return;
+        }
+
+        const now = new Date();
+        const diffSeconds = Math.floor((now - sessionStartTime) / 1000);
+        
+        if (diffSeconds < 0) {
+            document.getElementById('sessionDuration').textContent = '00:00:00';
+            return;
+        }
+
+        const hours = Math.floor(diffSeconds / 3600);
+        const minutes = Math.floor((diffSeconds % 3600) / 60);
+        const seconds = diffSeconds % 60;
+
+        const formatted = [
+            hours.toString().padStart(2, '0'),
+            minutes.toString().padStart(2, '0'),
+            seconds.toString().padStart(2, '0')
+        ].join(':');
+
+        document.getElementById('sessionDuration').textContent = formatted;
+        document.getElementById('sessionDuration').style.fontSize = '1.5rem'; // Make it fit better
+    }, 1000);
+}
+
+// ==================== END SESSION ====================
+
+async function endSession() {
+    if (!currentSessionId) return;
+
+    if (!confirm('Are you sure you want to end this session?')) return;
+
+    showLoading('Ending session...');
+
+    try {
+        const response = await fetch(`/api/end_session/${currentSessionId}`, {
+            method: 'POST'
+        });
+
+        const data = await response.json();
+        hideLoading();
+
+        if (data.success) {
+            showMessage('Session ended successfully', 'success');
+
+            // Clear intervals
+            if (refreshInterval) clearInterval(refreshInterval);
+            if (durationInterval) clearInterval(durationInterval);
+
+            // Reset
+            currentSessionId = null;
+            sessionStartTime = null;
+            hideSessionDisplay();
+            loadActiveSessions();
+        } else {
+            showMessage(data.error, 'error');
+        }
+    } catch (error) {
+        hideLoading();
+        console.error('End session error:', error);
+        showMessage('Failed to end session', 'error');
+    }
+}
+
+// ==================== EXPORT ATTENDANCE ====================
+
+async function exportAttendance() {
+    if (!currentSessionId) return;
+
+    try {
+        const response = await fetch(`/api/get_attendance/${currentSessionId}`);
+        const data = await response.json();
+
+        if (data.success) {
+            const session = data.data.session;
+            const records = data.data.records;
+
+            // Create CSV content
+            let csv = 'Student ID,Name,Email,Time,Distance (m),Status\n';
+
+            records.forEach(record => {
+                const student = record.student;
+                const dateObj = new Date(record.marked_at);
+                const time = `${dateObj.toLocaleDateString()} ${dateObj.toLocaleTimeString()}`;
+
+                // Helper to escape CSV fields
+                const escape = (field) => `"${String(field).replace(/"/g, '""')}"`;
+
+                csv += `${escape(student.student_id)},${escape(student.name)},${escape(student.email || 'N/A')},${escape(time)},${escape(record.distance_from_classroom.toFixed(2))},${escape(record.status)}\n`;
+            });
+
+            // Download CSV
+            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `attendance_${session.course_name}_${new Date().toISOString().split('T')[0]}.csv`;
+            a.click();
+            window.URL.revokeObjectURL(url);
+
+            showMessage('Attendance exported successfully', 'success');
+        }
+    } catch (error) {
+        console.error('Export error:', error);
+        showMessage('Failed to export attendance', 'error');
+    }
+}
+
+// ==================== UTILITY FUNCTIONS ====================
+
+function showLoading(text = 'Processing...') {
+    document.getElementById('loadingText').textContent = text;
+    document.getElementById('loadingOverlay').classList.remove('hidden');
+}
+
+function hideLoading() {
+    document.getElementById('loadingOverlay').classList.add('hidden');
+}
+
+function showMessage(message, type = 'info') {
+    const messageDiv = document.getElementById('messageDisplay');
+    const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-error' : 'alert-info';
+
+    messageDiv.innerHTML = `<div class="alert ${alertClass}">${message}</div>`;
+    messageDiv.classList.remove('hidden');
+
+    setTimeout(() => {
+        messageDiv.classList.add('hidden');
+    }, 4000);
+}

static/js/student.js

@@ -0,0 +1,326 @@
+// Student Portal JavaScript
+// Handles face verification, location validation, and attendance marking
+
+let videoStream = null;
+let currentStudentId = null;
+let currentSessionId = null;
+let userLocation = null;
+let faceVerified = false;
+let locationVerified = false;
+
+// ==================== INITIALIZATION ====================
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadActiveSessions();
+    setupEventListeners();
+});
+
+function setupEventListeners() {
+    document.getElementById('startBtn').addEventListener('click', startVerification);
+    document.getElementById('enablePermissionsBtn').addEventListener('click', enablePermissions);
+    document.getElementById('verifyFaceBtn').addEventListener('click', verifyFace);
+    document.getElementById('verifyLocationBtn').addEventListener('click', verifyLocation);
+    document.getElementById('submitAttendanceBtn').addEventListener('click', submitAttendance);
+    
+    // Enable start button when both fields are filled
+    document.getElementById('studentId').addEventListener('input', checkStartButton);
+    document.getElementById('sessionSelect').addEventListener('change', checkStartButton);
+    
+    // Auto-uppercase attendance code
+    document.getElementById('attendanceCode').addEventListener('input', (e) => {
+        e.target.value = e.target.value.toUpperCase();
+    });
+}
+
+function checkStartButton() {
+    const studentId = document.getElementById('studentId').value.trim();
+    const sessionId = document.getElementById('sessionSelect').value;
+    document.getElementById('startBtn').disabled = !(studentId && sessionId);
+}
+
+// ==================== LOAD SESSIONS ====================
+
+async function loadActiveSessions() {
+    try {
+        const response = await fetch('/api/get_active_sessions');
+        const data = await response.json();
+        
+        const select = document.getElementById('sessionSelect');
+        select.innerHTML = '<option value="">Select a session...</option>';
+        
+        if (data.success && data.data.length > 0) {
+            data.data.forEach(session => {
+                const option = document.createElement('option');
+                option.value = session.id;
+                option.textContent = `${session.course_name} - ${session.lecturer_name}`;
+                select.appendChild(option);
+            });
+        } else {
+            select.innerHTML = '<option value="">No active sessions available</option>';
+        }
+    } catch (error) {
+        console.error('Error loading sessions:', error);
+        showError('Failed to load sessions. Please refresh the page.');
+    }
+}
+
+// ==================== STEP 1: START VERIFICATION ====================
+
+function startVerification() {
+    currentStudentId = document.getElementById('studentId').value.trim();
+    currentSessionId = document.getElementById('sessionSelect').value;
+    
+    if (!currentStudentId || !currentSessionId) {
+        showError('Please enter your Student ID and select a session.');
+        return;
+    }
+    
+    // Hide step 1, show step 2
+    document.getElementById('step1').classList.add('hidden');
+    document.getElementById('step2').classList.remove('hidden');
+}
+
+// ==================== STEP 2: ENABLE PERMISSIONS ====================
+
+async function enablePermissions() {
+    showLoading('Requesting permissions...');
+    
+    try {
+        // Request camera permission
+        const cameraStream = await navigator.mediaDevices.getUserMedia({ 
+            video: { facingMode: 'user' } 
+        });
+        videoStream = cameraStream;
+        updateStatus('cameraStatus', 'success', '📷 Camera: Enabled');
+        
+        // Request location permission
+        const position = await new Promise((resolve, reject) => {
+            navigator.geolocation.getCurrentPosition(resolve, reject, {
+                enableHighAccuracy: true,
+                timeout: 10000,
+                maximumAge: 0
+            });
+        });
+        
+        userLocation = {
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude
+        };
+        updateStatus('gpsStatus', 'success', '📍 GPS: Enabled');
+        
+        hideLoading();
+        
+        // Move to step 3
+        setTimeout(() => {
+            document.getElementById('step2').classList.add('hidden');
+            document.getElementById('step3').classList.remove('hidden');
+            startCamera();
+        }, 500);
+        
+    } catch (error) {
+        hideLoading();
+        console.error('Permission error:', error);
+        
+        if (error.code === 1) {
+            showError('Camera or GPS permission denied. Please enable permissions in your browser settings.');
+        } else if (error.code === 2) {
+            showError('Location unavailable. Please ensure GPS is enabled on your device.');
+        } else {
+            showError('Failed to enable permissions: ' + error.message);
+        }
+    }
+}
+
+function startCamera() {
+    const video = document.getElementById('videoPreview');
+    video.srcObject = videoStream;
+}
+
+// ==================== STEP 3: FACE VERIFICATION ====================
+
+async function verifyFace() {
+    showLoading('Verifying your face...');
+    
+    try {
+        // Capture image from video
+        const imageData = captureImage();
+        
+        // Send to API
+        const response = await fetch('/api/verify_face', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                student_id: currentStudentId,
+                image: imageData
+            })
+        });
+        
+        const data = await response.json();
+        hideLoading();
+        
+        if (data.success) {
+            faceVerified = true;
+            showStatus('faceStatus', 'success', `✅ ${data.message}`);
+            
+            // Move to step 4
+            setTimeout(() => {
+                stopCamera();
+                document.getElementById('step3').classList.add('hidden');
+                document.getElementById('step4').classList.remove('hidden');
+            }, 1000);
+        } else {
+            showStatus('faceStatus', 'error', `❌ ${data.error}`);
+        }
+        
+    } catch (error) {
+        hideLoading();
+        console.error('Face verification error:', error);
+        showStatus('faceStatus', 'error', '❌ Face verification failed. Please try again.');
+    }
+}
+
+function captureImage() {
+    const video = document.getElementById('videoPreview');
+    const canvas = document.getElementById('canvas');
+    
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(video, 0, 0);
+    
+    return canvas.toDataURL('image/jpeg', 0.8);
+}
+
+function stopCamera() {
+    if (videoStream) {
+        videoStream.getTracks().forEach(track => track.stop());
+    }
+}
+
+// ==================== STEP 4: LOCATION VERIFICATION ====================
+
+async function verifyLocation() {
+    if (!userLocation) {
+        showError('Location not available. Please enable GPS.');
+        return;
+    }
+    
+    showLoading('Verifying your location...');
+    
+    try {
+        const response = await fetch('/api/verify_location', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                latitude: userLocation.latitude,
+                longitude: userLocation.longitude,
+                session_id: currentSessionId
+            })
+        });
+        
+        const data = await response.json();
+        hideLoading();
+        
+        if (data.success) {
+            locationVerified = true;
+            showStatus('locationStatus', 'success', `✅ ${data.message}`);
+            
+            // Move to step 5
+            setTimeout(() => {
+                document.getElementById('step4').classList.add('hidden');
+                document.getElementById('step5').classList.remove('hidden');
+            }, 1000);
+        } else {
+            showStatus('locationStatus', 'error', `❌ ${data.error}`);
+        }
+        
+    } catch (error) {
+        hideLoading();
+        console.error('Location verification error:', error);
+        showStatus('locationStatus', 'error', '❌ Location verification failed.');
+    }
+}
+
+// ==================== STEP 5: SUBMIT ATTENDANCE ====================
+
+async function submitAttendance() {
+    const code = document.getElementById('attendanceCode').value.trim();
+    
+    if (!code || code.length !== 6) {
+        showError('Please enter a valid 6-digit code.');
+        return;
+    }
+    
+    if (!faceVerified || !locationVerified) {
+        showError('Please complete face and location verification first.');
+        return;
+    }
+    
+    showLoading('Marking attendance...');
+    
+    try {
+        const response = await fetch('/api/mark_attendance', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                student_id: currentStudentId,
+                session_id: currentSessionId,
+                code: code,
+                latitude: userLocation.latitude,
+                longitude: userLocation.longitude
+            })
+        });
+        
+        const data = await response.json();
+        hideLoading();
+        
+        if (data.success) {
+            // Show success
+            document.getElementById('step5').classList.add('hidden');
+            document.getElementById('successMessage').classList.remove('hidden');
+            document.getElementById('successDetails').textContent = 
+                `Your attendance has been recorded at ${new Date().toLocaleTimeString()}.`;
+        } else {
+            showError(data.error);
+        }
+        
+    } catch (error) {
+        hideLoading();
+        console.error('Submit attendance error:', error);
+        showError('Failed to mark attendance. Please try again.');
+    }
+}
+
+// ==================== UTILITY FUNCTIONS ====================
+
+function showLoading(text = 'Processing...') {
+    document.getElementById('loadingText').textContent = text;
+    document.getElementById('loadingOverlay').classList.remove('hidden');
+}
+
+function hideLoading() {
+    document.getElementById('loadingOverlay').classList.add('hidden');
+}
+
+function showError(message) {
+    const errorDiv = document.getElementById('errorDisplay');
+    errorDiv.innerHTML = `<div class="alert alert-error">${message}</div>`;
+    errorDiv.classList.remove('hidden');
+    
+    setTimeout(() => {
+        errorDiv.classList.add('hidden');
+    }, 5000);
+}
+
+function showStatus(elementId, type, message) {
+    const element = document.getElementById(elementId);
+    const alertClass = type === 'success' ? 'alert-success' : 'alert-error';
+    element.innerHTML = `<div class="alert ${alertClass}">${message}</div>`;
+}
+
+function updateStatus(elementId, type, text) {
+    const element = document.getElementById(elementId);
+    element.className = `status-badge status-${type}`;
+    element.innerHTML = `<span>${text.split(':')[0]}</span><span>${text.split(':')[1]}</span>`;
+}