Overview
This specification details page structures and wireframe layout architectures for Learnille’s portals (student, instructor, consultant, admin).
🖼 Page Layout Architectures
1. Student Course Player Page Layout
+-------------------------------------------------------------------------------+
| Top Header: Logo | Course Title | Progress Bar (65%) | Dashboard Link |
+------------------------------------------------------+------------------------+
| | Sidebar: Curriculum |
| | + Section 1: Intro (v) |
| Main HLS Video Viewport | - Item 1.1 (Done) |
| (16:9 Aspect Ratio) | - Item 1.2 (Active) |
| | + Section 2: Advanced |
| | |
+------------------------------------------------------+------------------------+
| Tabs: Overview | Resources | Real-time Comments (InstantDB) | Q&A |
| Video Title & Instructor Bio |
+-------------------------------------------------------------------------------+
2. Consultant Availability & Slot Configurator
+-------------------------------------------------------------------------------+
| Navigation Header: Consultant Portal > Availability Management |
+-------------------------------------------------------------------------------+
| Global Settings: Timezone (UTC+1 Lagos) | Minimum Notice (2 Hours) |
+-------------------------------------------------------------------------------+
| Weekly Recurring Schedule: |
| [x] Monday : 09:00 - 12:00 [ + Add Window ] [ 13:00 - 17:00 ] |
| [x] Tuesday : 10:00 - 16:00 [ + Add Window ] |
| [ ] Wednesday : Off |
| |
| Specific Date Override Exceptions: |
| + Add Date Override (e.g., Block 2026-08-15) |
+-------------------------------------------------------------------------------+