@joaobarrosfranca · 8/12/2026, 7:14:39 AM
Versão inicial — todas as linhas são novas.
+<!DOCTYPE html>+<html lang="en">+<head>+ <meta charset="UTF-8">+ <meta name="viewport" content="width=device-width, initial-scale=1.0">+ <title>Three-Second Time Capsule</title>+ <style>+ * {+ box-sizing: border-box;+ }++ html, body {+ height: 100%;+ margin: 0;+ overflow: hidden;+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;+ }++ body {+ background: linear-gradient(135deg, #faf8f3 0%, #f5f0e8 100%);+ display: flex;+ flex-direction: column;+ align-items: center;+ justify-content: center;+ padding: 0;+ }++ .container {+ width: 100%;+ height: 100%;+ max-width: 360px;+ display: flex;+ flex-direction: column;+ align-items: center;+ justify-content: space-between;+ padding: 20px;+ position: relative;+ }++ .header {+ text-align: center;+ margin-top: 10px;+ z-index: 10;+ }++ .title {+ font-size: 24px;+ font-weight: 700;+ background: linear-gradient(135deg, #5b2d7d 0%, #ff6b35 100%);+ -webkit-background-clip: text;+ -webkit-text-fill-color: transparent;+ background-clip: text;+ margin: 0;+ letter-spacing: -0.5px;+ }++ .countdown-container {+ position: relative;+ width: 80px;+ height: 80px;+ margin: 15px 0;+ display: flex;+ align-items: center;+ justify-content: center;+ }++ .countdown-ring {+ position: absolute;+ width: 80px;+ height: 80px;+ border-radius: 50%;+ border: 3px solid #e8dcc8;+ }++ .countdown-ring.active {+ border-color: #5b2d7d;+ box-shadow: 0 0 20px rgba(91, 45, 125, 0.4);+ animation: pulse-ring 0.6s ease-out;+ }++ @keyframes pulse-ring {+ 0% {+ box-shadow: 0 0 20px rgba(91, 45, 125, 0.4);+ transform: scale(1);+ }+ 100% {+ box-shadow: 0 0 40px rgba(91, 45, 125, 0.1);+ transform: scale(1.1);+ }+ }++ .countdown-text {+ font-size: 36px;+ font-weight: 700;+ color: #5b2d7d;+ position: relative;+ z-index: 2;+ }++ .status-text {+ font-size: 13px;+ color: #8b7355;+ margin-top: 5px;+ min-height: 18px;+ font-weight: 500;+ }++ .cards-wrapper {+ display: flex;+ gap: 12px;+ justify-content: center;+ align-items: flex-start;+ margin: 20px 0;+ flex: 1;+ max-height: 380px;+ perspective: 1200px;+ }++ .card {+ width: 90px;+ height: 140px;+ cursor: pointer;+ position: relative;+ transform-style: preserve-3d;+ transition: transform 0.1s ease-out;+ }++ .card:hover {+ transform: translateY(-8px);+ }++ .card.flipped {+ pointer-events: none;+ }++ .card-face {+ position: absolute;+ width: 100%;+ height: 100%;+ backface-visibility: hidden;+ display: flex;+ flex-direction: column;+ align-items: center;+ justify-content: center;+ border-radius: 12px;+ font-weight: 700;+ font-size: 18px;+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);+ transition: all 0.3s ease;+ }++ .card-front {+ background: linear-gradient(135deg, #5b2d7d 0%, #7d3fa0 100%);+ color: #fff;+ border: 2px solid rgba(255, 107, 53, 0.3);+ z-index: 2;+ }++ .card-front::before {+ content: '✨';+ font-size: 32px;+ margin-bottom: 8px;+ animation: float 2.5s ease-in-out infinite;+ }++ @keyframes float {+ 0%, 100% { transform: translateY(0px); }+ 50% { transform: translateY(-8px); }+ }++ .card-back {+ background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);+ color: #fff;+ transform: rotateY(180deg);+ padding: 12px;+ text-align: center;+ font-size: 14px;+ line-height: 1.4;+ border: 2px solid rgba(91, 45, 125, 0.2);+ z-index: 1;+ }++ .card.flipping .card-front {+ transform: rotateY(180deg);+ }++ .card.flipping .card-back {+ transform: rotateY(0deg);+ }++ .card:nth-child(1) .card-front {+ background: linear-gradient(135deg, #5b2d7d 0%, #7d3fa0 100%);+ }++ .card:nth-child(2) .card-front {+ background: linear-gradient(135deg, #6b3d8d 0%, #8d4fb0 100%);+ }++ .card:nth-child(3) .card-front {+ background: linear-gradient(135deg, #7b4d9d 0%, #9d5fc0 100%);+ }++ .card-label {+ font-size: 12px;+ color: rgba(255, 255, 255, 0.8);+ margin-top: 6px;+ text-transform: uppercase;+ letter-spacing: 1px;+ }++ .result-section {+ min-height: 60px;+ text-align: center;+ padding: 12px 16px;+ background: rgba(91, 45, 125, 0.08);+ border-radius: 12px;+ border: 2px solid #e8dcc8;+ margin: 0 0 20px 0;+ }++ .result-label {+ font-size: 11px;+ color: #8b7355;+ text-transform: uppercase;+ letter-spacing: 1px;+ font-weight: 600;+ margin-bottom: 6px;+ }++ .result-text {+ font-size: 16px;+ color: #5b2d7d;+ font-weight: 600;+ line-height: 1.4;+ word-break: break-word;+ }++ .share-text {+ font-size: 12px;+ color: #aaa;+ margin-top: 8px;+ font-style: italic;+ }++ .button-row {+ display: flex;+ gap: 12px;+ justify-content: center;+ width: 100%;+ margin-bottom: 20px;+ }++ button {+ padding: 14px 24px;+ border: none;+ border-radius: 10px;+ font-size: 15px;+ font-weight: 700;+ cursor: pointer;+ transition: all 0.2s ease;+ text-transform: uppercase;+ letter-spacing: 0.5px;+ }++ .btn-primary {+ background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);+ color: #fff;+ box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);+ min-width: 140px;+ }++ .btn-primary:active {+ transform: scale(0.96);+ box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);+ }++ .btn-secondary {+ background: #5b2d7d;+ color: #fff;+ box-shadow: 0 4px 15px rgba(91, 45, 125, 0.3);+ min-width: 140px;+ }++ .btn-secondary:active {+ transform: scale(0.96);+ box-shadow: 0 2px 8px rgba(91, 45, 125, 0.2);+ }++ .btn-copy {+ background: #e8dcc8;+ color: #5b2d7d;+ padding: 10px 18px;+ font-size: 13px;+ min-width: auto;+ }++ .btn-copy:active {+ transform: scale(0.94);+ }++ .cta-text {+ font-size: 12px;+ color: #8b7355;+ margin-top: 12px;+ text-align: center;+ font-weight: 500;+ }++ .prompt {+ font-size: 13px;+ color: #8b7355;+ margin-top: 8px;+ font-style: italic;+ }++ .hide {+ display: none;+ }+ </style>+</head>+<body>+ <div class="container">+ <div class="header">+ <h1 class="title">✨ Time Capsule</h1>+ <div class="countdown-container">+ <div class="countdown-ring" id="countdownRing"></div>+ <div class="countdown-text" id="countdownText">3</div>+ </div>+ <p class="status-text" id="statusText">Pick a card...</p>+ </div>++ <div class="cards-wrapper" id="cardsWrapper">+ <div class="card" id="card0">+ <div class="card-face card-front">+ ✨+ <div class="card-label">Past</div>+ </div>+ <div class="card-face card-back"></div>+ </div>+ <div class="card" id="card1">+ <div class="card-face card-front">+ ✨+ <div class="card-label">Present</div>+ </div>+ <div class="card-face card-back"></div>+ </div>+ <div class="card" id="card2">+ <div class="card-face card-front">+ ✨+ <div class="card-label">Future</div>+ </div>+ <div class="card-face card-back"></div>+ </div>+ </div>++ <div class="result-section" id="resultSection" style="display: none;">+ <div class="result-label" id="resultLabel">Your Result</div>+ <div class="result-text" id="resultText"></div>+ <div class="share-text" id="shareText"></div>+ </div>++ <div class="button-row">+ <button class="btn-secondary" id="replayBtn" style="display: none;">↻ Play Again</button>+ <button class="btn-copy" id="copyBtn" style="display: none;">📋 Copy Result</button>+ </div>++ <p class="cta-text">💬 Comment which card you chose!</p>+ </div>++ <script>+ const cardLabels = ['Past', 'Present', 'Future'];++ const prompts = {+ 0: [+ { dare: "You once won a dance-off", mood: "Nostalgic" },+ { dare: "Your first pet was legendary", mood: "Wistful" },+ { dare: "You made someone smile today", mood: "Proud" },+ { dare: "You survived a wild adventure", mood: "Grateful" },+ { dare: "You learned something new yesterday", mood: "Curious" }+ ],+ 1: [+ { dare: "You're vibing at 💯 energy", mood: "Thriving" },+ { dare: "You need coffee ☕ ASAP", mood: "Sleepy" },+ { dare: "You're ready to conquer anything", mood: "Bold" },+ { dare: "You're in your creative era", mood: "Inspired" },+ { dare: "You deserve a treat right now", mood: "Deserving" }+ ],+ 2: [+ { dare: "You'll discover something amazing", mood: "Hopeful" },+ { dare: "You'll make someone's day", mood: "Generous" },+ { dare: "You'll level up soon", mood: "Optimistic" },+ { dare: "You'll laugh really hard", mood: "Joyful" },+ { dare: "You'll find your next big win", mood: "Lucky" }+ ]+ };++ let gameState = 'playing';+ let selectedCard = null;+ let countdown = 3;+ let audioCtx = null;++ function initAudio() {+ if (!audioCtx) {+ const AC = window.AudioContext || window.webkitAudioContext;+ audioCtx = new AC();+ }+ return audioCtx;+ }++ function playSound(frequency = 800, duration = 0.15, type = 'sine') {+ try {+ const ctx = initAudio();+ if (ctx.state === 'suspended') {+ ctx.resume();+ }+ const osc = ctx.createOscillator();+ const gain = ctx.createGain();+ osc.connect(gain);+ gain.connect(ctx.destination);+ osc.type = type;+ osc.frequency.value = frequency;+ gain.gain.setValueAtTime(0.15, ctx.currentTime);+ gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + duration);+ osc.start(ctx.currentTime);+ osc.stop(ctx.currentTime + duration);+ } catch (e) {+ // Audio not available, continue silently+ }+ }++ function startCountdown() {+ countdown = 3;+ gameState = 'playing';+ selectedCard = null;+ updateCountdown();+ document.getElementById('countdownRing').classList.add('active');+ document.getElementById('statusText').textContent = 'Pick a card...';+ document.getElementById('resultSection').style.display = 'none';+ document.getElementById('replayBtn').style.display = 'none';+ document.getElementById('copyBtn').style.display = 'none';++ document.querySelectorAll('.card').forEach(card => {+ card.classList.remove('flipping', 'flipped');+ });++ const timer = setInterval(() => {+ countdown--;+ updateCountdown();+ playSound(600 + countdown * 100, 0.1);++ if (countdown === 0) {+ clearInterval(timer);+ document.getElementById('countdownRing').classList.remove('active');+ endRound();+ }+ }, 1000);+ }++ function updateCountdown() {+ document.getElementById('countdownText').textContent = countdown;+ }++ function endRound() {+ gameState = 'ended';+ if (selectedCard === null) {+ document.getElementById('statusText').textContent = '⏰ Time\'s up!';+ playSound(300, 0.3);+ }+ document.getElementById('replayBtn').style.display = 'block';+ document.getElementById('copyBtn').style.display = 'block';+ }++ function revealCard(index) {+ if (gameState !== 'playing') return;+ if (selectedCard !== null) return;++ selectedCard = index;+ gameState = 'ended';+ const card = document.getElementById(`card${index}`);+ card.classList.add('flipping', 'flipped');++ playSound(800, 0.2);++ const promptList = prompts[index];+ const chosen = promptList[Math.floor(Math.random() * promptList.length)];++ setTimeout(() => {+ const label = cardLabels[index];+ document.getElementById('resultLabel').textContent = `From ${label}:`;+ document.getElementById('resultText').textContent = chosen.dare;+ document.getElementById('shareText').textContent = `✨ Mood: ${chosen.mood}`;+ document.getElementById('resultSection').style.display = 'block';+ document.getElementById('statusText').textContent = '🎉 Revealed!';+ document.getElementById('replayBtn').style.display = 'block';+ document.getElementById('copyBtn').style.display = 'block';++ const backFace = card.querySelector('.card-back');+ backFace.textContent = chosen.dare;++ playSound(1200, 0.25);+ }, 300);+ }++ function copyResult() {+ const label = cardLabels[selectedCard];+ const resultText = document.getElementById('resultText').textContent;+ const moodText = document.getElementById('shareText').textContent;+ const fullText = `${label}: ${resultText}\n${moodText}\n💬 Comment which card you chose!`;++ if (navigator.clipboard) {+ navigator.clipboard.writeText(fullText);+ const btn = document.getElementById('copyBtn');+ const originalText = btn.textContent;+ btn.textContent = '✓ Copied!';+ playSound(1400, 0.15);+ setTimeout(() => {+ btn.textContent = originalText;+ }, 1500);+ }+ }++ document.getElementById('card0').addEventListener('click', () => revealCard(0));+ document.getElementById('card1').addEventListener('click', () => revealCard(1));+ document.getElementById('card2').addEventListener('click', () => revealCard(2));++ document.getElementById('replayBtn').addEventListener('click', startCountdown);+ document.getElementById('copyBtn').addEventListener('click', copyResult);++ // Visibility & audio pause+ if (window.liveloop) {+ window.liveloop.onVisibility(function(visible) {+ if (!visible) {+ if (audioCtx) {+ audioCtx.suspend();+ }+ } else {+ if (audioCtx && audioCtx.state === 'suspended') {+ audioCtx.resume();+ }+ }+ });+ }++ startCountdown();+ </script>+</body>+</html>