hi, please i like you to do the frontend implementation of this interface based on this interface description : Based on the HTML design provided in the file `attendease_lecturer_interfaces (2).html`, here’s a **detailed breakdown** of the UI/UX structure, pages, transitions, icons, and color scheme: --- ### 📄 **Number of Pages (Screens)** There are **5 main interface pages** (each with `.screen` class): 1. **Dashboard** (`id="dashboard"`) — default active screen 2. **Courses** (`id="courses"`) 3. **Attendance Reports** (`id="attendance"`) 4. **Real-Time Attendance** (`id="realtime"`) 5. **Profile Settings** (`id="profile"`) Each is a full-page view shown via toggling the `.active` class. --- ### 🔄 **Page Transitions** Transitions between pages are handled by the `showScreen(screenId)` JavaScript function. This hides all `.screen` divs and activates the selected one. **Transitions (via Bottom Nav):** * **Dashboard** → `Courses`, `Attendance Reports`, `Profile Settings` * **Courses** → `Upload Students`, `Manage Students` * **Attendance Reports** → `Filter by course/date`, view student attendance * **Dashboard**/`Courses` → **Real-Time Attendance** when viewing live check-ins * **Profile Settings** → Update profile, toggle dark mode, change password, logout --- ### 🎨 **Color Scheme** #### 🌞 Light Mode: * **Primary Gradient**: `#667eea` → `#764ba2` (purple-blue) * **Card Background**: `#ffffff` * **Accent Colors**: * Buttons: `#667eea`, `#22c55e` (green), `#ef4444` (red) * Text: `#333`, `#666` * Icons: Inherit from text color or emoji #### 🌙 Dark Mode: * **Background Gradient**: `#1a1a2e` → `#16213e` * **Cards/Containers**: `#2d3748`, `#4a5568` * **Text Colors**: `#f7fafc`, `#e2e8f0` * **Accent (Purple)**: `#8b5cf6` Toggled via the `🌙` / `☀️` icon on each screen’s header and a switch in the Profile screen. --- ### 🧭 **Bottom Navigation (Fixed)** * **Position**: `position: fixed; bottom: 0; left: 50%; transform: translateX(-50%)` * **Max Width**: `414px` * **Items**: 4 nav buttons with icon + label 1. **🏠 Dashboard** 2. **📚 Courses** 3. **📊 Reports** 4. **👤 Profile** * **Active State**: Highlighted with purple-blue background (`#f8f9ff`) and text --- ### 🧩 **Icons Used** All icons are **emojis** embedded as text in HTML (no SVG or font libraries). Here's the list: * `🏠` for Dashboard * `📚` for Courses * `📊` for Reports * `👤` for Profile * `☰` as a Menu icon (hamburger) * `🌙`/`☀️` for Dark/Light Mode toggles 🔁 You can use the same emoji icons in Flutter with: ```dart Text("🏠", style: TextStyle(fontSize: 24)) ``` --- ### 🔘 **Button Types & Colors** Each screen includes interactive buttons with these types: | Type | Class Name | Color | | --------- | ---------------- | ------------------------------------- | | Primary | `.btn-primary` | Purple gradient (`#667eea → #764ba2`) | | Success | `.btn-success` | Green (`#22c55e`) | | Danger | `.btn-danger` | Red (`#ef4444`) | | Secondary | `.btn-secondary` | Light gray/blue (`#f8f9ff`) | They also support: * `.active`, `.inactive` states * Hover/active animations --- ### 🗂️ **Modals (Popups)** Two main modals with centered white content box and backdrop: 1. **Start Session** — dropdown for location + confirm 2. **Upload Students** — file input for CSV Triggered by `startSession()` and `uploadStudents()` functions. --- ### 📊 **Other Components** * **Stat Cards** (Dashboard & Real-time): * Metrics like “Active Courses,” “Total Students,” “Checked In” * **Attendance Table**: * Student info, Present count, %, export as CSV * **Toggle Switches**: * Notifications, Auto Export (Profile settings) --- ### 📐 **Layout & Structure** * Mobile-first design (`max-width: 414px`) * Responsive grid for stats and filters * Cards with subtle shadows and hover animation * Forms with modern inputs (`border-radius: 12px`, focus shadow) * Dark mode styles prefixed with `.dark-mode` --- ### ✅ Summary of Elements | Element | Count/Note | | ---------------------- | ----------------------------------------- | | Pages (Screens) | 5 | | Bottom Nav Items | 4 icons (Dashboard → Profile) | | Unique Icons Used | 6 emoji-based | | Cards per Page | \~3–4 (varies per screen) | | Modals | 2 (Session, Upload) | | Toggles | 3 (Dark Mode, Notifications, Auto Export) | | Primary Color Gradient | `#667eea → #764ba2` | | Layout Width | Max `414px` (iPhone size) | ---