Upload 21 files

app.py

@@ -0,0 +1,809 @@
+from flask import Flask, render_template, request, jsonify, session, redirect, url_for, send_file
+from flask_sqlalchemy import SQLAlchemy
+from flask_mail import Mail, Message
+from werkzeug.security import generate_password_hash, check_password_hash
+import sqlite3
+import pandas as pd
+import os
+import cv2
+import numpy as np
+from datetime import datetime, time, date
+import base64
+import json
+import random
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your_secret_key_here'
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+# Email configuration
+app.config['MAIL_SERVER'] = 'smtp.gmail.com'
+app.config['MAIL_PORT'] = 465
+app.config['MAIL_USERNAME'] = 'your_email@gmail.com'  # Replace with your email
+app.config['MAIL_PASSWORD'] = 'your_password'  # Replace with your password
+app.config['MAIL_USE_TLS'] = False
+app.config['MAIL_USE_SSL'] = True
+
+db = SQLAlchemy(app)
+mail = Mail(app)
+
+# User Model
+class User(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    full_name = db.Column(db.String(100), nullable=False)
+    email = db.Column(db.String(100), unique=True, nullable=False)
+    username = db.Column(db.String(50), unique=True, nullable=False)
+    password = db.Column(db.String(100), nullable=False)
+    role = db.Column(db.String(10), nullable=False)
+    enrollment_number = db.Column(db.String(20), unique=True, nullable=True)
+    phone_number = db.Column(db.String(20), nullable=True)
+    student_number = db.Column(db.String(20), unique=True, nullable=True)
+    parent_number = db.Column(db.String(20), nullable=True)
+    parent_email = db.Column(db.String(100), nullable=True)
+    selected_class = db.Column(db.String(10), nullable=True)
+    selected_regular_subjects = db.Column(db.Text, nullable=True)  # JSON list
+    selected_specializations = db.Column(db.Text, nullable=True)  # JSON list
+    selected_batch = db.Column(db.String(20), nullable=True)
+    selected_practicals = db.Column(db.Text, nullable=True)  # JSON list
+
+# Daily PIN Model
+class DailyPin(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    class_name = db.Column(db.String(10), nullable=False)
+    pin = db.Column(db.String(4), nullable=False)
+    date = db.Column(db.Date, nullable=False)
+
+# Timetable Database Setup
+def get_db_connection():
+    conn = sqlite3.connect('config.db')
+    conn.row_factory = sqlite3.Row
+    return conn
+
+def init_timetable_db():
+    conn = get_db_connection()
+    conn.execute('''
+        CREATE TABLE IF NOT EXISTS teacher_config (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            class_name TEXT NOT NULL,
+            config_type TEXT NOT NULL,
+            name TEXT NOT NULL
+        )
+    ''')
+    conn.commit()
+    conn.close()
+
+# Create databases
+with app.app_context():
+    db.create_all()
+    init_timetable_db()
+
+# Attendance System Setup
+face_cascade = cv2.CascadeClassifier("haarcascade_frontalface_alt.xml")
+dataset_path = "./face_dataset/"
+attendance_path = "./attendance_data/"
+os.makedirs(dataset_path, exist_ok=True)
+os.makedirs(attendance_path, exist_ok=True)
+
+# Function to get or generate daily PIN for a class
+def get_daily_pin(class_name):
+    today = date.today()
+    pin_entry = DailyPin.query.filter_by(class_name=class_name, date=today).first()
+    if not pin_entry:
+        pin = f"{random.randint(0, 9999):04d}"  # Generate 4-digit PIN
+        pin_entry = DailyPin(class_name=class_name, pin=pin, date=today)
+        db.session.add(pin_entry)
+        db.session.commit()
+    return pin_entry.pin
+
+# Combined Routes
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/signup', methods=['POST'])
+def signup():
+    data = request.json
+    full_name = data.get('full_name')
+    email = data.get('email')
+    username = data.get('username')
+    password = data.get('password')
+    role = data.get('role')
+    enrollment = data.get('enrollment_number') if role == 'student' else None
+    phone_number = data.get('phone_number') if role == 'teacher' else None
+    student_number = data.get('student_number') if role == 'student' else None
+    parent_number = data.get('parent_number') if role == 'student' else None
+    parent_email = data.get('parent_email') if role == 'student' else None
+
+    if not all([full_name, email, username, password, role]):
+        return jsonify({'success': False, 'message': 'All fields are required!'})
+    if role == 'student' and not enrollment:
+        return jsonify({'success': False, 'message': 'Enrollment number is required for students!'})
+    if role == 'teacher' and not phone_number:
+        return jsonify({'success': False, 'message': 'Phone number is required for teachers!'})
+
+    if User.query.filter((User.username == username) | (User.email == email) | 
+                         (User.enrollment_number == enrollment) | (User.student_number == student_number)).first():
+        return jsonify({'success': False, 'message': 'Username, email, enrollment, or student number already exists!'})
+
+    hashed = generate_password_hash(password)
+    u = User(
+        full_name=full_name, email=email,
+        username=username, password=hashed, role=role,
+        enrollment_number=enrollment,
+        phone_number=phone_number,
+        student_number=student_number,
+        parent_number=parent_number,
+        parent_email=parent_email
+    )
+    db.session.add(u)
+    db.session.commit()
+    return jsonify({'success': True, 'message': 'Account created successfully! Please log in.'})
+
+@app.route('/login', methods=['POST'])
+def login():
+    data = request.json
+    username = data.get('username')
+    password = data.get('password')
+    role = data.get('role')
+
+    user = User.query.filter_by(username=username, role=role).first()
+    if user and check_password_hash(user.password, password):
+        session['user_id'] = user.id
+        session['role'] = user.role
+        redirect_url = '/teacher_dashboard' if role == 'teacher' else '/student_dashboard'
+        return jsonify({'success': True, 'redirect': redirect_url})
+    return jsonify({'success': False, 'message': 'Invalid username or password'})
+
+@app.route('/logout')
+def logout():
+    session.clear()
+    return redirect(url_for('index'))
+
+@app.route('/teacher_dashboard')
+def teacher_dashboard():
+    if 'user_id' not in session or session['role'] != 'teacher':
+        return redirect(url_for('index'))
+    user = db.session.get(User, session['user_id'])
+    pin = get_daily_pin(user.selected_class) if user.selected_class else None
+    return render_template('teacher_dashboard.html', user=user, selected_class=user.selected_class, daily_pin=pin)
+
+@app.route('/api/update_teacher_profile', methods=['POST'])
+def update_teacher_profile():
+    if 'user_id' not in session or session['role'] != 'teacher':
+        return jsonify({'success': False, 'message': 'Unauthorized'}), 401
+    data = request.json
+    user = db.session.get(User, session['user_id'])
+    user.full_name = data['full_name']
+    user.email = data['email']
+    user.phone_number = data['phone_number']
+    db.session.commit()
+    return jsonify({'success': True, 'message': 'Profile updated'})
+
+@app.route('/get_students', methods=['GET'])
+def get_students():
+    class_name = request.args.get('class')
+    students = User.query.filter_by(role='student', selected_class=class_name).all()
+    students_data = [{'id': s.id, 'full_name': s.full_name, 'enrollment_number': s.enrollment_number} for s in students]
+    return jsonify({'students': students_data})
+
+@app.route('/api/select_teacher_class', methods=['POST'])
+def select_teacher_class():
+    if 'user_id' not in session or session['role'] != 'teacher':
+        return jsonify({'success': False}), 401
+    data = request.json
+    cls = data.get('class')
+    user = db.session.get(User, session['user_id'])
+    user.selected_class = cls
+    db.session.commit()
+    return jsonify({'success': True})
+
+@app.route('/get_student_details', methods=['GET'])
+def get_student_details():
+    student_id = request.args.get('id')
+    student = db.session.get(User, student_id)
+    if not student or student.role != 'student':
+        return jsonify({'error': 'Student not found'}), 404
+
+    subject_attendance = get_subject_attendance(student)
+
+    regular_subjects = [{'name': subj, 'attendance_count': subject_attendance['regular'].get(subj, {'attendance': 0})['attendance'], 'total_count': subject_attendance['regular'].get(subj, {'total': 0})['total']} for subj in json.loads(student.selected_regular_subjects or '[]')]
+    specialization_subjects = [{'name': subj, 'attendance_count': subject_attendance['specialization'].get(subj, {'attendance': 0})['attendance'], 'total_count': subject_attendance['specialization'].get(subj, {'total': 0})['total']} for subj in json.loads(student.selected_specializations or '[]')]
+    practical_subjects = [{'name': subj, 'batch': student.selected_batch or 'N/A', 'attendance_count': subject_attendance['practical'].get(subj, {'attendance': 0})['attendance'], 'total_count': subject_attendance['practical'].get(subj, {'total': 0})['total']} for subj in json.loads(student.selected_practicals or '[]')]
+
+    face_folder = os.path.join(dataset_path, student.selected_class or '')
+    face_file = f"{student.enrollment_number}_{student.full_name}.npy"
+    face_registered = os.path.exists(os.path.join(face_folder, face_file))
+
+    student_data = {
+        'enrollment_number': student.enrollment_number,
+        'email': student.email,
+        'student_number': student.student_number,
+        'parent_number': student.parent_number,
+        'parent_email': student.parent_email,
+        'regular_subjects': regular_subjects,
+        'specialization_subjects': specialization_subjects,
+        'practical_subjects': practical_subjects,
+        'face_registered': face_registered
+    }
+    return jsonify(student_data)
+
+@app.route('/student_dashboard')
+def student_dashboard():
+    if 'user_id' not in session or session['role'] != 'student':
+        return redirect(url_for('index'))
+    user = db.session.get(User, session['user_id'])
+    face_folder = os.path.join(dataset_path, (user.selected_class or ''))
+    face_file = f"{user.enrollment_number}_{user.full_name}.npy"
+    face_exists = os.path.exists(os.path.join(face_folder, face_file))
+    subject_attendance = get_subject_attendance(user)
+    teachers = User.query.filter_by(role='teacher', selected_class=user.selected_class).all()
+    return render_template('student_dashboard.html',
+                           user=user,
+                           selected_regular_subjects=json.loads(user.selected_regular_subjects or '[]'),
+                           selected_specializations=json.loads(user.selected_specializations or '[]'),
+                           selected_practicals=json.loads(user.selected_practicals or '[]'),
+                           subject_attendance=subject_attendance,
+                           face_exists=face_exists,
+                           teachers=teachers)
+
+@app.route('/api/update_profile', methods=['POST'])
+def update_profile():
+    if 'user_id' not in session or session['role'] != 'student':
+        return jsonify({'success': False, 'message': 'Unauthorized'}), 401
+    data = request.json
+    user = db.session.get(User, session['user_id'])
+    user.full_name = data['full_name']
+    user.enrollment_number = data['enrollment_number']
+    user.email = data['email']
+    user.student_number = data['student_number']
+    user.parent_number = data['parent_number']
+    user.parent_email = data['parent_email']
+    db.session.commit()
+    return jsonify({'success': True, 'message': 'Profile updated'})
+
+@app.route('/api/select_class', methods=['POST'])
+def api_select_class():
+    if 'user_id' not in session or session['role'] != 'student':
+        return jsonify({'success': False}), 401
+    data = request.json
+    cls = data.get('class')
+    user = db.session.get(User, session['user_id'])
+    user.selected_class = cls
+    db.session.commit()
+    return jsonify({'success': True})
+
+@app.route('/api/update_regular_subjects', methods=['POST'])
+def update_regular_subjects():
+    if 'user_id' not in session:
+        return jsonify(success=False), 401
+    subjects = request.json.get('subjects')
+    u = db.session.get(User, session['user_id'])
+    u.selected_regular_subjects = json.dumps(subjects)
+    db.session.commit()
+    return jsonify(success=True)
+
+@app.route('/api/update_specializations', methods=['POST'])
+def update_specializations():
+    if 'user_id' not in session:
+        return jsonify(success=False), 401
+    subjects = request.json.get('subjects')
+    u = db.session.get(User, session['user_id'])
+    u.selected_specializations = json.dumps(subjects)
+    db.session.commit()
+    return jsonify(success=True)
+
+@app.route('/api/update_batch', methods=['POST'])
+def update_batch():
+    if 'user_id' not in session:
+        return jsonify(success=False), 401
+    batch = request.json.get('batch')
+    u = db.session.get(User, session['user_id'])
+    u.selected_batch = batch
+    db.session.commit()
+    return jsonify(success=True)
+
+@app.route('/api/update_practicals', methods=['POST'])
+def update_practicals():
+    if 'user_id' not in session:
+        return jsonify(success=False), 401
+    practs = request.json.get('practicals')
+    u = db.session.get(User, session['user_id'])
+    u.selected_practicals = json.dumps(practs)
+    db.session.commit()
+    return jsonify(success=True)
+
+def get_excel_filename(class_name):
+    if class_name:
+        return f"{class_name}_timetable.xlsx"
+    return "timetable.xlsx"
+
+@app.route('/timetable')
+def timetable_page():
+    if 'user_id' not in session or session['role'] != 'teacher':
+        return redirect(url_for('index'))
+    return render_template('timetable.html')
+
+@app.route('/add_config', methods=['POST'])
+def add_config():
+    data = request.get_json()
+    class_name = data.get("class")
+    config_type = data.get("type")
+    name = data.get("name")
+    if not (class_name and config_type and name):
+        return jsonify({"error": "Missing parameters"}), 400
+    conn = get_db_connection()
+    conn.execute('INSERT INTO teacher_config (class_name, config_type, name) VALUES (?, ?, ?)',
+                 (class_name, config_type, name))
+    conn.commit()
+    conn.close()
+    return jsonify({"message": "Added successfully"})
+
+@app.route('/delete_config', methods=['POST'])
+def delete_config():
+    data = request.get_json()
+    class_name = data.get("class")
+    config_type = data.get("type")
+    name = data.get("name")
+    if not (class_name and config_type and name):
+        return jsonify({"error": "Missing parameters"}), 400
+    conn = get_db_connection()
+    conn.execute('DELETE FROM teacher_config WHERE class_name=? AND config_type=? AND name=?',
+                 (class_name, config_type, name))
+    conn.commit()
+    conn.close()
+    return jsonify({"message": "Deleted successfully"})
+
+@app.route('/get_config', methods=['GET'])
+def get_config():
+    class_name = request.args.get("class")
+    config_type = request.args.get("type")
+    if not (class_name and config_type):
+        return jsonify([])
+    conn = get_db_connection()
+    configs = conn.execute('SELECT name FROM teacher_config WHERE class_name=? AND config_type=?',
+                           (class_name, config_type)).fetchall()
+    conn.close()
+    return jsonify([row["name"] for row in configs])
+
+@app.route('/load', methods=['GET'])
+def load_timetable():
+    class_name = request.args.get('class')
+    filename = get_excel_filename(class_name)
+    if not os.path.exists(filename):
+        return jsonify({})
+    df = pd.read_excel(filename, index_col=0)
+    return df.to_json()
+
+@app.route('/save', methods=['POST'])
+def save_timetable():
+    payload = request.get_json()
+    teacher_class = payload.get("class", "")
+    data = payload.get("timetable", {})
+    filename = get_excel_filename(teacher_class)
+    df = pd.DataFrame(data)
+    df.to_excel(filename)
+    return jsonify({'message': f'Saved successfully to {filename}!'})
+
+@app.route('/download_excel', methods=['GET'])
+def download_excel():
+    class_name = request.args.get('class')
+    filename = get_excel_filename(class_name)
+    if not os.path.exists(filename):
+        return "File not found", 404
+    return send_file(filename, as_attachment=True)
+
+def distance(v1, v2):
+    return np.sqrt(((v1 - v2) ** 2).sum())
+
+def knn(train, test, k=5):
+    dist = []
+    for i in range(train.shape[0]):
+        ix = train[i, :-1]
+        iy = train[i, -1]
+        d = distance(test, ix)
+        dist.append([d, iy])
+    dk = sorted(dist, key=lambda x: x[0])[:k]
+    labels = np.array(dk)[:, -1]
+    return np.unique(labels, return_counts=True)[0][0]
+
+class AttendanceSystem:
+    def __init__(self, class_name):
+        self.class_name = class_name
+        self.main_file = os.path.join(attendance_path, f"{class_name}.xlsx")
+        self.pending_file = os.path.join(attendance_path, f"{class_name}_pending.xlsx")
+        self.columns = ["Enrollment", "Name", "Date", "Day", "CheckIn", "CheckOut"]
+        
+        for f in [self.main_file, self.pending_file]:
+            if not os.path.exists(f):
+                pd.DataFrame(columns=self.columns).to_excel(f, index=False)
+
+    def checkin(self, enrollment, name, pin):
+        today = datetime.now().strftime("%Y-%m-%d")
+        correct_pin = get_daily_pin(self.class_name)
+        if pin != correct_pin:
+            return False, "Invalid PIN."
+
+        now = datetime.now()
+        checkin_time = now.strftime("%H.%M")
+        
+        df_main = pd.read_excel(self.main_file)
+        if ((df_main["Enrollment"] == enrollment) & (df_main["Date"] == today)).any():
+            return False, "You have already checked in and checked out today."
+
+        df_pending = pd.read_excel(self.pending_file)
+        if ((df_pending["Enrollment"] == enrollment) & (df_pending["Date"] == today)).any():
+            return False, "You have already checked in today. Please check out first."
+
+        if now.time() < datetime.strptime("08:00", "%H:%M").time():
+            return False, "Check-in starts at 8 AM."
+
+        day_name = now.strftime("%A")
+        new_entry = pd.DataFrame([[enrollment, name, today, day_name, checkin_time, ""]],
+                                  columns=self.columns)
+        df_pending = pd.concat([df_pending, new_entry], ignore_index=True)
+        df_pending.to_excel(self.pending_file, index=False)
+        
+        return True, "Check-in successful. Please remember to check out later."
+
+    def checkout(self, enrollment):
+        now = datetime.now()
+        today = now.strftime("%Y-%m-%d")
+        checkout_time = now.strftime("%H.%M")
+
+        df_pending = pd.read_excel(self.pending_file)
+        df_main = pd.read_excel(self.main_file)
+
+        has_main = ((df_main["Enrollment"] == enrollment) & (df_main["Date"] == today)).any()
+        has_pending = ((df_pending["Enrollment"] == enrollment) & (df_pending["Date"] == today)).any()
+
+        if not has_pending and has_main:
+            return False, "You have already checked out today."
+
+        if not has_pending:
+            return False, "No pending check-in found. Please check in first."
+
+        if now.time() > datetime.strptime("18:00", "%H:%M").time():
+            return False, "You missed check-out time. Contact your class teacher."
+
+        idx = df_pending[(df_pending["Enrollment"] == enrollment) & (df_pending["Date"] == today)].index[0]
+        pending_entry = df_pending.loc[idx]
+
+        new_row = {
+            "Enrollment": pending_entry["Enrollment"],
+            "Name":      pending_entry["Name"],
+            "Date":      today,
+            "Day":       pending_entry["Day"],
+            "CheckIn":   pending_entry["CheckIn"],
+            "CheckOut":  checkout_time
+        }
+        df_main = pd.concat([df_main, pd.DataFrame([new_row])], ignore_index=True)
+        df_main.to_excel(self.main_file, index=False)
+
+        df_pending = df_pending.drop(idx)
+        df_pending.to_excel(self.pending_file, index=False)
+        
+        return True, "Check-out successful. Attendance recorded."
+
+import pandas as pd
+from datetime import datetime, time
+
+def parse_time(val):
+    if pd.isna(val):
+        return None
+    s = str(val).replace('.', ':')
+    if ':' not in s and len(s) >= 3 and s.isdigit():
+        s = s[:-2] + ':' + s[-2:]
+    try:
+        return datetime.strptime(s, '%H:%M').time()
+    except ValueError:
+        return datetime.strptime(s, '%I:%M').time()
+
+def parse_timetable_time(time_str):
+    time_str = time_str.replace('.', ':')
+    hour, minute = map(int, time_str.split(':'))
+    if 1 <= hour <= 5:
+        hour += 12
+    return time(hour, minute)
+
+def get_slot_type(content):
+    content = "" if pd.isna(content) else str(content)
+    if "Batch" in content:
+        return "practical"
+    elif "<br>" in content:
+        return "specialization"
+    elif content in ["Short Break", "Lunch Break"]:
+        return "break"
+    elif content.strip() == "":
+        return "break"
+    else:
+        return "regular"
+
+def parse_practical(content):
+    lines = content.split('<br>')
+    batch_subjects = {}
+    for line in lines:
+        if ':' in line:
+            batch, subject = line.split(':')
+            batch = batch.strip().replace('Batch ', '')
+            subject = subject.strip()
+            batch_subjects[batch] = subject
+    return batch_subjects
+
+def parse_specialization(content):
+    return [subj.strip() for subj in content.split('<br>')]
+
+def get_slots(df, day):
+    row = df.loc[day]
+    slots = []
+    for col in df.columns:
+        start_str, end_str = col.split(" - ")
+        start_time = parse_timetable_time(start_str)
+        end_time   = parse_timetable_time(end_str)
+        content = row[col]
+        if pd.isna(content) or str(content).strip() == "":
+            continue
+        slots.append({
+            "start":   start_time,
+            "end":     end_time,
+            "content": str(content)
+        })
+    return slots
+
+def get_subject_attendance(user):
+    class_name = user.selected_class
+    attendance_file = os.path.join(attendance_path, f"{class_name}.xlsx")
+    if not os.path.exists(attendance_file):
+        return {'regular': {}, 'specialization': {}, 'practical': {}}
+    df_att = pd.read_excel(attendance_file)
+    all_dates = df_att['Date'].unique()
+    timetable_file = f"{class_name}_timetable.xlsx"
+    if not os.path.exists(timetable_file):
+        return {'regular': {}, 'specialization': {}, 'practical': {}}
+    df_timetable = pd.read_excel(timetable_file, index_col=0)
+    regular_counts = {subj: {'attendance': 0, 'total': 0} for subj in json.loads(user.selected_regular_subjects or '[]')}
+    spec_counts = {subj: {'attendance': 0, 'total': 0} for subj in json.loads(user.selected_specializations or '[]')}
+    prac_counts = {subj: {'attendance': 0, 'total': 0} for subj in json.loads(user.selected_practicals or '[]')}
+    for date in all_dates:
+        day = datetime.strptime(date, '%Y-%m-%d').strftime('%A')
+        if day not in df_timetable.index:
+            continue
+        slots = get_slots(df_timetable, day)
+        student_att = df_att[(df_att['Enrollment'] == user.enrollment_number) & (df_att['Date'] == date)]
+        if not student_att.empty:
+            check_in_str = student_att['CheckIn'].values[0]
+            check_out_str = student_att['CheckOut'].values[0]
+            check_in_time = parse_time(check_in_str)
+            check_out_time = parse_time(check_out_str)
+        else:
+            check_in_time = None
+            check_out_time = None
+        for slot in slots:
+            slot_start = slot['start']
+            slot_end = slot['end']
+            content = slot['content']
+            slot_type = get_slot_type(content)
+            if slot_type == 'regular':
+                subject = content
+                if subject in regular_counts:
+                    regular_counts[subject]['total'] += 1
+                    if check_in_time and check_in_time <= slot_start and check_out_time >= slot_end:
+                        regular_counts[subject]['attendance'] += 1
+            elif slot_type == 'specialization':
+                subjects = parse_specialization(content)
+                selected_specs = json.loads(user.selected_specializations or '[]')
+                for selected_spec in selected_specs:
+                    if selected_spec in subjects:
+                        spec_counts[selected_spec]['total'] += 1
+                        if check_in_time and check_in_time <= slot_start and check_out_time >= slot_end:
+                            spec_counts[selected_spec]['attendance'] += 1
+            elif slot_type == 'practical':
+                batch_subjects = parse_practical(content)
+                if user.selected_batch in batch_subjects:
+                    subject = batch_subjects[user.selected_batch]
+                    if subject in prac_counts:
+                        prac_counts[subject]['total'] += 1
+                        if check_in_time and check_in_time <= slot_start and check_out_time >= slot_end:
+                            prac_counts[subject]['attendance'] += 1
+    return {
+        'regular': regular_counts,
+        'specialization': spec_counts,
+        'practical': prac_counts
+    }
+
+@app.route('/check_attendance', methods=['GET'])
+def check_attendance():
+    students = User.query.filter_by(role='student').all()
+    for student in students:
+        subject_attendance = get_subject_attendance(student)
+        total_attendance = 0
+        total_possible = 0
+        for subj_type in ['regular', 'specialization', 'practical']:
+            for subj, counts in subject_attendance[subj_type].items():
+                total_attendance += counts['attendance']
+                total_possible += counts['total']
+        if total_possible > 0:
+            overall_percentage = (total_attendance / total_possible) * 100
+            if overall_percentage < 75:
+                details = {
+                    'regular': [],
+                    'specialization': [],
+                    'practical': []
+                }
+                for subj_type in ['regular', 'specialization', 'practical']:
+                    for subj, counts in subject_attendance[subj_type].items():
+                        percentage = (counts['attendance'] / counts['total'] * 100) if counts['total'] > 0 else 0
+                        details[subj_type].append({
+                            'subject': subj,
+                            'attendance_count': counts['attendance'],
+                            'total_count': counts['total'],
+                            'percentage': round(percentage, 2)
+                        })
+                send_attendance_email(student, overall_percentage, details)
+    return 'Attendance check completed'
+
+def send_attendance_email(student, overall_percentage, details):
+    subject = "Low Attendance Alert"
+    recipients = [student.email]
+    if student.parent_email:
+        recipients.append(student.parent_email)
+    body = f"""
+Dear {student.full_name},
+
+Your overall attendance average is {overall_percentage:.2f}%, which is below the required 75%.
+
+Here are your attendance details:
+
+Regular Subjects:
+"""
+    for subj in details['regular']:
+        body += f"- {subj['subject']}: {subj['attendance_count']}/{subj['total_count']} ({subj['percentage']}%\n"
+    body += "\nSpecialization Subjects:\n"
+    for subj in details['specialization']:
+        body += f"- {subj['subject']}: {subj['attendance_count']}/{subj['total_count']} ({subj['percentage']}%\n"
+    body += "\nPractical Subjects:\n"
+    for subj in details['practical']:
+        body += f"- {subj['subject']}: {subj['attendance_count']}/{subj['total_count']} ({subj['percentage']}%\n"
+    body += "\nPlease take necessary actions to improve your attendance.\n\nBest regards,\nAttendance System"
+
+    msg = Message(subject, recipients=recipients, body=body)
+    mail.send(msg)
+
+@app.route('/mark_attendance')
+def mark_attendance_page():
+    return render_template('mark.html')
+
+@app.route('/register_face')
+def register_face_page():
+    if 'user_id' not in session or session['role'] != 'student':
+        return redirect(url_for('index'))
+    return render_template('register.html')
+
+@app.route('/api/register_face', methods=['POST'])
+def register_face():
+    data = request.json
+    class_name = data['class_name']
+    name = data['name']
+    enrollment = data['enrollment']
+    images = data['images']
+
+    class_folder = os.path.join(dataset_path, class_name)
+    os.makedirs(class_folder, exist_ok=True)
+
+    face_data = []
+    for img_data in images:
+        img_bytes = base64.b64decode(img_data.split(",")[1])
+        np_arr = np.frombuffer(img_bytes, np.uint8)
+        img = cv2.imdecode(np_arr, cv2.IMREAD_COLOR)
+        gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+        gray = cv2.equalizeHist(gray)
+        faces = face_cascade.detectMultiScale(gray, 1.3, 5)
+        for (x, y, w, h) in faces[:1]:
+            face = img[y:y+h, x:x+w]
+            face = cv2.resize(face, (100, 100))
+            face_data.append(face.flatten())
+            flipped = cv2.flip(face, 1)
+            face_data.append(flipped.flatten())
+
+    if face_data:
+        face_data = np.array(face_data)
+        filename = f"{enrollment}_{name}.npy"
+        np.save(os.path.join(class_folder, filename), face_data)
+        return jsonify({"status": "success", "message": f"{len(face_data)} faces saved"})
+    return jsonify({"status": "fail", "message": "No faces detected"})
+
+@app.route('/api/identify_face', methods=['POST'])
+def identify_face():
+    data = request.json
+    class_name = data['class_name']
+    img_data = data['image']
+    img_bytes = base64.b64decode(img_data.split(",")[1])
+    np_arr = np.frombuffer(img_bytes, np.uint8)
+    img = cv2.imdecode(np_arr, cv2.IMREAD_COLOR)
+
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    faces = face_cascade.detectMultiScale(gray, 1.3, 5)
+
+    class_folder = os.path.join(dataset_path, class_name)
+    if not os.path.exists(class_folder):
+        return jsonify({"status": "fail", "message": "No data for this class"})
+
+    face_data = []
+    labels = []
+    names = {}
+    class_id = 0
+    for file in os.listdir(class_folder):
+        if file.endswith('.npy'):
+            data_arr = np.load(os.path.join(class_folder, file))
+            face_data.append(data_arr)
+            parts = file[:-4].split('_', 1)
+            labels.extend([class_id] * data_arr.shape[0])
+            names[class_id] = {'enrollment': parts[0], 'name': parts[1]}
+            class_id += 1
+
+    if not face_data:
+        return jsonify({"status": "fail", "message": "No trained data found"})
+
+    X_train = np.concatenate(face_data, axis=0)
+    y_train = np.array(labels).reshape(-1, 1)
+    trainset = np.hstack((X_train, y_train))
+
+    for (x, y, w, h) in faces[:1]:
+        face = img[y:y+h, x:x+w]
+        face = cv2.resize(face, (100, 100)).flatten()
+        pred_id = knn(trainset, face)
+        info = names.get(pred_id)
+        if info:
+            return jsonify({
+                "status": "success",
+                "name": info['name'],
+                "enrollment": info['enrollment']
+            })
+    return jsonify({"status": "fail", "message": "Face not recognized"})
+
+@app.route('/api/checkin', methods=['POST'])
+def api_checkin():
+    data = request.json
+    class_name = data['class_name']
+    enrollment = data['enrollment']
+    name = data['name']
+    pin = data.get('pin')  # Get PIN from request
+    attendance = AttendanceSystem(class_name)
+    ok, msg = attendance.checkin(enrollment, name, pin)
+    status = "success" if ok else "fail"
+    return jsonify({"status": status, "message": msg})
+
+@app.route('/api/checkout', methods=['POST'])
+def api_checkout():
+    data = request.json
+    class_name = data['class_name']
+    enrollment = data['enrollment']
+    attendance = AttendanceSystem(class_name)
+    ok, msg = attendance.checkout(enrollment)
+    status = "success" if ok else "fail"
+    return jsonify({"status": status, "message": msg})
+
+# New endpoint to get the overall attendance average
+@app.route('/api/get_attendance_average', methods=['POST'])
+def get_attendance_average():
+    data = request.json
+    class_name = data['class_name']
+    enrollment = data['enrollment']
+    user = User.query.filter_by(enrollment_number=enrollment, selected_class=class_name, role='student').first()
+    if not user:
+        return jsonify({'error': 'Student not found'}), 404
+    subject_attendance = get_subject_attendance(user)
+    total_attendance = 0
+    total_possible = 0
+    for subj_type in ['regular', 'specialization', 'practical']:
+        for subj, counts in subject_attendance[subj_type].items():
+            total_attendance += counts['attendance']
+            total_possible += counts['total']
+    if total_possible > 0:
+        overall_percentage = (total_attendance / total_possible) * 100
+    else:
+        overall_percentage = 0
+    return jsonify({'overall_percentage': round(overall_percentage, 2)})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)

face_dataset/SY-21/ADT24SOCBD145_yash.npy

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3d32dd3cbe87bddf2b83fa452863fc84123b058dde74af69df1020ee23943ceb
+size 7140128

face_dataset/SY-22/ADT24SOCBD053_Harshvardhan Dhane.npy

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:643abd939a003fc3dd00cbe61fdf71a04b942524674e7931f066c154be041cb0
+size 7140128

static/js/webcam.js

@@ -0,0 +1,24 @@
+function initWebcam(videoId) {
+    const video = document.getElementById(videoId);
+    navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
+        video.srcObject = stream;
+    });
+}
+
+function captureFrame(frameArray, single = false) {
+    return new Promise((resolve) => {
+        const video = document.getElementById('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 = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const isEmpty = !imageData.data.some(channel => channel !== 0);
+        if (!isEmpty) {
+            const image = canvas.toDataURL('image/jpeg');
+            if (!single) frameArray.push(image);
+            resolve(image);
+        } else resolve(null);
+    });
+}

static/script.js

@@ -0,0 +1,447 @@
+// Global teacher config arrays (populated via AJAX).
+let teacherClass = "";
+let subjectList = [];
+let specSubjectList = [];
+let batchList = [];
+let practicalSubjectList = [];
+
+// Timetable parameters.
+const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+const timeSlots = [
+  '8.45 - 9.40', // index 0
+  '9.40 - 10.35', // index 1
+  '10.35 - 10.50', // index 2 -> Short Break (fixed)
+  '10.50 - 11.45', // index 3
+  '11.45 - 12.40', // index 4
+  '12.40 - 1.40', // index 5 -> Lunch Break (fixed)
+  '1.40 - 2.35', // index 6
+  '2.35 - 3.30', // index 7
+  '3.30 - 3.40', // index 8 -> Short Break (fixed)
+  '3.40 - 4.30'  // index 9
+];
+// Mapping break indices to fixed texts.
+const breakSlots = {
+  2: "Short Break",
+  5: "Lunch Break",
+  8: "Short Break"
+};
+
+// Two-hour practical time slot definitions.
+const practicalTimeSlots = [
+  { label: '8.45 - 10.35', indices: [0, 1] },
+  { label: '10.50 - 12.40', indices: [3, 4] },
+  { label: '1.40 - 3.30', indices: [6, 7] }
+];
+
+let timetableData = {}; // Keys: "row-col-day"
+let mergedCells = {};   // Keys: "row-col" mapped to an array of merged cell keys
+
+// ------ Teacher Config Functions (AJAX calls) ------
+function loadTeacherConfig() {
+  if (!teacherClass) return;
+  getConfig("subject");
+  getConfig("specSubject");
+  getConfig("batch");
+  getConfig("practical");
+}
+
+function getConfig(type) {
+  fetch(`/get_config?class=${teacherClass}&type=${type}`)
+    .then(res => res.json())
+    .then(data => {
+      if (type === "subject") {
+        subjectList = data;
+        updateDisplay("subjectList", subjectList, "subject");
+      } else if (type === "specSubject") {
+        specSubjectList = data;
+        updateDisplay("specSubjectList", specSubjectList, "specSubject");
+      } else if (type === "batch") {
+        batchList = data;
+        updateDisplay("batchList", batchList);
+      } else if (type === "practical") {
+        practicalSubjectList = data;
+        updateDisplay("practicalSubjectList", practicalSubjectList);
+      }
+    });
+}
+
+function addConfig(type) {
+  if (!teacherClass) {
+    alert("Please select a class first.");
+    return;
+  }
+  let inputId = "";
+  if (type === "subject") inputId = "subjectInput";
+  else if (type === "specSubject") inputId = "specSubjectInput";
+  else if (type === "batch") inputId = "batchInput";
+  else if (type === "practical") inputId = "practicalSubjectInput";
+  const value = document.getElementById(inputId).value.trim();
+  if (!value) return;
+  
+  fetch('/add_config', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({class: teacherClass, type: type, name: value})
+  })
+  .then(res => res.json())
+  .then(data => {
+    loadTeacherConfig();
+    document.getElementById(inputId).value = "";
+  });
+}
+
+function updateDisplay(elementId, arr, type="") {
+  const span = document.getElementById(elementId);
+  span.innerHTML = "";
+  arr.forEach(item => {
+    const spanItem = document.createElement("span");
+    spanItem.textContent = item;
+    const del = document.createElement("span");
+    del.textContent = " ✕";
+    del.className = "delete-btn";
+    del.onclick = () => deleteConfig(type, item);
+    spanItem.appendChild(del);
+    span.appendChild(spanItem);
+    span.appendChild(document.createTextNode(" | "));
+  });
+}
+
+function deleteConfig(type, name) {
+  if (!teacherClass) return;
+  fetch('/delete_config', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({class: teacherClass, type: type, name: name})
+  })
+  .then(res => res.json())
+  .then(data => loadTeacherConfig());
+}
+
+// When a class is selected, load both configuration and timetable.
+function loadForSelectedClass() {
+  teacherClass = document.getElementById("classSelect").value;
+  if (!teacherClass) return;
+  loadTeacherConfig();
+  loadTimetable();
+}
+
+// ------ Modal & Dropdown Functions ------
+function openModal() {
+  if (!teacherClass) {
+    alert("Please select a class first.");
+    return;
+  }
+  populateDropdown("subjectSelect", subjectList);
+  populateDropdown("specSubjectSelect", specSubjectList);
+  populateDropdown("practicalSelect", practicalSubjectList);
+  populateDropdown("batchSelect", batchList);
+  document.getElementById("timeSlotSelect").innerHTML = "";
+  document.getElementById("optionType").value = "";
+  hideAllModalOptions();
+  document.getElementById("popupModal").style.display = "flex";
+}
+
+function closeModal() {
+  document.getElementById("popupModal").style.display = "none";
+}
+
+function hideAllModalOptions() {
+  document.getElementById("subjectDropdown").style.display = "none";
+  document.getElementById("specSubjectDropdown").style.display = "none";
+  document.getElementById("practicalDropdown").style.display = "none";
+  document.getElementById("timeSlotDiv").style.display = "none";
+  document.getElementById("submitBtn").style.display = "none";
+}
+
+function populateDropdown(dropdownId, items) {
+  const dropdown = document.getElementById(dropdownId);
+  dropdown.innerHTML = '<option value="">--Select--</option>';
+  items.forEach(item => {
+    const opt = document.createElement("option");
+    opt.value = item;
+    opt.textContent = item;
+    dropdown.appendChild(opt);
+  });
+}
+
+function optionTypeChanged() {
+  hideAllModalOptions();
+  const optionType = document.getElementById("optionType").value;
+  if (optionType === "subject") {
+    document.getElementById("subjectDropdown").style.display = "block";
+    populateTimeSlotsDropdown("one-hour");
+  } else if (optionType === "specSubject") {
+    document.getElementById("specSubjectDropdown").style.display = "block";
+    populateTimeSlotsDropdown("one-hour");
+  } else if (optionType === "practical") {
+    document.getElementById("practicalDropdown").style.display = "block";
+    populateTimeSlotsDropdown("two-hour");
+  }
+}
+
+function populateTimeSlotsDropdown(type) {
+  const timeSlotSelect = document.getElementById("timeSlotSelect");
+  timeSlotSelect.innerHTML = '<option value="">--Select Time Slot--</option>';
+  if (type === "one-hour") {
+    timeSlots.forEach((slot, idx) => {
+      if (breakSlots.hasOwnProperty(idx)) return;
+      const opt = document.createElement("option");
+      opt.value = idx;
+      opt.textContent = slot;
+      timeSlotSelect.appendChild(opt);
+    });
+  } else if (type === "two-hour") {
+    practicalTimeSlots.forEach((slot, idx) => {
+      const opt = document.createElement("option");
+      opt.value = idx;
+      opt.textContent = slot.label;
+      timeSlotSelect.appendChild(opt);
+    });
+  }
+  document.getElementById("timeSlotDiv").style.display = "block";
+  document.getElementById("submitBtn").style.display = "block";
+}
+
+// ------ Timetable Functions ------
+function inferMergedCells() {
+  mergedCells = {};
+  const mergeStarts = [0, 3, 6]; // indices where merges can start
+  days.forEach((day, colIdx) => {
+    mergeStarts.forEach(startIdx => {
+      const mainKey = startIdx + "-" + colIdx + "-" + day;
+      const nextKey = (startIdx + 1) + "-" + colIdx + "-" + day;
+      if (timetableData[mainKey] && !timetableData[nextKey]) {
+        const cellKey = startIdx + "-" + colIdx;
+        const nextCellKey = (startIdx + 1) + "-" + colIdx;
+        mergedCells[cellKey] = [cellKey, nextCellKey];
+      }
+    });
+  });
+}
+
+function generateTable() {
+  const table = document.getElementById("timetable");
+  table.innerHTML = "";
+
+  const header = table.insertRow();
+  header.insertCell().textContent = "Time";
+  days.forEach(day => header.insertCell().textContent = day);
+
+  timeSlots.forEach((slot, rowIdx) => {
+    const row = table.insertRow();
+    row.insertCell().textContent = slot;
+
+    days.forEach((day, colIdx) => {
+      const cellKey = rowIdx + "-" + colIdx;
+      if (breakSlots.hasOwnProperty(rowIdx)) {
+        const cell = row.insertCell();
+        cell.innerHTML = breakSlots[rowIdx];
+        cell.style.fontWeight = "bold";
+        cell.style.backgroundColor = "#f0f0f0";
+      } else if (isMergedCell(cellKey)) {
+        return;
+      } else {
+        const cell = row.insertCell();
+        const contentKey = cellKey + "-" + day;
+        let content = timetableData[contentKey] || "";
+
+        if (mergedCells[cellKey]) {
+          cell.rowSpan = mergedCells[cellKey].length;
+        }
+
+        if (content.includes("<br>")) {
+          const items = content.split("<br>");
+          cell.innerHTML = "";
+          items.forEach((batch, i) => {
+            const div = document.createElement("div");
+            div.innerHTML = batch;
+            const del = document.createElement("span");
+            del.textContent = " [✕]";
+            del.className = "delete-btn";
+            del.onclick = () => {
+              const filtered = items.filter(it => it !== batch);
+              timetableData[contentKey] = filtered.join("<br>");
+              if (!timetableData[contentKey]) delete timetableData[contentKey];
+              autoSaveTimetable();
+              generateTable();
+            };
+            div.appendChild(del);
+            cell.appendChild(div);
+          });
+          const clearAll = document.createElement("button");
+          clearAll.textContent = "Clear all";
+          clearAll.onclick = () => {
+            delete timetableData[contentKey];
+            autoSaveTimetable();
+            generateTable();
+          };
+          cell.appendChild(clearAll);
+        } else {
+          cell.innerHTML = content;
+          if (content) {
+            const del = document.createElement("span");
+            del.textContent = " [✕]";
+            del.className = "delete-btn";
+            del.onclick = () => {
+              delete timetableData[contentKey];
+              autoSaveTimetable();
+              generateTable();
+            };
+            cell.appendChild(del);
+          }
+        }
+      }
+    });
+  });
+}
+
+function isMergedCell(cellKey) {
+  for (const mainKey in mergedCells) {
+    if (mergedCells[mainKey].includes(cellKey) && mainKey !== cellKey)
+      return true;
+  }
+  return false;
+}
+
+function submitTimetableEntry() {
+  const day = document.getElementById("daySelect").value;
+  if (!day) { alert("Please select a day."); return; }
+  const optionType = document.getElementById("optionType").value;
+  if (!optionType) { alert("Please select an option type."); return; }
+  let entry = "";
+  if (optionType === "subject") {
+    const subj = document.getElementById("subjectSelect").value;
+    if (!subj) { alert("Please select a subject."); return; }
+    entry = subj;
+    const timeIdx = document.getElementById("timeSlotSelect").value;
+    if (timeIdx === "") { alert("Please select a time slot."); return; }
+    updateTimetableCell(day, parseInt(timeIdx), entry, optionType);
+  } else if (optionType === "specSubject") {
+    const spec = document.getElementById("specSubjectSelect").value;
+    if (!spec) { alert("Please select a specialization subject."); return; }
+    entry = spec;
+    const timeIdx = document.getElementById("timeSlotSelect").value;
+    if (timeIdx === "") { alert("Please select a time slot."); return; }
+    updateTimetableCell(day, parseInt(timeIdx), entry, optionType);
+  } else if (optionType === "practical") {
+    const prac = document.getElementById("practicalSelect").value;
+    if (!prac) { alert("Please select a practical subject."); return; }
+    const batch = document.getElementById("batchSelect").value;
+    if (!batch) { alert("Please select a batch."); return; }
+    entry = "Batch " + batch + ": " + prac;
+    const slotIdx = document.getElementById("timeSlotSelect").value;
+    if (slotIdx === "") { alert("Please select a time slot."); return; }
+    const indices = practicalTimeSlots[parseInt(slotIdx)].indices;
+    updateTimetableCellPractical(day, indices, entry);
+  }
+  autoSaveTimetable();
+  closeModal();
+  generateTable();
+}
+
+// For one-hour updates (for specialization subjects, append if same cell).
+function updateTimetableCell(day, timeIndex, content, optionType) {
+  const dayIdx = days.indexOf(day);
+  const cellKey = timeIndex + "-" + dayIdx;
+  const key = cellKey + "-" + day;
+  if (timetableData[key] && optionType === "specSubject") {
+    if (!timetableData[key].includes(content))
+      timetableData[key] += "<br>" + content;
+  } else {
+    timetableData[key] = content;
+  }
+}
+
+// For practical subject: update two adjacent cells (merged).
+function updateTimetableCellPractical(day, indices, content) {
+  const dayIdx = days.indexOf(day);
+  const mainCellKey = indices[0] + "-" + dayIdx;
+  const key = mainCellKey + "-" + day;
+  let current = timetableData[key] || "";
+
+  const [newBatchLabel, newSubject] = content.split(":").map(x => x.trim());
+
+  if (current) {
+    const entries = current.split("<br>");
+    const existingBatches = entries.map(entry => entry.split(":")[0].trim());
+
+    if (existingBatches.includes(newBatchLabel)) {
+      alert(`Cannot add: Batch ${newBatchLabel} already exists in this block.`);
+      return;
+    }
+
+    timetableData[key] += "<br>" + content;
+  } else {
+    timetableData[key] = content;
+  }
+
+  const mergedGroup = indices.map(idx => idx + "-" + dayIdx);
+  mergedCells[mergedGroup[0]] = mergedGroup;
+}
+
+
+
+// ------ Save/Load Timetable Functions ------
+function autoSaveTimetable() {
+  saveTimetable();
+}
+
+function saveTimetable() {
+  const data = {};
+  timeSlots.forEach((slot, rowIdx) => {
+    data[slot] = {};
+    days.forEach((day, colIdx) => {
+      const cellKey = rowIdx + "-" + colIdx;
+      const key = cellKey + "-" + day;
+      if (breakSlots.hasOwnProperty(rowIdx)) {
+        data[slot][day] = breakSlots[rowIdx];
+      } else {
+        data[slot][day] = timetableData[key] || "";
+      }
+    });
+  });
+  const payload = {
+    class: teacherClass,
+    timetable: data
+  };
+  fetch('/save', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify(payload)
+  })
+  .then(res => res.json())
+  .then(res => alert(res.message));
+}
+
+function loadTimetable() {
+  if (!teacherClass) return;
+  fetch('/load?class=' + teacherClass)
+    .then(res => res.json())
+    .then(data => {
+      timetableData = {};
+      for (const slot in data) {
+        for (const day in data[slot]) {
+          const rowIdx = timeSlots.indexOf(slot);
+          const colIdx = days.indexOf(day);
+          if (rowIdx >= 0 && colIdx >= 0) {
+            const key = rowIdx + "-" + colIdx + "-" + day;
+            timetableData[key] = data[slot][day];
+          }
+        }
+      }
+      inferMergedCells();
+      generateTable();
+    });
+}
+
+function downloadExcel() {
+  if (!teacherClass) {
+    alert("Please select a class.");
+    return;
+  }
+  window.location.href = `/download_excel?class=${teacherClass}`;
+}
+
+window.onload = function() {
+  generateTable();
+}

