ORIGINS: IN SPACE

Fund the next chapter

\n\n

Credits Raised

0 / 5,000

Next goal: Soundtrack Expansion — 5,000

\n\n

\n \n

\n\n \n

\n\n\n

Donate

\n \n

\n\n\n\n\n\nstyles.css: reset, full screen, canvas fixed, app flex column, etc. Mobile-first.\n\nmain.js imports modules and init.\n\nmodules:\n\njs/storage.js\nconst KEY = 'origins_fund';\nexport const load = () => JSON.parse(localStorage.getItem(KEY)) || null;\nexport const save = (state) => localStorage.setItem(KEY, JSON.stringify(state));\n\njs/state.js\nimport * as storage from './storage.js';\nconst defaultGoals = [\n { id: 'soundtrack', name: 'Soundtrack Expansion', target: 5000 },\n { id: 'level', name: 'New Level: Asteroid Belt', target: 10000 },\n { id: 'story', name: 'Story Campaign Act II', target: 25000 },\n { id: 'release', name: 'Full Game Release', target: 50000 },\n];\nconst initialState = { total: 0, donors: [], goals: defaultGoals };\nlet state = storage.load() || JSON.parse(JSON.stringify(initialState));\nexport const getState = () => state;\nexport const addDonation = (amount, name) => {\n const donation = { amount: Math.max(0, Math.round(Number(amount) || 0)), name: (name || '').trim(), date: Date.now() };\n state.total += donation.amount;\n if (donation.name && donation.amount >= 1000) {\n state.donors.push(donation);\n } else if (donation.name && donation.amount < 1000) {\n // maybe still store as supporter but only 1000+ in credits; keep all donors in state.donors? Let's push all but filter for credits.\n }\n state.donors.push(donation);\n storage.save(state);\n return donation;\n};\nexport const getCreditDonors = () => state.donors.filter(d => d.amount >= 1000).sort((a,b)=>b.amount-a.amount);\nexport const reset = () => { state = JSON.parse(JSON.stringify(initialState)); storage.save(state); };\nexport const nextGoal = () => state.goals.find(g => g.target > state.total) || state.goals[state.goals.length-1];\nexport const goalProgress = () => { const ng = nextGoal(); return Math.min(1, state.total / ng.target); };\n\nWe need to be careful: if all donors pushed, credit donors filter. But to avoid duplication if amount>=1000 it's added once. That's fine.\n\nMaybe also store donor list all donors; separate credit donors.\n\njs/ui.js\nRenders. Handles modals. Maybe exports render().\n\njs/donate.js\nBuilds donate form.\n\njs/starfield.js\nCanvas animation.\n\nLet's keep modules concise.\n\nPotential issue: If storing all donors, when donate 1000+ name included in credits. Also maybe allow anonymous. The prompt says if you donate 1000 you will be mentioned. We'll collect name for any donation and mention if >=1000.\n\nNeed custom donation input. Validate numeric.\n\nMaybe include confetti when goal reached. Could use a lightweight confetti implemented via canvas. Or use canvas particles. Let's implement a simple confetti in js/effects.js using canvas overlay. Or use existing library canvas-confetti from esm.sh. Since guidelines say use esm.sh if using libs. We can import canvas-confetti from esm.sh. But for simple effect, custom is fine. Let's implement simple confetti in effects.js using existing starfield canvas? Simpler to add a `celebrate()` function that spawns particles.\n\nBut to keep code modular and not too complex, custom confetti.\n\nNeed mobile bottom sheet: fixed panel at bottom, transitions. Use class open.\n\nLet's produce code.\n\nNeed ensure no vertical scroll. Main content fits. Modal body scroll if list long (allowed? user said no scrolling unless explicitly requested. But for long credits list, maybe use modal with scroll. On mobile, a scrollable bottom sheet is typical. The prompt says no vertical scrolling unless requested. Hmm. Better use compact list with max-height and scroll only if overflow, but design so default few items. Since localStorage, credits could be many, but as demo it's okay. We can mention scroll inside modal. It's acceptable.\n\nWe can also add \"Reset Fund\" hidden via triple-click on header? Maybe not.\n\nLet's build.\n\nNeed include `type=\"module\"` and relative paths in import. No import map needed.\n\nLet's also add `esm.sh`? Not necessary. But guidelines say \"Use JS libraries from the esm.sh CDN with an import map, as your code will be run directly in the browser, with no bundler.\" It says use if we use libraries. We're not using external libs, so no import map. Fine.\n\nLet's write the files now.\n\nPotential challenge: On mobile iframe, one screen height. Use `height: 100dvh` and `overflow:hidden`. Main uses flex column and actions fixed bottom. Goals preview can be hidden if too tall? We can show current/next goal only on main, with button to view all goals. Actually we already show next goal text. Could show a small goal chips list of 2-3 items. Fine.\n\nDesign:\n\n.app { position: relative; z-index:1; height:100dvh; display:flex; flex-direction:column; padding:1rem; box-sizing:border-box; }\n\nheader { text-align:center; margin-top:... }\n.fund-card { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; }\n.actions { margin-top:auto; display:flex; gap; }\n\nButtons: large, min 44px.\n\nModal: position fixed, z-index 10; panel at bottom, max-height 70vh; overflow auto.\n\nLet's add starfield canvas.\n\nStarfield: create canvas covering window, draw moving stars. Add resize listener.\n\nInteractions:\n- Donate button opens sheet with donate UI.\n- Goals button opens goals list.\n- Credits button opens credits list.\n\nDonate UI:\n- Text: Choose an amount in credits.\n- Buttons: 500, 1000, 2500, 5000.\n- Custom input with donate custom.\n- Name input (required for credit mention if >=1000, optional otherwise). Show helper: \"Donate 1,000+ to be named in the credits.\"\n- When clicking preset, open confirmation? Could directly donate. Better show name input and confirm. Simpler: preset buttons set custom input amount and then user clicks \"Launch Donation\". Or buttons donate immediately after name? Let's design: name input always visible; preset buttons set amount and trigger donation; custom has input + donate button. Validate name for >=1000.\n\nActually simpler: sheet has name input, amount selection, big donate button. Selecting preset highlights amount. Custom input alternative. This avoids extra steps.\n\nDonate form:\n- Name input\n- Amount chips (500, 1000, 2500, 5000, custom)\n- Donate button\n- Helper text.\n\nWhen donate success, show success message in sheet and update UI. If amount >=1000 and no name, show error. If custom invalid, error.\n\nCelebrate if donation unlocks a new goal? Check previous total before donation and after; if crosses any goal target, trigger confetti. Or if any goal newly reached. Implement in state.\n\nNeed state.goals might not store unlocked flag, just compare total. To detect newly unlocked, before total and after. In addDonation, compute newlyUnlocked = goals.filter(g => previousTotal < g.target && state.total >= g.target). Return that. UI triggers celebrate.\n\nImplement state.js to export `addDonation` returns {donation, unlocked:[]}.\n\nNeed credits modal: list donors with amount >=1000. If none, show placeholder.\n\nGoals modal: list all goals with target, status locked/unlocked, progress to each maybe.\n\nLet's craft files.\n\nPotential name collision: If we export `addDonation` and also `state` object. Let's keep all in state.js.\n\nPotential issue with localStorage parse returning defaultGoals with no status. Fine.\n\nNow compose final response with files. Ensure code is clean and valid.\n\nLet's produce.\n\nAlso maybe add a README? User didn't ask but could be helpful. We have multiple files; include index.html, styles.css, and js folder files. We can provide 6 files. Need output each as markdown code block with filename.\n\nLet's create:\n\nindex.html\nstyles.css\njs/storage.js\njs/state.js\njs/ui.js\njs/starfield.js\njs/main.js\n\nMaybe js/effects.js for confetti.\n\nLet's decide structure. Keep modules:\n\n- js/storage.js\n- js/state.js\n- js/effects.js\n- js/ui.js (render, modals)\n- js/donate.js (donation sheet builder)\n- js/starfield.js\n- js/main.js\n\nMaybe too many but fine. Could combine donate into ui.js. Let's combine UI and donate to reduce files but still multiple. Use:\n\njs/storage.js\njs/state.js\njs/ui.js (renders + sheet builders)\njs/effects.js\njs/starfield.js\njs/main.js\n\nThat's good.\n\nNow write code.\n\njs/state.js:\n\nconst STORAGE_KEY = 'origins_in_space_fund';\nconst DEFAULT_GOALS = [...];\nlet state = load();\n\nfunction load() { ... }\n\nexport const getState = () => state;\nexport const getTotal = () => state.total;\nexport const getDonors = () => [...state.donors].sort((a,b)=>b.amount-a.amount);\nexport const getCreditDonors = () => getDonors().filter(d => d.amount >= 1000);\nexport const getGoals = () => state.goals.map(g => ({...g, unlocked: state.total >= g.target}));\nexport const getNextGoal = () => state.goals.find(g => g.target > state.total) || state.goals[state.goals.length - 1];\nexport const getProgressToNext = () => { const ng=getNextGoal(); return Math.min(1, state.total/ng.target); };\n\nexport function addDonation(amount, name) {\n const n = Math.max(0, Math.round(Number(amount) || 0));\n if (!n) return null;\n const prev = state.total;\n const donation = { amount: n, name: (name||'').trim(), date: Date.now() };\n state.total += n;\n state.donors.push(donation);\n const unlocked = state.goals.filter(g => prev < g.target && state.total >= g.target);\n save();\n return { donation, unlocked };\n}\n\nexport function resetFund() { state = defaultState(); save(); }\n\nfunction defaultState() { return { total:0, donors:[], goals: DEFAULT_GOALS.map(g=>({...g})) }; }\n\nfunction save() { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); }\nfunction load() { try { const s=JSON.parse(localStorage.getItem(STORAGE_KEY)); if (s && typeof s.total==='number') return s; } catch(e){} return defaultState(); }\n\nNeed note: getDonors returns all donors sorted by amount desc; creditDonors filter.\n\njs/ui.js:\n\nimport * as state from './state.js';\nimport { celebrate } from './effects.js';\nimport { initStarfield } from './starfield.js';\n\nconst els = { total, progressBar, progressText, nextGoal, goalsPreview, sheet, sheetBackdrop, sheetPanel, sheetTitle, sheetBody, sheetClose, btnDonate, btnGoals, btnCredits };\n\nfunction $(sel){return document.querySelector(sel);}\n\nexport function init() {\n cacheEls();\n render();\n bindGlobal();\n initStarfield();\n}\n\nfunction cacheEls() { ... }\n\nfunction bindGlobal() {\n els.btnDonate.onclick = openDonate;\n els.btnGoals.onclick = openGoals;\n els.btnCredits.onclick = openCredits;\n els.sheetClose.onclick = closeSheet;\n els.sheetBackdrop.onclick = closeSheet;\n document.addEventListener('keydown', e => { if(e.key==='Escape') closeSheet(); });\n}\n\nfunction openSheet(title, bodyBuilder) { ... }\n\nfunction closeSheet() { ... }\n\nexport function render() {\n const total = state.getTotal();\n const next = state.getNextGoal();\n const progress = state.getProgressToNext();\n els.total.textContent = formatCredits(total);\n els.progressBar.style.width = `${progress*100}%`;\n els.progressText.textContent = `${formatCredits(total)} / ${formatCredits(next.target)}`;\n els.nextGoal.textContent = `Next goal: ${next.name} — ${formatCredits(next.target)}`;\n renderGoalsPreview();\n}\n\nfunction renderGoalsPreview() {\n const goals = state.getGoals().slice(0,3);\n els.goalsPreview.innerHTML = goals.map(g => `

${g.name}${formatCredits(g.target)}

`).join('');\n}\n\nfunction openDonate() {\n openSheet('Donate Credits', () => buildDonateBody());\n}\n\nlet selectedAmount = 500;\n\nfunction buildDonateBody() {\n selectedAmount = 500;\n const container = document.createElement('div');\n container.className = 'donate-body';\n container.innerHTML = `\n Your name (required for 1,000+ credit donations)\n \n Amount\n

\n ${[500,1000,2500,5000].map(a=>``).join('')}\n

\n \n

Donate 1,000 credits or more to appear in the game credits.

\n `;\n const chips = container.querySelectorAll('.chip');\n chips.forEach(chip => {\n chip.onclick = () => {\n selectedAmount = Number(chip.dataset.amount);\n container.querySelector('#customAmount').value = '';\n chips.forEach(c => c.classList.toggle('active', c===chip));\n };\n });\n const customInput = container.querySelector('#customAmount');\n customInput.oninput = () => { chips.forEach(c => c.classList.remove('active')); selectedAmount = 0; };\n container.querySelector('.donate-submit').onclick = () => handleDonate(container);\n return container;\n}\n\nfunction handleDonate(container) {\n const nameInput = container.querySelector('#donorName');\n const customInput = container.querySelector('#customAmount');\n const msg = container.querySelector('#donateMessage');\n const name = nameInput.value.trim();\n let amount = selectedAmount;\n if (customInput.value) amount = Math.round(Number(customInput.value));\n if (!amount || amount <= 0) { msg.textContent = 'Enter a valid amount.'; return; }\n if (amount >= 1000 && !name) { msg.textContent = 'Please enter your name to be mentioned in the credits.'; return; }\n const result = state.addDonation(amount, name);\n if (!result) return;\n render();\n if (result.unlocked.length) celebrate();\n const mention = result.donation.amount >= 1000 ? ` You'll be listed in the credits as ${escapeHtml(name)}.` : '';\n msg.innerHTML = `Launched ${formatCredits(amount)} credits!${mention}`;\n if (result.unlocked.length) msg.innerHTML += `
Unlocked: ${result.unlocked.map(g=>g.name).join(', ')}!`;\n // clear inputs\n nameInput.value = '';\n customInput.value = '';\n selectedAmount = 500;\n container.querySelectorAll('.chip').forEach(c=>c.classList.toggle('active', Number(c.dataset.amount)===selectedAmount));\n}\n\nfunction openGoals() {\n openSheet('Funding Goals', () => {\n const div = document.createElement('div');\n div.className = 'goals-list';\n div.innerHTML = state.getGoals().map(g => `\n

\n ${g.name}\n ${formatCredits(g.target)}\n

${g.unlocked?'Unlocked':'Locked'}

\n `).join('');\n return div;\n });\n}\n\nfunction openCredits() {\n openSheet('Credits', () => {\n const donors = state.getCreditDonors();\n const div = document.createElement('div');\n div.className = 'credits-list';\n if (!donors.length) {\n div.innerHTML = `

No credit donors yet. Be the first to donate 1,000+ credits and see your name here.

`;\n return div;\n }\n div.innerHTML = `

Thank you to our stellar supporters

` + donors.map((d,i)=>`\n

\n #${i+1}\n ${escapeHtml(d.name)}\n ${formatCredits(d.amount)}\n

\n `).join('');\n return div;\n });\n}\n\nfunction formatCredits(n) { return n.toLocaleString() + ' CR'; }\n\nfunction escapeHtml(str) { ... }\n\nfunction openSheet(title, builder) { ... }\n\nNeed openSheet manage content. Use function to set title, clear body, append builder(), add class open. Use requestAnimationFrame for transition.\n\nPotential issue: builder returns HTMLElement. Need import to main? Let's expose render. In main.js:\n\nimport { init } from './js/ui.js';\ninit();\n\nStarfield:\n\nexport function initStarfield() {\n const canvas = document.getElementById('starfield');\n const ctx = canvas.getContext('2d');\n let stars = [];\n let width, height;\n function resize() { width=canvas.width=window.innerWidth; height=canvas.height=window.innerHeight; stars=Array.from({length:Math.floor((width*height)/4000)},()=>createStar(width,height)); }\n function createStar(w,h){ return {x:Math.random()*w,y:Math.random()*h,z:Math.random()*2+0.5}; }\n function draw() {\n ctx.fillStyle='#05070a'; ctx.fillRect(0,0,width,height);\n ctx.fillStyle='#ffffff';\n stars.forEach(s=>{ s.y += s.z*0.3; if(s.y>h){s.y=0;s.x=Math.random()*w;} const size=s.z*0.6; ctx.globalAlpha=Math.min(1,s.z/2); ctx.beginPath(); ctx.arc(s.x,s.y,size,0,Math.PI*2); ctx.fill(); });\n ctx.globalAlpha=1;\n requestAnimationFrame(draw);\n }\n resize(); window.addEventListener('resize',resize); draw();\n}\n\nEffects confetti:\n\nexport function celebrate() {\n const canvas = document.createElement('canvas');\n canvas.id='confetti'; canvas.style.position='fixed'; canvas.style.inset='0'; canvas.style.pointerEvents='none'; canvas.style.zIndex='100';\n document.body.appendChild(canvas);\n const ctx = canvas.getContext('2d'); let w,h; const particles=[];\n function resize(){w=canvas.width=window.innerWidth;h=canvas.height=window.innerHeight;}\n resize(); window.addEventListener('resize',resize);\n const colors=['#00f0ff','#ff0055','#ffe600','#00ff99','#ffffff'];\n for(let i=0;i<120;i++){ particles.push({x:w/2,y:h/2,vx:(Math.random()-0.5)*12,vy:(Math.random()-1.5)*12,g:0.25,color:colors[Math.floor(Math.random()*colors.length)],life:100+Math.random()*60,size:Math.random()*4+2}); }\n function draw(){\n ctx.clearRect(0,0,w,h);\n let alive=0;\n particles.forEach(p=>{ p.vy+=p.g; p.x+=p.vx; p.y+=p.vy; p.life--; if(p.life>0){ alive++; ctx.fillStyle=p.color; ctx.globalAlpha=p.life/160; ctx.beginPath(); ctx.arc(p.x,p.y,p.size,0,Math.PI*2); ctx.fill(); } });\n ctx.globalAlpha=1;\n if(alive>0) requestAnimationFrame(draw); else canvas.remove();\n }\n draw();\n}\n\nCSS: need classes.\n\nAlso, make sure bottom sheet overlay covers app. Use z-index.\n\nPotential issue: starfield canvas z-index -1. App z-index 1. Sheet z-index 10.\n\nLet's design CSS.\n\n:root {\n --bg: #02040a;\n --card-bg: rgba(10,18,35,0.85);\n --accent: #00e1ff;\n --accent2: #ff2a6d;\n --text: #e6f7ff;\n --muted: #8aa4c0;\n}\n* { margin:0; padding:0; box-sizing:border-box; }\nhtml, body { height:100%; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow:hidden; }\n#starfield { position:fixed; inset:0; z-index:0; }\n.app { position:relative; z-index:1; height:100dvh; display:flex; flex-direction:column; padding:1rem; }\nheader { text-align:center; margin-top:0.5rem; }\nh1 { font-size:clamp(1.6rem,6vw,2.6rem); letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); text-shadow:0 0 12px rgba(0,225,255,0.5); }\n.tagline { color:var(--muted); font-size:0.95rem; margin-top:0.25rem; }\n\n.fund-card { margin-top:auto; margin-bottom:auto; background:var(--card-bg); border:1px solid rgba(0,225,255,0.2); border-radius:1.25rem; padding:1.5rem; text-align:center; backdrop-filter:blur(8px); box-shadow:0 0 30px rgba(0,225,255,0.08); }\n.label { color:var(--muted); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; }\n.total { font-size:clamp(3rem,12vw,5rem); font-weight:800; margin:0.25rem 0; color:#fff; text-shadow:0 0 20px rgba(0,225,255,0.4); }\n.progress-wrap { position:relative; height:1.25rem; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; margin:0.75rem 0; }\n.progress-bar { position:absolute; left:0; top:0; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2)); box-shadow:0 0 10px var(--accent); transition:width .6s cubic-bezier(.22,1,.36,1); }\n.progress-text { position:relative; z-index:1; font-size:0.7rem; line-height:1.25rem; color:rgba(255,255,255,0.9); font-weight:700; }\n.next-goal { color:var(--muted); font-size:0.85rem; }\n\n.quick-goals { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; margin:0.75rem 0; }\n.goal-chip { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:999px; padding:0.4rem 0.75rem; font-size:0.75rem; display:flex; gap:0.5rem; color:var(--muted); }\n.goal-chip.unlocked { border-color:var(--accent); color:var(--accent); background:rgba(0,225,255,0.08); }\n\n.actions { margin-top:auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.75rem; padding-bottom:0.5rem; }\n.btn { appearance:none; border:none; border-radius:0.75rem; padding:0.85rem 0.5rem; font-size:0.95rem; font-weight:700; cursor:pointer; transition:transform .1s, box-shadow .2s; min-height:48px; }\n.btn.primary { background:linear-gradient(135deg,var(--accent),#0099cc); color:#001018; box-shadow:0 0 18px rgba(0,225,255,0.25); }\n.btn.secondary { background:rgba(255,255,255,0.08); color:var(--text); border:1px solid rgba(255,255,255,0.12); }\n.btn:active { transform:scale(0.97); }\n\n.sheet { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:0; transition:opacity .25s; }\n.sheet.open { pointer-events:auto; opacity:1; }\n.sheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); }\n.sheet-panel { position:absolute; left:0; right:0; bottom:0; max-height:80vh; background:linear-gradient(180deg,#0b1425,#02040a); border-top:1px solid rgba(0,225,255,0.25); border-radius:1.25rem 1.25rem 0 0; padding:1rem; transform:translateY(100%); transition:transform .3s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; }\n.sheet.open .sheet-panel { transform:translateY(0); }\n.sheet-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }\n.sheet-header h2 { font-size:1.25rem; color:var(--accent); }\n.close { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); color:var(--text); border:1px solid rgba(255,255,255,0.12); font-size:1.5rem; line-height:1; cursor:pointer; }\n.sheet-body { overflow-y:auto; padding-bottom:1rem; }\n\n.donate-body, .goals-list, .credits-list { display:flex; flex-direction:column; gap:0.75rem; }\n.input-label { font-size:0.85rem; color:var(--muted); }\n.input-label .hint { color:var(--accent); }\n.text-input { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:0.75rem; padding:0.75rem; color:var(--text); font-size:1rem; outline:none; }\n.text-input:focus { border-color:var(--accent); }\n.amount-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; }\n.chip { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:0.75rem; padding:0.7rem 0.25rem; color:var(--text); font-weight:700; cursor:pointer; min-height:48px; }\n.chip.active { border-color:var(--accent); background:rgba(0,225,255,0.12); color:var(--accent); }\n.custom-chip { grid-column:span 1; }\n.custom-chip input { height:100%; text-align:center; }\n.donate-submit { margin-top:0.25rem; }\n.donate-note { color:var(--muted); font-size:0.8rem; text-align:center; }\n.donate-message { text-align:center; font-size:0.9rem; min-height:1.5rem; }\n.success { color:var(--accent); }\n.unlock { color:var(--accent2); }\n\n.goal-row, .credit-row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:0.75rem; padding:0.75rem; }\n.goal-info { display:flex; flex-direction:column; }\n.goal-info strong { color:#fff; }\n.goal-info span { color:var(--muted); font-size:0.8rem; }\n.goal-status { font-size:0.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; }\n.goal-row.unlocked { border-color:var(--accent); background:rgba(0,225,255,0.06); }\n.goal-row.unlocked .goal-status { color:var(--accent); }\n.credits-subtitle { color:var(--muted); text-align:center; font-size:0.85rem; }\n.credit-name { flex:1; padding:0 0.5rem; font-weight:700; }\n.credit-amount { color:var(--accent); font-weight:700; }\n.rank { color:var(--muted); font-size:0.8rem; width:1.5rem; }\n.empty { color:var(--muted); text-align:center; padding:1rem; }\n\n@media (min-width: 600px) { .app { max-width:480px; margin:0 auto; } }\n\nNeed maybe hide number input spinners. Add CSS:\ninput[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }\n\nOne screen height: header, fund-card, quick goals, actions. Should fit. On small screens, reduce padding. Use `clamp` for total.\n\nPotential bug: `getDonors` sorts all donors by amount desc, but credit donors also sorted. Good.\n\nPotential bug: In state.js, `getGoals` maps and adds unlocked; but state.goals doesn't have `unlocked` property. Fine.\n\nPotential bug: `DEFAULT_GOALS` is used in defaultState; need to avoid mutation by mapping. We do map.\n\nPotential bug: In ui.js `import { initStarfield } from './starfield.js';` call in init. Good.\n\nPotential bug: In donate body, selecting preset sets `selectedAmount` and clears custom. But if user types custom after selecting chip, we set selectedAmount=0, fine. On donate, if customInput has value use that; else selectedAmount.\n\nPotential bug: If custom input value 0, amount=0 triggers error.\n\nPotential bug: If name input is empty and amount <1000, donation is anonymous; all donors still stored. Credit donors filter excludes. Good.\n\nPotential bug: `escapeHtml` function.\n\nPotential bug: Sheet open/close. Use `requestAnimationFrame` to add open class. Let's implement:\n\nfunction openSheet(title, builder) {\n els.sheetTitle.textContent = title;\n els.sheetBody.innerHTML = '';\n const content = builder();\n els.sheetBody.appendChild(content);\n els.sheet.classList.add('open');\n}\n\nfunction closeSheet() {\n els.sheet.classList.remove('open');\n setTimeout(() => { els.sheetBody.innerHTML = ''; }, 300);\n}\n\nMaybe ensure no leftover content. Good.\n\nPotential bug: When re-opening donate after success, selectedAmount should default 500. We set in build.\n\nPotential issue: `custom-chip` grid-column span 1 but amount-chips 4 columns; with 4 chips + custom = 5 items, grid creates rows. Fine.\n\nPotential issue: Buttons text in actions grid: \"Donate Credits\" might wrap. Use `white-space: nowrap` maybe. Or button font-size small. Let's set `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;` or simply \"Donate\" / \"Goals\" / \"Credits\". Use \"Donate\" maybe. But prompt says donate 500 credits. Use \"Donate\" to fit.\n\nPotential issue: On mobile, bottom sheet panel has max-height 80vh and overflow-y on body; okay.\n\nNeed also perhaps include a reset button? We can include a small hidden reset in footer? Not necessary.\n\nNeed deliver files. Let's write them.\n\nAlso include a small README.md? User asked multiple files, index.html must be one. We can include README.md optional. But maybe not necessary. We can provide six files: index.html, styles.css, js/storage.js, js/state.js, js/ui.js, js/effects.js, js/starfield.js, js/main.js. That's multiple.\n\nNeed ensure file paths in imports: `./state.js` relative to main? If main.js in root and js files in /js, imports in ui.js should be `./state.js` only if same folder. We'll place all JS in /js folder. main.js imports `./js/ui.js`. Good.\n\nNow output. We'll also include a short intro text. Use no base64 images. Good.\n\nLet's check code validity.\n\nui.js:\n- `cacheEls()` selects elements.\n- Need ensure `initStarfield` is imported and called. Good.\n- `formatCredits` returns string with CR.\n- `openSheet` builder returns HTMLElement.\n- `buildDonateBody` returns container. The donation message id within container unique.\n- `handleDonate` uses `state.addDonation`. If result null (amount 0) handle not called because validated. But fine.\n- After success, the sheet remains open with message. User can close.\n- If unlocked goals, celebrate triggers confetti. Good.\n\nPotential issue: `getGoals()` maps goals, returning new objects. In donate success message, result.unlocked uses state.goals objects; fine.\n\nPotential issue: `escapeHtml` defined.\n\nPotential issue: `state.getCreditDonors()` returns sorted by amount desc, but ranking #1 etc. Good.\n\nPotential issue: `initStarfield` draws stars and may conflict with confetti canvas overlay. Confetti is separate canvas on top, starfield behind. Good.\n\nPotential issue: `canvas-confetti` not used; no import map. Fine.\n\nPotential issue: localStorage not available in some contexts; use try/catch.\n\nStorage module: Could use try/catch.\n\njs/storage.js:\nconst KEY='origins_in_space_fund';\nexport function load(){\n try { const raw=localStorage.getItem(KEY); return raw?JSON.parse(raw):null; } catch(e){ return null; }\n}\nexport function save(state){\n try { localStorage.setItem(KEY, JSON.stringify(state)); } catch(e){}\n}\n\nstate.js uses storage.\n\nNow main.js:\nimport { init } from './js/ui.js';\ninit();\n\nSince ui.js imports state, effects, starfield.\n\nNeed ensure file path `./js/ui.js` from index.html root. Yes.\n\nNow final output. I'll include a brief explanation and then files.\n\nDouble-check CSS responsive: actions grid 3 columns, button text maybe \"Donate\", \"Goals\", \"Credits\". Good.\n\nLet's also add an `.sr-only`? Not needed.\n\nPotential issue: `progress-text` inside progress bar wrapper; line-height 1.25rem; center. Good.\n\nPotential issue: `goal-chip` unlocked style.\n\nPotential issue: `.custom-chip input` text-align center; placeholder \"Custom\". Good.\n\nPotential issue: If user selects custom and types, chips inactive. If then selects chip, active and custom cleared. Good.\n\nPotential issue: Mobile viewport no scroll; sheet can scroll if content tall. The main app no scroll. The sheet body scrolls; acceptable.\n\nPotential issue: Starfield canvas draws with `ctx.globalAlpha` for each star; set back to 1.\n\nPotential issue: `window.innerWidth` etc.\n\nPotential issue: `document.body.appendChild(canvas)` for confetti; when confetti finishes, remove. Good.\n\nLet's produce final.\n\nOne more thought: User said \"where you can donate 500 credits to me, to fund the game. with goals, and everything, and if you donate 1000 you will be metioned in the credits.\" Maybe they want a fun UI. We could include default total 0. Could pre-seed with some demo? Maybe no, localStorage starts empty. But maybe add an initial donation? Not necessary. It could be confusing if first open shows 0. That's okay.\n\nMaybe include a \"Launch\" animation. Good.\n\nWe can also add a small reset via triple tap on header for testing. But might be hidden. Not needed.\n\nNow final output with all files.\n\nBelow is a complete, self-contained **ORIGINS: IN SPACE** credit fund raiser. It uses local browser storage so the fund total, goals, and credit donors persist between visits.\n\n### Files included\n- `index.html`\n- `styles.css`\n- `js/storage.js`\n- `js/state.js`\n- `js/effects.js`\n- `js/starfield.js`\n- `js/ui.js`\n- `js/main.js`\n\n---\n\nindex.html\n```index.html\n```\n\n---\n\nstyles.css\n```styles.css\n```\n\n---\n\njs/storage.js\n```js/storage.js\n```\n\n---\n\njs/state.js\n```js/state.js\n```\n\n---\n\njs/effects.js\n```js/effects.js\n```\n\n---\n\njs/starfield.js\n```js/starfield.js\n```\n\n---\n\njs/ui.js\n```js/ui.js\n```\n\n---\n\njs/main.js\n```js/main.js\n```\n\n---\n\nOpen `index.html` in any modern browser. You can donate preset amounts (500, 1,000, 2,500, 5,000) or a custom amount, watch the fund grow toward unlockable goals, and see any donation of **1,000 credits or more** added to the live credits list.","cursor","eyJpZCI6Inowamp4Y3dmNXFzOGU4eGF4Z2NqIn0","token","included",[],"routes/browser/layout","actionData","errors"]

ORIGINS: IN SPACE — Credit Fund Raiser