🎮 HTML GAME CODING HUB 💻🔥
5 subscribers
15 photos
5 files
19 links
🎮 HTML GAME CODING HUB 💻🔥

Welcome to the ultimate place for HTML, CSS & JavaScript Game Development! 🚀
Download Telegram
.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:15px 0;
}

.brand{
font-weight:1000;
letter-spacing:2px;
font-size:12px;
}
.brand span{color:var(--cyan)}

.rank{
text-align:right;
}
.rank small{
display:block;
color:#65788e;
font-size:7px;
}
.rank b{font-size:12px;color:#ffb45e}

.hero{
border:1px solid var(--line);
border-radius:25px;
padding:24px 16px;
text-align:center;
background:
radial-gradient(circle at 50% 0,rgba(72,232,255,.13),transparent 45%),
rgba(255,255,255,.035);
overflow:hidden;
}

.heroFlag{
font-size:50px;
animation:float 2.5s infinite ease-in-out;
}
@keyframes float{50%{transform:translateY(-6px)}}

.hero h1{
margin:7px 0;
font-size:clamp(30px,8vw,58px);
background:linear-gradient(90deg,var(--orange),#fff,var(--green));
-webkit-background-clip:text;
color:transparent;
}

.hero p{
color:#8293a7;
font-size:9px;
line-height:1.8;
max-width:600px;
margin:auto;
}

.xpbar{
margin:18px auto 5px;
height:8px;
max-width:600px;
background:#0b1520;
border-radius:20px;
overflow:hidden;
}
.xpbar span{
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,var(--orange),var(--cyan),var(--green));
transition:.5s;
}

.xptext{
color:#65788e;
font-size:8px;
}

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-top:15px;
}

.stat{
padding:12px 5px;
border:1px solid rgba(255,255,255,.1);
border-radius:14px;
background:rgba(255,255,255,.035);
}
.stat b{
display:block;
font-size:20px;
}
.stat small{
color:#718297;
font-size:6px;
letter-spacing:1px;
}

.layout{
display:grid;
grid-template-columns:1.35fr .65fr;
gap:12px;
margin-top:12px;
}

.card{
border:1px solid var(--line);
border-radius:20px;
padding:16px;
background:rgba(255,255,255,.04);
}

.card h3{
margin:0 0 5px;
font-size:13px;
}
.card p{
color:#71849a;
font-size:8px;
line-height:1.7;
}

.mission{
margin-top:10px;
padding:14px;
border:1px solid rgba(255,255,255,.09);
border-radius:15px;
background:rgba(0,0,0,.2);
}
.missionTop{
display:flex;
justify-content:space-between;
gap:8px;
}
.missionTop b{font-size:10px}
.missionTop span{
color:#ffb15b;
font-size:7px;
}
.mission p{
margin:8px 0;
color:#c8d3df;
font-size:9px;
}

.options{
display:grid;
gap:7px;
}
.option{
width:100%;
text-align:left;
padding:11px;
border:1px solid rgba(255,255,255,.1);
border-radius:11px;
background:rgba(255,255,255,.035);
color:#dce6ef;
font-size:8px;
font-weight:bold;
}
.option:hover{
border-color:#48e8ff66;
background:rgba(72,232,255,.07);
}
.option.good{border-color:#2ee36a}
.option.bad{
border-color:#ff4260;
animation:shake .28s linear;
}
@keyframes shake{
25%{transform:translateX(-5px)}
50%{transform:translateX(5px)}
75%{transform:translateX(-4px)}
}

.achievement{
display:flex;
align-items:center;
gap:9px;
padding:9px;
border:1px solid rgba(255,255,255,.08);
border-radius:11px;
margin-top:7px;
opacity:.35;
}
.achievement.unlocked{
opacity:1;
background:rgba(255,153,51,.06);
border-color:#ff993355;
}
.achievementIcon{font-size:18px}
.achievement b{font-size:8px}
.achievement small{
display:block;
color:#687b90;
font-size:6px;
margin-top:2px;
}

.secret{
margin-top:12px;
border:1px solid #48e8ff33;
background:rgba(72,232,255,.035);
}

.secret input{
margin-top:8px;
}

.hiddenRoom{
display:none;
margin-top:10px;
padding:14px;
border:1px solid #ff993355;
border-radius:14px;
background:rgba(255,153,51,.05);
}
.hiddenRoom.show{display:block}
.hiddenRoom h4{
margin:0 0 7px;
color:#ffb15b;
}
.hiddenRoom p{
color:#9aabbc;
}

.shareCard{
margin-top:12px;
text-align:center;
}
.vision{
padding:18px;
border-radius:17px;
background:
linear-gradient(135deg,rgba(255,153,51,.10),rgba(255,255,255,.04),rgba(19,136,8,.10));
border:1px solid rgba(255,255,255,.12);
}
.vision .big{
font-size:28px;
font-weight:1000;
}
.vision h3{
font-size:17px;
margin:7px 0;
}
.vision p{
margin:4px;
}

.restart{
margin-top:10px;
}
.toast{
position:fixed;
z-index:999;
left:50%;
bottom:20px;
transform:translate(-50%,120px);
opacity:0;
padding:12px 17px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:rgba(5,12,20,.94);
backdrop-filter:blur(12px);
font-size:9px;
transition:.3s;
pointer-events:none;
}
.toast.show{
opacity:1;
transform:translate(-50%,0);
}

footer{
text-align:center;
color:#52667c;
font-size:7px;
padding:20px;
letter-spacing:2px;
}

@media(max-width:700px){
.layout{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr)}
.topbar{padding-left:5px;padding-right:5px}
}
</style>
</head>

