-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
95 lines (91 loc) · 7.01 KB
/
Copy pathindex.html
File metadata and controls
95 lines (91 loc) · 7.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Logging In...</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
html,body{width:100%;height:100%;overflow:hidden}
body{
display:flex;justify-content:center;align-items:center;position:relative;
background:linear-gradient(180deg,#ffb56b,#ff8b8b,#d76dc7,#7368d8,#35599d);
background-size:400% 400%;
animation:sky 15s ease infinite;
transition:opacity .8s;
}
@keyframes sky{0%{background-position:0 50%}50%{background-position:100% 50%;filter:hue-rotate(20deg)}100%{background-position:0 50%}}
#stars,#shootingStars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:twinkle 2.5s infinite}
@keyframes twinkle{50%{opacity:.2;transform:scale(.5)}}
.moon{position:absolute;top:50px;right:60px;width:150px;height:150px;border-radius:50%;
background:radial-gradient(circle,#fff,#ffe79c,#ffc94d);
box-shadow:0 0 30px #fff,0 0 80px gold;animation:glow 4s infinite,hue 12s linear infinite}
@keyframes glow{50%{transform:scale(1.05)}}@keyframes hue{50%{filter:hue-rotate(30deg)}}
.cloud{position:absolute;width:220px;height:60px;background:rgba(255,255,255,.18);border-radius:100px;filter:blur(4px)}
.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud:before{width:80px;height:80px;left:20px;top:-20px}.cloud:after{width:100px;height:100px;right:20px;top:-35px}
.cloud1{top:70px;left:-260px;animation:move1 40s linear infinite}
.cloud2{top:160px;left:-360px;animation:move2 55s linear infinite}
.cloud3{top:240px;left:-300px;animation:move3 50s linear infinite}
@keyframes move1{to{transform:translateX(1800px)}}@keyframes move2{to{transform:translateX(1900px)}}@keyframes move3{to{transform:translateX(1850px)}}
.ground{position:absolute;bottom:0;width:100%;height:180px;background:linear-gradient(to top,#184320,#4d9552,transparent)}
#grass,#flowers,#fireflies{position:absolute;left:0;width:100%}
#grass{bottom:0;height:120px}#flowers{bottom:35px;height:70px}
.blade{position:absolute;bottom:0;width:3px;background:linear-gradient(#8cf57a,#237335);transform-origin:bottom;animation:sway 3s infinite}
@keyframes sway{50%{transform:rotate(5deg)}}
.tree{position:absolute;left:50%;bottom:100px;transform:translateX(-50%)}
.trunk{width:44px;height:240px;background:linear-gradient(#7b4b26,#4b2912);border-radius:12px}
.leaves{position:absolute;left:-90px;top:-70px;width:220px;height:170px;background:#2f9146;border-radius:50%}
.bridge{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);width:320px;height:14px;background:#6b4325;border-radius:12px}
.login{position:relative;z-index:10;width:min(360px,90vw);padding:30px;border-radius:24px;background:rgba(255,255,255,.14);backdrop-filter:blur(16px);text-align:center;color:#fff}
input{width:100%;padding:14px;border:none;border-radius:30px;background:rgba(255,255,255,.18);color:#fff;margin:15px 0}
input::placeholder{color:#eee}
button{width:100%;padding:14px;border:none;border-radius:30px;background:linear-gradient(45deg,#ffd65b,#ffb347);font-weight:700;cursor:pointer}
#loadingScreen{display:none;position:fixed;inset:0;z-index:99;background:linear-gradient(180deg,#ffb56b,#d76dc7,#35599d);justify-content:center;align-items:center;flex-direction:column;color:#fff}
.loaderMoon{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#fff,#ffe58a,#ffc74f);box-shadow:0 0 30px #fff,0 0 80px gold;animation:glow 2s infinite}
.progress{margin-top:20px;width:min(300px,80vw);height:10px;background:rgba(255,255,255,.2);border-radius:20px;overflow:hidden}
.bar{width:0;height:100%;background:linear-gradient(90deg,gold,orange)}
.firefly{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe65a;box-shadow:0 0 10px gold;animation:fly 5s linear infinite}
@keyframes fly{to{transform:translateY(-140px);opacity:0}}
@media(max-width:768px){.moon{width:100px;height:100px;right:20px;top:20px}.tree{transform:translateX(-50%) scale(.8)}.bridge{width:220px}}
</style>
</head>
<body>
<div id="stars"></div><div id="shootingStars"></div>
<div class="moon"></div>
<div class="cloud cloud1"></div><div class="cloud cloud2"></div><div class="cloud cloud3"></div>
<div class="ground"><div id="grass"></div><div id="flowers"></div></div>
<div class="bridge"></div>
<div class="tree"><div class="trunk"></div><div class="leaves"></div></div>
<div class="login">
<h1>Hey, Honey</h1>
<p>Enter aur secret password</p>
<input id="password" type="password" placeholder=" Enter Password to access">
<button id="loginBtn">Enter</button>
<div id="msg"></div>
</div>
<div id="loadingScreen">
<div class="loaderMoon"></div>
<h2 style="margin:18px 0 8px">Welcome Honey</h2>
<p>Preparing aur world...</p>
<div class="progress"><div class="bar" id="bar"></div></div>
</div>
<script>
const stars=document.getElementById("stars");
for(let i=0;i<300;i++){let s=document.createElement("div");s.className="star";s.style.left=Math.random()*100+"%";s.style.top=Math.random()*65+"%";s.style.animationDelay=Math.random()*3+"s";stars.appendChild(s);}
const grass=document.getElementById("grass");
for(let i=0;i<600;i++){let b=document.createElement("div");b.className="blade";b.style.left=Math.random()*100+"%";b.style.height=(30+Math.random()*60)+"px";b.style.animationDelay=Math.random()*3+"s";grass.appendChild(b);}
const flowers=document.getElementById("flowers"),cols=["#ff77b7","#ffd84d","#fff","#72c8ff","#c68cff"];
for(let i=0;i<70;i++){let f=document.createElement("div");f.style.cssText="position:absolute;width:12px;height:12px;border-radius:50%;";f.style.left=Math.random()*100+"%";f.style.bottom=Math.random()*20+"px";f.style.background=cols[Math.floor(Math.random()*cols.length)];flowers.appendChild(f);}
const ff=document.getElementById("fireflies");
for(let i=0;i<25;i++){let d=document.createElement("div");d.className="firefly";d.style.left=Math.random()*100+"%";d.style.bottom=(20+Math.random()*160)+"px";d.style.animationDelay=Math.random()*5+"s";document.body.appendChild(d);}
setInterval(()=>{let s=document.createElement("div");s.style.cssText="position:absolute;width:2px;height:2px;background:#fff;box-shadow:0 0 15px #fff;left:"+(Math.random()*80)+"%;top:0";shootingStars.appendChild(s);s.animate([{transform:"translate(0,0)"},{transform:"translate(450px,300px)",opacity:0}],{duration:1200});setTimeout(()=>s.remove(),1200);},7000);
const PASSWORD="Honey@#1001";
loginBtn.onclick=()=>{if(password.value!==PASSWORD){msg.textContent="Wrong Password";return;}loadingScreen.style.display="flex";document.querySelector(".login").style.display="none";let p=0;let t=setInterval(()=>{p++;bar.style.width=p+"%";if(p>=100){clearInterval(t);location.href="home.html";}},30);}
</script>
</body>
</html>