[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_230":231,"_232":233},"routes/_app.x.$handle.$name",{"_102":101,"_32":45,"_111":88,"_27":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_20":-5,"_123":124,"_125":126,"_127":25,"_128":129,"_130":60,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",13,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","script.js","latestPath","fileId","019e8335-557d-7234-9858-d3412d1d3391","name","fileType","script","content","// Real Cake Preview + Configuration\nlet currentLayers = 3;\nlet currentColor = '#f8a1c4';\nlet currentType = 'vanilla';\nlet activeDecorations = [];\n\nconst colorOptions = [\n { name: 'White', value: '#ffffff' },\n { name: 'Pink', value: '#f8a1c4' },\n { name: 'Yellow', value: '#f5d07a' },\n { name: 'Peach', value: '#f8c1b8' },\n { name: 'Mint', value: '#a8d5ba' }\n];\n\nconst decorationsList = ['🕯️', '✨', '🎀', '🍓', '🌸'];\n\nfunction createCakePreview() {\n const preview = document.getElementById('cake-preview');\n preview.innerHTML = '';\n\n // Cake Base (plate)\n const base = document.createElement('div');\n base.className = 'cake-base bg-amber-800';\n base.style.height = '20px';\n base.style.marginTop = 'auto';\n preview.appendChild(base);\n\n // Layers\n for (let i = 0; i < currentLayers; i++) {\n const layer = document.createElement('div');\n layer.className = `cake-layer ${currentType}`;\n layer.style.backgroundColor = currentColor;\n \n // Slight color variation per layer\n if (i % 2 === 0) layer.style.opacity = '0.95';\n preview.appendChild(layer);\n }\n\n // Top icing\n const top = document.createElement('div');\n top.className = 'cake-top';\n top.style.backgroundColor = currentColor;\n preview.appendChild(top);\n\n // Decorations\n activeDecorations.forEach((deco, index) => {\n const d = document.createElement('div');\n d.className = 'decoration';\n d.style.left = `${30 + (index * 25)}px`;\n d.style.top = `${30 + (index % 2) * 15}px`;\n d.textContent = deco;\n preview.appendChild(d);\n });\n}\n\nfunction updateCakePreview() {\n currentType = document.getElementById('cakeType').value;\n createCakePreview();\n}\n\n// Layer Selection\nfunction setLayers(n) {\n currentLayers = n;\n document.querySelectorAll('.layer-btn').forEach(btn => {\n const active = parseInt(btn.dataset.layers) === n;\n btn.classList.toggle('bg-pink-100', active);\n btn.classList.toggle('border-pink-500', active);\n });\n createCakePreview();\n}\n\n// Color Selection\nfunction populateColors() {\n const container = document.getElementById('color-picker');\n container.innerHTML = colorOptions.map(c => `\n

\n `).join('');\n}\n\nfunction selectColor(color) {\n currentColor = color;\n createCakePreview();\n}\n\n// Decorations\nfunction populateDecorations() {\n const container = document.getElementById('deco-container');\n container.innerHTML = decorationsList.map(deco => `\n \n `).join('');\n}\n\nfunction toggleDecoration(deco, btn) {\n if (activeDecorations.includes(deco)) {\n activeDecorations = activeDecorations.filter(d => d !== deco);\n btn.classList.remove('bg-pink-500', 'text-white');\n } else {\n activeDecorations.push(deco);\n btn.classList.add('bg-pink-500', 'text-white');\n }\n createCakePreview();\n}\n\n// Other functions\nfunction saveCake() {\n alert(`🎉 Design Saved!\\nType: ${currentType}\\nLayers: ${currentLayers}\\nColor: ${currentColor}`);\n}\n\nfunction sendOrder() {\n const summaryHTML = `\n

Cake Type

${document.getElementById('cakeType').options[document.getElementById('cakeType').selectedIndex].text}

Layers

${currentLayers}

Icing

Custom Color

Decorations

${activeDecorations.length ? activeDecorations.join(', ') : 'None'}

\n `;\n document.getElementById('summary-content').innerHTML = summaryHTML;\n document.getElementById('order-summary').classList.remove('hidden');\n document.getElementById('order-summary').scrollIntoView({ behavior: 'smooth' });\n}\n\nfunction viewAR() {\n document.getElementById('ar-view').classList.remove('hidden');\n document.getElementById('ar-view').scrollIntoView({ behavior: 'smooth' });\n}\n\nfunction closeAR() { document.getElementById('ar-view').classList.add('hidden'); }\nfunction fakeARPlace() { alert(\"🎂 Cake placed in AR successfully!\"); }\nfunction startExperience() { alert(\"📱 Camera / QR scanner would open here\"); }\nfunction customizeMode() { alert(\"Switching to customize mode...\"); }\n\n// Initialize\nwindow.onload = () => {\n populateColors();\n populateDecorations();\n createCakePreview(); // Initial cake\n};","// ==================== 3D CAKE CUSTOMIZER ====================\nlet scene, camera, renderer;\nlet cakeGroup;\nlet currentLayers = 3;\nlet currentColor = 0xffa1c4;\nlet currentSize = 1.0;\n\nconst flavors = {\n vanilla: 0xfff4e6,\n chocolate: 0x4a2c1f,\n redvelvet: 0xc93d4e,\n strawberry: 0xffb3c6\n};\n\nfunction initThree() {\n const canvas = document.getElementById('three-canvas');\n scene = new THREE.Scene();\n scene.background = new THREE.Color(0xf8f1eb);\n\n camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);\n camera.position.set(0, 1.5, 4);\n\n renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });\n renderer.setSize(canvas.clientWidth, canvas.clientHeight);\n renderer.shadowMap.enabled = true;\n\n // Lights\n const ambient = new THREE.AmbientLight(0xffffff, 0.7);\n scene.add(ambient);\n const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);\n dirLight.position.set(5, 10, 7);\n dirLight.castShadow = true;\n scene.add(dirLight);\n\n createCake();\n animate();\n}\n\nfunction createCake() {\n if (cakeGroup) scene.remove(cakeGroup);\n cakeGroup = new THREE.Group();\n\n const layerHeight = 0.6;\n const radius = 1.2;\n\n for (let i = 0; i < currentLayers; i++) {\n const geometry = new THREE.CylinderGeometry(radius, radius, layerHeight, 64);\n const material = new THREE.MeshPhongMaterial({ \n color: currentColor,\n shininess: 10,\n specular: 0x222222\n });\n const layer = new THREE.Mesh(geometry, material);\n layer.position.y = i * layerHeight - (currentLayers * layerHeight / 2) + layerHeight/2;\n layer.castShadow = true;\n layer.receiveShadow = true;\n cakeGroup.add(layer);\n }\n\n // Top frosting\n const topGeo = new THREE.CylinderGeometry(radius * 0.98, radius * 0.98, 0.15, 64);\n const topMat = new THREE.MeshPhongMaterial({ color: currentColor, shininess: 30 });\n const top = new THREE.Mesh(topGeo, topMat);\n top.position.y = currentLayers * layerHeight / 2 + 0.05;\n cakeGroup.add(top);\n\n // Plate\n const plate = new THREE.Mesh(\n new THREE.CylinderGeometry(radius * 1.2, radius * 1.3, 0.15, 64),\n new THREE.MeshPhongMaterial({ color: 0xdddddd })\n );\n plate.position.y = -currentLayers * layerHeight / 2 - 0.1;\n cakeGroup.add(plate);\n\n cakeGroup.scale.set(currentSize, currentSize, currentSize);\n scene.add(cakeGroup);\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n if (cakeGroup) cakeGroup.rotation.y += 0.008;\n renderer.render(scene, camera);\n}\n\nfunction updateCake() {\n currentColor = flavors[document.getElementById('cakeType').value] || 0xffa1c4;\n currentSize = parseFloat(document.getElementById('sizeSlider').value);\n createCake();\n}\n\nfunction setLayers(n) {\n currentLayers = n;\n document.querySelectorAll('.layer-btn').forEach(btn => {\n const active = parseInt(btn.dataset.layers) === n;\n btn.classList.toggle('bg-pink-100', active);\n btn.classList.toggle('border-pink-500', active);\n });\n createCake();\n}\n\n// Color Picker\nfunction populateColors() {\n const colors = [0xffffff, 0xffa1c4, 0xf5d07a, 0xa8d5ba, 0xc4a1f8, 0xffb3a1];\n const container = document.getElementById('color-picker');\n container.innerHTML = colors.map(hex => `\n

\n `).join('');\n}\n\nfunction selectIcingColor(hex) {\n currentColor = hex;\n createCake();\n}\n\n// Other functions\nfunction saveCake() {\n alert(`🎉 Design Saved!\\nFlavor: ${document.getElementById('cakeType').options[document.getElementById('cakeType').selectedIndex].text}\\nLayers: ${currentLayers}`);\n}\n\nfunction sendOrder() {\n alert(\"✅ Order Sent! Your 3D cake design has been submitted.\");\n}\n\nfunction viewAR() {\n alert(\"📱 AR Mode: In a real app this would launch WebXR or 8th Wall.\");\n}\n\nfunction startExperience() {\n alert(\"📱 QR Scanner would open here in production.\");\n}\n\n// Initialize\nwindow.onload = () => {\n populateColors();\n initThree();\n \n // Make canvas responsive\n window.addEventListener('resize', () => {\n if (renderer && camera) {\n const canvas = document.getElementById('three-canvas');\n camera.aspect = canvas.clientWidth / canvas.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(canvas.clientWidth, canvas.clientHeight);\n }\n });\n};","createdAt",["D",1780323733672],"branchVersion","branchId","66da4d78-5db7-11f1-910d-1607ee4eb77e","id","66d4ad6e-5db7-11f1-910d-1607ee4eb77e","basic-html-starter",["D",1780317771060],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Basic HTML starter template based on Glitch's starter","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/1e130d76-f5f9-42d2-df67-91517700ff00/square512?exp=1789559999&sig=07961db937eba6931a28890443b5f72ef5e12debba4e542c540c9f0cbb4eac80","ce853fdc-9996-40c7-996b-556d13e92e26","pinnedFileId","019e8335-557d-7234-9858-cc545684abf5","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","019e832e-4116-75ec-826a-81329287dac1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_110":106},"org",{"_102":101,"_103":104,"_105":106,"_18":56,"_107":108,"_109":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":91,"_92":93,"_94":50,"_95":96,"_97":98,"_99":45,"_100":101},"isOwned",27,"main","projectId","forkedBranchId","7a3b261a-4186-11f0-ae9b-76b3cceeab13","forkedBranchVersion",76,"forkedProjectPrivacy","forkedProjectId","7a3abcf2-4186-11f0-ae9b-76b3cceeab13","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","dynamikcodez","handle","displayName","Olukoya iyiola","avatar","https://avatars.githubusercontent.com/u/61966129?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":226,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":227,"_82":228,"_84":229,"_86":25},"tree",[201,202,203,204,205,206],"files",[201,202,203,204,205,206],"counts",{"_191":167,"_192":64,"_193":167,"_194":195,"_196":197},"contents",[143,144,145,146,147,148],"upstreamProject",{"_43":96,"_32":45,"_52":53,"_54":55,"_49":50,"_80":141},"upstreamBranch",{"_43":91,"_38":135,"_136":137,"_32":88,"_89":96,"_13":93,"_90":-5,"_92":-5,"_138":139,"_47":-5,"_86":25,"_49":50,"_100":140,"_65":98,"_99":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1749070628054],"updatedAt",["D",1779896149804],"lockfileKey","1779896350378-esm.town_v_templates_basic-html-starter@76-main","templates",{"_102":140,"_110":142},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789559999&sig=5c07b77d973a9a7831cc1779f4bd4ec152796753863d0aeae4088e1e0ae03921",{"_43":185,"_32":186,"_30":187,"_152":-5,"_41":42,"_40":64,"_154":60,"_38":188,"_13":167,"_33":20,"_35":189,"_24":25,"_158":-5,"_27":190},{"_43":179,"_32":180,"_30":181,"_152":-5,"_41":42,"_40":64,"_154":60,"_38":182,"_13":167,"_33":20,"_35":183,"_24":25,"_158":-5,"_27":184},{"_43":171,"_32":172,"_30":173,"_152":-5,"_41":42,"_40":174,"_154":25,"_38":175,"_13":176,"_33":20,"_35":177,"_24":25,"_158":-5,"_27":178},{"_43":164,"_32":165,"_30":58,"_152":-5,"_41":42,"_40":64,"_154":60,"_38":166,"_13":167,"_33":168,"_35":169,"_24":25,"_158":-5,"_27":170},{"_43":160,"_32":28,"_30":31,"_152":-5,"_41":42,"_40":14,"_154":25,"_38":161,"_13":162,"_33":34,"_35":37,"_24":25,"_158":-5,"_27":163},{"_43":149,"_32":150,"_30":151,"_152":-5,"_41":42,"_40":153,"_154":25,"_38":155,"_13":156,"_33":20,"_35":157,"_24":25,"_158":-5,"_27":159},"3849363c-5dc5-11f1-928c-1607ee4eb77e","style.css","019e8335-557d-7234-9858-d68377feacdf","parentId",12,"latest",["D",1780323705929],4,"#three-canvas {\n width: 100% !important;\n height: 320px !important;\n}\n\n.layer-btn {\n transition: all 0.2s;\n}\n\n.color-dot {\n width: 42px;\n height: 42px;\n border-radius: 9999px;\n cursor: pointer;\n border: 3px solid white;\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n}","label",[150],"48d3a2f8-5dc5-11f1-be4e-1607ee4eb77e",["D",1780323733672],5,[28],"66e24960-5db7-11f1-910d-1607ee4eb77e","main.tsx",["D",1780317771060],0,"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[165],"2c56db2c-5dc5-11f1-82e5-1607ee4eb77e","index.html","019e8335-557d-7234-9858-cab27fd881a6",11,["D",1780323685884],3,"\n\n\n \n \n CakeView • 3D AR Cake Config\n \n \n \n \n \n\n\n\n

🍰 CakeView - 3D Studio

\n\n

\n\n \n

CakeView

\n \n

\n\n \n

Featured Cakes

\n \n \n

\n\n \n

3D Cake Customizer

\n \n \n

\n\n

\n \n

\n Flavor\n \n

\n\n \n

\n Number of Layers\n

\n \n \n \n

\n\n \n

\n Icing Color\n

\n\n \n

\n Cake Size\n \n

\n\n \n

\n\n \n\n",[172],"66e23b0a-5db7-11f1-910d-1607ee4eb77e","favicon.svg","019e8335-557d-7234-9858-c4333f8f3cdf",["D",1780317771060],"",[180],"66e222a0-5db7-11f1-910d-1607ee4eb77e","README.md","019e8335-557d-7234-9858-c1f82fceb31c",["D",1780317771060],"# Welcome to Val Town\n\nVal Town is the simplest way to get code running in the cloud.\n\nThis is a basic HTML starter template.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| **[`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter)** *(you're here)* | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## Getting started\n\n1. Click `Remix` on this val to get a copy of it\n2. Click `main.tsx` to view the website\n3. Saves to any file will instantly deploy\n\n### ← main.tsx\n\nThis HTTP server hosts all of the other files in this val.\n\nTo view your site in a new tab, click on the `...` menu of `main.tsx` to copy\nyour live HTTP endpoint.\n\n### ← README.md\n\nThat's this file, where you can tell people what your cool website does and how\nyou built it.\n\n### ← index.html\n\nWhere you'll write the content of your website.\n\n### ← style.css\n\nCSS files add styling rules to your content.\n\n### ← script.js\n\nIf you're feeling fancy you can add interactivity to your site with JavaScript.\n\n### ← favicon.svg\n\nThe icon that shows up in the brower tab. Tip: AIs are pretty good at writing\nSVG favicons.\n\n---\n\nThis template was inspired by https://glitch.new/blank.\n",[186],"pulls","branches","forks","envVars",{"_198":167,"_200":167},"connections",{"_198":167,"_199":167},"count","unfilledCount","emptyCount",{"_43":185,"_32":186,"_30":187,"_152":-5,"_41":42,"_40":64,"_154":60,"_38":223,"_13":167,"_33":20,"_35":189,"_24":25,"_158":-5,"_208":224,"_27":225},{"_43":179,"_32":180,"_30":181,"_152":-5,"_41":42,"_40":64,"_154":60,"_38":220,"_13":167,"_33":20,"_35":183,"_24":25,"_158":-5,"_208":221,"_27":222},{"_43":171,"_32":172,"_30":173,"_152":-5,"_41":42,"_40":174,"_154":25,"_38":217,"_13":176,"_33":20,"_35":177,"_24":25,"_158":-5,"_208":218,"_27":219},{"_43":164,"_32":165,"_30":58,"_152":-5,"_41":42,"_40":64,"_154":60,"_38":214,"_13":167,"_33":168,"_35":169,"_24":25,"_158":-5,"_208":215,"_27":216},{"_43":160,"_32":28,"_30":31,"_152":-5,"_41":42,"_40":14,"_154":25,"_38":211,"_13":162,"_33":34,"_35":37,"_24":25,"_158":-5,"_208":212,"_27":213},{"_43":149,"_32":150,"_30":151,"_152":-5,"_41":42,"_40":153,"_154":25,"_38":207,"_13":156,"_33":20,"_35":157,"_24":25,"_158":-5,"_208":209,"_27":210},["D",1780323705929],"children",[],[150],["D",1780323733672],[],[28],["D",1780317771060],[],[165],["D",1780323685884],[],[172],["D",1780317771060],[],[180],["D",1780317771060],[],[186],["D",1780317771060],{"_102":101,"_110":106},{"_102":101,"_103":104,"_105":106,"_18":56,"_107":108,"_109":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":91,"_92":93,"_94":50,"_95":96,"_97":98,"_99":45,"_100":101},"ctx",{"_80":-5,"_132":263,"_264":265,"_266":267,"_268":25,"_269":25,"_270":25,"_271":60,"_272":-5,"_273":-7,"_274":-7,"_275":167,"_276":25,"_277":25,"_278":-5,"_279":25,"_280":25,"_281":25,"_282":-5},"ENV",{"_234":235,"_236":237,"_238":88,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262},"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"]

Diff · v13