<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#030712">
<title>ANAND HUB — INDIA 2047</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#02050b;color:#fff}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:root{
--orange:#ff9933;
--green:#19b83f;
--cyan:#48e8ff;
--blue:#3478ff;
--red:#ff4260;
--glass:rgba(255,255,255,.055);
--line:rgba(255,255,255,.13);
}
#app{
min-height:100vh;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% -10%,rgba(255,153,51,.22),transparent 30%),
radial-gradient(circle at 0 70%,rgba(19,136,8,.15),transparent 28%),
radial-gradient(circle at 100% 45%,rgba(72,232,255,.12),transparent 28%),
linear-gradient(180deg,#02050b,#050b14 50%,#02050a);
}
canvas#space{
position:fixed;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
}
.grid{
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
opacity:.15;
background-image:
linear-gradient(rgba(72,232,255,.12) 1px,transparent 1px),
linear-gradient(90deg,rgba(72,232,255,.12) 1px,transparent 1px);
background-size:45px 45px;
transform:perspective(500px) rotateX(55deg) scale(1.8) translateY(25%);
transform-origin:center bottom;
}
.screen{
position:relative;
z-index:2;
min-height:100vh;
display:none;
align-items:center;
justify-content:center;
padding:20px;
}
.screen.active{display:flex}
.panel{
width:min(94%,760px);
border:1px solid var(--line);
border-radius:28px;
background:rgba(5,12,22,.78);
backdrop-filter:blur(18px);
box-shadow:0 30px 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);
}
.login{
padding:30px 20px;
text-align:center;
}
.logo{
font-size:13px;
font-weight:1000;
letter-spacing:4px;
color:var(--cyan);
}
.tricolor{
width:130px;
height:4px;
margin:15px auto;
display:flex;
border-radius:10px;
overflow:hidden;
}
.tricolor i{flex:1}
.tricolor i:nth-child(1){background:var(--orange)}
.tricolor i:nth-child(2){background:#fff}
.tricolor i:nth-child(3){background:var(--green)}
.login h1{
margin:12px 0 4px;
font-size:clamp(42px,12vw,78px);
line-height:.9;
letter-spacing:-4px;
background:linear-gradient(#ffb15b 15%,#fff 48%,#4bc75a 85%);
-webkit-background-clip:text;
color:transparent;
}
.sub{
color:#7e91a7;
font-size:9px;
letter-spacing:3px;
line-height:1.8;
}
.terminal{
margin:24px auto 16px;
padding:13px;
width:min(100%,500px);
text-align:left;
border:1px solid rgba(72,232,255,.18);
border-radius:14px;
background:#01050a;
color:#63eaff;
font-family:monospace;
font-size:9px;
line-height:1.8;
min-height:100px;
}
.input{
width:100%;
padding:14px;
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
background:#02070d;
color:#fff;
outline:none;
margin-top:8px;
}
.input:focus{border-color:var(--cyan)}
.btn{
width:100%;
border:1px solid rgba(255,255,255,.12);
border-radius:13px;
padding:14px;
margin-top:9px;
color:#fff;
background:rgba(255,255,255,.06);
font-weight:1000;
transition:.2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
color:#041016;
background:linear-gradient(90deg,var(--orange),#fff,var(--green));
}
.btn.cyan{
background:linear-gradient(135deg,#0b6c86,#163d83);
border-color:#43ddff66;
}
.boot{
padding:28px 20px;
text-align:center;
}
.boot h2{
font-size:27px;
letter-spacing:2px;
}
.loader{
height:6px;
border-radius:10px;
background:#101b27;
overflow:hidden;
margin:20px 0 10px;
}
.loader span{
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,var(--orange),#fff,var(--green),var(--cyan));
animation:load 3s linear forwards;
}
@keyframes load{to{width:100%}}
.bootLog{
min-height:100px;
color:#73eaff;
font:9px monospace;
line-height:1.8;
text-align:left;
}
#command{
width:min(96%,1000px);
margin:auto;
padding:18px 0 40px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#030712">
<title>ANAND HUB — INDIA 2047</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#02050b;color:#fff}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:root{
--orange:#ff9933;
--green:#19b83f;
--cyan:#48e8ff;
--blue:#3478ff;
--red:#ff4260;
--glass:rgba(255,255,255,.055);
--line:rgba(255,255,255,.13);
}
#app{
min-height:100vh;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% -10%,rgba(255,153,51,.22),transparent 30%),
radial-gradient(circle at 0 70%,rgba(19,136,8,.15),transparent 28%),
radial-gradient(circle at 100% 45%,rgba(72,232,255,.12),transparent 28%),
linear-gradient(180deg,#02050b,#050b14 50%,#02050a);
}
canvas#space{
position:fixed;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
}
.grid{
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
opacity:.15;
background-image:
linear-gradient(rgba(72,232,255,.12) 1px,transparent 1px),
linear-gradient(90deg,rgba(72,232,255,.12) 1px,transparent 1px);
background-size:45px 45px;
transform:perspective(500px) rotateX(55deg) scale(1.8) translateY(25%);
transform-origin:center bottom;
}
.screen{
position:relative;
z-index:2;
min-height:100vh;
display:none;
align-items:center;
justify-content:center;
padding:20px;
}
.screen.active{display:flex}
.panel{
width:min(94%,760px);
border:1px solid var(--line);
border-radius:28px;
background:rgba(5,12,22,.78);
backdrop-filter:blur(18px);
box-shadow:0 30px 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);
}
.login{
padding:30px 20px;
text-align:center;
}
.logo{
font-size:13px;
font-weight:1000;
letter-spacing:4px;
color:var(--cyan);
}
.tricolor{
width:130px;
height:4px;
margin:15px auto;
display:flex;
border-radius:10px;
overflow:hidden;
}
.tricolor i{flex:1}
.tricolor i:nth-child(1){background:var(--orange)}
.tricolor i:nth-child(2){background:#fff}
.tricolor i:nth-child(3){background:var(--green)}
.login h1{
margin:12px 0 4px;
font-size:clamp(42px,12vw,78px);
line-height:.9;
letter-spacing:-4px;
background:linear-gradient(#ffb15b 15%,#fff 48%,#4bc75a 85%);
-webkit-background-clip:text;
color:transparent;
}
.sub{
color:#7e91a7;
font-size:9px;
letter-spacing:3px;
line-height:1.8;
}
.terminal{
margin:24px auto 16px;
padding:13px;
width:min(100%,500px);
text-align:left;
border:1px solid rgba(72,232,255,.18);
border-radius:14px;
background:#01050a;
color:#63eaff;
font-family:monospace;
font-size:9px;
line-height:1.8;
min-height:100px;
}
.input{
width:100%;
padding:14px;
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
background:#02070d;
color:#fff;
outline:none;
margin-top:8px;
}
.input:focus{border-color:var(--cyan)}
.btn{
width:100%;
border:1px solid rgba(255,255,255,.12);
border-radius:13px;
padding:14px;
margin-top:9px;
color:#fff;
background:rgba(255,255,255,.06);
font-weight:1000;
transition:.2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
color:#041016;
background:linear-gradient(90deg,var(--orange),#fff,var(--green));
}
.btn.cyan{
background:linear-gradient(135deg,#0b6c86,#163d83);
border-color:#43ddff66;
}
.boot{
padding:28px 20px;
text-align:center;
}
.boot h2{
font-size:27px;
letter-spacing:2px;
}
.loader{
height:6px;
border-radius:10px;
background:#101b27;
overflow:hidden;
margin:20px 0 10px;
}
.loader span{
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,var(--orange),#fff,var(--green),var(--cyan));
animation:load 3s linear forwards;
}
@keyframes load{to{width:100%}}
.bootLog{
min-height:100px;
color:#73eaff;
font:9px monospace;
line-height:1.8;
text-align:left;
}
#command{
width:min(96%,1000px);
margin:auto;
padding:18px 0 40px;
}