- 📅 2026-04-19T16:39:27.998Z
- 👁️ 22 katselukertaa
- 🔓 Julkinen
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sürprizin Hazır!</title>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffffff; /* Siyah ekran olmasın diye beyaz başlıyor */
font-family: 'Segoe UI', sans-serif;
overflow: hidden;
text-align: center;
transition: background 0.6s;
}
#kart {
background: white;
padding: 30px;
border-radius: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 85%;
max-width: 400px;
border: 5px solid #f1c40f;
position: relative;
}
#btn {
padding: 20px 60px;
font-size: 30px;
font-weight: bold;
background: #e74c3c;
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.gizli { display: none !important; }
/* YENİ: Emoji Kızın Stili */
.girl {
font-size: 90px;
display: block;
margin: 0 auto;
animation: jump 0.6s infinite alternate;
}
@keyframes jump {
from { transform: translateY(0); }
to { transform: translateY(-20px); }
}
.cake { font-size: 50px; display: block; margin: 10px 0; }
h1 { color: #ff4b5c; font-size: 22px; margin: 10px 0; }
.mesaj { color: #333; font-size: 18px; line-height: 1.5; }
</style>
</head>
<body>
<div id="kart">
<div id="baslangic">
<h2 style="color:#333">✨ SANA BİR SÜRPRİZİM VAR... ✨</h2>
<button id="btn" onclick="surpriziPatlat()">BAS!</button>
</div>
<div id="surpriz" class="gizli"
<span class="cake">🎂</span>
<h1>İYİ Kİ DOĞDUN TEYZEM! 💖</h1>
<p class="mesaj">
Dünyanın en tatlı teyzesine,<br>
<strong>yeğeni Yusuf'tan dezızına...</strong><br>
Seni kocaman seviyorum! ❤️
</p>
</div>
</div>
<audio id="ses" src="https://www.myinstants.com/media/sounds/party-horn-sound-effect.mp3" preload="auto"></audio>
<script>
function surpriziPatlat() {
var audio = document.getElementById('ses');
audio.play().catch(e => console.log("Ses engellendi ama devam..."));
document.getElementById('baslangic').classList.add('gizli');
document.getElementById('surpriz').classList.remove('gizli');
document.body.style.backgroundColor = '#ffc0cb';
document.getElementById('kart').style.borderColor = '#ff4b5c';
confetti({
particleCount: 150,
spread: 70,
origin: { y: 0.6 }
});
}
</script>
</body>
</html>