<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birthday Surprise</title>
<link href="[Link]
rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
height:100vh;
background:linear-gradient(135deg,#e6d6ff,#f5eaff,#d8c4ff);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
color:#5a3e8c;
}
/* LOCK SCREEN */
#lockScreen{
text-align:center;
background:rgba(255,255,255,0.3);
backdrop-filter:blur(10px);
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
input{
padding:10px;
border:none;
border-radius:10px;
margin-top:10px;
text-align:center;
font-size:18px;
}
button{
padding:10px 20px;
margin-top:10px;
border:none;
border-radius:10px;
background:#c8a8ff;
color:white;
cursor:pointer;
}
/* MAIN PAGE */
#mainPage{
display:none;
position:absolute;
width:100%;
height:100%;
text-align:center;
}
h1{
margin-top:20px;
font-weight:700;
}
/* CAKE */
.cake{
position:relative;
width:200px;
height:150px;
margin:50px auto;
background:#fff;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}
.candle{
position:absolute;
width:10px;
height:40px;
background:#fff;
top:-40px;
border-radius:5px;
}
.flame{
position:absolute;
width:10px;
height:15px;
background:orange;
border-radius:50%;
top:-15px;
animation:flicker 0.2s infinite;
}
@keyframes flicker{
0%{transform:scale(1);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}
}
/* cats */
.cat{
position:absolute;
width:80px;
animation:dance 1s infinite alternate;
}
@keyframes dance{
from{transform:translateY(0);}
to{transform:translateY(-20px);}
}
/* confetti */
.confetti{
position:absolute;
width:8px;
height:8px;
background:#fff;
animation:fall 5s linear infinite;
}
@keyframes fall{
from{transform:translateY(-100px);}
to{transform:translateY(100vh);}
}
</style>
</head>
<body>
<div id="lockScreen">
<h2>Solve to Unlock ! </h2>
<p>((48 × 3) + 96 ÷ 4 − 18 × 2 + 75)</p>
<input id="answer" placeholder="Enter answer">
<br>
<button onclick="checkAnswer()">Unlock</button>
</div>
<div id="mainPage">
<h1 id="message">Happy Birthday " </h1>
<p>Blow the candles # </p>
<div class="cake" id="cake"></div>
<img class="cat" style="left:10%" src="[Link]
<img class="cat" style="right:10%" src="[Link]
<audio id="music" loop>
<source src="[Link]
</audio>
</div>
<script>
const correctAnswer = ((48 * 3) + 96 / 4 - 18 * 2 + 75);
function checkAnswer(){
let val=[Link]("answer").value;
if(Number(val)===correctAnswer){
[Link]("lockScreen").[Link]="none";
[Link]("mainPage").[Link]="block";
startMusic();
createCandles();
startConfetti();
startMic();
}
else{
alert("Wrong answer $ ");
}
}
/* candles */
let candles=[];
function createCandles(){
let cake=[Link]("cake");
for(let i=0;i<5;i++){
let c=[Link]("div");
[Link]="candle";
[Link]=(20+i*30)+"px";
let flame=[Link]("div");
[Link]="flame";
[Link](flame);
[Link](c);
[Link](flame);
}
}
/* confetti */
function startConfetti(){
setInterval(()=>{
let c=[Link]("div");
[Link]="confetti";
[Link]=[Link]()*100+"%";
[Link]=`hsl(${[Link]()*360},70%,80%)`;
[Link](c);
setTimeout(()=>[Link](),5000);
},200);
}
/* music */
function startMusic(){
[Link]("music").play();
}
/* microphone blow detection */
function startMic(){
[Link]({audio:true})
.then(stream=>{
const audioContext=new AudioContext();
const mic=[Link](stream);
const analyser=[Link]();
[Link](analyser);
const data=new Uint8Array([Link]);
function detect(){
[Link](data);
let volume=[Link]((a,b)=>a+b)/[Link];
if(volume>60){
blowCandle();
}
requestAnimationFrame(detect);
}
detect();
});
}
function blowCandle(){
if([Link]>0){
candles[0].remove();
[Link]();
if([Link]===0){
[Link]("message").innerText="Make a Wish % ";
}
}
}
</script>
</body>
</html>