Here is a **comprehensive, step-by-step description** of the design found in your `attendease_lecturer_interfaces.html` file. This description can be used to **replicate the system exactly**, even by someone with minimal technical experience. --- ## ✅ GENERAL OVERVIEW * **Total Pages (Screens):** 5 main pages * **Responsive Design:** Fully responsive to all screen sizes, especially optimized for mobile (≤414px wide) * **Color Scheme:** * **Primary Gradient:** `#667eea` to `#764ba2` * **Accent (Success):** `#22c55e` * **Error:** `#ef4444` * **Dark Mode Enabled** * **Header Logo Position:** * Add your `.jpg` logo **at the top-left corner** inside the header (next to the ☰ menu icon). * Make sure it resizes proportionally to device width and maintains left alignment. --- ## 🧭 PAGE NAVIGATION FLOW | Page Name | Navigation Icon | Transitions From | | ------------------ | --------------- | ------------------------------ | | Dashboard | 🏠 Home | Bottom nav or on load | | Courses | 📚 Courses | Bottom nav | | Attendance Reports | 📊 Reports | Bottom nav or via course cards | | Live Attendance | ⏱️ Real-time | From “View Live” button | | Profile Settings | 👤 Profile | Bottom nav | --- ## 📱 BOTTOM NAVIGATION BAR * Fixed at the bottom of every screen * **4 icons** total: * 🏠 `Dashboard` → showScreen('dashboard') * 📚 `Courses` → showScreen('courses') * 📊 `Reports` → showScreen('attendance') * 👤 `Profile` → showScreen('profile') --- ## 🎨 ICONS USED | Icon Context | Icon (Unicode or Symbol) | Description | | ----------------- | ------------------------ | -------------------------------- | | Menu Icon | ☰ | Opens menu (future feature) | | Theme Toggle Icon | 🌙 or ☀️ | Switches between light/dark mode | | Dashboard Nav | 🏠 | Home | | Courses Nav | 📚 | Courses | | Reports Nav | 📊 | Attendance Reports | | Profile Nav | 👤 | Lecturer profile/settings | --- ## 📄 DETAILED SCREEN BREAKDOWN ### 1. 📊 Dashboard Screen * **Welcome Message** with user name * **Stats Cards:** * “5 Active Courses” * “142 Total Students” * **Course Cards (3):** Each shows: * Course name & code * Info: level, department, student count * **Action Buttons:** * `Start Session` (green): opens modal to select classroom * `View Attendance` (secondary): goes to Attendance page * If session is active: shows `Stop Session` (red) --- ### 2. 📚 Courses Screen * Same card layout as Dashboard * **Action Buttons:** * `Upload Students` (blue): opens file upload modal * `Manage` (secondary): shows a message (can be extended) --- ### 3. 📈 Attendance Reports * **Filter Section:** * `Dropdowns:` Course and Semester * `Date Inputs:` From and To * `Apply Filter` (purple button): filters data * **Attendance Table:** * Columns: Name, Matricle, Present, Total, % * **Export Button:** `Export to CSV` (secondary button) --- ### 4. ⏱️ Real-Time Attendance * **Live Stats:** * Checked In vs. Expected * **Recent Check-ins:** * Student Name + Matricle * Status badge: `Present` (green) or `Checking...` (yellow) * **Action Button:** * `Stop Session` (red) --- ### 5. 👤 Profile Settings * **User Avatar with Initials** * **Form (editable):** * Full Name (readonly) * Lecturer ID (readonly) * Email * Phone * **Button:** `Update Profile` * **Settings:** * Dark Mode (toggle switch) * Notifications (toggle switch) * Auto Export (toggle switch) * **Change Password Form:** * Current Password * New Password * Confirm Password * **Button:** `Change Password` * **Logout Button:** `Logout` (red) --- ## 📦 MODALS ### 1. Start Attendance Modal * Dropdown to select classroom * Buttons: `Cancel` and `Start Session` ### 2. Upload Students Modal * File input (CSV) * Buttons: `Cancel` and `Upload` ### 3. Manual Override (Triggered manually) * Inputs: Matricle, Action (Present/Absent), Reason * Buttons: `Cancel` and `Apply Override` --- ## 🧾 FORM PLACEHOLDERS | Field Name | Placeholder Text | | --------------- | ------------------------------- | | Email | `mbua.daniel@university.edu` | | Phone | `+237 650 123 456` | | Password Fields | `"Enter current password"` etc. | | Filter Dates | `"From Date"` and `"To Date"` | | Override Reason | `"Reason for override"` | --- ## 📐 RESPONSIVENESS INSTRUCTIONS > 📲 **Important:** Ensure that the layout **resizes and adjusts for every screen size.** * Use `flexbox`, `grid`, and `%` or `vw/vh` units. * Avoid hardcoding widths; use `max-width: 414px` for mobile-friendly layouts. * **Media Queries:** * For ≤414px: adjust grid layouts to single column * Buttons and cards should stack vertically on narrow screens --- ## 📸 LOGO INSTRUCTIONS * **Where to place:** Inside `.header`, before the menu icon `☰` * **How to implement:** ```html <img src="your-logo.jpg" alt="App Logo" style="position:absolute; top:20px; left:60px; height:40px;"> ``` ---