@joaobarrosfranca · 7/8/2026, 9:08:53 PM
Initial version — all lines are new.
+<!DOCTYPE html>+<html lang="pt-BR">+<head>+ <meta charset="UTF-8">+ <meta name="viewport" content="width=device-width, initial-scale=1.0">+ <title>Som de Prosperidade</title>+ <style>+ * { box-sizing: border-box; }+ html, body {+ height: 100%;+ margin: 0;+ padding: 0;+ overflow: hidden;+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);+ font-family: 'Arial', sans-serif;+ color: #fff;+ }++ .container {+ height: 100%;+ display: flex;+ flex-direction: column;+ align-items: center;+ justify-content: center;+ padding: 20px;+ overflow-y: auto;+ }++ .title {+ font-size: 24px;+ font-weight: bold;+ margin-bottom: 30px;+ text-align: center;+ text-shadow: 0 0 10px rgba(255,215,0,0.5);+ flex-shrink: 0;+ }++ .orb {+ width: 120px;+ height: 120px;+ border-radius: 50%;+ background: radial-gradient(circle at 30% 30%, #ffd700, #ffaa00);+ box-shadow: 0 0 30px rgba(255,215,0,0.7);+ margin: 20px 0;+ cursor: pointer;+ transition: all 0.2s;+ position: relative;+ flex-shrink: 0;+ }++ .orb:active {+ transform: scale(0.95);+ }++ .orb.pulse {+ animation: pulse 0.6s ease-out;+ }++ @keyframes pulse {+ 0% { transform: scale(1); box-shadow: 0 0 30px rgba(255,215,0,0.7); }+ 50% { transform: scale(1.1); box-shadow: 0 0 50px rgba(255,215,0,1); }+ 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255,215,0,0.7); }+ }++ .affirmation {+ font-size: 18px;+ text-align: center;+ margin: 30px 20px;+ min-height: 60px;+ display: flex;+ align-items: center;+ justify-content: center;+ color: #ffd700;+ font-weight: bold;+ text-shadow: 0 0 5px rgba(255,215,0,0.5);+ flex-shrink: 0;+ }++ .coins {+ position: fixed;+ font-size: 40px;+ pointer-events: none;+ animation: float-up 1.5s ease-out forwards;+ }++ @keyframes float-up {+ 0% { opacity: 1; transform: translateY(0) rotate(0deg); }+ 100% { opacity: 0; transform: translateY(-200px) rotate(360deg); }+ }++ .info {+ font-size: 12px;+ text-align: center;+ margin-top: 40px;+ color: #aaa;+ max-width: 300px;+ flex-shrink: 0;+ }++ .count {+ font-size: 28px;+ font-weight: bold;+ margin: 20px 0;+ color: #ffd700;+ flex-shrink: 0;+ }++ .controls {+ display: flex;+ gap: 10px;+ margin-top: 20px;+ flex-shrink: 0;+ }++ button {+ padding: 12px 30px;+ font-size: 16px;+ background: linear-gradient(135deg, #ffd700, #ffaa00);+ color: #000;+ border: none;+ border-radius: 25px;+ cursor: pointer;+ font-weight: bold;+ transition: all 0.3s;+ box-shadow: 0 0 15px rgba(255,215,0,0.4);+ }++ button:hover {+ transform: scale(1.05);+ box-shadow: 0 0 25px rgba(255,215,0,0.6);+ }++ button:active {+ transform: scale(0.95);+ }++ button.playing {+ background: linear-gradient(135deg, #ff6b6b, #ff4757);+ box-shadow: 0 0 25px rgba(255,107,107,0.6);+ }++ .status {+ font-size: 14px;+ color: #ffd700;+ margin-top: 10px;+ flex-shrink: 0;+ }+ </style>+</head>+<body>+ <div class="container">+ <div class="title">🔔 Tigela Tibetana de Prosperidade</div>++ <div class="count" id="count">Cliques: 0</div>++ <div class="orb" id="orb"></div>++ <div class="affirmation" id="affirmation">+ Clique na esfera dourada...+ </div>++ <div class="controls">+ <button id="playBtn">▶ TOCAR</button>+ <button id="stopBtn">⏹ PARAR</button>+ </div>++ <div class="status" id="status">Som relaxante pronto</div>++ <div class="info">+ Deixe o som de tigela tibetana tocando para atrair prosperidade!+ Sons puros e relaxantes que duram enquanto você quer 🧘♀️+ </div>+ </div>++ <script>+ const affirmations = [+ "💎 Abundância flui para mim!",+ "🏆 Sou merecedor de sucesso!",+ "✨ Prosperidade é meu direito!",+ "💰 Dinheiro vem com facilidade!",+ "🌟 Riqueza me cerca!",+ "👑 Sou um ímã de oportunidades!",+ "🚀 Meu potencial é infinito!",+ "💪 Conquisto meus objetivos!",+ "🎯 Sucesso é meu destino!",+ "🌈 A vida me favorece!"+ ];++ let count = 0;+ let audioContext = null;+ let oscillators = [];+ let gains = [];+ let isPlaying = false;+ let startTime = 0;++ function getAudioContext() {+ if (!audioContext) {+ const AC = window.AudioContext || window.webkitAudioContext;+ audioContext = new AC();+ }+ return audioContext;+ }++ function stopSound() {+ try {+ oscillators.forEach(osc => {+ try {+ osc.stop();+ } catch (e) {}+ });+ oscillators = [];+ gains = [];+ isPlaying = false;+ document.getElementById('playBtn').classList.remove('playing');+ document.getElementById('status').textContent = 'Som parado';+ } catch (e) {+ console.log('Erro ao parar:', e);+ }+ }++ function playTibetanBowl() {+ try {+ const ctx = getAudioContext();+ if (ctx.state === 'suspended') ctx.resume();++ stopSound();++ startTime = ctx.currentTime;+ isPlaying = true;+ document.getElementById('playBtn').classList.add('playing');+ document.getElementById('status').textContent = 'Som tocando...';++ // Frequências harmônicas da tigela tibetana (Em natural)+ const frequencies = [+ { freq: 110, duration: 8, volume: 0.25 }, // Base+ { freq: 164.81, duration: 8, volume: 0.2 }, // Harmônico+ { freq: 220, duration: 8, volume: 0.15 }, // Oitava+ { freq: 329.63, duration: 8, volume: 0.12 }, // Quinte+ { freq: 55, duration: 8, volume: 0.1 } // Sub-base+ ];++ frequencies.forEach(f => {+ const osc = ctx.createOscillator();+ const gain = ctx.createGain();+ const filter = ctx.createBiquadFilter();++ osc.connect(filter);+ filter.connect(gain);+ gain.connect(ctx.destination);++ osc.type = 'sine';+ osc.frequency.value = f.freq;++ // Filtro suave+ filter.type = 'lowpass';+ filter.frequency.value = 5000;+ filter.Q.value = 1;++ // Envoltório suave (fade in e fade out prolongado)+ gain.gain.setValueAtTime(0, ctx.currentTime);+ gain.gain.linearRampToValueAtTime(f.volume, ctx.currentTime + 0.5);+ gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + f.duration);++ osc.start(ctx.currentTime);+ osc.stop(ctx.currentTime + f.duration);++ oscillators.push(osc);+ gains.push(gain);+ });++ // Repetir o som após 7.5 segundos (loop suave)+ setTimeout(() => {+ if (isPlaying) {+ playTibetanBowl();+ }+ }, 7500);++ } catch (e) {+ console.log('Som falhou:', e);+ }+ }++ function createCoinAnimation(e) {+ const coin = document.createElement('div');+ coin.className = 'coins';+ coin.textContent = '💰';+ coin.style.left = e.clientX + 'px';+ coin.style.top = e.clientY + 'px';+ document.body.appendChild(coin);++ setTimeout(() => coin.remove(), 1500);+ }++ const orb = document.getElementById('orb');+ const playBtn = document.getElementById('playBtn');+ const stopBtn = document.getElementById('stopBtn');+ const affirmation = document.getElementById('affirmation');+ const countDisplay = document.getElementById('count');++ orb.addEventListener('click', (e) => {+ count++;+ countDisplay.textContent = `Cliques: ${count}`;++ orb.classList.remove('pulse');+ void orb.offsetWidth;+ orb.classList.add('pulse');++ createCoinAnimation(e);++ affirmation.textContent = affirmations[count % affirmations.length];++ if (!isPlaying) {+ playTibetanBowl();+ }+ });++ playBtn.addEventListener('click', playTibetanBowl);+ stopBtn.addEventListener('click', stopSound);++ affirmation.textContent = affirmations[0];++ // Pausar quando a aba fica invisible+ if (window.liveloop && window.liveloop.onVisibility) {+ window.liveloop.onVisibility(function(visible) {+ if (!visible && isPlaying) {+ try {+ const ctx = getAudioContext();+ ctx.suspend();+ } catch (e) {}+ } else if (visible && isPlaying) {+ try {+ const ctx = getAudioContext();+ ctx.resume();+ } catch (e) {}+ }+ });+ }+ </script>+</body>+</html>