Upload 12 files

app.py

@@ -0,0 +1,375 @@
+from flask import Flask, render_template, request, redirect, url_for, session, flash, g
+import sqlite3
+import os
+import re
+from datetime import datetime
+
+app = Flask(__name__)
+app.secret_key = 'student_system_secret_key_2024'
+
+# Database path
+DATABASE = os.path.join(os.path.dirname(__file__), 'database.db')
+
+# ─────────────────────────────────────────
+# Database Helpers
+# ─────────────────────────────────────────
+
+def get_db():
+    """Open a new database connection if not already open for this request."""
+    if 'db' not in g:
+        g.db = sqlite3.connect(DATABASE)
+        g.db.row_factory = sqlite3.Row  # rows behave like dicts
+    return g.db
+
+@app.teardown_appcontext
+def close_db(error):
+    """Close database connection at end of request."""
+    db = g.pop('db', None)
+    if db is not None:
+        db.close()
+
+def init_db():
+    """Create tables if they don't exist."""
+    db = sqlite3.connect(DATABASE)
+    cursor = db.cursor()
+
+    # Users table (admin login)
+    cursor.execute('''
+        CREATE TABLE IF NOT EXISTS users (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            username TEXT NOT NULL UNIQUE,
+            password TEXT NOT NULL
+        )
+    ''')
+
+    # Students table
+    cursor.execute('''
+        CREATE TABLE IF NOT EXISTS students (
+            id          INTEGER PRIMARY KEY AUTOINCREMENT,
+            student_id  TEXT NOT NULL UNIQUE,
+            full_name   TEXT NOT NULL,
+            father_name TEXT NOT NULL,
+            mother_name TEXT NOT NULL,
+            gender      TEXT NOT NULL,
+            dob         TEXT NOT NULL,
+            email       TEXT NOT NULL UNIQUE,
+            phone       TEXT NOT NULL,
+            course      TEXT NOT NULL,
+            branch      TEXT NOT NULL,
+            year_sem    TEXT NOT NULL,
+            address     TEXT NOT NULL,
+            city        TEXT NOT NULL,
+            state       TEXT NOT NULL,
+            pin_code    TEXT NOT NULL,
+            created_at  TEXT NOT NULL
+        )
+    ''')
+
+    # Insert default admin user (password: admin123)
+    cursor.execute('''
+        INSERT OR IGNORE INTO users (username, password)
+        VALUES (?, ?)
+    ''', ('admin', 'admin123'))
+
+    db.commit()
+    db.close()
+    print("Database initialised successfully.")
+
+# ─────────────────────────────────────────
+# Auth helpers
+# ─────────────────────────────────────────
+
+def login_required(f):
+    """Decorator: redirect to login if session missing."""
+    from functools import wraps
+    @wraps(f)
+    def decorated(*args, **kwargs):
+        if 'user' not in session:
+            flash('Please log in to access this page.', 'warning')
+            return redirect(url_for('login'))
+        return f(*args, **kwargs)
+    return decorated
+
+# ─────────────────────────────────────────
+# Validation helpers
+# ─────────────────────────────────────────
+
+def validate_student(data):
+    """Server-side validation; returns list of error strings."""
+    errors = []
+
+    if not data.get('student_id', '').strip():
+        errors.append('Student ID is required.')
+    if not data.get('full_name', '').strip():
+        errors.append('Full Name is required.')
+    if not data.get('father_name', '').strip():
+        errors.append('Father Name is required.')
+    if not data.get('mother_name', '').strip():
+        errors.append('Mother Name is required.')
+    if data.get('gender') not in ('Male', 'Female', 'Other'):
+        errors.append('Please select a valid Gender.')
+
+    # Date of birth
+    dob = data.get('dob', '').strip()
+    if not dob:
+        errors.append('Date of Birth is required.')
+    else:
+        try:
+            datetime.strptime(dob, '%Y-%m-%d')
+        except ValueError:
+            errors.append('Date of Birth format is invalid.')
+
+    # Email
+    email = data.get('email', '').strip()
+    if not email:
+        errors.append('Email is required.')
+    elif not re.match(r'^[\w.+-]+@[\w-]+\.[a-zA-Z]{2,}$', email):
+        errors.append('Email address is invalid.')
+
+    # Phone (10 digits)
+    phone = data.get('phone', '').strip()
+    if not phone:
+        errors.append('Phone Number is required.')
+    elif not re.match(r'^\d{10}$', phone):
+        errors.append('Phone Number must be exactly 10 digits.')
+
+    if not data.get('course', '').strip():
+        errors.append('Course is required.')
+    if not data.get('branch', '').strip():
+        errors.append('Branch is required.')
+    if not data.get('year_sem', '').strip():
+        errors.append('Year / Semester is required.')
+    if not data.get('address', '').strip():
+        errors.append('Address is required.')
+    if not data.get('city', '').strip():
+        errors.append('City is required.')
+    if not data.get('state', '').strip():
+        errors.append('State is required.')
+
+    pin = data.get('pin_code', '').strip()
+    if not pin:
+        errors.append('Pin Code is required.')
+    elif not re.match(r'^\d{6}$', pin):
+        errors.append('Pin Code must be exactly 6 digits.')
+
+    return errors
+
+# ─────────────────────────────────────────
+# Routes
+# ─────────────────────────────────────────
+
+@app.route('/')
+def index():
+    return redirect(url_for('login'))
+
+
+# ── LOGIN ──────────────────────────────────
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if 'user' in session:
+        return redirect(url_for('dashboard'))
+
+    if request.method == 'POST':
+        username = request.form.get('username', '').strip()
+        password = request.form.get('password', '').strip()
+
+        db = get_db()
+        user = db.execute(
+            'SELECT * FROM users WHERE username=? AND password=?',
+            (username, password)
+        ).fetchone()
+
+        if user:
+            session['user'] = username
+            flash(f'Welcome back, {username}! 👋', 'success')
+            return redirect(url_for('dashboard'))
+        else:
+            flash('Invalid username or password.', 'danger')
+
+    return render_template('login.html')
+
+
+# ── LOGOUT ─────────────────────────────────
+@app.route('/logout')
+@login_required
+def logout():
+    session.pop('user', None)
+    flash('You have been logged out.', 'info')
+    return redirect(url_for('login'))
+
+
+# ── DASHBOARD ──────────────────────────────
+@app.route('/dashboard')
+@login_required
+def dashboard():
+    db = get_db()
+
+    total      = db.execute('SELECT COUNT(*) FROM students').fetchone()[0]
+    male       = db.execute("SELECT COUNT(*) FROM students WHERE gender='Male'").fetchone()[0]
+    female     = db.execute("SELECT COUNT(*) FROM students WHERE gender='Female'").fetchone()[0]
+    courses    = db.execute('SELECT COUNT(DISTINCT course) FROM students').fetchone()[0]
+
+    # Recent 5 students
+    recent = db.execute(
+        'SELECT student_id, full_name, course, branch FROM students ORDER BY id DESC LIMIT 5'
+    ).fetchall()
+
+    stats = {
+        'total':   total,
+        'male':    male,
+        'female':  female,
+        'courses': courses,
+    }
+    return render_template('dashboard.html', stats=stats, recent=recent)
+
+
+# ── ADD STUDENT ────────────────────────────
+@app.route('/add_student', methods=['GET', 'POST'])
+@login_required
+def add_student():
+    if request.method == 'POST':
+        data = {k: v.strip() for k, v in request.form.items()}
+        errors = validate_student(data)
+
+        if errors:
+            for e in errors:
+                flash(e, 'danger')
+            return render_template('add_student.html', form=data)
+
+        db = get_db()
+
+        # Check duplicate student_id
+        dup_id = db.execute('SELECT id FROM students WHERE student_id=?', (data['student_id'],)).fetchone()
+        if dup_id:
+            flash('Student ID already exists. Use a unique ID.', 'danger')
+            return render_template('add_student.html', form=data)
+
+        # Check duplicate email
+        dup_email = db.execute('SELECT id FROM students WHERE email=?', (data['email'],)).fetchone()
+        if dup_email:
+            flash('Email address already registered.', 'danger')
+            return render_template('add_student.html', form=data)
+
+        db.execute('''
+            INSERT INTO students
+                (student_id, full_name, father_name, mother_name, gender, dob,
+                 email, phone, course, branch, year_sem, address, city, state,
+                 pin_code, created_at)
+            VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)
+        ''', (
+            data['student_id'], data['full_name'], data['father_name'],
+            data['mother_name'], data['gender'], data['dob'],
+            data['email'], data['phone'], data['course'], data['branch'],
+            data['year_sem'], data['address'], data['city'], data['state'],
+            data['pin_code'], datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+        ))
+        db.commit()
+        flash(f'Student "{data["full_name"]}" added successfully! ✅', 'success')
+        return redirect(url_for('view_students'))
+
+    return render_template('add_student.html', form={})
+
+
+# ── VIEW STUDENTS ──────────────────────────
+@app.route('/view_students')
+@login_required
+def view_students():
+    db  = get_db()
+    q   = request.args.get('q', '').strip()
+    col = request.args.get('col', 'full_name')
+
+    allowed_cols = {'full_name', 'student_id', 'course', 'phone'}
+    if col not in allowed_cols:
+        col = 'full_name'
+
+    if q:
+        students = db.execute(
+            f'SELECT * FROM students WHERE {col} LIKE ? ORDER BY id DESC',
+            (f'%{q}%',)
+        ).fetchall()
+    else:
+        students = db.execute('SELECT * FROM students ORDER BY id DESC').fetchall()
+
+    return render_template('view_students.html', students=students, q=q, col=col)
+
+
+# ── EDIT STUDENT ───────────────────────────
+@app.route('/edit_student/<int:sid>', methods=['GET', 'POST'])
+@login_required
+def edit_student(sid):
+    db      = get_db()
+    student = db.execute('SELECT * FROM students WHERE id=?', (sid,)).fetchone()
+
+    if not student:
+        flash('Student not found.', 'danger')
+        return redirect(url_for('view_students'))
+
+    if request.method == 'POST':
+        data   = {k: v.strip() for k, v in request.form.items()}
+        errors = validate_student(data)
+
+        if errors:
+            for e in errors:
+                flash(e, 'danger')
+            return render_template('edit_student.html', student=data, sid=sid)
+
+        # Duplicate checks (exclude current record)
+        dup_id = db.execute(
+            'SELECT id FROM students WHERE student_id=? AND id!=?',
+            (data['student_id'], sid)
+        ).fetchone()
+        if dup_id:
+            flash('Student ID already used by another record.', 'danger')
+            return render_template('edit_student.html', student=data, sid=sid)
+
+        dup_email = db.execute(
+            'SELECT id FROM students WHERE email=? AND id!=?',
+            (data['email'], sid)
+        ).fetchone()
+        if dup_email:
+            flash('Email already used by another record.', 'danger')
+            return render_template('edit_student.html', student=data, sid=sid)
+
+        db.execute('''
+            UPDATE students SET
+                student_id=?, full_name=?, father_name=?, mother_name=?,
+                gender=?, dob=?, email=?, phone=?, course=?, branch=?,
+                year_sem=?, address=?, city=?, state=?, pin_code=?
+            WHERE id=?
+        ''', (
+            data['student_id'], data['full_name'], data['father_name'],
+            data['mother_name'], data['gender'], data['dob'],
+            data['email'], data['phone'], data['course'], data['branch'],
+            data['year_sem'], data['address'], data['city'], data['state'],
+            data['pin_code'], sid
+        ))
+        db.commit()
+        flash(f'Student "{data["full_name"]}" updated successfully! ✅', 'success')
+        return redirect(url_for('view_students'))
+
+    return render_template('edit_student.html', student=student, sid=sid)
+
+
+# ── DELETE STUDENT ─────────────────────────
+@app.route('/delete_student/<int:sid>', methods=['POST'])
+@login_required
+def delete_student(sid):
+    db      = get_db()
+    student = db.execute('SELECT full_name FROM students WHERE id=?', (sid,)).fetchone()
+
+    if student:
+        db.execute('DELETE FROM students WHERE id=?', (sid,))
+        db.commit()
+        flash(f'Student "{student["full_name"]}" deleted successfully.', 'success')
+    else:
+        flash('Student not found.', 'danger')
+
+    return redirect(url_for('view_students'))
+
+
+# ─────────────────────────────────────────
+# Entry point
+# ─────────────────────────────────────────
+if __name__ == '__main__':
+    init_db()
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,4 @@
+Flask
+Werkzeug
+gunicorn
+python-dotenv

