Upload 19 files

app.py

@@ -0,0 +1,432 @@
+from flask import Flask, render_template, request, jsonify, session, redirect, url_for, send_file
+from flask_sqlalchemy import SQLAlchemy
+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
+import base64
+
+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
+db = SQLAlchemy(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)
+
+# Create database
+with app.app_context():
+    db.create_all()
+
+# 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()
+
+# 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)
+
+# Combined Routes
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+# Authentication Routes (from interface code)
+@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_number = data.get('enrollment_number') 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_number:
+        return jsonify({'success': False, 'message': 'Enrollment number is required for students!'})
+
+    if User.query.filter_by(username=username).first() or User.query.filter_by(email=email).first():
+        return jsonify({'success': False, 'message': 'Username or email already exists!'})
+
+    hashed_password = generate_password_hash(password)
+    new_user = User(
+        full_name=full_name,
+        email=email,
+        username=username,
+        password=hashed_password,
+        role=role,
+        enrollment_number=enrollment_number
+    )
+    db.session.add(new_user)
+    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 = User.query.get(session['user_id'])
+    return render_template('teacher_dashboard.html', user=user)
+
+# get_attendance_data
+@app.route('/get_attendance_data', methods=['GET'])
+def get_attendance_data():
+    class_name = request.args.get("class")
+    if not class_name:
+        return jsonify({"error": "Class parameter is required"}), 400
+    
+    filename = os.path.join(attendance_path, f"{class_name}.xlsx")
+    if not os.path.exists(filename):
+        return jsonify({"error": f"Attendance file not found for {class_name}"}), 404
+    
+    try:
+        # Read Excel file with proper datetime handling
+        df = pd.read_excel(filename, parse_dates=['Date'])
+        
+        # Convert datetime columns to readable strings
+        if 'Date' in df.columns:
+            df['Date'] = df['Date'].dt.strftime('%Y-%m-%d')
+        if 'CheckIn' in df.columns:
+            df['CheckIn'] = pd.to_datetime(df['CheckIn'], errors='coerce').dt.strftime('%H:%M:%S')
+        if 'CheckOut' in df.columns:
+            df['CheckOut'] = pd.to_datetime(df['CheckOut'], errors='coerce').dt.strftime('%H:%M:%S')
+        
+        # Replace NaN/NaT with empty strings
+        df = df.fillna('')
+        
+        # Convert to list of dictionaries
+        data = df.to_dict(orient='records')
+        return jsonify({
+            "success": True,
+            "data": data,
+            "columns": df.columns.tolist(),
+            "count": len(data)
+        })
+    except Exception as e:
+        return jsonify({
+            "error": f"Error processing attendance data: {str(e)}",
+            "success": False
+        }), 500
+
+@app.route('/student_dashboard')
+def student_dashboard():
+    if 'user_id' not in session or session['role'] != 'student':
+        return redirect(url_for('index'))
+    user = User.query.get(session['user_id'])
+    return render_template('student_dashboard.html', user=user)
+
+# Timetable Routes (from timetable code)
+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}!'})
+
+from flask import send_file
+
+@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)
+
+# Attendance Routes (from attendance code)
+
+# KNN distance utility
+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]
+
+# Attendance management per class
+class AttendanceSystem:
+    def __init__(self, class_name):
+        self.class_name = class_name
+        self.file = os.path.join(attendance_path, f"{class_name}.xlsx")
+        self.columns = ["Enrollment", "Name", "Date", "CheckIn", "CheckOut"]
+        if not os.path.exists(self.file):
+            df = pd.DataFrame(columns=self.columns)
+            df.to_excel(self.file, index=False)
+
+    def checkin(self, enrollment, name):
+        today = datetime.now().strftime("%Y-%m-%d")
+        now = datetime.now().strftime("%H:%M:%S")
+        df = pd.read_excel(self.file)
+        existing = df[(df["Enrollment"] == enrollment) & (df["Date"] == today)]
+        if existing.empty:
+            new_entry = pd.DataFrame([[enrollment, name, today, now, ""]], columns=self.columns)
+            df = pd.concat([df, new_entry], ignore_index=True)
+            df.to_excel(self.file, index=False)
+            return True, "Check-in successful"
+        return False, "Already checked in"
+
+    def checkout(self, enrollment):
+        today = datetime.now().strftime("%Y-%m-%d")
+        now = datetime.now().strftime("%H:%M:%S")
+        df = pd.read_excel(self.file)
+        idx = df[(df["Enrollment"] == enrollment) & (df["Date"] == today)].index
+        if idx.empty:
+            return False, "Please check-in first"
+        row = df.loc[idx[0]]
+        if pd.isna(row["CheckOut"]) or row["CheckOut"] == "":
+            df.at[idx[0], "CheckOut"] = now
+            df.to_excel(self.file, index=False)
+            return True, "Check-out successful"
+        return False, "Already checked out"
+
+@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')
+
+# ... include all attendance API routes (/api/register_face, /api/identify_face, /api/checkin, /api/checkout) ...
+
+@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']  # List of base64 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"})
+
+# API to identify face without marking
+@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"})
+
+    # Load training 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"})
+
+# API to check-in
+@app.route('/api/checkin', methods=['POST'])
+def api_checkin():
+    data = request.json
+    class_name = data['class_name']
+    enrollment = data['enrollment']
+    name = data['name']
+    attendance = AttendanceSystem(class_name)
+    ok, msg = attendance.checkin(enrollment, name)
+    status = "success" if ok else "fail"
+    return jsonify({"status": status, "message": msg})
+
+# API to check-out
+@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})
+
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)

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

