My Big Title

\", use: \"Names the page with its most important heading.\" },\n { group: \"Text\", name: \"Section heading\", code: \"

A New Section

\", use: \"Introduces a smaller section inside the page.\" },\n { group: \"Text\", name: \"Paragraph\", code: \"

Write your sentences here.

\", use: \"Groups sentences into a paragraph.\" },\n { group: \"Text\", name: \"Emphasis\", code: \"This part matters.\", use: \"Adds spoken emphasis, usually displayed in italics.\" },\n { group: \"Text\", name: \"Strong importance\", code: \"Do not forget this.\", use: \"Marks text as especially important.\" },\n { group: \"Text\", name: \"Line break\", code: \"First line
\\nSecond line\", use: \"Starts a new line without starting a new paragraph.\" },\n { group: \"Lists\", name: \"Numbered list\", code: \"

First thing
Second thing

\", use: \"Creates a list where order matters.\" },\n { group: \"Lists\", name: \"Bullet list\", code: \"

One idea
Another idea

\", use: \"Creates a list where order does not matter.\" },\n { group: \"Links\", name: \"Link to a website\", code: \"Visit the site\", use: \"Makes clickable text that opens another website.\" },\n { group: \"Links\", name: \"Link to another page\", code: \"Read my facts\", use: \"Connects one HTML file to another.\" },\n { group: \"Links\", name: \"Jump link\", code: \"Jump to the ending\\n\\n

\\n The ending goes here.\\n

\", use: \"Moves the reader to a named place on the same page.\" },\n { group: \"Media\", name: \"Picture\", code: \" $\\\"Describe$ \", use: \"Embeds a picture and describes it accessibly.\" },\n { group: \"Media\", name: \"Audio player\", code: \"

\", use: \"Adds controls for playing sound.\" },\n { group: \"Media\", name: \"Video player\", code: \"

\", use: \"Adds controls for playing video.\" },\n { group: \"Interactive\", name: \"Reveal hidden writing\", code: \"

\\n

Open the secret

\\n

The hidden words appear here.

\\n

\", use: \"Lets a reader open and close extra content without JavaScript.\" },\n { group: \"Structure\", name: \"Navigation\", code: \"\", use: \"Groups the main links used to move around a website.\" },\n { group: \"Structure\", name: \"Section\", code: \"

\\n

Section title

\\n

Section content.

\\n

\", use: \"Groups content that belongs to the same idea.\" },\n { group: \"Style\", name: \"Simple page styles\", code: \"\", use: \"Adds CSS that changes the appearance of the page.\" },\n];\n\ntype Snippet = (typeof snippets)[number];\n\nconst previewOverrides: Record = {\n \"Link to a website\": 'Visit the site

The link brought you here.

',\n \"Link to another page\": 'Read my facts

Facts

This represents another page.

',\n \"Picture\": ' $\"A$ ',\n \"Audio player\": '

An audio player gives the reader play and volume controls.

',\n \"Video player\": '

',\n \"Navigation\": '

Home

Facts

',\n \"Simple page styles\": '

This paragraph is wearing the page styles.

',\n};\n\nfunction snippetPreview(snippet: Snippet) {\n const example = previewOverrides[snippet.name] || snippet.code;\n if (example.trimStart().startsWith(\"\n\n\n \n \n\n\n ${example}\n\n`;\n}\n\nexport function ReferenceLab({ onBack }: { onBack: () => void }) {\n const [search, setSearch] = useState(\"\");\n const [group, setGroup] = useState(\"All\");\n const [copied, setCopied] = useState(null);\n const [copyError, setCopyError] = useState(\"\");\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\n async function copySnippet(snippet: Snippet) {\n setCopyError(\"\");\n try {\n await navigator.clipboard.writeText(snippet.code);\n } catch {\n const temporary = document.createElement(\"textarea\");\n temporary.value = snippet.code;\n temporary.style.position = \"fixed\";\n temporary.style.opacity = \"0\";\n document.body.appendChild(temporary);\n temporary.select();\n const copiedWithFallback = document.execCommand(\"copy\");\n temporary.remove();\n if (!copiedWithFallback) {\n setCopyError(\"Copy did not work. Select the code and copy it manually.\");\n return;\n }\n }\n\n setCopied(snippet.name);\n window.setTimeout(\n () => setCopied((current) => current === snippet.name ? null : current),\n 1800,\n );\n }\n return (\n \n \n

\n \n Category\n \n \n

\n {shown.map((snippet, i) => (\n

{snippet.group.toUpperCase()}

{snippet.name}

{snippet.use}

{snippet.code}

SEE IT IN USE

\n \n

\n copySnippet(snippet)}\n className=\"bg-white border-3 border-[#17233c] px-3 py-2 font-black focus:outline-none focus:ring-4 focus:ring-[#2878d0]\"\n >\n {copied === snippet.name ? \"✓ Copied!\" : \"Copy snippet\"}\n \n {copied === snippet.name && (\n \n ✨ Snippet charm!\n \n )}\n

\n ))}\n

\n {copied ? `${copied} snippet copied to the clipboard.` : copyError}\n

\n {copyError &&

{copyError}

}\n {!shown.length &&

No snippets match that search yet.

}\n \n \n );\n}\n\n",[226,125,94],"69a721b0-bfc0-4e3f-82e3-db4cb6ba2509",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DownloadButton, Field, LabShell, Paper, Preview, Tags, escapeHTML, pageShell, safeAssetName } from \"../components/LabUI.tsx\";\n\nexport function 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(null);\n const [soundFile, setSoundFile] = useState(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\", \"
\");\n const html = useMemo(() => pageShell(title, `\n

${escapeHTML(title)}

\n ${pictureUrl ? ` $\"${escapeHTML(pictureAlt)}\"$ ` : `

${escapeHTML(picture)}

`}\n

${lines(stanza1)}

${lines(stanza2)}

Open the final line

${escapeHTML(whisper)}

