Achievement Simulator

Turn your real-life actions into legendary unlocks

\n \n

\n \n \n

Specific actions unlock higher Gamerscore.

\n\n

Recent Unlocks

\n\n

\n \n

\n\n\n```\n\nstyles.css - I'll write a completely new style.\n\napp.js - rewrite with particle system, better AI, etc.\n\nI need to make sure the SVG asset still works and the sound still works.\n\nLet me write the new styles. I'll use CSS variables for Xbox colors.\n\nFor mobile: container fits screen, no scrolling ideally. Recent achievements could be limited to 3 items max to save space.\n\nParticle system: canvas overlay, on achievement unlock burst particles (green/gold).\n\nLet me write everything.\n\nI should also improve the AI prompt to make it more reliable and add a rarity field.\n\nActually I can compute rarity from score:\n- 5-25: Bronze\n- 26-50: Silver \n- 51-75: Gold\n- 76-100: Platinum/Rare\n\nKeep it simple.\n\nFor the floating HUD, I'll position fixed at top center or top right. Top right is more authentic Xbox 360. But on mobile, top center works better. I'll use top center on mobile, top right on desktop.\n\nLet me write the complete files.\n\nAlso: for mobile viewport, I need to ensure no vertical scrolling. I'll make the recent achievements compact and scrollable if needed (but the main layout fits). Actually if there are 5 recent items, it might scroll. I'll allow the recent list to scroll internally if needed but keep the page itself no-scroll. Or I can cap recent items to 3.\n\nI'll use `max-height` and `overflow-y: auto` on recent-list.\n\nOK let me write the code.\n\nSince I'm changing a lot, I'll use full-file replacements with SEARCH/REPLACE. I need to search for something unique. I can search for `` in index.html, but that's at the top. Better to search for a larger unique chunk. Actually I can just replace the entire file by searching for the first line and replacing everything. But the SEARCH needs to match exactly. I'll search for the entire file content in one block - that's allowed but large. Alternatively, I can output the new file content directly with a code block labeled with filename to create a new file, but that would overwrite? The instructions say creating new text files uses markdown code block. But for existing files, I should use SEARCH/REPLACE.\n\nActually, I can use multiple SEARCH/REPLACE to replace sections. But there are many sections. Maybe simplest is to do a complete file rewrite with one SEARCH/REPLACE where SEARCH is the entire current content and REPLACE is the entire new content. That's valid.\n\nBut the SEARCH text must match exactly. The files are not too large. I can do that for all three.\n\nHowever, I need to be very careful with whitespace and exact matching. Let me copy the current content exactly.\n\nActually, the user provided the current content. I can trust it. I'll use the entire content as SEARCH.\n\nWait, the instruction says \"Multiple changes to the same file MUST each be in their own code block, labeled with the filename\" - this is for multiple changes. A single complete rewrite is fine in one block.\n\nLet me prepare the SEARCH/REPLACE blocks.\n\nFor index.html:\nSEARCH = entire current index.html\nREPLACE = new index.html\n\nFor styles.css:\nSEARCH = entire current styles.css\nREPLACE = new styles.css\n\nFor app.js:\nSEARCH = entire current app.js\nREPLACE = new app.js\n\nThis is safe and straightforward.\n\nLet me write the new content.\n\nNew index.html:\n\n```html\n\n\n\n \n \n Xbox 360 Achievement Simulator\n \n \n \n\n\n

\n \n

\n \n HUD ONLINE\n

\n \n

Achievement Simulator

Turn your real-life actions into legendary unlocks

\n \n

\n \n \n

Specific actions unlock higher Gamerscore.

\n\n

Recent Unlocks

\n\n

\n \n

