Untitled drop

Published Oct 8, 2026
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Made By Umaiza 🎀</title>

<style>
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  margin:0;
  min-height:100vh;
  overflow:hidden;
  font-family:Arial,sans-serif;
  background:linear-gradient(135deg,#ffd7e8,#fff5f9,#ffc3dc);
  color:#8d3d61;
}

.screen{
  display:none;
  width:100%;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:20px;
}

.screen.active{display:flex}

.card{
  width:min(430px,94vw);
  padding:25px 20px;
  border-radius:30px;
  background:rgba(255,255,255,.72);
  box-shadow:0 15px 40px rgba(170,65,110,.18);
  border:2px solid white;
}

.by{
  font-size:14px;
  letter-spacing:3px;
  font-weight:bold;
  color:#d45183;
  margin-bottom:12px;
}

h1{
  color:#d34d80;
  font-size:34px;
  margin:8px 0;
}

h2{
  color:#c74678;
  font-size:27px;
  margin:8px 0;
}

p{
  font-size:16px;
  line-height:1.5;
}

button{
  border:0;
  background:linear-gradient(135deg,#ff83ae,#e9578c);
  color:white;
  padding:14px 30px;
  border-radius:30px;
  font-size:16px;
  font-weight:bold;
  margin-top:10px;
  box-shadow:0 8px 20px #d85b882f;
}

button:active{transform:scale(.94)}


/* ================= CAT ================= */

.cat-stage{
  height:300px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.cat{
  position:relative;
  width:150px;
  height:190px;
  cursor:pointer;
  animation:dance .55s infinite alternate ease-in-out;
}

@keyframes dance{
  0%{transform:rotate(-6deg) translateY(5px)}
  100%{transform:rotate(6deg) translateY(-8px)}
}

/* head */
.head{
  position:absolute;
  width:110px;
  height:95px;
  background:#fff8fa;
  border:3px solid #d58ba7;
  border-radius:48% 48% 45% 45%;
  left:20px;
  top:10px;
}

/* ears */
.ear{
  position:absolute;
  width:43px;
  height:48px;
  background:#fff8fa;
  border:3px solid #d58ba7;
  top:-25px;
}

.ear.left{
  left:5px;
  transform:rotate(-30deg);
  border-radius:10px 35px 5px 30px;
}

.ear.right{
  right:5px;
  transform:rotate(30deg);
  border-radius:35px 10px 30px 5px;
}

/* inner ears */
.ear:after{
  content:"";
  position:absolute;
  width:20px;
  height:25px;
  background:#ffc0d7;
  border-radius:50%;
  left:10px;
  top:10px;
}

/* eyes */
.eye{
  position:absolute;
  width:11px;
  height:15px;
  background:#593b48;
  border-radius:50%;
  top:38px;
}

.eye.left{left:28px}
.eye.right{right:28px}

/* cute shine */
.eye:after{
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  background:white;
  border-radius:50%;
  top:2px;
  left:2px;
}

/* nose */
.nose{
  position:absolute;
  left:48px;
  top:57px;
  width:12px;
  height:9px;
  background:#ee7da3;
  border-radius:50%;
}

/* mouth */
.mouth{
  position:absolute;
  left:49px;
  top:67px;
  width:13px;
  height:8px;
  border-bottom:2px solid #75404f;
  border-radius:50%;
}

/* body */
.body{
  position:absolute;
  width:90px;
  height:90px;
  background:#fff8fa;
  border:3px solid #d58ba7;
  border-radius:48%;
  left:30px;
  top:92px;
}

/* belly */
.belly{
  position:absolute;
  width:55px;
  height:58px;
  background:#ffe1eb;
  border-radius:50%;
  left:15px;
  top:13px;
}

/* paws */
.paw{
  position:absolute;
  width:25px;
  height:48px;
  background:#fff8fa;
  border:3px solid #d58ba7;
  border-radius:20px;
  top:105px;
}

.paw.left{
  left:10px;
  transform:rotate(25deg);
}

.paw.right{
  right:10px;
  transform:rotate(-25deg);
}

/* feet */
.foot{
  position:absolute;
  width:37px;
  height:25px;
  background:#fff8fa;
  border:3px solid #d58ba7;
  border-radius:50%;
  bottom:-8px;
}

.foot.left{left:25px}
.foot.right{right:25px}

/* tail */
.tail{
  position:absolute;
  width:70px;
  height:80px;
  border:10px solid #fff8fa;
  border-left:0;
  border-bottom:0;
  border-radius:0 60px 0 0;
  right:-28px;
  top:95px;
  transform:rotate(15deg);
  animation:tail 0.8s infinite alternate;
}

@keyframes tail{
  from{transform:rotate(5deg)}
  to{transform:rotate(25deg)}
}

/* run */
.cat.run{
  animation:run .75s forwards ease-in;
}

@keyframes run{
  to{
    transform:translateX(500px) rotate(15deg);
    opacity:0;
  }
}

.tap{
  display:inline-block;
  background:white;
  padding:8px 16px;
  border-radius:20px;
  color:#cf4e7e;
  font-size:14px;
}


/* ================= MOLE GAME ================= */

.scorebar{
  width:min(380px,92vw);
  display:flex;
  justify-content:space-between;
  font-weight:bold;
  margin:8px 0 12px;
}

.board{
  width:min(390px,92vw);
  height:390px;
  background:#f4a8c5;
  border:5px solid white;
  border-radius:28px;
  padding:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  box-shadow:inset 0 5px 20px #a94d7130;
}

.hole{
  position:relative;
  overflow:hidden;
  background:#9d5a72;
  border-radius:50%;
  box-shadow:inset 0 8px 12px #49202e66;
}

.mouse{
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  font-size:52px;
  cursor:pointer;
  animation:pop .18s ease-out;
  user-select:none;
}

@keyframes pop{
  from{transform:translate(-50%,60px)}
  to{transform:translate(-50%,0)}
}

.hit{
  animation:hit .15s;
}

@keyframes hit{
  50%{transform:scale(.8)}
}


/* ================= GIFT ================= */

.gift-wrap{
  cursor:pointer;
  position:relative;
  width:150px;
  height:145px;
  margin:25px auto;
  animation:bounce 1s infinite alternate;
}

@keyframes bounce{
  to{transform:translateY(-10px)}
}

.box{
  position:absolute;
  width:125px;
  height:90px;
  left:12px;
  bottom:0;
  background:#ff78a8;
  border-radius:8px;
  box-shadow:0 12px 20px #b4477130;
}

.box:before{
  content:"";
  position:absolute;
  width:20px;
  height:90px;
  background:#ffd4e4;
  left:52px;
}

.lid{
  position:absolute;
  width:140px;
  height:32px;
  left:5px;
  top:43px;
  background:#f45f96;
  border-radius:7px;
}

.ribbon{
  position:absolute;
  width:20px;
  height:145px;
  background:#ffd4e4;
  left:65px;
  top:0;
}

.bow{
  position:absolute;
  top:5px;
  left:48px;
  font-size:45px;
  z-index:2;
}

.message{
  display:none;
  animation:appear .7s ease;
}

@keyframes appear{
  from{opacity:0;transform:scale(.75)}
  to{opacity:1;transform:scale(1)}
}

.message-box{
  background:white;
  border-radius:25px;
  padding:20px;
  margin-top:10px;
  box-shadow:0 8px 25px #b84d7620;
}

.message-box p{
  margin:8px 0;
  color:#8d405f;
}

.heart{
  font-size:45px;
  animation:heart 1s infinite;
}

@keyframes heart{
  50%{transform:scale(1.15)}
}


/* confetti */
.confetti{
  position:fixed;
  top:-20px;
  z-index:50;
  font-size:22px;
  animation:fall 3s linear forwards;
}

@keyframes fall{
  to{
    transform:translateY(110vh) rotate(500deg);
    opacity:0;
  }
}
</style>
</head>

<body>


<!-- START -->
<div id="start" class="screen active">
  <div class="card">
    <div class="by">MADE BY UMAIZA 🎀</div>

    <h1>♡ A Little Surprise ♡</h1>

    <p>
      There's a tiny little game<br>
      waiting for you... 🌷
    </p>

    <button onclick="go('catScreen')">
      START 🎀
    </button>
  </div>
</div>


<!-- CAT -->
<div id="catScreen" class="screen">

  <div class="card">

    <div class="by">MADE BY UMAIZA 🎀</div>

    <h2>Look at her! 🥹</h2>

    <p id="catText">
      She's dancing just for you ♡
    </p>

    <div class="cat-stage">

      <div class="cat" id="cat" onclick="catRun()">

        <div class="tail"></div>

        <div class="head">

          <div class="ear left"></div>
          <div class="ear right"></div>

          <div class="eye left"></div>
          <div class="eye right"></div>

          <div class="nose"></div>
          <div class="mouth"></div>

        </div>

        <div class="body">
          <div class="belly"></div>
        </div>

        <div class="paw left"></div>
        <div class="paw right"></div>

        <div class="foot left"></div>
        <div class="foot right"></div>

      </div>

    </div>

    <div class="tap">
      TAP THE CAT 🐾
    </div>

  </div>

</div>


<!-- MOLE -->
<div id="gameScreen" class="screen">

  <div class="by">MADE BY UMAIZA 🎀</div>

  <h2>Whack the Mouse! 🔨</h2>

  <p>
    Mouse ko dekho aur <b>tap</b> karo! 🐭
  </p>

  <div class="scorebar">
    <span>Score: <span id="score">0</span>/10</span>
    <span>Time: <span id="time">20</span>s</span>
  </div>

  <div class="board">

    <div class="hole" onclick="hit(this)"></div>
    <div class="hole" onclick="hit(this)"></div>
    <div class="hole" onclick="hit(this)"></div>

    <div class="hole" onclick="hit(this)"></div>
    <div class="hole" onclick="hit(this)"></div>
    <div class="hole" onclick="hit(this)"></div>

    <div class="hole" onclick="hit(this)"></div>
    <div class="hole" onclick="hit(this)"></div>
    <div class="hole" onclick="hit(this)"></div>

  </div>

</div>


<!-- GIFT -->
<div id="giftScreen" class="screen">

  <div class="card">

    <div class="by">MADE BY UMAIZA 🎀</div>

    <h2>You did it! ♡</h2>

    <p id="giftHint">
      One last little thing...
    </p>

    <div id="gift" class="gift-wrap" onclick="openGift()">

      <div class="bow">🎀</div>

      <div class="ribbon"></div>

      <div class="lid"></div>

      <div class="box"></div>

    </div>

    <p id="tapGift">
      Tap the gift 🎁
    </p>


    <div id="message" class="message">

      <div class="heart">♡</div>

      <div class="message-box">

        <p>
          <b>A little surprise, just for you. 🎀</b>
        </p>

        <p>
          I hope this tiny game made you smile. ♡
        </p>

        <p>
          <b>Keep smiling — you deserve it. 🌷</b>
        </p>

      </div>

    </div>

  </div>

</div>


<script>

let score=0;
let time=20;
let gameRunning=false;
let spawnTimer;
let timeTimer;


/* SCREEN */
function go(id){

  document.querySelectorAll(".screen")
    .forEach(x=>x.classList.remove("active"));

  document.getElementById(id)
    .classList.add("active");

  if(id==="gameScreen"){
    startGame();
  }
}


/* CAT */
function catRun(){

  const cat=document.getElementById("cat");
  const text=document.getElementById("catText");

  cat.classList.add("run");

  text.innerHTML="Awww 😭 she ran away!";

  setTimeout(()=>{
    go("gameScreen");
  },900);
}


/* GAME START */
function startGame(){

  if(gameRunning)return;

  gameRunning=true;
  score=0;
  time=20;

  document.getElementById("score").innerText=score;
  document.getElementById("time").innerText=time;

  spawnTimer=setInterval(spawnMouse,700);

  timeTimer=setInterval(()=>{

    time--;

    document.getElementById("time").innerText=time;

    if(time<=0){
      finishGame();
    }

  },1000);
}


/* SPAWN */
function spawnMouse(){

  document.querySelectorAll(".mouse")
    .forEach(m=>m.remove());

  const holes=document.querySelectorAll(".hole");

  const hole=
    holes[Math.floor(Math.random()*holes.length)];

  const mouse=document.createElement("div");

  mouse.className="mouse";
  mouse.innerText="🐭";

  hole.appendChild(mouse);
}


/* HIT */
function hit(hole){

  const mouse=hole.querySelector(".mouse");

  if(!mouse)return;

  mouse.innerText="💥";

  score++;

  document.getElementById("score").innerText=score;

  hole.classList.add("hit");

  setTimeout(()=>{
    hole.classList.remove("hit");
  },150);

  if(score>=10){
    finishGame();
  }
}


/* FINISH */
function finishGame(){

  clearInterval(spawnTimer);
  clearInterval(timeTimer);

  gameRunning=false;

  document.querySelectorAll(".mouse")
    .forEach(m=>m.remove());

  setTimeout(()=>{
    go("giftScreen");
  },700);
}


/* GIFT */
function openGift(){

  document.getElementById("gift").style.display="none";
  document.getElementById("giftHint").style.display="none";
  document.getElementById("tapGift").style.display="none";

  document.getElementById("message").style.display="block";

  confetti();
}


/* CONFETTI */
function confetti(){

  const symbols=["🎀","💗","♡","✨","🌸"];

  for(let i=0;i<35;i++){

    const c=document.createElement("div");

    c.className="confetti";

    c.innerText=
      symbols[Math.floor(Math.random()*symbols.length)];

    c.style.left=Math.random()*100+"%";
    c.style.animationDelay=Math.random()*1.5+"s";

    document.body.appendChild(c);

    setTimeout(()=>{
      c.remove();
    },3500);
  }
}

</script>

</body>
</html>
Explore more drops →