\n ${sound ? `

` : \"\"}\n

\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 \n

\n \n

Write a poem the reader can experience

\n \", text: \"Wraps one complete piece of writing.\" },\n { code: \"
\", text: \"Makes a deliberate line break.\" },\n { code: \"\", text: \"Gives words spoken emphasis.\" },\n { code: \"
\", text: \"Hides something until the reader opens it.\" },\n { code: \"
\", text: \"Creates the clickable label for hidden details.\" },\n { code: \"

\n \n );\n}\n\n",[226,125,100],"0197f33b-ebf4-4bb0-a3a3-45ab7a9a0cbd",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Board } from \"../components/LabUI.tsx\";\nimport type { ModuleName } from \"./types.ts\";\n\nexport function ModuleHub({ choose }: { choose: (module: ModuleName) => void }) {\n const cards = [\n { id: \"first\", icon: \"🧱\", tag: \"Level 1\", title: \"Make Your First Website\", text: \"Build two pages about something you love.\", color: \"bg-[#ffe17a]\" },\n { id: \"hypertext\", icon: \"🕸️\", tag: \"Level 1\", title: \"Tell a Hypertext Story\", text: \"Connect scenes and mix words with pictures, sound, and video.\", color: \"bg-[#a9d8ff]\" },\n { id: \"adventure\", icon: \"🗺️\", tag: \"Level 2\", title: \"Choose Your Own Adventure\", text: \"Write choices that send readers down different paths.\", color: \"bg-[#b9e6bd]\" },\n { id: \"poetry\", icon: \"✍️\", tag: \"Level 2\", title: \"Make a Web Poem\", text: \"Use spacing, emphasis, pictures, and sound to perform a poem.\", color: \"bg-[#ffb8c2]\" },\n { id: \"advanced\", icon: \"🛠️\", tag: \"Level 3\", title: \"Build a Whole Website\", text: \"Use a visual editor to create, connect, preview, and download multiple pages.\", color: \"bg-[#ffca8a]\" },\n { id: \"reference\", icon: \"📌\", tag: \"Reference\", title: \"HTML Snippet Board\", text: \"Find, understand, and copy useful HTML building blocks.\", color: \"bg-[#d7c0f4]\" },\n ] as const;\n return (\n \n
\n
\n \n
WELCOME TO THE
\n
HTML Writing Lab
\n
Choose an activity. Write something that could only exist on the web.
\n
\n
\n {cards.map((card, i) => (\n \n ))}\n
\n
\n \n );\n}\n\n",[226,125,106],"c568f4bf-d9f1-4f3a-8e19-a91c39ec631d",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DownloadButton, Field, LabShell, Paper, Preview, Tags, escapeHTML, pageShell, safeAssetName, youtubeEmbedUrl } from \"../components/LabUI.tsx\";\n\nexport function 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(null);\n const [audioFile, setAudioFile] = useState(null);\n const [videoFile, setVideoFile] = useState(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
${escapeHTML(title)}
\n
${escapeHTML(opening)} Follow the strange sound ↓
\n ${imageUrl ? ` $\"${escapeHTML(imageAlt)}\"$ ` : `
${escapeHTML(image)}
`}\n
\n
The discovery
\n
${escapeHTML(scene)}
\n ${audio ? `` : \"\"}\n ${youtubeVideo ? `` : video ? `` : \"\"}\n
See what happened next ↓
\n
\n
The ending
${escapeHTML(ending)}
Read it again ↑
\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 \n
\n \n
1. Write three connected scenes
\n
Links can jump to named places inside the same page. That gives your reader control over movement.
\n \", 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: \"
\", text: \"Groups one scene or part of the story.\" },\n ]} />\n \n \n \n \n
2. Tell it with more than words
\n \", text: \"Embeds a picture.\" },\n { code: \"
\n \n );\n}\n\n",[226,125,112],"04e8d036-57ba-4b22-af9e-450e310f30f2",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n DownloadButton,\n Field,\n LabShell,\n Paper,\n Tags,\n escapeHTML,\n pageShell,\n} from \"../components/LabUI.tsx\";\n\ntype Choice = {\n id: string;\n text: string;\n destinationKey: string;\n};\n\ntype Scene = {\n key: string;\n id: string;\n title: string;\n text: string;\n picture: string;\n ending: boolean;\n endingType: string;\n choices: Choice[];\n};\n\ntype ViewMode = \"plan\" | \"play\" | \"html\";\n\nconst initialScenes: Scene[] = [\n {\n key: \"start\",\n id: \"beginning\",\n title: \"The Beginning\",\n text: \"You reach a fork in the trail just as the sun disappears.\",\n picture: \"🏔️\",\n ending: false,\n endingType: \"\",\n choices: [\n { id: \"choice-cave\", text: \"Enter the glowing cave\", destinationKey: \"cave\" },\n { id: \"choice-tower\", text: \"Climb toward the old tower\", destinationKey: \"tower\" },\n ],\n },\n {\n key: \"cave\",\n id: \"glowing-cave\",\n title: \"The Glowing Cave\",\n text: \"A friendly dragon guards two tunnels and an enormous shelf of books.\",\n picture: \"🐉\",\n ending: false,\n endingType: \"\",\n choices: [\n { id: \"choice-library\", text: \"Ask about the books\", destinationKey: \"library\" },\n { id: \"choice-woods\", text: \"Take the dark tunnel\", destinationKey: \"woods\" },\n ],\n },\n {\n key: \"tower\",\n id: \"old-tower\",\n title: \"The Old Tower\",\n text: \"The tower is actually a telescope pointed at a brand-new planet.\",\n picture: \"🔭\",\n ending: true,\n endingType: \"Mystery\",\n choices: [],\n },\n {\n key: \"library\",\n id: \"dragon-library\",\n title: \"The Dragon Library\",\n text: \"The dragon gives you a library card that opens books into other worlds.\",\n picture: \"📚\",\n ending: true,\n endingType: \"Victory\",\n choices: [],\n },\n {\n key: \"woods\",\n id: \"lost-woods\",\n title: \"Lost in the Woods\",\n text: \"The tunnel leads outside, but now every tree looks exactly the same.\",\n picture: \"🌲\",\n ending: true,\n endingType: \"Disaster\",\n choices: [],\n },\n];\n\nfunction slugify(value: string) {\n return value\n .toLowerCase()\n .trim()\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/^-|-$/g, \"\") || \"new-scene\";\n}\n\nfunction uniqueSceneId(title: string, scenes: Scene[]) {\n const base = slugify(title);\n let id = base;\n let number = 2;\n while (scenes.some((scene) => scene.id === id)) {\n id = base + \"-\" + number;\n number += 1;\n }\n return id;\n}\n\nfunction endingIcon(type: string) {\n if (type === \"Victory\") return \"🏆\";\n if (type === \"Mystery\") return \"🔮\";\n if (type === \"Funny\") return \"😂\";\n if (type === \"Disaster\") return \"💥\";\n return \"🏁\";\n}\n\nfunction sceneMarkup(scene: Scene, scenes: Scene[]) {\n const choices = scene.choices\n .map((choice) => {\n const destination = scenes.find((item) => item.key === choice.destinationKey);\n const href = destination ? \"#\" + destination.id : \"#\";\n return \"
\" + escapeHTML(choice.text || \"Continue\") + \"
\";\n })\n .join(\"\\n\");\n\n const ending = scene.ending\n ? \"
\" + endingIcon(scene.endingType) + \" \" + escapeHTML(scene.endingType || \"The End\") + \"
\\n Play again\"\n : \"
\\n\" + choices + \"\\n
\";\n\n return \"
\\n\"\n + \"
\" + escapeHTML(scene.picture) + \"
\\n\"\n + \"
\" + escapeHTML(scene.title) + \"
\\n\"\n + \"
\" + escapeHTML(scene.text) + \"
\\n\"\n + ending + \"\\n\"\n + \"
\";\n}\n\nfunction buildAdventureHTML(title: string, scenes: Scene[]) {\n const body = \"\\n
\\n\"\n + \"
\" + escapeHTML(title) + \"
\\n\"\n + \"
Choose a path to move through the story.
\\n\"\n + scenes.map((scene) => sceneMarkup(scene, scenes)).join(\"\\n\\n\") + \"\\n\"\n + \"
\\n \";\n\n const css = `\n html { scroll-behavior: smooth; }\n section { display: none; min-height: 420px; }\n section:first-of-type { display: block; }\n section:target { display: block; }\n main:has(section:target) section:first-of-type:not(:target) { display: none; }\n .picture { font-size: 7rem; text-align: center; }\n .choices { display: grid; gap: 14px; padding: 0; list-style: none; }\n .choices a { display: block; padding: 16px; background: #ffe17a; border: 3px solid #17233c; text-decoration: none; }\n .ending { padding: 16px; background: #d7c0f4; border: 3px solid #17233c; font-size: 1.25rem; font-weight: bold; }\n `;\n\n return pageShell(title, body, css);\n}\n\nexport function AdventureLab({ onBack }: { onBack: () => void }) {\n const [title, setTitle] = useState(\"The Mystery of Moonlight Mountain\");\n const [scenes, setScenes] = useState(initialScenes);\n const [selectedKey, setSelectedKey] = useState(\"start\");\n const [mode, setMode] = useState(\"plan\");\n const [playKey, setPlayKey] = useState(\"start\");\n const [history, setHistory] = useState([]);\n const [discovered, setDiscovered] = useState([]);\n const [htmlView, setHtmlView] = useState<\"scene\" | \"whole\">(\"scene\");\n\n const selected = scenes.find((scene) => scene.key === selectedKey) || scenes[0];\n const playing = scenes.find((scene) => scene.key === playKey) || scenes[0];\n const generatedHTML = useMemo(() => buildAdventureHTML(title, scenes), [title, scenes]);\n\n const incoming = useMemo(() => {\n const counts: Record = {};\n scenes.forEach((scene) => { counts[scene.key] = 0; });\n scenes.forEach((scene) => scene.choices.forEach((choice) => {\n if (choice.destinationKey in counts) counts[choice.destinationKey] += 1;\n }));\n return counts;\n }, [scenes]);\n\n const reachable = useMemo(() => {\n const found = new Set();\n const queue = [\"start\"];\n while (queue.length) {\n const key = queue.shift()!;\n if (found.has(key)) continue;\n found.add(key);\n const scene = scenes.find((item) => item.key === key);\n scene?.choices.forEach((choice) => {\n if (choice.destinationKey) queue.push(choice.destinationKey);\n });\n }\n return found;\n }, [scenes]);\n\n const checks = useMemo(() => {\n const messages: string[] = [];\n const duplicateIds = scenes.filter((scene, index) => scenes.findIndex((item) => item.id === scene.id) !== index);\n if (!scenes.some((scene) => scene.ending)) messages.push(\"Your adventure needs at least one ending.\");\n if (duplicateIds.length) messages.push(\"Two scenes have the same HTML id. Give every scene a different id.\");\n scenes.forEach((scene) => {\n if (!reachable.has(scene.key)) messages.push(scene.title + \" cannot be reached from the beginning yet.\");\n if (!scene.ending && scene.choices.length === 0) messages.push(scene.title + \" needs a choice or must be marked as an ending.\");\n scene.choices.forEach((choice) => {\n if (!choice.text.trim()) messages.push(scene.title + \" has a choice with no clickable words.\");\n if (!choice.destinationKey) messages.push(scene.title + \" has a choice that does not lead anywhere.\");\n });\n });\n return messages;\n }, [scenes, reachable]);\n\n function updateScene(key: string, values: Partial) {\n setScenes((current) => current.map((scene) => scene.key === key ? { ...scene, ...values } : scene));\n }\n\n function addScene(title = \"New Scene\") {\n const scene: Scene = {\n key: crypto.randomUUID(),\n id: uniqueSceneId(title, scenes),\n title,\n text: \"What happens in this part of the story?\",\n picture: \"✨\",\n ending: false,\n endingType: \"\",\n choices: [],\n };\n setScenes((current) => [...current, scene]);\n setSelectedKey(scene.key);\n return scene;\n }\n\n function addChoice() {\n updateScene(selected.key, {\n choices: [...selected.choices, { id: crypto.randomUUID(), text: \"\", destinationKey: \"\" }],\n });\n }\n\n function updateChoice(choiceId: string, values: Partial) {\n updateScene(selected.key, {\n choices: selected.choices.map((choice) => choice.id === choiceId ? { ...choice, ...values } : choice),\n });\n }\n\n function createDestination(choiceId: string) {\n const scene = addScene(\"New Scene\");\n setScenes((current) => current.map((item) => item.key === selected.key\n ? { ...item, choices: item.choices.map((choice) => choice.id === choiceId ? { ...choice, destinationKey: scene.key } : choice) }\n : item));\n }\n\n function deleteScene() {\n if (selected.key === \"start\") return;\n setScenes((current) => current\n .filter((scene) => scene.key !== selected.key)\n .map((scene) => ({ ...scene, choices: scene.choices.map((choice) => choice.destinationKey === selected.key ? { ...choice, destinationKey: \"\" } : choice) })));\n setSelectedKey(\"start\");\n }\n\n function choose(destinationKey: string) {\n if (!destinationKey) return;\n setHistory((current) => [...current, playKey]);\n setPlayKey(destinationKey);\n const destination = scenes.find((scene) => scene.key === destinationKey);\n if (destination?.ending) setDiscovered((current) => current.includes(destinationKey) ? current : [...current, destinationKey]);\n }\n\n function restart() {\n setPlayKey(\"start\");\n setHistory([]);\n }\n\n function goBack() {\n const previous = history[history.length - 1];\n if (!previous) return;\n setPlayKey(previous);\n setHistory((current) => current.slice(0, -1));\n }\n\n function renderMapScene(scene: Scene) {\n return (\n
\n
\n \n {scene.ending\n ? ENDING\n : {scene.choices.length} choice{scene.choices.length === 1 ? \"\" : \"s\"}}\n
\n
← {incoming[scene.key] || 0} link{incoming[scene.key] === 1 ? \"\" : \"s\"} arrive here
\n {!scene.ending && scene.choices.length > 0 && (\n
\n {scene.choices.map((choice) => (\n
\n “{choice.text || \"Untitled choice\"}”\n {choice.destinationKey ? (\n setSelectedKey(choice.destinationKey)}\n className=\"bg-[#dff0ff] border-2 border-[#17233c] px-2 py-1 text-right font-black\"\n aria-label={(choice.text || \"Untitled choice\") + \" leads to \" + (scenes.find((item) => item.key === choice.destinationKey)?.title || \"missing scene\")}\n >\n → {scenes.find((item) => item.key === choice.destinationKey)?.title || \"Missing scene\"}\n \n ) : → nowhere yet}\n
\n ))}\n
\n )}\n
\n );\n }\n\n return (\n \n
\n \n \n \n
\n\n {mode === \"plan\" && (\n
\n
\n \n \n
\n
Story map
\n \n
\n
Each scene appears once. Its choice arrows show exactly where readers go next.
\n
\n {scenes.filter((scene) => reachable.has(scene.key)).map(renderMapScene)}\n
\n {scenes.filter((scene) => !reachable.has(scene.key)).length > 0 && (\n
\n
Unconnected scenes
\n {scenes.filter((scene) => !reachable.has(scene.key)).map((scene) => (\n \n ))}\n
\n )}\n \n\n
\n
Story check
\n {checks.length ?
{checks.map((message) =>
{message}
)}
:
✓ Every scene is connected and every path can reach an ending.
}\n
\n
\n\n \n
\n
\n
EDITING SCENE
\n
{selected.picture} {selected.title}
\n
Linked to from {incoming[selected.key] || 0} choice{incoming[selected.key] === 1 ? \"\" : \"s\"}
\n
\n {selected.key !== \"start\" && }\n
\n\n ', text: \"Gives this scene a destination name.\" },\n { code: '', text: \"Makes a choice lead to another scene.\" },\n ]} />\n\n updateScene(selected.key, { title: value })} />\n updateScene(selected.key, { id: slugify(value) })} />\n updateScene(selected.key, { picture: value })} />\n updateScene(selected.key, { text: value })} />\n\n \n updateScene(selected.key, { ending: event.target.checked, choices: event.target.checked ? [] : selected.choices })} className=\"w-6 h-6\" />\n This scene is an ending\n \n\n {selected.ending ? (\n Ending type\n \n \n ) : (\n
\n
\n
Choices
\n \n
\n {selected.choices.length === 0 &&
Add a choice so readers can continue, or mark this scene as an ending.
}\n
\n {selected.choices.map((choice, index) => (\n
\n
\n
Choice {index + 1}
\n \n
\n updateChoice(choice.id, { text: value })} placeholder=\"Enter the glowing cave\" />\n This choice leads to\n \n \n \n <a href=\"#{escapeHTML(scenes.find((scene) => scene.key === choice.destinationKey)?.id || \"scene-id\")}\">{choice.text || \"Choice words\"}</a>\n
\n ))}\n
\n
\n )}\n \n
\n )}\n\n {mode === \"play\" && (\n
\n
\n
● ● ● PLAYING YOUR ADVENTURE
\n
\n
{playing.picture}
\n
{playing.title}
\n
{playing.text}
\n {playing.ending ? (\n
\n
{endingIcon(playing.endingType)} {playing.endingType || \"The End\"}
\n \n
\n ) : (\n
\n {playing.choices.map((choice) => )}\n
\n )}\n
\n
\n
\n \n
Endings discovered: {discovered.length} of {scenes.filter((scene) => scene.ending).length}
\n \n
\n
\n )}\n\n {mode === \"html\" && (\n \n
\n
\n
See how the links make branches
\n
Compare each choice’s href with the destination scene’s id.
\n
\n
\n \n \n
\n
\n {htmlView === \"scene\" && (\n Scene to inspect\n \n \n )}\n
{htmlView === \"whole\" ? generatedHTML : sceneMarkup(selected, scenes)}
\n \n \n )}\n \n );\n}\n",[226,125,118],"c3b51474-22b5-4545-acbb-4da5b1ce3477",["D",1787251988821],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport JSZip from \"https://esm.sh/jszip@3.10.1\";\nimport DOMPurify from \"https://esm.sh/dompurify@3.3.0\";\nimport { escapeHTML, Field, LabShell } from \"../components/LabUI.tsx\";\n\ntype AdvancedPage = {\n id: string;\n title: string;\n file: string;\n content: string;\n};\n\nconst advancedCopyStyles =\n \".advanced-copy h1{font-size:2.5rem;font-weight:900;margin:0 0 1rem}.advanced-copy h2{font-size:1.75rem;font-weight:900;margin:1.5rem 0 .5rem}.advanced-copy p{margin:.75rem 0}.advanced-copy ul{list-style:disc;margin:1rem 0 1rem 2rem}.advanced-copy ol{list-style:decimal;margin:1rem 0 1rem 2rem}.advanced-copy a{color:#2878d0;text-decoration:underline;font-weight:800}.advanced-copy img{max-width:100%;border-radius:14px;margin:1rem 0}.advanced-copy blockquote{border-left:5px solid #f0c85a;padding-left:1rem;font-style:italic}\";\n\nconst sanitizerOptions = {\n ALLOWED_TAGS: [\"h1\", \"h2\", \"p\", \"strong\", \"b\", \"em\", \"i\", \"a\", \"img\", \"ul\", \"ol\", \"li\", \"blockquote\", \"br\"],\n ALLOWED_ATTR: [\"href\", \"src\", \"alt\", \"title\"],\n ALLOW_DATA_ATTR: false,\n ALLOW_ARIA_ATTR: false,\n};\n\nfunction sanitizeAdvancedHTML(value: string) {\n return DOMPurify.sanitize(value, sanitizerOptions);\n}\n\nfunction safeWebAddress(value: string) {\n try {\n const url = new URL(value.trim());\n return url.protocol === \"https:\" || url.protocol === \"http:\";\n } catch {\n return false;\n }\n}\n\nfunction makeAdvancedHTML(\n siteTitle: string,\n page: AdvancedPage,\n pages: AdvancedPage[],\n) {\n const navigation = pages\n .map((item) =>\n ' ' + escapeHTML(item.title) + \"\"\n )\n .join(\"\\n\");\n\n return \"\\n\" +\n '\\n' +\n \"\\n\" +\n ' \\n' +\n ' \\n' +\n \" \" + escapeHTML(page.title) + \" · \" + escapeHTML(siteTitle) +\n \"\\n\" +\n \" \\n\" +\n \"\\n\" +\n \"\\n\" +\n \"
\\n\" +\n \" \" + escapeHTML(siteTitle) + \"\\n\" +\n \"
\\n\" +\n navigation + \"\\n\" +\n \"
\\n\" +\n \"
\\n\" +\n \"
\\n\" +\n sanitizeAdvancedHTML(page.content).split(\"\\n\").map((line) => \" \" + line).join(\"\\n\") + \"\\n\" +\n \"
\\n\" +\n \"\\n\" +\n \"\\n\";\n}\n\nexport function AdvancedWebsiteLab({ onBack }: { onBack: () => void }) {\n const [siteTitle, setSiteTitle] = useState(\"My Amazing Website\");\n const [pages, setPages] = useState([\n {\n id: \"home\",\n title: \"Home\",\n file: \"index.html\",\n content: \"
Welcome to my website!
Start writing here.
\",\n },\n {\n id: \"about\",\n title: \"About\",\n file: \"about.html\",\n content:\n \"
About this website
Tell your visitors what this website is about.
\",\n },\n ]);\n const [activeId, setActiveId] = useState(\"home\");\n const [mode, setMode] = useState<\"write\" | \"html\" | \"preview\">(\"write\");\n const activePage = pages.find((page) => page.id === activeId) || pages[0];\n const editorRef = useRef(null);\n const selectionRef = useRef(null);\n\n function updatePage(values: Partial) {\n setPages((current) =>\n current.map((page) =>\n page.id === activePage.id ? { ...page, ...values } : page\n )\n );\n }\n\n function rememberSelection() {\n const editor = editorRef.current;\n const selection = window.getSelection();\n if (!editor || !selection || selection.rangeCount === 0) return;\n const range = selection.getRangeAt(0);\n if (editor.contains(range.commonAncestorContainer)) {\n selectionRef.current = range.cloneRange();\n }\n }\n\n function restoreSelection() {\n const selection = window.getSelection();\n const range = selectionRef.current;\n if (!selection || !range) return;\n selection.removeAllRanges();\n selection.addRange(range);\n }\n\n function commitEditor() {\n const editor = editorRef.current;\n if (!editor) return;\n const content = sanitizeAdvancedHTML(editor.innerHTML);\n setPages((current) =>\n current.map((page) =>\n page.id === activePage.id ? { ...page, content } : page\n )\n );\n }\n\n function switchMode(nextMode: \"write\" | \"html\" | \"preview\") {\n if (mode === \"write\") commitEditor();\n setMode(nextMode);\n }\n\n function switchPage(pageId: string) {\n if (mode === \"write\") commitEditor();\n setActiveId(pageId);\n }\n\n function format(command: string, value?: string) {\n const editor = editorRef.current;\n if (!editor) return;\n editor.focus();\n restoreSelection();\n document.execCommand(command, false, value);\n rememberSelection();\n }\n\n function insertLink() {\n const address = prompt(\"Paste an http:// or https:// web address:\");\n if (!address) return;\n if (!safeWebAddress(address)) {\n alert(\"Please use a complete http:// or https:// address.\");\n return;\n }\n format(\"createLink\", address.trim());\n }\n\n function insertImage() {\n const address = prompt(\"Paste an http:// or https:// picture address:\");\n if (!address) return;\n if (!safeWebAddress(address)) {\n alert(\"Please use a complete http:// or https:// picture address.\");\n return;\n }\n format(\"insertImage\", address.trim());\n }\n\n function pasteSanitizedHTML(event: any) {\n event.preventDefault();\n const clipboard = event.clipboardData;\n const pastedHTML = clipboard?.getData(\"text/html\");\n const pastedText = clipboard?.getData(\"text/plain\") || \"\";\n const safeContent = pastedHTML\n ? sanitizeAdvancedHTML(pastedHTML)\n : escapeHTML(pastedText).replaceAll(\"\\n\", \"
\");\n document.execCommand(\"insertHTML\", false, safeContent);\n rememberSelection();\n }\n\n function addPage() {\n if (mode === \"write\") commitEditor();\n let number = 2;\n while (pages.some((page) => page.file === \"page-\" + number + \".html\")) {\n number += 1;\n }\n const page = {\n id: crypto.randomUUID(),\n title: \"Page \" + number,\n file: \"page-\" + number + \".html\",\n content: \"
Page \" + number +\n \"
Write something wonderful here.
\",\n };\n setPages((current) => [...current, page]);\n setActiveId(page.id);\n setMode(\"write\");\n }\n\n function deletePage() {\n if (activePage.file === \"index.html\") return;\n const remaining = pages.filter((page) => page.id !== activePage.id);\n setPages(remaining);\n setActiveId(\"home\");\n }\n\n async function downloadSite() {\n const zip = new JSZip();\n pages.forEach((page) =>\n zip.file(page.file, makeAdvancedHTML(siteTitle, page, pages))\n );\n zip.file(\n \"README.txt\",\n \"Open index.html in a browser to see your website. Keep all HTML files together so the page links work.\",\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 = \"my-whole-website.zip\";\n link.click();\n URL.revokeObjectURL(url);\n }\n\n return (\n \n \n
\n
\n \n
\n
Your pages
\n \n + Add\n \n
\n
\n {pages.map((page) => (\n switchPage(page.id)}\n className={\"w-full border-3 border-[#17233c] p-3 text-left font-black \" +\n (page.id === activePage.id\n ? \"bg-[#ffe17a] shadow-[3px_3px_0_#17233c]\"\n : \"bg-white\")}\n >\n {page.title}\n {page.file}\n \n ))}\n
\n \n Download the whole website (.zip)\n \n
\n\n
\n
\n
\n switchMode(\"write\")}\n className={\"px-4 py-2 border-2 border-white font-black \" +\n (mode === \"write\" ? \"bg-[#ffe17a] text-[#17233c]\" : \"\")}\n >\n ✏️ Write\n \n switchMode(\"html\")}\n className={\"px-4 py-2 border-2 border-white font-black \" +\n (mode === \"html\" ? \"bg-[#ffe17a] text-[#17233c]\" : \"\")}\n >\n </> HTML\n \n switchMode(\"preview\")}\n className={\"px-4 py-2 border-2 border-white font-black \" +\n (mode === \"preview\" ? \"bg-[#ffe17a] text-[#17233c]\" : \"\")}\n >\n 👀 Preview\n \n
\n {activePage.file}\n
\n\n
\n
\n
\n updatePage({ title })}\n />\n
\n {activePage.file !== \"index.html\" && (\n \n Delete page\n \n )}\n
\n\n {mode === \"write\" ? (\n <>\n
\n \n \n \n \n \n \n \n \n {\n const page = pages.find((item) => item.id === event.target.value);\n if (page) format(\"insertHTML\", '' + escapeHTML(page.title) + \"\");\n event.currentTarget.value = \"\";\n }}\n className=\"bg-white border-2 border-[#17233c] px-3 py-2 font-black\"\n aria-label=\"Insert a link to another page\"\n >\n \n {pages.filter((page) => page.id !== activePage.id).map((page) => )}\n \n
\n {\n const next = event.relatedTarget;\n if (next instanceof Element && next.closest(\"[data-editor-toolbar]\")) return;\n commitEditor();\n }}\n dangerouslySetInnerHTML={{ __html: sanitizeAdvancedHTML(activePage.content) }}\n className=\"advanced-copy min-h-[520px] bg-white border-3 border-[#17233c] p-6 focus:outline-none focus:ring-4 focus:ring-[#2878d0]\"\n />\n
Select some words, then use the toolbar. Changes also appear in HTML mode. Pasted HTML is cleaned before it enters the editor.
\n \n ) : mode === \"html\" ? (\n
\n
\n
\n Edit this page’s HTML\n
\n
\n This is the HTML inside the page’s{\" \"}\n <main>{\" \"}\n area. The website name and navigation are added\n automatically.\n
\n
\n {[\n \"
\",\n \"
\",\n \"
\",\n \"\",\n \"\",\n \"\",\n \"\",\n \"
\",\n \"
\",\n ].map((tag) => (\n \n {tag}\n \n ))}\n
\n
\n \n updatePage({ content: event.target.value })}\n spellCheck={false}\n aria-label=\"Page HTML\"\n className=\"w-full min-h-[560px] resize-y bg-[#263d2d] text-[#fffdf3] border-[10px] border-[#9b6537] p-5 font-mono text-base leading-relaxed focus:outline-none focus:ring-4 focus:ring-[#2878d0]\"\n />\n
\n Changes here appear when you switch to Preview. Scripts, event handlers, embeds, styles, and unsafe addresses are removed before rendering or download.\n
\n
\n )\n : (\n
\n
{siteTitle}
\n
\n {pages.map((page) => (\n switchPage(page.id)}\n className={\"underline font-black \" +\n (page.id === activePage.id ? \"text-[#ef5138]\" : \"\")}\n >\n {page.title}\n \n ))}\n
\n {\n const link = (event.target as Element).closest?.(\"a\");\n const targetPage = link\n ? pages.find((page) =>\n page.file === link.getAttribute(\"href\")\n )\n : undefined;\n if (targetPage) {\n event.preventDefault();\n setActiveId(targetPage.id);\n }\n }}\n dangerouslySetInnerHTML={{ __html: sanitizeAdvancedHTML(activePage.content) }}\n />\n
\n )}\n
\n
\n
\n \n );\n}",[226,125,123],"pulls","branches",2,"forks","envVars",{"_119":26,"_271":26},"connections",{"_119":26,"_270":26},"unfilledCount","emptyCount",{"_33":386,"_13":226,"_80":219,"_43":-5,"_35":36,"_220":40,"_221":24,"_37":387,"_39":26,"_83":126,"_223":-5,"_85":30,"_224":-5,"_297":388,"_17":389},{"_33":382,"_13":367,"_80":362,"_43":219,"_35":36,"_220":40,"_221":24,"_37":383,"_39":26,"_83":126,"_223":-5,"_85":30,"_224":-5,"_297":384,"_17":385},{"_33":375,"_13":376,"_80":377,"_43":362,"_35":36,"_220":166,"_221":24,"_37":378,"_39":120,"_83":84,"_223":379,"_85":30,"_224":-5,"_297":380,"_17":381},{"_33":368,"_13":369,"_80":370,"_43":362,"_35":36,"_220":40,"_221":24,"_37":371,"_39":26,"_83":84,"_223":372,"_85":30,"_224":-5,"_297":373,"_17":374},{"_33":359,"_13":360,"_80":361,"_43":362,"_35":36,"_220":40,"_221":24,"_37":363,"_39":26,"_83":84,"_223":364,"_85":30,"_224":-5,"_297":365,"_17":366},{"_33":218,"_13":125,"_80":124,"_43":219,"_35":36,"_220":40,"_221":24,"_37":356,"_39":26,"_83":126,"_223":-5,"_85":30,"_224":-5,"_297":357,"_17":358},{"_33":258,"_13":123,"_80":122,"_43":124,"_35":36,"_220":40,"_221":24,"_37":353,"_39":26,"_83":84,"_223":260,"_85":30,"_224":-5,"_297":354,"_17":355},{"_33":254,"_13":118,"_80":117,"_43":124,"_35":36,"_220":40,"_221":24,"_37":350,"_39":26,"_83":84,"_223":256,"_85":30,"_224":-5,"_297":351,"_17":352},{"_33":250,"_13":112,"_80":111,"_43":124,"_35":36,"_220":40,"_221":24,"_37":347,"_39":26,"_83":84,"_223":252,"_85":30,"_224":-5,"_297":348,"_17":349},{"_33":246,"_13":106,"_80":105,"_43":124,"_35":36,"_220":40,"_221":24,"_37":344,"_39":26,"_83":84,"_223":248,"_85":30,"_224":-5,"_297":345,"_17":346},{"_33":242,"_13":100,"_80":99,"_43":124,"_35":36,"_220":40,"_221":24,"_37":341,"_39":26,"_83":84,"_223":244,"_85":30,"_224":-5,"_297":342,"_17":343},{"_33":238,"_13":94,"_80":93,"_43":124,"_35":36,"_220":40,"_221":24,"_37":338,"_39":26,"_83":84,"_223":240,"_85":30,"_224":-5,"_297":339,"_17":340},{"_33":234,"_13":82,"_80":81,"_43":124,"_35":36,"_220":40,"_221":24,"_37":335,"_39":26,"_83":84,"_223":236,"_85":30,"_224":-5,"_297":336,"_17":337},{"_33":328,"_13":329,"_80":330,"_43":219,"_35":36,"_220":40,"_221":24,"_37":331,"_39":26,"_83":21,"_223":332,"_85":30,"_224":-5,"_297":333,"_17":334},{"_33":321,"_13":322,"_80":323,"_43":219,"_35":36,"_220":40,"_221":24,"_37":324,"_39":26,"_83":84,"_223":325,"_85":30,"_224":-5,"_297":326,"_17":327},{"_33":314,"_13":315,"_80":316,"_43":219,"_35":36,"_220":40,"_221":24,"_37":317,"_39":26,"_83":84,"_223":318,"_85":30,"_224":-5,"_297":319,"_17":320},{"_33":307,"_13":308,"_80":309,"_43":219,"_35":36,"_220":264,"_221":24,"_37":310,"_39":26,"_83":84,"_223":311,"_85":30,"_224":-5,"_297":312,"_17":313},{"_33":300,"_13":301,"_80":302,"_43":-5,"_35":36,"_220":40,"_221":24,"_37":303,"_39":26,"_83":21,"_223":304,"_85":30,"_224":-5,"_297":305,"_17":306},{"_33":291,"_13":292,"_80":293,"_43":-5,"_35":36,"_220":40,"_221":24,"_37":294,"_39":26,"_83":295,"_223":296,"_85":30,"_224":-5,"_297":298,"_17":299},"9f2fa539-7f6a-435b-bd55-d127909c7501","index.ts","01a02085-194d-7488-9979-f6554acbcbf8",["D",1787251988821],"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// Give YouTube embeds a normal web origin, including when a downloaded\n// project is opened directly from Files or a local folder.\napp.get(\"/youtube/:id\", (c) => {\n const id = c.req.param(\"id\");\n if (!/^[a-zA-Z0-9_-]{6,}$/.test(id)) return c.text(\"Invalid YouTube video\", 400);\n\n return c.html(`\n\n\n \n \n YouTube video\n \n\n\n \n\n`);\n});\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","children",[],[292],"6f44bf34-de1c-4640-b669-5a40cde4ba63","README.md","01a02085-194d-7488-9979-f1bb42346d50",["D",1787251988821],"# 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- Build a Whole Website\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\n## Architecture decision records\n\n### ADR-001: Sanitize student-authored HTML before rendering\n\n- **Status:** Accepted\n- **Date:** 2026-08-01\n\n#### Context\n\nThe advanced website activity stores each page body as an HTML string. React does not interpret a string as elements by default, so the visual editor and preview use `dangerouslySetInnerHTML` to turn that string into rendered HTML.\n\nThat API is necessary for the current visual editing experience, but unsanitized HTML is an injection sink. A script element inserted through `innerHTML` normally does not execute, but event attributes such as `onerror`, dangerous URL schemes such as `javascript:`, and other active markup can still execute in the application document.\n\nAlthough projects currently remain in the student's browser, students may paste examples from the web and future versions may support importing or sharing projects. User-authored HTML must therefore be treated as untrusted.\n\n#### Decision\n\nAll advanced-page HTML is sanitized with DOMPurify before it:\n\n1. Enters the WYSIWYG editor.\n2. Enters the visual preview.\n3. Is included in a downloaded website.\n4. Is accepted as rich HTML from the clipboard.\n\nThe sanitizer uses an allowlist intended for the lesson:\n\n- Elements: headings, paragraphs, emphasis, links, images, lists, blockquotes, and line breaks.\n- Attributes: `href`, `src`, `alt`, and `title`.\n\nScripts, event-handler attributes, embeds, styles, data attributes, ARIA attributes, and unsupported elements are removed. Toolbar-created web links and image URLs must use `http://` or `https://`. Internal page links continue to use controlled relative filenames.\n\nRaw text may still be written in HTML mode so students can see and correct their source, but only sanitized output is rendered or downloaded.\n\n#### Consequences\n\n- Student-authored HTML cannot execute JavaScript in the main First Page application through the supported editor flow.\n- Pasting formatted text continues to work, but unsupported formatting is removed.\n- Advanced users cannot add scripts, iframes, custom CSS, forms, or arbitrary attributes in this activity.\n- Adding a new supported HTML feature requires deliberately expanding the sanitizer allowlist.\n- Sanitization is the primary control. A sandboxed preview iframe and a strict Content Security Policy remain recommended defense-in-depth improvements.\n\n",[],[301],"d324095d-8946-4dc1-8c06-4ca3b9d59344","storage.ts","8820711a-9cc8-11f1-a3e8-1607ee4eb77e",["D",1787252051629],"export type SavedFirstWebsite = {\n id: string;\n name: string;\n updatedAt: number;\n step: number;\n project: Record;\n};\n\nconst DB_NAME = \"firstpage\";\nconst DB_VERSION = 1;\nconst STORE = \"projects\";\n\nfunction openDatabase(): Promise {\n return new Promise((resolve, reject) => {\n const request = indexedDB.open(DB_NAME, DB_VERSION);\n request.onupgradeneeded = () => {\n const db = request.result;\n if (!db.objectStoreNames.contains(STORE)) {\n const store = db.createObjectStore(STORE, { keyPath: \"id\" });\n store.createIndex(\"updatedAt\", \"updatedAt\");\n }\n };\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n}\n\nfunction requestResult(request: IDBRequest): Promise {\n return new Promise((resolve, reject) => {\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n}\n\nexport async function listFirstWebsites(): Promise {\n const db = await openDatabase();\n try {\n const projects = await requestResult(db.transaction(STORE, \"readonly\").objectStore(STORE).getAll()) as SavedFirstWebsite[];\n return projects.sort((a, b) => b.updatedAt - a.updatedAt);\n } finally {\n db.close();\n }\n}\n\nexport async function getFirstWebsite(id: string): Promise {\n const db = await openDatabase();\n try {\n return await requestResult(db.transaction(STORE, \"readonly\").objectStore(STORE).get(id));\n } finally {\n db.close();\n }\n}\n\nexport async function saveFirstWebsite(project: SavedFirstWebsite): Promise {\n const db = await openDatabase();\n try {\n await requestResult(db.transaction(STORE, \"readwrite\").objectStore(STORE).put(project));\n } finally {\n db.close();\n }\n}\n\nexport async function deleteFirstWebsite(id: string): Promise {\n const db = await openDatabase();\n try {\n await requestResult(db.transaction(STORE, \"readwrite\").objectStore(STORE).delete(id));\n } finally {\n db.close();\n }\n}\n",[],[226,308],"4607e4f3-12be-431b-bdc1-92c1d28e7131","root.tsx","01a02085-194d-7488-9979-ebd77b1c7034",["D",1787251988821],"/** @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(\"\")}\n \n \n \n \n \n HTML Writing Lab\n \n \n \n \n `);\n\n return (\n
\n
● ● ● LIVE WEBPAGE
\n \n </div>\n );\n}\n\nexport function 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\nexport function 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\nexport function 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\n",[],[226,367,369],"051cff7a-1958-43d1-9f06-df2a95224bc6","App.tsx","01a02085-194d-7488-9979-b3881fa44e47",["D",1787252171651],"/** @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\";\nimport { deleteFirstWebsite, listFirstWebsites, saveFirstWebsite, type SavedFirstWebsite } from \"../storage.ts\";\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 HTMLUnderneath({\n html,\n file,\n focusTags = [],\n explanation,\n compact = false,\n}: {\n html: string;\n file: string;\n focusTags?: string[];\n explanation: string;\n compact?: boolean;\n}) {\n const lines = html.trimEnd().split(\"\\n\");\n const isFocused = (line: string) =>\n focusTags.some((tag) =>\n line.includes(`<${tag}`) || line.includes(`</${tag}>`)\n );\n\n return (\n <section\n className=\"mt-6 w-full max-w-full min-w-0 bg-[#e5f4ff] border-4 border-[#17233c] p-4 shadow-[5px_5px_0_#2878d0]\"\n aria-labelledby={`html-underneath-${file.replace(/[^a-z0-9]/gi, \"-\")}`}\n >\n <p className=\"text-xs font-black tracking-widest text-[#174d84]\">HTML UNDERNEATH</p>\n <h2\n id={`html-underneath-${file.replace(/[^a-z0-9]/gi, \"-\")}`}\n className=\"text-2xl font-black\"\n >\n This code constructs <code>{file}</code>\n </h2>\n <p className=\"font-bold my-2\">{explanation}</p>\n {focusTags.length > 0 && (\n <p className=\"text-sm font-bold mb-3\">\n The highlighted lines contain the{\" \"}\n {focusTags.map((tag, index) => (\n <span key={tag}>\n {index > 0 && (index === focusTags.length - 1 ? \" and \" : \", \")}\n <code className=\"bg-white px-1 border border-[#17233c]\"><{tag}></code>\n </span>\n ))}{\" \"}\n elements used in this step.\n </p>\n )}\n <pre\n tabIndex={0}\n aria-label={`Current HTML source for ${file}`}\n className={`w-full max-w-full bg-[#263d2d] text-white border-[8px] border-[#9b6537] p-4 overflow-auto text-sm leading-relaxed ${compact ? \"max-h-[420px]\" : \"max-h-[560px]\"}`}\n >\n <code>\n {lines.map((line, index) => (\n <span\n key={index}\n className={`block min-w-max px-1 ${isFocused(line) ? \"bg-[#ffe17a] text-[#17233c] font-bold\" : \"\"}`}\n >\n {line || \" \"}\n {\"\\n\"}\n </span>\n ))}\n </code>\n </pre>\n </section>\n );\n}\n\nfunction PageConstructionModel() {\n return (\n <section className=\"my-6 bg-[#e5f4ff] border-4 border-[#17233c] p-5 shadow-[6px_6px_0_#2878d0]\" aria-labelledby=\"page-construction-title\">\n <p className=\"text-xs font-black tracking-widest text-[#174d84]\">HOW A WEBPAGE IS MADE</p>\n <h2 id=\"page-construction-title\" className=\"text-2xl font-black mb-2\">HTML elements are the building pieces</h2>\n <p className=\"font-bold mb-4\">\n A webpage starts as an HTML document. The document contains elements that tell the browser what each piece is. The browser reads those elements and constructs the webpage you see.\n </p>\n <ol className=\"grid md:grid-cols-3 gap-3\" aria-label=\"How HTML becomes a webpage\">\n <li className=\"bg-[#263d2d] text-white border-3 border-[#17233c] p-4\">\n <p className=\"font-black text-[#ffe17a]\">1. HTML document</p>\n <code className=\"block mt-2\"><h1>Red Pandas</h1><br /><p>They are excellent climbers.</p></code>\n </li>\n <li className=\"bg-[#ffe17a] border-3 border-[#17233c] p-4\">\n <p className=\"font-black\">2. The browser reads it</p>\n <p className=\"mt-2 font-bold\">It recognizes a heading element followed by a paragraph element.</p>\n </li>\n <li className=\"bg-white border-3 border-[#17233c] p-4\">\n <p className=\"font-black text-sm text-[#2878d0]\">3. The webpage</p>\n <p className=\"text-2xl font-black mt-2\">Red Pandas</p>\n <p>They are excellent climbers.</p>\n </li>\n </ol>\n <p className=\"mt-4 font-black\">\n The tags are not shown on the finished page, but they are still underneath it doing the work.\n </p>\n </section>\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 <button onClick={() => onNavigate?.(\"home\")} className=\"mt-10 underline font-bold\" style={{ color: accent }}>← Back to home</button>\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\nfunction ProjectLibrary({\n projects,\n onCreate,\n onOpen,\n onDelete,\n}: {\n projects: SavedFirstWebsite[];\n onCreate: () => void;\n onOpen: (project: SavedFirstWebsite) => void;\n onDelete: (project: SavedFirstWebsite) => void;\n}) {\n return (\n <div className=\"min-h-screen bg-[#b97842] text-[#17233c] border-[14px] border-[#6e4325] p-5 md:p-10\" style={{ backgroundImage: \"radial-gradient(#8f562d 1.5px, transparent 1.5px)\", backgroundSize: \"12px 12px\" }}>\n <main className=\"max-w-5xl mx-auto\">\n <section className=\"bg-[#fffdf3] border-4 border-[#17233c] p-6 md:p-8 shadow-[10px_10px_0_#ef5138]\">\n <p className=\"text-[#2878d0] font-black tracking-widest\">YOUR SAVED WORK</p>\n <div className=\"flex flex-wrap gap-4 items-center justify-between\">\n <div>\n <h1 className=\"text-4xl md:text-5xl font-black\">My websites</h1>\n <p className=\"font-bold mt-2\">Your projects stay saved in this browser on this device.</p>\n </div>\n <button onClick={onCreate} className=\"bg-[#218c5b] text-white border-4 border-[#17233c] px-5 py-4 font-black text-lg shadow-[5px_5px_0_#17233c]\">\n + New website\n </button>\n </div>\n </section>\n {projects.length === 0 ? (\n <section className=\"mt-7 bg-[#ffe17a] border-4 border-[#17233c] p-7 shadow-[7px_7px_0_#2878d0]\">\n <h2 className=\"text-2xl font-black\">No saved websites yet</h2>\n <p className=\"font-bold mt-2\">Make your first one. It will save automatically while you work.</p>\n </section>\n ) : (\n <div className=\"grid md:grid-cols-2 gap-6 mt-7\">\n {projects.map((saved) => (\n <article key={saved.id} className=\"bg-[#fffdf3] border-4 border-[#17233c] p-5 shadow-[6px_6px_0_#f0c85a]\">\n <button onClick={() => onOpen(saved)} className=\"w-full text-left\">\n <h2 className=\"text-2xl font-black\">{saved.name || \"Untitled website\"}</h2>\n <p className=\"font-bold text-sm mt-2\">Last saved {new Date(saved.updatedAt).toLocaleString()}</p>\n <p className=\"mt-3 underline font-black text-[#2878d0]\">Keep working →</p>\n </button>\n <button onClick={() => onDelete(saved)} className=\"mt-4 text-sm underline font-bold text-[#8f2618]\">Delete this website</button>\n </article>\n ))}\n </div>\n )}\n </main>\n </div>\n );\n}\n\nexport function FirstWebsiteApp() {\n const [step, setStep] = useState(0);\n const [page, setPage] = useState<\"home\" | \"second\">(\"home\");\n const [finishView, setFinishView] = useState<\"webpage\" | \"html\">(\"webpage\");\n const [project, setProject] = useState<Project>(initial);\n const [projectId, setProjectId] = useState<string | null>(null);\n const [projects, setProjects] = useState<SavedFirstWebsite[]>([]);\n const [libraryReady, setLibraryReady] = useState(false);\n const [saveStatus, setSaveStatus] = useState<\"saving\" | \"saved\" | \"error\">(\"saved\");\n const update = (values: Partial<Project>) => setProject((old) => ({ ...old, ...values }));\n\n async function refreshProjects() {\n setProjects(await listFirstWebsites());\n }\n\n useEffect(() => {\n (async () => {\n let saved = await listFirstWebsites();\n const legacy = localStorage.getItem(\"firstpage-project\");\n if (legacy && saved.length === 0) {\n try {\n const legacyProject = JSON.parse(legacy) as Project;\n const recovered: SavedFirstWebsite = {\n id: crypto.randomUUID(),\n name: legacyProject.title || legacyProject.subject || \"Recovered website\",\n updatedAt: Date.now(),\n step: 0,\n project: legacyProject,\n };\n await saveFirstWebsite(recovered);\n localStorage.removeItem(\"firstpage-project\");\n saved = [recovered];\n } catch {\n // Ignore invalid legacy data and leave it untouched.\n }\n }\n setProjects(saved);\n setLibraryReady(true);\n })().catch(() => {\n setLibraryReady(true);\n setSaveStatus(\"error\");\n });\n }, []);\n\n useEffect(() => {\n if (!projectId) return;\n setSaveStatus(\"saving\");\n const timer = window.setTimeout(async () => {\n try {\n await saveFirstWebsite({\n id: projectId,\n name: project.title || project.subject || \"Untitled website\",\n updatedAt: Date.now(),\n step,\n project,\n });\n setSaveStatus(\"saved\");\n } catch {\n setSaveStatus(\"error\");\n }\n }, 500);\n return () => window.clearTimeout(timer);\n }, [projectId, project, step]);\n\n useEffect(() => {\n setPage(step === 2 ? \"second\" : \"home\");\n window.scrollTo({ top: 0, left: 0, behavior: \"auto\" });\n }, [step]);\n\n function createProject() {\n setProject({ ...initial, facts: [...initial.facts] });\n setStep(0);\n setProjectId(crypto.randomUUID());\n setSaveStatus(\"saving\");\n }\n\n function openProject(saved: SavedFirstWebsite) {\n setProject(saved.project as Project);\n setStep(saved.step || 0);\n setProjectId(saved.id);\n setSaveStatus(\"saved\");\n }\n\n async function removeProject(saved: SavedFirstWebsite) {\n if (!confirm(`Delete “${saved.name}” from this browser?`)) return;\n await deleteFirstWebsite(saved.id);\n await refreshProjects();\n }\n\n async function showProjects() {\n if (projectId) {\n await saveFirstWebsite({\n id: projectId,\n name: project.title || project.subject || \"Untitled website\",\n updatedAt: Date.now(),\n step,\n project,\n });\n }\n await refreshProjects();\n setProjectId(null);\n }\n\n const chosen = useMemo(() => topics.find((t) => t.name === project.topic), [project.topic]);\n const secondFile = `${fileName(project.secondPage)}.html`;\n\n if (!libraryReady) {\n return <div className=\"min-h-screen grid place-items-center bg-[#b97842] font-black text-2xl\">Opening your saved websites…</div>;\n }\n if (!projectId) {\n return <ProjectLibrary projects={projects} onCreate={createProject} onOpen={openProject} onDelete={removeProject} />;\n }\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 a new website? Your current website will stay saved.\")) {\n createProject();\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 <div className=\"max-w-7xl mx-auto px-4 pb-4 flex flex-wrap justify-end items-center gap-3\">\n <button onClick={showProjects} className=\"bg-[#fffdf3] border-3 border-[#17233c] px-4 py-2 font-black shadow-[3px_3px_0_#2878d0]\">\n My websites\n </button>\n <span role=\"status\" aria-live=\"polite\" className={`border-3 border-[#17233c] px-4 py-2 font-black ${saveStatus === \"error\" ? \"bg-[#ffb8c2]\" : saveStatus === \"saving\" ? \"bg-[#ffe17a]\" : \"bg-[#b9e6bd]\"}`}>\n {saveStatus === \"saving\" ? \"● Saving…\" : saveStatus === \"error\" ? \"⚠ Couldn’t save\" : \"✓ Saved\"}\n </span>\n </div>\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 <PageConstructionModel />\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 <HTMLUnderneath\n html={makeHTML(\"home\")}\n file=\"index.html\"\n focusTags={[\"h1\", \"h2\", \"p\", \"ol\", \"li\"]}\n explanation=\"Every field above adds content to an HTML element in the document. The browser reads these elements together and constructs the heading, paragraphs, sections, and list in the preview.\"\n compact\n />\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 <HTMLUnderneath\n html={makeHTML(\"second\")}\n file={secondFile}\n focusTags={[\"html\", \"head\", \"title\", \"body\", \"h1\", \"p\"]}\n explanation=\"This is a second complete HTML document. A website can be made from several HTML files, and the browser constructs a separate webpage from each file.\"\n compact\n />\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 <HTMLUnderneath\n html={makeHTML(\"home\")}\n file=\"index.html\"\n focusTags={[\"nav\", \"a\"]}\n explanation=\"The navigation is made from link elements inside a navigation element. Each href names another HTML file, so the browser knows which document to open next.\"\n compact\n />\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 <HTMLUnderneath\n html={makeHTML(\"home\")}\n file=\"index.html\"\n focusTags={[\"style\", \"img\", \"div\"]}\n explanation=\"The content is still constructed from HTML elements. An uploaded picture uses an image element; an emoji picture uses a labeled div element. The style element contains CSS that tells the browser how those elements should look.\"\n compact\n />\n <ButtonRow back={() => setStep(3)} next={() => { setFinishView(\"webpage\"); 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-[minmax(0,0.8fr)_minmax(0,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 className=\"min-w-0 max-w-full\">\n <section className=\"max-w-full bg-[#fffdf3] border-4 border-[#17233c] p-4 mb-4 shadow-[5px_5px_0_#2878d0]\" aria-labelledby=\"finished-site-view\">\n <h2 id=\"finished-site-view\" className=\"text-2xl font-black\">See the webpage and the HTML underneath</h2>\n <p className=\"font-bold mt-1\">\n The browser did not receive a picture of this page. It read your HTML document and constructed everything in the webpage view.\n </p>\n <div className=\"flex flex-wrap gap-2 mt-4\" role=\"group\" aria-label=\"Choose webpage or HTML view\">\n <button\n onClick={() => setFinishView(\"webpage\")}\n aria-pressed={finishView === \"webpage\"}\n className={`px-4 py-2 rounded-xl border-2 font-black ${finishView === \"webpage\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}\n >\n 👀 Webpage\n </button>\n <button\n onClick={() => setFinishView(\"html\")}\n aria-pressed={finishView === \"html\"}\n className={`px-4 py-2 rounded-xl border-2 font-black ${finishView === \"html\" ? \"bg-[#17233c] text-white\" : \"bg-white\"}`}\n >\n </> HTML underneath\n </button>\n </div>\n </section>\n <div className=\"flex gap-2 mb-3\" role=\"group\" aria-label=\"Choose a page\">\n <button onClick={() => setPage(\"home\")} aria-pressed={page === \"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\")} aria-pressed={page === \"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 {finishView === \"webpage\" ? (\n <Preview project={project} page={page} onNavigate={setPage} />\n ) : (\n <HTMLUnderneath\n html={makeHTML(page)}\n file={page === \"home\" ? \"index.html\" : secondFile}\n explanation=\"This is the complete HTML document used for this page. Every visible heading, paragraph, list, image, and link comes from an element in this source.\"\n />\n )}\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",[],[226,367,376],"cc643eb0-1c02-4eae-9fe2-a07e02f40b7a",["D",1787251988821],[274,275,276],[226,367],"b7df42da-c0fb-4e16-8edf-f1416d6a7509",["D",1787251988821],[273,277,285,286,287,288],[226],["D",1785431448217],["D",1789563036726],{"_11":12,"_180":88},{"_11":12,"_176":-5,"_87":88,"_31":86,"_177":178,"_179":30},{"_39":166,"_13":16,"_33":36,"_167":128,"_168":76,"_169":170,"_171":132,"_172":128,"_173":42,"_174":14,"_175":12},"ctx",{"_54":-5,"_201":428,"_429":430,"_431":432,"_433":30,"_434":30,"_435":30,"_436":24,"_437":-5,"_438":-7,"_439":-7,"_440":26,"_441":30,"_442":30,"_443":-5,"_444":30,"_445":30,"_446":30,"_447":-5},"ENV",{"_399":400,"_401":402,"_403":77,"_404":405,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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>

My Big Title

A New Section

Section title

Facts

Home

Facts

{snippet.name}

${escapeHTML(title)}

Write a poem the reader can experience

HTML Writing Lab

{card.title}

${escapeHTML(title)}

The discovery

The ending

1. Write three connected scenes

2. Tell it with more than words

\" + escapeHTML(scene.title) + \"

\" + escapeHTML(title) + \"

{selected.picture} {selected.title}

Choices

Choice {index + 1}

{playing.title}

See how the links make branches

Welcome to my website!

About this website

Page \" + number +\n \"

\n Edit this page’s HTML\n

\",\n \"

\",\n \"
\",\n \"\",\n \"\",\n \"\",\n \"\",\n \"
\",\n \"
\",\n ].map((tag) => (\n \n {tag}\n \n ))}\n

My Big Title

A New Section

Section title

Facts

Home

Facts

{snippet.name}

${escapeHTML(title)}

Write a poem the reader can experience

HTML Writing Lab

{card.title}

${escapeHTML(title)}

The discovery

The ending

1. Write three connected scenes

2. Tell it with more than words

\" + escapeHTML(scene.title) + \"

\" + escapeHTML(title) + \"

{selected.picture} {selected.title}

Choices

Choice {index + 1}

{playing.title}

See how the links make branches

Welcome to my website!

About this website

Page \" + number +\n \"

\n Edit this page’s HTML\n

\",\n \"

\",\n \"\",\n \"\",\n \"\",\n \"\",\n \"\",\n \"\",\n \"\",\n ].map((tag) => (\n \n {tag}\n \n ))}\n

\",\n \"
\",\n \"\",\n \"\",\n \"\",\n \"\",\n \"
\",\n \"
\",\n ].map((tag) => (\n \n {tag}\n \n ))}\n

History · modules