<body>

<canvas id="space"></canvas>
<div class="grid"></div>

<div id="app">

<!-- LOGIN -->
<section id="loginScreen" class="screen active">
<div class="panel login">

<div class="logo">ANAND HUB // CLASSIFIED SYSTEM</div>

<div class="tricolor"><i></i><i></i><i></i></div>

<h1>INDIA 2047</h1>

<div class="sub">
THE FUTURE IS NOT WAITING.<br>
YOU ARE ABOUT TO BUILD IT.
</div>

<div class="terminal" id="terminal">
&gt; SYSTEM: READY<br>
&gt; SECURITY: ACTIVE<br>
&gt; FUTURE CORE: LOCKED<br>
&gt; ENTER CREATOR ID TO BEGIN...
</div>

<input
id="creatorName"
class="input"
maxlength="25"
placeholder="Enter your creator name"
autocomplete="off"
>

<button class="btn primary" onclick="startMission()">
🚀 ENTER COMMAND CENTER
</button>

<button class="btn" onclick="resumeMission()">
🔄 RESUME SAVED MISSION
</button>

</div>
</section>


<!-- BOOT -->
<section id="bootScreen" class="screen">
<div class="panel boot">

<div class="logo">ANAND HUB // BOOT SEQUENCE</div>

<h2>SYSTEM INITIALIZING...</h2>

<div class="bootLog" id="bootLog"></div>

<div class="loader">
<span></span>
</div>

<div class="sub">CONNECTING TO INDIA 2047 FUTURE CORE</div>

</div>
</section>


<!-- COMMAND CENTER -->
<main id="command" style="display:none">

<div class="topbar">

<div class="brand">
🇮🇳 ANAND <span>HUB</span>
</div>

<div class="rank">
<small>CREATOR RANK</small>
<b id="rankName">ROOKIE</b>
</div>

</div>


<section class="hero">

<div class="heroFlag">🇮🇳</div>

<h1>INDIA 2047</h1>

<p>
Welcome, <b id="playerName">Creator</b>.
Your decisions will shape your digital future profile.
</p>

<div class="xpbar">
<span id="xpFill"></span>
</div>

<div class="xptext" id="xpText">
LEVEL 1 • 0 XP
</div>

<div class="stats">

<div class="stat">
<b id="tech">0</b>
<small>TECH</small>
</div>

<div class="stat">
<b id="vision">0</b>
<small>VISION</small>
</div>

<div class="stat">
<b id="leadership">0</b>
<small>LEADERSHIP</small>
</div>

<div class="stat">
<b id="creativity">0</b>
<small>CREATIVITY</small>
</div>

</div>

</section>


<div class="layout">

<section class="card">

<h3>🛰️ ACTIVE MISSION</h3>

<p>
Choose carefully. Different decisions change your
final 2047 profile.
</p>

<div id="missionArea"></div>

</section>


<aside>

<section class="card">

<h3>🏆 ACHIEVEMENTS</h3>

<div id="achievements"></div>

</section>


<section class="card secret">

<h3>🔐 SECRET ACCESS</h3>

<p>
Hidden protocols detected. Enter a code.
</p>

<input
id="secretCode"
class="input"
placeholder="ENTER CODE"
autocomplete="off"
>