static/css/style.css

@@ -0,0 +1,621 @@
+/* ═══════════════════════════════════════════
+   StudentMS — style.css
+   Font: Plus Jakarta Sans + JetBrains Mono
+   Theme: Deep navy with amber accent
+═══════════════════════════════════════════ */
+
+/* ── VARIABLES ───────────────────────────── */
+:root {
+  --navy:        #0f172a;
+  --navy-2:      #1e293b;
+  --navy-3:      #334155;
+  --slate:       #64748b;
+  --border:      #e2e8f0;
+  --surface:     #f8fafc;
+  --white:       #ffffff;
+
+  --amber:       #f59e0b;
+  --amber-light: #fef3c7;
+  --amber-dark:  #d97706;
+
+  --blue:        #3b82f6;
+  --blue-light:  #dbeafe;
+  --green:       #10b981;
+  --green-light: #d1fae5;
+  --pink:        #ec4899;
+  --pink-light:  #fce7f3;
+  --orange:      #f97316;
+  --orange-light:#ffedd5;
+  --red:         #ef4444;
+  --red-light:   #fee2e2;
+
+  --radius:      12px;
+  --radius-sm:   8px;
+  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
+  --shadow:      0 4px 16px rgba(0,0,0,.10);
+  --shadow-md:   0 8px 32px rgba(0,0,0,.14);
+
+  --sidebar-w:   240px;
+  --navbar-h:    64px;
+  --font:        'Plus Jakarta Sans', sans-serif;
+  --mono:        'JetBrains Mono', monospace;
+}
+
+/* ── RESET ───────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: var(--font);
+  background: var(--surface);
+  color: var(--navy);
+  min-height: 100vh;
+  line-height: 1.6;
+  font-size: 15px;
+}
+
+a { color: var(--blue); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* ── NAVBAR ──────────────────────────────── */
+.navbar {
+  position: sticky; top: 0; z-index: 100;
+  height: var(--navbar-h);
+  background: var(--navy);
+  display: flex; align-items: center;
+  padding: 0 24px;
+  gap: 24px;
+  box-shadow: 0 2px 12px rgba(0,0,0,.25);
+}
+
+.nav-brand {
+  display: flex; align-items: center; gap: 10px;
+  color: var(--white);
+  font-size: 1.2rem;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  min-width: 160px;
+}
+.nav-logo {
+  width: 36px; height: 36px;
+  background: var(--amber);
+  border-radius: 8px;
+  display: grid; place-items: center;
+  color: var(--navy);
+  font-size: 1rem;
+}
+
+.nav-links {
+  display: flex; align-items: center;
+  list-style: none;
+  gap: 4px;
+  flex: 1;
+}
+.nav-links a {
+  display: flex; align-items: center; gap: 7px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  color: rgba(255,255,255,.70);
+  font-size: .875rem;
+  font-weight: 500;
+  transition: all .2s;
+}
+.nav-links a:hover { color: var(--white); background: rgba(255,255,255,.08); text-decoration: none; }
+.nav-links a.active { color: var(--amber); background: rgba(245,158,11,.12); }
+
+.nav-divider { flex: 1; }
+
+.btn-logout {
+  display: flex; align-items: center; gap: 7px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  color: rgba(255,255,255,.7) !important;
+  font-size: .875rem;
+  font-weight: 500;
+  transition: all .2s;
+}
+.btn-logout:hover {
+  color: var(--white) !important;
+  background: rgba(239,68,68,.18) !important;
+  text-decoration: none;
+}
+
+.nav-user {
+  display: flex; align-items: center; gap: 8px;
+  color: rgba(255,255,255,.65);
+  font-size: .85rem;
+  padding-left: 16px;
+  border-left: 1px solid rgba(255,255,255,.12);
+}
+
+.nav-toggle { display: none; background: none; border: none; color: var(--white); font-size: 1.2rem; cursor: pointer; }
+
+/* ── MAIN CONTENT ────────────────────────── */
+.main-content {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+/* ── PAGE HEADER ─────────────────────────── */
+.page-header {
+  display: flex; align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 28px;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.page-title {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: var(--navy);
+  line-height: 1.2;
+}
+.page-sub {
+  font-size: .9rem;
+  color: var(--slate);
+  margin-top: 4px;
+}
+
+/* ── CARDS ───────────────────────────────── */
+.card {
+  background: var(--white);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+.card-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border);
+  gap: 12px;
+}
+.card-header h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--navy);
+  display: flex; align-items: center; gap: 8px;
+}
+
+.mt-3 { margin-top: 16px; }
+.mt-4 { margin-top: 24px; }
+
+/* ── STAT CARDS ──────────────────────────── */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+.stat-card {
+  border-radius: var(--radius);
+  padding: 24px;
+  display: flex; align-items: center; gap: 18px;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid transparent;
+  transition: transform .2s, box-shadow .2s;
+}
+.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+
+.stat-icon {
+  width: 54px; height: 54px;
+  border-radius: 12px;
+  display: grid; place-items: center;
+  font-size: 1.4rem;
+  flex-shrink: 0;
+}
+.stat-number { display: block; font-size: 2rem; font-weight: 800; line-height: 1; }
+.stat-label  { display: block; font-size: .8rem; font-weight: 500; opacity: .75; margin-top: 4px; }
+
+.stat-blue   { background: var(--blue-light);   color: #1d4ed8; } .stat-blue   .stat-icon { background: #3b82f6; color: #fff; }
+.stat-green  { background: var(--green-light);  color: #065f46; } .stat-green  .stat-icon { background: #10b981; color: #fff; }
+.stat-pink   { background: var(--pink-light);   color: #9d174d; } .stat-pink   .stat-icon { background: #ec4899; color: #fff; }
+.stat-orange { background: var(--orange-light); color: #c2410c; } .stat-orange .stat-icon { background: #f97316; color: #fff; }
+
+/* ── QUICK LINKS ─────────────────────────── */
+.quick-links {
+  display: flex; flex-wrap: wrap; gap: 12px;
+}
+.qlink {
+  display: flex; align-items: center; gap: 10px;
+  padding: 14px 20px;
+  border-radius: var(--radius);
+  background: var(--white);
+  border: 1px solid var(--border);
+  color: var(--navy);
+  font-weight: 600;
+  font-size: .9rem;
+  transition: all .2s;
+  box-shadow: var(--shadow-sm);
+}
+.qlink i { font-size: 1.1rem; color: var(--blue); }
+.qlink:hover { background: var(--navy); color: var(--white); border-color: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
+.qlink:hover i { color: var(--amber); }
+.qlink-danger:hover { background: var(--red); border-color: var(--red); }
+.qlink-danger:hover i { color: var(--white); }
+
+/* ── TABLE ───────────────────────────────── */
+.table-wrap { overflow-x: auto; }
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .875rem;
+}
+.data-table thead tr {
+  background: var(--navy);
+  color: var(--white);
+}
+.data-table th {
+  padding: 13px 16px;
+  text-align: left;
+  font-weight: 600;
+  font-size: .8rem;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.data-table td {
+  padding: 13px 16px;
+  border-bottom: 1px solid var(--border);
+  color: var(--navy);
+  white-space: nowrap;
+}
+.data-table tbody tr:last-child td { border-bottom: none; }
+.data-table tbody tr:hover { background: #f1f5f9; }
+
+.fw-600 { font-weight: 600; }
+.text-small { font-size: .8rem; color: var(--slate); }
+
+/* ── BADGES ──────────────────────────────── */
+.badge {
+  display: inline-flex; align-items: center;
+  padding: 3px 10px;
+  border-radius: 99px;
+  font-size: .78rem;
+  font-weight: 600;
+}
+.badge-id    { background: var(--navy); color: var(--amber); font-family: var(--mono); }
+.badge-blue  { background: var(--blue-light);  color: #1d4ed8; }
+.badge-pink  { background: var(--pink-light);  color: #9d174d; }
+.badge-gray  { background: #f1f5f9; color: var(--slate); }
+
+/* ── ACTION BUTTONS ──────────────────────── */
+.actions { display: flex; gap: 6px; }
+
+.btn-icon {
+  width: 32px; height: 32px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  display: grid; place-items: center;
+  font-size: .85rem;
+  transition: all .2s;
+  text-decoration: none;
+}
+.btn-view   { background: var(--blue-light);  color: var(--blue); }
+.btn-edit   { background: var(--amber-light); color: var(--amber-dark); }
+.btn-delete { background: var(--red-light);   color: var(--red); }
+.btn-icon:hover { filter: brightness(.9); transform: scale(1.05); }
+
+/* ── BUTTONS ─────────────────────────────── */
+.btn-primary, .btn-outline, .btn-ghost, .btn-danger {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 10px 20px;
+  border-radius: var(--radius-sm);
+  font-size: .9rem;
+  font-weight: 600;
+  font-family: var(--font);
+  cursor: pointer;
+  transition: all .2s;
+  border: 2px solid transparent;
+  text-decoration: none;
+}
+.btn-primary { background: var(--amber); color: var(--navy); border-color: var(--amber); }
+.btn-primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: var(--white); text-decoration: none; transform: translateY(-1px); }
+
+.btn-outline { background: transparent; color: var(--navy); border-color: var(--border); }
+.btn-outline:hover { background: var(--navy); color: var(--white); border-color: var(--navy); text-decoration: none; }
+
+.btn-ghost { background: var(--surface); color: var(--slate); border-color: var(--border); }
+.btn-ghost:hover { background: var(--border); text-decoration: none; }
+
+.btn-danger { background: var(--red); color: var(--white); border-color: var(--red); }
+.btn-danger:hover { background: #dc2626; text-decoration: none; }
+
+.btn-full { width: 100%; justify-content: center; padding: 13px; font-size: 1rem; }
+
+/* ── EMPTY STATE ─────────────────────────── */
+.empty-state {
+  text-align: center;
+  padding: 56px 24px;
+  color: var(--slate);
+}
+.empty-state i { font-size: 3rem; opacity: .3; display: block; margin-bottom: 16px; }
+.empty-state p { font-size: 1rem; }
+
+/* ── SEARCH BAR ──────────────────────────── */
+.search-bar { padding: 16px 20px; }
+.search-row {
+  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
+}
+.search-input-wrap {
+  position: relative; flex: 1; min-width: 200px;
+}
+.search-icon {
+  position: absolute; left: 14px; top: 50%;
+  transform: translateY(-50%);
+  color: var(--slate); pointer-events: none;
+}
+.search-input-wrap input {
+  width: 100%;
+  padding: 10px 14px 10px 40px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: .9rem;
+  font-family: var(--font);
+  outline: none;
+  transition: border-color .2s;
+}
+.search-input-wrap input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
+.clear-search {
+  position: absolute; right: 12px; top: 50%;
+  transform: translateY(-50%);
+  background: none; border: none; color: var(--slate);
+  cursor: pointer; font-size: .9rem;
+}
+.search-col {
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-family: var(--font);
+  font-size: .9rem;
+  background: var(--white);
+  color: var(--navy);
+  outline: none;
+  cursor: pointer;
+}
+
+/* ── FLASH MESSAGES ──────────────────────── */
+.flash-container {
+  position: fixed; top: 72px; right: 20px;
+  z-index: 200;
+  display: flex; flex-direction: column; gap: 8px;
+  max-width: 380px;
+}
+.alert {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 14px 16px;
+  border-radius: var(--radius-sm);
+  font-size: .9rem;
+  font-weight: 500;
+  box-shadow: var(--shadow-md);
+  animation: slideIn .3s ease;
+}
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(40px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+.alert-success { background: var(--green-light); color: #065f46; border: 1px solid #a7f3d0; }
+.alert-danger  { background: var(--red-light);   color: #991b1b; border: 1px solid #fca5a5; }
+.alert-warning { background: var(--amber-light); color: #92400e; border: 1px solid #fcd34d; }
+.alert-info    { background: var(--blue-light);  color: #1e40af; border: 1px solid #93c5fd; }
+
+.alert i { margin-top: 2px; flex-shrink: 0; }
+.alert-close {
+  margin-left: auto; background: none; border: none;
+  font-size: 1.1rem; cursor: pointer; opacity: .6; padding: 0 0 0 8px;
+}
+.alert-close:hover { opacity: 1; }
+
+/* ── FORMS ───────────────────────────────── */
+.form-section {
+  padding: 24px;
+  border-bottom: 1px solid var(--border);
+}
+.form-section:last-of-type { border-bottom: none; }
+.form-section-title {
+  font-size: .85rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--slate);
+  margin-bottom: 20px;
+  display: flex; align-items: center; gap: 8px;
+}
+.form-section-title i { color: var(--amber); }
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 18px;
+}
+.form-group { display: flex; flex-direction: column; gap: 6px; }
+.form-group-full { grid-column: 1 / -1; }
+
+.form-group label {
+  font-size: .85rem;
+  font-weight: 600;
+  color: var(--navy-3);
+}
+.req { color: var(--red); margin-left: 2px; }
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  padding: 10px 14px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: .9rem;
+  font-family: var(--font);
+  color: var(--navy);
+  background: var(--white);
+  outline: none;
+  transition: all .2s;
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  border-color: var(--amber);
+  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
+}
+.form-group input.is-invalid,
+.form-group select.is-invalid,
+.form-group textarea.is-invalid {
+  border-color: var(--red);
+  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
+}
+.form-group textarea { resize: vertical; min-height: 80px; }
+.field-error { font-size: .8rem; color: var(--red); min-height: 18px; }
+
+.form-actions {
+  display: flex; gap: 12px; align-items: center;
+  padding: 20px 24px;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+
+/* ── LOGIN PAGE ──────────────────────────── */
+.login-wrapper {
+  min-height: 100vh;
+  display: flex;
+}
+.login-panel-left {
+  flex: 1;
+  background: var(--navy);
+  display: flex; flex-direction: column;
+  justify-content: center; align-items: flex-start;
+  padding: 60px;
+  gap: 40px;
+}
+.login-brand { color: var(--white); }
+.login-icon {
+  width: 64px; height: 64px;
+  background: var(--amber);
+  border-radius: 16px;
+  display: grid; place-items: center;
+  font-size: 1.8rem; color: var(--navy);
+  margin-bottom: 20px;
+}
+.login-brand h1 {
+  font-size: 2.5rem; font-weight: 800;
+  letter-spacing: -1px;
+  background: linear-gradient(135deg, #fff 0%, var(--amber) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.login-brand p { color: rgba(255,255,255,.6); margin-top: 6px; }
+.login-features { list-style: none; display: flex; flex-direction: column; gap: 14px; }
+.login-features li {
+  display: flex; align-items: center; gap: 12px;
+  color: rgba(255,255,255,.8); font-size: .95rem;
+}
+.login-features i { color: var(--amber); }
+
+.login-panel-right {
+  width: 480px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--surface);
+  padding: 40px;
+}
+.login-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--white);
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border);
+}
+.login-header { margin-bottom: 32px; text-align: center; }
+.login-header h2 { font-size: 1.75rem; font-weight: 800; color: var(--navy); }
+.login-header p  { color: var(--slate); font-size: .9rem; margin-top: 6px; }
+
+.login-card .form-group { margin-bottom: 20px; }
+.login-card .form-group label {
+  display: flex; align-items: center; gap: 7px;
+  font-size: .875rem; font-weight: 600; color: var(--navy-3);
+  margin-bottom: 8px;
+}
+.input-icon-wrap { position: relative; }
+.input-icon-wrap input { width: 100%; padding-right: 44px; }
+.toggle-pw {
+  position: absolute; right: 12px; top: 50%;
+  transform: translateY(-50%);
+  background: none; border: none;
+  color: var(--slate); cursor: pointer;
+}
+
+.login-hint {
+  text-align: center;
+  font-size: .82rem;
+  color: var(--slate);
+  margin-top: 20px;
+}
+.login-hint code {
+  font-family: var(--mono);
+  background: var(--surface);
+  padding: 2px 6px; border-radius: 4px;
+  font-size: .82rem;
+  color: var(--amber-dark);
+}
+
+/* ── MODAL ───────────────────────────────── */
+.modal-backdrop {
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,.45);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 500;
+  animation: fadeBg .2s ease;
+}
+@keyframes fadeBg { from { opacity: 0; } to { opacity: 1; } }
+
+.modal {
+  background: var(--white);
+  border-radius: 20px;
+  padding: 36px;
+  width: 90%; max-width: 400px;
+  text-align: center;
+  box-shadow: var(--shadow-md);
+  animation: popIn .25s ease;
+}
+@keyframes popIn {
+  from { opacity: 0; transform: scale(.9); }
+  to   { opacity: 1; transform: scale(1); }
+}
+.modal-icon {
+  width: 60px; height: 60px;
+  border-radius: 50%;
+  display: grid; place-items: center;
+  font-size: 1.5rem;
+  margin: 0 auto 16px;
+}
+.modal-icon.danger { background: var(--red-light); color: var(--red); }
+.modal h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
+.modal p  { color: var(--slate); font-size: .9rem; line-height: 1.6; }
+.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 24px; }
+
+/* ── RESPONSIVE ──────────────────────────── */
+@media (max-width: 900px) {
+  .login-panel-left { display: none; }
+  .login-panel-right { width: 100%; }
+}
+@media (max-width: 768px) {
+  .nav-links { display: none; flex-direction: column; position: absolute; top: var(--navbar-h); left: 0; right: 0; background: var(--navy); padding: 12px; gap: 4px; }
+  .nav-links.open { display: flex; }
+  .nav-toggle { display: block; }
+  .navbar { position: relative; flex-wrap: wrap; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .form-grid { grid-template-columns: 1fr; }
+  .main-content { padding: 20px 16px; }
+  .page-header { flex-direction: column; align-items: flex-start; }
+  .flash-container { right: 10px; left: 10px; max-width: none; }
+  .quick-links { flex-direction: column; }
+}
+@media (max-width: 480px) {
+  .stats-grid { grid-template-columns: 1fr; }
+  .search-row { flex-direction: column; align-items: stretch; }
+  .login-card { padding: 28px 20px; }
+}

static/js/script.js

@@ -0,0 +1,238 @@
+/**
+ * StudentMS — script.js
+ * Client-side validation, modals, and UI helpers.
+ */
+
+/* ═══════════════════════════════════════════
+   1. AUTO-DISMISS FLASH MESSAGES
+═══════════════════════════════════════════ */
+document.addEventListener('DOMContentLoaded', () => {
+  const alerts = document.querySelectorAll('.alert');
+  alerts.forEach(alert => {
+    setTimeout(() => {
+      alert.style.transition = 'opacity .4s, transform .4s';
+      alert.style.opacity = '0';
+      alert.style.transform = 'translateX(40px)';
+      setTimeout(() => alert.remove(), 420);
+    }, 4500);
+  });
+});
+
+/* ═══════════════════════════════════════════
+   2. MOBILE NAVBAR TOGGLE
+═══════════════════════════════════════════ */
+const navToggle = document.getElementById('navToggle');
+const navLinks  = document.getElementById('navLinks');
+if (navToggle && navLinks) {
+  navToggle.addEventListener('click', () => {
+    navLinks.classList.toggle('open');
+  });
+  // Close when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!navToggle.contains(e.target) && !navLinks.contains(e.target)) {
+      navLinks.classList.remove('open');
+    }
+  });
+}
+
+/* ═══════════════════════════════════════════
+   3. PASSWORD TOGGLE
+═══════════════════════════════════════════ */
+function togglePassword(inputId, btn) {
+  const input = document.getElementById(inputId);
+  const icon  = btn.querySelector('i');
+  if (input.type === 'password') {
+    input.type = 'text';
+    icon.classList.replace('fa-eye', 'fa-eye-slash');
+  } else {
+    input.type = 'password';
+    icon.classList.replace('fa-eye-slash', 'fa-eye');
+  }
+}
+
+/* ═══════════════════════════════════════════
+   4. LOGIN FORM VALIDATION
+═══════════════════════════════════════════ */
+const loginForm = document.getElementById('loginForm');
+if (loginForm) {
+  loginForm.addEventListener('submit', (e) => {
+    let valid = true;
+
+    const username = document.getElementById('username');
+    const password = document.getElementById('password');
+    const errUser  = document.getElementById('err-username');
+    const errPass  = document.getElementById('err-password');
+
+    // Reset
+    [errUser, errPass].forEach(el => { if (el) el.textContent = ''; });
+    [username, password].forEach(el => el.classList.remove('is-invalid'));
+
+    if (!username.value.trim()) {
+      errUser.textContent = 'Username is required.';
+      username.classList.add('is-invalid');
+      valid = false;
+    }
+    if (!password.value.trim()) {
+      errPass.textContent = 'Password is required.';
+      password.classList.add('is-invalid');
+      valid = false;
+    }
+
+    if (!valid) e.preventDefault();
+  });
+}
+
+/* ═══════════════════════════════════════════
+   5. STUDENT FORM VALIDATION (add & edit)
+═══════════════════════════════════════════ */
+const studentForm = document.getElementById('studentForm');
+if (studentForm) {
+  studentForm.addEventListener('submit', (e) => {
+    const errors = validateStudentForm();
+    if (errors > 0) e.preventDefault();
+  });
+}
+
+function validateStudentForm() {
+  let errorCount = 0;
+
+  // Helper: show error
+  function showErr(fieldName, msg) {
+    const errEl = document.getElementById(`err-${fieldName}`);
+    const input = studentForm.querySelector(`[name="${fieldName}"]`);
+    if (errEl) errEl.textContent = msg;
+    if (input) input.classList.add('is-invalid');
+    errorCount++;
+  }
+
+  // Helper: clear error
+  function clearErr(fieldName) {
+    const errEl = document.getElementById(`err-${fieldName}`);
+    const input = studentForm.querySelector(`[name="${fieldName}"]`);
+    if (errEl) errEl.textContent = '';
+    if (input) input.classList.remove('is-invalid');
+  }
+
+  // Fields to validate
+  const required = [
+    'student_id', 'full_name', 'father_name', 'mother_name',
+    'gender', 'dob', 'email', 'phone',
+    'course', 'branch', 'year_sem',
+    'address', 'city', 'state', 'pin_code'
+  ];
+
+  required.forEach(name => clearErr(name));
+
+  // Required check
+  required.forEach(name => {
+    const el = studentForm.querySelector(`[name="${name}"]`);
+    if (!el) return;
+    if (!el.value.trim()) {
+      const label = name.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+      showErr(name, `${label} is required.`);
+    }
+  });
+
+  // Email format
+  const emailEl = studentForm.querySelector('[name="email"]');
+  if (emailEl && emailEl.value.trim()) {
+    const re = /^[\w.+-]+@[\w-]+\.[a-zA-Z]{2,}$/;
+    if (!re.test(emailEl.value.trim())) {
+      showErr('email', 'Enter a valid email address.');
+    }
+  }
+
+  // Phone — 10 digits only
+  const phoneEl = studentForm.querySelector('[name="phone"]');
+  if (phoneEl && phoneEl.value.trim()) {
+    if (!/^\d{10}$/.test(phoneEl.value.trim())) {
+      showErr('phone', 'Phone must be exactly 10 digits.');
+    }
+  }
+
+  // Pin code — 6 digits only
+  const pinEl = studentForm.querySelector('[name="pin_code"]');
+  if (pinEl && pinEl.value.trim()) {
+    if (!/^\d{6}$/.test(pinEl.value.trim())) {
+      showErr('pin_code', 'Pin Code must be exactly 6 digits.');
+    }
+  }
+
+  // Date of birth — must not be in the future
+  const dobEl = studentForm.querySelector('[name="dob"]');
+  if (dobEl && dobEl.value) {
+    const dob = new Date(dobEl.value);
+    if (dob >= new Date()) {
+      showErr('dob', 'Date of Birth cannot be in the future.');
+    }
+  }
+
+  return errorCount;
+}
+
+// Live phone & pin – allow only digits
+document.addEventListener('DOMContentLoaded', () => {
+  const phoneInput = document.querySelector('[name="phone"]');
+  const pinInput   = document.querySelector('[name="pin_code"]');
+
+  if (phoneInput) {
+    phoneInput.addEventListener('input', () => {
+      phoneInput.value = phoneInput.value.replace(/\D/g, '').slice(0, 10);
+    });
+  }
+  if (pinInput) {
+    pinInput.addEventListener('input', () => {
+      pinInput.value = pinInput.value.replace(/\D/g, '').slice(0, 6);
+    });
+  }
+});
+
+/* ═══════════════════════════════════════════
+   6. DELETE MODAL
+═══════════════════════════════════════════ */
+let pendingDeleteId = null;
+
+function confirmDelete(studentId, studentName) {
+  pendingDeleteId = studentId;
+  const modal = document.getElementById('deleteModal');
+  const nameEl = document.getElementById('deleteStudentName');
+  if (nameEl) nameEl.textContent = studentName;
+  if (modal)  modal.style.display = 'flex';
+}
+
+function closeModal() {
+  const modal = document.getElementById('deleteModal');
+  if (modal) modal.style.display = 'none';
+  pendingDeleteId = null;
+}
+
+function submitDelete() {
+  if (!pendingDeleteId) return;
+  const form = document.getElementById('deleteForm');
+  if (form) {
+    form.action = `/delete_student/${pendingDeleteId}`;
+    form.submit();
+  }
+}
+
+// Close modal when clicking backdrop
+document.addEventListener('click', (e) => {
+  const modal = document.getElementById('deleteModal');
+  if (modal && e.target === modal) closeModal();
+});
+
+// Close modal on Escape key
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeModal();
+});
+
+/* ═══════════════════════════════════════════
+   7. SEARCH – CLEAR
+═══════════════════════════════════════════ */
+function clearSearch() {
+  const input = document.getElementById('searchInput');
+  if (input) {
+    input.value = '';
+    document.getElementById('searchForm').submit();
+  }
+}

templates/add_student.html

@@ -0,0 +1,182 @@
+{% extends 'base.html' %}
+{% block title %}Add Student — StudentMS{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <div>
+    <h2 class="page-title">Add New Student</h2>
+    <p class="page-sub">Fill in the form below to register a student</p>
+  </div>
+  <a href="{{ url_for('view_students') }}" class="btn-outline">
+    <i class="fas fa-arrow-left"></i> Back
+  </a>
+</div>
+
+<div class="card">
+  <form method="POST" action="{{ url_for('add_student') }}" id="studentForm" novalidate>
+
+    <!-- ── SECTION 1: Identity ── -->
+    <div class="form-section">
+      <div class="form-section-title"><i class="fas fa-id-card"></i> Student Identity</div>
+      <div class="form-grid">
+
+        <div class="form-group">
+          <label>Student ID <span class="req">*</span></label>
+          <input type="text" name="student_id" value="{{ form.get('student_id','') }}"
+                 placeholder="e.g. STU2024001" />
+          <span class="field-error" id="err-student_id"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Full Name <span class="req">*</span></label>
+          <input type="text" name="full_name" value="{{ form.get('full_name','') }}"
+                 placeholder="Full legal name" />
+          <span class="field-error" id="err-full_name"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Father Name <span class="req">*</span></label>
+          <input type="text" name="father_name" value="{{ form.get('father_name','') }}"
+                 placeholder="Father's full name" />
+          <span class="field-error" id="err-father_name"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Mother Name <span class="req">*</span></label>
+          <input type="text" name="mother_name" value="{{ form.get('mother_name','') }}"
+                 placeholder="Mother's full name" />
+          <span class="field-error" id="err-mother_name"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Gender <span class="req">*</span></label>
+          <select name="gender">
+            <option value="" disabled {% if not form.get('gender') %}selected{% endif %}>Select gender</option>
+            {% for g in ['Male','Female','Other'] %}
+              <option value="{{ g }}" {% if form.get('gender')==g %}selected{% endif %}>{{ g }}</option>
+            {% endfor %}
+          </select>
+          <span class="field-error" id="err-gender"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Date of Birth <span class="req">*</span></label>
+          <input type="date" name="dob" value="{{ form.get('dob','') }}" />
+          <span class="field-error" id="err-dob"></span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── SECTION 2: Contact ── -->
+    <div class="form-section">
+      <div class="form-section-title"><i class="fas fa-envelope"></i> Contact Details</div>
+      <div class="form-grid">
+
+        <div class="form-group">
+          <label>Email <span class="req">*</span></label>
+          <input type="email" name="email" value="{{ form.get('email','') }}"
+                 placeholder="student@example.com" />
+          <span class="field-error" id="err-email"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Phone Number <span class="req">*</span></label>
+          <input type="tel" name="phone" value="{{ form.get('phone','') }}"
+                 placeholder="10-digit number" maxlength="10" />
+          <span class="field-error" id="err-phone"></span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── SECTION 3: Academic ── -->
+    <div class="form-section">
+      <div class="form-section-title"><i class="fas fa-book-open"></i> Academic Details</div>
+      <div class="form-grid">
+
+        <div class="form-group">
+          <label>Course <span class="req">*</span></label>
+          <select name="course">
+            <option value="" disabled {% if not form.get('course') %}selected{% endif %}>Select course</option>
+            {% for c in ['B.Tech','M.Tech','BCA','MCA','B.Sc','M.Sc','B.Com','M.Com','BBA','MBA','BA','MA','B.Pharm','Diploma'] %}
+              <option value="{{ c }}" {% if form.get('course')==c %}selected{% endif %}>{{ c }}</option>
+            {% endfor %}
+          </select>
+          <span class="field-error" id="err-course"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Branch <span class="req">*</span></label>
+          <input type="text" name="branch" value="{{ form.get('branch','') }}"
+                 placeholder="e.g. Computer Science" />
+          <span class="field-error" id="err-branch"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Year / Semester <span class="req">*</span></label>
+          <select name="year_sem">
+            <option value="" disabled {% if not form.get('year_sem') %}selected{% endif %}>Select year/semester</option>
+            {% for y in ['1st Year / 1st Sem','1st Year / 2nd Sem','2nd Year / 3rd Sem','2nd Year / 4th Sem','3rd Year / 5th Sem','3rd Year / 6th Sem','4th Year / 7th Sem','4th Year / 8th Sem'] %}
+              <option value="{{ y }}" {% if form.get('year_sem')==y %}selected{% endif %}>{{ y }}</option>
+            {% endfor %}
+          </select>
+          <span class="field-error" id="err-year_sem"></span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── SECTION 4: Address ── -->
+    <div class="form-section">
+      <div class="form-section-title"><i class="fas fa-location-dot"></i> Address</div>
+      <div class="form-grid">
+
+        <div class="form-group form-group-full">
+          <label>Address <span class="req">*</span></label>
+          <textarea name="address" rows="2" placeholder="Street / Locality">{{ form.get('address','') }}</textarea>
+          <span class="field-error" id="err-address"></span>
+        </div>
+
+        <div class="form-group">
+          <label>City <span class="req">*</span></label>
+          <input type="text" name="city" value="{{ form.get('city','') }}"
+                 placeholder="City name" />
+          <span class="field-error" id="err-city"></span>
+        </div>
+
+        <div class="form-group">
+          <label>State <span class="req">*</span></label>
+          <select name="state">
+            <option value="" disabled {% if not form.get('state') %}selected{% endif %}>Select state</option>
+            {% for st in ['Andhra Pradesh','Arunachal Pradesh','Assam','Bihar','Chhattisgarh','Goa','Gujarat','Haryana','Himachal Pradesh','Jharkhand','Karnataka','Kerala','Madhya Pradesh','Maharashtra','Manipur','Meghalaya','Mizoram','Nagaland','Odisha','Punjab','Rajasthan','Sikkim','Tamil Nadu','Telangana','Tripura','Uttar Pradesh','Uttarakhand','West Bengal','Delhi','Jammu & Kashmir','Ladakh','Chandigarh','Puducherry'] %}
+              <option value="{{ st }}" {% if form.get('state')==st %}selected{% endif %}>{{ st }}</option>
+            {% endfor %}
+          </select>
+          <span class="field-error" id="err-state"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Pin Code <span class="req">*</span></label>
+          <input type="text" name="pin_code" value="{{ form.get('pin_code','') }}"
+                 placeholder="6-digit pin" maxlength="6" />
+          <span class="field-error" id="err-pin_code"></span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── BUTTONS ── -->
+    <div class="form-actions">
+      <button type="submit" class="btn-primary">
+        <i class="fas fa-save"></i> Save Student
+      </button>
+      <button type="reset" class="btn-ghost">
+        <i class="fas fa-rotate-left"></i> Reset
+      </button>
+      <a href="{{ url_for('view_students') }}" class="btn-outline">Cancel</a>
+    </div>
+
+  </form>
+</div>
+{% endblock %}

templates/base.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{% block title %}Student Data Entry System{% endblock %}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
+</head>
+<body>
+
+{% if session.user %}
+<!-- ── NAVBAR ── -->
+<nav class="navbar">
+  <div class="nav-brand">
+    <span class="nav-logo"><i class="fas fa-graduation-cap"></i></span>
+    <span class="nav-title">StudentMS</span>
+  </div>
+
+  <button class="nav-toggle" id="navToggle" aria-label="Menu">
+    <i class="fas fa-bars"></i>
+  </button>
+
+  <ul class="nav-links" id="navLinks">
+    <li><a href="{{ url_for('dashboard') }}"    class="{% if request.endpoint=='dashboard'    %}active{% endif %}"><i class="fas fa-chart-pie"></i> Dashboard</a></li>
+    <li><a href="{{ url_for('add_student') }}"  class="{% if request.endpoint=='add_student'  %}active{% endif %}"><i class="fas fa-user-plus"></i> Add Student</a></li>
+    <li><a href="{{ url_for('view_students') }}" class="{% if request.endpoint=='view_students' %}active{% endif %}"><i class="fas fa-table"></i> All Students</a></li>
+    <li class="nav-divider"></li>
+    <li>
+      <a href="{{ url_for('logout') }}" class="btn-logout">
+        <i class="fas fa-sign-out-alt"></i> Logout
+      </a>
+    </li>
+  </ul>
+
+  <div class="nav-user">
+    <i class="fas fa-user-shield"></i>
+    <span>{{ session.user }}</span>
+  </div>
+</nav>
+{% endif %}
+
+<!-- ── FLASH MESSAGES ── -->
+<div class="flash-container">
+  {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+      {% for category, message in messages %}
+        <div class="alert alert-{{ category }}">
+          <i class="fas {% if category=='success' %}fa-circle-check{% elif category=='danger' %}fa-circle-exclamation{% elif category=='warning' %}fa-triangle-exclamation{% else %}fa-circle-info{% endif %}"></i>
+          {{ message }}
+          <button class="alert-close" onclick="this.parentElement.remove()">×</button>
+        </div>
+      {% endfor %}
+    {% endif %}
+  {% endwith %}
+</div>
+
+<!-- ── PAGE CONTENT ── -->
+<main class="{% if session.user %}main-content{% endif %}">
+  {% block content %}{% endblock %}
+</main>
+
+<script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>

templates/dashboard.html

@@ -0,0 +1,113 @@
+{% extends 'base.html' %}
+{% block title %}Dashboard — StudentMS{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <div>
+    <h2 class="page-title">Dashboard</h2>
+    <p class="page-sub">Overview of all student records</p>
+  </div>
+  <a href="{{ url_for('add_student') }}" class="btn-primary">
+    <i class="fas fa-plus"></i> Add New Student
+  </a>
+</div>
+
+<!-- ── STAT CARDS ── -->
+<div class="stats-grid">
+  <div class="stat-card stat-blue">
+    <div class="stat-icon"><i class="fas fa-users"></i></div>
+    <div class="stat-body">
+      <span class="stat-number">{{ stats.total }}</span>
+      <span class="stat-label">Total Students</span>
+    </div>
+  </div>
+
+  <div class="stat-card stat-green">
+    <div class="stat-icon"><i class="fas fa-mars"></i></div>
+    <div class="stat-body">
+      <span class="stat-number">{{ stats.male }}</span>
+      <span class="stat-label">Male Students</span>
+    </div>
+  </div>
+
+  <div class="stat-card stat-pink">
+    <div class="stat-icon"><i class="fas fa-venus"></i></div>
+    <div class="stat-body">
+      <span class="stat-number">{{ stats.female }}</span>
+      <span class="stat-label">Female Students</span>
+    </div>
+  </div>
+
+  <div class="stat-card stat-orange">
+    <div class="stat-icon"><i class="fas fa-book-open"></i></div>
+    <div class="stat-body">
+      <span class="stat-number">{{ stats.courses }}</span>
+      <span class="stat-label">Courses Enrolled</span>
+    </div>
+  </div>
+</div>
+
+<!-- ── RECENT STUDENTS ── -->
+<div class="card mt-4">
+  <div class="card-header">
+    <h3><i class="fas fa-clock-rotate-left"></i> Recently Added Students</h3>
+    <a href="{{ url_for('view_students') }}" class="btn-outline">View All</a>
+  </div>
+
+  {% if recent %}
+  <div class="table-wrap">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Student ID</th>
+          <th>Full Name</th>
+          <th>Course</th>
+          <th>Branch</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for s in recent %}
+        <tr>
+          <td><span class="badge badge-id">{{ s.student_id }}</span></td>
+          <td>{{ s.full_name }}</td>
+          <td>{{ s.course }}</td>
+          <td>{{ s.branch }}</td>
+          <td class="actions">
+            <a href="{{ url_for('view_students') }}" class="btn-icon btn-view" title="View">
+              <i class="fas fa-eye"></i>
+            </a>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  {% else %}
+  <div class="empty-state">
+    <i class="fas fa-user-graduate"></i>
+    <p>No students yet. <a href="{{ url_for('add_student') }}">Add the first one →</a></p>
+  </div>
+  {% endif %}
+</div>
+
+<!-- ── QUICK LINKS ── -->
+<div class="quick-links mt-4">
+  <a href="{{ url_for('add_student') }}" class="qlink">
+    <i class="fas fa-user-plus"></i>
+    <span>Add Student</span>
+  </a>
+  <a href="{{ url_for('view_students') }}" class="qlink">
+    <i class="fas fa-table-list"></i>
+    <span>View Records</span>
+  </a>
+  <a href="{{ url_for('view_students') }}?q=" class="qlink">
+    <i class="fas fa-magnifying-glass"></i>
+    <span>Search</span>
+  </a>
+  <a href="{{ url_for('logout') }}" class="qlink qlink-danger">
+    <i class="fas fa-power-off"></i>
+    <span>Logout</span>
+  </a>
+</div>
+{% endblock %}

templates/edit_student.html

@@ -0,0 +1,166 @@
+{% extends 'base.html' %}
+{% block title %}Edit Student — StudentMS{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <div>
+    <h2 class="page-title">Edit Student</h2>
+    <p class="page-sub">Update the student record below</p>
+  </div>
+  <a href="{{ url_for('view_students') }}" class="btn-outline">
+    <i class="fas fa-arrow-left"></i> Back
+  </a>
+</div>
+
+<div class="card">
+  <form method="POST" action="{{ url_for('edit_student', sid=sid) }}" id="studentForm" novalidate>
+
+    <!-- ── SECTION 1: Identity ── -->
+    <div class="form-section">
+      <div class="form-section-title"><i class="fas fa-id-card"></i> Student Identity</div>
+      <div class="form-grid">
+
+        <div class="form-group">
+          <label>Student ID <span class="req">*</span></label>
+          <input type="text" name="student_id" value="{{ student.student_id if student.student_id is defined else student['student_id'] }}" placeholder="e.g. STU2024001" />
+          <span class="field-error" id="err-student_id"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Full Name <span class="req">*</span></label>
+          <input type="text" name="full_name" value="{{ student['full_name'] }}" placeholder="Full legal name" />
+          <span class="field-error" id="err-full_name"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Father Name <span class="req">*</span></label>
+          <input type="text" name="father_name" value="{{ student['father_name'] }}" placeholder="Father's full name" />
+          <span class="field-error" id="err-father_name"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Mother Name <span class="req">*</span></label>
+          <input type="text" name="mother_name" value="{{ student['mother_name'] }}" placeholder="Mother's full name" />
+          <span class="field-error" id="err-mother_name"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Gender <span class="req">*</span></label>
+          <select name="gender">
+            {% for g in ['Male','Female','Other'] %}
+              <option value="{{ g }}" {% if student['gender']==g %}selected{% endif %}>{{ g }}</option>
+            {% endfor %}
+          </select>
+          <span class="field-error" id="err-gender"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Date of Birth <span class="req">*</span></label>
+          <input type="date" name="dob" value="{{ student['dob'] }}" />
+          <span class="field-error" id="err-dob"></span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── SECTION 2: Contact ── -->
+    <div class="form-section">
+      <div class="form-section-title"><i class="fas fa-envelope"></i> Contact Details</div>
+      <div class="form-grid">
+
+        <div class="form-group">
+          <label>Email <span class="req">*</span></label>
+          <input type="email" name="email" value="{{ student['email'] }}" placeholder="student@example.com" />
+          <span class="field-error" id="err-email"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Phone Number <span class="req">*</span></label>
+          <input type="tel" name="phone" value="{{ student['phone'] }}" placeholder="10-digit number" maxlength="10" />
+          <span class="field-error" id="err-phone"></span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── SECTION 3: Academic ── -->
+    <div class="form-section">
+      <div class="form-section-title"><i class="fas fa-book-open"></i> Academic Details</div>
+      <div class="form-grid">
+
+        <div class="form-group">
+          <label>Course <span class="req">*</span></label>
+          <select name="course">
+            {% for c in ['B.Tech','M.Tech','BCA','MCA','B.Sc','M.Sc','B.Com','M.Com','BBA','MBA','BA','MA','B.Pharm','Diploma'] %}
+              <option value="{{ c }}" {% if student['course']==c %}selected{% endif %}>{{ c }}</option>
+            {% endfor %}
+          </select>
+          <span class="field-error" id="err-course"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Branch <span class="req">*</span></label>
+          <input type="text" name="branch" value="{{ student['branch'] }}" placeholder="e.g. Computer Science" />
+          <span class="field-error" id="err-branch"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Year / Semester <span class="req">*</span></label>
+          <select name="year_sem">
+            {% for y in ['1st Year / 1st Sem','1st Year / 2nd Sem','2nd Year / 3rd Sem','2nd Year / 4th Sem','3rd Year / 5th Sem','3rd Year / 6th Sem','4th Year / 7th Sem','4th Year / 8th Sem'] %}
+              <option value="{{ y }}" {% if student['year_sem']==y %}selected{% endif %}>{{ y }}</option>
+            {% endfor %}
+          </select>
+          <span class="field-error" id="err-year_sem"></span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── SECTION 4: Address ── -->
+    <div class="form-section">
+      <div class="form-section-title"><i class="fas fa-location-dot"></i> Address</div>
+      <div class="form-grid">
+
+        <div class="form-group form-group-full">
+          <label>Address <span class="req">*</span></label>
+          <textarea name="address" rows="2" placeholder="Street / Locality">{{ student['address'] }}</textarea>
+          <span class="field-error" id="err-address"></span>
+        </div>
+
+        <div class="form-group">
+          <label>City <span class="req">*</span></label>
+          <input type="text" name="city" value="{{ student['city'] }}" placeholder="City name" />
+          <span class="field-error" id="err-city"></span>
+        </div>
+
+        <div class="form-group">
+          <label>State <span class="req">*</span></label>
+          <select name="state">
+            {% for st in ['Andhra Pradesh','Arunachal Pradesh','Assam','Bihar','Chhattisgarh','Goa','Gujarat','Haryana','Himachal Pradesh','Jharkhand','Karnataka','Kerala','Madhya Pradesh','Maharashtra','Manipur','Meghalaya','Mizoram','Nagaland','Odisha','Punjab','Rajasthan','Sikkim','Tamil Nadu','Telangana','Tripura','Uttar Pradesh','Uttarakhand','West Bengal','Delhi','Jammu & Kashmir','Ladakh','Chandigarh','Puducherry'] %}
+              <option value="{{ st }}" {% if student['state']==st %}selected{% endif %}>{{ st }}</option>
+            {% endfor %}
+          </select>
+          <span class="field-error" id="err-state"></span>
+        </div>
+
+        <div class="form-group">
+          <label>Pin Code <span class="req">*</span></label>
+          <input type="text" name="pin_code" value="{{ student['pin_code'] }}" placeholder="6-digit pin" maxlength="6" />
+          <span class="field-error" id="err-pin_code"></span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── BUTTONS ── -->
+    <div class="form-actions">
+      <button type="submit" class="btn-primary">
+        <i class="fas fa-floppy-disk"></i> Update Student
+      </button>
+      <a href="{{ url_for('view_students') }}" class="btn-outline">Cancel</a>
+    </div>
+
+  </form>
+</div>
+{% endblock %}

templates/login.html

@@ -0,0 +1,60 @@
+{% extends 'base.html' %}
+{% block title %}Login — StudentMS{% endblock %}
+
+{% block content %}
+<div class="login-wrapper">
+
+  <!-- Left panel – branding -->
+  <div class="login-panel-left">
+    <div class="login-brand">
+      <div class="login-icon"><i class="fas fa-graduation-cap"></i></div>
+      <h1>StudentMS</h1>
+      <p>Student Management System</p>
+    </div>
+    <ul class="login-features">
+      <li><i class="fas fa-check-circle"></i> Manage student records easily</li>
+      <li><i class="fas fa-check-circle"></i> Search, edit &amp; delete entries</li>
+      <li><i class="fas fa-check-circle"></i> Real-time dashboard stats</li>
+      <li><i class="fas fa-check-circle"></i> Secure admin access</li>
+    </ul>
+  </div>
+
+  <!-- Right panel – login form -->
+  <div class="login-panel-right">
+    <div class="login-card">
+      <div class="login-header">
+        <h2>Welcome Back</h2>
+        <p>Sign in to your admin account</p>
+      </div>
+
+      <form method="POST" action="{{ url_for('login') }}" novalidate id="loginForm">
+        <div class="form-group">
+          <label for="username"><i class="fas fa-user"></i> Username</label>
+          <input type="text" id="username" name="username" placeholder="Enter your username"
+                 autocomplete="username" required />
+          <span class="field-error" id="err-username"></span>
+        </div>
+
+        <div class="form-group">
+          <label for="password"><i class="fas fa-lock"></i> Password</label>
+          <div class="input-icon-wrap">
+            <input type="password" id="password" name="password" placeholder="Enter your password"
+                   autocomplete="current-password" required />
+            <button type="button" class="toggle-pw" onclick="togglePassword('password', this)">
+              <i class="fas fa-eye"></i>
+            </button>
+          </div>
+          <span class="field-error" id="err-password"></span>
+        </div>
+
+        <button type="submit" class="btn-primary btn-full">
+          <i class="fas fa-sign-in-alt"></i> Sign In
+        </button>
+
+        <p class="login-hint">Default credentials: <code>admin / admin123</code></p>
+      </form>
+    </div>
+  </div>
+
+</div>
+{% endblock %}

templates/view_students.html

@@ -0,0 +1,129 @@
+{% extends 'base.html' %}
+{% block title %}View Students — StudentMS{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <div>
+    <h2 class="page-title">All Students</h2>
+    <p class="page-sub">
+      {% if students %}{{ students|length }} record(s) found{% else %}No records{% endif %}
+    </p>
+  </div>
+  <a href="{{ url_for('add_student') }}" class="btn-primary">
+    <i class="fas fa-plus"></i> Add Student
+  </a>
+</div>
+
+<!-- ── SEARCH BAR ── -->
+<div class="search-bar card">
+  <form method="GET" action="{{ url_for('view_students') }}" id="searchForm">
+    <div class="search-row">
+      <div class="search-input-wrap">
+        <i class="fas fa-magnifying-glass search-icon"></i>
+        <input type="text" name="q" value="{{ q }}" placeholder="Search students…" autocomplete="off" id="searchInput" />
+        {% if q %}<button type="button" class="clear-search" onclick="clearSearch()"><i class="fas fa-xmark"></i></button>{% endif %}
+      </div>
+
+      <select name="col" class="search-col">
+        <option value="full_name"  {% if col=='full_name'  %}selected{% endif %}>by Name</option>
+        <option value="student_id" {% if col=='student_id' %}selected{% endif %}>by ID</option>
+        <option value="course"     {% if col=='course'     %}selected{% endif %}>by Course</option>
+        <option value="phone"      {% if col=='phone'      %}selected{% endif %}>by Phone</option>
+      </select>
+
+      <button type="submit" class="btn-primary">
+        <i class="fas fa-search"></i> Search
+      </button>
+      {% if q %}
+      <a href="{{ url_for('view_students') }}" class="btn-outline">Clear</a>
+      {% endif %}
+    </div>
+  </form>
+</div>
+
+<!-- ── TABLE ── -->
+<div class="card mt-3">
+  {% if students %}
+  <div class="table-wrap">
+    <table class="data-table" id="studentsTable">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Student ID</th>
+          <th>Full Name</th>
+          <th>Gender</th>
+          <th>Course</th>
+          <th>Branch</th>
+          <th>Year/Sem</th>
+          <th>Phone</th>
+          <th>Email</th>
+          <th>City</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for s in students %}
+        <tr>
+          <td>{{ loop.index }}</td>
+          <td><span class="badge badge-id">{{ s.student_id }}</span></td>
+          <td class="fw-600">{{ s.full_name }}</td>
+          <td>
+            <span class="badge {% if s.gender=='Male' %}badge-blue{% elif s.gender=='Female' %}badge-pink{% else %}badge-gray{% endif %}">
+              {{ s.gender }}
+            </span>
+          </td>
+          <td>{{ s.course }}</td>
+          <td>{{ s.branch }}</td>
+          <td>{{ s.year_sem }}</td>
+          <td>{{ s.phone }}</td>
+          <td class="text-small">{{ s.email }}</td>
+          <td>{{ s.city }}</td>
+          <td class="actions">
+            <a href="{{ url_for('edit_student', sid=s.id) }}" class="btn-icon btn-edit" title="Edit">
+              <i class="fas fa-pen"></i>
+            </a>
+            <!-- Delete triggers a modal -->
+            <button type="button"
+                    class="btn-icon btn-delete"
+                    title="Delete"
+                    onclick="confirmDelete({{ s.id }}, '{{ s.full_name }}')">
+              <i class="fas fa-trash"></i>
+            </button>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- hidden delete form -->
+  <form id="deleteForm" method="POST" action="" style="display:none;">
+  </form>
+
+  {% else %}
+  <div class="empty-state">
+    <i class="fas fa-users-slash"></i>
+    <p>
+      {% if q %}No students matching "<strong>{{ q }}</strong>".
+      {% else %}No students added yet. <a href="{{ url_for('add_student') }}">Add one →</a>{% endif %}
+    </p>
+  </div>
+  {% endif %}
+</div>
+
+<!-- ── DELETE CONFIRM MODAL ── -->
+<div class="modal-backdrop" id="deleteModal" style="display:none;">
+  <div class="modal">
+    <div class="modal-icon danger"><i class="fas fa-triangle-exclamation"></i></div>
+    <h3>Confirm Delete</h3>
+    <p>Are you sure you want to delete<br /><strong id="deleteStudentName"></strong>?<br />This action cannot be undone.</p>
+    <div class="modal-actions">
+      <button type="button" class="btn-ghost" onclick="closeModal()">Cancel</button>
+      <button type="button" class="btn-danger" onclick="submitDelete()">
+        <i class="fas fa-trash"></i> Delete
+      </button>
+    </div>
+  </div>
+</div>
+
+{% endblock %}