<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Missão Confidencial</title>
<style>
body {
background-color: #b30000;
color: white;
font-family: 'Courier New', monospace;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
.text {
font-size: 1.5rem;
margin-bottom: 20px;
white-space: pre-wrap;
word-wrap: break-word;
opacity: 0;
}
.button {
background-color: #ff6666;
border: none;
color: white;
padding: 10px 20px;
font-size: 1.2rem;
cursor: pointer;
border-radius: 5px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s, transform 0.5s;
}
.button:hover {
background-color: #ff4d4d;
}
.hearts {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: -1;
}
.heart {
position: absolute;
width: 20px;
height: 20px;
background-color: #ff6666;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
animation: float 3s infinite;
}
@keyframes float {
0% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(0, -50px) rotate(180deg);
}
100% {
transform: translate(0, 0) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="text" id="text"></div>
<button class="button" id="acceptButton">Missão aceita ✅</button>
</div>
<div class="hearts" id="hearts"></div>
<audio id="heartbeatSound" src="https://www.soundjay.com/button/beep-07.wav"></audio>
<script>
const textElement = document.getElementById('text');
const acceptButton = document.getElementById('acceptButton');
const heartbeatSound = document.getElementById('heartbeatSound');
const heartsContainer = document.getElementById('hearts');
const messages = [
'⚠️ Arquivo confidencial desbloqueado.',
'Agente Ricardo, sua missão é simples (ou quase 😌):',
'Cuidar, proteger e valorizar o coração dela.',
'Risco: se apaixonar ainda mais.',
'A recompensa? Amor verdadeiro, reciprocidade e um lugar reservado nele só pra você. ❤️'
];
let currentMessageIndex = 0;
function typeMessage() {
if (currentMessageIndex < messages.length) {
let currentMessage = messages[currentMessageIndex];
let charIndex = 0;
textElement.textContent = '';
textElement.style.opacity = 1;
const typingInterval = setInterval(() => {
textElement.textContent += currentMessage.charAt(charIndex);
charIndex++;
if (charIndex === currentMessage.length) {
clearInterval(typingInterval);
currentMessageIndex++;
setTimeout(typeMessage, 500);
}
}, 100);
} else {
acceptButton.style.opacity = 1;
acceptButton.style.transform = 'translateY(0)';
}
}
function createHeart() {
const heart = document.createElement('div');
heart.classList.add('heart');
const size = Math.random() * 10 + 10;
heart.style.width = `${size}px`;
heart.style.height = `${size}px`;
heart.style.animationDuration = `${Math.random() * 2 + 2}s`;
heart.style.animationDelay = `${Math.random() * 2}s`;
heart.style.left = `${Math.random() * 100}%`;
heart.style.top = `${Math.random() * 100}%`;
heartsContainer.appendChild(heart);
}
acceptButton.addEventListener('click', () => {
heartbeatSound.play();
for (let i = 0; i < 30; i++) {
createHeart();
}
setTimeout(() => {
textElement.textContent = 'Missão aceita. Conexão estabelecida. ❤️';
}, 2000);
});
typeMessage();
</script>
</body>
</html>