\\n\" +\n \" \" + escapeHTML(siteTitle) + \"\\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 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 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 Edit this page’s HTML\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 ].map((tag) => (\n \n {tag}\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}","label",[178,179,70],"frontend","modules","pulls","branches",2,"forks","envVars",{"_188":26,"_190":26},"connections",{"_188":26,"_189":26},"count","unfilledCount","emptyCount",{"_32":333,"_13":178,"_68":229,"_42":-5,"_34":35,"_171":39,"_172":91,"_36":334,"_38":26,"_71":302,"_174":-5,"_73":24,"_176":-5,"_216":335,"_17":336},{"_32":329,"_13":313,"_68":308,"_42":229,"_34":35,"_171":39,"_172":91,"_36":330,"_38":26,"_71":302,"_174":-5,"_73":24,"_176":-5,"_216":331,"_17":332},{"_32":321,"_13":322,"_68":323,"_42":308,"_34":35,"_171":117,"_172":91,"_36":324,"_38":325,"_71":72,"_174":326,"_73":24,"_176":-5,"_216":327,"_17":328},{"_32":314,"_13":315,"_68":316,"_42":308,"_34":35,"_171":39,"_172":91,"_36":317,"_38":26,"_71":72,"_174":318,"_73":24,"_176":-5,"_216":319,"_17":320},{"_32":305,"_13":306,"_68":307,"_42":308,"_34":35,"_171":39,"_172":91,"_36":309,"_38":26,"_71":72,"_174":310,"_73":24,"_176":-5,"_216":311,"_17":312},{"_32":300,"_13":179,"_68":170,"_42":229,"_34":35,"_171":39,"_172":91,"_36":301,"_38":26,"_71":302,"_174":-5,"_73":24,"_176":-5,"_216":303,"_17":304},{"_32":169,"_13":70,"_68":69,"_42":170,"_34":35,"_171":39,"_172":91,"_36":297,"_38":26,"_71":72,"_174":175,"_73":24,"_176":-5,"_216":298,"_17":299},{"_32":290,"_13":291,"_68":292,"_42":170,"_34":35,"_171":39,"_172":91,"_36":293,"_38":26,"_71":72,"_174":294,"_73":24,"_176":-5,"_216":295,"_17":296},{"_32":283,"_13":284,"_68":285,"_42":170,"_34":35,"_171":39,"_172":91,"_36":286,"_38":26,"_71":72,"_174":287,"_73":24,"_176":-5,"_216":288,"_17":289},{"_32":276,"_13":277,"_68":278,"_42":170,"_34":35,"_171":39,"_172":91,"_36":279,"_38":26,"_71":72,"_174":280,"_73":24,"_176":-5,"_216":281,"_17":282},{"_32":269,"_13":270,"_68":271,"_42":170,"_34":35,"_171":39,"_172":91,"_36":272,"_38":26,"_71":72,"_174":273,"_73":24,"_176":-5,"_216":274,"_17":275},{"_32":262,"_13":263,"_68":264,"_42":170,"_34":35,"_171":39,"_172":91,"_36":265,"_38":26,"_71":72,"_174":266,"_73":24,"_176":-5,"_216":267,"_17":268},{"_32":255,"_13":256,"_68":257,"_42":170,"_34":35,"_171":39,"_172":91,"_36":258,"_38":26,"_71":72,"_174":259,"_73":24,"_176":-5,"_216":260,"_17":261},{"_32":248,"_13":249,"_68":250,"_42":229,"_34":35,"_171":39,"_172":91,"_36":251,"_38":26,"_71":21,"_174":252,"_73":24,"_176":-5,"_216":253,"_17":254},{"_32":241,"_13":242,"_68":243,"_42":229,"_34":35,"_171":39,"_172":91,"_36":244,"_38":26,"_71":72,"_174":245,"_73":24,"_176":-5,"_216":246,"_17":247},{"_32":234,"_13":235,"_68":236,"_42":229,"_34":35,"_171":39,"_172":91,"_36":237,"_38":26,"_71":72,"_174":238,"_73":24,"_176":-5,"_216":239,"_17":240},{"_32":226,"_13":227,"_68":228,"_42":229,"_34":35,"_171":182,"_172":91,"_36":230,"_38":26,"_71":72,"_174":231,"_73":24,"_176":-5,"_216":232,"_17":233},{"_32":219,"_13":220,"_68":221,"_42":-5,"_34":35,"_171":39,"_172":91,"_36":222,"_38":26,"_71":21,"_174":223,"_73":24,"_176":-5,"_216":224,"_17":225},{"_32":210,"_13":211,"_68":212,"_42":-5,"_34":35,"_171":39,"_172":91,"_36":213,"_38":26,"_71":214,"_174":215,"_73":24,"_176":-5,"_216":217,"_17":218},"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",[],[211],"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",[],[220],"d324095d-8946-4dc1-8c06-4ca3b9d59344","storage.ts","8820711a-9cc8-11f1-a3e8-1607ee4eb77e","01a02085-194d-7488-9979-ed61e32b72d7",["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",[],[178,227],"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",[],[178,313,315],"051cff7a-1958-43d1-9f06-df2a95224bc6","App.tsx","01a02085-194d-7488-9979-b3881fa44e47",["D",1787252171651],7,"/** @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",[],[178,313,322],"cc643eb0-1c02-4eae-9fe2-a07e02f40b7a",["D",1787251988821],[193,194,195],[178,313],"b7df42da-c0fb-4e16-8edf-f1416d6a7509",["D",1787251988821],[192,196,204,205,206,207],[178],["D",1785431448217],["D",1789563036726],{"_11":12,"_131":76},{"_11":12,"_127":-5,"_75":76,"_30":74,"_128":129,"_130":24},{"_38":117,"_13":16,"_32":35,"_118":78,"_119":64,"_120":121,"_122":82,"_123":78,"_124":41,"_125":14,"_126":12},"ctx",{"_53":-5,"_152":375,"_376":377,"_378":379,"_380":24,"_381":24,"_382":24,"_383":91,"_384":-5,"_385":-7,"_386":-7,"_387":26,"_388":24,"_389":24,"_390":-5,"_391":24,"_392":24,"_393":24,"_394":-5},"ENV",{"_346":347,"_348":349,"_350":65,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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>

History · AdvancedWebsiteLab.tsx