<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy New Year 2026 | New Version Coming Soon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700;900&display=swap" rel="stylesheet">

<style>
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Poppins',sans-serif;
  height:100vh;
  background:
    radial-gradient(circle at top,#2a2a72,#000 60%);
  color:#fff;
  overflow:hidden;
}

/* Glow background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at center,
      rgba(255,215,0,0.15),
      transparent 60%);
  z-index:-2;
}

canvas{
  position:fixed;
  inset:0;
  z-index:-1;
}

/* MAIN CARD */
.center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  padding:70px 85px;
  border-radius:30px;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.14),
    rgba(255,255,255,.05)
  );
  backdrop-filter:blur(20px);
  box-shadow:
    0 45px 140px rgba(0,0,0,.9),
    inset 0 0 2px rgba(255,255,255,.35);
  animation:fadeUp 1s ease;
}

@keyframes fadeUp{
  from{opacity:0;transform:translate(-50%,-45%)}
  to{opacity:1;transform:translate(-50%,-50%)}
}

/* HAPPY NEW YEAR BIG */
.newyear{
  font-size:40px;
  letter-spacing:3px;
  font-weight:600;
  color:#ffe600;
  margin-bottom:10px;
  text-shadow:0 0 15px rgba(255,234,0,.6);
}

/* 2026 ULTRA BIG */
.year{
  font-size:70px;
  font-weight:900;
  line-height:1;
  background:linear-gradient(90deg,#ff4ecd,#ffe600,#4dfff3);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 40px rgba(255,255,255,.15);
  margin-bottom:20px;
}

/* Divider */
.line{
  width:140px;
  height:5px;
  border-radius:20px;
  margin:0 auto 26px;
  background:linear-gradient(90deg,#ff4ecd,#4dfff3);
}

/* Main heading */
.title{
  font-size:30px;
  font-weight:800;
  margin-bottom:12px;
}

/* Sub text */
.process{
  font-size:16px;
  opacity:.85;
  margin-bottom:35px;
}

/* Countdown */
.timer{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:38px;
}

.time-box{
  min-width:95px;
  padding:18px 20px;
  border-radius:18px;
  background:rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 2px rgba(255,255,255,.35),
    0 8px 20px rgba(0,0,0,.4);
}

.time-box h2{
  font-size:32px;
  font-weight:900;
}

.time-box span{
  font-size:11px;
  opacity:.8;
  letter-spacing:1px;
}

/* WhatsApp Button */
.notify-btn{
  display:inline-block;
  padding:16px 40px;
  border-radius:45px;
  font-size:17px;
  font-weight:800;
  color:#000;
  background:linear-gradient(135deg,#25D366,#b6ff8f);
  text-decoration:none;
  box-shadow:0 18px 50px rgba(37,211,102,.65);
  transition:.3s;
}

.notify-btn:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 25px 70px rgba(37,211,102,.85);
}

.footer{
  margin-top:30px;
  font-size:13px;
  opacity:.65;
}
</style>
</head>

<body>

<canvas></canvas>

<div class="center">

  <!-- HAPPY NEW YEAR -->
  <div class="newyear">🎆 HAPPY NEW YEAR 🎆</div>
  <div class="year">2026</div>

  <div class="line"></div>

  <div class="title">New Version Coming Soon</div>
  <div class="process">
    Platform upgrade & next-gen features in progress.<br>
    Please wait — something big is coming.
  </div>

  <!-- COUNTDOWN -->
  <div class="timer">
    <div class="time-box"><h2 id="days">00</h2><span>DAYS</span></div>
    <div class="time-box"><h2 id="hours">00</h2><span>HOURS</span></div>
    <div class="time-box"><h2 id="minutes">00</h2><span>MIN</span></div>
    <div class="time-box"><h2 id="seconds">00</h2><span>SEC</span></div>
  </div>

  <!-- WHATSAPP -->
  <!--<a class="notify-btn"
     href="https://wa.me/916299477682?text=Hello%20🙏%0APlease%20notify%20me%20when%20the%20new%20version%20is%20live."
     target="_blank">
     🔔 Notify Me on WhatsApp
  </a>-->

  <div class="footer">© 2026 • Thank you for your patience</div>

</div>

<script>
/* Countdown */
const launchDate = new Date("Jan 10, 2026 12:00:00").getTime();
setInterval(()=>{
  const now = Date.now(), diff = launchDate - now;
  if(diff < 0) return;
  days.innerText = Math.floor(diff/86400000);
  hours.innerText = Math.floor(diff/3600000)%24;
  minutes.innerText = Math.floor(diff/60000)%60;
  seconds.innerText = Math.floor(diff/1000)%60;
},1000);

/* Fireworks */
const c=document.querySelector("canvas"),ctx=c.getContext("2d");
let w=innerWidth,h=innerHeight;c.width=w;c.height=h;
class Spark{
  constructor(x,y){
    this.x=x;this.y=y;
    this.dx=(Math.random()-.5)*8;
    this.dy=(Math.random()-.5)*8;
    this.life=100;
    this.color=`hsl(${Math.random()*360},100%,60%)`;
  }
  draw(){
    ctx.fillStyle=this.color;
    ctx.beginPath();ctx.arc(this.x,this.y,2.2,0,Math.PI*2);ctx.fill();
  }
  update(){this.x+=this.dx;this.y+=this.dy;this.life--;this.draw();}
}
let fireworks=[];
setInterval(()=>{
  let x=Math.random()*w,y=Math.random()*h/2;
  for(let i=0;i<80;i++)fireworks.push(new Spark(x,y));
},850);
(function animate(){
  ctx.fillStyle="rgba(0,0,0,.25)";
  ctx.fillRect(0,0,w,h);
  fireworks.forEach((s,i)=>{s.update();if(s.life<=0)fireworks.splice(i,1);});
  requestAnimationFrame(animate);
})();
onresize=()=>{w=innerWidth;h=innerHeight;c.width=w;c.height=h;}
</script>

</body>
</html>
