Você receberá um HTML de fundo animado (Space/cosmos). Anali...
Prompt
Você receberá um HTML de fundo animado (Space/cosmos). Analise, corrija bugs e entregue UM único HTML autoexecutável, COMPLETO, offline, sem CDN, melhor que o original. OBRIGATÓRIO — todos visíveis e funcionando: - Gradiente de fundo escuro - 4+ camadas de estrelas (milhares), twinkle, movimento/parallax - 3+ nebulosas coloridas (roxo, azul, rosa), rotação e drift - Estrelas cadentes (15–60s), resize com debounce - prefers-reduced-motion, autoexecutável ao abrir IFRAME (app React/Capacitor): - NUNCA z-index: -1 - Use window.innerWidth/innerHeight (NÃO getBoundingClientRect) - Nebulosas: baseOpacity fixo (nunca opacity *= fator a cada frame) - Estrutura: #space-bg > canvas (+ #vignette opcional), z-index: 0 Melhore: cores, profundidade, Via Láctea/vignette opcional, parallax mouse. Entregue APENAS o HTML completo (<!DOCTYPE html>…</html>), sem explicações nem "…resto igual…". Meu HTML: [<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Space 2 Background</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; } #space-bg { position: fixed; inset: 0; z-index: -1; background: #000; } canvas { position: absolute; inset: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="space-bg"> <canvas id="canvas"></canvas> </div> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let width = window.innerWidth; let height = window.innerHeight; let animationId = null; let stars = []; let nebulae = []; let shootingStars = []; let lastShootingStar = Date.now(); let time = 0; function resize() { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; initStars(); initNebulae(); } function initStars() { const layers = [ { count: 4000, size: 0.5, speed: 0.00625, opacity: 0.3, color: '#e0e7ff' }, { count: 2000, size: 1, speed: 0.01875, opacity: 0.6, color: '#ffffff' }, { count: 500, size: 1.5, speed: 0.0375, opacity: 0.9, color: '#fbbf24' }, { count: 100, size: 2, speed: 0.0625, opacity: 1, color: '#60a5fa' } ]; stars = []; layers.forEach(layer => { for (let i = 0; i < layer.count; i++) { stars.push({ x: Math.random() * width, y: Math.random() * height, size: layer.size * (0.5 + Math.random()), speed: layer.speed * (0.5 + Math.random()), opacity: layer.opacity * (0.5 + Math.random()), baseOpacity: layer.opacity, twinkleSpeed: 0.01 + Math.random() * 0.02, twinklePhase: Math.random() * Math.PI * 2, color: layer.color }); } }); } function initNebulae() { nebulae = [ { x: width * 0.2, y: height * 0.3, radius: 300 + Math.random() * 200, color: { r: 139, g: 92, b: 246 }, opacity: 0.08, speed: 0.0025, rotation: 0, rotationSpeed: 0.0000625 }, { x: width * 0.7, y: height * 0.6, radius: 250 + Math.random() * 150, color: { r: 59, g: 130, b: 246 }, opacity: 0.06, speed: 0.001875, rotation: 0, rotationSpeed: -0.0000375 }, { x: width * 0.5, y: height * 0.8, radius: 200 + Math.random() * 100, color: { r: 236, g: 72, b: 153 }, opacity: 0.05, speed: 0.003125, rotation: 0, rotationSpeed: 0.0000875 } ]; } function drawNebula(nebula) { ctx.save(); ctx.translate(nebula.x, nebula.y); ctx.rotate(nebula.rotation); const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, nebula.radius); gradient.addColorStop(0, `rgba(${nebula.color.r}, ${nebula.color.g}, ${nebula.color.b}, ${nebula.opacity})`); gradient.addColorStop(0.4, `rgba(${nebula.color.r}, ${nebula.color.g}, ${nebula.color.b}, ${nebula.opacity * 0.5})`); gradient.addColorStop(0.7, `rgba(${nebula.color.r}, ${nebula.color.g}, ${nebula.color.b}, ${nebula.opacity * 0.2})`); gradient.addColorStop(1, 'transparent'); ctx.fillStyle = gradient; ctx.fillRect(-nebula.radius, -nebula.radius, nebula.radius * 2, nebula.radius * 2); ctx.restore(); } function animate() { ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, width, height); time += 0.016; nebulae.forEach(nebula => { nebula.x -= nebula.speed; nebula.rotation += nebula.rotationSpeed; nebula.opacity = nebula.opacity * (0.98 + 0.02 * Math.sin(time * 0.5)); if (nebula.x < -nebula.radius) nebula.x = width + nebula.radius; drawNebula(nebula); }); stars.forEach(star => { star.x -= star.speed; if (star.x < 0) star.x = width; star.opacity = star.baseOpacity * (0.7 + 0.3 * Math.sin(time * star.twinkleSpeed + star.twinklePhase)); ctx.fillStyle = star.color; ctx.globalAlpha = star.opacity; ctx.beginPath(); ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2); ctx.fill(); if (star.size > 1.5) { ctx.globalAlpha = star.opacity * 0.3; ctx.beginPath(); ctx.arc(star.x, star.y, star.size * 2, 0, Math.PI * 2); ctx.fill(); } }); const now = Date.now(); if (now - lastShootingStar > 30000 + Math.random() * 30000) { shootingStars.push({ x: width + 50, y: Math.random() * height * 0.5, length: 80 + Math.random() * 50, speed: 1.875 + Math.random() * 1.25, opacity: 1, angle: Math.PI / 4 + Math.random() * Math.PI / 6 }); lastShootingStar = now; } shootingStars = shootingStars.filter(shootingStar => { shootingStar.x -= shootingStar.speed * Math.cos(shootingStar.angle); shootingStar.y += shootingStar.speed * Math.sin(shootingStar.angle); shootingStar.opacity -= 0.02; if (shootingStar.opacity > 0) { const gradient = ctx.createLinearGradient( shootingStar.x, shootingStar.y, shootingStar.x + shootingStar.length * Math.cos(shootingStar.angle), shootingStar.y - shootingStar.length * Math.sin(shootingStar.angle) ); gradient.addColorStop(0, `rgba(255,255,255,${shootingStar.opacity})`); gradient.addColorStop(1, 'transparent'); ctx.strokeStyle = gradient; ctx.lineWidth = 2; ctx.globalAlpha = shootingStar.opacity; ctx.beginPath(); ctx.moveTo(shootingStar.x, shootingStar.y); ctx.lineTo( shootingStar.x + shootingStar.length * Math.cos(shootingStar.angle), shootingStar.y - shootingStar.length * Math.sin(shootingStar.angle) ); ctx.stroke(); return true; } return false; }); ctx.globalAlpha = 1; animationId = requestAnimationFrame(animate); } window.addEventListener('resize', resize); resize(); animate(); </script> </body> </html>]
A system prompt was added to support web rendering
Response not available