<button class="btn cyan" onclick="unlockSecret()">
UNLOCK
</button>

<div id="hiddenRoom" class="hiddenRoom">

<h4> SECRET ROOM UNLOCKED</h4>

<p>
You found an ANAND HUB hidden protocol.
Future Creator Badge acquired.
</p>

<button class="btn primary" onclick="miniPuzzle()">
🧩 START SECRET PUZZLE
</button>

</div>

</section>

</aside>

</div>


<section class="card shareCard">

<h3>🌌 YOUR 2047 VISION</h3>

<div class="vision">

<div class="big" id="finalRank">ROOKIE</div>

<h3 id="visionTitle">Future Creator</h3>
<p id="visionSummary">
Complete missions to generate your profile.
</p>

<p>
<b id="finalXP">0 XP</b>
</p>

</div>

<button class="btn primary" onclick="shareVision()">
📲 SHARE MY 2047 PROFILE
</button>

<button class="btn restart" onclick="resetMission()">
🔄 RESET & START AGAIN
</button>

</section>


<footer>
ANAND HUB • INDIA 2047 FUTURE CORE • MADE WITH 🇮🇳
</footer>

</main>

<div id="toast" class="toast"></div>

<script>
/* =========================================================
SAFE STATE
========================================================= */

var state={
name:"",
mission:0,
xp:0,
tech:0,
vision:0,
leadership:0,
creativity:0,
achievements:[],
finished:false
};

var missions=[
{
title:"MISSION 01 — THE FIRST MOVE",
question:"2047 mein India ko sabse pehle kis direction mein push karoge?",
options:[
{text:"🤖 AI & advanced technology",stats:{tech:10,vision:4},xp:20},
{text:"🌳 Green cities & clean energy",stats:{vision:10,creativity:4},xp:20},
{text:"🎓 Future education for everyone",stats:{leadership:8,vision:7},xp:20}
]
},
{
title:"MISSION 02 — SMART INDIA",
question:"Ek new smart city design karni hai. Priority kya hogi?",
options:[
{text:"🏙️ AI-powered infrastructure",stats:{tech:9,vision:5},xp:20},
{text:"🌱 Zero-pollution ecosystem",stats:{creativity:8,vision:7},xp:20},
{text:"👨‍👩‍👧 People-first public services",stats:{leadership:10,vision:3},xp:20}
]
},
{
title:"MISSION 03 — SPACE FRONTIER",
question:"India ka next giant space mission kya hona chahiye?",
options:[
{text:"🌕 Permanent lunar research base",stats:{vision:10,tech:8},xp:25},
{text:"🔴 Mars exploration program",stats:{tech:10,creativity:6},xp:25},
{text:"🛰️ Earth protection satellite network",stats:{leadership:8,vision:8},xp:25}
]
},
{
title:"MISSION 04 — EDUCATION 2047",
question:"Future classroom mein sabse powerful tool kya hoga?",
options:[
{text:"🧠 Personal AI tutor",stats:{tech:9,creativity:5},xp:20},
{text:"🥽 VR world classrooms",stats:{creativity:10,tech:5},xp:20},
{text:"🌍 Global collaborative learning",stats:{leadership:9,vision:5},xp:20}
]
},
{
title:"MISSION 05 — DIGITAL INDIA",
question:"Har citizen ko better digital future dene ke liye?",
options:[
{text:"🔐 Strong digital security",stats:{tech:8,leadership:8},xp:25},
{text:"📡 Internet everywhere",stats:{vision:9,leadership:6},xp:25},
{text:"💡 Free digital learning ecosystem",stats:{creativity:7,vision:9},xp:25}
]
},
{
title:"MISSION 06 — THE CRISIS",
question:"A sudden nationwide crisis appears. Your first move?",
options:[
{text:" Build an emergency tech network",stats:{tech:8,leadership:9},xp:25},
{text:"🤝 Unite local communities",stats:{leadership:12,vision:3},xp:25},
{text:"🧠 Analyze the problem before acting",stats:{tech:5,creativity:10},xp:25}
]
},
{
title:"MISSION 07 — FUTURE GAMING",
question:"Indian gaming industry ko world leader kaise banaoge?",
options:[
{text:"🎮 Build original global IPs",stats:{creativity:11,tech:4},xp:25},
{text:"🥽 Invest in AR/VR gaming",stats:{tech:9,creativity:7},xp:25},
{text:"🏆 Create massive esports ecosystem",stats:{leadership:8,creativity:8},xp:25}
]
},
{
title:"MISSION 08 — CLEAN ENERGY",
question:"India ka future energy system?",
options:[
{text:"☀️ Massive solar network",stats:{vision:10,creativity:4},xp:25},
{text:"⚛️ Advanced nuclear technology",stats:{tech:10,vision:5},xp:25},
{text:"🌊 Multiple clean-energy sources",stats:{vision:8,leadership:6},xp:25}
]
},
{
title:"MISSION 09 — GLOBAL INDIA",
question:"India ko global stage par strongest advantage kya dega?",
options:[
{text:"💻 Technology leadership",stats:{tech:11,vision:4},xp:25},
{text:"🤝 International partnerships",stats:{leadership:11,vision:4},xp:25},
{text:"🎨 Culture + creativity",stats:{creativity:11,vision:4},xp:25}
]
},
{
title:"MISSION 10 — FINAL DECISION",
question:"Aapko ek single 2047 promise choose karna hai.",
options:[
{text:"🚀 India will lead the future",stats:{tech:8,vision:10},xp:35},
{text:"🇮🇳 India will empower every citizen",stats:{leadership:12,vision:7},xp:35},
{text:" India will create what nobody imagined",stats:{creativity:12,tech:7},xp:35}
]
}
];

