A modern, real-time attendance tracking system built for educational institutions. Features separate interfaces for teachers and students with live data synchronization, professional UI/UX, and comprehensive reporting.

• Class Management: Create and manage multiple classes with unique access codes
• Real-time Attendance Marking: Mark student attendance with instant updates
• Comprehensive Reports: View present/absent students with detailed analytics
• Export Functionality: Generate CSV reports for attendance data
• Notification System: Send automated updates to parents/guardians

• Personal Dashboard: View individual attendance records and statistics
• Real-time Updates: Live attendance status with automatic refresh
• Attendance History: Track attendance patterns over time
• Class Integration: Join classes using teacher-provided codes

• Real-time Synchronization: Powered by Supabase for instant data updates
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Professional Animations: Smooth GSAP-powered transitions and interactions
• Role-based Access: Separate authentication and interfaces for teachers and students
• Data Security: Row-level security with Supabase integration
• Modern UI/UX: Clean, professional interface with consistent design language

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Supabase account (free tier available)
• Basic understanding of HTML/CSS/JavaScript

1. Clone the repository

   git clone https://github.com/stalkeristhei/Witty-Project.git
   cd Witty-Project

2. Set up Supabase database

   • Follow the detailed instructions in DATABASE_SETUP.md
   • Create your Supabase project and configure the database schema
   • Get your API credentials

3. Configure the application

   • Update Supabase credentials in all relevant files
   • See Configuration section below

4. Launch the application

   • Open index.html in your web browser
   • Or serve using a local web server for best experience

Update the following files with your Supabase credentials:

// Replace in: present.html, absent.html, sattendance.html, 
// tattendance.html, compresent.html, comabsent.html

const supabaseUrl = 'YOUR_SUPABASE_PROJECT_URL';
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';

Witty-Project/
├── 📄 index.html              # Landing page with feature overview
├── 🔐 login.html              # Authentication interface
├── 📊 Dashboard Files
│   ├── sindex.html            # Student dashboard
│   ├── teacher-dashboard.html # Teacher main dashboard
│   ├── tindex.html           # Teacher navigation hub
│   └── manage-class.html     # Class management interface
├── 📝 Attendance Management
│   ├── tattendance.html      # Teacher attendance marking
│   ├── present.html          # Present students view
│   ├── absent.html           # Absent students view
│   ├── sattendance.html      # Student attendance dashboard
│   ├── compresent.html       # Teacher present students view
│   └── comabsent.html        # Teacher absent students view
├── 👥 User Management
│   ├── teacher-register.html # Teacher registration
│   └── create-class.html     # Class creation interface
├── ℹ️ about.html              # About page with team info
├── 🎨 style.css              # Global styles
├── 🖼️ Assets
│   ├── rohit.jpg             # Team member photo
│   └── vansh.jpg             # Team member photo
├── 📚 Documentation
│   ├── README.md             # This file
│   └── DATABASE_SETUP.md     # Database configuration guide
└── ⚙️ Configuration
    ├── .gitattributes        # Git configuration
    └── .picasa.ini          # Image metadata

1. Getting Started

   • Visit the application homepage
   • Click "Get Started" and select "Teacher"
   • Login with credentials (demo: email: [email protected], password: teacher123)

2. Creating Classes

   • Navigate to "Create New Class" from the dashboard
   • Fill in class details (department, subject, section, etc.)
   • System generates a unique 6-character class code
   • Share this code with your students

3. Taking Attendance

   • Go to "Mark Attendance" from the teacher dashboard
   • Select the date (defaults to today)
   • Click "Mark Present" for each attending student
   • Changes are saved automatically and update in real-time

4. Viewing Reports

   • Access "Present Students" or "Absent Students" views
   • Filter by date to see historical data
   • Export attendance reports as CSV files
   • Send notifications to parents/guardians

1. Joining a Class

   • Visit the application homepage
   • Click "Get Started" and select "Student"
   • Enter your name, student ID, and the class code provided by your teacher
   • Access granted to your personal attendance dashboard

2. Viewing Attendance

   • See your current attendance status on the main dashboard
   • View "Present Today" to see all students marked present
   • Check "Absent Today" to see who's absent
   • Access detailed attendance history and analytics

• Frontend: Pure HTML5, CSS3, and Vanilla JavaScript
• Database: Supabase (PostgreSQL with real-time capabilities)
• Authentication: Local storage-based session management
• Animations: GSAP (GreenSock Animation Platform)
• Styling: Custom CSS with CSS Grid and Flexbox
• Real-time: Supabase WebSocket connections

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

• Load Time: < 2 seconds on average connection
• Real-time Updates: < 500ms latency
• Offline Support: Basic caching with service workers (future enhancement)
• Mobile Optimized: Responsive design with touch-friendly interfaces

• Row Level Security (RLS): Supabase policies control data access
• Input Validation: Client-side and server-side validation
• SQL Injection Prevention: Parameterized queries through Supabase client
• Authentication: Session-based user management
• Data Encryption: HTTPS-only communication with encrypted database storage

• Primary attendance tracking table
• Stores daily attendance records
• Unique constraint on (Roll Number, Date)
• Real-time enabled for live updates

• Teacher account information
• Department and subject associations
• Authentication credentials

• Class definitions with unique codes
• Teacher associations
• Student enrollment tracking

• Student profiles and contact information
• Class enrollment records
• Parent/guardian contact details

See DATABASE_SETUP.md for complete schema and setup instructions.

--bg-primary: #fdfaf6      /* Light cream background */
--text-primary: #1e1e1e    /* Dark text */
--accent-primary: #2a9d8f  /* Teal accent */
--success-primary: #6a994e /* Green for present */
--danger-primary: #e63946  /* Red for absent */

• Primary Font: Inter (Google Fonts)
• Weights: 300, 400, 500, 600, 700, 800
• Responsive: clamp() functions for scalable text

• Grid System: CSS Grid and Flexbox
• Breakpoints: Mobile-first responsive design
• Spacing: Consistent 8px grid system

• Daily Attendance: Present/absent counts by date
• Student Statistics: Individual attendance percentages
• Class Analytics: Overall class performance metrics
• Trend Analysis: Attendance patterns over time

• CSV Format: Compatible with Excel and Google Sheets
• Date Filtering: Custom date ranges for reports
• Bulk Operations: Mass notifications and updates

• Mobile App: React Native implementation
• Advanced Analytics: ML-powered attendance predictions
• Parent Portal: Dedicated interface for parents/guardians
• Integration APIs: Connect with school management systems
• Biometric Support: Face recognition for automated attendance
• Offline Mode: Progressive Web App with offline capabilities
• Multi-language: Support for regional languages
• Advanced Security: Two-factor authentication

• Service Workers: Better caching and offline support
• PWA Features: Install prompts and app-like experience
• Performance: Code splitting and lazy loading
• Testing: Automated testing suite
• CI/CD: GitHub Actions deployment pipeline

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a 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

• Follow existing code style and conventions
• Add comments for complex functionality
• Test on multiple browsers and devices
• Update documentation for new features

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

• GSAP: For amazing animation capabilities
• Supabase: For real-time database functionality
• Inter Font: For clean typography
• The Web Development Community: For inspiration and resources

• Documentation: Start with this README and DATABASE_SETUP.md
• Issues: Open a GitHub issue for bugs or feature requests
• Discussions: Use GitHub Discussions for questions and ideas

• Email: [email protected]
• GitHub: @stalkeristhei