🔐 Biometric Attendance System

A modern, beautiful web-based attendance management system integrated with IoT biometric devices. Built with Flask, Bootstrap 5, and Chart.js featuring glassmorphism UI design.

✨ Features

🎨 Modern UI Design

• Glassmorphism design with blur effects
• Gradient backgrounds with animated elements
• Fully responsive - works on mobile, tablet, and desktop
• Interactive charts using Chart.js
• Smooth animations and transitions

👥 Dual User System

👨‍🎓 Student Features

• View personal attendance statistics
• See attendance percentage and trends
• Interactive charts (line graph & pie chart)
• Last 30 days attendance visualization
• Performance indicators

👨‍🏫 Teacher Features

• View all students and their attendance
• Mark/edit attendance manually
• Search and filter students
• View class analytics
• Export attendance data

🌐 IoT Integration

• RESTful API endpoint for biometric devices
• Automatic attendance marking via HTTP POST
• Real-time data synchronization
• Duplicate entry prevention

📁 Project Structure

Biometric_Attendance_System/
├── app.py                          # Main Flask application
├── requirements.txt                # Python dependencies
├── attendance.db                   # SQLite database (auto-generated)
├── iot_simulator.py               # IoT device simulator
├── README.md                      # This file
├── templates/                     # HTML templates
│   ├── base.html                 # Base template with navbar
│   ├── login.html                # Login page
│   ├── student_dashboard.html    # Student dashboard
│   └── teacher_dashboard.html    # Teacher dashboard
└── static/                        # Static files
    ├── css/
    │   └── style.css             # Custom CSS with glassmorphism
    ├── js/
    │   └── script.js             # JavaScript utilities
    └── images/                    # Image assets

🚀 Quick Start

Prerequisites

• Python 3.8 or higher
• pip (Python package manager)

Installation

1. Clone or navigate to the project directory:

   cd Biometric_Attendance_System

2. Create a virtual environment (recommended):

   # macOS/Linux
   python3 -m venv venv
   source venv/bin/activate
   
   # Windows
   python -m venv venv
   venv\Scripts\activate

3. Install dependencies:

   pip install -r requirements.txt

4. Run the application:

   python app.py

5. Open your browser and go to:

   http://127.0.0.1:5000
   

🔑 Demo Credentials

Student Login

• Email: john@student.com
• Password: password123
• Role: Student

Teacher Login

• Email: teacher@school.com
• Password: password123
• Role: Teacher

Other Student Accounts

• jane@student.com - Jane Smith
• alice@student.com - Alice Johnson
• bob@student.com - Bob Williams
• charlie@student.com - Charlie Brown

All accounts use password: password123

📡 IoT Device Integration

API Endpoint

POST /api/attendance

Request Format

{
  "student_id": 1,
  "student_name": "John Doe",
  "timestamp": "2024-01-15 10:30:00"
}

Response Format

Success (200):

{
  "success": true,
  "message": "Attendance marked for John Doe on 2024-01-15",
  "student_name": "John Doe",
  "date": "2024-01-15",
  "timestamp": "2024-01-15 10:30:00"
}

Error (400/404/500):

{
  "success": false,
  "message": "Error description"
}

Testing with IoT Simulator

Run the included IoT simulator to test the API:

python iot_simulator.py

This will simulate biometric scans and send attendance data to the server.

Testing with curl

curl -X POST http://127.0.0.1:5000/api/attendance \
  -H "Content-Type: application/json" \
  -d '{
    "student_id": 1,
    "student_name": "John Doe",
    "timestamp": "2024-01-15 10:30:00"
  }'

🗄️ Database Schema

Users Table

CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT UNIQUE NOT NULL,
    password TEXT NOT NULL,
    role TEXT NOT NULL CHECK(role IN ('student', 'teacher'))
);

Attendance Table

CREATE TABLE attendance (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    student_id INTEGER NOT NULL,
    date DATE NOT NULL,
    status TEXT NOT NULL CHECK(status IN ('present', 'absent')),
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (student_id) REFERENCES users(id),
    UNIQUE(student_id, date)
);

🎨 UI Components

Glassmorphism Design

• Translucent cards with backdrop blur
• Soft shadows and borders
• Gradient overlays
• Smooth hover effects

Color Scheme

• Primary: Purple gradient (#667eea → #764ba2)
• Success: Green gradient (#43e97b → #38f9d7)
• Danger: Pink gradient (#fa709a → #fee140)
• Info: Blue gradient (#4facfe → #00f2fe)

🔒 Security Features

• Password hashing using SHA-256
• Session-based authentication
• Role-based access control (RBAC)
• SQL injection prevention
• CSRF protection (Flask built-in)

📊 Features Breakdown

Student Dashboard

• Statistics Cards: Total days, present, absent, percentage
• Line Chart: 30-day attendance trend
• Pie Chart: Present vs Absent distribution
• Progress Bar: Visual attendance percentage
• Status Indicators: Performance feedback

Teacher Dashboard

• Class Statistics: Total students, good/poor attendance, average
• Student Table: Searchable, sortable list
• Quick Actions: Mark attendance, view details
• Filters: Search by name or email
• Export: Download attendance data

🛠️ Customization

Change Secret Key

Edit app.py:

app.secret_key = 'your_new_secret_key_here'

Add New Users

Use Python shell:

import sqlite3
import hashlib

conn = sqlite3.connect('attendance.db')
cursor = conn.cursor()

password_hash = hashlib.sha256('yourpassword'.encode()).hexdigest()

cursor.execute(
    'INSERT INTO users (name, email, password, role) VALUES (?, ?, ?, ?)',
    ('New Student', 'new@student.com', password_hash, 'student')
)

conn.commit()
conn.close()

Modify UI Colors

Edit static/css/style.css and change CSS variables:

:root {
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Add more gradients */
}

📱 Responsive Design

The system is fully responsive and works on:

• 📱 Mobile devices (320px+)
• 📱 Tablets (768px+)
• 💻 Desktops (1024px+)
• 🖥️ Large screens (1440px+)

🐛 Troubleshooting

Database Issues

If you encounter database errors, delete attendance.db and restart the app. It will automatically recreate with sample data.

rm attendance.db
python app.py

Port Already in Use

Change the port in app.py:

app.run(debug=True, host='0.0.0.0', port=5001)  # Change to 5001

Module Not Found

Make sure you're in the virtual environment and have installed requirements:

source venv/bin/activate  # or venv\Scripts\activate on Windows
pip install -r requirements.txt

📈 Future Enhancements

• Email notifications for low attendance
• PDF report generation
• Multi-semester support
• Facial recognition integration
• Mobile app (React Native)
• Real-time WebSocket updates
• Advanced analytics dashboard
• Bulk attendance upload (CSV)
• Parent portal access
• QR code attendance marking

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Developer

Built with ❤️ using Flask, Bootstrap 5, and Chart.js

📞 Support

If you encounter any issues or have questions:

1. Check the troubleshooting section
2. Review the code comments
3. Check Flask documentation: https://flask.palletsprojects.com/

🎓 Learning Resources

• Flask Documentation
• Bootstrap 5 Documentation
• Chart.js Documentation
• SQLite Documentation

---

Happy Coding! 🚀

Remember to change default passwords and secret key in production!