· 5 months ago · Apr 23, 2025, 05:05 PM
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>DRONZER - SECURE ACCESS</title>
7 <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap" rel="stylesheet">
8 <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
9 <link href="https://fonts.googleapis.com/css2?family=Wallpoet&display=swap" rel="stylesheet">
10 <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
11 <style>
12 * {
13 margin: 0;
14 padding: 0;
15 box-sizing: border-box;
16 }
17
18 body {
19 background-color: #000;
20 color: #00ff41;
21 font-family: 'Courier New', monospace;
22 height: 100vh;
23 display: flex;
24 justify-content: center;
25 align-items: center;
26 overflow: hidden;
27 position: relative;
28 }
29
30 .scanlines {
31 position: absolute;
32 top: 0;
33 left: 0;
34 width: 100%;
35 height: 100%;
36 background: linear-gradient(
37 to bottom,
38 rgba(0, 255, 65, 0.03) 1px,
39 transparent 1px
40 );
41 background-size: 100% 2px;
42 pointer-events: none;
43 z-index: 1;
44 }
45
46 .welcome-screen, .username-screen, .password-screen, .loading-screen {
47 position: absolute;
48 width: 100%;
49 height: 100%;
50 display: flex;
51 flex-direction: column;
52 justify-content: center;
53 align-items: center;
54 text-align: center;
55 opacity: 0;
56 transition: opacity 0.5s;
57 z-index: 2;
58 }
59
60 /* Enhanced Glitch Effect for DRONZER Title */
61 .welcome-title {
62 font-family: 'Wallpoet', cursive;
63 font-size: 6rem;
64 margin-bottom: 20px;
65 color: #b300ff;
66 text-shadow: 0 0 10px rgba(179, 0, 255, 0.7),
67 0 0 20px rgba(179, 0, 255, 0.5),
68 0 0 30px rgba(179, 0, 255, 0.3);
69 animation: pulse 2s ease-in-out infinite, neon-purple-glow 1.5s alternate infinite;
70 letter-spacing: 5px;
71 position: relative;
72 display: inline-block;
73 }
74
75 .welcome-title.glitch {
76 animation: pulse 2s ease-in-out infinite, neon-purple-glow 1.5s alternate infinite, font 7s step-end infinite;
77 }
78
79 .welcome-title.glitch::before,
80 .welcome-title.glitch::after {
81 content: attr(data-text);
82 position: absolute;
83 top: 0;
84 left: 0;
85 width: 100%;
86 height: 100%;
87 z-index: -1;
88 background-color: #000;
89 }
90
91 .welcome-title.glitch::before {
92 color: #e0287d;
93 animation: paths 5s step-end infinite, opacity 5s step-end infinite, movement 10s step-end infinite;
94 }
95
96 .welcome-title.glitch::after {
97 color: #1bc7fb;
98 animation: paths 5s step-end infinite, opacity 5s step-end infinite, movement 8s step-end infinite;
99 }
100
101 /* Glitch effect for input labels */
102 .input-label {
103 font-size: 2rem;
104 margin-bottom: 30px;
105 color: #00d0ff;
106 text-shadow: 0 0 5px rgba(0, 208, 255, 0.5);
107 position: relative;
108 font-family: 'Audiowide', cursive;
109 transform: scaleX(var(--scale, 1));
110 animation: glitch-p 11s infinite alternate;
111 }
112
113 .input-label::before,
114 .input-label::after {
115 --top: 0; /* offset from top [0 - 10] */
116 --left: 0; /* offset from left [0.001 - 1] */
117 --v-height: 30%; /* visible part */
118
119 --n-tenth: calc(2 * .1 * var(--top));
120 --t-cut: calc(var(--n-tenth) / 2 * 100%);
121 --b-cut: calc(var(--t-cut) + var(--v-height));
122
123 content: attr(data-text);
124 position: absolute;
125 width: 100%;
126 left: 0;
127 text-align: center;
128
129 transform: translateX(calc(var(--left) * 100%));
130
131 /* this helps to get rid of pixelization */
132 filter: drop-shadow(0 0 transparent);
133
134 text-shadow: calc(var(--left) * -3em) 0 .02em lime,
135 calc(var(--left) * -6em) 0 .02em #ff00e1;
136
137 background-color: #000;
138 clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
139 }
140
141 .input-label::before {
142 animation: glitch-b 1.7s infinite alternate-reverse;
143 }
144
145 .input-label::after {
146 animation: glitch-a 3.1s infinite alternate;
147 }
148
149 @keyframes glitch-p {
150 17% { --scale: .87; }
151 31% { --scale: 1.1; }
152 37% { --scale: 1.3; }
153 47% { --scale: .91; }
154 87% { --scale: 1; }
155 }
156
157 @keyframes glitch-a {
158 10%,30%,50%,70%,90% {
159 --top: 0;
160 --left: 0;
161 }
162 0% {
163 --v-height: 15%;
164 }
165 20% {
166 --left: .005;
167 }
168 40% {
169 --left: .01;
170 --v-height: 20%;
171 --top: 3;
172 }
173 60% {
174 --left: .03;
175 --v-height: 25%;
176 --top: 6;
177 }
178 80% {
179 --left: .07;
180 --v-height: 5%;
181 --top: 8;
182 }
183 100% {
184 --left: .083;
185 --v-height: 30%;
186 --top: 1;
187 }
188 }
189
190 @keyframes glitch-b {
191 10%,30%,50%,70%,90% {
192 --top: 0;
193 --left: 0;
194 }
195 0% {
196 --v-height: 15%;
197 --top: 10;
198 }
199 20% {
200 --left: -.005;
201 }
202 40% {
203 --left: -.01;
204 --v-height: 17%;
205 --top: 3;
206 }
207 60% {
208 --left: -.03;
209 --v-height: 35%;
210 --top: 6;
211 }
212 80% {
213 --left: -.07;
214 --v-height: 5%;
215 --top: 8;
216 }
217 100% {
218 --left: -.083;
219 --v-height: 30%;
220 --top: 1;
221 }
222 }
223
224 .input-field {
225 width: 60%;
226 padding: 15px;
227 background: transparent;
228 border: 2px solid #00ff41;
229 border-radius: 0;
230 box-shadow: 0 0 0 2px #000,
231 0 0 0 4px #00ff41,
232 0 0 20px rgba(0, 255, 65, 0.3);
233 color: #00ff41;
234 font-family: 'Courier New', monospace;
235 font-size: 1.5rem;
236 text-align: center;
237 outline: none;
238 transition: all 0.3s;
239 }
240
241 .input-field:focus {
242 box-shadow: 0 0 0 2px #000,
243 0 0 0 4px #00d0ff,
244 0 0 30px rgba(0, 208, 255, 0.5);
245 border-color: #00d0ff;
246 }
247
248 .access-message {
249 position: fixed;
250 top: 0;
251 left: 0;
252 width: 100%;
253 height: 100%;
254 background-color: rgba(0, 0, 0, 0.8);
255 backdrop-filter: blur(5px);
256 display: none;
257 justify-content: center;
258 align-items: center;
259 z-index: 101;
260 font-size: 5rem;
261 font-family: 'Wallpoet', cursive;
262 color: #00ff41;
263 text-shadow: 0 0 15px #00ff41;
264 animation: blink 0.5s infinite, neon-glow 0.5s alternate infinite;
265 }
266
267 .denied-message {
268 position: fixed;
269 top: 0;
270 left: 0;
271 width: 100%;
272 height: 100%;
273 background-color: rgba(0, 0, 0, 0.8);
274 backdrop-filter: blur(5px);
275 display: none;
276 justify-content: center;
277 align-items: center;
278 z-index: 101;
279 font-size: 5rem;
280 font-family: 'Wallpoet', cursive;
281 color: #ff0000;
282 text-shadow: 0 0 15px #ff0000;
283 animation: blink 0.2s infinite, shake 0.5s infinite, neon-red-glow 0.3s alternate infinite;
284 }
285
286 /* Glitch Animations */
287 @keyframes paths {
288 0% {
289 clip-path: polygon(
290 0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%
291 );
292 }
293 5% {
294 clip-path: polygon(
295 0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%
296 );
297 }
298 30% {
299 clip-path: polygon(
300 0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%
301 );
302 }
303 45% {
304 clip-path: polygon(
305 0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%
306 );
307 }
308 76% {
309 clip-path: polygon(
310 0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%
311 );
312 }
313 90% {
314 clip-path: polygon(
315 0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%
316 );
317 }
318 1%, 7%, 33%, 47%, 78%, 93% {
319 clip-path: none;
320 }
321 }
322
323 @keyframes movement {
324 0% {
325 top: 0px;
326 left: -20px;
327 }
328 15% {
329 top: 10px;
330 left: 10px;
331 }
332 60% {
333 top: 5px;
334 left: -10px;
335 }
336 75% {
337 top: -5px;
338 left: 20px;
339 }
340 100% {
341 top: 10px;
342 left: 5px;
343 }
344 }
345
346 @keyframes opacity {
347 0% {
348 opacity: 0.1;
349 }
350 5% {
351 opacity: 0.7;
352 }
353 30% {
354 opacity: 0.4;
355 }
356 45% {
357 opacity: 0.6;
358 }
359 76% {
360 opacity: 0.4;
361 }
362 90% {
363 opacity: 0.8;
364 }
365 1%, 7%, 33%, 47%, 78%, 93% {
366 opacity: 0;
367 }
368 }
369
370 @keyframes font {
371 0% {
372 font-weight: 100;
373 color: #e0287d;
374 filter: blur(3px);
375 }
376 20% {
377 font-weight: 500;
378 color: #fff;
379 filter: blur(0);
380 }
381 50% {
382 font-weight: 300;
383 color: #1bc7fb;
384 filter: blur(2px);
385 }
386 60% {
387 font-weight: 700;
388 color: #fff;
389 filter: blur(0);
390 }
391 90% {
392 font-weight: 500;
393 color: #e0287d;
394 filter: blur(6px);
395 }
396 }
397
398 @keyframes neon-purple-glow {
399 from {
400 text-shadow: 0 0 5px #b300ff, 0 0 10px #b300ff, 0 0 15px #b300ff, 0 0 20px #b300ff;
401 }
402 to {
403 text-shadow: 0 0 10px #b300ff, 0 0 20px #b300ff, 0 0 30px #b300ff, 0 0 40px #b300ff;
404 }
405 }
406
407 @keyframes neon-glow {
408 from {
409 text-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41, 0 0 20px #00ff41;
410 }
411 to {
412 text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 30px #00ff41, 0 0 40px #00ff41;
413 }
414 }
415
416 @keyframes neon-red-glow {
417 from {
418 text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000;
419 }
420 to {
421 text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000;
422 }
423 }
424
425 @keyframes blink {
426 0%, 100% {
427 opacity: 1;
428 }
429 50% {
430 opacity: 0.7;
431 }
432 }
433
434 @keyframes pulse {
435 0%, 100% {
436 transform: scale(1);
437 }
438 50% {
439 transform: scale(1.05);
440 }
441 }
442
443 @keyframes shake {
444 0%, 100% {
445 transform: translateX(0);
446 }
447 10%, 30%, 50%, 70%, 90% {
448 transform: translateX(-10px);
449 }
450 20%, 40%, 60%, 80% {
451 transform: translateX(10px);
452 }
453 }
454
455 @keyframes pixelate {
456 0%, 100% {
457 filter: none;
458 }
459 10%, 30%, 50%, 70%, 90% {
460 filter: url('#pixelate');
461 }
462 }
463
464 .glitch-effect {
465 position: absolute;
466 top: 0;
467 left: 0;
468 width: 100%;
469 height: 100%;
470 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="black"/><text x="50" y="50" font-family="monospace" font-size="10" fill="white" text-anchor="middle">NO SIGNAL</text></svg>');
471 background-size: 20px 20px;
472 opacity: 0.05;
473 pointer-events: none;
474 z-index: 0;
475 }
476
477 .typing {
478 border-right: 3px solid #00ff41;
479 animation: blink-caret 0.75s step-end infinite;
480 }
481
482 @keyframes blink-caret {
483 from, to { border-color: transparent }
484 50% { border-color: #00ff41; }
485 }
486
487 .loading-container {
488 width: 60%;
489 margin-top: 30px;
490 text-align: center;
491 }
492
493 .loading-bar {
494 width: 100%;
495 height: 20px;
496 background-color: rgba(0, 0, 0, 0.5);
497 border: 2px solid #00ff41;
498 box-shadow: 0 0 0 2px #000,
499 0 0 0 4px #00ff41,
500 0 0 20px rgba(0, 255, 65, 0.3);
501 margin-top: 10px;
502 overflow: hidden;
503 position: relative;
504 }
505
506 .loading-progress {
507 height: 100%;
508 width: 0%;
509 background-color: #00ff41;
510 box-shadow: 0 0 10px #00ff41;
511 transition: width 0.1s linear;
512 }
513
514 .loading-text {
515 font-size: 1.5rem;
516 margin-bottom: 10px;
517 color: #00d0ff;
518 font-family: 'Audiowide', cursive;
519 text-shadow: 0 0 5px rgba(0, 208, 255, 0.5);
520 }
521
522 .percentage {
523 position: absolute;
524 right: 10px;
525 top: 50%;
526 transform: translateY(-50%);
527 color: #00ff41;
528 font-family: 'Courier New', monospace;
529 font-weight: bold;
530 text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
531 }
532
533 .hacker-bg {
534 position: absolute;
535 top: 0;
536 left: 0;
537 width: 100%;
538 height: 100%;
539 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%2300ff41" stroke-width="0.5"/><text x="10" y="15" font-family="monospace" font-size="5" fill="%2300ff41">01010101</text></svg>');
540 background-size: 100px 100px;
541 opacity: 0.3;
542 z-index: -1;
543 filter: blur(1px);
544 }
545
546 .matrix-effect {
547 position: absolute;
548 top: 0;
549 left: 0;
550 width: 100%;
551 height: 100%;
552 z-index: -1;
553 opacity: 0.2;
554 pointer-events: none;
555 }
556
557 .system-message {
558 position: absolute;
559 bottom: 20px;
560 left: 20px;
561 font-family: 'Courier New', monospace;
562 font-size: 0.9rem;
563 color: #00ff41;
564 opacity: 0.7;
565 animation: glitch-text 1s linear infinite;
566 }
567
568 @keyframes glitch-text {
569 0%, 100% {
570 text-shadow: 2px 0 rgba(255, 0, 255, 0.7), -2px 0 rgba(0, 255, 255, 0.7);
571 transform: translate(0);
572 }
573 20% {
574 text-shadow: -3px 0 rgba(255, 0, 255, 0.7), 3px 0 rgba(0, 255, 255, 0.7);
575 transform: translate(-2px, 1px);
576 }
577 40% {
578 text-shadow: 4px 0 rgba(255, 0, 255, 0.7), -4px 0 rgba(0, 255, 255, 0.7);
579 transform: translate(2px, -1px);
580 }
581 60% {
582 text-shadow: -2px 0 rgba(255, 0, 255, 0.7), 2px 0 rgba(0, 255, 255, 0.7);
583 transform: translate(1px, 1px);
584 }
585 80% {
586 text-shadow: 3px 0 rgba(255, 0, 255, 0.7), -3px 0 rgba(0, 255, 255, 0.7);
587 transform: translate(-1px, -1px);
588 }
589 }
590 </style>
591
592 <!-- SVG filter for pixelation effect -->
593 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
594 <defs>
595 <filter id="pixelate" x="0" y="0">
596 <feFlood x="4" y="4" height="2" width="2"/>
597 <feComposite width="5" height="5"/>
598 <feTile result="a"/>
599 <feComposite in="SourceGraphic" in2="a" operator="in"/>
600 <feMorphology operator="dilate" radius="1"/>
601 </filter>
602 </defs>
603 </svg>
604</head>
605<body>
606 <div class="glitch-effect"></div>
607 <div class="scanlines"></div>
608 <div class="hacker-bg"></div>
609 <canvas id="matrix" class="matrix-effect"></canvas>
610
611 <div class="system-message">SYSTEM STATUS: ONLINE</div>
612
613 <div class="welcome-screen" id="welcomeScreen">
614 <h1 class="welcome-title glitch" data-text="DRONZER">DRONZER</h1>
615 <div class="input-label" data-text="SECURE ACCESS TERMINAL">SECURE ACCESS TERMINAL</div>
616 </div>
617
618 <div class="username-screen" id="usernameScreen">
619 <div class="input-label" data-text="ENTER USERNAME">ENTER USERNAME</div>
620 <input type="text" id="username" class="input-field" autocomplete="off" autofocus>
621 </div>
622
623 <div class="password-screen" id="passwordScreen">
624 <div class="input-label" data-text="ENTER PASSWORD">ENTER PASSWORD</div>
625 <input type="password" id="password" class="input-field" autocomplete="off" autofocus>
626 </div>
627
628 <div class="loading-screen" id="loadingScreen">
629 <div class="loading-text">INITIATING USER PROTOCOL</div>
630 <div class="loading-container">
631 <div class="loading-bar">
632 <div class="loading-progress" id="loadingProgress"></div>
633 <div class="percentage" id="percentage">0%</div>
634 </div>
635 </div>
636 </div>
637
638 <div class="access-message" id="accessGranted">ACCESS GRANTED</div>
639 <div class="denied-message" id="accessDenied">ACCESS DENIED</div>
640
641 <audio id="glitchSound" src="https://assets.mixkit.co/sfx/preview/mixkit-digital-glitch-2297.mp3" preload="auto"></audio>
642 <audio id="accessSound" src="https://assets.mixkit.co/sfx/preview/mixkit-security-protected-1982.mp3" preload="auto"></audio>
643 <audio id="deniedSound" src="https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3" preload="auto"></audio>
644
645 <script>
646 // Matrix effect
647 const canvas = document.getElementById('matrix');
648 const ctx = canvas.getContext('2d');
649
650 canvas.width = window.innerWidth;
651 canvas.height = window.innerHeight;
652
653 const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
654 const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
655 const nums = '0123456789';
656
657 const alphabet = katakana + latin + nums;
658
659 const fontSize = 16;
660 const columns = canvas.width / fontSize;
661
662 const rainDrops = [];
663
664 for (let x = 0; x < columns; x++) {
665 rainDrops[x] = 1;
666 }
667
668 const draw = () => {
669 ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
670 ctx.fillRect(0, 0, canvas.width, canvas.height);
671
672 ctx.fillStyle = '#00ff41';
673 ctx.font = fontSize + 'px monospace';
674
675 for (let i = 0; i < rainDrops.length; i++) {
676 const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
677 ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
678
679 if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
680 rainDrops[i] = 0;
681 }
682 rainDrops[i]++;
683 }
684 };
685
686 setInterval(draw, 30);
687
688 // Audio functions
689 function playGlitch() {
690 const sound = document.getElementById('glitchSound');
691 sound.currentTime = 0;
692 sound.play();
693 }
694
695 function playAccessSound() {
696 const sound = document.getElementById('accessSound');
697 sound.currentTime = 0;
698 sound.play();
699 }
700
701 function playDeniedSound() {
702 const sound = document.getElementById('deniedSound');
703 sound.currentTime = 0;
704 sound.play();
705 }
706
707 // Typing effect
708 async function typeWriter(text, element, speed) {
709 element.innerHTML = '';
710 element.classList.add('typing');
711
712 for (let i = 0; i < text.length; i++) {
713 element.innerHTML += text.charAt(i);
714 await new Promise(resolve => setTimeout(resolve, speed));
715 }
716
717 element.classList.remove('typing');
718 }
719
720 // Reset to username screen
721 function resetToUsername() {
722 const passwordScreen = document.getElementById('passwordScreen');
723 passwordScreen.style.opacity = 0;
724
725 setTimeout(() => {
726 const usernameScreen = document.getElementById('usernameScreen');
727 usernameScreen.style.opacity = 1;
728 document.getElementById('username').value = '';
729 document.getElementById('password').value = '';
730 document.getElementById('username').focus();
731 }, 500);
732 }
733
734 // Loading bar animation
735 function animateLoadingBar(duration) {
736 return new Promise((resolve) => {
737 const loadingBar = document.getElementById('loadingProgress');
738 const percentage = document.getElementById('percentage');
739 let width = 0;
740 const interval = 100; // ms
741 const increment = 100 / (duration / interval);
742
743 const timer = setInterval(() => {
744 if (width < 100) {
745 width += increment;
746 loadingBar.style.width = width + '%';
747 percentage.textContent = Math.min(Math.round(width), 100) + '%';
748 } else {
749 clearInterval(timer);
750 resolve();
751 }
752 }, interval);
753 });
754 }
755
756 // Initialize the page
757 document.addEventListener('DOMContentLoaded', async () => {
758 const welcomeScreen = document.getElementById('welcomeScreen');
759 welcomeScreen.style.opacity = 1;
760
761 playGlitch();
762 await typeWriter('DRONZER', document.querySelector('.welcome-title'), 150);
763
764 setTimeout(() => {
765 welcomeScreen.style.opacity = 0;
766
767 setTimeout(() => {
768 const usernameScreen = document.getElementById('usernameScreen');
769 usernameScreen.style.opacity = 1;
770 const usernameInput = document.getElementById('username');
771 usernameInput.focus();
772
773 let usernameTimeout;
774
775 usernameInput.addEventListener('input', () => {
776 clearTimeout(usernameTimeout);
777 usernameTimeout = setTimeout(() => {
778 proceedToPassword();
779 }, 2000);
780 });
781
782 usernameInput.addEventListener('keydown', (e) => {
783 if (e.key === 'Enter') {
784 proceedToPassword();
785 }
786 });
787 }, 500);
788 }, 3000);
789 });
790
791 function proceedToPassword() {
792 const username = document.getElementById('username').value.trim();
793 if (!username) return;
794
795 const usernameScreen = document.getElementById('usernameScreen');
796 usernameScreen.style.opacity = 0;
797
798 setTimeout(() => {
799 const passwordScreen = document.getElementById('passwordScreen');
800 passwordScreen.style.opacity = 1;
801 const passwordInput = document.getElementById('password');
802 passwordInput.focus();
803
804 let passwordTimeout;
805
806 passwordInput.addEventListener('input', () => {
807 clearTimeout(passwordTimeout);
808 passwordTimeout = setTimeout(() => {
809 authenticate();
810 }, 2000);
811 });
812
813 passwordInput.addEventListener('keydown', (e) => {
814 if (e.key === 'Enter') {
815 authenticate();
816 }
817 });
818 }, 500);
819 }
820
821 function authenticate() {
822 const username = document.getElementById('username').value;
823 const password = document.getElementById('password').value;
824
825 fetch('/auth', {
826 method: 'POST',
827 headers: {
828 'Content-Type': 'application/json'
829 },
830 body: JSON.stringify({ username, password }),
831 credentials: 'include'
832 })
833 .then(response => response.json())
834 .then(data => {
835 if (data.success) {
836 const passwordScreen = document.getElementById('passwordScreen');
837 passwordScreen.style.opacity = 0;
838
839 playGlitch();
840 document.getElementById('accessGranted').style.display = 'flex';
841
842 setTimeout(() => {
843 document.getElementById('accessGranted').style.display = 'none';
844 window.location.href = data.redirect || '/';
845 }, 5000);
846 } else {
847 playGlitch();
848 document.getElementById('accessDenied').style.display = 'flex';
849
850 setTimeout(() => {
851 document.getElementById('accessDenied').style.display = 'none';
852 resetToUsername();
853 }, 3000);
854 }
855 })
856 .catch(error => {
857 console.error('Error:', error);
858 playGlitch();
859 document.getElementById('accessDenied').style.display = 'flex';
860
861 setTimeout(() => {
862 document.getElementById('accessDenied').style.display = 'none';
863 resetToUsername();
864 }, 3000);
865 });
866
867 const passwordScreen = document.getElementById('passwordScreen');
868 passwordScreen.style.opacity = 0;
869
870 if (isValid) {
871 // Show loading screen
872 const loadingScreen = document.getElementById('loadingScreen');
873 loadingScreen.style.opacity = 1;
874
875 // Animate loading bar for 10 seconds
876 animateLoadingBar(10000).then(() => {
877 loadingScreen.style.opacity = 0;
878 playAccessSound();
879 document.getElementById('accessGranted').style.display = 'flex';
880
881 setTimeout(() => {
882 document.getElementById('accessGranted').style.display = 'none';
883 // Redirect to index.html on success
884 window.location.href = 'index.html';
885 }, 3000);
886 });
887 } else {
888 playDeniedSound();
889 document.getElementById('accessDenied').style.display = 'flex';
890
891 setTimeout(() => {
892 document.getElementById('accessDenied').style.display = 'none';
893 resetToUsername();
894 }, 3000);
895 }
896 }
897
898 // Random glitch effects
899 setInterval(() => {
900 if (Math.random() > 0.9) {
901 playGlitch();
902 }
903 }, 3000);
904
905 // Window resize handler
906 window.addEventListener('resize', () => {
907 canvas.width = window.innerWidth;
908 canvas.height = window.innerHeight;
909 });
910 </script>
911</body>
912</html>