<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>For Ishikaaa — A Letter</title>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Josefin+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root{
--bg:#fff6f6;
--card:#fff;
--accent:#e53935;
--text:#3a2b2b;
}
*{box-sizing:border-box}
body{
margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
background: radial-gradient(circle at 20% 10%, #fff0f0, transparent 20%),
radial-gradient(circle at 80% 90%, #fff6f0, transparent 20%),
var(--bg);
font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
color:var(--text);
overflow:hidden;
}
.scene{
width:min(920px,94vw);background:var(--card);border-radius:18px;padding:36px;box-shadow:0 12px 40px rgba(0,0,0,0.12);
position:relative;z-index:2;
}
h1{
font-family:'Great Vibes', cursive;font-size:48px;margin:0;color:var(--accent);letter-spacing:1px;text-align:center;
}
.sub{ text-align:center;margin-top:6px;color:#6b4d4d;font-size:14px;}
.letter{
margin-top:22px;font-size:18px;line-height:1.7;padding:22px;border-radius:12px;background:linear-gradient(180deg,#fff,#fffaf8);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.signature{font-weight:600;margin-top:18px;text-align:right;font-size:16px}
.btn-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px}
.hint{font-size:15px;color:#b23a3a;font-weight:500;text-align:center;}
.red-btn{
background:linear-gradient(180deg,#ff5151,#e53935);color:white;border:none;padding:12px 20px;border-radius:999px;font-weight:700;cursor:pointer;font-size:16px;box-shadow:0 6px 18px rgba(229,57,53,0.28);
}
.red-btn:active{transform:translateY(2px)}
.flower-container{pointer-events:none;position:fixed;inset:0;z-index:1;overflow:hidden}
.petal{
position:absolute;font-size:24px;opacity:0.95;filter:drop-shadow(0 6px 8px rgba(0,0,0,0.08));
animation:floatUp linear infinite;
}
.petal.p1{left:6%; animation-duration:12s; animation-delay:0s}
.petal.p2{left:18%; animation-duration:10s; animation-delay:1.2s;font-size:28px}
.petal.p3{left:30%; animation-duration:14s; animation-delay:0.6s}
.petal.p4{left:44%; animation-duration:11s; animation-delay:2s;font-size:26px}
.petal.p5{left:58%; animation-duration:13s; animation-delay:0.3s}
.petal.p6{left:70%; animation-duration:9s; animation-delay:1s;font-size:30px}
.petal.p7{left:82%; animation-duration:15s; animation-delay:0.7s}
@keyframes floatUp{
0%{transform:translateY(110vh) rotate(0deg); opacity:0}
10%{opacity:1}
50%{transform:translateY(40vh) rotate(45deg)}
100%{transform:translateY(-30vh) rotate(180deg); opacity:0}
}
@media (max-width:600px){
h1{font-size:36px}
.letter{font-size:16px;padding:18px}
}
</style>
</head>
<body>
<div class="scene" role="main">
<h1>For Ishikaaa</h1>
<div class="sub">A letter from someone who loves you more every day ✨</div>
<div class="letter" id="letter">
<p>My dearest Ishikaaa,</p>
<p>From the very first time I saw your smile, my world shifted — as if everything that was ordinary became extraordinary just because you were in it. You are the gentle light that brightens my darkest days, the calm in my chaos, and the laugh I want to hear for the rest of my life.</p>
<p>Every memory with you is a treasure I keep close: the little jokes that only we understand, the quiet walks where time slips away, the way your eyes light up when you talk about the things you love. I fall in love with you again — not for one single thing, but for everything you are: kind, brave, playful, and endlessly beautiful inside and out.</p>
<p>I promise to always listen, to stand beside you during storms, to celebrate your victories and hold your hand through the small, ordinary moments that become extraordinary because we share them. I will try — every day — to be the person who makes you feel safe, cherished, and truly seen.</p>
<p class="signature">With all my heart,<br/>Your [Name]</p>
</div>
<div class="btn-row">
<div class="hint">Ishikaaa, click this button for a surprise ❤️</div>
<button class="red-btn" id="promiseBtn">Click me, Ishikaaa ❤️</button>
</div>
</div>
<div class="flower-container" aria-hidden="true">
<span class="petal p1">🌸</span>
<span class="petal p2">🌺</span>
<span class="petal p3">🌼</span>
<span class="petal p4">🌷</span>
<span class="petal p5">🌹</span>
<span class="petal p6">💐</span>
<span class="petal p7">🌻</span>
</div>
<script>
const btn = document.getElementById('promiseBtn');
const letter = document.getElementById('letter');
let added = false;
btn.addEventListener('click', ()=>{
if(added) return;
const p = document.createElement('p');
p.style.fontWeight = '700';
p.style.marginTop = '14px';
p.textContent = 'I will be with you forever. I will take care of you, and I want to make you my wife. You are my home, my dream, and my always.';
letter.appendChild(p);
spawnConfetti();
added = true;
btn.textContent = 'Promise sent 💍';
btn.disabled = true;
btn.style.opacity = 0.95;
});
function spawnConfetti(){
const container = document.querySelector('.flower-container');
const emojis = ['🌸','🌺','🌹','🌷','🌻','💐'];
for(let i=0;i<24;i++){
const s = document.createElement('span');
s.className='petal';
s.textContent = emojis[Math.floor(Math.random()*emojis.length)];
s.style.left = Math.random()*90 + '%';
s.style.top = Math.random()*60 + '%';
s.style.fontSize = (12+Math.random()*30)+'px';
s.style.animationDuration = (6+Math.random()*8)+'s';
s.style.animationDelay = (Math.random()*0.6)+'s';
s.style.opacity = 1;
container.appendChild(s);
setTimeout(()=>{ s.remove(); }, 12000);
}
}
</script>
</body>
</html>