templates/index.html

@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>MIT Art, Design and Technology University</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
+  <style>
+    :root {
+      --primary: #1a4a7c;
+      --secondary: #3498db;
+      --success: #2ecc71;
+      --danger: #e74c3c;
+      --warning: #f39c12;
+      --info: #2980b9;
+      --light: #ecf0f1;
+      --dark: #2c3e50;
+      --white: #ffffff;
+      --gray: #bdc3c7;
+      --border-radius: 8px;
+      --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: var(--font-main);
+    }
+    body {
+      background: linear-gradient(135deg, #f0f4f8 0%, #d7e1ec 100%);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 40px 20px;
+    }
+    header {
+      width: 100%;
+      background: var(--white);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      padding: 20px 0;
+      margin-bottom: 40px;
+      border-bottom: 3px solid var(--primary);
+    }
+    header .container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    header img {
+      height: 70px;
+      margin-right: 20px;
+      border-radius: 5px;
+    }
+    header h1 {
+      font-size: 1.8rem;
+      font-weight: 600;
+      color: var(--primary);
+      margin: 0;
+      text-align: center;
+    }
+    .login-box {
+      background-color: var(--white);
+      border-radius: var(--border-radius);
+      padding: 40px;
+      width: 100%;
+      max-width: 500px;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+      margin-bottom: 40px;
+      border-top: 4px solid var(--primary);
+    }
+    .login-box h2 {
+      color: var(--primary);
+      margin-bottom: 30px;
+      font-weight: 600;
+      text-align: center;
+      padding-bottom: 12px;
+      position: relative;
+    }
+    .login-box h2:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 80px;
+      height: 3px;
+      background: linear-gradient(90deg, var(--primary), var(--secondary));
+    }
+    .section-buttons {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 30px;
+      border-radius: var(--border-radius);
+      overflow: hidden;
+      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+    }
+    .section-buttons button {
+      flex: 1;
+      padding: 15px 0;
+      background-color: var(--light);
+      border: none;
+      cursor: pointer;
+      font-weight: 500;
+      color: var(--dark);
+      transition: all 0.3s;
+      border-right: 1px solid var(--gray);
+    }
+    .section-buttons button:last-child {
+      border-right: none;
+    }
+    .section-buttons button:hover {
+      background-color: #e6f0ff;
+    }
+    .section-buttons button.active {
+      background-color: var(--primary);
+      color: var(--white);
+      box-shadow: 0 4px 8px rgba(26, 74, 124, 0.3);
+    }
+    .form-section {
+      display: none;
+      margin-top: 20px;
+    }
+    .form-section h3 {
+      color: var(--primary);
+      margin-bottom: 20px;
+      font-weight: 500;
+      text-align: center;
+    }
+    .input-group {
+      margin-bottom: 20px;
+      position: relative;
+    }
+    .input-group label {
+      display: block;
+      margin-bottom: 8px;
+      color: var(--dark);
+      font-size: 15px;
+      font-weight: 500;
+    }
+    .input-group input {
+      width: 100%;
+      padding: 14px 15px 14px 40px;
+      border: 1px solid var(--gray);
+      border-radius: var(--border-radius);
+      font-size: 15px;
+      transition: all 0.3s;
+      background-color: var(--light);
+    }
+    .input-group input:focus {
+      border-color: var(--secondary);
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+      background-color: var(--white);
+    }
+    .input-group i {
+      position: absolute;
+      left: 15px;
+      top: 38px;
+      color: var(--gray);
+      transition: color 0.3s;
+    }
+    .input-group input:focus + i {
+      color: var(--secondary);
+    }
+    /* Fixed Password Input Styling */
+    .password-group {
+      position: relative;
+    }
+    .password-group input {
+      padding-right: 40px;
+    }
+    .password-toggle {
+      position: absolute;
+      right: 53px;
+      top: 10px; /* Align with the input field */
+      cursor: pointer;
+      color: var(--gray);
+      font-size: 18px;
+      z-index: 10;
+    }
+    .password-toggle:hover {
+      color: var(--dark);
+    }
+    .form-section button, .modal-container button {
+      width: 100%;
+      padding: 15px;
+      border: none;
+      border-radius: var(--border-radius);
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--white);
+      background: linear-gradient(to right, var(--primary), var(--secondary));
+      transition: all 0.3s;
+      margin-top: 15px;
+      box-shadow: 0 4px 10px rgba(26, 74, 124, 0.3);
+    }
+    .form-section button:hover, .modal-container button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 15px rgba(26, 74, 124, 0.4);
+      background: linear-gradient(to right, #155785, #2980b9);
+    }
+    .modal-overlay {
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background-color: rgba(0,0,0,0.6);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+      backdrop-filter: blur(3px);
+    }
+    .modal-container {
+      background: var(--white);
+      border-radius: var(--border-radius);
+      padding: 35px;
+      width: 100%;
+      max-width: 500px;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+      border-top: 4px solid var(--primary);
+      animation: modalFadeIn 0.3s;
+    }
+    @keyframes modalFadeIn {
+      from { opacity: 0; transform: translateY(-20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .close-button {
+      position: absolute;
+      top: 15px; right: 15px;
+      background: var(--light);
+      border: none;
+      font-size: 20px;
+      color: var(--dark);
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s;
+    }
+    .close-button:hover {
+      background: var(--gray);
+      color: var(--primary);
+      transform: rotate(90deg);
+    }
+    .notes-card {
+      width: 100%;
+      margin-bottom: 20px;
+      border: none;
+      border-radius: var(--border-radius);
+      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+      overflow: hidden;
+    }
+    .notes-card .card-header {
+      background-color: var(--primary);
+      color: var(--white);
+      padding: 15px 20px;
+      font-weight: 600;
+    }
+    .notes-card .card-body {
+      padding: 25px;
+    }
+    .notes-card .card-body h5 {
+      font-weight: 600;
+      margin-top: 15px;
+      color: var(--primary);
+      display: flex;
+      align-items: center;
+    }
+    .notes-card .card-body h5 i {
+      margin-right: 10px;
+      color: var(--secondary);
+    }
+    .notes-card ul {
+      margin-top: 15px;
+      padding-left: 20px;
+    }
+    .notes-card ul li {
+      margin-bottom: 10px;
+      line-height: 1.6;
+    }
+    .notes-card a {
+      color: var(--secondary);
+      text-decoration: none;
+      transition: color 0.3s;
+    }
+    .notes-card a:hover {
+      color: var(--primary);
+      text-decoration: underline;
+    }
+    @media (max-width: 768px) {
+      header h1 { font-size: 1.4rem; margin-top: 10px; }
+      .login-box { padding: 25px; }
+      .section-buttons button { font-size: 14px; padding: 12px 0; }
+      .modal-container { padding: 25px; margin: 0 15px; }
+    }
+    @media (max-width: 576px) {
+      header img { height: 50px; }
+      header h1 { font-size: 1.2rem; }
+    }
+    .toast-container {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      z-index: 1001;
+    }
+    .toast {
+      background-color: rgba(26, 74, 124, 0.9);
+      color: var(--white);
+      padding: 15px 25px;
+      border-radius: var(--border-radius);
+      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      animation: toastFadeIn 0.3s;
+      backdrop-filter: blur(5px);
+    }
+    .toast i {
+      margin-right: 10px;
+      font-size: 20px;
+    }
+    @keyframes toastFadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="container">
+      <img src="https://exam.mitapps.in/site/static/images/mit.jpg" alt="MIT-ADT Logo">
+    </div>
+    <br>
+    <h1>MIT Art, Design and Technology University, Pune</h1>
+  </header>
+  <div class="login-box">
+    <h2>Welcome to Attendance Portal</h2>
+    <div class="section-buttons">
+      <button id="teacherBtn" onclick="showForm('teacher')">
+        <i class="fas fa-chalkboard-teacher"></i> Teacher
+      </button>
+      <button id="studentBtn" onclick="showForm('student')">
+        <i class="fas fa-user-graduate"></i> Student
+      </button>
+      <button id="attendanceBtn" onclick="showForm('attendance')">
+        <i class="fas fa-clipboard-check"></i> Attendance
+      </button>
+    </div>
+    <div id="teacher" class="form-section">
+      <h3>Teacher Login</h3>
+      <div class="input-group">
+        <label for="teacherUsername">Username</label>
+        <input type="text" id="teacherUsername" placeholder="Enter your username" />
+        <i class="fas fa-user"></i>
+      </div>
+      <div class="input-group password-group">
+        <label for="teacherPassword">Password</label>
+        <input type="password" id="teacherPassword" placeholder="Enter your password" />
+        <i class="fas fa-lock"></i>
+        <span class="password-toggle" onclick="togglePassword('teacherPassword')">
+          <i class="fas fa-eye"></i>
+        </span>
+      </div>
+      <button onclick="attemptLogin('teacher')">
+        <i class="fas fa-sign-in-alt"></i> Login
+      </button>
+      <div class="link">
+        <a href="#" onclick="showSignup('Teacher'); return false;">Don't have an account? Create one</a>
+      </div>
+    </div>
+    <div id="student" class="form-section">
+      <h3>Student Login</h3>
+      <div class="input-group">
+        <label for="studentUsername">Username</label>
+        <input type="text" id="studentUsername" placeholder="Enter your username" />
+        <i class="fas fa-user"></i>
+      </div>
+      <div class="input-group password-group">
+        <label for="studentPassword">Password</label>
+        <input type="password" id="studentPassword" placeholder="Enter your password" />
+        <i class="fas fa-lock"></i>
+        <span class="password-toggle" onclick="togglePassword('studentPassword')">
+          <i class="fas fa-eye"></i>
+        </span>
+      </div>
+      <button onclick="attemptLogin('student')">
+        <i class="fas fa-sign-in-alt"></i> Login
+      </button>
+      <div class="link">
+        <a href="#" onclick="showSignup('Student'); return false;">Don't have an account? Create one</a>
+      </div>
+    </div>
+    <div id="attendance" class="form-section">
+      <h3>Mark Attendance</h3>
+      <button onclick="window.location.href='/mark_attendance'">
+        <i class="fas fa-clipboard-check"></i> Mark Attendance
+      </button>
+    </div>
+  </div>
+  <div class="modal-overlay" id="signupModal">
+    <div class="modal-container">
+      <button class="close-button" onclick="closeSignup()">×</button>
+      <h3 id="signupTitle">Create Account</h3>
+      <div class="input-group">
+        <label for="signupFullname">Full Name</label>
+        <input type="text" id="signupFullname" placeholder="Enter your full name" />
+        <i class="fas fa-user"></i>
+      </div>
+      <div class="input-group" id="phoneNumberGroup" style="display: none;">
+        <label for="signupPhoneNumber">Phone Number</label>
+        <input type="text" id="signupPhoneNumber" placeholder="Enter your phone number" />
+        <i class="fas fa-phone"></i>
+      </div>
+      <div class="input-group" id="enrollmentGroup" style="display: none;">
+        <label for="signupEnrollment">Enrollment Number</label>
+        <input type="text" id="signupEnrollment" placeholder="e.g, ADT24SOCBD053" />
+        <i class="fas fa-id-card"></i>
+      </div>
+      <div class="input-group" id="studentNumberGroup" style="display: none;">
+        <label for="signupStudentNumber">Student Number</label>
+        <input type="text" id="signupStudentNumber" placeholder="Enter Student Number" />
+        <i class="fas fa-id-badge"></i>
+      </div>
+      <div class="input-group" id="parentNumberGroup" style="display: none;">
+        <label for="signupParentNumber">Parent Number</label>
+        <input type="text" id="signupParentNumber" placeholder="Enter Parent Mobile Number" />
+        <i class="fas fa-phone"></i>
+      </div>
+      <div class="input-group" id="parentEmailGroup" style="display: none;">
+        <label for="signupParentEmail">Parent Email</label>
+        <input type="email" id="signupParentEmail" placeholder="Enter Parent Email ID" />
+        <i class="fas fa-envelope-open"></i>
+      </div>
+      <div class="input-group">
+        <label for="signupEmail">Email Address</label>
+        <input type="email" id="signupEmail" placeholder="Enter your email address" />
+        <i class="fas fa-envelope"></i>
+      </div>
+      <div class="input-group">
+        <label for="signupUsername">Username</label>
+        <input type="text" id="signupUsername" placeholder="Choose a username" />
+        <i class="fas fa-user-circle"></i>
+      </div>
+      <div class="input-group password-group">
+        <label for="signupPassword">Password</label>
+        <input type="password" id="signupPassword" placeholder="Choose a password" />
+        <i class="fas fa-lock"></i>
+        <span class="password-toggle" onclick="togglePassword('signupPassword')">
+          <i class="fas fa-eye"></i>
+        </span>
+      </div>
+      <div class="input-group password-group">
+        <label for="confirmPassword">Confirm Password</label>
+        <input type="password" id="confirmPassword" placeholder="Confirm your password" />
+        <i class="fas fa-check-circle"></i>
+        <span class="password-toggle" onclick="togglePassword('confirmPassword')">
+          <i class="fas fa-eye"></i>
+        </span>
+      </div>
+      <button onclick="createAccount()">
+        <i class="fas fa-user-plus"></i> Create Account
+      </button>
+      <div class="link">
+        <a href="#" onclick="closeSignup(); return false;">Already have an account? Login</a>
+      </div>
+    </div>
+  </div>
+  <div class="toast-container" id="toastContainer"></div>
+  <div class="container">
+    <div class="card notes-card">
+      <div class="card-header">
+        <i class="fas fa-info-circle"></i> Important Information
+      </div>
+      <div class="card-body">
+        <h5><i class="fas fa-exclamation-circle"></i> Important Note:</h5>
+        <ul>
+          <li>Upload a clear front-facing photo in your student profile to activate Face Recognition Attendance.</li>
+          <li>Be present in class on time – attendance is auto-marked using your face.</li>
+          <li>Manual attendance is not allowed – ensure your face is visible and unobstructed.</li>
+          <li>Minimum 75% attendance (via face recognition) is mandatory for exam eligibility.</li>
+        </ul>
+        <h5><i class="fas fa-link"></i> Weblinks:</h5>
+        <ul>
+          <li><i class="fas fa-external-link-alt"></i> University Website: <a href="https://www.mituniversity.ac.in/" target="_blank">www.mituniversity.ac.in</a></li>
+          <li><i class="fas fa-external-link-alt"></i> A B o C: <a href="#" target="_blank">www.abc.gov.in</a> (<a href="#" target="_blank">A I C G</a>)</li>
+          <li><i class="fas fa-external-link-alt"></i> D N: <a href="#" target="_blank">ni</a></li>
+          <li><i class="fas fa-external-link-alt"></i> A P: <a href="#" target="_blank">ain</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => showForm('teacher'));
+    function showForm(section) {
+      document.querySelectorAll('.form-section').forEach(el => el.style.display = 'none');
+      document.querySelectorAll('.section-buttons button').forEach(btn => btn.classList.remove('active'));
+      document.getElementById(section).style.display = 'block';
+      document.getElementById(section + 'Btn').classList.add('active');
+    }
+    function showSignup(role) {
+      window.currentSignupRole = role;
+      document.getElementById('signupTitle').textContent = role + " Signup";
+      const enrollmentGroup = document.getElementById('enrollmentGroup');
+      const studentNumberGroup = document.getElementById('studentNumberGroup');
+      const parentNumberGroup = document.getElementById('parentNumberGroup');
+      const parentEmailGroup = document.getElementById('parentEmailGroup');
+      const phoneNumberGroup = document.getElementById('phoneNumberGroup');
+      if (role === 'Student') {
+        enrollmentGroup.style.display = 'block';
+        studentNumberGroup.style.display = 'block';
+        parentNumberGroup.style.display = 'block';
+        parentEmailGroup.style.display = 'block';
+        phoneNumberGroup.style.display = 'none';
+      } else if (role === 'Teacher') {
+        enrollmentGroup.style.display = 'none';
+        studentNumberGroup.style.display = 'none';
+        parentNumberGroup.style.display = 'none';
+        parentEmailGroup.style.display = 'none';
+        phoneNumberGroup.style.display = 'block';
+      }
+      document.getElementById('signupModal').style.display = 'flex';
+    }
+    function closeSignup() {
+      document.getElementById('signupModal').style.display = 'none';
+    }
+    function createAccount() {
+      const fullname = document.getElementById('signupFullname').value;
+      const email = document.getElementById('signupEmail').value;
+      const username = document.getElementById('signupUsername').value;
+      const password = document.getElementById('signupPassword').value;
+      const confirmPassword = document.getElementById('confirmPassword').value;
+      const role = window.currentSignupRole.toLowerCase();
+      let data = {
+        full_name: fullname,
+        email: email,
+        username: username,
+        password: password,
+        role: role,
+      };
+      if (role === 'student') {
+        data.enrollment_number = document.getElementById('signupEnrollment').value;
+        data.student_number = document.getElementById('signupStudentNumber').value;
+        data.parent_number = document.getElementById('signupParentNumber').value;
+        data.parent_email = document.getElementById('signupParentEmail').value;
+        if (!data.enrollment_number || !data.student_number || !data.parent_number || !data.parent_email) {
+          showToast('Please fill all student details!', 'error');
+          return;
+        }
+      } else if (role === 'teacher') {
+        data.phone_number = document.getElementById('signupPhoneNumber').value;
+        if (!data.phone_number) {
+          showToast('Please enter phone number!', 'error');
+          return;
+        }
+      }
+      if (!fullname || !email || !username || !password || !confirmPassword) {
+        showToast('Please fill all fields!', 'error');
+        return;
+      }
+      if (password !== confirmPassword) {
+        showToast('Passwords do not match!', 'error');
+        return;
+      }
+      fetch('/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          showToast('Account created successfully!', 'success');
+          setTimeout(() => closeSignup(), 1500);
+        } else {
+          showToast(data.message, 'error');
+        }
+      })
+      .catch(() => showToast('An error occurred. Please try again.', 'error'));
+    }
+    function attemptLogin(type) {
+      const username = document.getElementById(type + 'Username').value;
+      const password = document.getElementById(type + 'Password').value;
+      if (!username || !password) {
+        showToast('Please enter both username and password', 'error');
+        return;
+      }
+      const data = { username, password, role: type };
+      fetch('/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          showToast('Login successful! Redirecting...', 'success');
+          setTimeout(() => window.location.href = data.redirect, 1500);
+        } else {
+          showToast(data.message, 'error');
+        }
+      })
+      .catch(() => showToast('An error occurred. Please try again.', 'error'));
+    }
+    function showToast(message, type = 'info') {
+      const toastContainer = document.getElementById('toastContainer');
+      const toast = document.createElement('div');
+      toast.className = 'toast';
+      let icon = type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-triangle' : 'info-circle';
+      toast.innerHTML = `<i class="fas fa-${icon}"></i> ${message}`;
+      toastContainer.appendChild(toast);
+      setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateY(20px)';
+        toast.style.transition = 'all 0.3s';
+        setTimeout(() => toastContainer.removeChild(toast), 300);
+      }, 10000);
+    }
+    function togglePassword(id) {
+      const input = document.getElementById(id);
+      const toggleButton = input.parentElement.querySelector('.password-toggle');
+      const icon = toggleButton.querySelector('i');
+      
+      if (input.type === 'password') {
+        input.type = 'text';
+        icon.classList.remove('fa-eye');
+        icon.classList.add('fa-eye-slash');
+      } else {
+        input.type = 'password';
+        icon.classList.remove('fa-eye-slash');
+        icon.classList.add('fa-eye');
+      }
+    }
+    window.onclick = function(e) {
+      if (e.target === document.getElementById('signupModal')) closeSignup();
+    }
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
+</body>
+</html>

