[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_254":255,"_256":257},"routes/_app.x.$handle.$name",{"_106":105,"_32":46,"_114":92,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_20":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":61,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",78,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/Modules.tsx","latestPath","fileId","8f199b98-8c53-11f1-9c08-1607ee4eb77e","name","Modules.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\nimport { FirstWebsiteApp } from \"./App.tsx\";\n\ntype ModuleName = \"hub\" | \"first\" | \"hypertext\" | \"adventure\" | \"poetry\" | \"reference\";\n\nconst fontLink = \"https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;700&family=Chewy&family=Comic+Neue:wght@400;700&family=Nunito:wght@400;700;900&family=Patrick+Hand&family=Special+Elite&display=swap\";\n\nfunction escapeHTML(value: string) {\n return value.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n}\n\nfunction downloadHTML(name: string, html: string) {\n const blob = new Blob([html], { type: \"text/html\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = name;\n link.click();\n URL.revokeObjectURL(url);\n}\n\nconst pageShell = (title: string, body: string, extraCSS = \"\") => `\n\n\n \n \n ${escapeHTML(title)}\n \n \n\n${body}\n`;\n\nfunction Board({ children }: { children: any }) {\n return (\n

\n {children}\n

\n );\n}\n\nfunction BackButton({ onBack }: { onBack: () => void }) {\n return ;\n}\n\nfunction LabShell({ title, subtitle, color, onBack, children }: any) {\n return (\n \n \n

WRITING LAB

{title}

{subtitle}

{children}

\n \n );\n}\n\nfunction Paper({ children, pin = \"red\" }: { children: any; pin?: string }) {\n return (\n

\n \n {children}\n

\n );\n}\n\nfunction Field({ label, value, onChange, placeholder, rows = 1 }: any) {\n const cls = \"w-full bg-[#fffef8] border-0 border-b-2 border-[#6f9bd1] focus:border-[#ef5138] focus:outline-none px-3 py-3 text-lg\";\n return (\n \n {label}\n {rows > 1\n ?

onChange(e.target.value)} placeholder={placeholder} />\n        : <input className={cls} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />}\n    </label>\n  );\n}\n\nfunction Tags({ items }: { items: { code: string; text: string }[] }) {\n  return (\n    <div className=\"bg-[#ffe17a] border-4 border-[#17233c] p-4 my-5 shadow-[5px_5px_0_#2878d0]\">\n      <p className=\"font-black text-lg mb-3\">🧱 HTML building blocks</p>\n      <div className=\"space-y-2\">\n        {items.map((item) => <div key={item.code} className=\"flex gap-3 items-start\"><code className=\"bg-[#17233c] text-white px-2 py-1 whitespace-nowrap\">{item.code}</code><p className=\"font-bold\">{item.text}</p></div>)}\n      </div>\n    </div>\n  );\n}\n\nfunction Preview({ html }: { html: string }) {\n  const previewHTML = html.replace(\"</body>\", `\n    <script>\n      document.addEventListener(\"click\", (event) => {\n        const link = event.target instanceof Element\n          ? event.target.closest('a[href^=\"#\"]')\n          : null;\n        if (!link) return;\n\n        const href = link.getAttribute(\"href\");\n        event.preventDefault();\n\n        if (href === \"#\") {\n          window.scrollTo({ top: 0, behavior: \"smooth\" });\n          return;\n        }\n\n        const target = document.getElementById(decodeURIComponent(href.slice(1)));\n        target?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      });\n    </script>\n  </body>`);\n\n  return (\n    <div className=\"bg-[#17233c] border-[10px] border-[#ef5138] shadow-[9px_9px_0_#17233c] sticky top-20\">\n      <div className=\"text-white px-3 py-2 font-black text-sm\">● ● ●   LIVE WEBPAGE</div>\n      <iframe title=\"Live webpage preview\" className=\"w-full h-[650px] bg-white\" sandbox=\"allow-scripts allow-same-origin allow-presentation\" srcDoc={previewHTML} />\n    </div>\n  );\n}\n\nfunction safeAssetName(name: string) {\n  const dot = name.lastIndexOf(\".\");\n  const extension = dot >= 0 ? name.slice(dot).toLowerCase().replace(/[^a-z0-9.]/g, \"\") : \"\";\n  const base = (dot >= 0 ? name.slice(0, dot) : name)\n    .toLowerCase()\n    .trim()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-|-$/g, \"\") || \"media\";\n  return base + extension;\n}\n\nfunction youtubeEmbedUrl(value: string) {\n  if (!value.trim()) return \"\";\n  try {\n    const url = new URL(value.trim());\n    let id = \"\";\n    if (url.hostname === \"youtu.be\") id = url.pathname.slice(1).split(\"/\")[0];\n    if (url.hostname.endsWith(\"youtube.com\")) {\n      id = url.searchParams.get(\"v\") || \"\";\n      if (!id && (url.pathname.startsWith(\"/shorts/\") || url.pathname.startsWith(\"/embed/\"))) {\n        id = url.pathname.split(\"/\")[2] || \"\";\n      }\n    }\n    return /^[a-zA-Z0-9_-]{6,}$/.test(id)\n      ? \"https://www.youtube-nocookie.com/embed/\" + id\n      : \"\";\n  } catch {\n    return \"\";\n  }\n}\n\nasync function downloadProject(name: string, html: string, assets: { file: File; path: string }[]) {\n  if (!assets.length) {\n    downloadHTML(name, html);\n    return;\n  }\n\n  const zip = new JSZip();\n  zip.file(\"index.html\", html);\n  assets.forEach(({ file, path }) => zip.file(path, file));\n  zip.file(\"README.txt\", \"Open index.html in a browser. Keep the media folder beside index.html.\");\n\n  const blob = await zip.generateAsync({ type: \"blob\" });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.download = name.replace(/\\.html$/, \".zip\");\n  link.click();\n  URL.revokeObjectURL(url);\n}\n\nfunction DownloadButton({\n  name,\n  html,\n  assets = [],\n}: {\n  name: string;\n  html: string;\n  assets?: { file: File; path: string }[];\n}) {\n  return (\n    <button\n      onClick={() => downloadProject(name, html, assets)}\n      className=\"w-full mt-5 bg-[#ef5138] text-white border-4 border-[#17233c] px-5 py-4 font-black text-lg shadow-[5px_5px_0_#17233c]\"\n    >\n      {assets.length ? \"Download my webpage and media (.zip)\" : \"Download my HTML page\"}\n    </button>\n  );\n}\n\nfunction ModuleHub({ choose }: { choose: (module: ModuleName) => void }) {\n  const cards = [\n    { id: \"first\", icon: \"🧱\", title: \"Make Your First Website\", text: \"Build two pages about something you love.\", color: \"bg-[#ffe17a]\" },\n    { id: \"hypertext\", icon: \"🕸️\", title: \"Tell a Hypertext Story\", text: \"Connect scenes and mix words with pictures, sound, and video.\", color: \"bg-[#a9d8ff]\" },\n    { id: \"adventure\", icon: \"🗺️\", title: \"Choose Your Own Adventure\", text: \"Write choices that send readers down different paths.\", color: \"bg-[#b9e6bd]\" },\n    { id: \"poetry\", icon: \"✍️\", title: \"Make a Web Poem\", text: \"Use spacing, emphasis, pictures, and sound to perform a poem.\", color: \"bg-[#ffb8c2]\" },\n    { id: \"reference\", icon: \"📌\", title: \"HTML Snippet Board\", text: \"Find, understand, and copy useful HTML building blocks.\", color: \"bg-[#d7c0f4]\" },\n  ] as const;\n  return (\n    <Board>\n      <main className=\"max-w-6xl mx-auto px-4 py-8 md:py-12\">\n        <div className=\"bg-[#fffdf3] border-4 border-[#17233c] p-6 md:p-8 shadow-[10px_10px_0_#ef5138] relative mb-8\">\n          <span className=\"absolute -top-4 left-1/2 w-7 h-7 rounded-full bg-[#f3c623] border-2 border-[#8a6312]\" />\n          <p className=\"text-[#2878d0] font-black tracking-widest\">WELCOME TO THE</p>\n          <h1 className=\"text-4xl md:text-6xl font-black\">HTML Writing Lab</h1>\n          <p className=\"text-xl font-bold mt-2\">Choose an activity. Write something that could only exist on the web.</p>\n        </div>\n        <div className=\"grid md:grid-cols-2 gap-6\">\n          {cards.map((card, i) => (\n            <button key={card.id} onClick={() => choose(card.id)} className={`${card.color} border-4 border-[#17233c] p-6 text-left shadow-[7px_7px_0_#17233c] hover:-translate-y-1 transition-transform relative ${i % 2 ? \"rotate-[0.4deg]\" : \"-rotate-[0.4deg]\"}`}>\n              <span className=\"absolute -top-3 right-8 w-6 h-6 rounded-full bg-[#ef5138] border-2 border-[#8f2618]\" />\n              <span className=\"text-5xl\">{card.icon}</span>\n              <h2 className=\"text-2xl font-black mt-3\">{card.title}</h2>\n              <p className=\"font-bold mt-2\">{card.text}</p>\n            </button>\n          ))}\n        </div>\n      </main>\n    </Board>\n  );\n}\n\nfunction HypertextLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"The Door Behind the Bookshelf\");\n  const [opening, setOpening] = useState(\"I pulled the oldest book, and the whole shelf swung open.\");\n  const [scene, setScene] = useState(\"Behind it was a blue hallway humming like a refrigerator.\");\n  const [ending, setEnding] = useState(\"At the end of the hallway, I found a room full of tiny suns.\");\n  const [image, setImage] = useState(\"🚪\");\n  const [imageUrl, setImageUrl] = useState(\"\");\n  const [imageAlt, setImageAlt] = useState(\"An old wooden door\");\n  const [audio, setAudio] = useState(\"\");\n  const [video, setVideo] = useState(\"\");\n  const [imageFile, setImageFile] = useState<File | null>(null);\n  const [audioFile, setAudioFile] = useState<File | null>(null);\n  const [videoFile, setVideoFile] = useState<File | null>(null);\n\n  const imagePath = imageFile ? \"media/\" + safeAssetName(imageFile.name) : \"\";\n  const audioPath = audioFile ? \"media/\" + safeAssetName(audioFile.name) : \"\";\n  const videoPath = videoFile ? \"media/\" + safeAssetName(videoFile.name) : \"\";\n  const youtubeVideo = youtubeEmbedUrl(video);\n  const html = useMemo(() => pageShell(title, `\n    <h1>${escapeHTML(title)}</h1>\n    <p>${escapeHTML(opening)} <a href=\"#discovery\">Follow the strange sound ↓</a></p>\n    ${imageUrl ? `<img src=\"${escapeHTML(imageUrl)}\" alt=\"${escapeHTML(imageAlt)}\">` : `<div role=\"img\" aria-label=\"${escapeHTML(imageAlt)}\" style=\"font-size:7rem\">${escapeHTML(image)}</div>`}\n    <section id=\"discovery\">\n      <h2>The discovery</h2>\n      <p>${escapeHTML(scene)}</p>\n      ${audio ? `<audio controls src=\"${escapeHTML(audio)}\">Your browser cannot play this sound.</audio>` : \"\"}\n      ${youtubeVideo ? `<iframe class=\"youtube\" src=\"${escapeHTML(youtubeVideo)}\" title=\"YouTube video\" referrerpolicy=\"strict-origin-when-cross-origin\" allow=\"accelerometer; autoplay; encrypted-media; picture-in-picture\" allowfullscreen></iframe>` : video ? `<video controls src=\"${escapeHTML(video)}\">Your browser cannot play this video.</video>` : \"\"}\n      <p><a href=\"#ending\">See what happened next ↓</a></p>\n    </section>\n    <section id=\"ending\"><h2>The ending</h2><p>${escapeHTML(ending)}</p><a href=\"#\">Read it again ↑</a></section>\n  `, `html { scroll-behavior:smooth; } audio { width:100%; margin:16px 0; } .youtube { width:100%; aspect-ratio:16/9; border:0; margin:16px 0; }`), [title, opening, scene, ending, image, imageUrl, imageAlt, audio, video, youtubeVideo]);\n\n  let downloadableHTML = html;\n  if (imageFile && imageUrl) downloadableHTML = downloadableHTML.replaceAll(imageUrl, imagePath);\n  if (audioFile && audio) downloadableHTML = downloadableHTML.replaceAll(audio, audioPath);\n  if (videoFile && video) downloadableHTML = downloadableHTML.replaceAll(video, videoPath);\n\n  const assets = [\n    ...(imageFile ? [{ file: imageFile, path: imagePath }] : []),\n    ...(audioFile ? [{ file: audioFile, path: audioPath }] : []),\n    ...(videoFile ? [{ file: videoFile, path: videoPath }] : []),\n  ];\n\n  return (\n    <LabShell title=\"Tell a Hypertext Story\" subtitle=\"Make a story readers move through instead of only reading top to bottom.\" color=\"bg-[#a9d8ff]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper>\n          <h2 className=\"text-3xl font-black\">1. Write three connected scenes</h2>\n          <p className=\"font-bold mb-4\">Links can jump to named places inside the same page. That gives your reader control over movement.</p>\n          <Tags items={[\n            { code: \"<a>\", text: \"Creates the words a reader can click.\" },\n            { code: \"href=\\\"#ending\\\"\", text: \"Jumps to the element named ending.\" },\n            { code: \"id=\\\"ending\\\"\", text: \"Gives a place on the page a name.\" },\n            { code: \"<section>\", text: \"Groups one scene or part of the story.\" },\n          ]} />\n          <Field label=\"Story title\" value={title} onChange={setTitle} />\n          <Field label=\"Opening scene\" rows={3} value={opening} onChange={setOpening} />\n          <Field label=\"What does the reader discover?\" rows={3} value={scene} onChange={setScene} />\n          <Field label=\"How does it end?\" rows={3} value={ending} onChange={setEnding} />\n          <h2 className=\"text-3xl font-black mt-8\">2. Tell it with more than words</h2>\n          <Tags items={[\n            { code: \"<img>\", text: \"Embeds a picture.\" },\n            { code: \"<audio controls>\", text: \"Adds a playable sound.\" },\n            { code: \"<video controls>\", text: \"Adds a playable video.\" },\n            { code: \"alt=\\\"…\\\"\", text: \"Describes a picture for readers who cannot see it.\" },\n          ]} />\n          <Field label=\"Simple picture or emoji\" value={image} onChange={setImage} />\n          <Field label=\"Describe the picture\" value={imageAlt} onChange={setImageAlt} />\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🖼️ Add a picture</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {imageFile ? `Chosen: ${imageFile.name}` : \"Choose from Photos or Files\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"image/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (imageUrl.startsWith(\"blob:\")) URL.revokeObjectURL(imageUrl);\n                setImageFile(file);\n                setImageUrl(URL.createObjectURL(file));\n              }} />\n            </label>\n            {imageFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(imageUrl); setImageFile(null); setImageUrl(\"\"); }} className=\"mb-3 underline font-bold\">Remove picture</button>}\n            <Field label=\"Or use a picture web address\" value={imageFile ? \"\" : imageUrl} onChange={(value: string) => { setImageFile(null); setImageUrl(value); }} placeholder=\"https://example.com/picture.jpg\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🔊 Add a sound</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {audioFile ? `Chosen: ${audioFile.name}` : \"Choose an audio file from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"audio/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (audio.startsWith(\"blob:\")) URL.revokeObjectURL(audio);\n                setAudioFile(file);\n                setAudio(URL.createObjectURL(file));\n              }} />\n            </label>\n            {audioFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(audio); setAudioFile(null); setAudio(\"\"); }} className=\"mb-3 underline font-bold\">Remove sound</button>}\n            <Field label=\"Or use a sound web address\" value={audioFile ? \"\" : audio} onChange={(value: string) => { setAudioFile(null); setAudio(value); }} placeholder=\"https://example.com/sound.mp3\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🎥 Add a video</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {videoFile ? `Chosen: ${videoFile.name}` : \"Choose a video from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"video/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (video.startsWith(\"blob:\")) URL.revokeObjectURL(video);\n                setVideoFile(file);\n                setVideo(URL.createObjectURL(file));\n              }} />\n            </label>\n            {videoFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(video); setVideoFile(null); setVideo(\"\"); }} className=\"mb-3 underline font-bold\">Remove video</button>}\n            <Field label=\"Or paste a direct video or YouTube address\" value={videoFile ? \"\" : video} onChange={(value: string) => { setVideoFile(null); setVideo(value); }} placeholder=\"https://youtube.com/watch?v=...\" />\n            {video && !videoFile && video.includes(\"youtu\") && !youtubeVideo && <p className=\"text-sm font-bold text-[#8f2618]\">That does not look like a complete YouTube address yet.</p>}\n            {videoFile && videoFile.size > 50 * 1024 * 1024 && <p className=\"text-sm font-bold text-[#8f2618]\">This video is larger than 50 MB, so creating the ZIP may take a while.</p>}\n          </details>\n          <p className=\"text-sm font-bold bg-[#ffdfdf] border-2 border-[#ef5138] p-3\">Ask a grown-up before using media from the web. Use files you made or have permission to share.</p>\n          <DownloadButton name=\"my-hypertext-story.html\" html={downloadableHTML} assets={assets} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\nfunction AdventureLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"The Mystery of Moonlight Mountain\");\n  const [opening, setOpening] = useState(\"You reach a fork in the trail just as the sun disappears.\");\n  const [choiceA, setChoiceA] = useState(\"Enter the glowing cave\");\n  const [choiceB, setChoiceB] = useState(\"Climb toward the old tower\");\n  const [endingA, setEndingA] = useState(\"Inside the cave, you discover a friendly dragon guarding a library.\");\n  const [endingB, setEndingB] = useState(\"The tower is actually a telescope pointed at a brand-new planet.\");\n  const [pictureA, setPictureA] = useState(\"🐉\");\n  const [pictureB, setPictureB] = useState(\"🔭\");\n  const html = useMemo(() => pageShell(title, `\n    <h1>${escapeHTML(title)}</h1>\n    <section id=\"start\"><div class=\"scene\">🏔️</div><p>${escapeHTML(opening)}</p>\n      <div class=\"choices\"><a href=\"#path-a\">${escapeHTML(choiceA)}</a><a href=\"#path-b\">${escapeHTML(choiceB)}</a></div>\n    </section>\n    <section id=\"path-a\"><div class=\"scene\">${escapeHTML(pictureA)}</div><h2>${escapeHTML(choiceA)}</h2><p>${escapeHTML(endingA)}</p><a href=\"#start\">↩ Try the other path</a></section>\n    <section id=\"path-b\"><div class=\"scene\">${escapeHTML(pictureB)}</div><h2>${escapeHTML(choiceB)}</h2><p>${escapeHTML(endingB)}</p><a href=\"#start\">↩ Try the other path</a></section>\n  `, `.scene{font-size:7rem;text-align:center}.choices{display:grid;gap:16px}.choices a{display:block;padding:18px;background:#ffe17a;border:3px solid #17233c;text-decoration:none}section:not(#start){margin-top:80px}html{scroll-behavior:smooth}`), [title, opening, choiceA, choiceB, endingA, endingB, pictureA, pictureB]);\n  return (\n    <LabShell title=\"Choose Your Own Adventure\" subtitle=\"Write choices, link paths, and let the reader decide what happens.\" color=\"bg-[#b9e6bd]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper pin=\"blue\">\n          <h2 className=\"text-3xl font-black\">Build one beginning and two paths</h2>\n          <Tags items={[\n            { code: \"<a href=\\\"#path-a\\\">\", text: \"Turns a choice into a link to one ending.\" },\n            { code: \"id=\\\"path-a\\\"\", text: \"Names the place where that path begins.\" },\n            { code: \"<div>\", text: \"Groups a picture or set of choices.\" },\n            { code: \"<section>\", text: \"Keeps each story path together.\" },\n          ]} />\n          <Field label=\"Adventure title\" value={title} onChange={setTitle} />\n          <Field label=\"The opening problem\" rows={3} value={opening} onChange={setOpening} />\n          <div className=\"grid md:grid-cols-2 gap-4\">\n            <div className=\"bg-[#dff0ff] border-4 border-[#17233c] p-4\">\n              <h3 className=\"font-black text-xl mb-3\">Path A</h3>\n              <Field label=\"Choice\" value={choiceA} onChange={setChoiceA} />\n              <Field label=\"Picture or emoji\" value={pictureA} onChange={setPictureA} />\n              <Field label=\"What happens?\" rows={4} value={endingA} onChange={setEndingA} />\n            </div>\n            <div className=\"bg-[#ffe4ac] border-4 border-[#17233c] p-4\">\n              <h3 className=\"font-black text-xl mb-3\">Path B</h3>\n              <Field label=\"Choice\" value={choiceB} onChange={setChoiceB} />\n              <Field label=\"Picture or emoji\" value={pictureB} onChange={setPictureB} />\n              <Field label=\"What happens?\" rows={4} value={endingB} onChange={setEndingB} />\n            </div>\n          </div>\n          <p className=\"font-bold mt-5\">Extension idea: download the page, copy one path, give it a new <code>id</code>, and link another choice to it.</p>\n          <DownloadButton name=\"my-choose-your-own-adventure.html\" html={html} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\nfunction PoetryLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"Rain on the Playground\");\n  const [stanza1, setStanza1] = useState(\"Silver drops tap the slide\\nand race along the rails.\");\n  const [stanza2, setStanza2] = useState(\"The blacktop holds the sky\\nin a hundred shining puddles.\");\n  const [whisper, setWhisper] = useState(\"Then the sun whispers: come back outside.\");\n  const [picture, setPicture] = useState(\"🌧️\");\n  const [pictureAlt, setPictureAlt] = useState(\"A picture chosen for the poem\");\n  const [pictureUrl, setPictureUrl] = useState(\"\");\n  const [sound, setSound] = useState(\"\");\n  const [pictureFile, setPictureFile] = useState<File | null>(null);\n  const [soundFile, setSoundFile] = useState<File | null>(null);\n  const picturePath = pictureFile ? \"media/\" + safeAssetName(pictureFile.name) : \"\";\n  const soundPath = soundFile ? \"media/\" + safeAssetName(soundFile.name) : \"\";\n  const lines = (value: string) => escapeHTML(value).replaceAll(\"\\n\", \"<br>\");\n  const html = useMemo(() => pageShell(title, `\n    <article class=\"poem\">\n      <h1>${escapeHTML(title)}</h1>\n      ${pictureUrl ? `<img class=\"poem-picture\" src=\"${escapeHTML(pictureUrl)}\" alt=\"${escapeHTML(pictureAlt)}\">` : `<div class=\"picture\" role=\"img\" aria-label=\"${escapeHTML(pictureAlt)}\">${escapeHTML(picture)}</div>`}\n      <p class=\"stanza\">${lines(stanza1)}</p>\n      <p class=\"stanza\">${lines(stanza2)}</p>\n      <details><summary>Open the final line</summary><p class=\"whisper\"><em>${escapeHTML(whisper)}</em></p></details>\n      ${sound ? `<audio controls src=\"${escapeHTML(sound)}\">Your browser cannot play this sound.</audio>` : \"\"}\n    </article>\n  `, `.poem{max-width:600px;margin:auto;text-align:center}.poem h1{font-family:Caveat,cursive;font-size:4rem}.picture{font-size:7rem}.poem-picture{max-height:360px;object-fit:contain}.stanza{font-family:Merriweather,serif;font-size:1.25rem;margin:44px 0;white-space:normal}.whisper{font-family:Caveat,cursive;font-size:2rem;color:#7048a8}details{margin-top:50px;padding:20px;border:3px dashed #7048a8}summary{cursor:pointer;font-weight:bold}audio{width:100%;margin-top:30px}`), [title, stanza1, stanza2, whisper, picture, pictureAlt, pictureUrl, sound]);\n\n  let downloadableHTML = html;\n  if (pictureFile && pictureUrl) downloadableHTML = downloadableHTML.replaceAll(pictureUrl, picturePath);\n  if (soundFile && sound) downloadableHTML = downloadableHTML.replaceAll(sound, soundPath);\n  const assets = [\n    ...(pictureFile ? [{ file: pictureFile, path: picturePath }] : []),\n    ...(soundFile ? [{ file: soundFile, path: soundPath }] : []),\n  ];\n\n  return (\n    <LabShell title=\"Make a Web Poem\" subtitle=\"Use line breaks, space, emphasis, revelation, pictures, and sound.\" color=\"bg-[#ffb8c2]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper>\n          <h2 className=\"text-3xl font-black\">Write a poem the reader can experience</h2>\n          <Tags items={[\n            { code: \"<article>\", text: \"Wraps one complete piece of writing.\" },\n            { code: \"<br>\", text: \"Makes a deliberate line break.\" },\n            { code: \"<em>\", text: \"Gives words spoken emphasis.\" },\n            { code: \"<details>\", text: \"Hides something until the reader opens it.\" },\n            { code: \"<summary>\", text: \"Creates the clickable label for hidden details.\" },\n            { code: \"<audio>\", text: \"Lets the poem include voice, music, or atmosphere.\" },\n          ]} />\n          <Field label=\"Poem title\" value={title} onChange={setTitle} />\n          <Field label=\"First stanza — press Enter for line breaks\" rows={4} value={stanza1} onChange={setStanza1} />\n          <Field label=\"Second stanza\" rows={4} value={stanza2} onChange={setStanza2} />\n          <Field label=\"A final line the reader must reveal\" rows={2} value={whisper} onChange={setWhisper} />\n          <Field label=\"A picture or emoji\" value={picture} onChange={setPicture} />\n          <Field label=\"Describe the picture\" value={pictureAlt} onChange={setPictureAlt} />\n\n          <details className=\"mb-3 bg-[#fff0f3] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🖼️ Add a picture</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {pictureFile ? `Chosen: ${pictureFile.name}` : \"Choose from Photos or Files\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"image/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (pictureUrl.startsWith(\"blob:\")) URL.revokeObjectURL(pictureUrl);\n                setPictureFile(file);\n                setPictureUrl(URL.createObjectURL(file));\n              }} />\n            </label>\n            {pictureFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(pictureUrl); setPictureFile(null); setPictureUrl(\"\"); }} className=\"mb-3 underline font-bold\">Remove picture</button>}\n            <Field label=\"Or use a picture web address\" value={pictureFile ? \"\" : pictureUrl} onChange={(value: string) => { setPictureFile(null); setPictureUrl(value); }} placeholder=\"https://example.com/picture.jpg\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#fff0f3] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🔊 Add a reading or sound</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {soundFile ? `Chosen: ${soundFile.name}` : \"Choose an audio file from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"audio/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (sound.startsWith(\"blob:\")) URL.revokeObjectURL(sound);\n                setSoundFile(file);\n                setSound(URL.createObjectURL(file));\n              }} />\n            </label>\n            {soundFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(sound); setSoundFile(null); setSound(\"\"); }} className=\"mb-3 underline font-bold\">Remove sound</button>}\n            <Field label=\"Or use a sound web address\" value={soundFile ? \"\" : sound} onChange={(value: string) => { setSoundFile(null); setSound(value); }} placeholder=\"https://example.com/my-reading.mp3\" />\n          </details>\n          <div className=\"bg-[#d7c0f4] border-4 border-[#17233c] p-4 font-bold\">\n            Try reading it aloud. Where should the page leave empty space? Which line deserves emphasis? What should the reader uncover for themselves?\n          </div>\n          <DownloadButton name=\"my-web-poem.html\" html={downloadableHTML} assets={assets} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\nconst snippets = [\n  { group: \"Page\", name: \"HTML document\", code: \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n  <meta charset=\\\"UTF-8\\\">\\n  <title>My Page</title>\\n</head>\\n<body>\\n  Your page goes here.\\n</body>\\n</html>\", use: \"The complete starting structure for a webpage.\" },\n  { group: \"Text\", name: \"Main heading\", code: \"<h1>My Big Title</h1>\", use: \"Names the page with its most important heading.\" },\n  { group: \"Text\", name: \"Section heading\", code: \"<h2>A New Section</h2>\", use: \"Introduces a smaller section inside the page.\" },\n  { group: \"Text\", name: \"Paragraph\", code: \"<p>Write your sentences here.</p>\", use: \"Groups sentences into a paragraph.\" },\n  { group: \"Text\", name: \"Emphasis\", code: \"<em>This part matters.</em>\", use: \"Adds spoken emphasis, usually displayed in italics.\" },\n  { group: \"Text\", name: \"Strong importance\", code: \"<strong>Do not forget this.</strong>\", use: \"Marks text as especially important.\" },\n  { group: \"Text\", name: \"Line break\", code: \"First line<br>\\nSecond line\", use: \"Starts a new line without starting a new paragraph.\" },\n  { group: \"Lists\", name: \"Numbered list\", code: \"<ol>\\n  <li>First thing</li>\\n  <li>Second thing</li>\\n</ol>\", use: \"Creates a list where order matters.\" },\n  { group: \"Lists\", name: \"Bullet list\", code: \"<ul>\\n  <li>One idea</li>\\n  <li>Another idea</li>\\n</ul>\", use: \"Creates a list where order does not matter.\" },\n  { group: \"Links\", name: \"Link to a website\", code: \"<a href=\\\"https://example.com\\\">Visit the site</a>\", use: \"Makes clickable text that opens another website.\" },\n  { group: \"Links\", name: \"Link to another page\", code: \"<a href=\\\"facts.html\\\">Read my facts</a>\", use: \"Connects one HTML file to another.\" },\n  { group: \"Links\", name: \"Jump link\", code: \"<a href=\\\"#ending\\\">Jump to the ending</a>\\n\\n<section id=\\\"ending\\\">\\n  The ending goes here.\\n</section>\", use: \"Moves the reader to a named place on the same page.\" },\n  { group: \"Media\", name: \"Picture\", code: \"<img src=\\\"picture.jpg\\\" alt=\\\"Describe the picture\\\">\", use: \"Embeds a picture and describes it accessibly.\" },\n  { group: \"Media\", name: \"Audio player\", code: \"<audio controls src=\\\"sound.mp3\\\">\\n  Your browser cannot play this sound.\\n</audio>\", use: \"Adds controls for playing sound.\" },\n  { group: \"Media\", name: \"Video player\", code: \"<video controls src=\\\"movie.mp4\\\">\\n  Your browser cannot play this video.\\n</video>\", use: \"Adds controls for playing video.\" },\n  { group: \"Interactive\", name: \"Reveal hidden writing\", code: \"<details>\\n  <summary>Open the secret</summary>\\n  <p>The hidden words appear here.</p>\\n</details>\", use: \"Lets a reader open and close extra content without JavaScript.\" },\n  { group: \"Structure\", name: \"Navigation\", code: \"<nav>\\n  <a href=\\\"index.html\\\">Home</a>\\n  <a href=\\\"facts.html\\\">Facts</a>\\n</nav>\", use: \"Groups the main links used to move around a website.\" },\n  { group: \"Structure\", name: \"Section\", code: \"<section>\\n  <h2>Section title</h2>\\n  <p>Section content.</p>\\n</section>\", use: \"Groups content that belongs to the same idea.\" },\n  { group: \"Style\", name: \"Simple page styles\", code: \"<style>\\n  body {\\n    background: lightyellow;\\n    color: navy;\\n    font-family: sans-serif;\\n  }\\n</style>\", use: \"Adds CSS that changes the appearance of the page.\" },\n];\n\nfunction ReferenceLab({ onBack }: { onBack: () => void }) {\n  const [search, setSearch] = useState(\"\");\n  const [group, setGroup] = useState(\"All\");\n  const groups = [\"All\", ...Array.from(new Set(snippets.map((s) => s.group)))];\n  const shown = snippets.filter((s) => (group === \"All\" || s.group === group) && `${s.name} ${s.use} ${s.code}`.toLowerCase().includes(search.toLowerCase()));\n  return (\n    <LabShell title=\"HTML Snippet Board\" subtitle=\"Find a building block, learn what it does, then copy it into your page.\" color=\"bg-[#d7c0f4]\" onBack={onBack}>\n      <Paper pin=\"blue\">\n        <div className=\"grid md:grid-cols-[1fr_auto] gap-3 mb-5\">\n          <Field label=\"Search the snippets\" value={search} onChange={setSearch} placeholder=\"Try: picture, link, list…\" />\n          <label className=\"font-black\">Category\n            <select value={group} onChange={(e) => setGroup(e.target.value)} className=\"block mt-1 bg-white border-3 border-[#17233c] px-4 py-3\">\n              {groups.map((g) => <option key={g}>{g}</option>)}\n            </select>\n          </label>\n        </div>\n        <div className=\"grid lg:grid-cols-2 gap-5\">\n          {shown.map((snippet, i) => (\n            <article key={snippet.name} className={`${i % 3 === 0 ? \"bg-[#ffe17a]\" : i % 3 === 1 ? \"bg-[#dff0ff]\" : \"bg-[#dff5df]\"} border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#665b4a]`}>\n              <p className=\"text-xs font-black tracking-widest\">{snippet.group.toUpperCase()}</p>\n              <h2 className=\"text-2xl font-black\">{snippet.name}</h2>\n              <p className=\"font-bold my-2\">{snippet.use}</p>\n              <pre className=\"bg-[#263d2d] text-white border-4 border-[#9b6537] p-3 overflow-auto text-sm\"><code>{snippet.code}</code></pre>\n              <button onClick={() => navigator.clipboard.writeText(snippet.code)} className=\"mt-3 bg-white border-3 border-[#17233c] px-3 py-2 font-black\">Copy snippet</button>\n            </article>\n          ))}\n        </div>\n        {!shown.length && <p className=\"text-xl font-black text-center py-10\">No snippets match that search yet.</p>}\n      </Paper>\n    </LabShell>\n  );\n}\n\nexport function App() {\n  const [module, setModule] = useState<ModuleName>(\"hub\");\n  if (module === \"hub\") return <ModuleHub choose={setModule} />;\n  if (module === \"first\") return <><BackButton onBack={() => setModule(\"hub\")} /><FirstWebsiteApp /></>;\n  if (module === \"hypertext\") return <HypertextLab onBack={() => setModule(\"hub\")} />;\n  if (module === \"adventure\") return <AdventureLab onBack={() => setModule(\"hub\")} />;\n  if (module === \"poetry\") return <PoetryLab onBack={() => setModule(\"hub\")} />;\n  return <ReferenceLab onBack={() => setModule(\"hub\")} />;\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\nimport { FirstWebsiteApp } from \"./App.tsx\";\n\ntype ModuleName = \"hub\" | \"first\" | \"hypertext\" | \"adventure\" | \"poetry\" | \"reference\";\n\nconst fontLink = \"https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;700&family=Chewy&family=Comic+Neue:wght@400;700&family=Nunito:wght@400;700;900&family=Patrick+Hand&family=Special+Elite&display=swap\";\n\nfunction escapeHTML(value: string) {\n  return value.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n}\n\nfunction downloadHTML(name: string, html: string) {\n  const blob = new Blob([html], { type: \"text/html\" });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.download = name;\n  link.click();\n  URL.revokeObjectURL(url);\n}\n\nconst pageShell = (title: string, body: string, extraCSS = \"\") => `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>${escapeHTML(title)}</title>\n  <link href=\"${fontLink}\" rel=\"stylesheet\">\n  <style>\n    * { box-sizing: border-box; }\n    body { max-width: 780px; margin: 0 auto; padding: 32px; color: #17233c; background: #fff8e8; font-family: Nunito, sans-serif; line-height: 1.65; }\n    h1, h2 { color: #7048a8; }\n    a { color: #b92d45; font-weight: 800; }\n    img, video { max-width: 100%; border-radius: 16px; }\n    section { margin: 32px 0; padding: 24px; background: white; border: 3px solid #17233c; }\n    ${extraCSS}\n  </style>\n</head>\n<body>${body}</body>\n</html>`;\n\nfunction Board({ children }: { children: any }) {\n  return (\n    <div className=\"min-h-screen bg-[#b97842] border-[14px] border-[#6e4325] text-[#17233c]\" style={{ backgroundImage: \"radial-gradient(#8f562d 1.5px, transparent 1.5px)\", backgroundSize: \"12px 12px\" }}>\n      {children}\n    </div>\n  );\n}\n\nfunction BackButton({ onBack }: { onBack: () => void }) {\n  return <button onClick={onBack} className=\"fixed z-50 top-4 right-4 bg-[#ffe17a] border-4 border-[#17233c] px-4 py-2 font-black shadow-[4px_4px_0_#ef5138]\">← All activities</button>;\n}\n\nfunction LabShell({ title, subtitle, color, onBack, children }: any) {\n  return (\n    <Board>\n      <BackButton onBack={onBack} />\n      <header className=\"max-w-7xl mx-auto px-4 pt-20 md:pt-8 pb-5\">\n        <div className={`inline-block ${color} border-4 border-[#17233c] px-6 py-4 -rotate-1 shadow-[8px_8px_0_#17233c]`}>\n          <p className=\"font-black tracking-widest text-sm\">WRITING LAB</p>\n          <h1 className=\"text-4xl md:text-5xl font-black\">{title}</h1>\n          <p className=\"font-bold mt-1\">{subtitle}</p>\n        </div>\n      </header>\n      <main className=\"max-w-7xl mx-auto px-4 pb-12\">{children}</main>\n    </Board>\n  );\n}\n\nfunction Paper({ children, pin = \"red\" }: { children: any; pin?: string }) {\n  return (\n    <section className=\"bg-[#fffdf3] border-4 border-[#17233c] p-5 md:p-7 shadow-[9px_9px_0_#f0c85a] relative\">\n      <span className={`absolute -top-4 left-8 w-6 h-6 rounded-full border-2 shadow ${pin === \"blue\" ? \"bg-[#2878d0] border-[#174d84]\" : \"bg-[#ef5138] border-[#8f2618]\"}`} />\n      {children}\n    </section>\n  );\n}\n\nfunction Field({ label, value, onChange, placeholder, rows = 1 }: any) {\n  const cls = \"w-full bg-[#fffef8] border-0 border-b-2 border-[#6f9bd1] focus:border-[#ef5138] focus:outline-none px-3 py-3 text-lg\";\n  return (\n    <label className=\"block mb-4\">\n      <span className=\"block font-black mb-1\">{label}</span>\n      {rows > 1\n        ? <textarea rows={rows} className={cls} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />\n        : <input className={cls} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />}\n    </label>\n  );\n}\n\nfunction Tags({ items }: { items: { code: string; text: string }[] }) {\n  return (\n    <div className=\"bg-[#ffe17a] border-4 border-[#17233c] p-4 my-5 shadow-[5px_5px_0_#2878d0]\">\n      <p className=\"font-black text-lg mb-3\">🧱 HTML building blocks</p>\n      <div className=\"space-y-2\">\n        {items.map((item) => <div key={item.code} className=\"flex gap-3 items-start\"><code className=\"bg-[#17233c] text-white px-2 py-1 whitespace-nowrap\">{item.code}</code><p className=\"font-bold\">{item.text}</p></div>)}\n      </div>\n    </div>\n  );\n}\n\nfunction Preview({ html }: { html: string }) {\n  const previewHTML = html.replace(\"</body>\", `\n    <script>\n      document.addEventListener(\"click\", (event) => {\n        const link = event.target instanceof Element\n          ? event.target.closest('a[href^=\"#\"]')\n          : null;\n        if (!link) return;\n\n        const href = link.getAttribute(\"href\");\n        event.preventDefault();\n\n        if (href === \"#\") {\n          window.scrollTo({ top: 0, behavior: \"smooth\" });\n          return;\n        }\n\n        const target = document.getElementById(decodeURIComponent(href.slice(1)));\n        target?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      });\n    </script>\n  </body>`);\n\n  return (\n    <div className=\"bg-[#17233c] border-[10px] border-[#ef5138] shadow-[9px_9px_0_#17233c] sticky top-20\">\n      <div className=\"text-white px-3 py-2 font-black text-sm\">● ● ●   LIVE WEBPAGE</div>\n      <iframe title=\"Live webpage preview\" className=\"w-full h-[650px] bg-white\" sandbox=\"allow-scripts allow-same-origin allow-presentation\" srcDoc={previewHTML} />\n    </div>\n  );\n}\n\nfunction safeAssetName(name: string) {\n  const dot = name.lastIndexOf(\".\");\n  const extension = dot >= 0 ? name.slice(dot).toLowerCase().replace(/[^a-z0-9.]/g, \"\") : \"\";\n  const base = (dot >= 0 ? name.slice(0, dot) : name)\n    .toLowerCase()\n    .trim()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-|-$/g, \"\") || \"media\";\n  return base + extension;\n}\n\nfunction youtubeEmbedUrl(value: string) {\n  if (!value.trim()) return \"\";\n  try {\n    const url = new URL(value.trim());\n    let id = \"\";\n    if (url.hostname === \"youtu.be\") id = url.pathname.slice(1).split(\"/\")[0];\n    if (url.hostname.endsWith(\"youtube.com\")) {\n      id = url.searchParams.get(\"v\") || \"\";\n      if (!id && (url.pathname.startsWith(\"/shorts/\") || url.pathname.startsWith(\"/embed/\"))) {\n        id = url.pathname.split(\"/\")[2] || \"\";\n      }\n    }\n    return /^[a-zA-Z0-9_-]{6,}$/.test(id)\n      ? \"https://firstpage.val.run/youtube/\" + id\n      : \"\";\n  } catch {\n    return \"\";\n  }\n}\n\nasync function downloadProject(name: string, html: string, assets: { file: File; path: string }[]) {\n  if (!assets.length) {\n    downloadHTML(name, html);\n    return;\n  }\n\n  const zip = new JSZip();\n  zip.file(\"index.html\", html);\n  assets.forEach(({ file, path }) => zip.file(path, file));\n  zip.file(\"README.txt\", \"Open index.html in a browser. Keep the media folder beside index.html.\");\n\n  const blob = await zip.generateAsync({ type: \"blob\" });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.download = name.replace(/\\.html$/, \".zip\");\n  link.click();\n  URL.revokeObjectURL(url);\n}\n\nfunction DownloadButton({\n  name,\n  html,\n  assets = [],\n}: {\n  name: string;\n  html: string;\n  assets?: { file: File; path: string }[];\n}) {\n  return (\n    <button\n      onClick={() => downloadProject(name, html, assets)}\n      className=\"w-full mt-5 bg-[#ef5138] text-white border-4 border-[#17233c] px-5 py-4 font-black text-lg shadow-[5px_5px_0_#17233c]\"\n    >\n      {assets.length ? \"Download my webpage and media (.zip)\" : \"Download my HTML page\"}\n    </button>\n  );\n}\n\nfunction ModuleHub({ choose }: { choose: (module: ModuleName) => void }) {\n  const cards = [\n    { id: \"first\", icon: \"🧱\", title: \"Make Your First Website\", text: \"Build two pages about something you love.\", color: \"bg-[#ffe17a]\" },\n    { id: \"hypertext\", icon: \"🕸️\", title: \"Tell a Hypertext Story\", text: \"Connect scenes and mix words with pictures, sound, and video.\", color: \"bg-[#a9d8ff]\" },\n    { id: \"adventure\", icon: \"🗺️\", title: \"Choose Your Own Adventure\", text: \"Write choices that send readers down different paths.\", color: \"bg-[#b9e6bd]\" },\n    { id: \"poetry\", icon: \"✍️\", title: \"Make a Web Poem\", text: \"Use spacing, emphasis, pictures, and sound to perform a poem.\", color: \"bg-[#ffb8c2]\" },\n    { id: \"reference\", icon: \"📌\", title: \"HTML Snippet Board\", text: \"Find, understand, and copy useful HTML building blocks.\", color: \"bg-[#d7c0f4]\" },\n  ] as const;\n  return (\n    <Board>\n      <main className=\"max-w-6xl mx-auto px-4 py-8 md:py-12\">\n        <div className=\"bg-[#fffdf3] border-4 border-[#17233c] p-6 md:p-8 shadow-[10px_10px_0_#ef5138] relative mb-8\">\n          <span className=\"absolute -top-4 left-1/2 w-7 h-7 rounded-full bg-[#f3c623] border-2 border-[#8a6312]\" />\n          <p className=\"text-[#2878d0] font-black tracking-widest\">WELCOME TO THE</p>\n          <h1 className=\"text-4xl md:text-6xl font-black\">HTML Writing Lab</h1>\n          <p className=\"text-xl font-bold mt-2\">Choose an activity. Write something that could only exist on the web.</p>\n        </div>\n        <div className=\"grid md:grid-cols-2 gap-6\">\n          {cards.map((card, i) => (\n            <button key={card.id} onClick={() => choose(card.id)} className={`${card.color} border-4 border-[#17233c] p-6 text-left shadow-[7px_7px_0_#17233c] hover:-translate-y-1 transition-transform relative ${i % 2 ? \"rotate-[0.4deg]\" : \"-rotate-[0.4deg]\"}`}>\n              <span className=\"absolute -top-3 right-8 w-6 h-6 rounded-full bg-[#ef5138] border-2 border-[#8f2618]\" />\n              <span className=\"text-5xl\">{card.icon}</span>\n              <h2 className=\"text-2xl font-black mt-3\">{card.title}</h2>\n              <p className=\"font-bold mt-2\">{card.text}</p>\n            </button>\n          ))}\n        </div>\n      </main>\n    </Board>\n  );\n}\n\nfunction HypertextLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"The Door Behind the Bookshelf\");\n  const [opening, setOpening] = useState(\"I pulled the oldest book, and the whole shelf swung open.\");\n  const [scene, setScene] = useState(\"Behind it was a blue hallway humming like a refrigerator.\");\n  const [ending, setEnding] = useState(\"At the end of the hallway, I found a room full of tiny suns.\");\n  const [image, setImage] = useState(\"🚪\");\n  const [imageUrl, setImageUrl] = useState(\"\");\n  const [imageAlt, setImageAlt] = useState(\"An old wooden door\");\n  const [audio, setAudio] = useState(\"\");\n  const [video, setVideo] = useState(\"\");\n  const [imageFile, setImageFile] = useState<File | null>(null);\n  const [audioFile, setAudioFile] = useState<File | null>(null);\n  const [videoFile, setVideoFile] = useState<File | null>(null);\n\n  const imagePath = imageFile ? \"media/\" + safeAssetName(imageFile.name) : \"\";\n  const audioPath = audioFile ? \"media/\" + safeAssetName(audioFile.name) : \"\";\n  const videoPath = videoFile ? \"media/\" + safeAssetName(videoFile.name) : \"\";\n  const youtubeVideo = youtubeEmbedUrl(video);\n  const html = useMemo(() => pageShell(title, `\n    <h1>${escapeHTML(title)}</h1>\n    <p>${escapeHTML(opening)} <a href=\"#discovery\">Follow the strange sound ↓</a></p>\n    ${imageUrl ? `<img src=\"${escapeHTML(imageUrl)}\" alt=\"${escapeHTML(imageAlt)}\">` : `<div role=\"img\" aria-label=\"${escapeHTML(imageAlt)}\" style=\"font-size:7rem\">${escapeHTML(image)}</div>`}\n    <section id=\"discovery\">\n      <h2>The discovery</h2>\n      <p>${escapeHTML(scene)}</p>\n      ${audio ? `<audio controls src=\"${escapeHTML(audio)}\">Your browser cannot play this sound.</audio>` : \"\"}\n      ${youtubeVideo ? `<iframe class=\"youtube\" src=\"${escapeHTML(youtubeVideo)}\" title=\"YouTube video\" referrerpolicy=\"strict-origin-when-cross-origin\" allow=\"accelerometer; autoplay; encrypted-media; picture-in-picture\" allowfullscreen></iframe>` : video ? `<video controls src=\"${escapeHTML(video)}\">Your browser cannot play this video.</video>` : \"\"}\n      <p><a href=\"#ending\">See what happened next ↓</a></p>\n    </section>\n    <section id=\"ending\"><h2>The ending</h2><p>${escapeHTML(ending)}</p><a href=\"#\">Read it again ↑</a></section>\n  `, `html { scroll-behavior:smooth; } audio { width:100%; margin:16px 0; } .youtube { width:100%; aspect-ratio:16/9; border:0; margin:16px 0; }`), [title, opening, scene, ending, image, imageUrl, imageAlt, audio, video, youtubeVideo]);\n\n  let downloadableHTML = html;\n  if (imageFile && imageUrl) downloadableHTML = downloadableHTML.replaceAll(imageUrl, imagePath);\n  if (audioFile && audio) downloadableHTML = downloadableHTML.replaceAll(audio, audioPath);\n  if (videoFile && video) downloadableHTML = downloadableHTML.replaceAll(video, videoPath);\n\n  const assets = [\n    ...(imageFile ? [{ file: imageFile, path: imagePath }] : []),\n    ...(audioFile ? [{ file: audioFile, path: audioPath }] : []),\n    ...(videoFile ? [{ file: videoFile, path: videoPath }] : []),\n  ];\n\n  return (\n    <LabShell title=\"Tell a Hypertext Story\" subtitle=\"Make a story readers move through instead of only reading top to bottom.\" color=\"bg-[#a9d8ff]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper>\n          <h2 className=\"text-3xl font-black\">1. Write three connected scenes</h2>\n          <p className=\"font-bold mb-4\">Links can jump to named places inside the same page. That gives your reader control over movement.</p>\n          <Tags items={[\n            { code: \"<a>\", text: \"Creates the words a reader can click.\" },\n            { code: \"href=\\\"#ending\\\"\", text: \"Jumps to the element named ending.\" },\n            { code: \"id=\\\"ending\\\"\", text: \"Gives a place on the page a name.\" },\n            { code: \"<section>\", text: \"Groups one scene or part of the story.\" },\n          ]} />\n          <Field label=\"Story title\" value={title} onChange={setTitle} />\n          <Field label=\"Opening scene\" rows={3} value={opening} onChange={setOpening} />\n          <Field label=\"What does the reader discover?\" rows={3} value={scene} onChange={setScene} />\n          <Field label=\"How does it end?\" rows={3} value={ending} onChange={setEnding} />\n          <h2 className=\"text-3xl font-black mt-8\">2. Tell it with more than words</h2>\n          <Tags items={[\n            { code: \"<img>\", text: \"Embeds a picture.\" },\n            { code: \"<audio controls>\", text: \"Adds a playable sound.\" },\n            { code: \"<video controls>\", text: \"Adds a playable video.\" },\n            { code: \"alt=\\\"…\\\"\", text: \"Describes a picture for readers who cannot see it.\" },\n          ]} />\n          <Field label=\"Simple picture or emoji\" value={image} onChange={setImage} />\n          <Field label=\"Describe the picture\" value={imageAlt} onChange={setImageAlt} />\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🖼️ Add a picture</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {imageFile ? `Chosen: ${imageFile.name}` : \"Choose from Photos or Files\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"image/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (imageUrl.startsWith(\"blob:\")) URL.revokeObjectURL(imageUrl);\n                setImageFile(file);\n                setImageUrl(URL.createObjectURL(file));\n              }} />\n            </label>\n            {imageFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(imageUrl); setImageFile(null); setImageUrl(\"\"); }} className=\"mb-3 underline font-bold\">Remove picture</button>}\n            <Field label=\"Or use a picture web address\" value={imageFile ? \"\" : imageUrl} onChange={(value: string) => { setImageFile(null); setImageUrl(value); }} placeholder=\"https://example.com/picture.jpg\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🔊 Add a sound</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {audioFile ? `Chosen: ${audioFile.name}` : \"Choose an audio file from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"audio/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (audio.startsWith(\"blob:\")) URL.revokeObjectURL(audio);\n                setAudioFile(file);\n                setAudio(URL.createObjectURL(file));\n              }} />\n            </label>\n            {audioFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(audio); setAudioFile(null); setAudio(\"\"); }} className=\"mb-3 underline font-bold\">Remove sound</button>}\n            <Field label=\"Or use a sound web address\" value={audioFile ? \"\" : audio} onChange={(value: string) => { setAudioFile(null); setAudio(value); }} placeholder=\"https://example.com/sound.mp3\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#eef7ff] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🎥 Add a video</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {videoFile ? `Chosen: ${videoFile.name}` : \"Choose a video from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"video/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (video.startsWith(\"blob:\")) URL.revokeObjectURL(video);\n                setVideoFile(file);\n                setVideo(URL.createObjectURL(file));\n              }} />\n            </label>\n            {videoFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(video); setVideoFile(null); setVideo(\"\"); }} className=\"mb-3 underline font-bold\">Remove video</button>}\n            <Field label=\"Or paste a direct video or YouTube address\" value={videoFile ? \"\" : video} onChange={(value: string) => { setVideoFile(null); setVideo(value); }} placeholder=\"https://youtube.com/watch?v=...\" />\n            {video && !videoFile && video.includes(\"youtu\") && !youtubeVideo && <p className=\"text-sm font-bold text-[#8f2618]\">That does not look like a complete YouTube address yet.</p>}\n            {videoFile && videoFile.size > 50 * 1024 * 1024 && <p className=\"text-sm font-bold text-[#8f2618]\">This video is larger than 50 MB, so creating the ZIP may take a while.</p>}\n          </details>\n          <p className=\"text-sm font-bold bg-[#ffdfdf] border-2 border-[#ef5138] p-3\">Ask a grown-up before using media from the web. Use files you made or have permission to share.</p>\n          <DownloadButton name=\"my-hypertext-story.html\" html={downloadableHTML} assets={assets} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\nfunction AdventureLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"The Mystery of Moonlight Mountain\");\n  const [opening, setOpening] = useState(\"You reach a fork in the trail just as the sun disappears.\");\n  const [choiceA, setChoiceA] = useState(\"Enter the glowing cave\");\n  const [choiceB, setChoiceB] = useState(\"Climb toward the old tower\");\n  const [endingA, setEndingA] = useState(\"Inside the cave, you discover a friendly dragon guarding a library.\");\n  const [endingB, setEndingB] = useState(\"The tower is actually a telescope pointed at a brand-new planet.\");\n  const [pictureA, setPictureA] = useState(\"🐉\");\n  const [pictureB, setPictureB] = useState(\"🔭\");\n  const html = useMemo(() => pageShell(title, `\n    <h1>${escapeHTML(title)}</h1>\n    <section id=\"start\"><div class=\"scene\">🏔️</div><p>${escapeHTML(opening)}</p>\n      <div class=\"choices\"><a href=\"#path-a\">${escapeHTML(choiceA)}</a><a href=\"#path-b\">${escapeHTML(choiceB)}</a></div>\n    </section>\n    <section id=\"path-a\"><div class=\"scene\">${escapeHTML(pictureA)}</div><h2>${escapeHTML(choiceA)}</h2><p>${escapeHTML(endingA)}</p><a href=\"#start\">↩ Try the other path</a></section>\n    <section id=\"path-b\"><div class=\"scene\">${escapeHTML(pictureB)}</div><h2>${escapeHTML(choiceB)}</h2><p>${escapeHTML(endingB)}</p><a href=\"#start\">↩ Try the other path</a></section>\n  `, `.scene{font-size:7rem;text-align:center}.choices{display:grid;gap:16px}.choices a{display:block;padding:18px;background:#ffe17a;border:3px solid #17233c;text-decoration:none}section:not(#start){margin-top:80px}html{scroll-behavior:smooth}`), [title, opening, choiceA, choiceB, endingA, endingB, pictureA, pictureB]);\n  return (\n    <LabShell title=\"Choose Your Own Adventure\" subtitle=\"Write choices, link paths, and let the reader decide what happens.\" color=\"bg-[#b9e6bd]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper pin=\"blue\">\n          <h2 className=\"text-3xl font-black\">Build one beginning and two paths</h2>\n          <Tags items={[\n            { code: \"<a href=\\\"#path-a\\\">\", text: \"Turns a choice into a link to one ending.\" },\n            { code: \"id=\\\"path-a\\\"\", text: \"Names the place where that path begins.\" },\n            { code: \"<div>\", text: \"Groups a picture or set of choices.\" },\n            { code: \"<section>\", text: \"Keeps each story path together.\" },\n          ]} />\n          <Field label=\"Adventure title\" value={title} onChange={setTitle} />\n          <Field label=\"The opening problem\" rows={3} value={opening} onChange={setOpening} />\n          <div className=\"grid md:grid-cols-2 gap-4\">\n            <div className=\"bg-[#dff0ff] border-4 border-[#17233c] p-4\">\n              <h3 className=\"font-black text-xl mb-3\">Path A</h3>\n              <Field label=\"Choice\" value={choiceA} onChange={setChoiceA} />\n              <Field label=\"Picture or emoji\" value={pictureA} onChange={setPictureA} />\n              <Field label=\"What happens?\" rows={4} value={endingA} onChange={setEndingA} />\n            </div>\n            <div className=\"bg-[#ffe4ac] border-4 border-[#17233c] p-4\">\n              <h3 className=\"font-black text-xl mb-3\">Path B</h3>\n              <Field label=\"Choice\" value={choiceB} onChange={setChoiceB} />\n              <Field label=\"Picture or emoji\" value={pictureB} onChange={setPictureB} />\n              <Field label=\"What happens?\" rows={4} value={endingB} onChange={setEndingB} />\n            </div>\n          </div>\n          <p className=\"font-bold mt-5\">Extension idea: download the page, copy one path, give it a new <code>id</code>, and link another choice to it.</p>\n          <DownloadButton name=\"my-choose-your-own-adventure.html\" html={html} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\nfunction PoetryLab({ onBack }: { onBack: () => void }) {\n  const [title, setTitle] = useState(\"Rain on the Playground\");\n  const [stanza1, setStanza1] = useState(\"Silver drops tap the slide\\nand race along the rails.\");\n  const [stanza2, setStanza2] = useState(\"The blacktop holds the sky\\nin a hundred shining puddles.\");\n  const [whisper, setWhisper] = useState(\"Then the sun whispers: come back outside.\");\n  const [picture, setPicture] = useState(\"🌧️\");\n  const [pictureAlt, setPictureAlt] = useState(\"A picture chosen for the poem\");\n  const [pictureUrl, setPictureUrl] = useState(\"\");\n  const [sound, setSound] = useState(\"\");\n  const [pictureFile, setPictureFile] = useState<File | null>(null);\n  const [soundFile, setSoundFile] = useState<File | null>(null);\n  const picturePath = pictureFile ? \"media/\" + safeAssetName(pictureFile.name) : \"\";\n  const soundPath = soundFile ? \"media/\" + safeAssetName(soundFile.name) : \"\";\n  const lines = (value: string) => escapeHTML(value).replaceAll(\"\\n\", \"<br>\");\n  const html = useMemo(() => pageShell(title, `\n    <article class=\"poem\">\n      <h1>${escapeHTML(title)}</h1>\n      ${pictureUrl ? `<img class=\"poem-picture\" src=\"${escapeHTML(pictureUrl)}\" alt=\"${escapeHTML(pictureAlt)}\">` : `<div class=\"picture\" role=\"img\" aria-label=\"${escapeHTML(pictureAlt)}\">${escapeHTML(picture)}</div>`}\n      <p class=\"stanza\">${lines(stanza1)}</p>\n      <p class=\"stanza\">${lines(stanza2)}</p>\n      <details><summary>Open the final line</summary><p class=\"whisper\"><em>${escapeHTML(whisper)}</em></p></details>\n      ${sound ? `<audio controls src=\"${escapeHTML(sound)}\">Your browser cannot play this sound.</audio>` : \"\"}\n    </article>\n  `, `.poem{max-width:600px;margin:auto;text-align:center}.poem h1{font-family:Caveat,cursive;font-size:4rem}.picture{font-size:7rem}.poem-picture{max-height:360px;object-fit:contain}.stanza{font-family:Merriweather,serif;font-size:1.25rem;margin:44px 0;white-space:normal}.whisper{font-family:Caveat,cursive;font-size:2rem;color:#7048a8}details{margin-top:50px;padding:20px;border:3px dashed #7048a8}summary{cursor:pointer;font-weight:bold}audio{width:100%;margin-top:30px}`), [title, stanza1, stanza2, whisper, picture, pictureAlt, pictureUrl, sound]);\n\n  let downloadableHTML = html;\n  if (pictureFile && pictureUrl) downloadableHTML = downloadableHTML.replaceAll(pictureUrl, picturePath);\n  if (soundFile && sound) downloadableHTML = downloadableHTML.replaceAll(sound, soundPath);\n  const assets = [\n    ...(pictureFile ? [{ file: pictureFile, path: picturePath }] : []),\n    ...(soundFile ? [{ file: soundFile, path: soundPath }] : []),\n  ];\n\n  return (\n    <LabShell title=\"Make a Web Poem\" subtitle=\"Use line breaks, space, emphasis, revelation, pictures, and sound.\" color=\"bg-[#ffb8c2]\" onBack={onBack}>\n      <div className=\"grid lg:grid-cols-2 gap-7 items-start\">\n        <Paper>\n          <h2 className=\"text-3xl font-black\">Write a poem the reader can experience</h2>\n          <Tags items={[\n            { code: \"<article>\", text: \"Wraps one complete piece of writing.\" },\n            { code: \"<br>\", text: \"Makes a deliberate line break.\" },\n            { code: \"<em>\", text: \"Gives words spoken emphasis.\" },\n            { code: \"<details>\", text: \"Hides something until the reader opens it.\" },\n            { code: \"<summary>\", text: \"Creates the clickable label for hidden details.\" },\n            { code: \"<audio>\", text: \"Lets the poem include voice, music, or atmosphere.\" },\n          ]} />\n          <Field label=\"Poem title\" value={title} onChange={setTitle} />\n          <Field label=\"First stanza — press Enter for line breaks\" rows={4} value={stanza1} onChange={setStanza1} />\n          <Field label=\"Second stanza\" rows={4} value={stanza2} onChange={setStanza2} />\n          <Field label=\"A final line the reader must reveal\" rows={2} value={whisper} onChange={setWhisper} />\n          <Field label=\"A picture or emoji\" value={picture} onChange={setPicture} />\n          <Field label=\"Describe the picture\" value={pictureAlt} onChange={setPictureAlt} />\n\n          <details className=\"mb-3 bg-[#fff0f3] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🖼️ Add a picture</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {pictureFile ? `Chosen: ${pictureFile.name}` : \"Choose from Photos or Files\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"image/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (pictureUrl.startsWith(\"blob:\")) URL.revokeObjectURL(pictureUrl);\n                setPictureFile(file);\n                setPictureUrl(URL.createObjectURL(file));\n              }} />\n            </label>\n            {pictureFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(pictureUrl); setPictureFile(null); setPictureUrl(\"\"); }} className=\"mb-3 underline font-bold\">Remove picture</button>}\n            <Field label=\"Or use a picture web address\" value={pictureFile ? \"\" : pictureUrl} onChange={(value: string) => { setPictureFile(null); setPictureUrl(value); }} placeholder=\"https://example.com/picture.jpg\" />\n          </details>\n\n          <details className=\"mb-3 bg-[#fff0f3] border-3 border-[#17233c] p-4\">\n            <summary className=\"font-black text-xl cursor-pointer\">🔊 Add a reading or sound</summary>\n            <label className=\"block my-4 bg-white border-2 border-dashed border-[#2878d0] p-4 text-center font-black cursor-pointer\">\n              {soundFile ? `Chosen: ${soundFile.name}` : \"Choose an audio file from this device\"}\n              <input className=\"sr-only\" type=\"file\" accept=\"audio/*\" onChange={(event) => {\n                const file = event.target.files?.[0];\n                if (!file) return;\n                if (sound.startsWith(\"blob:\")) URL.revokeObjectURL(sound);\n                setSoundFile(file);\n                setSound(URL.createObjectURL(file));\n              }} />\n            </label>\n            {soundFile && <button type=\"button\" onClick={() => { URL.revokeObjectURL(sound); setSoundFile(null); setSound(\"\"); }} className=\"mb-3 underline font-bold\">Remove sound</button>}\n            <Field label=\"Or use a sound web address\" value={soundFile ? \"\" : sound} onChange={(value: string) => { setSoundFile(null); setSound(value); }} placeholder=\"https://example.com/my-reading.mp3\" />\n          </details>\n          <div className=\"bg-[#d7c0f4] border-4 border-[#17233c] p-4 font-bold\">\n            Try reading it aloud. Where should the page leave empty space? Which line deserves emphasis? What should the reader uncover for themselves?\n          </div>\n          <DownloadButton name=\"my-web-poem.html\" html={downloadableHTML} assets={assets} />\n        </Paper>\n        <Preview html={html} />\n      </div>\n    </LabShell>\n  );\n}\n\nconst snippets = [\n  { group: \"Page\", name: \"HTML document\", code: \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n  <meta charset=\\\"UTF-8\\\">\\n  <title>My Page</title>\\n</head>\\n<body>\\n  Your page goes here.\\n</body>\\n</html>\", use: \"The complete starting structure for a webpage.\" },\n  { group: \"Text\", name: \"Main heading\", code: \"<h1>My Big Title</h1>\", use: \"Names the page with its most important heading.\" },\n  { group: \"Text\", name: \"Section heading\", code: \"<h2>A New Section</h2>\", use: \"Introduces a smaller section inside the page.\" },\n  { group: \"Text\", name: \"Paragraph\", code: \"<p>Write your sentences here.</p>\", use: \"Groups sentences into a paragraph.\" },\n  { group: \"Text\", name: \"Emphasis\", code: \"<em>This part matters.</em>\", use: \"Adds spoken emphasis, usually displayed in italics.\" },\n  { group: \"Text\", name: \"Strong importance\", code: \"<strong>Do not forget this.</strong>\", use: \"Marks text as especially important.\" },\n  { group: \"Text\", name: \"Line break\", code: \"First line<br>\\nSecond line\", use: \"Starts a new line without starting a new paragraph.\" },\n  { group: \"Lists\", name: \"Numbered list\", code: \"<ol>\\n  <li>First thing</li>\\n  <li>Second thing</li>\\n</ol>\", use: \"Creates a list where order matters.\" },\n  { group: \"Lists\", name: \"Bullet list\", code: \"<ul>\\n  <li>One idea</li>\\n  <li>Another idea</li>\\n</ul>\", use: \"Creates a list where order does not matter.\" },\n  { group: \"Links\", name: \"Link to a website\", code: \"<a href=\\\"https://example.com\\\">Visit the site</a>\", use: \"Makes clickable text that opens another website.\" },\n  { group: \"Links\", name: \"Link to another page\", code: \"<a href=\\\"facts.html\\\">Read my facts</a>\", use: \"Connects one HTML file to another.\" },\n  { group: \"Links\", name: \"Jump link\", code: \"<a href=\\\"#ending\\\">Jump to the ending</a>\\n\\n<section id=\\\"ending\\\">\\n  The ending goes here.\\n</section>\", use: \"Moves the reader to a named place on the same page.\" },\n  { group: \"Media\", name: \"Picture\", code: \"<img src=\\\"picture.jpg\\\" alt=\\\"Describe the picture\\\">\", use: \"Embeds a picture and describes it accessibly.\" },\n  { group: \"Media\", name: \"Audio player\", code: \"<audio controls src=\\\"sound.mp3\\\">\\n  Your browser cannot play this sound.\\n</audio>\", use: \"Adds controls for playing sound.\" },\n  { group: \"Media\", name: \"Video player\", code: \"<video controls src=\\\"movie.mp4\\\">\\n  Your browser cannot play this video.\\n</video>\", use: \"Adds controls for playing video.\" },\n  { group: \"Interactive\", name: \"Reveal hidden writing\", code: \"<details>\\n  <summary>Open the secret</summary>\\n  <p>The hidden words appear here.</p>\\n</details>\", use: \"Lets a reader open and close extra content without JavaScript.\" },\n  { group: \"Structure\", name: \"Navigation\", code: \"<nav>\\n  <a href=\\\"index.html\\\">Home</a>\\n  <a href=\\\"facts.html\\\">Facts</a>\\n</nav>\", use: \"Groups the main links used to move around a website.\" },\n  { group: \"Structure\", name: \"Section\", code: \"<section>\\n  <h2>Section title</h2>\\n  <p>Section content.</p>\\n</section>\", use: \"Groups content that belongs to the same idea.\" },\n  { group: \"Style\", name: \"Simple page styles\", code: \"<style>\\n  body {\\n    background: lightyellow;\\n    color: navy;\\n    font-family: sans-serif;\\n  }\\n</style>\", use: \"Adds CSS that changes the appearance of the page.\" },\n];\n\nfunction ReferenceLab({ onBack }: { onBack: () => void }) {\n  const [search, setSearch] = useState(\"\");\n  const [group, setGroup] = useState(\"All\");\n  const groups = [\"All\", ...Array.from(new Set(snippets.map((s) => s.group)))];\n  const shown = snippets.filter((s) => (group === \"All\" || s.group === group) && `${s.name} ${s.use} ${s.code}`.toLowerCase().includes(search.toLowerCase()));\n  return (\n    <LabShell title=\"HTML Snippet Board\" subtitle=\"Find a building block, learn what it does, then copy it into your page.\" color=\"bg-[#d7c0f4]\" onBack={onBack}>\n      <Paper pin=\"blue\">\n        <div className=\"grid md:grid-cols-[1fr_auto] gap-3 mb-5\">\n          <Field label=\"Search the snippets\" value={search} onChange={setSearch} placeholder=\"Try: picture, link, list…\" />\n          <label className=\"font-black\">Category\n            <select value={group} onChange={(e) => setGroup(e.target.value)} className=\"block mt-1 bg-white border-3 border-[#17233c] px-4 py-3\">\n              {groups.map((g) => <option key={g}>{g}</option>)}\n            </select>\n          </label>\n        </div>\n        <div className=\"grid lg:grid-cols-2 gap-5\">\n          {shown.map((snippet, i) => (\n            <article key={snippet.name} className={`${i % 3 === 0 ? \"bg-[#ffe17a]\" : i % 3 === 1 ? \"bg-[#dff0ff]\" : \"bg-[#dff5df]\"} border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#665b4a]`}>\n              <p className=\"text-xs font-black tracking-widest\">{snippet.group.toUpperCase()}</p>\n              <h2 className=\"text-2xl font-black\">{snippet.name}</h2>\n              <p className=\"font-bold my-2\">{snippet.use}</p>\n              <pre className=\"bg-[#263d2d] text-white border-4 border-[#9b6537] p-3 overflow-auto text-sm\"><code>{snippet.code}</code></pre>\n              <button onClick={() => navigator.clipboard.writeText(snippet.code)} className=\"mt-3 bg-white border-3 border-[#17233c] px-3 py-2 font-black\">Copy snippet</button>\n            </article>\n          ))}\n        </div>\n        {!shown.length && <p className=\"text-xl font-black text-center py-10\">No snippets match that search yet.</p>}\n      </Paper>\n    </LabShell>\n  );\n}\n\nexport function App() {\n  const [module, setModule] = useState<ModuleName>(\"hub\");\n  if (module === \"hub\") return <ModuleHub choose={setModule} />;\n  if (module === \"first\") return <><BackButton onBack={() => setModule(\"hub\")} /><FirstWebsiteApp /></>;\n  if (module === \"hypertext\") return <HypertextLab onBack={() => setModule(\"hub\")} />;\n  if (module === \"adventure\") return <AdventureLab onBack={() => setModule(\"hub\")} />;\n  if (module === \"poetry\") return <PoetryLab onBack={() => setModule(\"hub\")} />;\n  return <ReferenceLab onBack={() => setModule(\"hub\")} />;\n}\n","createdAt",["D",1785507612437],"branchVersion","branchId","e61b9380-cdfc-422f-a63c-d1817f84669f","id","aef53a57-6458-4eeb-8180-aac88cdb3009","firstpage",["D",1785431448217],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A 20-minute HTML website maker for kids","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3c8e68aa-c2ee-49f5-a58d-a7c153163700/square512?exp=1789595441&sig=806ba77f11adb6283b7e2418304f2c1475df1d25c77c0d9bea11a06748d755c4","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","019fb401-dc04-779a-98cc-bb5991078e25","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","aef53a5764584eeb8180aac88cdb3009","tursoHostname","aef53a5764584eeb8180aac88cdb3009-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789563036726],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_18":57,"_110":111,"_112":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":102,"_103":46,"_104":105},"isOwned",162,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",91,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":249,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":250,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":251,"_86":252,"_88":253,"_90":25},"tree",[186,193,194],"files",[186,187,188,189,190,191,192,193,194],"counts",{"_175":65,"_176":177,"_178":65,"_179":180,"_181":182},"contents",[149,150,151],"upstreamProject",{"_44":100,"_32":144,"_53":145,"_55":146,"_50":51,"_84":147},"upstreamBranch",{"_44":95,"_39":138,"_139":140,"_32":92,"_93":100,"_13":97,"_94":-5,"_96":-5,"_141":142,"_48":-5,"_90":25,"_50":51,"_104":143,"_66":102,"_103":144},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789595442&sig=becc6f09df054daf56224eb9b2dc2eb7a9abb807abee67d755a41375cdef0ba8",{"_106":143,"_113":148},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789595442&sig=6b8531f890a3eea84fb2ce938eeae2a3f025489772a0c0aa1e4b4802f95d58f9",{"_44":169,"_32":170,"_30":171,"_154":-5,"_42":43,"_41":155,"_156":61,"_39":172,"_13":65,"_34":173,"_36":-5,"_24":25,"_160":-5,"_27":174},{"_44":162,"_32":163,"_30":164,"_154":-5,"_42":43,"_41":165,"_156":25,"_39":166,"_13":155,"_34":20,"_36":167,"_24":25,"_160":-5,"_27":168},{"_44":152,"_32":153,"_30":59,"_154":-5,"_42":43,"_41":155,"_156":25,"_39":157,"_13":65,"_34":158,"_36":159,"_24":25,"_160":46,"_27":161},"a22b5d6f-0840-477f-ba59-7f79c52695b0","index.ts","parentId",1,"latest",["D",1785431448217],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[153],"861febec-6615-4d8b-aea1-f65042c8ed84","README.md","019fb401-dc04-779a-98cc-b5616de19757",50,["D",1785504477449],"# HTML Writing Lab\n\nA collection of beginner-friendly HTML writing activities for young web makers.\n\n## Activities\n\n- Make Your First Website\n- Tell a Hypertext Story\n- Choose Your Own Adventure\n- Make a Web Poem\n- HTML Snippet Board\n\nThe activities introduce HTML structure, text, links, images, audio, video, and simple page-to-page navigation. Each builder includes a live preview and produces downloadable HTML.\n\nLive site: https://firstpage.val.run/\n",[163],"17ae220a-6dc4-4ed9-bfd2-7ab3f582c2d3","frontend","019fb401-dc04-779a-98cc-ad389a503384",["D",1785431448217],"directory",[170],"pulls","branches",2,"forks","envVars",{"_183":65,"_185":65},"connections",{"_183":65,"_184":65},"count","unfilledCount","emptyCount",{"_44":169,"_32":170,"_30":171,"_154":-5,"_42":43,"_41":155,"_156":61,"_39":246,"_13":65,"_34":173,"_36":-5,"_24":25,"_160":-5,"_196":247,"_27":248},{"_44":242,"_32":232,"_30":227,"_154":171,"_42":43,"_41":155,"_156":61,"_39":243,"_13":65,"_34":173,"_36":-5,"_24":25,"_160":-5,"_196":244,"_27":245},{"_44":233,"_32":234,"_30":235,"_154":227,"_42":43,"_41":236,"_156":25,"_39":237,"_13":238,"_34":35,"_36":239,"_24":25,"_160":-5,"_196":240,"_27":241},{"_44":226,"_32":33,"_30":31,"_154":227,"_42":43,"_41":14,"_156":25,"_39":228,"_13":229,"_34":35,"_36":38,"_24":25,"_160":-5,"_196":230,"_27":231},{"_44":219,"_32":220,"_30":221,"_154":171,"_42":43,"_41":155,"_156":61,"_39":222,"_13":65,"_34":20,"_36":223,"_24":25,"_160":-5,"_196":224,"_27":225},{"_44":211,"_32":212,"_30":213,"_154":171,"_42":43,"_41":214,"_156":61,"_39":215,"_13":155,"_34":35,"_36":216,"_24":25,"_160":-5,"_196":217,"_27":218},{"_44":202,"_32":203,"_30":204,"_154":171,"_42":43,"_41":205,"_156":61,"_39":206,"_13":207,"_34":35,"_36":208,"_24":25,"_160":-5,"_196":209,"_27":210},{"_44":162,"_32":163,"_30":164,"_154":-5,"_42":43,"_41":165,"_156":25,"_39":199,"_13":155,"_34":20,"_36":167,"_24":25,"_160":-5,"_196":200,"_27":201},{"_44":152,"_32":153,"_30":59,"_154":-5,"_42":43,"_41":155,"_156":25,"_39":195,"_13":65,"_34":158,"_36":159,"_24":25,"_160":46,"_196":197,"_27":198},["D",1785431448217],"children",[],[153],["D",1785504477449],[],[163],"55b836cf-367f-4bc6-a7f1-ac60212817fe","root.tsx","019fb401-dc04-779a-98cc-aa62523f023e",44,["D",1785442667213],4,"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <meta name=\"description\" content=\"Creative HTML writing activities for young web makers.\" />\n          <title>HTML Writing Lab</title>\n          <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n          <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\n          <link href=\"https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;700&family=Cinzel+Decorative:wght@700&family=Comic+Neue:wght@400;700&family=Chewy&family=Merriweather:wght@400;700&family=Nunito:wght@400;700;900&family=Patrick+Hand&family=Special+Elite&display=swap\" rel=\"stylesheet\" />\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"m-0\">\n          <main><div id=\"root\" /></main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[170,203],"463cef6c-51d1-479d-85ed-e149b82cdebb","index.tsx","019fb401-dc04-779a-98cc-a762fe5dac82",39,["D",1785442604236],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/Modules.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[170,212],"8c55a443-331e-4e9e-b0ca-7929ca69f4e8","favicon.svg","019fb401-dc04-779a-98cc-a25e10fe4579",["D",1785431448217],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[170,220],"b73cf28b-4ab7-44a9-898a-44dfb6b56180","019fb401-dc04-779a-98cc-9f7db0f3fea4",["D",1785507612437],31,[],[170,232,33],"components","9e11e45e-fa08-40e7-bf4f-2cc0c88dbae0","App.tsx","019fb401-dc04-779a-98cc-9577409b5cee",57,["D",1785506358228],37,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\n\ntype Topic = { name: string; icon: string; example: string; page: string; prompt: string };\ntype Project = {\n  topic: string;\n  subject: string;\n  title: string;\n  intro: string;\n  sectionTitle: string;\n  sectionText: string;\n  facts: string[];\n  secondPage: string;\n  secondTitle: string;\n  secondText: string;\n  font: string;\n  background: string;\n  ink: string;\n  accent: string;\n  image: string;\n  imageAlt: string;\n};\n\nconst topics: Topic[] = [\n  { name: \"Food\", icon: \"🍕\", example: \"homemade pizza\", page: \"My Recipe\", prompt: \"a food you love\" },\n  { name: \"Gaming\", icon: \"🎮\", example: \"Minecraft\", page: \"Tips & Tricks\", prompt: \"a game you enjoy\" },\n  { name: \"Animals\", icon: \"🐯\", example: \"red pandas\", page: \"Amazing Facts\", prompt: \"an animal you love\" },\n  { name: \"Arts & Crafts\", icon: \"🎨\", example: \"paper airplanes\", page: \"Project Gallery\", prompt: \"something you make\" },\n  { name: \"Books\", icon: \"📚\", example: \"The Wild Robot\", page: \"Favorite Characters\", prompt: \"a book you recommend\" },\n  { name: \"Movies\", icon: \"🎬\", example: \"an animated movie\", page: \"My Review\", prompt: \"a movie you love\" },\n  { name: \"Music\", icon: \"🎵\", example: \"playing drums\", page: \"My Playlist\", prompt: \"music you enjoy\" },\n  { name: \"My Own Topic\", icon: \"💡\", example: \"anything at all\", page: \"More About It\", prompt: \"your own great idea\" },\n];\n\nconst topicPaper = [\"bg-[#ffe17a]\", \"bg-[#a9d8ff]\", \"bg-[#b9e6bd]\", \"bg-[#ffb8c2]\", \"bg-[#d7c0f4]\", \"bg-[#ffca8a]\", \"bg-[#aee5df]\", \"bg-[#fffdf3]\"];\n\nconst initial: Project = {\n  topic: \"\",\n  subject: \"\",\n  title: \"\",\n  intro: \"\",\n  sectionTitle: \"Why I like it\",\n  sectionText: \"\",\n  facts: [\"\", \"\", \"\"],\n  secondPage: \"More Facts\",\n  secondTitle: \"More things to know\",\n  secondText: \"\",\n  font: \"friendly\",\n  background: \"cream\",\n  ink: \"navy\",\n  accent: \"red\",\n  image: \"🌟\",\n  imageAlt: \"A star\",\n};\n\nconst fonts: Record<string, string> = {\n  friendly: \"'Nunito', sans-serif\",\n  comic: \"'Comic Neue', cursive\",\n  bubble: \"'Chewy', cursive\",\n  storybook: \"'Merriweather', serif\",\n  marker: \"'Patrick Hand', cursive\",\n  handwriting: \"'Caveat', cursive\",\n  typewriter: \"'Special Elite', monospace\",\n  poster: \"'Bangers', fantasy\",\n  adventure: \"'Cinzel Decorative', fantasy\",\n  clean: \"Verdana, Arial, sans-serif\",\n};\nconst fontLabels: Record<string, string> = {\n  friendly: \"Friendly\", comic: \"Comic\", bubble: \"Bubble\", storybook: \"Storybook\", marker: \"Marker\",\n  handwriting: \"Handwriting\", typewriter: \"Typewriter\", poster: \"Big Poster\", adventure: \"Adventure\", clean: \"Super Clear\",\n};\nconst fontStylesheet = \"https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;700&family=Cinzel+Decorative:wght@700&family=Comic+Neue:wght@400;700&family=Chewy&family=Merriweather:wght@400;700&family=Nunito:wght@400;700;900&family=Patrick+Hand&family=Special+Elite&display=swap\";\n\nconst colors: Record<string, string> = {\n  cream: \"#fff8e8\", sky: \"#e5f4ff\", mint: \"#e7f8ef\", blush: \"#fff0f0\", night: \"#17233c\",\n  navy: \"#17233c\", plum: \"#502b5f\", forest: \"#174d3b\", charcoal: \"#27272a\", white: \"#ffffff\",\n  red: \"#ef5138\", blue: \"#2878d0\", green: \"#218c5b\", purple: \"#7c4dcc\", orange: \"#e87822\",\n};\nconst steps = [\"Topic\", \"Home page\", \"New page\", \"Links\", \"Design\", \"Finish\"];\n\nfunction esc(value: string) {\n  return value.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n}\n\nfunction fileName(value: string) {\n  return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, \"-\").replace(/^-|-$/g, \"\") || \"more\";\n}\n\nfunction AppHeader({ step, setStep }: { step: number; setStep: (n: number) => void }) {\n  return (\n    <header className=\"max-w-7xl mx-auto px-4 pt-5 pb-4 flex flex-wrap items-center gap-4\">\n      <button onClick={() => setStep(0)} className=\"text-left mr-auto bg-[#fffdf3] border-4 border-[#17233c] px-6 py-3 shadow-[6px_6px_0_#ef5138] -rotate-1 relative\">\n        <span className=\"absolute -top-3 left-1/2 w-5 h-5 rounded-full bg-[#f3c623] border-2 border-[#8a6312] shadow\" />\n        <span className=\"text-3xl font-black text-[#17233c]\">Make a <span className=\"text-[#ef5138]\">Page!</span></span>\n        <span className=\"block text-xs font-black tracking-widest text-[#2878d0]\">YOUR FIRST WEBSITE</span>\n      </button>\n      <div className=\"flex items-center gap-2\" aria-label={`Step ${step + 1} of ${steps.length}`}>\n        {steps.map((label, i) => (\n          <button\n            key={label}\n            onClick={() => i < step && setStep(i)}\n            title={label}\n            className={`h-3 rounded-full transition-all ${i === step ? \"w-10 bg-[#ef5138]\" : i < step ? \"w-3 bg-[#218c5b]\" : \"w-3 bg-[#dfcfad]\"}`}\n          />\n        ))}\n        <span className=\"ml-2 text-sm font-bold text-[#665b4a]\">{step + 1} of {steps.length}</span>\n      </div>\n    </header>\n  );\n}\n\nfunction LessonCard({ eyebrow, title, children }: { eyebrow: string; title: string; children: any }) {\n  return (\n    <section className=\"bg-[#fffdf3] border-4 border-[#17233c] rounded-sm p-5 md:p-7 shadow-[10px_10px_0_#f0c85a] relative\">\n      <span className=\"absolute -top-4 left-8 w-6 h-6 rounded-full bg-[#ef5138] border-2 border-[#8f2618] shadow-md\" aria-hidden=\"true\" />\n      <span className=\"inline-block bg-[#2878d0] text-white px-3 py-1 -rotate-1 shadow-[3px_3px_0_#17233c] text-xs font-black tracking-widest uppercase mb-2\">{eyebrow}</span>\n      <h1 className=\"text-3xl md:text-4xl font-black text-[#17233c] mt-1 mb-3\">{title}</h1>\n      {children}\n    </section>\n  );\n}\n\nfunction Field({ label, value, onChange, placeholder, area = false }: any) {\n  const props = {\n    value,\n    onChange: (e: any) => onChange(e.target.value),\n    placeholder,\n    className: \"w-full bg-[#fffef8] border-0 border-b-2 border-[#6f9bd1] focus:border-[#ef5138] focus:outline-none rounded-none px-4 py-3 text-lg text-[#17233c] shadow-[inset_0_-1px_0_#bfd2e8]\",\n  };\n  return (\n    <label className=\"block mb-4\">\n      <span className=\"block font-black text-[#17233c] mb-1\">{label}</span>\n      {area ? <textarea {...props} rows={3} /> : <input {...props} />}\n    </label>\n  );\n}\n\nfunction CodeNote({ children }: { children: any }) {\n  return <div className=\"bg-[#263d2d] text-white border-[10px] border-[#9b6537] rounded-sm px-4 py-3 font-mono text-sm overflow-x-auto shadow-[inset_0_0_12px_#15251a,4px_4px_0_#5c3b22]\">{children}</div>;\n}\n\nfunction TagLesson({ title = \"New HTML building blocks\", tags }: { title?: string; tags: { tag: string; meaning: string; example?: string }[] }) {\n  return (\n    <aside className=\"my-5 bg-[#ffe17a] border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#2878d0] rotate-[0.3deg]\">\n      <p className=\"font-black text-lg mb-3\">🧱 {title}</p>\n      <div className=\"space-y-3\">\n        {tags.map((item) => (\n          <div key={item.tag} className=\"grid grid-cols-[auto_1fr] gap-3 items-start\">\n            <code className=\"bg-[#17233c] text-white px-2 py-1 text-sm font-bold\">{item.tag}</code>\n            <div><p className=\"font-bold\">{item.meaning}</p>{item.example && <code className=\"text-xs text-[#502b5f] break-all\">{item.example}</code>}</div>\n          </div>\n        ))}\n      </div>\n    </aside>\n  );\n}\n\nfunction Preview({ project, page = \"home\", onNavigate }: { project: Project; page?: \"home\" | \"second\"; onNavigate?: (page: \"home\" | \"second\") => void }) {\n  const dark = project.background === \"night\";\n  const bg = colors[project.background];\n  const ink = dark ? \"#ffffff\" : colors[project.ink];\n  const accent = colors[project.accent];\n  return (\n    <section className=\"bg-[#f4e3b2] border-[10px] border-[#ef5138] overflow-hidden shadow-[10px_10px_0_#17233c]\">\n      <span className=\"absolute top-1 left-1/2 z-10 w-5 h-5 rounded-full bg-[#f3c623] border-2 border-[#8a6312]\" aria-hidden=\"true\" />\n      <div className=\"bg-[#17233c] text-white px-4 py-2 flex gap-2 items-center\">\n        <span className=\"w-3 h-3 rounded-full bg-[#ef5138]\" /><span className=\"w-3 h-3 rounded-full bg-[#f0c85a]\" /><span className=\"w-3 h-3 rounded-full bg-[#4caf70]\" />\n        <span className=\"ml-2 text-xs font-bold\">My website</span>\n      </div>\n      <div className=\"min-h-[420px] p-6 md:p-8\" style={{ background: bg, color: ink, fontFamily: (fonts[project.font] || fonts.friendly) }}>\n        <nav className=\"flex gap-4 mb-8 font-bold\" style={{ color: accent }}>\n          <button onClick={() => onNavigate?.(\"home\")} className=\"underline\">Home</button>\n          <button onClick={() => onNavigate?.(\"second\")} className=\"underline\">{project.secondPage || \"More\"}</button>\n        </nav>\n        {page === \"home\" ? (\n          <>\n            {project.image.startsWith(\"data:image/\") ? <img src={project.image} alt={project.imageAlt} className=\"max-h-64 max-w-full rounded-2xl mb-5 object-cover\" /> : <div className=\"text-6xl mb-4\" role=\"img\" aria-label={project.imageAlt}>{project.image}</div>}\n            <h1 className=\"text-4xl md:text-5xl font-black mb-4\" style={{ color: accent }}>{project.title || \"My Awesome Website\"}</h1>\n            <p className=\"text-lg mb-7\">{project.intro || \"My introduction will appear here.\"}</p>\n            <h2 className=\"text-2xl font-black mb-2\">{project.sectionTitle}</h2>\n            <p className=\"mb-6\">{project.sectionText || \"This is where I can explain why my topic is interesting.\"}</p>\n            <h2 className=\"text-2xl font-black mb-2\">Three things to know</h2>\n            <ol className=\"list-decimal ml-6 space-y-1\">\n              {project.facts.map((fact, i) => <li key={i}>{fact || `Interesting fact ${i + 1}`}</li>)}\n            </ol>\n          </>\n        ) : (\n          <>\n            <h1 className=\"text-4xl md:text-5xl font-black mb-5\" style={{ color: accent }}>{project.secondTitle || project.secondPage}</h1>\n            <p className=\"text-lg\">{project.secondText || \"More information will go on this page.\"}</p>\n            <p className=\"mt-10 underline font-bold\" style={{ color: accent }}>← Back to home</p>\n          </>\n        )}\n      </div>\n    </section>\n  );\n}\n\nfunction ButtonRow({ back, next, nextDisabled = false, nextLabel = \"Next →\" }: any) {\n  return (\n    <div className=\"flex gap-3 mt-6\">\n      {back && <button onClick={back} className=\"px-5 py-3 rounded-xl border-2 border-[#17233c] font-black text-[#17233c] bg-white\">← Back</button>}\n      <button disabled={nextDisabled} onClick={next} className=\"flex-1 px-5 py-3 rounded-xl border-2 border-[#17233c] font-black text-white bg-[#ef5138] shadow-[3px_3px_0_#17233c] disabled:opacity-40 disabled:shadow-none\">{nextLabel}</button>\n    </div>\n  );\n}\n\nexport function FirstWebsiteApp() {\n  const [step, setStep] = useState(0);\n  const [page, setPage] = useState<\"home\" | \"second\">(\"home\");\n  const [project, setProject] = useState<Project>(() => {\n    try { return JSON.parse(localStorage.getItem(\"firstpage-project\") || \"\") || initial; } catch { return initial; }\n  });\n  const update = (values: Partial<Project>) => setProject((old) => ({ ...old, ...values }));\n\n  useEffect(() => localStorage.setItem(\"firstpage-project\", JSON.stringify(project)), [project]);\n  useEffect(() => setPage(step === 2 ? \"second\" : \"home\"), [step]);\n\n  const chosen = useMemo(() => topics.find((t) => t.name === project.topic), [project.topic]);\n  const secondFile = `${fileName(project.secondPage)}.html`;\n\n  function selectTopic(topic: Topic) {\n    update({ topic: topic.name, subject: \"\", secondPage: topic.page, image: topic.icon, imageAlt: `An icon representing ${topic.name}` });\n  }\n\n  function makeHTML(which: \"home\" | \"second\") {\n    const nav = `  <nav>\n    <a href=\"index.html\">Home</a>\n    <a href=\"${secondFile}\">${esc(project.secondPage)}</a>\n  </nav>`;\n\n    const style = `  <style>\n    body {\n      max-width: 760px;\n      margin: 40px auto;\n      padding: 24px;\n      background: ${colors[project.background]};\n      color: ${project.background === \"night\" ? \"#fff\" : colors[project.ink]};\n      font-family: ${fonts[project.font] || fonts.friendly};\n      line-height: 1.6;\n    }\n\n    nav {\n      display: flex;\n      gap: 18px;\n      margin-bottom: 40px;\n    }\n\n    a,\n    h1 {\n      color: ${colors[project.accent]};\n    }\n\n    h1 {\n      font-size: 3rem;\n    }\n\n    .hero {\n      font-size: 5rem;\n    }\n\n    img {\n      max-width: 100%;\n      border-radius: 18px;\n    }\n  </style>`;\n\n    const imageMarkup = project.image.startsWith(\"data:image/\")\n      ? `  <img\n    src=\"${project.image}\"\n    alt=\"${esc(project.imageAlt)}\"\n  >`\n      : `  <div\n    class=\"hero\"\n    role=\"img\"\n    aria-label=\"${esc(project.imageAlt)}\"\n  >\n    ${esc(project.image)}\n  </div>`;\n\n    const body = which === \"home\"\n      ? `${nav}\n\n${imageMarkup}\n\n  <h1>${esc(project.title)}</h1>\n  <p>${esc(project.intro)}</p>\n\n  <h2>${esc(project.sectionTitle)}</h2>\n  <p>${esc(project.sectionText)}</p>\n\n  <h2>Three things to know</h2>\n  <ol>\n${project.facts.map((fact) => `    <li>${esc(fact)}</li>`).join(\"\\n\")}\n  </ol>`\n      : `${nav}\n\n  <h1>${esc(project.secondTitle)}</h1>\n  <p>${esc(project.secondText)}</p>\n\n  <a href=\"index.html\">← Back to home</a>`;\n\n    return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta\n    name=\"viewport\"\n    content=\"width=device-width, initial-scale=1.0\"\n  >\n  <title>${esc(which === \"home\" ? project.title : project.secondTitle)}</title>\n  <link\n    href=\"${fontStylesheet}\"\n    rel=\"stylesheet\"\n  >\n${style}\n</head>\n<body>\n${body}\n</body>\n</html>\n`;\n  }\n\n  async function download() {\n    const zip = new JSZip();\n    zip.file(\"index.html\", makeHTML(\"home\"));\n    zip.file(secondFile, makeHTML(\"second\"));\n    zip.file(\"README.txt\", \"Open index.html in a browser to see your website. You made this!\");\n    const blob = await zip.generateAsync({ type: \"blob\" });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement(\"a\");\n    a.href = url;\n    a.download = `${fileName(project.subject || \"my-first-website\")}.zip`;\n    a.click();\n    URL.revokeObjectURL(url);\n  }\n\n  function uploadImage(file?: File) {\n    if (!file || !file.type.startsWith(\"image/\")) return;\n    const reader = new FileReader();\n    reader.onload = () => {\n      const img = new Image();\n      img.onload = () => {\n        const scale = Math.min(1, 1200 / Math.max(img.width, img.height));\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = Math.round(img.width * scale); canvas.height = Math.round(img.height * scale);\n        canvas.getContext(\"2d\")?.drawImage(img, 0, 0, canvas.width, canvas.height);\n        update({ image: canvas.toDataURL(\"image/jpeg\", 0.82), imageAlt: file.name.replace(/\\.[^.]+$/, \"\").replaceAll(\"-\", \" \") });\n      };\n      img.src = String(reader.result);\n    };\n    reader.readAsDataURL(file);\n  }\n\n  function startOver() {\n    if (confirm(\"Start over with a brand-new website?\")) {\n      setProject(initial); setStep(0); localStorage.removeItem(\"firstpage-project\");\n    }\n  }\n\n  return (\n    <div className=\"min-h-screen bg-[#b97842] text-[#17233c] border-[14px] border-[#6e4325]\" style={{ backgroundImage: \"radial-gradient(#8f562d 1.5px, transparent 1.5px)\", backgroundSize: \"12px 12px\" }}>\n      <AppHeader step={step} setStep={setStep} />\n      <main className=\"max-w-7xl mx-auto px-4 pb-12\">\n        {step === 0 && (\n          <LessonCard eyebrow=\"Step 1 · Choose your subject\" title=\"What are you really into?\">\n            <p className=\"text-lg mb-5\">Pick something you could talk about all day. There are no wrong answers.</p>\n            <TagLesson title=\"Every webpage starts with a structure\" tags={[\n              { tag: \"<html>\", meaning: \"Wraps the whole webpage.\" },\n              { tag: \"<head>\", meaning: \"Holds information for the browser, like the page title.\" },\n              { tag: \"<body>\", meaning: \"Holds everything people can see on the page.\" },\n            ]} />\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\n              {topics.map((topic, i) => (\n                <button key={topic.name} onClick={() => selectTopic(topic)} className={`p-4 rounded-sm border-4 border-[#17233c] text-left transition-transform hover:-translate-y-1 relative ${topicPaper[i]} ${project.topic === topic.name ? \"shadow-[7px_7px_0_#ef5138] -rotate-1\" : \"shadow-[4px_4px_0_#665b4a]\"}`}>\n                  <span className=\"absolute -top-2 right-3 w-4 h-4 rounded-full bg-[#ef5138] border border-[#8f2618]\" aria-hidden=\"true\" />\n                  <span className=\"text-4xl block mb-2\">{topic.icon}</span>\n                  <span className=\"font-black\">{topic.name}</span>\n                </button>\n              ))}\n            </div>\n            {chosen && (\n              <div className=\"mt-6 max-w-xl\">\n                <Field label={`What ${chosen.prompt} will your website be about?`} value={project.subject} onChange={(subject: string) => update({ subject, title: subject ? `All About ${subject}` : \"\" })} placeholder={`For example: ${chosen.example}`} />\n                <ButtonRow next={() => setStep(1)} nextDisabled={!project.subject.trim()} nextLabel=\"Let’s make a website →\" />\n              </div>\n            )}\n          </LessonCard>\n        )}\n\n        {step > 0 && step < 5 && (\n          <div className=\"grid lg:grid-cols-[minmax(0,1fr)_minmax(380px,1fr)] gap-6 items-start\">\n            <div>\n              {step === 1 && (\n                <LessonCard eyebrow=\"Step 2 · Home page\" title=\"Tell people what your site is about\">\n                  <p className=\"mb-5 text-lg\">A heading is the biggest idea on a page. Paragraphs add the details.</p>\n                  <TagLesson tags={[\n                    { tag: \"<h1>\", meaning: \"The one big heading that names the page.\", example: \"<h1>All About Red Pandas</h1>\" },\n                    { tag: \"<h2>\", meaning: \"A smaller heading that starts a section.\" },\n                    { tag: \"<p>\", meaning: \"A paragraph of sentences.\" },\n                    { tag: \"<ol>\", meaning: \"Starts a numbered list.\" },\n                    { tag: \"<li>\", meaning: \"One item inside a list.\" },\n                  ]} />\n                  <Field label=\"Your big heading\" value={project.title} onChange={(title: string) => update({ title })} placeholder=\"All About Red Pandas\" />\n                  <CodeNote><h1><span className=\"text-[#f0c85a]\">{project.title || \"Your title\"}</span></h1></CodeNote>\n                  <div className=\"mt-4\"><Field area label=\"Introduce your topic\" value={project.intro} onChange={(intro: string) => update({ intro })} placeholder=\"Tell your visitor what this website is about.\" /></div>\n                  <Field label=\"Name your first section\" value={project.sectionTitle} onChange={(sectionTitle: string) => update({ sectionTitle })} />\n                  <Field area label=\"What do you want to say here?\" value={project.sectionText} onChange={(sectionText: string) => update({ sectionText })} placeholder=\"I like this because…\" />\n                  <p className=\"font-black mb-2\">Add three facts</p>\n                  {project.facts.map((fact, i) => <Field key={i} label={`Fact ${i + 1}`} value={fact} onChange={(value: string) => { const facts = [...project.facts]; facts[i] = value; update({ facts }); }} placeholder=\"Something interesting\" />)}\n                  <ButtonRow back={() => setStep(0)} next={() => setStep(2)} nextDisabled={!project.title.trim() || !project.intro.trim()} />\n                </LessonCard>\n              )}\n              {step === 2 && (\n                <LessonCard eyebrow=\"Step 3 · Add another page\" title=\"Websites can have more than one page\">\n                  <p className=\"mb-5 text-lg\">Your second page is another HTML file. What should visitors discover there?</p>\n                  <TagLesson tags={[\n                    { tag: \"<!DOCTYPE html>\", meaning: \"Tells the browser this is a modern HTML document.\" },\n                    { tag: \"<title>\", meaning: \"Names the page in the browser tab.\" },\n                    { tag: \"<meta>\", meaning: \"Gives the browser useful page information.\" },\n                  ]} />\n                  <Field label=\"Page name\" value={project.secondPage} onChange={(secondPage: string) => update({ secondPage })} placeholder=\"Amazing Facts\" />\n                  <p className=\"text-sm font-bold mb-4\">File name: <code className=\"bg-[#e5f4ff] px-2 py-1 rounded\">{secondFile}</code></p>\n                  <Field label=\"Page heading\" value={project.secondTitle} onChange={(secondTitle: string) => update({ secondTitle })} placeholder=\"More Amazing Facts\" />\n                  <Field area label=\"What goes on this page?\" value={project.secondText} onChange={(secondText: string) => update({ secondText })} placeholder=\"Share more information, a review, instructions, or favorites.\" />\n                  <ButtonRow back={() => setStep(1)} next={() => setStep(3)} nextDisabled={!project.secondPage.trim() || !project.secondText.trim()} />\n                </LessonCard>\n              )}\n              {step === 3 && (\n                <LessonCard eyebrow=\"Step 4 · Connect your pages\" title=\"Links turn pages into a website\">\n                  <p className=\"text-lg mb-5\">The <code><a></code> tag makes a link. Its <code>href</code> tells the browser which file to open.</p>\n                  <TagLesson tags={[\n                    { tag: \"<nav>\", meaning: \"Groups the links people use to move around a website.\" },\n                    { tag: \"<a>\", meaning: \"Makes text clickable as a link.\" },\n                    { tag: \"href=\\\"…\\\"\", meaning: \"Points the link to another file or website.\" },\n                  ]} />\n                  <div className=\"space-y-4\">\n                    <CodeNote><a href=\"<span className=\"text-[#f0c85a]\">{secondFile}</span>\">{project.secondPage}</a></CodeNote>\n                    <div className=\"text-center text-3xl\">↕</div>\n                    <CodeNote><a href=\"<span className=\"text-[#f0c85a]\">index.html</span>\">Back to home</a></CodeNote>\n                  </div>\n                  <div className=\"mt-6 bg-[#e7f8ef] border-2 border-[#218c5b] rounded-2xl p-4\">\n                    <p className=\"font-black text-[#174d3b]\">Try the navigation in your preview!</p>\n                    <div className=\"flex gap-3 mt-3\">\n                      <button onClick={() => setPage(\"home\")} className=\"px-4 py-2 bg-white border-2 border-[#174d3b] rounded-xl font-bold\">Home</button>\n                      <button onClick={() => setPage(\"second\")} className=\"px-4 py-2 bg-white border-2 border-[#174d3b] rounded-xl font-bold\">{project.secondPage}</button>\n                    </div>\n                  </div>\n                  <ButtonRow back={() => setStep(2)} next={() => setStep(4)} />\n                </LessonCard>\n              )}\n              {step === 4 && (\n                <LessonCard eyebrow=\"Step 5 · Design studio\" title=\"Make it look like yours\">\n                  <p className=\"text-lg mb-5\">HTML gives your site structure. CSS controls colors, fonts, and backgrounds.</p>\n                  <TagLesson title=\"HTML for pictures, CSS for style\" tags={[\n                    { tag: \"<img>\", meaning: \"Places a picture on the page.\" },\n                    { tag: \"src=\\\"…\\\"\", meaning: \"Tells the browser where the picture is.\" },\n                    { tag: \"alt=\\\"…\\\"\", meaning: \"Describes the picture when it cannot be seen.\" },\n                    { tag: \"<style>\", meaning: \"Holds CSS rules for fonts, colors, and backgrounds.\" },\n                  ]} />\n                  <p className=\"font-black mb-2\">Choose an image</p>\n                  <div className=\"flex flex-wrap gap-2 mb-4\">\n                    {[\"🌟\", \"🎮\", \"🐯\", \"🍕\", \"🎨\", \"📚\", \"🎬\", \"🎵\", \"🚀\", \"🌊\"].map((icon) => <button key={icon} onClick={() => update({ image: icon, imageAlt: `A ${icon} illustration` })} className={`text-3xl p-3 rounded-xl border-2 ${project.image === icon ? \"border-[#ef5138] bg-[#fff0e8]\" : \"border-[#b6a98e] bg-white\"}`}>{icon}</button>)}\n                  </div>\n                  <label className=\"block mb-4 border-2 border-dashed border-[#2878d0] bg-[#e5f4ff] rounded-xl p-4 text-center font-black cursor-pointer\">\n                    Upload a picture from this device\n                    <input className=\"sr-only\" type=\"file\" accept=\"image/*\" onChange={(e: any) => uploadImage(e.target.files?.[0])} />\n                  </label>\n                  <Field label=\"Describe the image for someone who cannot see it\" value={project.imageAlt} onChange={(imageAlt: string) => update({ imageAlt })} placeholder=\"A red panda sitting in a tree\" />\n                  <p className=\"font-black mb-2\">Font</p>\n                  <div className=\"grid grid-cols-2 gap-2 mb-5\">\n                    {Object.keys(fonts).map((font) => <button key={font} onClick={() => update({ font })} className={`p-3 rounded-xl border-2 capitalize ${project.font === font ? \"border-[#2878d0] bg-[#e5f4ff]\" : \"border-[#b6a98e] bg-white\"}`} style={{ fontFamily: fonts[font] }}>{fontLabels[font]}</button>)}\n                  </div>\n                  {([\"background\", \"ink\", \"accent\"] as const).map((kind) => (\n                    <div key={kind} className=\"mb-5\">\n                      <p className=\"font-black mb-2 capitalize\">{kind === \"ink\" ? \"Text color\" : `${kind} color`}</p>\n                      <div className=\"flex flex-wrap gap-2\">\n                        {(kind === \"background\" ? [\"cream\", \"sky\", \"mint\", \"blush\", \"night\"] : kind === \"ink\" ? [\"navy\", \"plum\", \"forest\", \"charcoal\"] : [\"red\", \"blue\", \"green\", \"purple\", \"orange\"]).map((color) => (\n                          <button key={color} title={color} onClick={() => update({ [kind]: color })} className={`w-11 h-11 rounded-full border-4 ${project[kind] === color ? \"border-[#17233c] scale-110\" : \"border-white shadow\"}`} style={{ background: colors[color] }}><span className=\"sr-only\">{color}</span></button>\n                        ))}\n                      </div>\n                    </div>\n                  ))}\n                  <CodeNote>body {\"{\"}<br />  background: <span className=\"text-[#f0c85a]\">{colors[project.background]}</span>;<br />  font-family: <span className=\"text-[#f0c85a]\">{fonts[project.font] || fonts.friendly}</span>;<br />{\"}\"}</CodeNote>\n                  <ButtonRow back={() => setStep(3)} next={() => setStep(5)} nextLabel=\"Finish my website →\" />\n                </LessonCard>\n              )}\n            </div>\n            <div className=\"lg:sticky lg:top-4 self-start\">\n              <Preview project={project} page={page} onNavigate={setPage} />\n              {step === 3 && <p className=\"text-center mt-3 text-sm font-bold\">Use the lesson buttons to switch preview pages.</p>}\n            </div>\n          </div>\n        )}\n\n        {step === 5 && (\n          <div className=\"grid lg:grid-cols-[0.8fr_1.2fr] gap-6 items-start\">\n            <LessonCard eyebrow=\"Step 6 · You did it!\" title=\"You made a website!\">\n              <p className=\"text-lg mb-5\">It has two pages, headings, paragraphs, facts, links, an image, colors, and your own style.</p>\n              <TagLesson title=\"The building blocks you used\" tags={[\n                { tag: \"<h1> <h2>\", meaning: \"Headings organize the big ideas.\" },\n                { tag: \"<p> <ol> <li>\", meaning: \"Paragraphs and lists hold your information.\" },\n                { tag: \"<nav> <a>\", meaning: \"Navigation and links connect your pages.\" },\n                { tag: \"<img> <style>\", meaning: \"Images and CSS give the site personality.\" },\n              ]} />\n              <ul className=\"space-y-3 mb-6\">\n                {[\"A home page\", `A ${project.secondPage} page`, \"Links between both pages\", \"Your colors, font, and image\"].map((x) => <li key={x} className=\"font-bold flex gap-3\"><span className=\"text-[#218c5b]\">✓</span>{x}</li>)}\n              </ul>\n              <button onClick={download} className=\"w-full px-5 py-4 rounded-xl border-2 border-[#17233c] font-black text-white bg-[#ef5138] shadow-[4px_4px_0_#17233c]\">Download my website (.zip)</button>\n              <button onClick={() => setStep(4)} className=\"w-full mt-3 px-5 py-3 rounded-xl border-2 border-[#17233c] font-black bg-white\">Keep customizing</button>\n              <div className=\"mt-6 bg-[#e5f4ff] rounded-2xl p-4 border-2 border-[#2878d0]\">\n                <p className=\"font-black\">Before you share</p>\n                <p className=\"text-sm\">Ask a grown-up for help. Don’t put your full name, address, school, phone number, or other private information on a public website.</p>\n              </div>\n            </LessonCard>\n            <div>\n              <div className=\"flex gap-2 mb-3\">\n                <button onClick={() => setPage(\"home\")} className={`px-4 py-2 rounded-xl border-2 font-bold ${page === \"home\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}>Home</button>\n                <button onClick={() => setPage(\"second\")} className={`px-4 py-2 rounded-xl border-2 font-bold ${page === \"second\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}>{project.secondPage}</button>\n              </div>\n              <Preview project={project} page={page} onNavigate={setPage} />\n            </div>\n          </div>\n        )}\n        <footer className=\"mt-10 flex justify-between gap-4 text-sm text-[#665b4a]\">\n          <button onClick={startOver} className=\"underline font-bold\">Start over</button>\n          <a href=\"/source\" className=\"underline font-bold\">View source & remix</a>\n        </footer>\n      </main>\n    </div>\n  );\n}\n",[],[170,232,234],"3006dc29-560d-4e61-97e6-769d16e5a5f7",["D",1785431448217],[188,189],[170,232],["D",1785431448217],[187,190,191,192],[170],["D",1785431448217],["D",1789563036726],{"_106":105,"_113":109},{"_106":105,"_107":-5,"_108":109,"_18":57,"_110":111,"_112":25},{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":102,"_103":46,"_104":105},"ctx",{"_84":-5,"_135":287,"_288":289,"_290":291,"_292":25,"_293":25,"_294":25,"_295":61,"_296":-5,"_297":-7,"_298":-7,"_299":65,"_300":25,"_301":25,"_302":-5,"_303":25,"_304":25,"_305":25,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":92,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","518c05f2c13b243481ef29134a5672756425e459","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v78