var achievements=[
["🚀","FIRST LAUNCH","Complete your first mission."],
["","XP HUNTER","Reach 100 XP."],
["🧠","STRATEGIST","Complete 5 missions."],
["🌌","FUTURE THINKER","Complete all missions."],
["🤖","TECH MASTER","Reach 30 Tech."],
["🎨","CREATIVE CORE","Reach 30 Creativity."],
["👑","LEADER","Reach 30 Leadership."],
["🔭","VISIONARY","Reach 30 Vision."],
["🔐","SECRET AGENT","Unlock a secret room."],
["🏆","LEGEND","Reach the highest rank."]
];


/* =========================================================
DOM HELPERS
========================================================= */

function el(id){
return document.getElementById(id);
}

function show(id){
el(id).classList.add("active");
}

function hide(id){
el(id).classList.remove("active");
}

function toast(message){
var t=el("toast");
t.textContent=message;
t.classList.add("show");

setTimeout(function(){
t.classList.remove("show");
},1800);
}

function vibrate(pattern){
if(navigator.vibrate){
try{navigator.vibrate(pattern);}catch(e){}
}
}


/* =========================================================
PARTICLES
========================================================= */

var canvas=el("space");
var ctx=canvas.getContext("2d");
var particles=[];

function resizeCanvas(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
}

function createParticles(){
particles=[];

var count=Math.min(100,Math.max(35,Math.floor(window.innerWidth/6)));

for(var i=0;i<count;i++){
particles.push({
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
r:Math.random()*1.8+.3,
dx:(Math.random()-.5)*.25,
dy:(Math.random()-.5)*.25,
a:Math.random()
});
}
}

function animateParticles(){
ctx.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i<particles.length;i++){
var p=particles[i];

p.x+=p.dx;
p.y+=p.dy;

if(p.x<0)p.x=canvas.width;
if(p.x>canvas.width)p.x=0;
if(p.y<0)p.y=canvas.height;
if(p.y>canvas.height)p.y=0;

ctx.beginPath();
ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
ctx.fillStyle="rgba(100,220,255,"+p.a+")";
ctx.fill();
}

requestAnimationFrame(animateParticles);
}

window.addEventListener("resize",function(){
resizeCanvas();
createParticles();
});

resizeCanvas();
createParticles();
animateParticles();


/* =========================================================
CLICK PARTICLE BURST
========================================================= */

document.addEventListener("click",function(e){

for(var i=0;i<8;i++){

var s=document.createElement("span");

s.style.position="fixed";
s.style.left=e.clientX+"px";
s.style.top=e.clientY+"px";
s.style.width="4px";
s.style.height="4px";
s.style.borderRadius="50%";
s.style.background=i%3===0?"#ff9933":i%3===1?"#fff":"#19b83f";
s.style.pointerEvents="none";
s.style.zIndex="5000";

document.body.appendChild(s);

var angle=Math.random()*Math.PI*2;
var distance=25+Math.random()*45;

s.animate([
{transform:"translate(0,0) scale(1)",opacity:1},
{
transform:"translate("+
Math.cos(angle)*distance+"px,"+
Math.sin(angle)*distance+"px) scale(0)",
opacity:0
}
],{
duration:500,
easing:"ease-out"
});

setTimeout(function(node){
return function(){
if(node.parentNode)node.parentNode.removeChild(node);
};
}(s),520);
}
});


