<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Happy Men's Day — For AmulBaby</title>
<style>
:root{
--bg1:#0f172a;
--bg2:#0b3d91;
--card:#ffffff;
--accent:#ffd166;
--muted: rgba(255,255,255,0.75);
font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}
html,body{
height:100%; margin:0;
background:linear-gradient(135deg,var(--bg1),var(--bg2));
}
.stage{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:32px;
}
/* SINGLE COMBINED CARD */
.card{
width:min(500px,94vw);
background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));
border-radius:24px;
padding:25px;
box-shadow:0 8px 30px rgba(2,6,23,0.6);
color:var(--card);
text-align:center;
position:relative;
border:1px solid rgba(255,255,255,0.07);
animation: floatUpDown 6s ease-in-out infinite;
}
@keyframes floatUpDown{
0%{transform:translateY(0)}
50%{transform:translateY(-14px)}
100%{transform:translateY(0)}
}
/* PHOTO SECTION */
.photo{
width:100%;
height:420px;
border-radius:20px;
overflow:hidden;
margin-bottom:18px;
border:5px solid rgba(255,255,255,0.09);
background:rgba(0,0,0,0.2);
}
.photo img{
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
}
h1{
margin:0;
font-size:32px;
color:var(--card);
}
.typewriter{
margin-top:14px;
font-size:20px;
color:var(--card);
min-height:48px;
}
p.lead{
margin-top:10px;
font-size:16px;
color:rgba(255,255,255,0.86);
}
.petname{color:var(--accent);font-weight:700;}
.btns{
margin-top:22px;
display:flex;
justify-content:center;
gap:12px;
}
.btn{
background:transparent;
border:1px solid rgba(255,255,255,0.09);
color:var(--card);
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-weight:600;
backdrop-filter:blur(6px);
}
.btn.primary{
background:linear-gradient(90deg,rgba(255,209,102,0.12),rgba(255,209,102,0.08));
border-color:rgba(255,209,102,0.18);
}
.footer{
margin-top:20px;
font-size:13px;
color:rgba(255,255,255,0.45);
}
canvas#confetti{
position:absolute;
inset:0;
pointer-events:none;
}
</style>
</head>
<body>
<div class="stage">
<canvas id="confetti"></canvas>
<div class="card">
<div class="photo">
<img src="HISPHOTO.jpeg" alt="Photo">
</div>
<div style="font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:4px;">
My one and only — <strong class="petname">AmulBaby</strong>
</div>
<h1>Happy Men's Day</h1>
<div class="typewriter" id="typewriter"></div>
<p class="lead">
To the one who makes every ordinary day feel special — your smile,
your calm, your mischief. I'm so lucky to call you mine.
</p>
<div class="btns">
<button class="btn primary" id="playBtn">Play Song ▶</button>
<button class="btn" id="pauseBtn">Pause ⏸</button>
<button class="btn" id="replayBtn">Replay ↺</button>
</div>
<!-- UPDATED ROMANTIC LINE -->
<div style="margin-top:18px;font-size:13px;color:rgba(255,255,255,0.8)">
Every beat of this song reminds me of you… Love youuu ummahaa ❤️💋
</div>
<div class="footer">
Sent with endless love • <span style="color:var(--accent)">AmulBaby</span> 💛
</div>
</div>
</div>
<audio id="audio" src="MUSIC.mp3" preload="auto"></audio>
<script>
const messages=[
"To my AmulBaby — my favourite person.",
"You are kind, playful, brilliant and mine.",
"Happy Men's Day. I love you — always."
];
let tw=document.getElementById('typewriter');
let i=0,j=0,fwd=true;
function typeLoop(){
let msg=messages[i];
if(fwd){
j++; tw.textContent=msg.slice(0,j);
if(j>=msg.length){fwd=false;setTimeout(typeLoop,1500);return;}
} else {
j--; tw.textContent=msg.slice(0,j);
if(j<=0){fwd=true;i=(i+1)%messages.length;setTimeout(typeLoop,400);return;}
}
setTimeout(typeLoop,60+Math.random()*40);
}
typeLoop();
const c=document.getElementById('confetti');
const ctx=c.getContext('2d');
let W=c.width=window.innerWidth,H=c.height=window.innerHeight;
window.onresize=()=>{W=c.width=window.innerWidth;H=c.height=window.innerHeight};
function r(a,b){return Math.random()*(b-a)+a}
let pcs=[],clrs=['#ffd166','#06d6a0','#118ab2','#06b6d4','#f97316'];
for(let k=0;k<80;k++){
pcs.push({x:r(0,W),y:r(-H,0),w:r(6,14),h:r(6,10),vx:r(-0.5,0.5),vy:r(0.5,2),c:clrs[k%clrs.length],r0:r(0,360)});
}
function conf(){
ctx.clearRect(0,0,W,H);
for(let p of pcs){
p.x+=p.vx; p.y+=p.vy; p.r0+=4;
ctx.save(); ctx.translate(p.x,p.y); ctx.rotate(p.r0*Math.PI/180);
ctx.fillStyle=p.c; ctx.fillRect(-p.w/2,-p.h/2,p.w,p.h);
ctx.restore();
if(p.y>H+40){p.y=r(-200,-20);p.x=r(0,W);}
}
requestAnimationFrame(conf);
}
conf();
const a=document.getElementById('audio');
playBtn.onclick=()=>a.play();
pauseBtn.onclick=()=>a.pause();
replayBtn.onclick=()=>{a.currentTime=0;a.play();}
</script>
</body>
</html>