templates/mark.html

@@ -0,0 +1,313 @@
+<!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);
+        }
+    }
+
+    // Load voices
+    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 attendance average
+                    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>

templates/register.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register Face</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-top: 15px;
+            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);
+        }
+        input[type="text"], 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;
+        }
+        input[type="text"]:focus, 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: 15px;
+            font-weight: 500;
+            color: #2c3e50;
+            font-size: 16px;
+        }
+        .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;
+        }
+        .form-container {
+            margin-top: 20px;
+        }
+        .progress {
+            margin-top: 10px;
+            height: 10px;
+            background-color: #eee;
+            border-radius: 5px;
+            overflow: hidden;
+            position: relative;
+            margin-bottom: 15px;
+        }
+        .progress-bar {
+            height: 100%;
+            background-color: #3498db;
+            width: 0%;
+            transition: width 0.5s ease;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <a href="/" class="back-link">
+                <i class="fas fa-arrow-left"></i> &nbsp;Back to Home
+            </a>
+            <h2>Register Face</h2>
+        </div>
+        <div class="form-container">
+            <select id="class-select" required>
+                <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>
+            <input type="text" id="name" placeholder="Enter your name" required>
+            <input type="text" id="enrollment" placeholder="Enter Enrollment Number" required>
+            <button onclick="startCapture()" class="btn">
+                <i class="fas fa-camera"></i> Start Capture
+            </button>
+            <div class="video-container">
+                <video id="video" width="300" autoplay></video>
+            </div>
+            <div class="progress">
+                <div class="progress-bar" id="progress-bar"></div>
+            </div>
+            <p id="status">Select class, enter details, and click "Start Capture"</p>
+        </div>
+    </div>
+    <script src="/static/js/webcam.js"></script>
+    <script>
+    let frames = [];
+    let interval;
+    const TOTAL_FRAMES = 120;
+    function startCapture() {
+        const className = document.getElementById('class-select').value;
+        const name = document.getElementById('name').value.trim();
+        const enrollment = document.getElementById('enrollment').value.trim();
+        if (!className) return alert('Please select a class');
+        if (!name) return alert('Please enter your name');
+        if (!enrollment) return alert('Please enter enrollment number');
+        frames = [];
+        document.getElementById('status').innerHTML = 'Capturing...<br><small>Slowly move your head</small>';
+        document.getElementById('progress-bar').style.width = '0%';
+        interval = setInterval(() => {
+            captureFrame(frames);
+            const progress = (frames.length / TOTAL_FRAMES) * 100;
+            document.getElementById('progress-bar').style.width = progress + '%';
+            if (frames.length >= TOTAL_FRAMES) {
+                clearInterval(interval);
+                document.getElementById('status').innerHTML = 'Processing...';
+                fetch('/api/register_face', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
+                        class_name: className,
+                        name: name,
+                        enrollment: enrollment,
+                        images: frames
+                    })
+                })
+                .then(res => res.json())
+                .then(data => {
+                    let msg = data.message;
+                    if (data.status === 'success') {
+                        msg += '. Please maintain consistent lighting.';
+                    }
+                    document.getElementById('status').innerHTML = msg;
+                });
+            }
+        }, 1000);
+    }
+    initWebcam('video');
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
+<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'93ecda75aef8e14d',t:'MTc0NzA4MzcwNy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
+</html>