/* =========================================================
LOGIN / BOOT
========================================================= */

function startMission(){

var name=el("creatorName").value.trim();
if(!name){
el("creatorName").classList.add("bad");
vibrate([80,50,80]);
toast("⚠️ Creator name enter karo!");
setTimeout(function(){
el("creatorName").classList.remove("bad");
},500);
return;
}

state.name=name;
state.mission=0;
state.xp=0;
state.tech=0;
state.vision=0;
state.leadership=0;
state.creativity=0;
state.achievements=[];
state.finished=false;

saveState();

hide("loginScreen");
show("bootScreen");

runBoot();
}


function resumeMission(){

var saved=null;

try{
saved=JSON.parse(
localStorage.getItem("anandHub2047")
);
}catch(e){
saved=null;
}

if(!saved || !saved.name){
toast("⚠️ No saved mission found!");
vibrate([80,50,80]);
return;
}

state=saved;

hide("loginScreen");
show("bootScreen");

runBoot();
}


/* =========================================================
BOOT SEQUENCE
========================================================= */

function runBoot(){

var log=el("bootLog");

log.innerHTML="";

var lines=[
"> INITIALIZING ANAND HUB FUTURE CORE...",
"> VERIFYING CREATOR ID...",
"> SECURITY PROTOCOL: ACTIVE",
"> INDIA 2047 DATABASE: CONNECTED",
"> MISSION ENGINE: ONLINE",
"> DECISION TREE: READY",
"> SECRET PROTOCOLS: ARMED",
"> COMMAND CENTER: UNLOCKED"
];

var index=0;

var timer=setInterval(function(){

if(index<lines.length){

log.innerHTML+=lines[index]+"<br>";
index++;

}else{

clearInterval(timer);

setTimeout(function(){

hide("bootScreen");
el("command").style.display="block";

renderAll();

toast("🚀 Command Center Online!");

},600);
}

},330);
}


/* =========================================================
SAVE SYSTEM
========================================================= */

function saveState(){

try{
localStorage.setItem(
"anandHub2047",
JSON.stringify(state)
);
}catch(e){
console.log("Save error:",e);
}
}


/* =========================================================
MISSION ENGINE
========================================================= */

function renderMission(){

var area=el("missionArea");

if(state.finished){
showFinalMission();
return;
}

var mission=missions[state.mission];

if(!mission){
finishGame();
return;
}

var html="";

html+=
'<div class="mission">'+
'<div class="missionTop">'+
'<b>'+mission.title+'</b>'+
'<span>+'+mission.options[0].xp+' XP</span>'+
'</div>'+
'<p>'+mission.question+'</p>'+
'<div class="options">';

for(
var i=0;
i<mission.options.length;
i++
){

html+=
'<button class="option" '+
'onclick="chooseOption('+i+')">'+
mission.options[i].text+
'</button>';

}

html+=
'</div>'+
'</div>';

area.innerHTML=html;
}


function chooseOption(index){

if(state.finished)return;

var mission=missions[state.mission];

if(!mission || !mission.options[index])return;

var option=mission.options[index];

var buttons=
document.querySelectorAll(".option");

buttons.forEach(function(btn,i){

if(i===index){
btn.classList.add("good");
}

btn.disabled=true;

});

vibrate(35);

setTimeout(function(){

if(option.stats){

if(option.stats.tech)
state.tech+=option.stats.tech;

if(option.stats.vision)
state.vision+=option.stats.vision;

if(option.stats.leadership)
state.leadership+=option.stats.leadership;

if(option.stats.creativity)
state.creativity+=option.stats.creativity;

}

state.xp+=option.xp;
state.mission++;

checkAchievements();
saveState();
renderAll();

if(!state.finished){
toast(" Decision accepted! +"+option.xp+" XP");
}

},450);
}


/* =========================================================
ACHIEVEMENTS
========================================================= */

function checkAchievements(){

var unlock=function(index){

if(state.achievements.indexOf(index)===-1){

state.achievements.push(index);

setTimeout(function(){
toast("🏆 Achievement Unlocked: "+achievements[index][1]);
},200);

}

};

if(state.mission>=1)
unlock(0);

if(state.xp>=100)
unlock(1);
if(state.mission>=5)
unlock(2);

if(state.mission>=missions.length)
unlock(3);

if(state.tech>=30)
unlock(4);

if(state.creativity>=30)
unlock(5);

if(state.leadership>=30)
unlock(6);

if(state.vision>=30)
unlock(7);

if(state.achievements.indexOf(8)!==-1)
unlock(8);

if(getRank()==="LEGEND")
unlock(9);
}


