<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Course Curriculum</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  html, body { margin: 0; padding: 0; background: oklch(99% 0.003 250); }
  #root { min-height: 100vh; }
</style>
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const cTeal='oklch(62% 0.09 190)', cTealDk='oklch(50% 0.10 190)',
  cInk='oklch(20% 0.01 250)', cMute='oklch(48% 0.01 250)',
  cFaint='oklch(65% 0.008 250)', cLine='oklch(92% 0.005 250)',
  cLineHi='oklch(88% 0.005 250)', cPaper='oklch(99% 0.003 250)',
  cSurface='oklch(97.5% 0.004 250)', cBar='oklch(20% 0.02 250)',
  cHighlightBg='oklch(96% 0.03 190)';
const UI_FONT='"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
const UI_MONO='"Geist Mono", "SF Mono", ui-monospace, monospace';

const CI = {
  back:(c='#fff')=>(<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M8.5 3L4.5 7l4 4M4.5 7h6.5"/></svg>),
  chev:(c='currentColor',rot=0)=>(<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{transform:`rotate(${rot}deg)`,transition:'transform .2s'}}><path d="M3.5 5.5L7 9l3.5-3.5" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  play:(c='#fff',s=10)=>(<svg width={s} height={s} viewBox="0 0 10 10"><path d="M3 2l5 3-5 3V2z" fill={c}/></svg>),
  doc:(c='currentColor')=>(<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke={c} strokeWidth="1.4" strokeLinejoin="round"><path d="M3.5 2h4.5l3 3v7H3.5V2z"/><path d="M8 2v3h3" strokeLinecap="round"/><path d="M5 7.5h4M5 9.5h3" strokeLinecap="round"/></svg>),
  vid:(c='currentColor')=>(<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke={c} strokeWidth="1.4"><rect x="2" y="3.5" width="8" height="7" rx="1"/><path d="M10 6l2.5-1.5v5L10 8z" strokeLinejoin="round"/></svg>),
  quiz:(c='currentColor')=>(<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke={c} strokeWidth="1.4" strokeLinecap="round"><path d="M5 5a2 2 0 113 1.6c-.5.3-1 .7-1 1.4"/><circle cx="7" cy="10.5" r=".6" fill={c} stroke="none"/></svg>),
  overview:(c='currentColor')=>(<svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke={c} strokeWidth="1.4"><rect x="2" y="3" width="11" height="9" rx="1.3"/><path d="M2 5.5h11M4.5 8h3M4.5 10h5" strokeLinecap="round"/></svg>),
  user:(c='currentColor')=>(<svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke={c} strokeWidth="1.4"><circle cx="7.5" cy="5.5" r="2.3"/><path d="M3 12.5c.7-2.1 2.5-3.2 4.5-3.2s3.8 1.1 4.5 3.2" strokeLinecap="round"/></svg>),
  book:(c='currentColor')=>(<svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke={c} strokeWidth="1.4"><path d="M3 3h6a2 2 0 012 2v7H5a2 2 0 01-2-2V3zM3 10a2 2 0 012-2h6" strokeLinejoin="round"/></svg>),
  chevDown:(c='currentColor')=>(<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></svg>),
};

function TopBar(){return(<div style={{height:52,background:cBar,color:'#fff',display:'flex',alignItems:'center',padding:'0 20px',gap:14,fontFamily:UI_FONT,fontSize:13}}>
  <button style={{width:26,height:26,borderRadius:13,border:'none',background:'rgba(255,255,255,.08)',color:'#fff',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}>{CI.back()}</button>
  <div style={{display:'flex',alignItems:'center',gap:8}}><div style={{width:22,height:22,borderRadius:6,background:'linear-gradient(135deg,#fff 0%,rgba(255,255,255,.55) 100%)',display:'flex',alignItems:'center',justifyContent:'center'}}><svg width="11" height="11" viewBox="0 0 14 14" fill="none"><path d="M3 3.5l4 7 4-7" stroke={cBar} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></div><span style={{fontWeight:600,letterSpacing:-0.2}}>Academy</span></div>
  <div style={{flex:1}}/>
  <span style={{color:'rgba(255,255,255,.6)',fontSize:12}}>Preview as</span>
  <span style={{color:'rgba(255,255,255,.85)',fontSize:12,display:'inline-flex',alignItems:'center',gap:4}}>Student {CI.chevDown('rgba(255,255,255,.7)')}</span>
  <div style={{width:28,height:28,borderRadius:14,background:'oklch(75% 0.08 40)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:600,color:'#fff'}}>ES</div>
</div>);}

function LeftRail(){const nav=[{icon:CI.overview,label:'Course Overview',active:true},{icon:CI.user,label:'Your Instructor'},{icon:CI.book,label:'Syllabus'}];
  return(<aside style={{width:268,background:cSurface,borderRight:`1px solid ${cLine}`,fontFamily:UI_FONT,display:'flex',flexDirection:'column'}}>
    <div style={{padding:'28px 24px 20px',borderBottom:`1px solid ${cLine}`}}>
      <div style={{fontSize:11,letterSpacing:1.4,textTransform:'uppercase',color:cFaint,fontWeight:600,marginBottom:6}}>Course</div>
      <div style={{fontSize:22,fontWeight:600,letterSpacing:-0.6,color:cInk,lineHeight:1.15}}>Foundations of Product Design</div>
      <div style={{marginTop:20}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6}}><span style={{fontSize:12,color:cInk,fontWeight:500}}>20% complete</span><span style={{fontSize:11,color:cMute,fontFamily:UI_MONO}}>1 / 5</span></div>
        <div style={{height:4,borderRadius:2,background:cLineHi,overflow:'hidden'}}><div style={{width:'20%',height:'100%',background:`linear-gradient(90deg,${cTeal},${cTealDk})`}}/></div>
      </div>
    </div>
    <nav style={{padding:'14px 12px',display:'flex',flexDirection:'column',gap:2}}>{nav.map((n,i)=>(
      <div key={i} style={{display:'flex',alignItems:'center',gap:10,padding:'9px 12px',borderRadius:8,cursor:'pointer',background:n.active?'#fff':'transparent',color:n.active?cInk:cMute,fontSize:13,fontWeight:n.active?500:400,boxShadow:n.active?`inset 0 0 0 1px ${cLine}, 0 1px 2px rgba(0,0,0,.03)`:'none'}}><span style={{color:n.active?cTealDk:cFaint}}>{n.icon()}</span><span>{n.label}</span></div>
    ))}</nav>
    <div style={{flex:1}}/>
    <div style={{padding:'16px 20px',borderTop:`1px solid ${cLine}`,display:'flex',alignItems:'center',gap:10}}>
      <div style={{width:28,height:28,borderRadius:14,background:'oklch(75% 0.08 40)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:600}}>ES</div>
      <div style={{fontSize:12,lineHeight:1.35}}><div style={{color:cInk,fontWeight:500}}>Elena Sato</div><div style={{color:cFaint,fontSize:11}}>Student</div></div>
    </div>
  </aside>);}

function LessonRow({idx,title,kind='doc',duration,state}){
  const Icon=kind==='video'?CI.vid:kind==='quiz'?CI.quiz:CI.doc;
  const kindLabel=kind==='video'?'Video':kind==='quiz'?'Quiz':'Reading';
  const bg=state==='next'?cHighlightBg:'transparent';
  const border=state==='next'?`1px solid oklch(85% 0.05 190)`:`1px solid transparent`;
  const bullet=(()=>{
    if(state==='done')return(<div style={{width:22,height:22,borderRadius:11,background:cTealDk,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M3 6l2.2 2.2L9 4" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></div>);
    if(state==='next')return(<div style={{width:22,height:22,borderRadius:11,border:`1.5px solid ${cTealDk}`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><div style={{width:8,height:8,borderRadius:4,background:cTealDk}}/></div>);
    if(state==='locked')return(<div style={{width:22,height:22,borderRadius:11,border:`1.5px dashed ${cFaint}`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke={cFaint} strokeWidth="1.3"><rect x="2" y="4.5" width="6" height="3.5" rx=".8"/><path d="M3 4.5V3a2 2 0 014 0v1.5"/></svg></div>);
    return <div style={{width:22,height:22,borderRadius:11,border:`1.5px solid ${cLineHi}`,flexShrink:0}}/>;
  })();
  const muted=state==='done'||state==='locked';
  const titleColor=state==='locked'?cFaint:muted?cMute:cInk;
  return(<div style={{display:'flex',alignItems:'center',gap:14,padding:'13px 18px 13px 20px',borderRadius:10,background:bg,border,cursor:state==='locked'?'default':'pointer'}}>
    {bullet}
    <span style={{fontFamily:UI_MONO,fontSize:11,color:cFaint,width:26,flexShrink:0}}>{String(idx).padStart(2,'0')}</span>
    <div style={{color:cFaint,flexShrink:0}}><Icon/></div>
    <div style={{flex:1,minWidth:0}}>
      <div style={{fontSize:14,fontWeight:500,color:titleColor,textDecoration:state==='done'?'line-through':'none',textDecorationColor:'oklch(80% 0.01 250)'}}>{title}</div>
      <div style={{fontSize:11,color:cFaint,marginTop:2,display:'flex',alignItems:'center',gap:8}}><span>{kindLabel}</span><span style={{opacity:.4}}>·</span><span style={{fontFamily:UI_MONO}}>{duration}</span>{state==='done'&&(<><span style={{opacity:.4}}>·</span><span style={{color:cTealDk}}>Completed</span></>)}</div>
    </div>
    {state==='locked'?(<span style={{fontSize:11,color:cFaint,fontFamily:UI_MONO}}>Locked</span>):state==='done'?(<button style={{padding:'7px 14px',borderRadius:7,border:`1px solid ${cLineHi}`,background:'#fff',color:cInk,cursor:'pointer',fontFamily:UI_FONT,fontSize:12,fontWeight:500}}>Review</button>):(<button style={{padding:'7px 16px',borderRadius:7,border:'none',background:state==='next'?cTealDk:'#fff',color:state==='next'?'#fff':cInk,boxShadow:state==='next'?'none':`inset 0 0 0 1px ${cLineHi}`,cursor:'pointer',fontFamily:UI_FONT,fontSize:12,fontWeight:500,display:'inline-flex',alignItems:'center',gap:6}}>{state==='next'&&CI.play('#fff',9)}{state==='next'?'Start':'Begin'}</button>)}
  </div>);
}

function Section({n,title,subtitle,meta,open=true,children}){
  return(<section style={{background:'#fff',border:`1px solid ${cLine}`,borderRadius:12,boxShadow:'0 1px 2px rgba(10,14,30,.02)',overflow:'hidden',marginBottom:14}}>
    <header style={{display:'flex',alignItems:'center',gap:14,padding:'16px 20px',borderBottom:open?`1px solid ${cLine}`:'none',background:open?'#fff':cSurface,cursor:'pointer'}}>
      <span style={{fontFamily:UI_MONO,fontSize:12,fontWeight:500,color:cTealDk,width:28,letterSpacing:0.2}}>{n}</span>
      <div style={{flex:1}}><div style={{fontSize:15,fontWeight:600,color:cInk,letterSpacing:-0.2}}>{title}</div>{subtitle&&<div style={{fontSize:12,color:cMute,marginTop:2}}>{subtitle}</div>}</div>
      <span style={{fontSize:11,color:cFaint,fontFamily:UI_MONO}}>{meta}</span>
      <span style={{color:cFaint,display:'inline-flex'}}>{CI.chev(cFaint,open?0:-90)}</span>
    </header>
    {open&&<div style={{padding:8}}>{children}</div>}
  </section>);
}

function Curriculum(){return(<main style={{flex:1,background:cPaper,fontFamily:UI_FONT,display:'flex',flexDirection:'column'}}>
  <div style={{padding:'40px 56px 24px',maxWidth:860}}>
    <div style={{fontSize:12,letterSpacing:1.4,textTransform:'uppercase',color:cTealDk,fontWeight:600,marginBottom:10}}>Curriculum</div>
    <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',gap:24}}>
      <h1 style={{margin:0,fontSize:36,fontWeight:600,letterSpacing:-1,color:cInk,lineHeight:1.1}}>Course Curriculum</h1>
      <div style={{fontSize:13,color:cMute,fontFamily:UI_MONO,whiteSpace:'nowrap'}}>5 lessons · 1h 12m</div>
    </div>
    <p style={{margin:'12px 0 0',fontSize:14,color:cMute,lineHeight:1.55,maxWidth:560}}>A hands-on introduction to color in product design — covering perception, systems, and accessibility. Work through each section at your own pace; progress saves automatically.</p>
  </div>
  <div style={{padding:'0 56px 28px'}}>
    <div style={{display:'flex',alignItems:'center',gap:14,padding:6,background:'#fff',border:`1px solid ${cLine}`,borderRadius:99,boxShadow:'0 1px 2px rgba(10,14,30,.02)',maxWidth:560}}>
      <button style={{display:'inline-flex',alignItems:'center',gap:8,padding:'10px 18px',borderRadius:99,border:'none',background:cTealDk,color:'#fff',cursor:'pointer',fontFamily:UI_FONT,fontSize:13,fontWeight:500}}>{CI.play('#fff',10)} Start next lesson</button>
      <div style={{flex:1,fontSize:13,color:cInk,minWidth:0,display:'flex',alignItems:'baseline',gap:8}}><span style={{color:cFaint,fontFamily:UI_MONO,fontSize:11}}>NEXT</span><span style={{fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>What is green?</span></div>
      <span style={{fontSize:11,color:cFaint,fontFamily:UI_MONO,paddingRight:14}}>8 min</span>
    </div>
  </div>
  <div style={{padding:'0 56px 56px'}}>
    <Section n="01" title="Intro" subtitle="Get oriented with the basics of green." meta="2 lessons · 14m" open>
      <LessonRow idx={1} title="What is green?" kind="video" duration="8 min" state="next" />
      <LessonRow idx={2} title="Features of green" kind="doc" duration="6 min" state="todo" />
    </Section>
    <Section n="02" title="Main" subtitle="Go deeper into theory and perception." meta="3 lessons · 58m" open>
      <LessonRow idx={3} title="First explanation" kind="doc" duration="12 min" state="todo" />
      <LessonRow idx={4} title="Green in nature & culture" kind="video" duration="22 min" state="todo" />
      <LessonRow idx={5} title="Knowledge check" kind="quiz" duration="24 min" state="locked" />
    </Section>
  </div>
</main>);}

function App(){return(<div style={{minHeight:'100vh',display:'flex',flexDirection:'column',background:cPaper,fontFamily:UI_FONT,color:cInk}}>
  <TopBar/>
  <div style={{flex:1,display:'flex'}}><LeftRail/><Curriculum/></div>
</div>);}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>