templates/student_dashboard.html

@@ -0,0 +1,863 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Student Dashboard</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
+  <style>
+    :root {
+      --primary: #1a4a7c;
+      --secondary: #3498db;
+      --success: #2ecc71;
+      --warning: #f39c12;
+      --info: #2980b9;
+      --light: #ecf0f1;
+      --dark: #2c3e50;
+      --white: #ffffff;
+      --gray: #bdc3c7;
+      --border-radius: 8px;
+      --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    body {
+      background: linear-gradient(135deg, #f0f4f8 0%, #d7e1ec 100%);
+      min-height: 100vh;
+      font-family: var(--font-main);
+      padding: 40px 20px;
+    }
+    .container {
+      max-width: 900px;
+    }
+    .dashboard-box {
+      background-color: var(--white);
+      border-radius: var(--border-radius);
+      padding: 35px;
+      width: 100%;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+      margin: 20px auto;
+      border-top: 4px solid var(--primary);
+    }
+    h1 {
+      color: var(--primary);
+      margin-bottom: 25px;
+      text-align: center;
+      font-weight: 600;
+      font-size: 2.2rem;
+    }
+    h4 {
+      color: var(--primary);
+      margin: 25px 0 15px;
+      font-weight: 500;
+      font-size: 1.4rem;
+    }
+    p {
+      font-size: 16px;
+      color: var(--dark);
+      margin-bottom: 15px;
+    }
+    .editable {
+      cursor: pointer;
+      color: var(--info);
+      font-size: 0.9rem;
+      text-decoration: none;
+      transition: color 0.3s;
+      display: block;
+      text-align: center;
+      margin-top: 5px;
+    }
+    .editable:hover {
+      color: var(--secondary);
+      text-decoration: underline;
+    }
+    .hidden {
+      display: none;
+    }
+    .btn-primary {
+      background: linear-gradient(to right, var(--primary), var(--secondary));
+      border: none;
+      border-radius: 50px;
+      font-weight: 500;
+      padding: 12px 25px;
+      transition: all 0.3s;
+      box-shadow: 0 4px 10px rgba(26, 74, 124, 0.3);
+      margin-top: 20px;
+    }
+    .btn-primary:hover {
+      background: linear-gradient(to right, #155785, #2980b9);
+      transform: translateY(-2px);
+      box-shadow: 0 6px 12px rgba(26, 74, 124, 0.4);
+    }
+    .btn-secondary {
+      background-color: var(--light);
+      color: var(--dark);
+      border: none;
+      border-radius: 50px;
+      font-weight: 500;
+      padding: 12px 25px;
+      transition: all 0.3s;
+      margin-top: 10px;
+    }
+    .btn-secondary:hover {
+      background-color: var(--gray);
+      transform: translateY(-2px);
+    }
+    .btn-success {
+      background: linear-gradient(to right, var(--success), var(--info));
+      border: none;
+      border-radius: 50px;
+      font-weight: 500;
+      padding: 12px 25px;
+      transition: all 0.3s;
+      box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
+      margin-right: 10px;
+    }
+    .btn-success:hover {
+      background: linear-gradient(to right, #27ae60, var(--success));
+      transform: translateY(-2px);
+      box-shadow: 0 6px 12px rgba(46, 204, 113, 0.4);
+    }
+    .btn-link {
+      color: var(--gray);
+      text-decoration: none;
+      padding: 10px;
+      display: block;
+      text-align: center;
+      transition: color 0.3s;
+      font-weight: 500;
+    }
+    .btn-link:hover {
+      color: var(--primary);
+      text-decoration: none;
+    }
+    .profile-info {
+      background-color: var(--light);
+      border-radius: var(--border-radius);
+      padding: 25px;
+      margin-bottom: 25px;
+      border-left: 4px solid var(--primary);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    }
+    .profile-info p {
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      line-height: 1.6;
+    }
+    .profile-info p strong {
+      min-width: 130px;
+      display: inline-block;
+    }
+    .profile-info p strong i {
+      width: 20px;
+      color: var(--primary);
+      margin-right: 8px;
+    }
+    .form-group label {
+      font-weight: 500;
+      color: var(--dark);
+      margin-bottom: 8px;
+    }
+    .form-control {
+      border-radius: var(--border-radius);
+      border: 1px solid var(--gray);
+      padding: 12px;
+      transition: border 0.3s, box-shadow 0.3s;
+      margin-bottom: 15px;
+    }
+    .form-control:focus {
+      border-color: var(--secondary);
+      box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+    }
+    select.form-control {
+      cursor: pointer;
+      height: 46px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%231a4a7c' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      padding-right: 30px;
+      background-size: 20px;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+    }
+    .table {
+      border-radius: var(--border-radius);
+      overflow: hidden;
+      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+      margin-top: 20px;
+      margin-bottom: 25px;
+      border: none;
+    }
+    .table thead th {
+      background-color: rgba(26, 74, 124, 0.1);
+      color: var(--primary);
+      border-bottom: 2px solid var(--primary);
+      font-weight: 600;
+      padding: 15px;
+      text-transform: uppercase;
+      font-size: 0.85rem;
+      letter-spacing: 0.5px;
+    }
+    .table tbody td {
+      padding: 15px;
+      border-top: 1px solid #e9ecef;
+      vertical-align: middle;
+    }
+    .table-striped tbody tr:nth-of-type(odd) {
+      background-color: rgba(248, 249, 250, 0.7);
+    }
+    hr {
+      border-top: 1px solid #e9ecef;
+      margin: 30px 0;
+    }
+    .section-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      border-bottom: 2px solid rgba(26, 74, 124, 0.2);
+    }
+    .section-title i {
+      margin-right: 10px;
+      color: var(--primary);
+      font-size: 1.2rem;
+    }
+    .action-buttons {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 25px;
+    }
+    .action-buttons button {
+      width: 48%;
+    }
+    .alert-info {
+      background-color: rgba(26, 74, 124, 0.1);
+      border-color: rgba(26, 74, 124, 0.2);
+      color: var(--primary);
+      border-radius: var(--border-radius);
+      padding: 15px;
+      margin-bottom: 25px;
+    }
+    .alert-info i {
+      color: var(--primary);
+      margin-right: 8px;
+    }
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0,0,0,0.5);
+      z-index: 1000;
+      justify-content: center;
+      align-items: center;
+    }
+    .modal-content {
+      background-color: var(--white);
+      border-radius: var(--border-radius);
+	  margin:15% auto;
+      padding: 30px;
+      border: none;
+      width: 90%;
+      max-width: 500px;
+      box-shadow: 0 15px 30px rgba(0,0,0,0.2);
+      position: relative;
+    }
+    .close-modal {
+      position: absolute;
+      top: 15px;
+      right: 20px;
+      color: var(--gray);
+      font-size: 24px;
+      font-weight: bold;
+      cursor: pointer;
+      transition: color 0.3s;
+    }
+    .close-modal:hover {
+      color: var(--dark);
+    }
+    .modal h3 {
+      color: var(--primary);
+      margin-bottom: 20px;
+      padding-bottom: 15px;
+      border-bottom: 1px solid #e9ecef;
+    }
+    .modal button {
+      background: linear-gradient(to right, var(--primary), var(--secondary));
+      color: var(--white);
+      border: none;
+      border-radius: 50px;
+      padding: 12px 25px;
+      margin-top: 20px;
+      cursor: pointer;
+      transition: all 0.3s;
+      font-weight: 500;
+      box-shadow: 0 4px 10px rgba(26, 74, 124, 0.3);
+      display: block;
+      width: 100%;
+    }
+    .modal button:hover {
+      background: linear-gradient(to right, #155785, #2980b9);
+      transform: translateY(-2px);
+      box-shadow: 0 6px 12px rgba(26, 74, 124, 0.4);
+    }
+    .modal label {
+      display: block;
+      margin: 10px 0;
+      font-weight: 500;
+    }
+    .modal select {
+      width: 100%;
+      padding: 10px;
+      border-radius: var(--border-radius);
+      border: 1px solid var(--gray);
+      margin-bottom: 20px;
+    }
+    #regularSubjectsList,
+    #specializationSubjectsList,
+    #practicalsList {
+      max-height: 300px;
+      overflow-y: auto;
+      padding: 10px;
+      border: 1px solid #eee;
+      border-radius: var(--border-radius);
+      margin-bottom: 10px;
+    }
+    #regularSubjectsList label,
+    #specializationSubjectsList label,
+    #practicalsList label {
+      display: block;
+      padding: 8px;
+      border-bottom: 1px solid #f5f5f5;
+      margin: 0;
+    }
+    #regularSubjectsList label:hover,
+    #specializationSubjectsList label:hover,
+    #practicalsList label:hover {
+      background-color: #f8f9fa;
+    }
+    #regularSubjectsList input,
+    #specializationSubjectsList input,
+    #practicalsList input {
+      margin-right: 10px;
+    }
+    .subject-selection-button {
+      display: inline-block;
+      background-color: var(--light);
+      color: var(--primary);
+      border: 1px solid var(--primary);
+      border-radius: 50px;
+      padding: 10px 20px;
+      margin: 10px 0;
+      font-weight: 500;
+      transition: all 0.3s;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .subject-selection-button:hover {
+      background-color: rgba(26, 74, 124, 0.1);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+    }
+    .subject-selection-button i {
+      margin-right: 5px;
+    }
+    .mt-4 {
+      margin-top: 2rem;
+    }
+    .text-center {
+      text-align: center;
+    }
+    @media (max-width: 768px) {
+      .dashboard-box {
+        padding: 25px 20px;
+      }
+      .action-buttons {
+        flex-direction: column;
+      }
+      .action-buttons button {
+        width: 100%;
+        margin-bottom: 10px;
+      }
+      .profile-info p strong {
+        min-width: 105px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="dashboard-box">
+      <h1>
+        Welcome, <span id="view-fullname">{{ user.full_name }}</span>
+        <small class="editable" onclick="openEdit()"><i class="fas fa-edit"></i> Edit Profile</small>
+      </h1>
+
+      <!-- PROFILE VIEW -->
+      <div id="profile-view" class="profile-info">
+        <p><strong><i class="fas fa-id-card"></i> Enrollment No:</strong> <span id="view-enroll">{{ user.enrollment_number }}</span></p>
+        <p><strong><i class="fas fa-envelope"></i> Email:</strong> <span id="view-email">{{ user.email }}</span></p>
+        <p><strong><i class="fas fa-phone"></i> Student No:</strong> <span id="view-studno">{{ user.student_number or '-' }}</span></p>
+        <p><strong><i class="fas fa-phone-alt"></i> Parent No:</strong> <span id="view-parentno">{{ user.parent_number or '-' }}</span></p>
+        <p><strong><i class="fas fa-envelope-open"></i> Parent Email:</strong> <span id="view-parentemail">{{ user.parent_email or '-' }}</span></p>
+      </div>
+
+      <!-- PROFILE EDIT -->
+      <div id="profile-edit" class="hidden">
+        <div class="form-group">
+          <label>Full Name</label>
+          <input id="edit-fullname" class="form-control" value="{{ user.full_name }}"/>
+        </div>
+        <div class="form-group">
+          <label>Enrollment No</label>
+          <input id="edit-enroll" class="form-control" value="{{ user.enrollment_number }}"/>
+        </div>
+        <div class="form-group">
+          <label>Email</label>
+          <input id="edit-email" class="form-control" value="{{ user.email }}"/>
+        </div>
+        <div class="form-group">
+          <label>Student No</label>
+          <input id="edit-studno" class="form-control" value="{{ user.student_number }}"/>
+        </div>
+        <div class="form-group">
+          <label>Parent No</label>
+          <input id="edit-parentno" class="form-control" value="{{ user.parent_number }}"/>
+        </div>
+        <div class="form-group">
+          <label>Parent Email</label>
+          <input id="edit-parentemail" class="form-control" value="{{ user.parent_email }}"/>
+        </div>
+        <div class="action-buttons">
+          <button class="btn btn-success" onclick="saveProfile()"><i class="fas fa-save"></i> Save</button>
+          <button class="btn btn-secondary" onclick="cancelEdit()"><i class="fas fa-times"></i> Cancel</button>
+        </div>
+      </div>
+
+      <hr/>
+      
+      <div class="alert alert-info">
+        <i class="fas fa-chart-pie"></i>
+        <strong>Overall Attendance Average:</strong> <span id="overall-average">Calculating...</span>
+      </div>
+
+      <!-- CLASS SELECT -->
+      <div class="section-title">
+        <i class="fas fa-chalkboard-teacher"></i>
+        <h4>Class Information</h4>
+      </div>
+      
+      <div class="form-group">
+        <label>Select Class</label>
+        <select id="class-select" class="form-control">
+          <option value="">-- Choose Class --</option>
+          <option {{ 'selected' if user.selected_class=='SY-19' }}>SY-19</option>
+          <option {{ 'selected' if user.selected_class=='SY-20' }}>SY-20</option>
+          <option {{ 'selected' if user.selected_class=='SY-21' }}>SY-21</option>
+          <option {{ 'selected' if user.selected_class=='SY-22' }}>SY-22</option>
+        </select>
+      </div>
+
+      <!-- SUBJECT TABLES -->
+      <div id="subjects-section" class="{{ '' if user.selected_class else 'hidden' }}">
+        <div class="alert alert-info">
+          <i class="fas fa-info-circle"></i>
+          <strong>Current Class:</strong> <span id="cls-label">{{ user.selected_class }}</span>
+        </div>
+        
+        <!-- Regular Subjects -->
+        <div class="section-title">
+          <i class="fas fa-book"></i>
+          <h4>Regular Subjects</h4>
+        </div>
+        
+        <button class="subject-selection-button" onclick="openRegularSubjectsModal()">
+          <i class="fas fa-plus-circle"></i> Select Regular Subjects
+        </button>
+        
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Subject</th>
+              <th>Attendance Count</th>
+              <th>Total Count</th>
+              <th>Percentage</th>
+            </tr>
+          </thead>
+          <tbody id="tbl-subjects">
+            {% for subject in selected_regular_subjects %}
+              <tr>
+                <td>{{ subject }}</td>
+                <td>{{ subject_attendance['regular'].get(subject, {}).get('attendance', 0) }}</td>
+                <td>{{ subject_attendance['regular'].get(subject, {}).get('total', 0) }}</td>
+                <td>
+                  {% set attendance = subject_attendance['regular'].get(subject, {}).get('attendance', 0) %}
+                  {% set total = subject_attendance['regular'].get(subject, {}).get('total', 0) %}
+                  {% if total > 0 %}
+                    {{ (attendance / total * 100) | round(2) }}%
+                  {% else %}
+                    N/A
+                  {% endif %}
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+
+        <!-- Specialization -->
+        <div class="section-title">
+          <i class="fas fa-star"></i>
+          <h4>Specialization Subjects</h4>
+        </div>
+        
+        <button class="subject-selection-button" onclick="openSpecializationSubjectsModal()">
+          <i class="fas fa-plus-circle"></i> Select Specialization Subjects
+        </button>
+        
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Specialization Subject</th>
+              <th>Attendance Count</th>
+              <th>Total Count</th>
+              <th>Percentage</th>
+            </tr>
+          </thead>
+          <tbody id="tbl-spec">
+            {% for subject in selected_specializations %}
+              <tr>
+                <td>{{ subject }}</td>
+                <td>{{ subject_attendance['specialization'].get(subject, {}).get('attendance', 0) }}</td>
+                <td>{{ subject_attendance['specialization'].get(subject, {}).get('total', 0) }}</td>
+                <td>
+                  {% set attendance = subject_attendance['specialization'].get(subject, {}).get('attendance', 0) %}
+                  {% set total = subject_attendance['specialization'].get(subject, {}).get('total', 0) %}
+                  {% if total > 0 %}
+                    {{ (attendance / total * 100) | round(2) }}%
+                  {% else %}
+                    N/A
+                  {% endif %}
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+
+        <!-- Practical Subjects -->
+        <div class="section-title">
+          <i class="fas fa-flask"></i>
+          <h4>Practical Subjects</h4>
+        </div>
+        
+        <button class="subject-selection-button" onclick="openBatchPracticalsModal()">
+          <i class="fas fa-plus-circle"></i> Select Batch & Practical Subjects
+        </button>
+        
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Practical Subject</th>
+              <th>Batch</th>
+              <th>Attendance Count</th>
+              <th>Total Count</th>
+              <th>Percentage</th>
+            </tr>
+          </thead>
+          <tbody id="tbl-prac">
+            {% for subject in selected_practicals %}
+              <tr>
+                <td>{{ subject }}</td>
+                <td>{{ user.selected_batch or 'N/A' }}</td>
+                <td>{{ subject_attendance['practical'].get(subject, {}).get('attendance', 0) }}</td>
+                <td>{{ subject_attendance['practical'].get(subject, {}).get('total', 0) }}</td>
+                <td>
+                  {% set attendance = subject_attendance['practical'].get(subject, {}).get('attendance', 0) %}
+                  {% set total = subject_attendance['practical'].get(subject, {}).get('total', 0) %}
+                  {% if total > 0 %}
+                    {{ (attendance / total * 100) | round(2) }}%
+                  {% else %}
+                    N/A
+                  {% endif %}
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+
+        <!-- Teachers -->
+        <div class="section-title">
+          <i class="fas fa-chalkboard-teacher"></i>
+          <h4>Class Teacher Details</h4>
+        </div>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Phone</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for teacher in teachers %}
+              <tr>
+                <td>{{ teacher.full_name }}</td>
+                <td>
+                  {% if teacher.email %}
+                    <a href="mailto:{{ teacher.email }}">{{ teacher.email }}</a>
+                  {% else %}
+                    Not provided
+                  {% endif %}
+                </td>
+                <td>
+                  {% if teacher.phone_number %}
+                    <a href="tel:{{ teacher.phone_number }}">{{ teacher.phone_number }}</a>
+                  {% else %}
+                    Not provided
+                  {% endif %}
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+
+      <!-- FACE REGISTRATION -->
+      <div class="mt-4 text-center">
+        {% if face_exists %}
+          <a href="/register_face" class="btn btn-primary">
+            <i class="fas fa-camera"></i> Re-register Face
+          </a>
+        {% else %}
+          <a href="/register_face" class="btn btn-secondary">
+            <i class="fas fa-camera"></i> Register Face
+          </a>
+        {% endif %}
+      </div>
+
+      <a href="/logout" class="btn btn-link mt-2">
+        <i class="fas fa-sign-out-alt"></i> Logout
+      </a>
+    </div>
+  </div>
+
+  <!-- Modals -->
+  <div class="modal" id="regularSubjectsModal">
+    <div class="modal-content">
+      <span class="close-modal" onclick="closeModal('regularSubjectsModal')">✕</span>
+      <h3><i class="fas fa-book"></i> Select Regular Subjects</h3>
+      <div id="regularSubjectsList"></div>
+      <button onclick="saveRegularSubjects()"><i class="fas fa-save"></i> Save Selections</button>
+    </div>
+  </div>
+
+  <div class="modal" id="specializationSubjectsModal">
+    <div class="modal-content">
+      <span class="close-modal" onclick="closeModal('specializationSubjectsModal')">✕</span>
+      <h3><i class="fas fa-star"></i> Select Specialization Subjects</h3>
+      <div id="specializationSubjectsList"></div>
+      <button onclick="saveSpecializationSubjects()"><i class="fas fa-save"></i> Save Selections</button>
+    </div>
+  </div>
+
+  <div class="modal" id="batchPracticalsModal">
+    <div class="modal-content">
+      <span class="close-modal" onclick="closeModal('batchPracticalsModal')">✕</span>
+      <h3><i class="fas fa-flask"></i> Select Batch & Practical Subjects</h3>
+      <label for="batchSelectModal"><i class="fas fa-layer-group"></i> Select Batch:</label>
+      <select id="batchSelectModal"></select>
+      <div id="practicalsList"></div>
+      <button onclick="saveBatchAndPracticals()"><i class="fas fa-save"></i> Save Selections</button>
+    </div>
+  </div>
+
+  <script>
+    function openEdit() {
+      document.getElementById('profile-view').classList.add('hidden');
+      document.getElementById('profile-edit').classList.remove('hidden');
+    }
+    
+    function cancelEdit() {
+      document.getElementById('profile-edit').classList.add('hidden');
+      document.getElementById('profile-view').classList.remove('hidden');
+    }
+    
+    function saveProfile() {
+      fetch('/api/update_profile', {
+        method: 'POST', 
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          full_name: document.getElementById('edit-fullname').value,
+          enrollment_number: document.getElementById('edit-enroll').value,
+          email: document.getElementById('edit-email').value,
+          student_number: document.getElementById('edit-studno').value,
+          parent_number: document.getElementById('edit-parentno').value,
+          parent_email: document.getElementById('edit-parentemail').value
+        })
+      }).then(r => r.json()).then(resp => {
+        if (resp.success) location.reload();
+        else alert(resp.message);
+      });
+    }
+
+    let selectedRegularSubjects = {{ selected_regular_subjects | tojson | safe }};
+    let selectedSpecializations = {{ selected_specializations | tojson | safe }};
+    let selectedBatch = "{{ user.selected_batch or '' }}";
+    let selectedPracticals = {{ selected_practicals | tojson | safe }};
+
+    document.getElementById('class-select').addEventListener('change', e => {
+      const cls = e.target.value;
+      fetch('/api/select_class', {
+        method: 'POST', 
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ class: cls })
+      }).then(_ => {
+        if (!cls) return location.reload();
+        document.getElementById('subjects-section').classList.remove('hidden');
+        document.getElementById('cls-label').innerText = cls;
+        loadStudentSection(cls);
+      });
+    });
+
+    function loadStudentSection(cls) {
+      // Handled by template rendering initially
+    }
+
+    function openRegularSubjectsModal() {
+      const cls = document.getElementById('class-select').value;
+      if (!cls) {
+        alert('Please select a class first');
+        return;
+      }
+      fetch(`/get_config?class=${cls}&type=subject`)
+        .then(r => r.json())
+        .then(list => {
+          const listDiv = document.getElementById('regularSubjectsList');
+          listDiv.innerHTML = '';
+          list.forEach(subject => {
+            const checked = selectedRegularSubjects.includes(subject) ? 'checked' : '';
+            listDiv.innerHTML += `<label><input type="checkbox" value="${subject}" ${checked}> ${subject}</label><br>`;
+          });
+          document.getElementById('regularSubjectsModal').style.display = 'block';
+        });
+    }
+
+    function openSpecializationSubjectsModal() {
+      const cls = document.getElementById('class-select').value;
+      if (!cls) {
+        alert('Please select a class first');
+        return;
+      }
+      fetch(`/get_config?class=${cls}&type=specSubject`)
+        .then(r => r.json())
+        .then(list => {
+          const listDiv = document.getElementById('specializationSubjectsList');
+          listDiv.innerHTML = '';
+          list.forEach(subject => {
+            const checked = selectedSpecializations.includes(subject) ? 'checked' : '';
+            listDiv.innerHTML += `<label><input type="checkbox" value="${subject}" ${checked}> ${subject}</label><br>`;
+          });
+          document.getElementById('specializationSubjectsModal').style.display = 'block';
+        });
+    }
+
+    function openBatchPracticalsModal() {
+      const cls = document.getElementById('class-select').value;
+      if (!cls) {
+        alert('Please select a class first');
+        return;
+      }
+      fetch(`/get_config?class=${cls}&type=batch`)
+        .then(r => r.json())
+        .then(batches => {
+          const batchSelect = document.getElementById('batchSelectModal');
+          batchSelect.innerHTML = '<option value="">-- Select Batch --</option>';
+          batches.forEach(batch => {
+            const selected = batch === selectedBatch ? 'selected' : '';
+            batchSelect.innerHTML += `<option value="${batch}" ${selected}>${batch}</option>`;
+          });
+        });
+      fetch(`/get_config?class=${cls}&type=practical`)
+        .then(r => r.json())
+        .then(practicals => {
+          const listDiv = document.getElementById('practicalsList');
+          listDiv.innerHTML = '';
+          practicals.forEach(subject => {
+            const checked = selectedPracticals.includes(subject) ? 'checked' : '';
+            listDiv.innerHTML += `<label><input type="checkbox" value="${subject}" ${checked}> ${subject}</label><br>`;
+          });
+          document.getElementById('batchPracticalsModal').style.display = 'block';
+        });
+    }
+
+    function saveRegularSubjects() {
+      const checkboxes = document.querySelectorAll('#regularSubjectsList input[type="checkbox"]:checked');
+      const selected = Array.from(checkboxes).map(cb => cb.value);
+      fetch('/api/update_regular_subjects', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({subjects: selected})
+      }).then(() => {
+        location.reload();
+      });
+    }
+
+    function saveSpecializationSubjects() {
+      const checkboxes = document.querySelectorAll('#specializationSubjectsList input[type="checkbox"]:checked');
+      const selected = Array.from(checkboxes).map(cb => cb.value);
+      fetch('/api/update_specializations', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({subjects: selected})
+      }).then(() => {
+        location.reload();
+      });
+    }
+
+    function saveBatchAndPracticals() {
+      const batch = document.getElementById('batchSelectModal').value;
+      const checkboxes = document.querySelectorAll('#practicalsList input[type="checkbox"]:checked');
+      const selectedPracticals = Array.from(checkboxes).map(cb => cb.value);
+      fetch('/api/update_batch', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({batch: batch})
+      }).then(() => {
+        fetch('/api/update_practicals', {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({practicals: selectedPracticals})
+        }).then(() => {
+          location.reload();
+        });
+      });
+    }
+
+    function closeModal(modalId) {
+      document.getElementById(modalId).style.display = 'none';
+    }
+
+    window.addEventListener('DOMContentLoaded', () => {
+      const cs = document.getElementById('class-select');
+      if (cs.value) cs.dispatchEvent(new Event('change'));
+      
+      // Calculate overall average
+      const percentageCells = document.querySelectorAll('#tbl-subjects td:last-child, #tbl-spec td:last-child, #tbl-prac td:last-child');
+      let sum = 0;
+      let count = 0;
+      percentageCells.forEach(cell => {
+        const text = cell.textContent.trim();
+        if (text !== 'N/A') {
+          const percentage = parseFloat(text.replace('%', ''));
+          sum += percentage;
+          count++;
+        }
+      });
+      const average = count > 0 ? (sum / count).toFixed(2) : 'N/A';
+      document.getElementById('overall-average').textContent = average === 'N/A' ? 'N/A' : average + '%';
+    });
+  </script>
+</body>
+</html>

