<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Happy Birthday Amani 🎉</title>
<style>
body {
font-family: 'Comic Sans MS', sans-serif;
background-color: #ffe6f0;
text-align: center;
color: #444;
padding: 20px;
}
h2 {
margin-bottom: 20px;
}
input, button {
margin: 15px 0;
padding: 10px;
width: 90%;
max-width: 300px;
font-size: 16px;
}
.slider-wrap {
display: none;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
#slider2 {
margin-top: 20px;
}
.msg, .final {
display: none;
margin-top: 30px;
font-size: 18px;
}
.final img {
max-width: 90%;
border-radius: 12px;
margin-top: 20px;
}
#dob-label {
font-size: 16px;
margin-bottom: 10px;
display: block;
}
#playMusic {
display: none;
margin-top: 20px;
padding: 12px 20px;
font-size: 16px;
background-color: #ff80b3;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>🎂 Happy Birthday Amani 🎂</h2>
<div id="step1">
<input type="text" id="name" placeholder="Put your name" />
<button onclick="checkName()">Next</button>
</div>
<div id="step2" style="display:none;">
<label id="dob-label">Please enter your birthday date 🎈</label>
<input type="date" id="dob" />
<button onclick="checkDob()">Next</button>
</div>
<div id="step3" class="slider-wrap">
<p>How much do Salah cares for youuuu 🤗</p>
<input type="range" id="slider1" min="0" max="100000" step="1000" value="0">
<span id="percent1">0%</span>
</div>
<div id="step4" class="slider-wrap">
<p>One last thing... Slide to unlock your surprise! 🎁</p>
<input type="range" id="slider2" min="0" max="100" step="1" value="0">
<span id="percent2">0%</span>
</div>
<div id="feedback" class="msg"></div>
<div id="final" class="final">
<p>🎂 Happy birthday to you Amani 🎂<br><br>
It’s Salah. I wanted to wish you a happy birthday<br>
in a special way. I hope you will like it,<br>
and I wish you a very very very very very very<br>
happy birthday 💖<br><br>
🎶 Click the button below to enjoy the music 🎶</p>
<button id="playMusic" onclick="playSong()">▶️ Play Song</button>
<img src="[Link]
[Link]?v=1750200646104" alt="Amani & Salah" />
<audio id="music" src="[Link]
5a4d605e1ebf/Katy%20Perry%20-%20Birthday%20(Lyric%20Video).mp3?v=1750200776705"></
audio>
</div>
<script>
function checkName(){
const n = [Link]('name').[Link]().toLowerCase();
if(n === 'amani'){
[Link]('step1').[Link] = 'none';
[Link]('step2').[Link] = 'block';
} else {
alert("Oops, wrong name 🙃");
}
}
function checkDob(){
const d = [Link]('dob').value;
if(d){
[Link]('step2').[Link] = 'none';
[Link]('step3').[Link] = 'flex';
const s1 = [Link]('slider1');
[Link]('input', () => {
[Link]('percent1').innerText = [Link] + '%';
});
[Link]('change', () => {
if(parseInt([Link]) === 100000){
[Link]('step3').[Link] = 'none';
[Link]('step4').[Link] = 'flex';
const s2 = [Link]('slider2');
[Link]('input', () => {
[Link]('percent2').innerText = [Link] + '%';
});
[Link]('change', () => {
if(parseInt([Link]) === 100){
showFinal();
} else {
[Link]('feedback').innerText = "Almost there 😏";
[Link]('feedback').[Link] = 'block';
}
});
}
});
} else {
alert("Please enter your birth date 😊");
}
}
function showFinal(){
[Link]('step4').[Link] = 'none';
[Link]('feedback').[Link] = 'none';
[Link]('final').[Link] = 'block';
[Link]('playMusic').[Link] = 'inline-block';
}
function playSong(){
const music = [Link]('music');
[Link]();
[Link]('playMusic').innerText = "🎵 Playing...";
[Link]('playMusic').disabled = true;
}
</script>
</body>
</html>