91:I[903690,["/chat-static/_next/static/immutable/chunks/1wyruf2v_l4wb.js","/chat-static/_next/static/immutable/chunks/1oa3bat8-m8-8.js","/chat-static/_next/static/immutable/chunks/3u_rc-gtcpym6.js","/chat-static/_next/static/immutable/chunks/0r3s70ucno8tj.js","/chat-static/_next/static/immutable/chunks/047caungpv2oe.js","/chat-static/_next/static/immutable/chunks/0ur16xcze8_1h.js","/chat-static/_next/static/immutable/chunks/37c0b4etzd24w.js","/chat-static/_next/static/immutable/chunks/17anht-a4gnim.js","/chat-static/_next/static/immutable/chunks/30wqhens5cioe.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2-a0_ndam39nj.js","/chat-static/_next/static/immutable/chunks/1pywt1h873bd3.js","/chat-static/_next/static/immutable/chunks/3h47h0tu6ra94.js","/chat-static/_next/static/immutable/chunks/3py7oec8qvsc4.js","/chat-static/_next/static/immutable/chunks/2mp0_j1home_r.js","/chat-static/_next/static/immutable/chunks/2n1jzjpl40aq6.js","/chat-static/_next/static/immutable/chunks/3i83l5x0zfxvu.js","/chat-static/_next/static/immutable/chunks/3rvonchloksz1.js","/chat-static/_next/static/immutable/chunks/0f2nmau4qedmf.js","/chat-static/_next/static/immutable/chunks/3ms522oj0w1q6.js","/chat-static/_next/static/immutable/chunks/1eb1rdocf1tga.js","/chat-static/_next/static/immutable/chunks/33g364dont6bc.js","/chat-static/_next/static/immutable/chunks/02yydb8nw8axw.js","/chat-static/_next/static/immutable/chunks/2dfjxmcoo1tp2.js","/chat-static/_next/static/immutable/chunks/1juzrssbfor2n.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/3r6d4w8uj6sbf.js","/chat-static/_next/static/immutable/chunks/0j-1w-w1bwtmq.js","/chat-static/_next/static/immutable/chunks/0ww_cp_o5vt2h.js","/chat-static/_next/static/immutable/chunks/22x9a3ztri1m7.js","/chat-static/_next/static/immutable/chunks/1fpxtmdtxgg6w.js","/chat-static/_next/static/immutable/chunks/1dwmt5q585_5h.js","/chat-static/_next/static/immutable/chunks/23pqwf8g6d7y_.js","/chat-static/_next/static/immutable/chunks/0-2x26b0rbmv2.js","/chat-static/_next/static/immutable/chunks/0oa7-fl-0dsm-.js","/chat-static/_next/static/immutable/chunks/3af4iuglo00u7.js","/chat-static/_next/static/immutable/chunks/3_uisofnq35np.js"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/immutable/chunks/1wyruf2v_l4wb.js","/chat-static/_next/static/immutable/chunks/1oa3bat8-m8-8.js","/chat-static/_next/static/immutable/chunks/3u_rc-gtcpym6.js","/chat-static/_next/static/immutable/chunks/0r3s70ucno8tj.js","/chat-static/_next/static/immutable/chunks/047caungpv2oe.js","/chat-static/_next/static/immutable/chunks/0ur16xcze8_1h.js","/chat-static/_next/static/immutable/chunks/37c0b4etzd24w.js","/chat-static/_next/static/immutable/chunks/17anht-a4gnim.js","/chat-static/_next/static/immutable/chunks/30wqhens5cioe.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2-a0_ndam39nj.js","/chat-static/_next/static/immutable/chunks/1pywt1h873bd3.js","/chat-static/_next/static/immutable/chunks/3h47h0tu6ra94.js","/chat-static/_next/static/immutable/chunks/3py7oec8qvsc4.js","/chat-static/_next/static/immutable/chunks/2mp0_j1home_r.js","/chat-static/_next/static/immutable/chunks/2n1jzjpl40aq6.js","/chat-static/_next/static/immutable/chunks/3i83l5x0zfxvu.js","/chat-static/_next/static/immutable/chunks/3rvonchloksz1.js","/chat-static/_next/static/immutable/chunks/0f2nmau4qedmf.js","/chat-static/_next/static/immutable/chunks/3ms522oj0w1q6.js","/chat-static/_next/static/immutable/chunks/1eb1rdocf1tga.js","/chat-static/_next/static/immutable/chunks/33g364dont6bc.js","/chat-static/_next/static/immutable/chunks/02yydb8nw8axw.js","/chat-static/_next/static/immutable/chunks/2dfjxmcoo1tp2.js","/chat-static/_next/static/immutable/chunks/1juzrssbfor2n.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/3r6d4w8uj6sbf.js","/chat-static/_next/static/immutable/chunks/0j-1w-w1bwtmq.js","/chat-static/_next/static/immutable/chunks/0ww_cp_o5vt2h.js","/chat-static/_next/static/immutable/chunks/22x9a3ztri1m7.js","/chat-static/_next/static/immutable/chunks/1fpxtmdtxgg6w.js","/chat-static/_next/static/immutable/chunks/1dwmt5q585_5h.js","/chat-static/_next/static/immutable/chunks/23pqwf8g6d7y_.js","/chat-static/_next/static/immutable/chunks/0-2x26b0rbmv2.js","/chat-static/_next/static/immutable/chunks/0oa7-fl-0dsm-.js","/chat-static/_next/static/immutable/chunks/3af4iuglo00u7.js","/chat-static/_next/static/immutable/chunks/3_uisofnq35np.js"],"SWRDataProvider"] 93:T11dfb,[V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-shapes-sUE5R8SURiS0JAVLKZSgt58oSNZSJI.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpg:file="public/ceholder-svg-key-oy6b9-height-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-key-oy6b9-height--GOxfbta1hPANOZuqnWnBVw8Ks6UvZ3.jpg" isMerged="true" [V0_FILE]png:file="public/generic-placeholder-graphic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-placeholder-graphic-B0gHGkVVAZ4GlGVksk7Qbm3a9DVuXf.png" isMerged="true" [V0_FILE]jpg:file="public/ceholder-svg-key-8jrow-key-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-key-8jrow-key--0DSWkkrl9u32hzhV95GlzBUTqwAwtq.jpg" isMerged="true" [V0_FILE]jpg:file="public/ceholder-svg-key-modern-key-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-key-modern-key--8qebWmM2nuY2mvMuJHr5icvw4VWZ03.jpg" isMerged="true" [V0_FILE]jpg:file="public/ceholder-svg-key-unual-key-modern-key-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-key-unual-key-modern-key--ImNOC8pwkw6o0l8rfljWNTcbrKLlRg.jpg" isMerged="true" [V0_FILE]png:file="public/ceholder-svg-key-polish-key-final-key-.png" https="true" hebbkx1anhila5yf="true" public="true" blob="true" vercel="true" storage="true" com="true" attachments="true" gen="true" images="true" ceholder="true" svg="true" key="true" polish="true" final="true" Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8="true" v0="true" no="true" op="true" code="true" block="true" terminated="true" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Press_Start_2P } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" const pressStart2P = Press_Start_2P({ weight: "400", subsets: ["latin"], display: "swap", variable: "--font-press-start-2p", }) export const metadata: Metadata = { title: "Computer History Book", description: "An interactive 8-bit style book about computer history for kids", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --retro-green: #00ff41; --retro-blue: #0066ff; --retro-yellow: #ffff00; --retro-red: #ff0066; --retro-purple: #9900ff; --font-press-start-2p: "Press Start 2P", monospace; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --font-press-start-2p: var(--font-press-start-2p); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } .pixelated { font-family: var(--font-press-start-2p), monospace; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } [V0_FILE]jpg:file="public/ceholder-svg-key-iqsgk-height-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-key-iqsgk-height--3a9WzhwOHSK8Jn3D7GxZSovBxiK9XA.jpg" isMerged="true" [V0_FILE]png:file="public/generic-placeholder-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-placeholder-icon-6rytDm0Lv7YxnJy5pw7eIh42IXs1aB.png" isMerged="true" [V0_FILE]jpg:file="public/ceholder-svg-key-sklu9-height-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-key-sklu9-height--wPyPTlQfxxoMVmV5f2eyYapJ58Y1DJ.jpg" isMerged="true" [V0_FILE]jpg:file="public/ceholder-svg-key-cpyqu-height-168-width-224-text-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-key-cpyqu-height-168-width-224-text--H1ZSlczrB4pOzyqc4uSSJaR60bCxPD.jpg" isMerged="true" [V0_FILE]jpg:file="public/ceholder-svg-height-168-width-224-text-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-height-168-width-224-text--44sKU1RgpCZI60qtnFrMC6sUH1iso3.jpg" isMerged="true" [V0_FILE]jpg:file="public/ceholder-svg-key-re43i-height-168-width-224-text-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ceholder-svg-key-re43i-height-168-width-224-text--RTS2mFxB8bnJwhEHQFRh3NAnVsQBzi.jpg" isMerged="true" [V0_FILE]jpg:file="public/ada-lovelace-portrait.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ada-lovelace-portrait-Wbs3a7i4sMuJdUgBDmqJv2SKX4PpV6.jpg" isMerged="true" [V0_FILE]jpg:file="public/babbage-analytical-engine.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/babbage-analytical-engine-4OkINSqnCXQdsvDCLpkLf0YgC9J9tS.jpg" isMerged="true" [V0_FILE]jpg:file="public/eniac-computer-room.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/eniac-computer-room-7d9QUbPgqU2cXKGsPBIVE8F03NCl7N.jpg" isMerged="true" [V0_FILE]jpg:file="public/altair-8800-kit.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/altair-8800-kit-kgLYwcEe82rReYgX5jLUVWcgCPvZfX.jpg" isMerged="true" [V0_FILE]jpg:file="public/apple-ii-computer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-ii-computer-vP5yoS1meoWM3W08tM2D2hXhMKyT81.jpg" isMerged="true" [V0_FILE]jpg:file="public/commodore-64.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/commodore-64-UylTpioqOc5DwaTEmOe4y2M5LkiwE8.jpg" isMerged="true" [V0_FILE]jpg:file="public/ibm-pc-1981.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ibm-pc-1981-vJrNBcJbr8MPxYgqQvcWQzsdDg3mlA.jpg" isMerged="true" [V0_FILE]jpg:file="public/early-internet-web.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/early-internet-web-hLzQVQkuvDeF5eOQTneL7ANs1PSUUA.jpg" isMerged="true" [V0_FILE]jpg:file="public/laptop-computer-90s.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/laptop-computer-90s-MgiXNKVKzu9wNVOSoGIxU2vlS8JDJv.jpg" isMerged="true" [V0_FILE]jpg:file="public/apple-i-computer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-i-computer-Uxk9rA6oJ7Jj3gLUfaMUoPIFLD8z20.jpg" isMerged="true" [V0_FILE]jpg:file="public/macintosh-1984.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/macintosh-1984-xnIeAJ11AZ6cO4HvRiIQilXO3zippL.jpg" isMerged="true" [V0_FILE]jpg:file="public/early-web-browser.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/early-web-browser-RsU0lQ6cjwTNNn4BXrENkZhQFWbte5.jpg" isMerged="true" [V0_FILE]jpg:file="public/early-laptop-computer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/early-laptop-computer-QKGE96gHKsQsi5Fyl9m2ovIQVNXbAr.jpg" isMerged="true" [V0_FILE]jpg:file="public/original-iphone-2007.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/original-iphone-2007-XSHI6tiTrcd4nTKnZqxWHr9IHG9YiU.jpg" isMerged="true" [V0_FILE]jpg:file="public/ipad-tablet-2010.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ipad-tablet-2010-KJER0jDtwGLJLSct8vI81qDtMlKk1S.jpg" isMerged="true" [V0_FILE]jpg:file="public/smart-home-devices.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smart-home-devices-75sqOGeOGdpEijlpTQxSiTVGeUD5ZZ.jpg" isMerged="true" [V0_FILE]jpg:file="public/artificial-intelligence-robot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/artificial-intelligence-robot-TLGbp5uVyCczVe7Jh3qK8EiJ24JOTG.jpg" isMerged="true" [V0_FILE]jpg:file="public/jacquard-loom.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/artificial-intelligence-robot-TLGbp5uVyCczVe7Jh3qK8EiJ24JOTG.jpg" isMerged="true" [V0_FILE]jpg:file="public/apple-i-motherboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/macintosh-1984-xnIeAJ11AZ6cO4HvRiIQilXO3zippL.jpg" isMerged="true" [V0_FILE]jpg:file="public/jacquard-loom-punch-cards.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/jacquard-loom-punch-cards-3EdirtojehWFNBC94B2cIE5zs67hzK.jpg" isMerged="true" [V0_FILE]jpg:file="public/first-computer-bug-logbook.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/first-computer-bug-logbook-psjZwondGhLrP1Esd1K0duZZnJTkwV.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useCallback } from "react" import { ChevronRight, Lightbulb, Zap, Calculator, Monitor, Gamepad2, Home, Globe, Smartphone, Tablet, Wifi, RotateCcw, BookOpen, Trophy, } from "lucide-react" const playSound = (type: "page" | "click" | "complete" | "achievement") => { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(audioContext.destination) switch (type) { case "page": oscillator.frequency.setValueAtTime(800, audioContext.currentTime) oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.1) break case "click": oscillator.frequency.setValueAtTime(600, audioContext.currentTime) break case "complete": oscillator.frequency.setValueAtTime(523, audioContext.currentTime) // C note oscillator.frequency.setValueAtTime(659, audioContext.currentTime + 0.1) // E note oscillator.frequency.setValueAtTime(784, audioContext.currentTime + 0.2) // G note break case "achievement": oscillator.frequency.setValueAtTime(440, audioContext.currentTime) // A note oscillator.frequency.setValueAtTime(554, audioContext.currentTime + 0.1) // C# note break } gainNode.gain.setValueAtTime(0.1, audioContext.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3) oscillator.start(audioContext.currentTime) oscillator.stop(audioContext.currentTime + 0.3) } const CustomButton = ({ onClick, disabled = false, children, className = "", variant = "default", }: { onClick: () => void disabled?: boolean children: React.ReactNode className?: string variant?: "default" | "green" | "red" }) => { const baseStyles = "font-mono transition-all shadow-lg border-4 rounded-lg flex items-center justify-center cursor-pointer" let variantStyles = "" if (variant === "green") { variantStyles = "bg-green-700 hover:bg-green-600 text-green-100 border-green-500" } else if (variant === "red") { variantStyles = "bg-red-600 hover:bg-red-700 text-white border-red-800" } else { variantStyles = "bg-green-800 hover:bg-green-700 text-green-100 border-green-600" } const disabledStyles = disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-105" return ( ) } // Book pages data const bookPages = [ { id: "cover", title: "The Amazing Story of Computers!", content: "A Fun Journey Through Computer History", subtitle: "From Giant Machines to Tiny Chips!", type: "cover", bgColor: "from-purple-600 to-blue-600", }, { id: "intro", title: "Welcome, Young Explorer!", content: "Get ready to discover how computers went from room-sized monsters to the tiny devices we use today!", subtitle: "Did you know the first computer was as big as your bedroom?", type: "intro", bgColor: "from-green-500 to-blue-500", funFact: "The first computer weighed as much as 5 elephants!", }, { id: "early-1", title: "The Very First Ideas", content: "Long ago, a smart lady named Ada Lovelace had amazing ideas about machines that could think! She wrote the very first computer program before computers even existed!", character: "Ada Lovelace", year: "1843", type: "story", bgColor: "from-pink-500 to-purple-500", funFact: "Ada was the daughter of a famous poet!", imageQuery: "Ada Lovelace portrait Victorian era woman mathematician", caption: "Ada Lovelace - The World's First Computer Programmer", }, { id: "early-2", title: "Charles and His Dream Machine", content: "Charles Babbage dreamed of a machine called the Analytical Engine - like a giant calculator made of gears and wheels! It was never finished, but it had all the ideas that computers use today.", character: "Charles Babbage", year: "1834", type: "story", bgColor: "from-orange-500 to-red-500", funFact: "His machine had over 25,000 parts!", imageQuery: "Charles Babbage Analytical Engine mechanical calculator Victorian", caption: "Charles Babbage and his Amazing Analytical Engine", }, { id: "early-3", title: "The Punch Card Magic", content: "Joseph Jacquard invented a loom that used punch cards with holes to make beautiful patterns! This gave people the idea to use cards with holes to tell machines what to do.", character: "Joseph Jacquard", year: "1801", type: "story", bgColor: "from-teal-500 to-green-500", funFact: "Each hole in the card was like a tiny instruction!", imageQuery: "Jacquard loom punch cards weaving textile historical", caption: "The Jacquard Loom - Teaching Machines with Holes!", }, { id: "vacuum-1", title: "The Room-Sized Computer", content: "ENIAC was HUGE! It filled an entire room and used thousands of glowing tubes called vacuum tubes! It could do math super fast, but it got so hot that it needed giant fans to cool down.", year: "1945", type: "story", bgColor: "from-yellow-500 to-orange-500", funFact: "ENIAC used enough electricity to power 100 houses!", imageQuery: "ENIAC computer room vacuum tubes 1940s historical photo", caption: "ENIAC - The Giant Computer That Filled a Whole Room!", }, { id: "first-bug", title: "The Very First Computer Bug!", content: "In 1947, Grace Hopper and her team found a real moth stuck inside the Harvard Mark II computer! The moth was causing problems, so they carefully removed it and taped it in their logbook. This is where the word 'bug' comes from when computers don't work right!", character: "Grace Hopper", year: "1947", type: "story", bgColor: "from-amber-500 to-yellow-500", funFact: "Before this, people called computer problems 'bugs' but this was the first ACTUAL bug found in a computer!", imageQuery: "Grace Hopper Harvard Mark II computer moth logbook 1947 historical", caption: "The Famous Moth - The First Real Computer Bug!", }, { id: "personal-intro", title: "The Personal Computer Revolution!", content: "In the 1970s, something amazing happened - computers started getting smaller! Smart inventors figured out how to make computers that regular families could buy and use at home.", type: "intro", bgColor: "from-cyan-500 to-blue-500", funFact: "The first personal computers cost as much as a car!", icon: "Home", }, { id: "altair-1", title: "The First Home Computer Kit", content: "The Altair 8800 was like a big puzzle! You had to build it yourself with lots of tiny parts. It didn't even have a screen - just blinking lights that talked to you!", character: "Ed Roberts", year: "1975", type: "story", bgColor: "from-indigo-500 to-purple-500", funFact: "It came in a box with 1,000 pieces to put together!", imageQuery: "Altair 8800 computer kit 1975 blinking lights switches", caption: "The Altair 8800 - A Computer You Built Yourself!", }, { id: "apple-1", title: "The Garage Inventors", content: "Steve Jobs and Steve Wozniak built the Apple I in a garage! They wanted to make computers that were easy to use, not just for computer experts. They dreamed of a computer on every desk!", character: "Steve Jobs & Steve Wozniak", year: "1976", type: "story", bgColor: "from-blue-500 to-purple-500", funFact: "They sold their car and calculator to buy parts!", imageQuery: "Apple I computer Steve Jobs Wozniak garage 1976 wooden case", caption: "The Apple I - Built in a Garage!", }, { id: "apple-2", title: "The Computer That Changed Everything", content: "The Apple II was the first computer that looked friendly! It had colors on the screen and could play games. Families started buying them to help kids learn and have fun!", character: "Apple Computer", year: "1977", type: "story", bgColor: "from-green-500 to-teal-500", funFact: "It was the first computer to show colors on TV!", imageQuery: "Apple II computer 1977 beige case color monitor family", caption: "The Apple II - The First Family-Friendly Computer!", }, { id: "commodore-1", title: "The Gaming Computer", content: "The Commodore 64 was like a game console and computer rolled into one! Kids loved it because it could play amazing games with cool music and graphics. It became the best-selling computer ever!", character: "Commodore", year: "1982", type: "story", bgColor: "from-red-500 to-pink-500", funFact: "More C64s were sold than any other computer in history!", imageQuery: "Commodore 64 computer 1980s brown case games joystick", caption: "The Commodore 64 - The Ultimate Gaming Computer!", }, { id: "ibm-pc", title: "The Business Computer", content: "IBM made a computer for grown-ups to use at work! The IBM PC was serious and professional. Soon, every office had one, and people started calling all computers 'PCs'!", character: "IBM", year: "1981", type: "story", bgColor: "from-gray-500 to-blue-500", funFact: "PC stands for 'Personal Computer' - IBM's idea!", imageQuery: "IBM PC 1981 beige computer monitor keyboard office", caption: "The IBM PC - The Computer That Went to Work!", }, { id: "mac-1", title: "The Computer with a Mouse", content: "The Apple Macintosh was the first computer that was super easy to use! Instead of typing scary commands, you could just point and click with a mouse. It had cute little pictures called icons!", character: "Apple Macintosh", year: "1984", type: "story", bgColor: "from-purple-500 to-pink-500", funFact: "It was the first computer most people could use without reading a manual!", imageQuery: "Apple Macintosh 1984 compact computer mouse desktop GUI", caption: "The Macintosh - Point, Click, and Have Fun!", }, { id: "modern-intro", title: "The Modern Computer Age!", content: "In the 1990s and 2000s, computers became super powerful and connected to something amazing - the Internet! Suddenly, computers could talk to each other all around the world!", type: "intro", bgColor: "from-blue-500 to-cyan-500", funFact: "The Internet connects over 5 billion people today!", icon: "Globe", }, { id: "internet-1", title: "The World Wide Web", content: "Tim Berners-Lee invented the World Wide Web - a way for computers everywhere to share information! Suddenly you could look up anything, talk to friends far away, and see pictures from around the world!", character: "Tim Berners-Lee", year: "1990", type: "story", bgColor: "from-blue-500 to-green-500", funFact: "The first website ever made is still online today!", imageQuery: "early World Wide Web browser 1990s computer screen Tim Berners-Lee", caption: "The World Wide Web - Connecting Everyone!", }, { id: "laptops-1", title: "Computers You Can Carry", content: "Laptops made computers portable! Now you could take your computer anywhere - to school, on vacation, or to the park. They folded up like a book and had their own screen and keyboard built right in!", character: "Portable Computing", year: "1990s", type: "story", bgColor: "from-green-500 to-blue-500", funFact: "The first laptop weighed 24 pounds - like carrying a big watermelon!", imageQuery: "early laptop computer 1990s portable folding screen keyboard", caption: "Laptops - Your Computer Goes Anywhere!", }, { id: "smartphones-1", title: "The Computer in Your Pocket", content: "The iPhone changed everything! Steve Jobs put a computer, phone, music player, and camera all in one tiny device. Now everyone could have a super-computer in their pocket!", character: "Apple iPhone", year: "2007", type: "story", bgColor: "from-gray-500 to-blue-500", funFact: "Your phone is 100,000 times more powerful than the computer that landed on the moon!", imageQuery: "original iPhone 2007 Steve Jobs touchscreen smartphone", caption: "The iPhone - A Computer That Fits in Your Pocket!", }, { id: "tablets-1", title: "Touch Screen Magic", content: "Tablets like the iPad made computers even easier to use! You could touch the screen with your fingers to control everything. No mouse or keyboard needed - just tap, swipe, and pinch!", character: "Apple iPad", year: "2010", type: "story", bgColor: "from-purple-500 to-blue-500", funFact: "Kids as young as 2 years old can use tablets without any help!", imageQuery: "iPad tablet 2010 touchscreen finger gestures apps", caption: "Tablets - Touch the Future!", }, { id: "modern-today", title: "Computers Everywhere Today!", content: "Now computers are in everything! Your car has computers, your TV is smart, your watch can talk to you, and even your refrigerator can order groceries! We live in a world full of helpful computer friends.", type: "story", bgColor: "from-green-500 to-teal-500", funFact: "There are more computers on Earth than there are people!", imageQuery: "smart home devices IoT modern technology everyday life", caption: "Smart Everything - Computers Are Our Helpful Friends!", }, { id: "ai-future", title: "Computers That Think", content: "Today, scientists are teaching computers to think and learn just like people! These smart computers can recognize your voice, understand pictures, and even help doctors find cures for diseases!", character: "Artificial Intelligence", year: "2020s", type: "story", bgColor: "from-cyan-500 to-purple-500", funFact: "AI computers can beat the world's best players at chess and video games!", imageQuery: "artificial intelligence AI robot computer brain thinking futuristic", caption: "AI - Computers Learning to Think Like Us!", }, { id: "end", title: "The End... Or Is It?", content: "What amazing computer inventions will YOU help create when you grow up? Maybe flying computers? Computers that can read your mind? The future is waiting for you!", type: "ending", bgColor: "from-purple-500 to-pink-500", funFact: "The next great computer invention might be YOUR idea!", }, ] export default function ComputerHistoryBook() { const [currentPage, setCurrentPage] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const [soundEnabled, setSoundEnabled] = useState(true) const [pagesRead, setPagesRead] = useState(new Set([0])) const [showCelebration, setShowCelebration] = useState(false) const [achievements, setAchievements] = useState(new Set()) const [showAchievement, setShowAchievement] = useState(null) const [readingTime, setReadingTime] = useState(0) const [startTime] = useState(Date.now()) const [favoritePages, setFavoritePages] = useState(new Set()) const [showHelp, setShowHelp] = useState(false) const [showNavTooltip, setShowNavTooltip] = useState(true) const checkAchievements = useCallback( (pageIndex: number, pagesReadSet: Set) => { const newAchievements = new Set(achievements) if (pageIndex === 5 && !achievements.has("first-computer")) { newAchievements.add("first-computer") setShowAchievement("🖥️ Computer Pioneer! You learned about the first computers!") } if (pageIndex === 6 && !achievements.has("first-bug")) { newAchievements.add("first-bug") setShowAchievement("🐛 Bug Hunter! You learned about the first computer bug!") } if (pagesReadSet.size === 10 && !achievements.has("halfway")) { newAchievements.add("halfway") setShowAchievement("⭐ Halfway Hero! You're halfway through the journey!") } if (pagesReadSet.size === bookPages.length && !achievements.has("completed")) { newAchievements.add("completed") setShowAchievement("🏆 Computer History Master! You completed the entire book!") } if (favoritePages.size >= 3 && !achievements.has("collector")) { newAchievements.add("collector") setShowAchievement("❤️ Page Collector! You favorited 3 pages!") } if (newAchievements.size > achievements.size) { setAchievements(newAchievements) if (soundEnabled) playSound("achievement") setTimeout(() => setShowAchievement(null), 4000) } }, [achievements, favoritePages.size, soundEnabled], ) useEffect(() => { const interval = setInterval(() => { setReadingTime(Math.floor((Date.now() - startTime) / 1000)) }, 1000) return () => clearInterval(interval) }, [startTime]) const goToNextPage = useCallback(() => { if (currentPage < bookPages.length - 1 && !isAnimating) { setIsAnimating(true) const nextPage = currentPage + 1 setCurrentPage(nextPage) const newPagesRead = new Set([...pagesRead, nextPage]) setPagesRead(newPagesRead) if (soundEnabled) { playSound("page") } checkAchievements(nextPage, newPagesRead) setTimeout(() => setIsAnimating(false), 300) } }, [currentPage, isAnimating, soundEnabled, pagesRead, checkAchievements]) const goToPreviousPage = useCallback(() => { if (currentPage > 0 && !isAnimating) { setIsAnimating(true) setCurrentPage((prev) => prev - 1) if (soundEnabled) { playSound("page") } setTimeout(() => setIsAnimating(false), 300) } }, [currentPage, isAnimating, soundEnabled]) // Handle keyboard navigation useEffect(() => { const handleKeyPress = (e: KeyboardEvent) => { if (e.key === "ArrowLeft") { goToPreviousPage() } else if (e.key === "ArrowRight") { goToNextPage() } else if (e.key === " ") { e.preventDefault() goToNextPage() } } window.addEventListener("keydown", handleKeyPress) return () => window.removeEventListener("keydown", handleKeyPress) }, [goToNextPage, goToPreviousPage]) // Handle touch/swipe gestures useEffect(() => { let startX = 0 let startY = 0 const handleTouchStart = (e: TouchEvent) => { startX = e.touches[0].clientX startY = e.touches[0].clientY } const handleTouchEnd = (e: TouchEvent) => { const endX = e.changedTouches[0].clientX const endY = e.changedTouches[0].clientY const diffX = startX - endX const diffY = startY - endY // Only trigger if horizontal swipe is more significant than vertical if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) { if (diffX > 0) { goToNextPage() } else { goToPreviousPage() } } } window.addEventListener("touchstart", handleTouchStart) window.addEventListener("touchend", handleTouchEnd) return () => { window.removeEventListener("touchstart", handleTouchStart) window.removeEventListener("touchend", handleTouchEnd) } }, [goToNextPage, goToPreviousPage]) useEffect(() => { const timer = setTimeout(() => { setShowNavTooltip(false) }, 5000) return () => clearTimeout(timer) }, []) const currentPageData = bookPages[currentPage] const progressPercentage = Math.round((pagesRead.size / bookPages.length) * 100) const getPageIcon = (iconName: string) => { switch (iconName) { case "Home": return case "Monitor": return case "Gamepad": return case "Globe": return case "Smartphone": return case "Tablet": return case "Wifi": return default: return } } const toggleFavorite = useCallback( (pageIndex: number) => { const newFavorites = new Set(favoritePages) if (newFavorites.has(pageIndex)) { newFavorites.delete(pageIndex) } else { newFavorites.add(pageIndex) } setFavoritePages(newFavorites) if (soundEnabled) playSound("click") // Check for collector achievement if (newFavorites.size >= 3 && !achievements.has("collector")) { checkAchievements(currentPage, pagesRead) } }, [favoritePages, soundEnabled, achievements, currentPage, pagesRead, checkAchievements], ) const restartBook = () => { setCurrentPage(0) setPagesRead(new Set([0])) setShowCelebration(false) setFavoritePages(new Set()) if (soundEnabled) playSound("click") } const toggleHelp = () => { setShowHelp(!showHelp) if (soundEnabled) playSound("click") } const dismissNavTooltip = () => { setShowNavTooltip(false) if (soundEnabled) playSound("click") } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } return (

{showAchievement && (

{showAchievement}

)} {showNavTooltip && (

Use ← → keys, spacebar, or swipe to navigate

)}

{showHelp && (

How to Use This Book

🖱️ Navigate: Arrow keys, spacebar, or swipe

❤️ Favorite: Heart icon on pages you love

🔊 Sound: Toggle audio feedback

🏆 Achievements: Unlock rewards as you read

📊 Progress: Track your reading journey

Got it!

)} {/* Book Container */}

{showCelebration && (

🎉

Congratulations!

You've completed the amazing journey through computer history!

📖 Pages Read: {pagesRead.size}/{bookPages.length}

⏱️ Reading Time: {formatTime(readingTime)}

❤️ Favorite Pages: {favoritePages.size}

🏆 Achievements: {achievements.size}/4

setShowCelebration(false)} className="text-sm sm:text-lg px-4 sm:px-6 py-2 sm:py-3" > Awesome!

)}

{/* Dynamic Background */}

{/* Cover Page Layout */} {currentPageData.type === "cover" && (

{currentPageData.title}

{currentPageData.content}

{currentPageData.subtitle}

)} {/* Introduction Page Layout */} {currentPageData.type === "intro" && (

{currentPageData.icon ? (

{getPageIcon(currentPageData.icon)}

) : ( )}

{currentPageData.title}

{currentPageData.content}

{currentPageData.subtitle}

{currentPageData.funFact && (

Fun Fact: {currentPageData.funFact}

)}

)} {/* Story Page Layout */} {currentPageData.type === "story" && (

{/* Header */}

{currentPageData.title}

{currentPageData.character && (

soundEnabled && playSound("click")} > Meet: {currentPageData.character}

)} {currentPageData.year && (

soundEnabled && playSound("click")} > Year: {currentPageData.year}

)}

{/* Historical Image */}

soundEnabled && playSound("click")} >

{ // Use actual historical photos for key pages switch (currentPageData.id) { case "early-1": return "/ada-lovelace-portrait.jpg" case "early-2": return "/babbage-analytical-engine.jpg" case "early-3": return "/jacquard-loom-punch-cards.jpg" case "vacuum-1": return "/eniac-computer-room.jpg" case "first-bug": return "/first-computer-bug-logbook.jpg" case "altair-1": return "/altair-8800-kit.jpg" case "apple-1": return "/apple-i-motherboard.jpg" case "apple-2": return "/apple-ii-computer.jpg" case "commodore-1": return "/commodore-64.jpg" case "ibm-pc": return "/ibm-pc-1981.jpg" case "mac-1": return "/macintosh-1984.jpg" case "internet-1": return "/early-web-browser.jpg" case "laptops-1": return "/early-laptop-computer.jpg" case "smartphones-1": return "/original-iphone-2007.jpg" case "tablets-1": return "/ipad-tablet-2010.jpg" case "modern-today": return "/smart-home-devices.jpg" case "ai-future": return "/artificial-intelligence-robot.jpg" default: // Fallback to placeholder with proper query return `/placeholder.svg?height=256&width=320&text=${encodeURIComponent(currentPageData.imageQuery || currentPageData.character || "vintage computer historical")}` } })()} alt={ currentPageData.caption || `Historical image of ${currentPageData.character || "early computer"}` } className="w-full h-full object-cover hover:scale-105 transition-transform" />

{currentPageData.caption || (currentPageData.character ? `${currentPageData.character} (${currentPageData.year})` : `Early Computer (${currentPageData.year})`)}

{/* Text Content */}

{currentPageData.content}

{currentPageData.funFact && (

soundEnabled && playSound("click")} > Fun Fact: {currentPageData.funFact}

)}

)} {/* Ending Page Layout */} {currentPageData.type === "ending" && (

🚀

{currentPageData.title}

{currentPageData.content}

{currentPageData.funFact && (

{currentPageData.funFact}

)}

{ setShowCelebration(true) if (soundEnabled) playSound("complete") }} className="text-sm sm:text-lg px-4 sm:px-6 py-2 sm:py-3 min-h-[44px]" > 🎉 Show My Results! Read Again!

)}

{/* Navigation Controls - Outside Book Frame */}

{/* Progress Display */}

Progress: {progressPercentage}% • {formatTime(readingTime)}

{/* Next Button */} NEXT

) }8a:["$","$L91",null,{"chatId":"cYrJgkMVV0Q","children":["$","$L92",null,{"data":{"@\"active-block\",\"cYrJgkMVV0Q\",":{"id":"b_eHg80PgFO4x","messageId":"IVWEEmuI4NdSmduGrug5bkFfF7bJ0v2g","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"computer-history-book","type":"code-project","project":"computer-history-book","taskNameActive":"Moving navigation outside book frame","taskNameComplete":"Moved navigation outside book frame"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"cYrJgkMVV0Q\",":false},"children":"$L94"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This