templates/teacher_dashboard.html

@@ -0,0 +1,574 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Teacher Dashboard</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <style>
+    :root {
+      --primary: #1a4a7c;
+      --secondary: #3498db;
+      --success: #2ecc71;
+      --warning: #f39c12;
+      --danger: #e74c3c;
+      --info: #2980b9;
+      --light: #ecf0f1;
+      --dark: #2c3e50;
+      --white: #ffffff;
+      --gray: #bdc3c7;
+      --border-radius: 8px;
+      --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    body {
+      background: linear-gradient(135deg, #f0f4f8 0%, #d7e1ec 100%);
+      min-height: 100vh;
+      font-family: var(--font-main);
+      padding: 40px 20px;
+      color: var(--dark);
+    }
+    .container {
+      max-width: 1140px;
+    }
+    .dashboard-box {
+      background-color: var(--white);
+      border-radius: var(--border-radius);
+      padding: 30px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+      margin-bottom: 30px;
+      border-top: 4px solid var(--primary);
+      transition: all 0.3s ease;
+    }
+    .dashboard-box:hover {
+      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
+    }
+    h1 {
+      color: var(--primary);
+      margin-bottom: 25px;
+      text-align: center;
+      font-weight: 600;
+      font-size: 2.2rem;
+    }
+    h2 {
+      color: var(--primary);
+      margin-bottom: 20px;
+      font-weight: 500;
+      font-size: 1.6rem;
+      border-bottom: 2px solid rgba(26, 74, 124, 0.2);
+      padding-bottom: 10px;
+    }
+    h3 {
+      color: var(--primary);
+      font-weight: 500;
+    }
+    p {
+      font-size: 16px;
+      color: var(--dark);
+      margin-bottom: 15px;
+    }
+    .btn {
+      border-radius: var(--border-radius);
+      font-weight: 500;
+      letter-spacing: 0.5px;
+      transition: all 0.3s ease;
+    }
+    .btn-primary {
+      background: linear-gradient(to right, var(--primary), var(--secondary));
+      border: none;
+      padding: 12px 20px;
+      margin-top: 20px;
+      box-shadow: 0 3px 6px rgba(0,0,0,0.16);
+    }
+    .btn-primary:hover {
+      background: linear-gradient(to right, #155785, #2980b9);
+      box-shadow: 0 4px 8px rgba(0,0,0,0.24);
+      transform: translateY(-2px);
+    }
+    .btn-secondary {
+      background: var(--light);
+      color: var(--dark);
+      border: 1px solid var(--gray);
+      padding: 12px 20px;
+      margin-top: 10px;
+    }
+    .btn-secondary:hover {
+      background: var(--gray);
+      color: var(--white);
+    }
+    button {
+      background-color: var(--primary);
+      color: var(--white);
+      border: none;
+      padding: 8px 16px;
+      border-radius: var(--border-radius);
+      cursor: pointer;
+      font-weight: 500;
+      transition: all 0.2s ease;
+    }
+    button:hover {
+      background-color: var(--secondary);
+    }
+    .profile-section {
+      background-color: var(--light);
+      padding: 20px;
+      border-radius: var(--border-radius);
+      margin-bottom: 25px;
+      border-left: 4px solid var(--primary);
+    }
+    .profile-section p {
+      margin-bottom: 8px;
+    }
+    .profile-section h2 {
+      margin-bottom: 16px;
+    }
+    #editForm {
+      background-color: var(--light);
+      padding: 20px;
+      border-radius: var(--border-radius);
+      margin-bottom: 20px;
+      border-left: 4px solid var(--secondary);
+    }
+    #editForm input {
+      width: 100%;
+      padding: 10px 12px;
+      margin-bottom: 15px;
+      border: 1px solid var(--gray);
+      border-radius: var(--border-radius);
+      font-size: 16px;
+      transition: border 0.3s ease;
+    }
+    #editForm input:focus {
+      border-color: var(--secondary);
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25);
+    }
+    #editForm button {
+      padding: 10px 20px;
+      margin-right: 10px;
+    }
+    select {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid var(--gray);
+      border-radius: var(--border-radius);
+      margin-bottom: 20px;
+      font-size: 16px;
+      background-color: var(--white);
+      color: var(--dark);
+    }
+    select:focus {
+      border-color: var(--secondary);
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25);
+    }
+    .table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      border-radius: var(--border-radius);
+      overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+      margin-top: 20px;
+    }
+    .table th {
+      background-color: var(--primary);
+      color: var(--white);
+      padding: 12px 16px;
+      text-align: left;
+      font-weight: 500;
+      border: none;
+    }
+    .table td {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--gray);
+      color: var(--dark);
+    }
+    .table tr:last-child td {
+      border-bottom: none;
+    }
+    .table tr:nth-child(even) {
+      background-color: #f9f9f9;
+    }
+    .table tr:hover {
+      background-color: #f1f1f1;
+    }
+    .table a {
+      color: var(--secondary);
+      text-decoration: none;
+      font-weight: 500;
+    }
+    .table a:hover {
+      text-decoration: underline;
+      color: var(--primary);
+    }
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0,0,0,0.5);
+      z-index: 1000;
+      overflow-y: auto;
+      padding: 40px 0;
+    }
+    .modal-content {
+      background-color: var(--white);
+      margin: 0% auto;
+      padding: 25px;
+      border-radius: var(--border-radius);
+      width: 90%;
+      max-width: 700px;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+      position: relative;
+    }
+    .close-modal {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      color: var(--gray);
+      font-size: 24px;
+      font-weight: bold;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      border-radius: 50%;
+    }
+    .close-modal:hover {
+      color: var(--dark);
+      background-color: #f1f1f1;
+    }
+    .modal-content h3 {
+      color: var(--primary);
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      border-bottom: 2px solid rgba(26, 74, 124, 0.2);
+      font-size: 1.5rem;
+    }
+    .modal-content h4 {
+      margin-top: 25px;
+      margin-bottom: 15px;
+      color: var(--primary);
+      font-size: 1.2rem;
+      font-weight: 500;
+    }
+    .modal-content table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 10px;
+      margin-bottom: 20px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+      border-radius: var(--border-radius);
+      overflow: hidden;
+    }
+    .modal-content th {
+      background-color: var(--light);
+      color: var(--primary);
+      padding: 12px;
+      text-align: left;
+      font-weight: 500;
+    }
+    .modal-content td {
+      padding: 10px 12px;
+      border-bottom: 1px solid #ddd;
+    }
+    .modal-content tr:last-child td {
+      border-bottom: none;
+    }
+    .modal-content tr:nth-child(even) {
+      background-color: #f9f9f9;
+    }
+    .status {
+      display: inline-block;
+      padding: 5px 10px;
+      border-radius: 20px;
+      font-size: 14px;
+      font-weight: 500;
+    }
+    .status-registered {
+      background-color: #e8f5e9;
+      color: #388e3c;
+    }
+    .status-not-registered {
+      background-color: #ffebee;
+      color: #d32f2f;
+    }
+    .mt-4 {
+      margin-top: 1.5rem;
+    }
+    .mb-4 {
+      margin-bottom: 1.5rem;
+    }
+    .text-center {
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="dashboard-box">
+      <h1><i class="fas fa-chalkboard-teacher mr-2"></i>Welcome, {{ user.full_name }}</h1>
+      <div class="profile-section">
+        <h2><i class="fas fa-user mr-2"></i>Profile</h2>
+        <p><strong>Name:</strong> {{ user.full_name }}</p>
+        <p><strong>Email:</strong> {{ user.email }}</p>
+        <p><strong>Phone:</strong> {{ user.phone_number or 'Not provided' }}</p>
+        <button onclick="openEdit()"><i class="fas fa-edit mr-1"></i> Edit Profile</button>
+      </div>
+      <div id="editForm" style="display:none;">
+        <h2><i class="fas fa-pen mr-2"></i>Edit Profile</h2>
+        <div class="form-group">
+          <label for="editFullname">Full Name</label>
+          <input type="text" id="editFullname" class="form-control" value="{{ user.full_name }}">
+        </div>
+        <div class="form-group">
+          <label for="editEmail">Email</label>
+          <input type="email" id="editEmail" class="form-control" value="{{ user.email }}">
+        </div>
+        <div class="form-group">
+          <label for="editPhone">Phone Number</label>
+          <input type="text" id="editPhone" class="form-control" value="{{ user.phone_number or '' }}">
+        </div>
+        <div>
+          <button onclick="saveProfile()"><i class="fas fa-save mr-1"></i> Save Changes</button>
+          <button onclick="cancelEdit()" style="background-color: #757575;"><i class="fas fa-times mr-1"></i> Cancel</button>
+        </div>
+      </div>
+      <div class="button-group mt-4">
+        <button class="btn btn-primary" onclick="window.location.href='/timetable'"><i class="fas fa-calendar-alt mr-2"></i> View Timetable</button>
+        <a href="/logout" class="btn btn-secondary"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a>
+		            {% if daily_pin %}
+            <div class="daily-pin" style="margin-top: 20px;">
+                <h3>Today's PIN for {{ selected_class }}</h3>
+                <p><strong>PIN:</strong> {{ daily_pin }}</p>
+            </div>
+            {% endif %}
+      </div>
+    </div>
+    <div class="dashboard-box">
+      <h2><i class="fas fa-users mr-2"></i>Class Management</h2>
+      <div class="form-group">
+        <label for="classSelect"><strong>Select Class</strong></label>
+        <select id="classSelect" class="form-control" onchange="loadStudents()">
+          <option value="">--Select Class--</option>
+          <option value="SY-19" {% if selected_class == 'SY-19' %}selected{% endif %}>SY-19</option>
+          <option value="SY-20" {% if selected_class == 'SY-20' %}selected{% endif %}>SY-20</option>
+          <option value="SY-21" {% if selected_class == 'SY-21' %}selected{% endif %}>SY-21</option>
+          <option value="SY-22" {% if selected_class == 'SY-22' %}selected{% endif %}>SY-22</option>
+        </select>
+      </div>
+      <table id="studentsTable" style="display:none;" class="table">
+        <thead>
+          <tr>
+            <th><i class="fas fa-user-graduate mr-1"></i> Student Name</th>
+            <th><i class="fas fa-id-card mr-1"></i> Enrollment No</th>
+          </tr>
+        </thead>
+        <tbody id="studentsBody">
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="modal" id="studentModal">
+    <div class="modal-content">
+      <span class="close-modal" onclick="closeStudentModal()">✕</span>
+      <h3 id="studentName"><i class="fas fa-user-graduate mr-2"></i>Student Name</h3>
+      <div id="studentDetails"></div>
+    </div>
+  </div>
+  <script>
+    function openEdit() {
+      document.getElementById('editForm').style.display = 'block';
+    }
+    function cancelEdit() {
+      document.getElementById('editForm').style.display = 'none';
+    }
+    function saveProfile() {
+      const full_name = document.getElementById('editFullname').value;
+      const email = document.getElementById('editEmail').value;
+      const phone_number = document.getElementById('editPhone').value;
+      fetch('/api/update_teacher_profile', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({full_name, email, phone_number})
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          alert('Profile updated');
+          location.reload();
+        } else {
+          alert(data.message);
+        }
+      });
+    }
+    function loadStudents() {
+      const classSelected = document.getElementById('classSelect').value;
+      if (!classSelected) {
+        document.getElementById('studentsTable').style.display = 'none';
+        return;
+      }
+      fetch(`/get_students?class=${classSelected}`)
+        .then(response => response.json())
+        .then(data => {
+          const tbody = document.getElementById('studentsBody');
+          tbody.innerHTML = '';
+          data.students.forEach(student => {
+            const tr = document.createElement('tr');
+            tr.innerHTML = `<td><a href="#" onclick="showStudentDetails('${student.id}', '${student.full_name}')">${student.full_name}</a></td><td>${student.enrollment_number}</td>`;
+            tbody.appendChild(tr);
+          });
+          document.getElementById('studentsTable').style.display = 'table';
+        });
+      fetch('/api/select_teacher_class', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({class: classSelected})
+      });
+    }
+    function showStudentDetails(studentId, fullName) {
+      fetch(`/get_student_details?id=${studentId}`)
+        .then(response => response.json())
+        .then(data => {
+          document.getElementById('studentName').innerHTML = `<i class="fas fa-user-graduate mr-2"></i>${fullName}`;
+          let all_percentages = [];
+          
+          const regular_rows = data.regular_subjects.map(sub => {
+            const percent = sub.total_count > 0 ? (sub.attendance_count / sub.total_count * 100).toFixed(2) : 'N/A';
+            if (percent !== 'N/A') all_percentages.push(parseFloat(percent));
+            const percentClass = percent !== 'N/A' ? 
+              (parseFloat(percent) >= 75 ? 'text-success' : 'text-danger') : '';
+            return `
+              <tr>
+                <td>${sub.name}</td>
+                <td>${sub.attendance_count}</td>
+                <td>${sub.total_count}</td>
+                <td class="${percentClass}">${percent === 'N/A' ? 'N/A' : percent + '%'}</td>
+              </tr>
+            `;
+          }).join('');
+          
+          const specialization_rows = data.specialization_subjects.map(sub => {
+            const percent = sub.total_count > 0 ? (sub.attendance_count / sub.total_count * 100).toFixed(2) : 'N/A';
+            if (percent !== 'N/A') all_percentages.push(parseFloat(percent));
+            const percentClass = percent !== 'N/A' ? 
+              (parseFloat(percent) >= 75 ? 'text-success' : 'text-danger') : '';
+            return `
+              <tr>
+                <td>${sub.name}</td>
+                <td>${sub.attendance_count}</td>
+                <td>${sub.total_count}</td>
+                <td class="${percentClass}">${percent === 'N/A' ? 'N/A' : percent + '%'}</td>
+              </tr>
+            `;
+          }).join('');
+          
+          const practical_rows = data.practical_subjects.map(sub => {
+            const percent = sub.total_count > 0 ? (sub.attendance_count / sub.total_count * 100).toFixed(2) : 'N/A';
+            if (percent !== 'N/A') all_percentages.push(parseFloat(percent));
+            const percentClass = percent !== 'N/A' ? 
+              (parseFloat(percent) >= 75 ? 'text-success' : 'text-danger') : '';
+            return `
+              <tr>
+                <td>${sub.name}</td>
+                <td>${sub.batch}</td>
+                <td>${sub.attendance_count}</td>
+                <td>${sub.total_count}</td>
+                <td class="${percentClass}">${percent === 'N/A' ? 'N/A' : percent + '%'}</td>
+              </tr>
+            `;
+          }).join('');
+          
+          const average = all_percentages.length > 0 ? (all_percentages.reduce((a, b) => a + b, 0) / all_percentages.length).toFixed(2) + '%' : 'N/A';
+          const averageClass = average !== 'N/A' ? 
+            (parseFloat(average) >= 75 ? 'text-success' : 'text-danger') : '';
+          
+          const detailsDiv = document.getElementById('studentDetails');
+          detailsDiv.innerHTML = `
+            <div class="row">
+              <div class="col-md-6">
+                <p><strong><i class="fas fa-id-card mr-1"></i> Enrollment No:</strong> ${data.enrollment_number}</p>
+                <p><strong><i class="fas fa-envelope mr-1"></i> Email:</strong> ${data.email}</p>
+                <p><strong><i class="fas fa-phone mr-1"></i> Student No:</strong> ${data.student_number || '-'}</p>
+              </div>
+              <div class="col-md-6">
+                <p><strong><i class="fas fa-phone-alt mr-1"></i> Parent No:</strong> ${data.parent_number || '-'}</p>
+                <p><strong><i class="fas fa-envelope mr-1"></i> Parent Email:</strong> ${data.parent_email || '-'}</p>
+                <p><strong><i class="fas fa-percentage mr-1"></i> Overall Attendance Average:</strong> <span class="${averageClass}">${average}</span></p>
+              </div>
+            </div>
+            
+            <div class="mb-2 mt-4">
+              <p><strong><i class="fas fa-camera mr-1"></i> Face Registration:</strong> 
+                <span class="status ${data.face_registered ? 'status-registered' : 'status-not-registered'}">
+                  ${data.face_registered ? 'Registered' : 'Not Registered'}
+                </span>
+              </p>
+            </div>
+            
+            <h4><i class="fas fa-book mr-2"></i>Regular Subjects</h4>
+            <table>
+              <thead>
+                <tr>
+                  <th>Subject</th>
+                  <th>Attendance Count</th>
+                  <th>Total Count</th>
+                  <th>Percentage</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${regular_rows}
+              </tbody>
+            </table>
+            
+            <h4><i class="fas fa-graduation-cap mr-2"></i>Specialization Subjects</h4>
+            <table>
+              <thead>
+                <tr>
+                  <th>Specialization Subject</th>
+                  <th>Attendance Count</th>
+                  <th>Total Count</th>
+                  <th>Percentage</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${specialization_rows}
+              </tbody>
+            </table>
+            
+            <h4><i class="fas fa-flask mr-2"></i>Practical Subjects</h4>
+            <table>
+              <thead>
+                <tr>
+                  <th>Practical Subject</th>
+                  <th>Batch</th>
+                  <th>Attendance Count</th>
+                  <th>Total Count</th>
+                  <th>Percentage</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${practical_rows}
+              </tbody>
+            </table>
+          `;
+          document.getElementById('studentModal').style.display = 'block';
+        });
+    }
+    function closeStudentModal() {
+      document.getElementById('studentModal').style.display = 'none';
+    }
+    window.onload = function() {
+      const classSelect = document.getElementById('classSelect');
+      if (classSelect.value) {
+        loadStudents();
+      }
+    }
+  </script>
+</body>
+</html>