/* =========================================================
ACHIEVEMENT UI
========================================================= */

function renderAchievements(){

var box=el("achievements");

box.innerHTML="";

for(var i=0;i<achievements.length;i++){

var a=achievements[i];

var unlocked=
state.achievements.indexOf(i)!==-1;

box.innerHTML+=
'<div class="achievement '+
(unlocked?"unlocked":"")+
'">'+
'<div class="achievementIcon">'+a[0]+'</div>'+
'<div>'+
'<b>'+a[1]+'</b>'+
'<small>'+a[2]+'</small>'+
'</div>'+
'</div>';
}
}


/* =========================================================
XP / LEVEL / RANK
========================================================= */

function getLevel(){

return Math.max(
1,
Math.floor(state.xp/100)+1
);
}


function getRank(){

var xp=state.xp;

if(xp>=280)return "LEGEND";
if(xp>=220)return "VISIONARY";
if(xp>=160)return "INNOVATOR";
if(xp>=80)return "EXPLORER";

return "ROOKIE";
}


function updateProgress(){

var level=getLevel();
var rank=getRank();

el("rankName").textContent=rank;

var currentXP=state.xp%100;

el("xpFill").style.width=
Math.min(100,currentXP)+"%";

el("xpText").textContent=
"LEVEL "+level+
" • "+state.xp+" XP";

el("tech").textContent=state.tech;
el("vision").textContent=state.vision;
el("leadership").textContent=state.leadership;
el("creativity").textContent=state.creativity;

el("playerName").textContent=
state.name || "Creator";

el("finalXP").textContent=
state.xp+" XP";

el("finalRank").textContent=
rank;

var titles={
ROOKIE:"Future Recruit",
EXPLORER:"Future Explorer",
INNOVATOR:"India Innovator",
VISIONARY:"2047 Visionary",
LEGEND:"India 2047 Legend"
};

el("visionTitle").textContent=
titles[rank] || "Future Creator";
}


/* =========================================================
FINAL PROFILE
========================================================= */

function finishGame(){

state.finished=true;

checkAchievements();
saveState();

renderAll();

toast("🏆 ALL MISSIONS COMPLETE!");

setTimeout(function(){
document
.querySelector(".shareCard")
.scrollIntoView({
behavior:"smooth",
block:"center"
});
},500);
}


function showFinalMission(){

var area=el("missionArea");

var total=
state.tech+
state.vision+
state.leadership+
state.creativity;

var strongest="TECH";

var values={
TECH:state.tech,
VISION:state.vision,
LEADERSHIP:state.leadership,
CREATIVITY:state.creativity
};

for(var key in values){

if(values[key]>values[strongest]){
strongest=key;
}

}

area.innerHTML=
'<div class="mission">'+
'<div class="missionTop">'+
'<b>🏆 MISSION COMPLETE</b>'+
'<span>2047 CORE</span>'+
'</div>'+
'<p>'+
'All strategic decisions completed. '+
'Your strongest trait is <b>'+strongest+
'</b>. Your future profile has been generated.'+
'</p>'+
'<button class="btn primary" onclick="scrollToVision()">'+
'🌌 VIEW MY 2047 PROFILE'+
'</button>'+
'</div>';
}


function scrollToVision(){

document
.querySelector(".shareCard")
.scrollIntoView({
behavior:"smooth",
block:"center"
});
}


/* =========================================================
SECRET SYSTEM
========================================================= */

function unlockSecret(){

var input=el("secretCode");

var code=input.value
.trim()
.toUpperCase();

var valid=[
"ANAND2047",
"FREEDOM2047",
"HUB2047",
"INDIA2047"
];

if(valid.indexOf(code)!==-1){

el("hiddenRoom").classList.add("show");

if(state.achievements.indexOf(8)===-1){
state.achievements.push(8);
}

saveState();
renderAchievements();

input.value="";
vibrate([40,40,80]);

toast("🔐 SECRET ROOM UNLOCKED!");

}else{

input.classList.add("bad");

vibrate([100,50,100]);

toast(" ACCESS DENIED");

setTimeout(function(){
input.classList.remove("bad");
},500);
}
}


