hi, please i like you to do the frontend implementation of this interface based on this interface description. the implementation should be modular for easy debugging 🔧 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: 🏠 Dashboard 📚 Courses 📊 Reports 👤 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: <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: <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.