# CEPI LMS - AI Development Context & Pending Work

## 1. Project Context & Vision
The goal is to digitize CEPI's physical teaching methodology into a structured online Learning Management System (LMS).
Unlike standard video hosting platforms (like Nearpeer), CEPI focuses heavily on a **disciplined, guided system**.
- **Hierarchy:** Subject (Course) → Module → Lecture. Lectures must strictly belong to modules.
- **Content Protection:** Strict anti-piracy, single device login, DRM via Bunny.net.
- **Engagement:** Progress tracking, assignments, tests, mentorship, and community features.
- **Stack:** Laravel, Blade, Tailwind CSS, Alpine.js, MySQL, Bunny.net (Video). No heavy SPA frontend like React/Vue; sticking to rapid, clean Laravel Blade interactions.

---

## 2. Design System (canonical reference — apply to all Blade views)

### Brand
- **College:** CEPI Pakistan — serious, premium, academic. Not startup-playful.
- **Tone:** Authoritative, disciplined, trustworthy.
- **Audience:** Pakistani FSc / Entry Test students and faculty.

### Color Palette (CSS variables)
```css
--color-navy-950: #040D1E;   /* page backgrounds */
--color-navy-900: #071330;   /* section / sidebar bg */
--color-navy-800: #0C1F4F;   /* cards, modals */
--color-navy-700: #132868;
--color-navy-600: #1A3280;
--color-gold-500: #C9A84C;   /* primary accent, CTAs */
--color-gold-400: #D9BA6F;
--color-gold-300: #E8D09A;
--color-gold-200: #F2E4BE;
--color-cream:    #FAF6EE;   /* light-bg sections */
--color-muted:    #8A93A8;
--color-success:  #2E7D5E;
--color-danger:   #C0392B;
```

### Typography
- **Headings / Display:** `Playfair Display` (400, 700, 900) — serif, editorial
- **Body / UI:** `DM Sans` (400, 500, 600) — clean, readable
- **Data / Code labels:** `JetBrains Mono` (400)
- Load all three via Google Fonts CDN on every page.

### Component Rules
- Cards: `background: rgba(255,255,255,0.04)`, `border: 1px solid rgba(201,168,76,0.15)`, `border-radius: 12px`, `backdrop-filter: blur(8px)`
- Hover lift: `transform: translateY(-2px)`, `box-shadow: 0 4px 24px rgba(201,168,76,0.12)`
- Buttons — Primary: gold bg + navy text; Secondary: navy border + gold text; Ghost: transparent + gold text
- Dividers: `1px solid rgba(201,168,76,0.2)`
- Icons: **Lucide Icons** CDN throughout (`https://unpkg.com/lucide@latest`)
- Sidebar width (dashboard): `260px`; collapsed icon-only (lesson view): `60px`
- Max content width: `1280px` centered

---

## 3. Static HTML Prototypes (`html/` folder)

A complete production-grade static prototype has been built at `html/`. These files are the **visual and UX blueprint** for the Laravel/Blade implementation. Do not delete or overwrite them — use them as direct pixel-reference when building Blade views.

| File | Purpose |
|------|---------|
| `html/index.html` | Landing / marketing homepage |
| `html/login.html` | Login + Register (tabbed, with JS validation) |
| `html/courses.html` | Course catalog with filter, search, sort, pagination |
| `html/course-detail.html` | Single course page: hero, accordion modules, instructor, requirements |
| `html/dashboard.html` | Student dashboard: fixed sidebar, stats cards, continue-learning, activity feed |
| `html/lesson.html` | Video lesson player: icon sidebar, player controls, playlist panel, bottom nav |

**Tech used in prototypes:** Pure HTML5 + CSS3 + Vanilla JS. Tailwind CDN with custom config. Lucide CDN. Google Fonts. No build step needed — open directly in browser.

---

## 4. Completed Phases

- [x] **Phase 1:** Base Laravel project initialized.
- [x] **Phase 2:** `.env` configured for MySQL Database.
- [x] **Phase 3:** Laravel Breeze (Blade/Tailwind/Alpine) installed.
- [x] **Phase 4–6:** Admin panel: users, courses, enrollments.
- [x] **Phase 7:** Bunny.net DRM video integration scaffolded (`docs/dev/07-bunny-drm.md`).
- [x] **Phase 8:** Payments module scaffolded (`docs/dev/08-payments.md`).
- [x] **Phase 9:** Public frontend (`docs/dev/09-public-frontend.md`).
- [x] **Phase 10 (UI):** Full static HTML prototypes built in `html/` — dashboard, lesson player, course catalog, course detail, login, homepage.
- [x] **Docs:** All phase docs exist in `docs/dev/01` through `docs/dev/12`.

---

## 5. Immediate Pending Work (Phase 10 — Laravel Implementation)

The static prototypes are done. Now wire them into Laravel Blade:

- [ ] **Student Dashboard** (`resources/views/dashboard.blade.php`): Replace placeholder with enrolled courses, progress bars, stats — dynamic from `enrollments` + `lesson_progress` tables.
- [ ] **Video Player / Lesson View** (`resources/views/lessons/show.blade.php`): Implement Alpine.js video wrapper parsing `playlist.m3u8` from Bunny.net. Reference `html/lesson.html` for UI.
- [ ] **Course Consumption View**: Progress tracking — mark lecture complete → update `lesson_progress` table. Unlock next lecture only after current is marked done.
- [ ] **Docs Scaffolding**: Flesh out `docs/dev/10-student-dashboard.md` with implementation notes.

---

## 6. Key Database Tables (reference)
- `users` — students, instructors, admins
- `courses` — subject-level (e.g., Biology FSc)
- `modules` — belong to courses
- `lectures` — belong to modules (strict hierarchy enforced)
- `enrollments` — user ↔ course pivot
- `lesson_progress` — tracks per-lecture completion per user
- `assignments`, `tests`, `test_attempts` — engagement layer

---

## 7. How to Proceed

1. Open `html/` prototypes in browser for visual reference.
2. Build Blade views matching prototype UI exactly.
3. Test locally via `wamp64` / `php artisan serve`.
4. Compile assets: `npm run build`.
5. Deploy per `docs/dev/12-deployment.md`.