Skip to content

Commit 204f755

Browse files
sajadkhan7795-createsajadkhan7795-create
authored
Change title from 'Ultra Advanced Authorization Portal' to 'Authorization Portal'
1 parent 33a5a3e commit 204f755

File tree

1 file changed

+342
-0
lines changed

1 file changed

+342
-0
lines changed

‎BE‎

Lines changed: 342 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,342 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Authorization Portal</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
9+
<style>
10+
body {
11+
font-family: 'Inter', sans-serif;
12+
margin: 0;
13+
overflow: hidden;
14+
background: #0f0f0f;
15+
color: #fff;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
height: 100vh;
20+
}
21+
22+
/* --- Particle Background --- */
23+
#particles {
24+
position: fixed;
25+
top: 0; left: 0;
26+
width: 100%; height: 100%;
27+
z-index: 0;
28+
}
29+
30+
/* --- Loader --- */
31+
#page-loader {
32+
position: fixed;
33+
top: 0; left: 0;
34+
width: 100%; height: 100%;
35+
background: #0f0f0f;
36+
display: flex; flex-direction: column;
37+
justify-content: center; align-items: center;
38+
z-index: 50;
39+
opacity: 1;
40+
transition: opacity 0.5s ease;
41+
}
42+
43+
.loader-text {
44+
font-size: 2rem;
45+
font-weight: 700;
46+
background: linear-gradient(90deg, #ff00ff, #00ffff);
47+
-webkit-background-clip: text;
48+
-webkit-text-fill-color: transparent;
49+
background-size: 200% 200%;
50+
animation: gradient-slide 2s linear infinite;
51+
margin-bottom: 20px;
52+
}
53+
54+
@keyframes gradient-slide {
55+
0% { background-position: 0% 50%; }
56+
50% { background-position: 100% 50%; }
57+
100% { background-position: 0% 50%; }
58+
}
59+
60+
.loader-dots span {
61+
display: inline-block;
62+
width: 12px; height: 12px;
63+
margin: 0 4px;
64+
background: #ff00ff;
65+
border-radius: 50%;
66+
animation: bounce 0.6s infinite alternate;
67+
}
68+
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
69+
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }
70+
71+
@keyframes bounce {
72+
0% { transform: translateY(0); }
73+
100% { transform: translateY(-15px); }
74+
}
75+
76+
/* --- Main Content --- */
77+
#main-content {
78+
opacity: 0;
79+
z-index: 10;
80+
width: 100%; max-width: 400px;
81+
background: rgba(42,42,42,0.85);
82+
backdrop-filter: blur(10px);
83+
padding: 2rem;
84+
border-radius: 1rem;
85+
box-shadow: 0 10px 30px rgba(0,0,0,0.7);
86+
text-align: center;
87+
position: relative;
88+
}
89+
90+
h1 {
91+
font-size: 2.2rem;
92+
font-weight: 700;
93+
background: linear-gradient(90deg,#ff00ff,#00ffff);
94+
-webkit-background-clip: text;
95+
-webkit-text-fill-color: transparent;
96+
margin-bottom: 1rem;
97+
}
98+
99+
/* --- Floating Input Labels --- */
100+
.input-container {
101+
position: relative;
102+
margin-bottom: 1.5rem;
103+
}
104+
.input-container input {
105+
width: 100%;
106+
padding: 14px 12px;
107+
background: #1e1e1e;
108+
border: 2px solid #444;
109+
border-radius: 0.75rem;
110+
color: #fff;
111+
outline: none;
112+
transition: all 0.3s;
113+
}
114+
.input-container label {
115+
position: absolute;
116+
left: 12px;
117+
top: 14px;
118+
color: #888;
119+
font-size: 14px;
120+
pointer-events: none;
121+
transition: 0.3s;
122+
}
123+
.input-container input:focus + label,
124+
.input-container input:not(:placeholder-shown) + label {
125+
top: -10px;
126+
left: 10px;
127+
font-size: 12px;
128+
color: #ff00ff;
129+
}
130+
131+
/* --- Button --- */
132+
.btn {
133+
width: 100%;
134+
padding: 0.75rem;
135+
font-weight: 600;
136+
font-size: 1.1rem;
137+
background: linear-gradient(90deg,#ff00ff,#00ffff);
138+
border: none;
139+
border-radius: 0.75rem;
140+
cursor: pointer;
141+
position: relative;
142+
overflow: hidden;
143+
transition: 0.3s;
144+
margin-top: 10px;
145+
}
146+
.btn::after {
147+
content: '';
148+
position: absolute;
149+
top: 0; left: -75%;
150+
width: 50%; height: 100%;
151+
background: rgba(255,255,255,0.2);
152+
transform: skewX(-25deg);
153+
transition: 0.5s;
154+
}
155+
.btn:hover::after { left: 125%; }
156+
.btn:active { transform: scale(0.97); }
157+
158+
/* --- Toast --- */
159+
.toast {
160+
position: fixed;
161+
bottom: 2rem;
162+
left: 50%;
163+
transform: translateX(-50%);
164+
padding: 1rem 2rem;
165+
border-radius: 0.75rem;
166+
font-weight: 600;
167+
display: none;
168+
z-index: 100;
169+
}
170+
.toast.show { display: block; animation: toastIn 0.5s forwards; }
171+
@keyframes toastIn {
172+
0% { transform: translate(-50%, 50%); opacity: 0; }
173+
100% { transform: translate(-50%, 0); opacity: 1; }
174+
}
175+
176+
/* --- Success Glow --- */
177+
#main-content.success-glow {
178+
box-shadow: 0 0 40px #00ff00, 0 0 60px #00ff00 inset;
179+
animation: glowPulse 1.5s infinite alternate;
180+
}
181+
@keyframes glowPulse {
182+
0% { box-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00 inset; }
183+
100% { box-shadow: 0 0 60px #00ff00, 0 0 80px #00ff00 inset; }
184+
}
185+
</style>
186+
</head>
187+
<body>
188+
189+
<canvas id="particles"></canvas>
190+
191+
<!-- Loader -->
192+
<div id="page-loader">
193+
<div class="loader-text">BRILLIANT ENTERPRISES</div>
194+
<div class="loader-dots">
195+
<span></span><span></span><span></span>
196+
</div>
197+
</div>
198+
199+
<!-- Main Content -->
200+
<div id="main-content">
201+
<h1>Access Portal</h1>
202+
<form id="authForm" onsubmit="event.preventDefault(); authorize();">
203+
<div class="input-container">
204+
<input type="text" id="authKeyInput" placeholder=" " required>
205+
<label for="authKeyInput">Authorization Key</label>
206+
</div>
207+
<button type="submit" class="btn">PROCEED</button>
208+
</form>
209+
</div>
210+
211+
<div id="toast" class="toast"></div>
212+
213+
<audio id="successAudio" src="https://www.soundjay.com/buttons/sounds/button-3.mp3" preload="auto"></audio>
214+
215+
<script>
216+
// --- Particle Background with Mouse Interaction ---
217+
const canvas = document.getElementById('particles');
218+
const ctx = canvas.getContext('2d');
219+
let particlesArray;
220+
canvas.width = window.innerWidth;
221+
canvas.height = window.innerHeight;
222+
223+
class Particle {
224+
constructor(x, y, size, speedX, speedY) {
225+
this.x = x;
226+
this.y = y;
227+
this.size = size;
228+
this.speedX = speedX;
229+
this.speedY = speedY;
230+
}
231+
update(mouse) {
232+
// move
233+
this.x += this.speedX;
234+
this.y += this.speedY;
235+
if(this.x>canvas.width||this.x<0) this.speedX*=-1;
236+
if(this.y>canvas.height||this.y<0) this.speedY*=-1;
237+
238+
// mouse repulsion
239+
let dx = mouse.x - this.x;
240+
let dy = mouse.y - this.y;
241+
let dist = Math.sqrt(dx*dx + dy*dy);
242+
if(dist<80){
243+
this.x -= dx/20;
244+
this.y -= dy/20;
245+
}
246+
}
247+
draw(){
248+
ctx.fillStyle="#ff00ff";
249+
ctx.beginPath();
250+
ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
251+
ctx.fill();
252+
}
253+
}
254+
255+
function initParticles() {
256+
particlesArray=[];
257+
for(let i=0;i<120;i++){
258+
let size=Math.random()*3+1;
259+
let x=Math.random()*canvas.width;
260+
let y=Math.random()*canvas.height;
261+
let speedX=(Math.random()-0.5)*0.5;
262+
let speedY=(Math.random()-0.5)*0.5;
263+
particlesArray.push(new Particle(x,y,size,speedX,speedY));
264+
}
265+
}
266+
267+
let mouse={x:null,y:null};
268+
window.addEventListener('mousemove', function(e){
269+
mouse.x=e.x;
270+
mouse.y=e.y;
271+
});
272+
273+
function animateParticles(){
274+
ctx.clearRect(0,0,canvas.width,canvas.height);
275+
particlesArray.forEach(p=>p.update(mouse));
276+
particlesArray.forEach(p=>p.draw());
277+
requestAnimationFrame(animateParticles);
278+
}
279+
initParticles();
280+
animateParticles();
281+
282+
// --- Loader Animation ---
283+
const LOAD_TIME_MS = 1800;
284+
window.onload = function() {
285+
setTimeout(()=>{
286+
document.getElementById('page-loader').style.opacity='0';
287+
setTimeout(()=>{
288+
document.getElementById('page-loader').style.display='none';
289+
document.getElementById('main-content').style.opacity='1';
290+
},500);
291+
},LOAD_TIME_MS);
292+
};
293+
294+
// --- Toast & Typing Effect ---
295+
function typeMessage(el, msg, color="#ff00ff") {
296+
const toast = document.getElementById('toast');
297+
toast.style.backgroundColor=color;
298+
toast.textContent='';
299+
toast.classList.add('show');
300+
let i=0;
301+
let interval=setInterval(()=>{
302+
if(i<msg.length){ toast.textContent+=msg[i]; i++; }
303+
else clearInterval(interval);
304+
},30);
305+
setTimeout(()=>toast.classList.remove('show'), msg.length*30+1500);
306+
}
307+
308+
// --- Authorization ---
309+
const SECRET_KEY="1122";
310+
const REDIRECT_URL="https://script.google.com/macros/s/AKfycbzq3Hki-vg0oLRTA2DjF4J3e39BR0YSsxJJROP1xAmh_sAT5FpyMXGnkZEsHSj3Ec1Oyw/exec";
311+
312+
if(sessionStorage.getItem('authorized')){
313+
window.location.href=REDIRECT_URL;
314+
}
315+
316+
let attempts=0;
317+
function authorize(){
318+
const key=document.getElementById('authKeyInput').value.trim();
319+
const input=document.getElementById('authKeyInput');
320+
const main=document.getElementById('main-content');
321+
if(key===SECRET_KEY){
322+
typeMessage(null,"Access Granted! Redirecting...","#00ff00");
323+
input.disabled=true;
324+
document.querySelector(".btn").disabled=true;
325+
sessionStorage.setItem('authorized',true);
326+
main.classList.add('success-glow');
327+
document.getElementById('successAudio').play();
328+
setTimeout(()=>window.location.href=REDIRECT_URL,1500);
329+
}else{
330+
attempts++;
331+
typeMessage(null,"Access Denied! Invalid Key.","#ff4d4d");
332+
input.value=''; input.focus();
333+
if(attempts>=3){
334+
typeMessage(null,"Too many attempts. Try again later.","#ff0000");
335+
input.disabled=true;
336+
document.querySelector(".btn").disabled=true;
337+
}
338+
}
339+
}
340+
</script>
341+
</body>
342+
</html>

0 commit comments

Comments
 (0)