/* =========================================================
SECRET PUZZLE
========================================================= */

function miniPuzzle(){

var answer=prompt(
"🧩 SECRET CODE PUZZLE\n\n"+
"If:\n"+
"2 → 6\n"+
"3 → 12\n"+
"4 → 20\n"+
"5 → ?\n\n"+
"Enter the answer:"
);

if(answer===null)return;

if(answer.trim()==="30"){

state.xp+=50;

if(state.achievements.indexOf(8)===-1)
state.achievements.push(8);

saveState();
renderAll();

vibrate([50,40,100]);

toast("🧠 PUZZLE SOLVED! +50 XP");

}else{

vibrate([100,40,100]);

toast(" Wrong answer!");

}
}


/* =========================================================
SHARE PROFILE
========================================================= */

function shareVision(){

var rank=getRank();

var text=
"🇮🇳 ANAND HUB — INDIA 2047\n\n"+
"🚀 My 2047 Future Profile\n"+
"👤 Creator: "+state.name+"\n"+
"🏆 Rank: "+rank+"\n"+
" XP: "+state.xp+"\n\n"+
"🤖 Tech: "+state.tech+"\n"+
"🔭 Vision: "+state.vision+"\n"+
"👑 Leadership: "+state.leadership+"\n"+
"🎨 Creativity: "+state.creativity+"\n\n"+
"🌌 I completed the India 2047 Future Core!\n"+
"🇮🇳 What will YOUR India 2047 look like?";

if(navigator.share){

navigator.share({
title:"My India 2047 Vision",
text:text
}).catch(function(){});

}else{

if(navigator.clipboard){

navigator.clipboard.writeText(text)
.then(function(){
toast("📋 Profile copied!");
})
.catch(function(){
fallbackCopy(text);
});

}else{

fallbackCopy(text);

}
}
}


function fallbackCopy(text){

var area=document.createElement("textarea");

area.value=text;
area.style.position="fixed";
area.style.opacity="0";

document.body.appendChild(area);

area.select();

try{
document.execCommand("copy");
toast("📋 Profile copied!");
}catch(e){
toast("Share text ready!");
}

document.body.removeChild(area);
}


/* =========================================================
RESET
========================================================= */

function resetMission(){

var ok=confirm(
"⚠️ Reset your India 2047 mission?\n\n"+
"All saved progress will be deleted."
);

if(!ok)return;

localStorage.removeItem("anandHub2047");

state={
name:"",
mission:0,
xp:0,
tech:0,
vision:0,
leadership:0,
creativity:0,
achievements:[],
finished:false
};

el("command").style.display="none";

hide("bootScreen");
show("loginScreen");

el("creatorName").value="";

toast("🔄 Mission reset!");
}


/* =========================================================
RENDER EVERYTHING
========================================================= */

function renderAll(){

updateProgress();
renderMission();
renderAchievements();

if(state.finished){
el("visionSummary").textContent=
"Your decisions created a unique 2047 profile. "+
"Your strongest trait is ready to lead the future.";
}else{
el("visionSummary").textContent=
"Complete all missions to generate your final "+
"India 2047 Vision Card.";
}
}


/* =========================================================
AUTO RESUME NOTICE
========================================================= */

(function(){

var saved=null;

try{
saved=JSON.parse(
localStorage.getItem("anandHub2047")
);
}catch(e){
saved=null;
}

if(saved && saved.name){

setTimeout(function(){
toast("🔄 Saved mission detected for "+saved.name);
},700);

}

})();


/* =========================================================
ENTER KEY
========================================================= */

el("creatorName").addEventListener(
"keydown",
function(e){

if(e.key==="Enter"){
startMission();
}

});


el("secretCode").addEventListener(
"keydown",
function(e){

if(e.key==="Enter"){
unlockSecret();
}

});
/* =========================================================
INITIAL STATE
========================================================= */

renderAchievements();
updateProgress();

</script>

</body>
</html>
🔥1
😊 घर बैठे बच्चे बच्चे क मा रहे हैं
🥰 Without investment 🥰

जो भी 2 - 3 घंटे काम कर के रोजाना का 3-4 हजार क माना चाहते है वो नीचे दिए गए लिंक पर क्लिक करके फार्म फील करे 👇👇

🥰 Click here fast 👇👇

https://docs.google.com/forms/d/e/1FAIpQLSd8DzFUts1YU0ZzVazjXh5XiQkLJsvjGOA_5IiE_OTKJnT0Zg/viewform?usp=header
🔥1
🧬 NEW GAME DROP 🧬

