Untitled
unknown
plain_text
a year ago
2.4 kB
2
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cartão Surpresa Gótico</title> <style> body { background-color: #1f1f1f; color: #ffffff; text-align: center; font-family: 'Gothic', sans-serif; } button { background-color: #800080; color: #ffffff; padding: 10px 20px; font-size: 16px; margin: 10px; cursor: pointer; border: none; border-radius: 5px; } </style> </head> <body> <h1>Cartão Surpresa Gótico</h1> <button id="btnSurpresa">Surpresa</button> <button id="btnMusica">Tocar Música</button> <button id="btnBaloes">Balões</button> <audio id="audioPlayer" src="The Vampire FROM Nazareth.mp3"></audio> <script> document.getElementById('btnSurpresa').addEventListener('click', function() { alert('Parabéns! 🎉'); }); document.getElementById('btnMusica').addEventListener('click', function() { var audioPlayer = document.getElementById('audioPlayer'); if (audioPlayer.paused) { audioPlayer.play(); } else { audioPlayer.pause(); audioPlayer.currentTime = 0; } }); document.getElementById('btnBaloes').addEventListener('click', function() { criarBaloes(); }); function criarBaloes() { var numBaloes = 10; for (var i = 0; i < numBaloes; i++) { var balao = document.createElement('div'); balao.className = 'balao'; balao.style.left = Math.random() * 90 + 'vw'; document.body.appendChild(balao); animarBalao(balao); } } function animarBalao(balao) { var alturaMax = window.innerHeight; var duracao = Math.random() * 8 + 4; balao.style.animation = 'subir ' + duracao + 's linear'; balao.addEventListener('animationend', function() { balao.remove(); }); } </script> </body> </html>
Editor is loading...
Leave a Comment