hi, please i like you to do the frontend implementation of this interface based on this interface description --- ## 🔧 GENERAL DESIGN OVERVIEW * **Responsive Design**: The layout automatically adjusts to fit any phone screen size without affecting how content is displayed. * **Color Scheme**: * **Light Mode**: Gradient purple-blue (`#667eea → #764ba2`) headers and buttons, white background for cards and pages. * **Dark Mode**: Deep blue/purple background (`#1a1a2e → #16213e`), with soft purples for accents. * **Font**: Clean, modern sans-serif (`Segoe UI`, `Tahoma`, `Verdana`). * **Icons Used**: Emojis (🏠, 📚, 📊, 👤) for navigation. Replaceable with Material Icons if desired. * **Logo Position**: Top-left of each screen’s header—replace the word **“Dashboard”** with your **JPG logo image** here. --- ## 📱 NUMBER OF PAGES (5 main screens) ### 1. **Dashboard** * **Purpose**: Shows overview stats and sessions for active courses. * **Transitions From**: Bottom navigation ("🏠 Dashboard" icon). * **Icons/Elements**: * Top-left: ☰ Menu icon (placeholder). * Top-right: 🌙/☀️ theme toggle button. * **Header**: "Dashboard" (replace with logo), "Welcome back, Dr. Mbua". * **Statistics Section**: * **Card 1**: “5” Active Courses. * **Card 2**: “142” Total Students. * **Course Cards** (3 cards): * Example: “Software Engineering - CSC301” * Session buttons: * ✅ `Start Session` (green) * 👁️ `View Attendance` (grey) ### 2. **Courses** * **Purpose**: Manage course-specific student lists. * **Transitions From**: Bottom nav ("📚 Courses"). * **Course Cards** (same structure as dashboard): * ✏️ `Upload Students` (purple) * ⚙️ `Manage` (grey) ### 3. **Attendance Reports** * **Purpose**: Filter and view class attendance history. * **Transitions From**: Dashboard course card or nav ("📊 Reports"). * **Elements**: * Filters: Course, semester, date range. * 📈 `Apply Filter` button (purple). * 📄 `Export to CSV` button. ### 4. **Live Attendance** * **Purpose**: Real-time check-in list (for active sessions). * **Transitions From**: `View Live` button on a dashboard card. * **Elements**: * Stat Cards: “Checked In” and “Expected” * Recent check-ins (name + matricle + status). * ❌ `Stop Session` button (red) ### 5. **Profile** * **Purpose**: Manage user details and app settings. * **Transitions From**: Bottom nav ("👤 Profile"). * **Sections**: * 👤 Profile avatar (“DM” initials). * Read-only name + ID fields. * Editable email + phone. * 🔄 `Update Profile` button. * **App Settings**: * 🌗 Dark Mode toggle. * 🔔 Notifications toggle. * 📤 Auto-export toggle. * 🔒 Change password form. * 🚪 `Logout` button (red) --- ## 🔲 BOTTOM NAVIGATION BAR (Fixed) * **Always visible at bottom**, switches between the 4 primary pages. * **Icons and Labels**: 1. 🏠 `Dashboard` 2. 📚 `Courses` 3. 📊 `Reports` 4. 👤 `Profile` * **Active tab** is highlighted in light purple background. --- ## ✅ ACTIONABLE BUTTONS (AND THEIR PURPOSES) | Page | Button Text | Function | | ---------- | --------------------- | --------------------------------------------------- | | Dashboard | `Start Session` | Opens a modal to pick location and begin session | | | `View Attendance` | Navigates to Attendance Reports with filter pre-set | | | `Stop Session` | Ends an ongoing session | | | `View Live` | Navigates to Real-time Attendance screen | | Courses | `Upload Students` | Opens file upload modal for CSV | | | `Manage` | Placeholder (intended to manage list) | | Attendance | `Apply Filter` | Filters attendance table | | | `Export to CSV` | Downloads filtered data | | Real-time | `Stop Session` | Ends live check-in | | Profile | `Update Profile` | Saves profile changes | | | `Change Password` | Placeholder functionality | | | `Logout` | Logs the lecturer out | | All Pages | `🌙 / ☀️` (top right) | Toggles between light and dark mode | --- ## 🧭 PAGE TRANSITIONS & LOGIC * All screens use `display: none` and `display: block` to transition. * Clicking a nav item hides other screens and shows the selected one. * Each nav item becomes highlighted when selected. * Clicking on dashboard actions (e.g., View Attendance, View Live) auto-navigates to related pages with correct course preloaded. --- ## 🖼️ ICONS USED (AND RECOMMENDED REPLACEMENTS) | Purpose | Emoji Used | Suggested Icon (if using Material Icons) | | ------------- | ---------- | ---------------------------------------- | | Dashboard tab | 🏠 | `home` | | Courses tab | 📚 | `menu_book` | | Reports tab | 📊 | `bar_chart` | | Profile tab | 👤 | `person` | | Menu icon | ☰ | `menu` | | Theme toggle | 🌙/☀️ | `dark_mode` / `light_mode` | --- ## 🖼️ LOGO REPLACEMENT INSTRUCTION * In the HTML, replace the `<h1>Dashboard</h1>` tag inside the `.header-content` of each screen with: ```html <img src="path_to_your_logo.jpg" alt="App Logo" style="height: 40px;"> ``` Make sure `path_to_your_logo.jpg` points to your image file. Example if in same folder: ```html <img src="logo.jpg" alt="App Logo" style="height: 40px;"> ``` --- ## 🔁 RESPONSIVE DESIGN RULE * Uses `max-width: 414px;` for mobile devices. * Grid layouts (stats, filters) change from 2-column to 1-column automatically on smaller screens using media queries. * Fonts, paddings, and card layouts scale down smoothly to fit different device sizes. --- ## 🔐 SECURITY AND INTERACTIVITY (BUILT-IN) * Modals for: * Session start (classroom selection) * Uploading student list (CSV only) * Toggles for theme, notifications, and auto-export. * Live updates (simulated with JS `setInterval`) for check-ins. ---