templates/timetable.html

@@ -0,0 +1,692 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Smart Timetable Editor</title>
+  <script src="/static/script.js" defer></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <style>
+    /* ====== Reset & Base ====== */
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    
+    body {
+      background: linear-gradient(135deg, #f0f4f8 0%, #d7e1ec 100%);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 30px 20px;
+      color: #333;
+    }
+
+    .container {
+      width: 100%;
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+
+    /* ====== Header ====== */
+    header {
+      width: 100%;
+      background: #fff;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      padding: 15px 0;
+      margin-bottom: 30px;
+      border-bottom: 3px solid #1a4a7c;
+      border-radius: 10px;
+    }
+    
+    header .header-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 20px;
+    }
+    
+    header h1 {
+      font-size: 1.8rem;
+      font-weight: 600;
+      color: #1a4a7c;
+      margin: 0;
+      text-align: center;
+    }
+
+    /* ====== Card Styles ====== */
+    .card {
+      background-color: #ffffff;
+      border-radius: 12px;
+      padding: 25px;
+      width: 100%;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.12);
+      margin-bottom: 30px;
+      border-top: 4px solid #1a4a7c;
+      position: relative;
+    }
+    
+    .card h3 {
+      color: #1a4a7c;
+      margin-bottom: 20px;
+      font-weight: 600;
+      position: relative;
+      padding-bottom: 10px;
+    }
+    
+    .card h3:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 80px;
+      height: 3px;
+      background: linear-gradient(90deg, #1a4a7c, #3498db);
+    }
+
+    /* ====== Form Elements ====== */
+    .input-group {
+      margin-bottom: 15px;
+      position: relative;
+    }
+    
+    .input-group label {
+      display: block;
+      margin-bottom: 8px;
+      color: #444;
+      font-size: 14px;
+      font-weight: 500;
+    }
+    
+    .input-group select,
+    .input-group input {
+      width: 100%;
+      padding: 12px 15px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      font-size: 14px;
+      transition: all 0.3s;
+      background-color: #f9fbff;
+    }
+    
+    .input-group select:focus,
+    .input-group input:focus {
+      border-color: #3498db;
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
+      background-color: #fff;
+    }
+
+    /* Button Styles */
+    .btn {
+      display: inline-block;
+      padding: 10px 18px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      text-align: center;
+      transition: all 0.3s;
+      margin: 5px;
+    }
+    
+    .btn-primary {
+      color: #fff;
+      background: linear-gradient(to right, #1a4a7c, #3498db);
+      box-shadow: 0 4px 8px rgba(26, 74, 124, 0.25);
+    }
+    
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 12px rgba(26, 74, 124, 0.35);
+      background: linear-gradient(to right, #155785, #2980b9);
+    }
+    
+    .btn-secondary {
+      color: #1a4a7c;
+      background: #e6f0ff;
+      border: 1px solid #c5d9f1;
+    }
+    
+    .btn-secondary:hover {
+      background: #d1e3ff;
+      transform: translateY(-1px);
+    }
+    
+    .btn-danger {
+      color: #fff;
+      background: linear-gradient(to right, #e74c3c, #c0392b);
+      box-shadow: 0 4px 8px rgba(231, 76, 60, 0.25);
+    }
+    
+    .btn-danger:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 12px rgba(231, 76, 60, 0.35);
+    }
+
+    .btn-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .btn-action i {
+      margin-right: 5px;
+    }
+
+    /* ====== Config Items ====== */
+    .config-item {
+      display: inline-block;
+      background-color: #f0f7ff;
+      border: 1px solid #c5d9f1;
+      padding: 5px 10px;
+      border-radius: 15px;
+      margin: 5px;
+      font-size: 13px;
+    }
+    
+    .config-list {
+      margin: 10px 0;
+      min-height: 30px;
+    }
+    
+    .delete-btn {
+      color: #e74c3c;
+      cursor: pointer;
+      margin-left: 5px;
+      font-size: 12px;
+    }
+    
+    /* ====== Timetable ====== */
+    .timetable-container {
+      overflow-x: auto;
+      width: 100%;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+      border-radius: 10px;
+      background: white;
+    }
+    
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-top: 5px;
+      background-color: white;
+    }
+    
+    th, td {
+      border: 1px solid #e0e0e0;
+      padding: 12px 15px;
+      text-align: center;
+      vertical-align: middle;
+      font-size: 14px;
+    }
+    
+    th {
+      background-color: #1a4a7c;
+      color: white;
+      font-weight: 600;
+      position: sticky;
+      top: 0;
+    }
+    
+    tr:nth-child(even) {
+      background-color: #f9fbff;
+    }
+    
+    tr:hover {
+      background-color: #f0f7ff;
+    }
+
+    /* ====== Modal ====== */
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0,0,0,0.6);
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+      backdrop-filter: blur(3px);
+    }
+    
+    .modal-content {
+      background: #fff;
+      padding: 25px;
+      border-radius: 12px;
+      width: 90%;
+      max-width: 450px;
+      box-shadow: 0 15px 30px rgba(0,0,0,0.2);
+      position: relative;
+      border-top: 4px solid #1a4a7c;
+      animation: modalFadeIn 0.3s;
+    }
+    
+    @keyframes modalFadeIn {
+      from { opacity: 0; transform: translateY(-20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .close-modal {
+      position: absolute;
+      top: 15px; right: 15px;
+      background: #f0f4f8;
+      border: none;
+      font-size: 18px;
+      color: #555;
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s;
+    }
+    
+    .close-modal:hover {
+      background: #e0e6ed;
+      color: #1a4a7c;
+      transform: rotate(90deg);
+    }
+    
+    .modal-content h3 {
+      color: #1a4a7c;
+      margin-bottom: 20px;
+      font-weight: 600;
+      text-align: center;
+      position: relative;
+      padding-bottom: 10px;
+    }
+    
+    .modal-content h3:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 80px;
+      height: 3px;
+      background: linear-gradient(90deg, #1a4a7c, #3498db);
+    }
+
+    /* ====== Action Bar ====== */
+    .action-bar {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+    
+    .action-group {
+      display: flex;
+      gap: 10px;
+      margin: 5px 0;
+    }
+
+    /* ====== Responsive Adjustments ====== */
+    @media (max-width: 768px) {
+      header h1 { font-size: 1.4rem; }
+      .card { padding: 20px; }
+      .input-group label { font-size: 13px; }
+      .input-group select, .input-group input { padding: 10px; font-size: 13px; }
+      .modal-content { padding: 20px; }
+      .btn { padding: 8px 15px; font-size: 13px; }
+    }
+    
+    @media (max-width: 576px) {
+      header h1 { font-size: 1.2rem; }
+      .action-bar { flex-direction: column; }
+      .action-group { width: 100%; justify-content: center; }
+      th, td { padding: 8px; font-size: 12px; }
+    }
+
+    /* Toast message */
+    .toast-container {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      z-index: 1001;
+    }
+    
+    .toast {
+      background-color: rgba(26, 74, 124, 0.9);
+      color: white;
+      padding: 15px 25px;
+      border-radius: 8px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      animation: toastFadeIn 0.3s;
+      backdrop-filter: blur(5px);
+    }
+    
+    .toast i {
+      margin-right: 10px;
+      font-size: 20px;
+    }
+    
+    @keyframes toastFadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="header-content">
+        <h1><i class="fas fa-calendar-alt"></i> Smart Timetable Editor</h1>
+      </div>
+    </header>
+    
+    <div class="card">
+      <h3>Class Configuration</h3>
+      <div class="input-group">
+        <label for="classSelect"><i class="fas fa-users"></i> Select Class:</label>
+        <select id="classSelect" onchange="loadForSelectedClass()">
+          <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>
+    </div>
+    
+    <div class="card">
+      <h3>Subject Configuration</h3>
+      
+      <!-- Regular Subjects -->
+      <div class="input-group">
+        <label for="subjectInput"><i class="fas fa-book"></i> Subject:</label>
+        <div style="display: flex; gap: 10px;">
+          <input type="text" id="subjectInput" placeholder="Enter subject name">
+          <button class="btn btn-primary" onclick="addConfig('subject')">Add</button>
+        </div>
+      </div>
+      <div class="config-list" id="subjectList"></div>
+      
+      <!-- Specialization Subjects -->
+      <div class="input-group">
+        <label for="specSubjectInput"><i class="fas fa-book-reader"></i> Specialization Subject:</label>
+        <div style="display: flex; gap: 10px;">
+          <input type="text" id="specSubjectInput" placeholder="Enter specialization subject">
+          <button class="btn btn-primary" onclick="addConfig('specSubject')">Add</button>
+        </div>
+      </div>
+      <div class="config-list" id="specSubjectList"></div>
+      
+      <!-- Batches -->
+      <div class="input-group">
+        <label for="batchInput"><i class="fas fa-layer-group"></i> Batch:</label>
+        <div style="display: flex; gap: 10px;">
+          <input type="text" id="batchInput" placeholder="Enter batch name">
+          <button class="btn btn-primary" onclick="addConfig('batch')">Add</button>
+        </div>
+      </div>
+      <div class="config-list" id="batchList"></div>
+      
+      <!-- Practical Subjects -->
+      <div class="input-group">
+        <label for="practicalSubjectInput"><i class="fas fa-flask"></i> Practical Subject:</label>
+        <div style="display: flex; gap: 10px;">
+          <input type="text" id="practicalSubjectInput" placeholder="Enter practical subject">
+          <button class="btn btn-primary" onclick="addConfig('practical')">Add</button>
+        </div>
+      </div>
+      <div class="config-list" id="practicalSubjectList"></div>
+    </div>
+    
+    <div class="action-bar">
+      <div class="action-group">
+        <button class="btn btn-primary btn-action" onclick="openModal()">
+          <i class="fas fa-plus-circle"></i> Create/Update Timetable
+        </button>
+      </div>
+      <div class="action-group">
+        <button class="btn btn-secondary btn-action" onclick="downloadExcel()">
+          <i class="fas fa-file-download"></i> Download Excel
+        </button>
+      </div>
+    </div>
+
+    <div class="timetable-container">
+      <table id="timetable"></table>
+    </div>
+  </div>
+  
+  <!-- Modal Dialog -->
+  <div class="modal" id="popupModal">
+    <div class="modal-content">
+      <span class="close-modal" onclick="closeModal()">×</span>
+      <h3>Update Timetable</h3>
+      
+      <div class="input-group">
+        <label for="daySelect"><i class="fas fa-calendar-day"></i> Select Day:</label>
+        <select id="daySelect">
+          <option value="">--Select Day--</option>
+          <option value="Monday">Monday</option>
+          <option value="Tuesday">Tuesday</option>
+          <option value="Wednesday">Wednesday</option>
+          <option value="Thursday">Thursday</option>
+          <option value="Friday">Friday</option>
+          <option value="Saturday">Saturday</option>
+          <option value="Sunday">Sunday</option>
+        </select>
+      </div>
+      
+      <div class="input-group">
+        <label for="optionType"><i class="fas fa-list-alt"></i> Choose Option:</label>
+        <select id="optionType" onchange="optionTypeChanged()">
+          <option value="">--Select Option--</option>
+          <option value="subject">Subject</option>
+          <option value="specSubject">Specialization Subject</option>
+          <option value="practical">Practical Subject</option>
+        </select>
+      </div>
+      
+      <div id="subjectDropdown" class="input-group" style="display:none;">
+        <label for="subjectSelect"><i class="fas fa-book"></i> Select Subject:</label>
+        <select id="subjectSelect"></select>
+      </div>
+      
+      <div id="specSubjectDropdown" class="input-group" style="display:none;">
+        <label for="specSubjectSelect"><i class="fas fa-book-reader"></i> Select Specialization Subject:</label>
+        <select id="specSubjectSelect"></select>
+      </div>
+      
+      <div id="practicalDropdown" class="input-group" style="display:none;">
+        <label for="practicalSelect"><i class="fas fa-flask"></i> Select Practical Subject:</label>
+        <select id="practicalSelect"></select>
+        
+        <label for="batchSelect" style="margin-top:10px;"><i class="fas fa-layer-group"></i> Select Batch:</label>
+        <select id="batchSelect"></select>
+      </div>
+      
+      <div id="timeSlotDiv" class="input-group" style="display:none;">
+        <label for="timeSlotSelect"><i class="fas fa-clock"></i> Select Time Slot:</label>
+        <select id="timeSlotSelect"></select>
+      </div>
+      
+      <button id="submitBtn" class="btn btn-primary" style="display:none; width:100%; margin-top:20px;" onclick="submitTimetableEntry()">
+        <i class="fas fa-check-circle"></i> Submit
+      </button>
+    </div>
+  </div>
+  
+  <!-- Toast container -->
+  <div class="toast-container" id="toastContainer"></div>
+  
+  <script>
+    // This script will be replaced by your /static/script.js
+    // We're keeping the original script.js file reference at the top
+    
+    // Just adding a few helper functions to demonstrate the toast
+    function showToast(message, type = 'info') {
+      const toastContainer = document.getElementById('toastContainer');
+      const toast = document.createElement('div');
+      toast.className = 'toast';
+      
+      let icon = 'info-circle';
+      if (type === 'success') icon = 'check-circle';
+      if (type === 'error') icon = 'exclamation-circle';
+      
+      toast.innerHTML = `<i class="fas fa-${icon}"></i> ${message}`;
+      toastContainer.appendChild(toast);
+      
+      setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateY(20px)';
+        toast.style.transition = 'all 0.3s ease';
+        setTimeout(() => toast.remove(), 300);
+      }, 3000);
+    }
+    
+    // Placeholder functions to prevent console errors
+    function loadForSelectedClass() {
+      const selectedClass = document.getElementById('classSelect').value;
+      if(selectedClass) {
+        showToast(`Loading data for class ${selectedClass}`, 'info');
+      }
+    }
+    
+    function addConfig(type) {
+      let inputId, listId;
+      switch(type) {
+        case 'subject':
+          inputId = 'subjectInput';
+          listId = 'subjectList';
+          break;
+        case 'specSubject':
+          inputId = 'specSubjectInput';
+          listId = 'specSubjectList';
+          break;
+        case 'batch':
+          inputId = 'batchInput';
+          listId = 'batchList';
+          break;
+        case 'practical':
+          inputId = 'practicalSubjectInput';
+          listId = 'practicalSubjectList';
+          break;
+      }
+      
+      const input = document.getElementById(inputId);
+      const value = input.value.trim();
+      
+      if (value) {
+        const list = document.getElementById(listId);
+        const item = document.createElement('span');
+        item.className = 'config-item';
+        item.innerHTML = `${value} <span class="delete-btn" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></span>`;
+        list.appendChild(item);
+        input.value = '';
+        showToast(`Added ${value} to ${type}s`, 'success');
+      }
+    }
+    
+    function openModal() {
+      document.getElementById('popupModal').style.display = 'flex';
+    }
+    
+    function closeModal() {
+      document.getElementById('popupModal').style.display = 'none';
+    }
+    
+    function optionTypeChanged() {
+      const optionType = document.getElementById('optionType').value;
+      document.getElementById('subjectDropdown').style.display = 'none';
+      document.getElementById('specSubjectDropdown').style.display = 'none';
+      document.getElementById('practicalDropdown').style.display = 'none';
+      document.getElementById('timeSlotDiv').style.display = 'none';
+      document.getElementById('submitBtn').style.display = 'none';
+      
+      if (optionType === 'subject') {
+        document.getElementById('subjectDropdown').style.display = 'block';
+        document.getElementById('timeSlotDiv').style.display = 'block';
+        document.getElementById('submitBtn').style.display = 'block';
+      } else if (optionType === 'specSubject') {
+        document.getElementById('specSubjectDropdown').style.display = 'block';
+        document.getElementById('timeSlotDiv').style.display = 'block';
+        document.getElementById('submitBtn').style.display = 'block';
+      } else if (optionType === 'practical') {
+        document.getElementById('practicalDropdown').style.display = 'block';
+        document.getElementById('timeSlotDiv').style.display = 'block';
+        document.getElementById('submitBtn').style.display = 'block';
+      }
+    }
+    
+    function submitTimetableEntry() {
+      const day = document.getElementById('daySelect').value;
+      const optionType = document.getElementById('optionType').value;
+      const timeSlot = document.getElementById('timeSlotSelect').value;
+      
+      if (!day || !optionType || !timeSlot) {
+        showToast('Please fill all required fields', 'error');
+        return;
+      }
+      
+      showToast('Timetable entry added successfully', 'success');
+      closeModal();
+    }
+    
+    function downloadExcel() {
+      showToast('Downloading Excel file...', 'info');
+      // Implement actual Excel download logic
+    }
+    
+    // Initialize a sample timetable
+    window.addEventListener('DOMContentLoaded', () => {
+      const table = document.getElementById('timetable');
+      
+      // Sample timetable data
+      const days = ['Time', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+      const times = ['9:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-1:00', '1:00-2:00'];
+      
+      // Create header row
+      const headerRow = document.createElement('tr');
+      days.forEach(day => {
+        const th = document.createElement('th');
+        th.textContent = day;
+        headerRow.appendChild(th);
+      });
+      table.appendChild(headerRow);
+      
+      // Create time rows
+      times.forEach(time => {
+        const row = document.createElement('tr');
+        
+        // Add time cell
+        const timeCell = document.createElement('td');
+        timeCell.textContent = time;
+        timeCell.style.fontWeight = 'bold';
+        timeCell.style.backgroundColor = '#f0f7ff';
+        row.appendChild(timeCell);
+        
+        // Add empty cells for each day
+        for (let i = 1; i < days.length; i++) {
+          const td = document.createElement('td');
+          td.textContent = '';
+          row.appendChild(td);
+        }
+        
+        table.appendChild(row);
+      });
+      
+      // Populate dropdown for time slots
+      const timeSlotSelect = document.getElementById('timeSlotSelect');
+      times.forEach(time => {
+        const option = document.createElement('option');
+        option.value = time;
+        option.textContent = time;
+        timeSlotSelect.appendChild(option);
+      });
+    });
+  </script>
+<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'93ecda760d73bf9d',t:'MTc0NzA4MzcwNy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
+</html>