<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Happy 10th Monthsary π</title>
<style>
:root{--bg:#0a0a12;--card:#11121a;--accent:#ff6fb5;--accent2:#ffd1e8}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: radial-gradient(ellipse at 10% 20%, rgba(255,111,181,0.08), transparent 10%), radial-gradient(ellipse at 90% 80%, rgba(255,209,232,0.06), transparent 10%), var(--bg); color: #fff}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.card{width:100%;max-width:820px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:18px;padding:32px;box-shadow:0 8px 30px rgba(0,0,0,0.6);position:relative;overflow:hidden}
h1{margin:0;font-size:34px;text-align:center;letter-spacing:0.6px;color:var(--accent);text-shadow:0 0 18px rgba(255,111,181,0.28)}
.subtitle{text-align:center;margin-top:8px;color:var(--accent2)}
.hearts{display:flex;gap:10px;justify-content:center;margin:16px 0}
.heart{font-size:28px;transform-origin:center;animation:float 2.4s ease-in-out infinite}
.heart:nth-child(2){animation-delay:0.2s}
.heart:nth-child(3){animation-delay:0.4s}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}
.message{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);border-radius:12px;padding:18px;margin-top:18px;min-height:160px;font-size:16px;line-height:1.5;white-space:pre-wrap}
.controls{display:flex;gap:12px;justify-content:center;margin-top:18px}
.btn{background:linear-gradient(90deg,var(--accent),#ff9ad0);border:none;padding:12px 18px;border-radius:10px;font-weight:600;cursor:pointer;color:#2b0b14;box-shadow:0 6px 18px rgba(255,111,181,0.12)}
.btn[disabled]{opacity:0.6;cursor:default}
.small{font-size:13px;color:#cfc9d8;text-align:center;margin-top:12px}
/* little confetti hearts */
.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}
.confetti .p{position:absolute;font-size:18px;opacity:0;animation:drop 2200ms linear forwards}
@keyframes drop{0%{transform:translateY(-10vh) scale(0.6);opacity:0}10%{opacity:1}100%{transform:translateY(110vh) rotate(520deg);opacity:1}}
/* responsive */
@media (max-width:540px){h1{font-size:26px;padding:0 6px}.card{padding:18px}.message{font-size:15px}}
</style>
</head>
<body>
<div class="wrap">
<div class="card" role="main">
<h1 id="title">Click the heart to celebrate π</h1>
<div class="subtitle">I Love You Always ^^</div>
<div class="hearts">
<button id="startBtn" class="btn" aria-label="Start celebration">π Click me π</button>
</div>
<div id="message" class="message"></div>
<div class="controls">
<button id="replay" class="btn" style="display:none">Play Again</button>
</div>
<div class="small">Tip: click the pink button and wait β the message will type itself β₯</div>
<div class="confetti" id="confetti"></div>
</div>
</div>
<script>
const start = document.getElementById('startBtn');
const msg = document.getElementById('message');
const title = document.getElementById('title');
const replay = document.getElementById('replay');
const confetti = document.getElementById('confetti');
// Your special message
const longText = `Good morningg mylove, Nani, Naniyaaa, Palablab, Lovee, happy 10th monthsary pooo^^. Wjd ko katuo mo abot ta og 10months ky tungod sa probs or break up nga mga nahitabo. Sorry now pa naka great og taas2 hehe pinaghandaan najd nko, ky tong last nag mad kw ky wla ko naka great sa ato mot2 pero karon bawing bawi^^. Palablab sensya d maka uli imo palablab kabaw nka bc imo bb. Bawi rko sunod tib on ra nko December. Bahalag lajo ta Ron remember naa rko always mo support sa imo poo^^. Salamat palablab bisan tupak ko panagsa mo kalit rag ka kang a ma sabtan gihpon ko nmo hehe that's why iloveyou ka talaga.Sensya taas pride imo palablab di mag pa pilde π₯Ίπ. Pero bisan ani ko ka buang, remember djd ko mag cheat sa imo pooo. These past ten months daghan mga unforgettable memory ato nabuhat isa na ddto ang alam mo naaa whahah, laag bisag Asa para lang Maka talk Nan tarong, mga away na d masabtan pero pg magkita ma ok ra hehe, mga problema nga maka hilak rkn ta pg e share nto sa usat usa and etc. Happy kaayo ko I hope mag dugay Pata palablab ILOVEYOUUU ALWAYSS MYLOVEππππ`;
function typeMessage(fullText, container, speed=18, onComplete=null){
container.textContent = '';
let i = 0;
const t = setInterval(()=>{
container.textContent += fullText.charAt(i);
i++;
container.scrollTop = container.scrollHeight;
if(i >= fullText.length){
clearInterval(t);
if(onComplete) onComplete();
}
}, speed);
return t;
}
function spawnConfetti(){
confetti.innerHTML = '';
const hearts = ['π','β€οΈ','π','π','β£οΈ','π'];
for(let i=0;i<22;i++){
const el = document.createElement('div');
el.className = 'p';
el.style.left = (Math.random()*100) + '%';
el.style.fontSize = (12 + Math.random()*28) + 'px';
el.style.animationDelay = (Math.random()*600) + 'ms';
el.style.transform = `rotate(${Math.random()*360}deg)`;
el.textContent = hearts[Math.floor(Math.random()*hearts.length)];
confetti.appendChild(el);
}
setTimeout(()=> confetti.innerHTML = '', 2600);
}
start.addEventListener('click', async ()=>{
start.disabled = true;
title.textContent = 'β¨ Happy 10th Monthsary, mylove! β¨';
spawnConfetti();
setTimeout(()=>{
typeMessage(longText, msg, 18, ()=>{
replay.style.display = 'inline-block';
});
}, 700);
});
replay.addEventListener('click', ()=>{
msg.textContent = '';
title.textContent = 'Click the heart to celebrate π';
start.disabled = false;
replay.style.display = 'none';
});
</script>
</body>
</html>