requirements.txt

@@ -0,0 +1,5 @@
+flask
+flask-sqlalchemy
+pandas
+opencv-python
+numpy

static/js/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 = [
+  '08.45 - 09.40', // index 0
+  '09.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 - 01.40', // index 5 -> Lunch Break (fixed)
+  '01.40 - 02.35', // index 6
+  '02.35 - 03.30', // index 7
+  '03.30 - 03.40', // index 8 -> Short Break (fixed)
+  '03.40 - 04.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: '08.45 - 10.35', indices: [0, 1] },
+  { label: '10.50 - 12.40', indices: [3, 4] },
+  { label: '01.40 - 03.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();
+}

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 = [
+  '08.45 - 09.40', // index 0
+  '09.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 - 01.40', // index 5 -> Lunch Break (fixed)
+  '01.40 - 02.35', // index 6
+  '02.35 - 03.30', // index 7
+  '03.30 - 03.40', // index 8 -> Short Break (fixed)
+  '03.40 - 04.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: '08.45 - 10.35', indices: [0, 1] },
+  { label: '10.50 - 12.40', indices: [3, 4] },
+  { label: '01.40 - 03.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();
+}

static/script.js.bak

@@ -0,0 +1,360 @@
+// 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 = [
+  '08.45 - 09.40','09.40 - 10.35','10.35 - 10.50','10.50 - 11.45',
+  '11.45 - 12.40','12.40 - 01.40','01.40 - 02.35',
+  '02.35 - 03.30','03.30 - 03.40','03.40 - 04.30'
+];
+// Two-hour practical time slot definitions.
+const practicalTimeSlots = [
+  { label: '08.45 - 10.35', indices: [0, 1] },
+  { label: '10.35 - 12.40', indices: [2, 3] },
+  { label: '12.40 - 01.40', indices: [4, 5] },
+  { label: '01.40 - 03.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();
+}
+
+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) => {
+      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 generateTable() {
+  const table = document.getElementById("timetable");
+  table.innerHTML = "";
+  // Header row.
+  const header = table.insertRow();
+  header.insertCell().textContent = "Time";
+  days.forEach(day => {
+    const th = document.createElement("th");
+    th.textContent = day;
+    header.appendChild(th);
+  });
+  // One-hour rows.
+  timeSlots.forEach((slot, rowIdx) => {
+    const row = table.insertRow();
+    const timeCell = row.insertCell();
+    timeCell.textContent = slot;
+    days.forEach((day, colIdx) => {
+      const cellKey = rowIdx + "-" + colIdx;
+      if (isMergedCell(cellKey)) return;
+      const cell = row.insertCell();
+      if (mergedCells[cellKey] && mergedCells[cellKey].length > 1)
+        cell.rowSpan = mergedCells[cellKey].length;
+      const contentKey = cellKey + "-" + day;
+      cell.innerHTML = timetableData[contentKey] || "";
+      // Append delete button if cell has content.
+      if (timetableData[contentKey]) {
+        const del = document.createElement("span");
+        del.textContent = " [✕]";
+        del.className = "delete-btn";
+        del.onclick = () => { deleteTimetableCell(day, rowIdx, colIdx); };
+        cell.appendChild(del);
+      }
+      cell.className = "editable";
+    });
+  });
+}
+
+function isMergedCell(cellKey) {
+  for (const mainKey in mergedCells) {
+    if (mergedCells[mainKey].includes(cellKey) && mainKey !== cellKey)
+      return true;
+  }
+  return false;
+}
+
+function deleteTimetableCell(day, rowIdx, colIdx) {
+  if (confirm("Delete this entry?")) {
+    const cellKey = rowIdx + "-" + colIdx + "-" + day;
+    timetableData[cellKey] = "";
+    autoSaveTimetable();
+    generateTable();
+  }
+}
+
+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;
+  if (timetableData[key])
+    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;
+      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];
+          }
+        }
+      }
+      mergedCells = {};
+      generateTable();
+    });
+}
+
+window.onload = function() {
+  // When the page loads, no class is selected yet.
+  // loadTeacherConfig(); and loadTimetable() will be called when a class is selected.
+  generateTable();
+}

