{"id":"gen-1785508167-zHAcUB6qGGqzyXF0avyE","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"# QuestLog — Gamified To-Do App ⚔️\n\nHere's a complete RPG-style to-do app with XP, levels, gold, streaks, combos, achievements, confetti, and sound effects. Progress is saved automatically in the browser.\n\n```html\n\n\n\n\n\nQuestLog — Gamified To-Do\n\n\n\n\n\n

\n\n

⚔️ QUESTLOG

Turn your to-do list into an epic adventure

\n\n

🐣

\n Novice\n Level 1\n

\n 0 / 100 XP\n

💰 0

🔥 0

⚡ —

🏅 0

\n \n \n

\n\n

\n \n

\n \n \n \n \n

\n \n

\n\n \n\n

\n\n

💡 Chain completions within 5 minutes for ⚡ combo bonus XP. Bigger quests = bigger rewards!

\n\n

\n\n\n\n\n\n\n```\n\n## 🎮 Gamification Features\n\n| System | How it works |\n|---|---|\n| **XP & Levels** | Quests grant XP by rarity (Common → Legendary). Level curve increases each level |\n| **Ranks & Avatars** | Your avatar evolves (🐣 → 🛡️ → ⚔️ → 🏆 → 🐉 → 👑) with titles like *Squire* and *Champion* |\n| **Gold** | Earn gold per quest + level-up bonuses + random ✨ lucky loot drops |\n| **Combos** | Complete quests within 5 min of each other for stacking ⚡ bonus XP |\n| **Streaks** | Complete at least one quest daily to build a 🔥 streak |\n| **12 Achievements** | From *First Blood* to *Dragon Slayer*, with toast notifications |\n| **Juice** | Confetti, floating XP text, screen shake on Legendary quests, retro sound effects (mutable) |\n\nAll progress persists via `localStorage`, so your hero's journey survives page refreshes. Try completing the seeded starter quests to see a level-up in action! 🚀","refusal":null,"role":"assistant","annotations":null,"audio":null,"function_call":null,"tool_calls":null,"reasoning":"The user wants a to-do app with a gamification system. They want the full HTML in one code block since it will be rendered in an iframe. Let me create a comprehensive, polished gamified to-do app.\n\nFeatures I should include:\n1. **Core To-Do functionality**: Add, complete, delete, edit tasks\n2. **Gamification elements**:\n - XP (Experience Points) system\n - Levels with progress bar\n - Streaks (daily completion streaks)\n - Achievements/Badges\n - Task difficulty (easy/medium/hard = different XP)\n - Combo system for completing multiple tasks\n - Maybe a character/avatar that evolves\n - Sound-like visual effects (confetti, particles)\n - Stats dashboard\n - Coins/currency system\n - Quest categories\n\nLet me design this:\n- **Theme**: RPG-style quest theme (\"Quest Log\" instead of to-do list)\n- **Tasks = Quests** with difficulty tiers (Common, Rare, Epic, Legendary)\n- **XP system**: Common = 10 XP, Rare = 25 XP, Epic = 50 XP, Legendary = 100 XP\n- **Levels**: XP curve like level * 100 or exponential\n- **Streaks**: Track consecutive days of completing tasks\n- **Achievements**: First quest, 10 quests, level 5, 7-day streak, etc.\n- **Coins**: Earn coins to... maybe just track them, or a simple shop for themes\n- **Combo multiplier**: Complete tasks quickly for bonus\n- **Visual effects**: Level-up animation, confetti, floating XP text\n- **LocalStorage persistence**\n\nDesign:\n- Dark fantasy RPG aesthetic with purple/gold colors\n- Progress bars with glow\n- Cards for quests with rarity colors\n- Animated level-up modal\n- Achievement toast notifications\n- Character avatar that changes with level\n\nLet me write the code carefully:\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\nLet me think about the details:\n\n**State:**\n```js\nstate = {\n xp: 0,\n level: 1,\n coins: 0,\n streak: 0,\n lastCompletedDate: null,\n tasks: [], // {id, title, difficulty, completed, createdAt, completedAt}\n achievements: [], // unlocked achievement ids\n totalCompleted: 0,\n combo: 0,\n lastComboTime: null\n}\n```\n\n**Level curve:** XP needed for next level = level * 100 (cumulative). So level 1→2 needs 100, 2→3 needs 200 more, etc.\n\n**Difficulties:**\n- Common (easy): 10 XP, 5 coins — gray/green\n- Rare (medium): 25 XP, 15 coins — blue\n- Epic (hard): 50 XP, 30 coins — purple\n- Legendary: 100 XP, 75 coins — gold\n\n**Combo system:** Complete a task within 5 minutes of the previous one → combo +1, bonus XP = combo * 5.\n\n**Achievements:**\n- \"First Steps\" — complete 1 quest\n- \"Getting Started\" — complete 10 quests\n- \"Quest Master\" — complete 50 quests\n- \"Century Club\" — complete 100 quests\n- \"Level 5\" / \"Level 10\" / \"Level 20\"\n- \"On Fire\" — 3-day streak\n- \"Unstoppable\" — 7-day streak\n- \"Legendary Hunter\" — complete a legendary quest\n- \"Combo King\" — 5x combo\n- \"Early Bird\" / maybe skip\n- \"Rich\" — 500 coins\n\n**Avatar:** Emoji that evolves with level: 🐣 → 🗡️ → ⚔️ → 🛡️ → 🏆 → 👑\n\n**Streak logic:** On completing a task, check date. If last completion was yesterday → streak+1. If today → keep streak. If older → reset to 1.\n\n**Visual effects:**\n- Floating \"+XP\" text when completing\n- Confetti on level up (canvas-based)\n- Achievement toast sliding in\n- XP bar animation\n- Screen shake maybe on legendary completion\n\nLet me write this carefully to be complete and bug-free.\n\nLayout:\n```\n┌─────────────────────────────────┐\n│ Header: Avatar | Name/Level │\n│ XP Bar │\n│ Coins | Streak | Completed │\n├─────────────────────────────────┤\n│ Add Quest Form │\n├─────────────────────────────────┤\n│ Tabs: Active | Completed | Achievements │\n│ Quest List │\n└─────────────────────────────────┘\n```\n\nI'll make it a single-column layout, max-width ~700px, centered.\n\nFor the confetti, I'll write a simple canvas confetti implementation myself rather than using an external library — that's safer and keeps everything self-contained.\n\nLet me also add:\n- Filter tabs (All / Active / Completed)\n- Achievement panel (toggle or tab)\n- Delete task (no penalty) and maybe \"abandon\" quest\n- Edit? Maybe skip edit for simplicity, keep delete.\n- Reset progress button (with confirm)\n\nSound effects: Could use WebAudio API for simple beeps. That's a nice touch — little coin sound on completion, fanfare on level up. I'll add simple synthesized sounds with a mute toggle.\n\nLet me write the full code now.\n\nKey functions:\n- `loadState()` / `saveState()`\n- `addTask()`\n- `completeTask(id)`\n- `deleteTask(id)`\n- `gainXP(amount)` — handles level ups\n- `checkAchievements()`\n- `updateStreak()`\n- `render()` — render all UI\n- `showToast(achievement)`\n- `levelUpModal()`\n- `confetti()`\n- `floatText()`\n- `playSound(type)`\n\nXP math:\n```js\nfunction xpForLevel(level) { return level * 100; } // xp needed to go from level to level+1\n```\n\nStore total XP, derive level: while xp >= xpForLevel(level) { xp -= xpForLevel(level); level++ } — actually easier to store `xp` (current level progress) and `level` separately.\n\nLet me code:\n\n```js\nconst DIFFICULTIES = {\n common: { name: 'Common', xp: 10, coins: 5, color: '#9ca3af', icon: '⚪' },\n rare: { name: 'Rare', xp: 25, coins: 15, color: '#3b82f6', icon: '🔵' },\n epic: { name: 'Epic', xp: 50, coins: 30, color: '#a855f7', icon: '🟣' },\n legendary: { name: 'Legendary', xp: 100, coins: 75, color: '#f59e0b', icon: '🟡' }\n};\n```\n\nAchievements definitions:\n\n```js\nconst ACHIEVEMENTS = [\n { id: 'first', name: 'First Blood', desc: 'Complete your first quest', icon: '🗡️', check: s => s.totalCompleted >= 1 },\n { id: 'ten', name: 'Adventurer', desc: 'Complete 10 quests', icon: '🎒', check: s => s.totalCompleted >= 10 },\n { id: 'fifty', name: 'Veteran', desc: 'Complete 50 quests', icon: '🛡️', check: s => s.totalCompleted >= 50 },\n { id: 'hundred', name: 'Centurion', desc: 'Complete 100 quests', icon: '🏆', check: s => s.totalCompleted >= 100 },\n { id: 'level5', name: 'Rising Star', desc: 'Reach level 5', icon: '⭐', check: s => s.level >= 5 },\n { id: 'level10', name: 'Hero', desc: 'Reach level 10', icon: '🌟', check: s => s.level >= 10 },\n { id: 'level20', name: 'Legend', desc: 'Reach level 20', icon: '👑', check: s => s.level >= 20 },\n { id: 'streak3', name: 'Warming Up', desc: '3-day streak', icon: '🔥', check: s => s.streak >= 3 },\n { id: 'streak7', name: 'Unstoppable', desc: '7-day streak', icon: '💥', check: s => s.streak >= 7 },\n { id: 'legendary', name: 'Dragon Slayer', desc: 'Complete a Legendary quest', icon: '🐉', check: s => s.legendaryCompleted >= 1 },\n { id: 'combo5', name: 'Combo Master', desc: 'Reach a 5x combo', icon: '⚡', check: s => s.maxCombo >= 5 },\n { id: 'rich', name: 'Treasure Hoarder', desc: 'Earn 500 gold', icon: '💰', check: s => s.totalCoins >= 500 },\n];\n```\n\nAvatar by level:\n```js\nfunction getAvatar(level) {\n if (level >= 20) return '👑';\n if (level >= 15) return '🐉';\n if (level >= 10) return '🏆';\n if (level >= 7) return '⚔️';\n if (level >= 4) return '🗡️';\n if (level >= 2) return '🛡️';\n return '🐣';\n}\n```\n\nTitles by level:\n```js\nfunction getTitle(level) {\n if (level >= 20) return 'Legendary Hero';\n if (level >= 15) return 'Dragon Rider';\n if (level >= 10) return 'Champion';\n if (level >= 7) return 'Knight';\n if (level >= 4) return 'Squire';\n if (level >= 2) return 'Apprentice';\n return 'Novice';\n}\n```\n\nStreak logic:\n```js\nfunction updateStreak() {\n const today = new Date().toDateString();\n const yesterday = new Date(Date.now() - 86400000).toDateString();\n if (state.lastActiveDate === today) {\n // same day, no change\n } else if (state.lastActiveDate === yesterday) {\n state.streak += 1;\n } else {\n state.streak = 1;\n }\n state.lastActiveDate = today;\n}\n```\n\nCombo logic:\n```js\nconst COMBO_WINDOW = 5 * 60 * 1000; // 5 minutes\nfunction updateCombo() {\n const now = Date.now();\n if (state.lastCompleteTime && now - state.lastCompleteTime < COMBO_WINDOW) {\n state.combo += 1;\n } else {\n state.combo = 1;\n }\n state.maxCombo = Math.max(state.maxCombo, state.combo);\n state.lastCompleteTime = now;\n return state.combo;\n}\n```\n\nCombo bonus XP: (combo - 1) * 5.\n\nSounds with WebAudio:\n```js\nlet audioCtx = null;\nfunction playSound(type) {\n if (muted) return;\n audioCtx = audioCtx || new (window.AudioContext || window.webkitAudioContext)();\n // oscillator-based sounds\n}\n```\n\nI'll create:\n- complete: quick ascending coin blip (two notes)\n- levelup: little arpeggio\n- achievement: chime\n\nConfetti: canvas full screen, spawn particles, animate with requestAnimationFrame, remove after done.\n\nFloating XP text: absolutely positioned element near the clicked button, animate up and fade.\n\nLevel-up modal: overlay with big \"LEVEL UP!\" text, new level, rewards, click to dismiss.\n\nAchievement toast: slides in from top right, auto-dismiss after 4s. Queue if multiple.\n\nHeader stats:\n- Avatar circle with emoji\n- \"Level X — Title\"\n- XP bar: current xp / xpForLevel(level)\n- Badges row: 💰 coins, 🔥 streak, ⚡ combo (current), ✅ completed\n\nQuest item design:\n- Left: difficulty indicator (colored dot/border)\n- Title\n- XP/coin reward tags\n- Complete button (checkmark)\n- Delete button (×)\n- Completed state: strikethrough, faded, \"restored\"? Maybe allow un-complete? That complicates XP. I'll not allow uncompleting — instead completed tasks can be deleted. Or actually, let me allow deleting completed tasks too.\n\nAdding tasks: input + difficulty selector (pills or select). Enter key or button adds.\n\nEmpty states: nice messages.\n\nPersistence: localStorage key 'questlog_save'.\n\nDaily reset consideration: tasks persist. Fine.\n\nAlso add a small \"how it works\" hint or just intuitive.\n\nStyling details:\n- Font: Google Fonts? External fonts via link — allowed since they said include full HTML with script/link tags. I could use \"Press Start 2P\" for headers (pixel RPG vibe) + \"Inter\"/system for body. But external fonts might fail offline; fallbacks are fine. Let me use Google Fonts with fallbacks: `Rajdhani` or `Chakra Petch`... Actually a pixel font for headings would be fun. I'll include 'Press Start 2P' for title accents and 'Rubik' for body. With system fallbacks if not loaded.\n\n- Background: dark gradient with subtle animated stars/particles? Maybe a CSS animated gradient. Keep performance fine.\n\n- Cards: glassmorphism dark cards with colored left border by difficulty.\n\n- Buttons: gradient, hover glow.\n\n- XP bar: animated shimmer.\n\nLet me also add a progress ring around avatar? Maybe simpler: XP bar below.\n\nTabs: Quests (active count), Completed (count), Achievements (unlocked/total).\n\nLet me now write out the entire HTML file carefully. I need to make sure everything works. Let me be careful with:\n- IDs consistent\n- Event delegation or direct handlers\n- Rendering functions\n- Escape HTML in task titles to prevent injection (since it's local, but good practice)\n\nLet me draft the full code:\n\n```html\n\n\n\n\n\nQuestLog — Gamified To-Do\n\n\n\n\n...\n\n\n```\n\nBackground: I'll add a subtle starfield with CSS using multiple box-shadows or radial-gradients, maybe animated twinkle. Or a small JS starfield canvas behind everything. Keep it simple: CSS radial gradients + slight animation.\n\nMain container:\n\n```html\n

🐣

\n Novice\n Level 1\n

\n 0 / 100 XP\n

💰 0

🔥 0

⚡ 0x

✅ 0

\n \n \n

\n\n

\n \n

\n \n ...\n

\n \n

\n\n \n\n

\n\n

\n\n```\n\nFor combo chip, maybe show current combo; it decays after 5 min — I can show it fade. Simple: show maxCombo? Or current combo. I'll show current combo and update on a timer every 30s to reset display if expired. Simpler: show combo, and on render after time passes, display resets. I'll add a setInterval that checks combo expiry and re-renders chips.\n\nTask item HTML:\n\n```html\n

\n \n

Title

\n +10 XP\n +5 💰\n Common\n

\n \n

\n```\n\nCompleted tasks show reward earned and timestamp.\n\nAchievements grid: cards with icon, name, desc; locked ones grayscale/locked icon.\n\nLevel up modal content:\n```\n🎉 LEVEL UP! 🎉\nLevel 5\nNew Title: Knight\n+25 bonus gold\n[Continue]\n```\n\nBonus gold per level: level * 10.\n\nConfetti implementation:\n\n```js\nconst canvas = document.getElementById('confettiCanvas');\nconst ctx = canvas.getContext('2d');\nlet particles = [];\nlet rafId = null;\nfunction resizeCanvas() { canvas.width = innerWidth; canvas.height = innerHeight; }\nwindow.addEventListener('resize', resizeCanvas); resizeCanvas();\n\nfunction launchConfetti(count=150) {\n const colors = ['#f59e0b','#a855f7','#3b82f6','#22c55e','#ef4444','#fffffe'];\n for (let i=0;i{\n p.x+=p.vx; p.y+=p.vy; p.vy+=0.05; p.rot+=p.vr;\n ctx.save(); ctx.translate(p.x,p.y); ctx.rotate(p.rot);\n ctx.fillStyle=p.color; ctx.fillRect(-p.w/2,-p.h/2,p.w,p.h);\n ctx.restore();\n });\n particles = particles.filter(p=>p.yel.remove(), 1200);\n}\n```\nCSS animation floatUp.\n\nSound:\n\n```js\nlet audioCtx=null; let muted=false;\nfunction tone(freq, start, dur, type='square', vol=0.08){\n const o=audioCtx.createOscillator(), g=audioCtx.createGain();\n o.type=type; o.frequency.value=freq;\n g.gain.setValueAtTime(vol, audioCtx.currentTime+start);\n g.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime+start+dur);\n o.connect(g); g.connect(audioCtx.destination);\n o.start(audioCtx.currentTime+start); o.stop(audioCtx.currentTime+start+dur);\n}\nfunction playSound(type){\n if(muted) return;\n try{\n audioCtx = audioCtx || new (window.AudioContext||window.webkitAudioContext)();\n if(audioCtx.state==='suspended') audioCtx.resume();\n if(type==='complete'){ tone(523,0,0.12); tone(784,0.08,0.15); }\n else if(type==='add'){ tone(330,0,0.08,'triangle',0.05); }\n else if(type==='levelup'){ [523,659,784,1047].forEach((f,i)=>tone(f,i*0.1,0.2)); }\n else if(type==='achieve'){ tone(880,0,0.1,'sine'); tone(1175,0.1,0.25,'sine'); }\n else if(type==='delete'){ tone(196,0,0.15,'sawtooth',0.05); }\n }catch(e){}\n}\n```\n\nComplete task flow:\n\n```js\nfunction completeTask(id, btnEl){\n const task = state.tasks.find(t=>t.id===id);\n if(!task || task.completed) return;\n task.completed = true;\n task.completedAt = Date.now();\n const d = DIFFICULTIES[task.difficulty];\n const combo = updateCombo();\n const comboBonus = (combo-1)*5;\n const totalXP = d.xp + comboBonus;\n state.totalCompleted++;\n state.coins += d.coins;\n state.totalCoins += d.coins;\n if(task.difficulty==='legendary') state.legendaryCompleted++;\n updateStreak();\n \n // float text\n const rect = btnEl.getBoundingClientRect();\n floatText(`+${totalXP} XP`, rect.left, rect.top, '#22c55e');\n if(comboBonus>0) floatText(`COMBO x${combo}!`, rect.left, rect.top-24, '#f59e0b');\n \n gainXP(totalXP);\n playSound('complete');\n if(task.difficulty==='legendary'){ launchConfetti(80); shake? }\n checkAchievements();\n saveState(); render();\n}\n```\n\ngainXP:\n\n```js\nfunction gainXP(amount){\n state.xp += amount;\n let needed = xpForLevel(state.level);\n let leveled = false;\n while(state.xp >= needed){\n state.xp -= needed;\n state.level++;\n leveled = true;\n // bonus\n state.coins += state.level*10;\n state.totalCoins += state.level*10;\n needed = xpForLevel(state.level);\n }\n if(leveled){\n showLevelUp();\n launchConfetti(200);\n playSound('levelup');\n }\n}\n```\n\nWait — order: playSound('complete') and levelup both... fine, sounds overlap slightly. OK.\n\ncheckAchievements:\n\n```js\nfunction checkAchievements(){\n ACHIEVEMENTS.forEach(a=>{\n if(!state.achievements.includes(a.id) && a.check(state)){\n state.achievements.push(a.id);\n queueToast(a);\n }\n });\n}\n```\n\nToast queue: show one at a time, 3.5s each.\n\nStreak note: updateStreak called on completion. Streak displayed as state.streak.\n\nRender function updates header chips, xp bar width with transition, lists per active tab.\n\nAlso handle Enter key on input.\n\nDifficulty selector: 4 pill buttons showing icon+name+XP; selected state colored.\n\nDelete: confirm? Just delete with small animation. For completed tasks delete too.\n\nReset: confirm() then clear localStorage and reload state.\n\nAlso nice: daily quest count \"quests completed today\". Could add chip. Maybe skip to keep clean; the chips are 4 already.\n\nLet me think about the XP bar text: `${state.xp} / ${xpForLevel(state.level)} XP`.\n\nAchievement badge in tab: `${state.achievements.length}/${ACHIEVEMENTS.length}`.\n\nAlright, also add subtle entrance animations for tasks.\n\nEscape HTML:\n\n```js\nfunction esc(s){ const d=document.createElement('div'); d.textContent=s; return d.innerHTML; }\n```\n\nEdge: input empty → shake input.\n\nAlso combo expiry display: setInterval 10s → if lastCompleteTime older than window and combo>0 displayed, reset combo to 0 (just display + state.combo=0? Keep state.combo but treat as expired). Simpler: in updateCombo we already reset if expired. For display, interval: if expired and combo>1, set combo=0, save, render chips. Let me implement `checkComboExpiry()`.\n\nNote combo chip shows `state.combo` — maybe show only if >1? Show always but dim if 0/1. I'll show \"x1\" default. Actually nicer: chip hidden unless combo>=2. Hmm, keep visible for consistency, label \"Combo\". I'll show it always.\n\nNow styling. Let me write CSS carefully.\n\nApp width: 720px, padding.\n\nPlayer card: gradient border? Use background linear-gradient panel, border 1px rgba. Avatar 72px circle with gradient bg, big emoji. Level badge: small circle at bottom-right of avatar with number, gold bg.\n\nXP bar: height 22px, rounded, dark bg, fill gradient green→teal with shine animation, text centered overlay small.\n\nChips: small pills.\n\nAdd quest section: input grows, difficulty pills row, add button gradient purple.\n\nTabs: underline style.\n\nTask list items: panel bg, left border 4px difficulty color, hover lift. Check button circle with difficulty color border; hover fills. Completed: check filled green, title strike.\n\nLegendary task: animated gold glow border? Nice touch: `animation: legendaryGlow`.\n\nDelete button: subtle ✕, red on hover.\n\nAchievements grid: 2-3 cols cards. Unlocked: colored icon, glow; locked: grayscale, 🔒 overlay.\n\nModal: fixed overlay blur, card pop animation.\n\nToast: fixed top-right, slide in.\n\nFloat text: fixed, animation translateY -60px fade.\n\nConfetti canvas: fixed inset 0, pointer-events none, z-index high.\n\nScreen shake for legendary: keyframes on body? apply class to app container.\n\nFonts: Press Start 2P for the app title \"QUESTLOG\" in header maybe, and modal headings. Small sizes since it's wide font.\n\nHeader top row: app title? Let me include a small title bar: \"⚔️ QUESTLOG\" in pixel font at very top. \n\nLet me assemble everything now, writing final code. I need to double check every function referenced exists and IDs match.\n\nFull code:\n\n```html\n\n\n\n\n\nQuestLog — Gamified To-Do\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\nLet me think about the details:\n\n**State:**\n```js\nstate = {\n xp: 0,\n level: 1,\n coins: 0,\n streak: 0,\n lastCompletedDate: null,\n tasks: [], // {id, title, difficulty, completed, createdAt, completedAt}\n achievements: [], // unlocked achievement ids\n totalCompleted: 0,\n combo: 0,\n lastComboTime: null\n}\n```\n\n**Level curve:** XP needed for next level = level * 100 (cumulative). So level 1→2 needs 100, 2→3 needs 200 more, etc.\n\n**Difficulties:**\n- Common (easy): 10 XP, 5 coins — gray/green\n- Rare (medium): 25 XP, 15 coins — blue\n- Epic (hard): 50 XP, 30 coins — purple\n- Legendary: 100 XP, 75 coins — gold\n\n**Combo system:** Complete a task within 5 minutes of the previous one → combo +1, bonus XP = combo * 5.\n\n**Achievements:**\n- \"First Steps\" — complete 1 quest\n- \"Getting Started\" — complete 10 quests\n- \"Quest Master\" — complete 50 quests\n- \"Century Club\" — complete 100 quests\n- \"Level 5\" / \"Level 10\" / \"Level 20\"\n- \"On Fire\" — 3-day streak\n- \"Unstoppable\" — 7-day streak\n- \"Legendary Hunter\" — complete a legendary quest\n- \"Combo King\" — 5x combo\n- \"Early Bird\" / maybe skip\n- \"Rich\" — 500 coins\n\n**Avatar:** Emoji that evolves with level: 🐣 → 🗡️ → ⚔️ → 🛡️ → 🏆 → 👑\n\n**Streak logic:** On completing a task, check date. If last completion was yesterday → streak+1. If today → keep streak. If older → reset to 1.\n\n**Visual effects:**\n- Floating \"+XP\" text when completing\n- Confetti on level up (canvas-based)\n- Achievement toast sliding in\n- XP bar animation\n- Screen shake maybe on legendary completion\n\nLet me write this carefully to be complete and bug-free.\n\nLayout:\n```\n┌─────────────────────────────────┐\n│ Header: Avatar | Name/Level │\n│ XP Bar │\n│ Coins | Streak | Completed │\n├─────────────────────────────────┤\n│ Add Quest Form │\n├─────────────────────────────────┤\n│ Tabs: Active | Completed | Achievements │\n│ Quest List │\n└─────────────────────────────────┘\n```\n\nI'll make it a single-column layout, max-width ~700px, centered.\n\nFor the confetti, I'll write a simple canvas confetti implementation myself rather than using an external library — that's safer and keeps everything self-contained.\n\nLet me also add:\n- Filter tabs (All / Active / Completed)\n- Achievement panel (toggle or tab)\n- Delete task (no penalty) and maybe \"abandon\" quest\n- Edit? Maybe skip edit for simplicity, keep delete.\n- Reset progress button (with confirm)\n\nSound effects: Could use WebAudio API for simple beeps. That's a nice touch — little coin sound on completion, fanfare on level up. I'll add simple synthesized sounds with a mute toggle.\n\nLet me write the full code now.\n\nKey functions:\n- `loadState()` / `saveState()`\n- `addTask()`\n- `completeTask(id)`\n- `deleteTask(id)`\n- `gainXP(amount)` — handles level ups\n- `checkAchievements()`\n- `updateStreak()`\n- `render()` — render all UI\n- `showToast(achievement)`\n- `levelUpModal()`\n- `confetti()`\n- `floatText()`\n- `playSound(type)`\n\nXP math:\n```js\nfunction xpForLevel(level) { return level * 100; } // xp needed to go from level to level+1\n```\n\nStore total XP, derive level: while xp >= xpForLevel(level) { xp -= xpForLevel(level); level++ } — actually easier to store `xp` (current level progress) and `level` separately.\n\nLet me code:\n\n```js\nconst DIFFICULTIES = {\n common: { name: 'Common', xp: 10, coins: 5, color: '#9ca3af', icon: '⚪' },\n rare: { name: 'Rare', xp: 25, coins: 15, color: '#3b82f6', icon: '🔵' },\n epic: { name: 'Epic', xp: 50, coins: 30, color: '#a855f7', icon: '🟣' },\n legendary: { name: 'Legendary', xp: 100, coins: 75, color: '#f59e0b', icon: '🟡' }\n};\n```\n\nAchievements definitions:\n\n```js\nconst ACHIEVEMENTS = [\n { id: 'first', name: 'First Blood', desc: 'Complete your first quest', icon: '🗡️', check: s => s.totalCompleted >= 1 },\n { id: 'ten', name: 'Adventurer', desc: 'Complete 10 quests', icon: '🎒', check: s => s.totalCompleted >= 10 },\n { id: 'fifty', name: 'Veteran', desc: 'Complete 50 quests', icon: '🛡️', check: s => s.totalCompleted >= 50 },\n { id: 'hundred', name: 'Centurion', desc: 'Complete 100 quests', icon: '🏆', check: s => s.totalCompleted >= 100 },\n { id: 'level5', name: 'Rising Star', desc: 'Reach level 5', icon: '⭐', check: s => s.level >= 5 },\n { id: 'level10', name: 'Hero', desc: 'Reach level 10', icon: '🌟', check: s => s.level >= 10 },\n { id: 'level20', name: 'Legend', desc: 'Reach level 20', icon: '👑', check: s => s.level >= 20 },\n { id: 'streak3', name: 'Warming Up', desc: '3-day streak', icon: '🔥', check: s => s.streak >= 3 },\n { id: 'streak7', name: 'Unstoppable', desc: '7-day streak', icon: '💥', check: s => s.streak >= 7 },\n { id: 'legendary', name: 'Dragon Slayer', desc: 'Complete a Legendary quest', icon: '🐉', check: s => s.legendaryCompleted >= 1 },\n { id: 'combo5', name: 'Combo Master', desc: 'Reach a 5x combo', icon: '⚡', check: s => s.maxCombo >= 5 },\n { id: 'rich', name: 'Treasure Hoarder', desc: 'Earn 500 gold', icon: '💰', check: s => s.totalCoins >= 500 },\n];\n```\n\nAvatar by level:\n```js\nfunction getAvatar(level) {\n if (level >= 20) return '👑';\n if (level >= 15) return '🐉';\n if (level >= 10) return '🏆';\n if (level >= 7) return '⚔️';\n if (level >= 4) return '🗡️';\n if (level >= 2) return '🛡️';\n return '🐣';\n}\n```\n\nTitles by level:\n```js\nfunction getTitle(level) {\n if (level >= 20) return 'Legendary Hero';\n if (level >= 15) return 'Dragon Rider';\n if (level >= 10) return 'Champion';\n if (level >= 7) return 'Knight';\n if (level >= 4) return 'Squire';\n if (level >= 2) return 'Apprentice';\n return 'Novice';\n}\n```\n\nStreak logic:\n```js\nfunction updateStreak() {\n const today = new Date().toDateString();\n const yesterday = new Date(Date.now() - 86400000).toDateString();\n if (state.lastActiveDate === today) {\n // same day, no change\n } else if (state.lastActiveDate === yesterday) {\n state.streak += 1;\n } else {\n state.streak = 1;\n }\n state.lastActiveDate = today;\n}\n```\n\nCombo logic:\n```js\nconst COMBO_WINDOW = 5 * 60 * 1000; // 5 minutes\nfunction updateCombo() {\n const now = Date.now();\n if (state.lastCompleteTime && now - state.lastCompleteTime < COMBO_WINDOW) {\n state.combo += 1;\n } else {\n state.combo = 1;\n }\n state.maxCombo = Math.max(state.maxCombo, state.combo);\n state.lastCompleteTime = now;\n return state.combo;\n}\n```\n\nCombo bonus XP: (combo - 1) * 5.\n\nSounds with WebAudio:\n```js\nlet audioCtx = null;\nfunction playSound(type) {\n if (muted) return;\n audioCtx = audioCtx || new (window.AudioContext || window.webkitAudioContext)();\n // oscillator-based sounds\n}\n```\n\nI'll create:\n- complete: quick ascending coin blip (two notes)\n- levelup: little arpeggio\n- achievement: chime\n\nConfetti: canvas full screen, spawn particles, animate with requestAnimationFrame, remove after done.\n\nFloating XP text: absolutely positioned element near the clicked button, animate up and fade.\n\nLevel-up modal: overlay with big \"LEVEL UP!\" text, new level, rewards, click to dismiss.\n\nAchievement toast: slides in from top right, auto-dismiss after 4s. Queue if multiple.\n\nHeader stats:\n- Avatar circle with emoji\n- \"Level X — Title\"\n- XP bar: current xp / xpForLevel(level)\n- Badges row: 💰 coins, 🔥 streak, ⚡ combo (current), ✅ completed\n\nQuest item design:\n- Left: difficulty indicator (colored dot/border)\n- Title\n- XP/coin reward tags\n- Complete button (checkmark)\n- Delete button (×)\n- Completed state: strikethrough, faded, \"restored\"? Maybe allow un-complete? That complicates XP. I'll not allow uncompleting — instead completed tasks can be deleted. Or actually, let me allow deleting completed tasks too.\n\nAdding tasks: input + difficulty selector (pills or select). Enter key or button adds.\n\nEmpty states: nice messages.\n\nPersistence: localStorage key 'questlog_save'.\n\nDaily reset consideration: tasks persist. Fine.\n\nAlso add a small \"how it works\" hint or just intuitive.\n\nStyling details:\n- Font: Google Fonts? External fonts via link — allowed since they said include full HTML with script/link tags. I could use \"Press Start 2P\" for headers (pixel RPG vibe) + \"Inter\"/system for body. But external fonts might fail offline; fallbacks are fine. Let me use Google Fonts with fallbacks: `Rajdhani` or `Chakra Petch`... Actually a pixel font for headings would be fun. I'll include 'Press Start 2P' for title accents and 'Rubik' for body. With system fallbacks if not loaded.\n\n- Background: dark gradient with subtle animated stars/particles? Maybe a CSS animated gradient. Keep performance fine.\n\n- Cards: glassmorphism dark cards with colored left border by difficulty.\n\n- Buttons: gradient, hover glow.\n\n- XP bar: animated shimmer.\n\nLet me also add a progress ring around avatar? Maybe simpler: XP bar below.\n\nTabs: Quests (active count), Completed (count), Achievements (unlocked/total).\n\nLet me now write out the entire HTML file carefully. I need to make sure everything works. Let me be careful with:\n- IDs consistent\n- Event delegation or direct handlers\n- Rendering functions\n- Escape HTML in task titles to prevent injection (since it's local, but good practice)\n\nLet me draft the full code:\n\n```html\n\n\n\n\n\nQuestLog — Gamified To-Do\n\n\n\n\n...\n\n\n```\n\nBackground: I'll add a subtle starfield with CSS using multiple box-shadows or radial-gradients, maybe animated twinkle. Or a small JS starfield canvas behind everything. Keep it simple: CSS radial gradients + slight animation.\n\nMain container:\n\n```html\n

🐣

\n Novice\n Level 1\n

\n 0 / 100 XP\n

💰 0

🔥 0

⚡ 0x

✅ 0

\n \n \n

\n\n

\n \n

\n \n ...\n

\n \n

\n\n \n\n

\n\n

\n \n

Title

\n +10 XP\n +5 💰\n Common\n

\n \n

asdeq