🚨 CYBER ESCAPE 🚨

THE SYSTEM HAS BEEN BREACHED... 👀

🎮 Your Mission:
👆 Swipe to move
🟡 Collect Energy
🔴 Avoid Drones
📈 Survive Every Level
🧬 Reach the CORE
🏆 Beat the High Score

🔥 COLLECT • SURVIVE • ESCAPE

💬 CHALLENGE:
Tumhara highest score kitna jayega? 😈

📱 100% Touch Gaming
💻 HTML + CSS + JavaScript
🚀 More Powerful Games Coming Soon...

🇮🇳 ANAND HUB • HTML GAME LAB

#CyberEscape #HTMLGame #JavaScript #Coding #GameDevelopment #TouchGame
1
NEON ESCAPE — ANAND HUB 🧠🎮

The room is watching.
Think fast. Tap faster. 🔥

🚨 10 CHAMBERS
🧩 Logic Puzzles
🔐 Secret Code Missions
Reaction Challenges
❤️ 3 Lives
🏆 Multiple Ranks
💥 Combo & Bonus System
🌌 Full Neon Cyber Interface

Can you break the ESCAPE CORE before time runs out? 👀

Your mission:
🎯 Solve every chamber
React as fast as possible
🧠 Don't lose your lives
🏆 Beat your best score

NEON ESCAPE
ANAND HUB // CLASSIFIED GAME LAB 🛰️

🔥 CHALLENGE ACCEPTED?

#ANANDHUB #NeonEscape #HTMLGame #Gaming #MiniGame #Challenge
1
🚀 STUDYVERSE AI — GRANDMASTER EDITION 👑

Ab padhai hogi random nahi, strategy ke saath. 🧠

📚 Class 6–12 Support
🤖 AI Study Planner
🎯 Weakness Radar
⏱️ Deep Focus Timer
📅 Smart Class-Wise Timetable
✍️ Writing Practice Tracker
🔄 Revision Engine
📝 Mock Test Arena
⚔️ Daily Boss Challenges
📊 Performance Analytics
🏆 XP • Levels • Achievements

🔥 Your Study. Your Strategy. Your Evolution.

💜 STUDYVERSE AI
Your Personal Study Command Center.

👇 Would you use an app like this?
Comment “GRANDMASTER” 👑 if you want to try it!
1
🐍🔱 NAG PANCHAMI SPECIAL 🔱🐍

आज ANAND HUB पर कुछ SPECIAL लेकर आए हैं!

🌙 रात का cinematic मंदिर
🪔 glowing दीपक
🔱 महादेव का आशीर्वाद
🐍 नाग पंचमी का special experience
और एक hidden blessing effect!

👇 नीचे वाली Nag Panchami Special HTML file को खोलो और “TAP TO BLESS” दबाओ! 🐍🔥

🕉️ ॐ नमः शिवाय 🕉️

🙏 नाग देवता की कृपा सभी पर बनी रहे।

— ANAND HUB 🚀

#NagPanchami #NagPanchami2026 #HarHarMahadev #OmNamahShivay #ANANDHUB
🌺 NEW HTML PROJECT ALERT! 🌺

Aaj maine banaya hai ek AMAZING GROWING FLOWER ANIMATION 🌺🔥

🌱 Stem smoothly grow hota hai
🍃 Leaves appear hoti hain
🌺 Petals one-by-one bloom karte hain
Glowing center + magical particles effect
💻 Made with HTML + CSS + JavaScript

Agar tumhe bhi aise creative coding projects pasand hain, to CHANNEL ko FOLLOW/SUBSCRIBE zarur karo! 🚀

🔥 COMMENT karo:
"FLOWER 🌺"
agar tumhe iska CODE chahiye!

━━━━━━━━━━━━━━━━━━

📌 PINNED COMMENT:

🌺 Rate this animation from 1️⃣🔟!

Agle project mein kya banana chahiye? 👇

1️⃣ Glowing Rose 🌹
2️⃣ Blooming Lotus 🪷
3️⃣ Magical Sunflower 🌻
4️⃣ Rainbow Flower 🌈🌺

COMMENT YOUR CHOICE! 🔥

#HTML #CSS #JavaScript #Coding #WebDevelopment #Frontend #FlowerAnimation #CreativeCoding #WebDesign #Programming #ANANDHUB #CodeWithAnand
Please open Telegram to view this post
VIEW IN TELEGRAM