Rotimi Best
2a82abfa21
Full spec for ordered, sequentially unlocked, bundle-priced learning paths, plus 16 clickable prototypes (public org site, learner LMS, and teacher workspace) built on the packages/ui tokens and the minimal org-landing theme. The prototypes are the UX source of truth; start at prototypes/learning-paths/index.html. Also adds the write-prd skill codifying the clarify -> write -> prototype workflow.
192 lines
14 KiB
HTML
192 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>My Learning · ClassroomIO LMS</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..800&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="app-theme.css" />
|
|
<script>
|
|
if (localStorage.cioTheme === 'dark' || (!localStorage.cioTheme && matchMedia('(prefers-color-scheme: dark)').matches))
|
|
document.documentElement.classList.add('dark');
|
|
</script>
|
|
<style>
|
|
.path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
|
.path-card { overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s, border-color 0.15s; }
|
|
.path-card:hover { border-color: var(--ring); box-shadow: var(--shadow-md); }
|
|
.pc-cover { height: 80px; position: relative; }
|
|
.pc-cover .badge { position: absolute; top: 12px; left: 14px; background: oklch(1 0 0 / 0.18); color: #fff; border-color: oklch(1 0 0 / 0.3); backdrop-filter: blur(4px); }
|
|
.pc-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
|
|
.pc-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 2px; }
|
|
.pc-desc { font-size: 13px; color: var(--muted-foreground); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.seg-row { display: flex; align-items: center; gap: 10px; }
|
|
.seg-pct { font-size: 13px; font-weight: 600; min-width: 34px; text-align: right; }
|
|
.pc-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted-foreground); }
|
|
.pc-meta .m { display: flex; align-items: center; gap: 5px; }
|
|
.pc-meta svg { width: 14px; height: 14px; stroke-width: 2; }
|
|
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
|
|
.pc-next { font-size: 12.5px; color: var(--muted-foreground); min-width: 0; }
|
|
.pc-next strong { color: var(--foreground); font-weight: 500; }
|
|
|
|
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
.course-card { overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s; }
|
|
.course-card:hover { border-color: var(--ring); box-shadow: var(--shadow-md); }
|
|
.cc-cover { height: 92px; }
|
|
.cc-body { padding: 14px; }
|
|
.cc-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
|
|
.cc-desc { font-size: 12.5px; color: var(--muted-foreground); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
|
|
.cc-prog { display: flex; align-items: center; gap: 9px; }
|
|
.cc-prog .p { font-size: 12px; font-weight: 600; color: var(--muted-foreground); min-width: 32px; text-align: right; }
|
|
.greet { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin: 4px 0 4px; }
|
|
@media (max-width: 980px) { .path-grid { grid-template-columns: 1fr; } .course-grid { grid-template-columns: repeat(2, 1fr); } }
|
|
@media (max-width: 680px) { .course-grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside class="sidebar">
|
|
<div class="brand"><div class="brand-mark">C</div><div class="brand-name">ClassroomIO</div></div>
|
|
<div class="nav-label">Learn</div>
|
|
<a class="nav-item active" href="lms-home.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>My Learning</a>
|
|
<a class="nav-item" href="paths.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Learning Paths<span class="nav-badge">2</span></a>
|
|
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Exercises</a>
|
|
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></svg>Community</a>
|
|
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="8" r="6"/><path d="M15.5 13.5 17 22l-5-3-5 3 1.5-8.5"/></svg>Certificates</a>
|
|
<div class="sidebar-foot"><div class="avatar">AO</div><div class="who"><div class="nm">Ada Okafor</div><div class="rl">Student</div></div></div>
|
|
</aside>
|
|
|
|
<div class="main">
|
|
<header class="topbar">
|
|
<span class="top-title">My Learning</span>
|
|
<div class="top-actions">
|
|
<button class="icon-btn" id="theme" title="Toggle theme" aria-label="Toggle theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></button>
|
|
<button class="icon-btn" title="Notifications" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg></button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<div class="wrap" style="max-width: 1040px">
|
|
<h1 class="greet">Welcome back, Ada</h1>
|
|
<p class="page-sub" style="margin-bottom: 8px">Pick up where you left off — you're 49% through your bootcamp.</p>
|
|
|
|
<div class="sec-head">
|
|
<h2 class="sec-title" style="display: flex; align-items: center; gap: 8px">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" style="width: 16px; height: 16px; stroke-width: 2; color: var(--primary)"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
|
|
Learning Paths
|
|
</h2>
|
|
<span class="count">2</span>
|
|
<a class="more" href="paths.html">View all <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
|
|
</div>
|
|
|
|
<div class="path-grid">
|
|
<a class="card path-card" href="path-detail.html">
|
|
<div class="pc-cover" style="background: linear-gradient(120deg, oklch(0.488 0.243 264.376), oklch(0.623 0.214 259.815))">
|
|
<span class="badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Path</span>
|
|
</div>
|
|
<div class="pc-body">
|
|
<div>
|
|
<h3 class="pc-title">Frontend Engineering Bootcamp</h3>
|
|
<p class="pc-desc">From HTML foundations to shipping a production React app.</p>
|
|
</div>
|
|
<div class="seg-row">
|
|
<div class="segs"><span class="seg done"></span><span class="seg done"></span><span class="seg half"></span><span class="seg"></span><span class="seg"></span></div>
|
|
<span class="seg-pct tnum text-primary">49%</span>
|
|
</div>
|
|
<div class="pc-meta">
|
|
<span class="m tnum"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg>2 of 5 done</span>
|
|
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>~38h</span>
|
|
</div>
|
|
<div class="pc-foot">
|
|
<div class="pc-next">Next: <strong>Modern Web Development with React</strong></div>
|
|
<span class="btn btn-primary btn-sm">Continue<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card path-card" href="paths.html">
|
|
<div class="pc-cover" style="background: linear-gradient(120deg, oklch(0.596 0.145 163.225), oklch(0.696 0.17 162.48))">
|
|
<span class="badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Path</span>
|
|
</div>
|
|
<div class="pc-body">
|
|
<div>
|
|
<h3 class="pc-title">Data Science with Python</h3>
|
|
<p class="pc-desc">Pandas, visualization, and applied machine-learning basics.</p>
|
|
</div>
|
|
<div class="seg-row">
|
|
<div class="segs"><span class="seg half"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span></div>
|
|
<span class="seg-pct tnum text-primary">8%</span>
|
|
</div>
|
|
<div class="pc-meta">
|
|
<span class="m tnum"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg>0 of 4 done</span>
|
|
<span class="m"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>~30h</span>
|
|
</div>
|
|
<div class="pc-foot">
|
|
<div class="pc-next">Just started: <strong>Intro to Python</strong></div>
|
|
<span class="btn btn-primary btn-sm">Continue<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sec-head">
|
|
<h2 class="sec-title" style="display: flex; align-items: center; gap: 8px">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" style="width: 16px; height: 16px; stroke-width: 2; color: var(--primary)"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
|
Courses
|
|
</h2>
|
|
<span class="count">4</span>
|
|
</div>
|
|
|
|
<div class="course-grid">
|
|
<a class="card course-card" href="course-in-path.html">
|
|
<div class="cc-cover" style="background: linear-gradient(135deg, oklch(0.685 0.169 237.323), oklch(0.488 0.243 264.376))"></div>
|
|
<div class="cc-body">
|
|
<span class="badge badge-primary-soft" style="margin-bottom: 8px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Frontend Bootcamp · 3/5</span>
|
|
<h3 class="cc-title">Modern Web Development with React</h3>
|
|
<p class="cc-desc">Components, hooks, and building interactive UIs.</p>
|
|
<div class="cc-prog"><div class="progress progress-thin"><span style="width: 45%"></span></div><span class="p tnum">45%</span></div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card course-card" href="path-detail.html">
|
|
<div class="cc-cover" style="background: linear-gradient(135deg, oklch(0.705 0.213 47.604), oklch(0.75 0.183 55.934))"></div>
|
|
<div class="cc-body">
|
|
<span class="badge badge-primary-soft" style="margin-bottom: 8px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Frontend Bootcamp · 1/5</span>
|
|
<h3 class="cc-title">HTML & CSS Foundations</h3>
|
|
<p class="cc-desc">Semantic markup, the box model, and responsive layout.</p>
|
|
<div class="cc-prog"><div class="progress progress-thin progress-success"><span style="width: 100%"></span></div><span class="p tnum">100%</span></div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card course-card" href="#">
|
|
<div class="cc-cover" style="background: linear-gradient(135deg, oklch(0.585 0.233 277.117), oklch(0.606 0.25 292.717))"></div>
|
|
<div class="cc-body">
|
|
<h3 class="cc-title" style="margin-top: 26px">Getting Started with MVC</h3>
|
|
<p class="cc-desc">A standalone course on the model-view-controller pattern.</p>
|
|
<div class="cc-prog"><div class="progress progress-thin"><span style="width: 20%"></span></div><span class="p tnum">20%</span></div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card course-card" href="#">
|
|
<div class="cc-cover" style="background: linear-gradient(135deg, oklch(0.596 0.145 163.225), oklch(0.696 0.17 162.48))"></div>
|
|
<div class="cc-body">
|
|
<span class="badge badge-primary-soft" style="margin-bottom: 8px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 3v12"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Data Science · 1/4</span>
|
|
<h3 class="cc-title">Intro to Python</h3>
|
|
<p class="cc-desc">Syntax, data types, and your first scripts.</p>
|
|
<div class="cc-prog"><div class="progress progress-thin"><span style="width: 30%"></span></div><span class="p tnum">30%</span></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('theme').onclick = () => {
|
|
const dark = document.documentElement.classList.toggle('dark');
|
|
localStorage.cioTheme = dark ? 'dark' : 'light';
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|