<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sorry Krishna</title>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: "Poppins", sans-serif;
height: 100vh;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
background: white;
padding: 30px;
width: 360px;
border-radius: 15px;
box-shadow: 0 0 20px #00000030;
text-align: center;
animation: fadeIn 1.5s ease-in-out;
}
h2 {
color: #ff4d6d;
margin-bottom: 10px;
}
.krishna-name {
font-family: 'Great Vibes', cursive;
font-size: 40px;
color: #ff1e6a;
margin-bottom: 5px;
}
input {
width: 90%;
padding: 10px;
border-radius: 8px;
border: 1px solid #aaa;
margin-top: 12px;
font-size: 15px;
}
button {
padding: 12px 22px;
margin-top: 18px;
border: none;
background: #ff4d6d;
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
button:hover {
background: #ff1e49;
}
#forgiveBtn {
display: none;
background: #ff1e6a;
margin-top: 25px;
}
.heart {
position: fixed;
bottom: -10px;
color: rgba(255, 80, 120, 0.8);
font-size: 20px;
animation: floatUp 6s linear infinite;
}
@keyframes floatUp {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-800px); opacity: 0; }
}
.bubble-heart {
position: absolute;
color: #ff4d6d;
font-size: 18px;
animation: rise 2s ease-out forwards;
pointer-events: none;
}
@keyframes rise {
0% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(-120px) scale(1.8); opacity: 0; }
}
.modal-bg {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
display: none;
justify-content: center;
align-items: center;
backdrop-filter: blur(4px);
}
.modal {
background: rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
width: 320px;
color: #ffffff;
box-shadow: 0 0 10px #00000030;
animation: fadeIn 0.7s ease-out;
text-align: center;
}
.close {
margin-top: 15px;
padding: 10px 20px;
background: #ff1e6a;
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
}
.love-msg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Great Vibes', cursive;
font-size: 60px;
color: #fff;
text-shadow: 0 0 20px #ff1e6a, 0 0 40px #ff1e6a;
opacity: 0;
animation: loveFade 3s ease-out forwards;
display: none;
}
@keyframes loveFade {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
</style>
</head>
<body>
<audio autoplay loop src="https://cdn.pixabay.com/audio/2022/05/27/audio_7a3a3b6719.mp3"></audio>
<div class="container">
<div class="krishna-name">Krishna ❤️</div>
<h2>Enter Your Birthday Date</h2>
<input type="date" id="bday">
<button onclick="showSorry()">Submit</button>
<button id="forgiveBtn" onclick="heartBurst()">Forgive Me ❤️</button>
</div>
<div class="modal-bg" id="modalBg">
<div class="modal">
<p id="modalText"></p>
<button class="close" onclick="closeModal()">Close</button>
</div>
</div>
<div class="love-msg" id="loveMsg">I Love You Krishna ❤️</div>
<script>
function showSorry() {
let date = document.getElementById("bday").value;
if (!date) return alert("Please enter your birthday date, Krishna.");
let apology =
"Krishna... I’m truly sorry. I should have been there for you. " +
"You deserve love and joy, and I hurt you unintentionally. " +
"You mean more to me than words. Please forgive me.";
document.getElementById("modalText").innerText = apology;
document.getElementById("modalBg").style.display = "flex";
document.getElementById("forgiveBtn").style.display = "inline-block";
}
function closeModal() {
document.getElementById("modalBg").style.display = "none";
}
function createHeart() {
const heart = document.createElement("div");
heart.className = "heart";
heart.innerHTML = "❤️";
heart.style.left = Math.random() * window.innerWidth + "px";
heart.style.fontSize = (20 + Math.random() * 20) + "px";
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 6000);
}
setInterval(createHeart, 800);
function heartBurst() {
const btn = document.getElementById("forgiveBtn");
const rect = btn.getBoundingClientRect();
for (let i = 0; i < 12; i++) {
let heart = document.createElement("div");
heart.className = "bubble-heart";
heart.innerHTML = "❤️";
heart.style.left = rect.left + rect.width/2 + (Math.random()*40 - 20) + "px";
heart.style.top = rect.top + "px";
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 2000);
}
setTimeout(() => {
document.getElementById("loveMsg").style.display = "block";
}, 600);
}
</script>
</body>
</html>