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.
158 lines
11 KiB
HTML
158 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Set up your path · ClassroomIO</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&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>
|
|
.gs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 8px 0 20px; }
|
|
.list { display: flex; flex-direction: column; gap: 8px; }
|
|
.summary-cnt { display: flex; align-items: center; gap: 10px; }
|
|
.launch { margin-top: 20px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
|
|
.launch .txt { flex: 1; min-width: 220px; }
|
|
.launch .txt b { font-size: 14px; font-weight: 600; }
|
|
.launch .txt p { margin: 1px 0 0; font-size: 13px; color: var(--muted-foreground); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside class="sidebar">
|
|
<a class="back-link" href="teacher-paths.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>All Learning Paths</a>
|
|
<div class="path-id">
|
|
<div class="ico"><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></div>
|
|
<div><div class="nm">Frontend Engineering Bootcamp</div><div class="st st-draft"><span class="dot"></span>Draft</div></div>
|
|
</div>
|
|
<a class="nav-item" href="teacher-path-builder.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>Courses<span class="nav-tail tnum">5</span></a>
|
|
<a class="nav-item" href="teacher-path-people.html"><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>People<span class="nav-tail tnum">0</span></a>
|
|
<a class="nav-item" href="teacher-path-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>Analytics</a>
|
|
<a class="nav-item" href="teacher-path-landing-editor.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>Landing page</a>
|
|
<a class="nav-item" href="teacher-path-certificate.html"><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>Certificate</a>
|
|
<a class="nav-item" href="teacher-path-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4"/></svg>Settings</a>
|
|
<div class="sidebar-foot"><div class="avatar">JD</div><div class="who"><div class="nm">Jordan Diallo</div><div class="rl">Admin</div></div></div>
|
|
</aside>
|
|
|
|
<div class="main">
|
|
<header class="topbar">
|
|
<nav class="crumbs">
|
|
<a href="teacher-paths.html">Learning Paths</a><span class="sep">/</span>
|
|
<a href="teacher-path-builder.html">Frontend Engineering Bootcamp</a><span class="sep">/</span>
|
|
<span class="here">Set up</span>
|
|
</nav>
|
|
<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>
|
|
<a class="btn btn-outline btn-sm" href="path-detail.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>Preview as student</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<div class="wrap-narrow">
|
|
<div class="gs-head">
|
|
<div>
|
|
<h1 class="page-title">Set up your path</h1>
|
|
<p class="page-sub">Finish these steps to launch <strong style="color: var(--foreground); font-weight: 500">Frontend Engineering Bootcamp</strong> to your learners.</p>
|
|
</div>
|
|
<div class="ring">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="track" cx="50" cy="50" r="45" fill="none" stroke-width="8" />
|
|
<circle class="arc" cx="50" cy="50" r="45" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray="282.7" stroke-dashoffset="188.5" />
|
|
</svg>
|
|
<span class="lbl tnum">33%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item item-outline" style="margin-bottom: 16px; cursor: default">
|
|
<div class="item-content">
|
|
<span class="item-desc" style="margin-bottom: 10px">A path goes live once its courses are ordered, priced, and set to Active.</span>
|
|
<div class="summary-cnt">
|
|
<span class="item-desc tnum" style="color: var(--foreground)">2 of 6 completed</span>
|
|
<span class="dots"><span class="dot on"></span><span class="dot on"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list">
|
|
<div class="item item-muted item-done">
|
|
<div class="item-media-icon is-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg></div>
|
|
<div class="item-content">
|
|
<span class="item-title">Name & describe your path</span>
|
|
<span class="item-desc">Give the path a clear, outcome-based name and a short summary.</span>
|
|
</div>
|
|
<div class="item-actions"><span class="btn btn-secondary btn-sm disabled">Done</span></div>
|
|
</div>
|
|
|
|
<div class="item item-muted item-done">
|
|
<div class="item-media-icon is-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg></div>
|
|
<div class="item-content">
|
|
<span class="item-title">Add courses</span>
|
|
<span class="item-desc">Pick the courses that make up this learning path.</span>
|
|
</div>
|
|
<div class="item-actions"><span class="btn btn-secondary btn-sm disabled">Done</span></div>
|
|
</div>
|
|
|
|
<div class="item item-current">
|
|
<div class="item-media-icon is-current"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/></svg></div>
|
|
<div class="item-content">
|
|
<span class="item-title">Set the course order</span>
|
|
<span class="item-desc">Drag courses into the order learners should complete them.</span>
|
|
</div>
|
|
<div class="item-actions"><a class="btn btn-primary btn-sm" href="teacher-path-builder.html">Set order<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 18l6-6-6-6"/></svg></a></div>
|
|
</div>
|
|
|
|
<div class="item item-muted">
|
|
<div class="item-media-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
|
|
<div class="item-content">
|
|
<span class="item-title">Set your price</span>
|
|
<span class="item-desc">Price the path as a bundle — learners see the savings vs individual courses.</span>
|
|
</div>
|
|
<div class="item-actions"><a class="btn btn-outline btn-sm" href="teacher-path-settings.html">Set price<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 18l6-6-6-6"/></svg></a></div>
|
|
</div>
|
|
|
|
<div class="item item-muted">
|
|
<div class="item-media-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div>
|
|
<div class="item-content">
|
|
<span class="item-title">Customize your landing page</span>
|
|
<span class="item-desc">Outcomes, skills, instructors, testimonials, and FAQs on the public path page.</span>
|
|
</div>
|
|
<div class="item-actions"><a class="btn btn-outline btn-sm" href="teacher-path-landing-editor.html">Customize<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 18l6-6-6-6"/></svg></a></div>
|
|
</div>
|
|
|
|
<div class="item item-muted">
|
|
<div class="item-media-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg></div>
|
|
<div class="item-content">
|
|
<span class="item-title">Activate the path</span>
|
|
<span class="item-desc">Set the status to Active so it appears on your landing page and LMS.</span>
|
|
</div>
|
|
<div class="item-actions"><a class="btn btn-outline btn-sm" href="teacher-path-settings.html">Activate<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 18l6-6-6-6"/></svg></a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card launch">
|
|
<div class="ring ring-sm">
|
|
<svg viewBox="0 0 100 100"><circle class="track" cx="50" cy="50" r="45" fill="none" stroke-width="10" /><circle class="arc" cx="50" cy="50" r="45" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="282.7" stroke-dashoffset="188.5" /></svg>
|
|
</div>
|
|
<div class="txt">
|
|
<b>4 steps left to launch</b>
|
|
<p>Order the courses, set a price, polish the landing page, and activate.</p>
|
|
</div>
|
|
<a class="btn btn-primary" href="teacher-path-settings.html">Activate now</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>
|