templates/index.html

@@ -0,0 +1,654 @@
+<!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>
+
+  <!-- Bootstrap CSS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" />
+  
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/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: 20px;
+    }
+
+    /* ====== Header ====== */
+    header {
+      width: 100%;
+      background: #fff;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      padding: 15px 0;
+      margin-bottom: 40px;
+      border-bottom: 3px solid #1a4a7c;
+    }
+    
+    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.7rem;
+      font-weight: 600;
+      color: #1a4a7c;
+      margin: 0;
+      text-align: center;
+    }
+
+    /* ====== Login Card ====== */
+    .login-box {
+      background-color: #ffffff;
+      border-radius: 12px;
+      padding: 35px;
+      width: 100%;
+      max-width: 480px;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+      margin-bottom: 40px;
+      border-top: 4px solid #1a4a7c;
+      position: relative;
+    }
+    
+    .login-box:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 8px;
+      background: linear-gradient(90deg, #1a4a7c, #3498db);
+      border-radius: 12px 12px 0 0;
+      opacity: 0.8;
+    }
+    
+    .login-box h2 {
+      color: #1a4a7c;
+      margin-bottom: 25px;
+      font-weight: 600;
+      text-align: center;
+      position: relative;
+      padding-bottom: 12px;
+    }
+    
+    .login-box h2:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 80px;
+      height: 3px;
+      background: linear-gradient(90deg, #1a4a7c, #3498db);
+    }
+    
+    .section-buttons {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 30px;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+    }
+    
+    .section-buttons button {
+      flex: 1;
+      padding: 14px 0;
+      background-color: #f5f9ff;
+      border: none;
+      cursor: pointer;
+      font-weight: 500;
+      color: #555;
+      transition: all 0.3s;
+      border-right: 1px solid #e0e0e0;
+    }
+    
+    .section-buttons button:last-child {
+      border-right: none;
+    }
+    
+    .section-buttons button:hover {
+      background-color: #e6f0ff;
+    }
+    
+    .section-buttons button.active {
+      background-color: #1a4a7c;
+      color: #fff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(26, 74, 124, 0.3);
+    }
+    
+    .form-section {
+      display: none;
+      margin-top: 20px;
+    }
+    
+    .form-section h3 {
+      color: #1a4a7c;
+      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: #444;
+      font-size: 15px;
+      font-weight: 500;
+    }
+    
+    .input-group input {
+      width: 100%;
+      padding: 14px 15px 14px 40px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      font-size: 15px;
+      transition: all 0.3s;
+      background-color: #f9fbff;
+    }
+    
+    .input-group input:focus {
+      border-color: #3498db;
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+      background-color: #fff;
+    }
+    
+    .input-group i {
+      position: absolute;
+      left: 15px;
+      top: 38px;
+      color: #aaa;
+      transition: color 0.3s;
+    }
+    
+    .input-group input:focus + i {
+      color: #3498db;
+    }
+    
+    .form-section button {
+      width: 100%;
+      padding: 15px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: 600;
+      color: #fff;
+      background: linear-gradient(to right, #1a4a7c, #3498db);
+      transition: all 0.3s;
+      margin-top: 15px;
+      box-shadow: 0 4px 10px rgba(26, 74, 124, 0.3);
+    }
+    
+    .form-section button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 15px rgba(26, 74, 124, 0.4);
+      background: linear-gradient(to right, #155785, #2980b9);
+    }
+
+    /* ====== Modal ====== */
+    .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: #fff;
+      border-radius: 12px;
+      padding: 35px;
+      width: 100%;
+      max-width: 480px;
+      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-button {
+      position: absolute;
+      top: 15px; right: 15px;
+      background: #f0f4f8;
+      border: none;
+      font-size: 20px;
+      color: #555;
+      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: #e0e6ed;
+      color: #1a4a7c;
+      transform: rotate(90deg);
+    }
+
+    /* ====== Notes Card ====== */
+    .notes-card {
+      width: 100%;
+      margin-bottom: 20px;
+      border: none;
+      border-radius: 12px;
+      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+      overflow: hidden;
+    }
+    
+    .notes-card .card-header {
+      background-color: #1a4a7c;
+      color: white;
+      padding: 15px 20px;
+      font-weight: 600;
+      border: none;
+    }
+    
+    .notes-card .card-body {
+      padding: 25px;
+    }
+    
+    .notes-card .card-body h5 {
+      font-weight: 600;
+      margin-top: 15px;
+      color: #1a4a7c;
+      display: flex;
+      align-items: center;
+    }
+    
+    .notes-card .card-body h5 i {
+      margin-right: 10px;
+      color: #3498db;
+    }
+    
+    .notes-card ul {
+      margin-top: 15px;
+      padding-left: 20px;
+    }
+    
+    .notes-card ul li {
+      margin-bottom: 10px;
+      line-height: 1.6;
+    }
+    
+    .notes-card a {
+      color: #3498db;
+      text-decoration: none;
+      transition: color 0.3s;
+    }
+    
+    .notes-card a:hover {
+      color: #1a4a7c;
+      text-decoration: underline;
+    }
+    
+    /* ====== Responsive Adjustments ====== */
+    @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 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>
+  <!-- Header -->
+  <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>
+
+  <!-- Login Card -->
+  <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">
+        <label for="teacherPassword">Password</label>
+        <input type="password" id="teacherPassword" placeholder="Enter your password" />
+        <i class="fas fa-lock"></i>
+      </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">
+        <label for="studentPassword">Password</label>
+        <input type="password" id="studentPassword" placeholder="Enter your password" />
+        <i class="fas fa-lock"></i>
+      </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>
+
+  <!-- Signup Modal -->
+  <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>
+      <!-- Enrollment Number field, hidden by default -->
+      <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">
+        <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">
+        <label for="signupPassword">Password</label>
+        <input type="password" id="signupPassword" placeholder="Choose a password" />
+        <i class="fas fa-lock"></i>
+      </div>
+      <div class="input-group">
+        <label for="confirmPassword">Confirm Password</label>
+        <input type="password" id="confirmPassword" placeholder="Confirm your password" />
+        <i class="fas fa-check-circle"></i>
+      </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>
+
+  <!-- Toast messages container -->
+  <div class="toast-container" id="toastContainer"></div>
+
+  <!-- Important Notes Card -->
+  <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>
+
+  <!-- JS -->
+  <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');
+      enrollmentGroup.style.display = role === 'Student' ? 'block' : 'none';
+      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 enrollment_number = null;
+
+      if (role === 'student') {
+        enrollment_number = document.getElementById('signupEnrollment').value;
+        if (!enrollment_number) {
+          showToast('Please enter your enrollment 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;
+      }
+
+      const data = {
+        full_name: fullname,
+        email: email,
+        username: username,
+        password: password,
+        role: role,
+        enrollment_number: enrollment_number
+      };
+
+      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 markAttendance() {
+      showToast('Attendance marked successfully!', 'success');
+    }
+
+    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);
+      }, 8000);
+    }
+
+    window.onclick = function(e) {
+      if (e.target === document.getElementById('signupModal')) closeSignup();
+    }
+  </script>
+
+  <!-- Bootstrap JS -->
+  <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,198 @@
+<!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-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+        .container {
+            width: 80%;
+            max-width: 800px;
+            margin: 30px auto;
+            padding: 30px;
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+        h2 {
+            color: #2c3e50;
+            margin-bottom: 25px;
+            font-size: 28px;
+        }
+        .btn {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: #27ae60;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            font-weight: 500;
+            transition: background-color 0.3s;
+            border: none;
+            font-size: 16px;
+            cursor: pointer;
+            margin: 15px 0;
+        }
+        .btn:hover {
+            background-color: #219653;
+        }
+        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;
+        }
+        .back-link:hover {
+            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> &nbsp;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>
+    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') {
+                    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);
+                    document.getElementById('checkout-btn').onclick = () => handleAction('checkout', className, data.enrollment, data.name);
+                    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) {
+        fetch(`/api/${action}`, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({class_name: className, enrollment: enrollment, name: name})
+        })
+        .then(res => res.json())
+        .then(data => {
+            alert(data.message);
+            document.getElementById('result').innerHTML = '';
+            document.getElementById('status').innerText = 'Select class and click "Scan Face"';
+        });
+    }
+
+    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,182 @@
+<!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-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+        .container {
+            width: 80%;
+            max-width: 800px;
+            margin: 30px auto;
+            padding: 30px;
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+        h2 {
+            color: #2c3e50;
+            margin-bottom: 25px;
+            font-size: 28px;
+        }
+        .btn {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: #3498db;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            font-weight: 500;
+            transition: background-color 0.3s;
+            border: none;
+            font-size: 16px;
+            cursor: pointer;
+            margin-top: 15px;
+        }
+        .btn:hover {
+            background-color: #2980b9;
+        }
+        input[type="text"] {
+            width: 100%;
+            padding: 12px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 16px;
+        }
+        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;
+        }
+        .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;
+        }
+        .back-link:hover {
+            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>
+</body>
+</html>

templates/student_dashboard.html

@@ -0,0 +1,63 @@
+<!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>
+        body {
+            background: linear-gradient(135deg, #f0f4f8 0%, #d7e1ec 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        .dashboard-box {
+            background-color: #ffffff;
+            border-radius: 12px;
+            padding: 35px;
+            width: 100%;
+            max-width: 480px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+            border-top: 4px solid #1a4a7c;
+        }
+        h1 {
+            color: #1a4a7c;
+            margin-bottom: 25px;
+            text-align: center;
+        }
+        p {
+            font-size: 16px;
+            color: #444;
+            margin-bottom: 15px;
+        }
+        .btn-primary {
+            background: linear-gradient(to right, #1a4a7c, #3498db);
+            border: none;
+            width: 100%;
+            padding: 15px;
+            margin-top: 20px;
+        }
+        .btn-primary:hover {
+            background: linear-gradient(to right, #155785, #2980b9);
+        }
+        .btn-secondary {
+            width: 100%;
+            padding: 15px;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-box">
+        <h1>Welcome, {{ user.full_name }}</h1>
+        <p>Enrollment Number: {{ user.enrollment_number }}</p>
+        <p>Email: {{ user.email }}</p>
+        <button class="btn btn-primary" onclick="window.location.href='/register_face'">Register Face</button>
+        <a href="/logout" class="btn btn-secondary">Logout</a>
+    </div>
+</body>
+</html>

templates/teacher_dashboard.html

@@ -0,0 +1,198 @@
+<!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>
+        body {
+            background: linear-gradient(135deg, #f0f4f8 0%, #d7e1ec 100%);
+            min-height: 100vh;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            padding: 20px;
+        }
+        .dashboard-box {
+            background-color: #ffffff;
+            border-radius: 12px;
+            padding: 35px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+            border-top: 4px solid #1a4a7c;
+            margin-bottom: 20px;
+        }
+        h1 {
+            color: #1a4a7c;
+            margin-bottom: 25px;
+            text-align: center;
+        }
+        p {
+            font-size: 16px;
+            color: #444;
+            margin-bottom: 15px;
+        }
+        .btn-primary {
+            background: linear-gradient(to right, #1a4a7c, #3498db);
+            border: none;
+            width: 100%;
+            padding: 15px;
+            margin-top: 20px;
+        }
+        .btn-primary:hover {
+            background: linear-gradient(to right, #155785, #2980b9);
+        }
+        .btn-secondary {
+            width: 100%;
+            padding: 15px;
+            margin-top: 10px;
+        }
+		        .attendance-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        .attendance-table th {
+            background-color: #1a4a7c;
+            color: white;
+            padding: 12px;
+            text-align: left;
+        }
+        .attendance-table td {
+            padding: 10px;
+            border-bottom: 1px solid #ddd;
+        }
+        .attendance-table tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        .attendance-table tr:hover {
+            background-color: #f1f1f1;
+        }
+		.status-badge {
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .badge-present {
+            background-color: #28a745;
+            color: white;
+        }
+        .badge-absent {
+            background-color: #dc3545;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+    <div class="dashboard-box">
+        <h1>Welcome, {{ user.full_name }}</h1>
+        <p>Email: {{ user.email }}</p>
+        <button class="btn btn-primary" onclick="window.location.href='/timetable'"><i class="fas fa-calendar-alt"></i> Timetable</button>
+        <a href="/logout" class="btn btn-secondary">Logout</a>
+    </div>
+
+        <div class="dashboard-box">
+            <h2><i class="fas fa-clipboard-check"></i> Attendance Records</h2>
+            <div class="form-group">
+                <label for="classSelect">Select Class:</label>
+                <select id="classSelect" class="form-control">
+                    <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 id="attendanceData" class="mt-4">
+                <!-- Attendance data will be loaded here -->
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('classSelect').addEventListener('change', function() {
+            const classSelected = this.value;
+            const attendanceDataDiv = document.getElementById('attendanceData');
+            
+            if (!classSelected) {
+                attendanceDataDiv.innerHTML = '';
+                return;
+            }
+
+            // Show loading state
+            attendanceDataDiv.innerHTML = `
+                <div class="text-center py-4">
+                    <i class="fas fa-spinner fa-spin fa-2x"></i>
+                    <p>Loading attendance data for ${classSelected}...</p>
+                </div>
+            `;
+
+            fetch(`/get_attendance_data?class=${classSelected}`)
+                .then(response => {
+                    if (!response.ok) {
+                        return response.json().then(err => { throw new Error(err.error || 'Server error'); });
+                    }
+                    return response.json();
+                })
+                .then(result => {
+                    if (!result.success) {
+                        throw new Error(result.error || 'Failed to load data');
+                    }
+
+                    const { data, columns, count } = result;
+                    
+                    if (count === 0) {
+                        attendanceDataDiv.innerHTML = `
+                            <div class="alert alert-info mt-3">
+                                No attendance records found for ${classSelected}
+                            </div>
+                        `;
+                        return;
+                    }
+
+                    // Create table HTML
+                    let tableHTML = `
+                        <div class="alert alert-success">
+                            Showing ${count} records for ${classSelected}
+                        </div>
+                        <div class="table-responsive">
+                            <table class="attendance-table">
+                                <thead>
+                                    <tr>
+                                        ${columns.map(col => `<th>${col}</th>`).join('')}
+                                        <th>Status</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    ${data.map(row => `
+                                        <tr>
+                                            ${columns.map(col => `
+                                                <td>${row[col] || '-'}</td>
+                                            `).join('')}
+                                            <td>
+                                                <span class="status-badge ${row['CheckOut'] ? 'badge-present' : 'badge-absent'}">
+                                                    ${row['CheckOut'] ? 'Present' : 'Absent'}
+                                                </span>
+                                            </td>
+                                        </tr>
+                                    `).join('')}
+                                </tbody>
+                            </table>
+                        </div>
+                    `;
+
+                    attendanceDataDiv.innerHTML = tableHTML;
+                })
+                .catch(error => {
+                    attendanceDataDiv.innerHTML = `
+                        <div class="alert alert-danger">
+                            <i class="fas fa-exclamation-triangle"></i> ${error.message}
+                        </div>
+                    `;
+                    console.error('Error:', error);
+                });
+        });
+    </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>
+</body>
+</html>