<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>💖 Gülüm</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,sans-serif;}
body{
height:100vh;
overflow:hidden;
background:linear-gradient(180deg,#ffd6e8,#ffc2d9);
display:flex;
justify-content:center;
align-items:center;
}
#container{
text-align:center;
z-index:10;
padding:20px;
}
h1{
font-size:42px;
margin-bottom:40px;
color:#444;
animation:fade .8s;
}
@keyframes fade{
from{opacity:0;transform:translateY(-20px)}
to{opacity:1;transform:translateY(0)}
}
button{
padding:18px 42px;
border:none;
border-radius:18px;
font-size:24px;
font-weight:bold;
cursor:pointer;
transition:.25s;
}
#yes{
background:#ff4d88;
color:white;
box-shadow:0 10px 25px rgba(0,0,0,.2);
}
#yes:hover{
transform:scale(1.08);
}
#no{
background:white;
position:absolute;
}
#finish{
display:none;
text-align:center;
padding:30px;
animation:fade .8s;
max-width:700px;
}
#finish h2{
font-size:44px;
color:#ff4d88;
margin-bottom:25px;
}
#finish p{
font-size:24px;
line-height:1.8;
color:#444;
}
.heart{
position:absolute;
color:#ff4d88;
animation:fall linear infinite;
user-select:none;
}
@keyframes fall{
0%{
transform:translateY(-60px) rotate(0deg);
opacity:0;
}
20%{
opacity:1;
}
100%{
transform:translateY(110vh) rotate(360deg);
opacity:0;
}
}
</style>
</head>
<body>
<div id="container">
<h1>Beni Affediyor musun? 🥺</h1>
<button id="yes">Evet ❤️</button>
<button id="no">Hayır 🥺</button>
</div>
<div id="finish">
<h2>Teşekkürler, Gülüm! ❤️</h2>
<p>
Kalbini kırdım, farkındayım...<br><br>
Ama seni gerçekten çok seviyorum.<br>
Bir şans daha verdiğin için teşekkür ederim.<br><br>
Söz veriyorum, seni mutlu etmek için elimden geleni yapacağım.<br><br>
❤️ Seni çok seviyorum ❤️
</p>
</div>
<script>
const no=document.getElementById("no");
function move(){
let x=Math.random()*(window.innerWidth-150);
let y=Math.random()*(window.innerHeight-90);
no.style.left=x+"px";
no.style.top=y+"px";
}
move();
no.addEventListener("mouseenter",move);
no.addEventListener("touchstart",e=>{
e.preventDefault();
move();
});
document.getElementById("yes").onclick=()=>{
document.getElementById("container").style.display="none";
document.getElementById("finish").style.display="block";
}
for(let i=0;i<45;i++){
const h=document.createElement("div");