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