plan.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Pacing Plan Generator — AgenticEd</title>
  <meta name="description" content="Tell AgenticEd how many sessions you have and how long they are — get a printable week-by-week pacing plan for your class."/>
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
  <style>
    :root{--cream:#FAF9FF;--brown:#121526;--coral:#7C3AED;--coral-light:#F1E9FF;--amber:#A855F7;--warm:#646579;--border:#E4E1F0;--white:#FFFFFF;--light:#F3F0FA;}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--brown);line-height:1.7;-webkit-font-smoothing:antialiased;}
    .topbar{background:var(--brown);padding:10px 32px;display:flex;justify-content:space-between;align-items:center;}
    .topbar__logo{font-family:'Outfit',sans-serif;font-weight:900;font-size:16px;color:var(--cream);text-decoration:none;}
    .topbar__logo em{font-style:normal;color:var(--coral);}
    .topbar a.back{color:rgba(250,249,255,0.6);font-size:13px;text-decoration:none;}
    .topbar a.back:hover{color:var(--cream);}
    .lhdr{background:var(--brown);padding:44px 32px 48px;border-bottom:3px solid var(--coral);}
    .lhdr__inner{max-width:820px;margin:0 auto;}
    .lhdr__eye{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;}
    .lhdr__h1{font-family:'Outfit',sans-serif;font-size:clamp(28px,5vw,42px);font-weight:900;color:var(--cream);line-height:1.1;margin-bottom:14px;}
    .lhdr__sub{font-size:16px;color:rgba(250,249,255,0.72);max-width:640px;}
    .body{max-width:820px;margin:0 auto;padding:36px 32px 80px;}
    .form{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:26px;margin-bottom:28px;}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
    .field label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warm);margin-bottom:7px;}
    .field input,.field select{width:100%;background:var(--cream);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:15px;font-family:'Inter',sans-serif;color:var(--brown);outline:none;transition:border-color .18s;}
    .field input:focus,.field select:focus{border-color:var(--coral);}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;border:2px solid transparent;font-family:'Inter',sans-serif;transition:all .18s;}
    .btn--primary{background:var(--coral);color:#fff;}
    .btn--primary:hover{background:#6824D9;}
    .btn--ghost{background:transparent;color:var(--brown);border:2px solid var(--border);}
    .btn--ghost:hover{border-color:var(--brown);}
    .actions{display:flex;gap:12px;flex-wrap:wrap;}
    #out{display:none;}
    .summary{background:var(--coral-light);border-left:4px solid var(--coral);border-radius:0 10px 10px 0;padding:16px 20px;margin-bottom:22px;font-size:15px;}
    .summary b{color:var(--coral);}
    .sess{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:12px;display:flex;gap:16px;}
    .sess__n{flex-shrink:0;width:40px;height:40px;background:var(--brown);color:var(--cream);font-family:'Outfit',sans-serif;font-weight:900;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;}
    .sess__body{flex:1;}
    .sess__title{font-family:'Outfit',sans-serif;font-weight:800;font-size:16px;margin-bottom:4px;}
    .sess__detail{font-size:14px;color:var(--warm);}
    .sess__detail b{color:var(--brown);font-weight:600;}
    .note{font-size:13px;color:var(--warm);margin-top:8px;}
    .print-actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;}
    .lesson-footer{background:var(--brown);padding:24px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
    .lesson-footer a{color:rgba(250,249,255,0.5);font-size:13px;text-decoration:none;}
    .lesson-footer a:hover{color:var(--cream);}
    .lesson-footer__logo{font-family:'Outfit',sans-serif;font-weight:900;font-size:16px;color:var(--cream);}
    .lesson-footer__logo em{font-style:normal;color:var(--coral);}
    @media print{.topbar,.form,.lesson-footer,.print-actions,.lhdr__sub,.lhdr__eye{display:none!important;}.lhdr{padding:20px 32px;border:none;}.body{padding-top:20px;}}
    @media(max-width:700px){.body{padding:28px 18px 60px;}.lhdr{padding:32px 20px 36px;}.row{grid-template-columns:1fr;}}
  </style>
  <script src="metrics-config.js"></script><script src="analytics.js"></script>
  <link rel="icon" type="image/png" href="images/favicon.png"/>
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
  <style>.brand-mark{display:inline-block;height:1.6em;width:auto;vertical-align:middle;margin:-.2em .45em 0 0;}</style>
</head>
<body>
<div class="topbar">
  <a href="index.html" class="topbar__logo"><img class="brand-mark" src="images/agenticed-mark.png" alt="" aria-hidden="true"/>Agentic<em>Ed</em></a>
  <a href="index.html" class="back">← Back to Course</a>
</div>
<div class="lhdr">
  <div class="lhdr__inner">
    <p class="lhdr__eye">Plan Your Term</p>
    <h1 class="lhdr__h1">Pacing plan generator</h1>
    <p class="lhdr__sub">Tell it how much class time you have — get a session-by-session plan you can print and follow.</p>
  </div>
</div>
<div class="body">

  <div class="form">
    <div class="row">
      <div class="field"><label for="sessions">How many class sessions can you give it?</label><input type="number" id="sessions" min="3" max="24" value="6"/></div>
      <div class="field"><label for="minutes">How long is each session?</label>
        <select id="minutes"><option value="45">45 minutes</option><option value="60">60 minutes</option><option value="75" selected>75 minutes</option><option value="90">90 minutes</option></select>
      </div>
    </div>
    <div class="row">
      <div class="field"><label for="freq">How often do you meet?</label>
        <select id="freq"><option>Once a week</option><option>Twice a week</option><option>Daily</option><option>Block schedule</option></select>
      </div>
      <div class="field"><label for="depth">Emphasis</label>
        <select id="depth"><option value="balanced">Balanced — concepts + building</option><option value="build">More hands-on building</option><option value="discuss">More discussion + ethics</option></select>
      </div>
    </div>
    <div class="actions">
      <button class="btn btn--primary" id="gen">Generate my plan →</button>
      <button class="btn btn--ghost" id="reset">Reset</button>
    </div>
  </div>

  <div id="out">
    <div class="summary" id="summary"></div>
    <div id="sessions-out"></div>
    <p class="note" id="tail-note"></p>
    <div class="print-actions">
      <button class="btn btn--primary" onclick="window.print()">Print / Save as PDF</button>
    </div>
  </div>

</div>
<div class="lesson-footer">
  <a href="index.html" class="lesson-footer__logo"><img class="brand-mark" src="images/agenticed-mark.png" alt="" aria-hidden="true"/>Agentic<em>Ed</em></a>
  <div style="display:flex;gap:20px;">
    <a href="index.html">← Back to Course</a>
    <a href="faq.html">FAQ</a>
    <a href="mailto:hello@agenticed.org">hello@agenticed.org</a>
  </div>
</div>
<script>
(function(){
  var WEEKS=[
    {t:"Week 1 — What Is an AI Agent?",core:"Think → Act → Observe loop + the Agent Hunt activity",trim:"the extended group exploration",disc:"the “Who owns this agent’s decisions?” beat"},
    {t:"Week 2 — The Brain Behind the Agent",core:"How LLMs work, hallucination, one prompt round",trim:"run only Round 1 of the prompt challenge",disc:"the Wrong-vs-Harmful 2×2"},
    {t:"Week 3 — Tools & Memory",core:"RAG demo (NotebookLM/Perplexity) + debrief",trim:"skip the optional Memory Bot (Part B)",disc:"what to verify before acting on AI"},
    {t:"Week 4 — Multi-Agent Systems",core:"Pipeline design + checkpoint annotation",trim:"shorten the gallery walk",disc:"where a human must approve"},
    {t:"Week 5 — Build Your First Agent",core:"Build session + Demo Day",trim:"reduce build time; demo in small groups",disc:"the three accountability questions"},
    {t:"Week 6 — AI Safety, Ethics & Your Future",core:"Risk lecture + the ethics debate",trim:"shorten final reflection to an exit ticket",disc:"careers in responsible AI"}
  ];
  var $=function(id){return document.getElementById(id);};

  function build(){
    var n=Math.max(3,Math.min(24,parseInt($("sessions").value,10)||6));
    var mins=parseInt($("minutes").value,10);
    var freq=$("freq").value;
    var depth=$("depth").value;

    var summary="Plan for <b>"+n+" sessions</b> of <b>"+mins+" min</b> ("+freq.toLowerCase()+"), "+
      (depth==="build"?"weighted toward hands-on building":depth==="discuss"?"weighted toward discussion & ethics":"balanced between concepts and building")+".";
    $("summary").innerHTML=summary;

    var out="";
    var tail="";
    if(n>=6){
      // One or more sessions per week; distribute extras to Week 5 (build) first, then 2/3
      var extra=n-6;
      var perWeek=[1,1,1,1,1,1];
      var order=[4,2,1,4,0,5]; // Week 5, 3, 2, 5, 1, 6 get extras first
      for(var e=0;e<extra;e++){perWeek[order[e%order.length]]++;}
      var s=1;
      for(var w=0;w<6;w++){
        for(var part=0;part<perWeek[w];part++){
          var label=perWeek[w]>1?WEEKS[w].t+"  (part "+(part+1)+" of "+perWeek[w]+")":WEEKS[w].t;
          var detail=part===0?("<b>Focus:</b> "+WEEKS[w].core):("<b>Continue:</b> more build/practice + share-out");
          if(depth==="discuss")detail+="  ·  <b>Emphasis:</b> "+WEEKS[w].disc;
          out+=card(s,label,detail);
          s++;
        }
      }
      tail="Extra sessions were added to the building-heavy weeks first. Each week's page has a full lesson outline and teacher notes.";
    } else {
      // Fewer than 6 sessions: use the 45-minute compressed track, combine weeks
      var groups=(n===3)?[[0,1],[2,3],[4,5]]
               :(n===4)?[[0,1],[2],[3],[4,5]]
               :[[0],[1],[2,3],[4],[5]]; // n===5
      for(var g=0;g<groups.length;g++){
        var wk=groups[g];
        var title=wk.length>1?(WEEKS[wk[0]].t.split(" — ")[0]+" + "+WEEKS[wk[1]].t.split(" — ")[0]):WEEKS[wk[0]].t;
        var det="<b>Core only:</b> "+wk.map(function(i){return WEEKS[i].core;}).join("  ·  ");
        if(wk.length>1)det+="  ·  <b>Trim:</b> "+WEEKS[wk[wk.length-1]].trim;
        out+=card(g+1,title,det);
      }
      tail="With fewer than 6 sessions the plan uses the 45-minute compressed track and combines weeks. Full 45-min guidance is in the curriculum guide.";
    }
    if(depth==="build"){tail+=" Build emphasis: protect the Week 5 build/demo time above all.";}
    $("sessions-out").innerHTML=out;
    $("tail-note").textContent=tail;
    $("out").style.display="block";
    $("out").scrollIntoView({behavior:"smooth",block:"start"});
  }
  function card(n,title,detail){
    return '<div class="sess"><div class="sess__n">'+n+'</div><div class="sess__body">'+
      '<div class="sess__title">'+title+'</div><div class="sess__detail">'+detail+'</div></div></div>';
  }
  $("gen").addEventListener("click",build);
  $("reset").addEventListener("click",function(){$("out").style.display="none";$("sessions").value=6;$("minutes").value="75";});
})();
</script>
</body>
</html>