\n\n\n```\n\nNew styles.css:\n\n```css\n:root {\n --xbox-green: #107C10;\n --xbox-green-light: #45a049;\n --xbox-green-glow: #4ec94e;\n --gold: #FFD700;\n --silver: #C0C0C0;\n --bronze: #CD7F32;\n --platinum: #E5E4E2;\n --bg-dark: #050505;\n --bg-panel: rgba(16, 124, 16, 0.08);\n --border-glow: rgba(16, 124, 16, 0.4);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Segoe UI', Roboto, Arial, sans-serif;\n background: radial-gradient(ellipse at center, #0f1f0f 0%, #050505 70%);\n color: #ffffff;\n}\n\n.scanlines {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0,0,0,0.15) 0px,\n rgba(0,0,0,0.15) 1px,\n transparent 1px,\n transparent 3px\n );\n opacity: 0.4;\n}\n\n.hud-frame {\n position: fixed;\n inset: 8px;\n border: 1px solid rgba(16, 124, 16, 0.25);\n border-radius: 16px;\n pointer-events: none;\n z-index: 2;\n box-shadow:\n inset 0 0 40px rgba(16, 124, 16, 0.1),\n 0 0 30px rgba(16, 124, 16, 0.15);\n}\n\n.hud-frame::before {\n content: '';\n position: absolute;\n top: -1px;\n left: 20%;\n right: 20%;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--xbox-green-glow), transparent);\n}\n\n.particle-canvas {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 50;\n}\n\n.container {\n position: relative;\n z-index: 10;\n max-width: 620px;\n margin: 0 auto;\n padding: 16px 20px;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.hud-status {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-size: 11px;\n letter-spacing: 3px;\n color: var(--xbox-green-glow);\n margin-bottom: 12px;\n opacity: 0.8;\n}\n\n.status-dot {\n width: 8px;\n height: 8px;\n background: var(--xbox-green-glow);\n border-radius: 50%;\n box-shadow: 0 0 10px var(--xbox-green-glow);\n animation: pulse 2s infinite;\n}\n\n.xbox-header {\n text-align: center;\n margin-bottom: 24px;\n animation: fadeInUp 0.6s ease-out;\n}\n\n.logo-ring {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 90px;\n height: 90px;\n border-radius: 50%;\n margin-bottom: 14px;\n background: radial-gradient(circle, rgba(16,124,16,0.2) 0%, transparent 70%);\n box-shadow: 0 0 30px rgba(16, 124, 16, 0.3);\n animation: float 4s ease-in-out infinite;\n}\n\n.xbox-logo-main {\n width: 70px;\n height: 70px;\n filter: drop-shadow(0 0 12px rgba(78, 201, 78, 0.6));\n}\n\nh1 {\n font-size: 2.2em;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 1px;\n background: linear-gradient(135deg, #ffffff, var(--xbox-green-glow));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 6px;\n}\n\n.subtitle {\n font-size: 1em;\n color: #a0a0a0;\n}\n\n.input-section {\n margin-bottom: 18px;\n animation: fadeInUp 0.6s ease-out 0.15s both;\n}\n\n.input-container {\n position: relative;\n background: var(--bg-panel);\n border: 1px solid var(--border-glow);\n border-radius: 16px;\n padding: 12px;\n backdrop-filter: blur(10px);\n box-shadow: 0 8px 32px rgba(0,0,0,0.3);\n}\n\ninput {\n width: 100%;\n padding: 14px 16px;\n font-size: 16px;\n background: rgba(0,0,0,0.25);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 10px;\n color: #ffffff;\n transition: all 0.3s ease;\n}\n\ninput:focus {\n outline: none;\n border-color: var(--xbox-green);\n box-shadow: 0 0 18px rgba(16, 124, 16, 0.25);\n}\n\ninput::placeholder {\n color: #666666;\n}\n\n.generate-btn {\n width: 100%;\n padding: 15px;\n margin-top: 12px;\n background: linear-gradient(135deg, var(--xbox-green), #158f15);\n border: none;\n border-radius: 10px;\n color: #ffffff;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 20px rgba(16, 124, 16, 0.35);\n}\n\n.generate-btn:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 8px 28px rgba(16, 124, 16, 0.5);\n}\n\n.generate-btn:active:not(:disabled) {\n transform: translateY(0);\n}\n\n.generate-btn:disabled {\n opacity: 0.7;\n cursor: wait;\n}\n\n.btn-loading {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255,255,255,0.3);\n border-top-color: #ffffff;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n.hidden {\n display: none !important;\n}\n\n.hint-text {\n font-size: 13px;\n color: #777777;\n margin-top: 10px;\n text-align: center;\n}\n\n.recent-achievements {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n animation: fadeInUp 0.6s ease-out 0.3s both;\n}\n\n.recent-achievements h3 {\n font-size: 14px;\n color: var(--xbox-green-glow);\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 12px;\n text-align: center;\n}\n\n.recent-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n padding-right: 4px;\n}\n\n.recent-list::-webkit-scrollbar {\n width: 4px;\n}\n\n.recent-list::-webkit-scrollbar-thumb {\n background: var(--xbox-green);\n border-radius: 2px;\n}\n\n.recent-item {\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(16, 124, 16, 0.15);\n border-left: 3px solid var(--xbox-green);\n border-radius: 10px;\n padding: 12px 14px;\n font-size: 13px;\n transition: all 0.2s;\n}\n\n.recent-item:hover {\n background: rgba(16, 124, 16, 0.1);\n transform: translateX(3px);\n}\n\n.recent-item strong {\n color: #ffffff;\n font-size: 14px;\n}\n\n.recent-item small {\n color: #888888;\n display: block;\n margin-top: 4px;\n}\n\n.empty-item {\n text-align: center;\n color: #555555;\n border-left-color: transparent;\n}\n\n.achievement-container {\n position: fixed;\n top: 16px;\n right: 16px;\n z-index: 100;\n perspective: 1000px;\n max-width: 420px;\n width: calc(100% - 32px);\n animation: none;\n}\n\n.achievement-popup {\n position: relative;\n background: linear-gradient(135deg, rgba(10,35,10,0.97), rgba(5,15,5,0.98));\n border: 1px solid rgba(78, 201, 78, 0.4);\n border-radius: 14px;\n padding: 18px;\n box-shadow:\n 0 0 0 1px rgba(0,0,0,0.5),\n 0 20px 50px rgba(0,0,0,0.6),\n 0 0 40px rgba(16, 124, 16, 0.25);\n transform-style: preserve-3d;\n animation: popupIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n overflow: hidden;\n}\n\n.achievement-glow {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 30% 30%, rgba(78,201,78,0.15), transparent 70%);\n pointer-events: none;\n animation: glowPulse 2s ease-in-out infinite;\n}\n\n.achievement-body {\n display: flex;\n align-items: center;\n gap: 14px;\n position: relative;\n z-index: 2;\n}\n\n.achievement-logo {\n flex-shrink: 0;\n width: 60px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.xbox-logo-spin {\n width: 54px;\n height: 54px;\n filter: drop-shadow(0 0 8px rgba(78,201,78,0.5));\n animation: logoSpin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.achievement-info {\n flex: 1;\n min-width: 0;\n text-align: left;\n}\n\n.achievement-unlocked {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: var(--xbox-green-glow);\n margin-bottom: 4px;\n text-shadow: 0 0 10px rgba(78,201,78,0.4);\n}\n\n#achievementTitle {\n font-size: 1.25em;\n font-weight: 700;\n color: #ffffff;\n margin-bottom: 4px;\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.achievement-description {\n font-size: 0.9em;\n color: #c0c0c0;\n line-height: 1.3;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.achievement-score {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 4px;\n font-size: 1.6em;\n font-weight: 800;\n color: var(--gold);\n text-shadow: 0 0 12px rgba(255,215,0,0.3);\n min-width: 60px;\n}\n\n.achievement-score .g-icon {\n font-size: 0.55em;\n background: var(--gold);\n color: #000;\n padding: 1px 5px;\n border-radius: 3px;\n font-weight: 900;\n}\n\n.rarity-badge {\n font-size: 9px;\n font-weight: 700;\n letter-spacing: 1px;\n padding: 3px 7px;\n border-radius: 20px;\n text-transform: uppercase;\n margin-top: 4px;\n color: #000;\n}\n\n.rarity-bronze { background: var(--bronze); box-shadow: 0 0 10px var(--bronze); }\n.rarity-silver { background: var(--silver); box-shadow: 0 0 10px var(--silver); color: #111; }\n.rarity-gold { background: var(--gold); box-shadow: 0 0 12px var(--gold); }\n.rarity-platinum { background: var(--platinum); box-shadow: 0 0 14px var(--platinum); color: #111; }\n\n.share-btn {\n position: relative;\n z-index: 2;\n width: 100%;\n margin-top: 14px;\n padding: 10px;\n background: rgba(16, 124, 16, 0.2);\n border: 1px solid rgba(78, 201, 78, 0.3);\n border-radius: 8px;\n color: #ffffff;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 1px;\n text-transform: uppercase;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.share-btn:hover {\n background: rgba(16, 124, 16, 0.35);\n box-shadow: 0 0 15px rgba(16, 124, 16, 0.2);\n}\n\n@keyframes fadeInUp {\n from { opacity: 0; transform: translateY(25px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes popupIn {\n 0% { transform: translateX(120%) rotateY(-20deg); opacity: 0; }\n 60% { transform: translateX(-8%) rotateY(4deg); opacity: 1; }\n 100% { transform: translateX(0) rotateY(0); opacity: 1; }\n}\n\n@keyframes logoSpin {\n from { transform: rotate(-180deg) scale(0.3); opacity: 0; }\n to { transform: rotate(0) scale(1); opacity: 1; }\n}\n\n@keyframes glowPulse {\n 0%, 100% { opacity: 0.5; }\n 50% { opacity: 1; }\n}\n\n@keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.shake {\n animation: shake 0.5s ease-in-out;\n}\n\n@keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-6px); }\n 75% { transform: translateX(6px); }\n}\n\n@media (max-width: 480px) {\n .container {\n padding: 12px 16px;\n }\n \n h1 {\n font-size: 1.6em;\n }\n \n .subtitle {\n font-size: 0.9em;\n }\n \n .xbox-header {\n margin-bottom: 18px;\n }\n \n .logo-ring {\n width: 72px;\n height: 72px;\n }\n \n .xbox-logo-main {\n width: 54px;\n height: 54px;\n }\n \n .achievement-container {\n top: auto;\n bottom: 20px;\n right: 50%;\n transform: translateX(50%);\n max-width: calc(100% - 32px);\n }\n \n .achievement-popup {\n animation: popupInMobile 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n }\n \n @keyframes popupInMobile {\n 0% { transform: translateY(120%) scale(0.85); opacity: 0; }\n 60% { transform: translateY(-8px) scale(1.02); opacity: 1; }\n 100% { transform: translateY(0) scale(1); opacity: 1; }\n }\n \n .achievement-body {\n gap: 10px;\n }\n \n .achievement-logo {\n width: 48px;\n height: 48px;\n }\n \n .xbox-logo-spin {\n width: 44px;\n height: 44px;\n }\n \n #achievementTitle {\n font-size: 1.1em;\n }\n \n .achievement-description {\n font-size: 0.8em;\n }\n \n .achievement-score {\n font-size: 1.3em;\n min-width: 50px;\n }\n}\n```\n\nNew app.js:\n\n```javascript\nimport { Howl } from 'sounds';\n\nconst achievementSound = new Howl({\n src: ['xbox-360-achievement-sound.mp3'],\n volume: 0.7\n});\n\nconst elements = {\n actionInput: document.getElementById('actionInput'),\n generateBtn: document.getElementById('generateBtn'),\n achievementContainer: document.getElementById('achievementContainer'),\n achievementTitle: document.getElementById('achievementTitle'),\n achievementDesc: document.getElementById('achievementDesc'),\n scoreValue: document.getElementById('scoreValue'),\n rarityBadge: document.getElementById('rarityBadge'),\n shareBtn: document.getElementById('shareBtn'),\n recentList: document.getElementById('recentList'),\n particleCanvas: document.getElementById('particleCanvas')\n};\n\nlet hideTimeout;\nlet recentAchievements = JSON.parse(localStorage.getItem('recentAchievements') || '[]');\n\nconst rarityTiers = [\n { max: 25, name: 'Bronze', class: 'rarity-bronze', color: '#CD7F32' },\n { max: 50, name: 'Silver', class: 'rarity-silver', color: '#C0C0C0' },\n { max: 75, name: 'Gold', class: 'rarity-gold', color: '#FFD700' },\n { max: 100, name: 'Platinum', class: 'rarity-platinum', color: '#E5E4E2' }\n];\n\nfunction getRarity(score) {\n return rarityTiers.find(t => score <= t.max) || rarityTiers[rarityTiers.length - 1];\n}\n\nfunction initParticles() {\n const canvas = elements.particleCanvas;\n const ctx = canvas.getContext('2d');\n let particles = [];\n let animationId;\n \n function resize() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n \n window.addEventListener('resize', resize);\n resize();\n \n class Particle {\n constructor(x, y, color) {\n this.x = x;\n this.y = y;\n const angle = Math.random() * Math.PI * 2;\n const speed = Math.random() * 4 + 2;\n this.vx = Math.cos(angle) * speed;\n this.vy = Math.sin(angle) * speed - 2;\n this.life = 1;\n this.decay = Math.random() * 0.02 + 0.015;\n this.size = Math.random() * 4 + 2;\n this.color = color;\n this.gravity = 0.12;\n }\n \n update() {\n this.x += this.vx;\n this.y += this.vy;\n this.vy += this.gravity;\n this.life -= this.decay;\n this.size *= 0.98;\n }\n \n draw() {\n ctx.save();\n ctx.globalAlpha = this.life;\n ctx.fillStyle = this.color;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n }\n \n function burst(originX, originY, color) {\n for (let i = 0; i < 60; i++) {\n particles.push(new Particle(originX, originY, color));\n }\n }\n \n function loop() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n particles = particles.filter(p => p.life > 0);\n particles.forEach(p => {\n p.update();\n p.draw();\n });\n animationId = requestAnimationFrame(loop);\n }\n \n loop();\n \n return { burst };\n}\n\nconst particles = initParticles();\n\nfunction triggerParticles() {\n const rect = elements.achievementContainer.getBoundingClientRect();\n const x = rect.left + rect.width / 2;\n const y = rect.top + rect.height / 2;\n particles.burst(x, y, '#4ec94e');\n setTimeout(() => particles.burst(x, y, '#FFD700'), 150);\n}\n\nfunction displayRecentAchievements() {\n elements.recentList.innerHTML = '';\n \n if (recentAchievements.length === 0) {\n const empty = document.createElement('div');\n empty.className = 'recent-item empty-item';\n empty.textContent = 'No achievements yet. Start creating!';\n elements.recentList.appendChild(empty);\n return;\n }\n \n recentAchievements.forEach(item => {\n const div = document.createElement('div');\n div.className = 'recent-item';\n const rarity = getRarity(item.score);\n div.innerHTML = `\n ${escapeHtml(item.title)} ${item.score}G\n
${escapeHtml(item.description)} · ${rarity.name} · ${formatDate(item.timestamp)}\n `;\n elements.recentList.appendChild(div);\n });\n}\n\nfunction escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n}\n\nfunction formatDate(iso) {\n const date = new Date(iso);\n return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n}\n\nasync function generateAchievement() {\n const action = elements.actionInput.value.trim();\n \n if (!action) {\n elements.actionInput.classList.add('shake');\n setTimeout(() => elements.actionInput.classList.remove('shake'), 500);\n return;\n }\n \n setLoading(true);\n clearTimeout(hideTimeout);\n \n try {\n const completion = await websim.chat.completions.create({\n messages: [\n {\n role: 'system',\n content: `You are an Xbox 360 achievement generator AI. Convert real-life actions into funny, epic, gaming-style achievements.\n\nRules:\n1. Title: witty gaming reference, 3-6 words, max 40 characters\n2. Description: humorous twist on the action, max 90 characters\n3. Score: 5-100 based on difficulty, effort, or comedy. Use multiples of 5.\n4. Tone: playful, slightly sarcastic, like real Xbox achievements\n5. Reference gaming tropes when natural\n\nReturn ONLY valid JSON in this exact format:\n{\n \"title\": \"Achievement Title\",\n \"description\": \"Short funny description.\",\n \"score\": 25\n}`\n },\n {\n role: 'user',\n content: action\n }\n ],\n temperature: 0.85,\n json: true\n });\n \n let result;\n try {\n result = JSON.parse(completion.content);\n } catch (parseErr) {\n const match = completion.content.match(/\\{[\\s\\S]*\\}/);\n if (match) result = JSON.parse(match[0]);\n else throw parseErr;\n }\n \n const title = (result.title || 'Unknown Achievement').toString().slice(0, 40);\n const description = (result.description || 'No description available').toString().slice(0, 90);\n const score = Math.max(5, Math.min(100, Math.round((parseInt(result.score) || 10) / 5) * 5));\n \n showAchievement(title, description, score, action);\n \n } catch (error) {\n console.error('Error generating achievement:', error);\n const fallbackScore = Math.floor(Math.random() * 8) * 5 + 10;\n showAchievement(\n 'Achievement Generator Glitched',\n 'Even the AI is impressed by your action. Try again later!',\n fallbackScore,\n elements.actionInput.value.trim()\n );\n } finally {\n setLoading(false);\n }\n}\n\nfunction showAchievement(title, description, score, action) {\n const rarity = getRarity(score);\n \n elements.achievementTitle.textContent = title;\n elements.achievementDesc.textContent = description;\n elements.scoreValue.textContent = score;\n \n elements.rarityBadge.textContent = rarity.name;\n elements.rarityBadge.className = 'rarity-badge ' + rarity.class;\n \n elements.achievementContainer.classList.remove('hidden');\n achievementSound.play();\n \n requestAnimationFrame(() => {\n triggerParticles();\n });\n \n const achievement = {\n title,\n description,\n score,\n action,\n timestamp: new Date().toISOString()\n };\n recentAchievements.unshift(achievement);\n recentAchievements = recentAchievements.slice(0, 10);\n localStorage.setItem('recentAchievements', JSON.stringify(recentAchievements));\n displayRecentAchievements();\n \n hideTimeout = setTimeout(() => {\n elements.achievementContainer.classList.add('hidden');\n }, 6000);\n}\n\nfunction setLoading(isLoading) {\n const btnText = elements.generateBtn.querySelector('.btn-text');\n const btnLoading = elements.generateBtn.querySelector('.btn-loading');\n \n elements.generateBtn.disabled = isLoading;\n btnText.classList.toggle('hidden', isLoading);\n btnLoading.classList.toggle('hidden', !isLoading);\n}\n\nasync function shareAchievement() {\n const title = elements.achievementTitle.textContent;\n const description = elements.achievementDesc.textContent;\n const score = elements.scoreValue.textContent;\n \n const shareText = `🏆 Achievement Unlocked!\\n\\n\"${title}\"\\n${description}\\n${score}G`;\n \n if (navigator.share) {\n try {\n await navigator.share({ title: 'Xbox 360 Achievement', text: shareText });\n } catch (err) {\n if (err.name !== 'AbortError') console.error('Share failed:', err);\n }\n } else {\n try {\n await navigator.clipboard.writeText(shareText);\n elements.shareBtn.textContent = 'Copied!';\n setTimeout(() => elements.shareBtn.textContent = 'Share', 1800);\n } catch (err) {\n console.error('Copy failed:', err);\n }\n }\n}\n\nelements.generateBtn.addEventListener('click', generateAchievement);\nelements.shareBtn.addEventListener('click', shareAchievement);\n\nelements.actionInput.addEventListener('input', () => {\n clearTimeout(hideTimeout);\n elements.achievementContainer.classList.add('hidden');\n});\n\nelements.actionInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') generateAchievement();\n});\n\nelements.achievementContainer.addEventListener('mouseenter', () => {\n clearTimeout(hideTimeout);\n});\n\nelements.achievementContainer.addEventListener('mouseleave', () => {\n hideTimeout = setTimeout(() => {\n elements.achievementContainer.classList.add('hidden');\n }, 2000);\n});\n\ndisplayRecentAchievements();\n```\n\nWait, I need to make sure the share button doesn't trigger the mouseleave hide issue. It's inside the container so it should be fine.\n\nOne issue: on mobile, the achievement container is positioned with `right: 50%; transform: translateX(50%)` but the popup also has its own animation transforms. The CSS `.achievement-container` has `transform: translateX(50%)` on mobile, and `.achievement-popup` has its own animation transforms. These will combine via transform-style. Actually the container transform is static and the popup transform is animated. They should combine correctly because popup is a child.\n\nActually wait, `transform` on parent establishes containing block and also affects child transforms. The child animation transform is relative to its own coordinate system, so it should be fine.\n\nAnother issue: `hidden` class uses `display: none !important` but in the original CSS `.hidden` was just `display: none`. The container starts hidden. That's fine.\n\nI should verify the sound. Howler with mp3 local asset should work.\n\nAlso, I removed the inline style block for shake and put it in CSS. Good.\n\nLet me also ensure the AI prompt mentions JSON mode. The `json: true` is set. Good.\n\nI think this is a solid remaster. Let me now prepare the SEARCH/REPLACE blocks.\n\nActually, I realize I should double-check exact current file content for SEARCH matching.\n\nCurrent index.html content is exactly as provided. I'll copy it fully.\n\nCurrent styles.css content is exactly as provided. I'll copy it fully.\n\nCurrent app.js content is exactly as provided. I'll copy it fully.\n\nThis is a lot of text but manageable.\n\nLet me also consider: should I add instructions or \"how to use\"? The guidelines say no instructions unless explicitly requested. The current page has a hint, which is fine. I won't add more.\n\nShould I add a \"tap to start\"? No, the guidelines say don't add unless requested.\n\nMobile: main experience fits one screen. Recent achievements scroll internally if needed. Good.\n\nOne more thing: I should make sure the page is accessible and functional if websim.chat is not available? In the fallback I handle errors by showing a fallback achievement. Good.\n\nLet me also add a subtle improvement: after generating, keep the input focused? Not necessary.\n\nAlright, I'll output the changes now.\n\nindex.html\n```index.html\n```\n\nstyles.css\n```styles.css\n```\n\napp.js\n```app.js\n```\n\nSummary: Remastered your achievement simulator into a floating HUD experience with scanlines, a glowing Xbox-style frame, and green particle bursts on unlock. The popup now slides in like a real Xbox 360 notification with Bronze/Silver/Gold/Platinum rarity badges. I tightened the AI prompt, added JSON fallback parsing, and swapped error alerts for a graceful fallback achievement. The layout is now mobile-first and single-screen, with recent achievements stored in localStorage and a share/copy button.","page_description","This page is a web-based “achievement simulator” themed like an Xbox 360 HUD. It features a scanline overlay and HUD styling (e.g., a HUD online status…","cursor","eyJpZCI6Inp1d3h4OG5qbTQxNHpjcTVreTJ2In0","token","included",[],"about",{"_183":-5},"parent","routes/browser/layout","actionData","errors"]

Xbox 360 Achievement Generator