From de1caa30e6acee3b2950c48e7c4c54b39f651c52 Mon Sep 17 00:00:00 2001 From: Marian Roibu Date: Thu, 22 Dec 2022 18:43:52 +0100 Subject: [PATCH 1/2] finished --- close_session.php | 7 + cyberpunk.css | 401 ++++++++++++++++++++++++++++++++ cyberpunk.css.map | 1 + cyberpunk.scss | 577 ++++++++++++++++++++++++++++++++++++++++++++++ error.css | 498 +++++++++++++++++++++++++++++++++++++++ error.html | 21 ++ index.php | 36 +++ java.js | 109 +++++++++ panel.php | 18 ++ style.css | 219 ++++++++++++++++++ test.html | 22 ++ timer.js | 15 ++ validate.php | 26 +++ 13 files changed, 1950 insertions(+) create mode 100644 close_session.php create mode 100644 cyberpunk.css create mode 100644 cyberpunk.css.map create mode 100644 cyberpunk.scss create mode 100644 error.css create mode 100644 error.html create mode 100644 index.php create mode 100644 java.js create mode 100644 panel.php create mode 100644 style.css create mode 100644 test.html create mode 100644 timer.js create mode 100644 validate.php diff --git a/close_session.php b/close_session.php new file mode 100644 index 0000000..00c2d05 --- /dev/null +++ b/close_session.php @@ -0,0 +1,7 @@ + diff --git a/cyberpunk.css b/cyberpunk.css new file mode 100644 index 0000000..21e7d93 --- /dev/null +++ b/cyberpunk.css @@ -0,0 +1,401 @@ +h1, +h2 { + margin: 0; + position: absolute; + z-index: 999; +} + +a { + color: #000000; +} + +section { + padding: 20px; +} + +.hero { + font-size: clamp(40px, 10vw, 100px); + line-height: 1; + display: inline-block; + color: #ff1111; + letter-spacing: 10px; + /* Bright things in dark environments usually cast that light, giving off a glow */ + filter: drop-shadow(0 1px 3px); + z-index: 999; +} + +.demo { + position: absolute; + height: 100px; + background: #000000; + +} + +.layers { + position: relative; + z-index: 999; +} + +.layers::before, +.layers::after { + content: attr(data-text); + position: relative; + width: 110%; + z-index: -1; +} + +.layers::before { + top: 10px; + left: 15px; + color: #e0287d; +} + +.layers::after { + top: 5px; + left: -10px; + color: #1bc7fb; +} + +.single-path { + -webkit-clip-path: polygon(0% 12%, 53% 12%, 53% 26%, 25% 26%, 25% 86%, 31% 86%, 31% 0%, 53% 0%, 53% 84%, 92% 84%, 92% 82%, 70% 82%, 70% 29%, 78% 29%, 78% 65%, 69% 65%, 69% 66%, 77% 66%, 77% 45%, 85% 45%, 85% 26%, 97% 26%, 97% 28%, 84% 28%, 84% 34%, 54% 34%, 54% 89%, 30% 89%, 30% 58%, 83% 58%, 83% 5%, 68% 5%, 68% 36%, 62% 36%, 62% 1%, 12% 1%, 12% 34%, 60% 34%, 60% 57%, 98% 57%, 98% 83%, 1% 83%, 1% 53%, 91% 53%, 91% 84%, 8% 84%, 8% 83%, 4% 83%); + clip-path: polygon(0% 12%, 53% 12%, 53% 26%, 25% 26%, 25% 86%, 31% 86%, 31% 0%, 53% 0%, 53% 84%, 92% 84%, 92% 82%, 70% 82%, 70% 29%, 78% 29%, 78% 65%, 69% 65%, 69% 66%, 77% 66%, 77% 45%, 85% 45%, 85% 26%, 97% 26%, 97% 28%, 84% 28%, 84% 34%, 54% 34%, 54% 89%, 30% 89%, 30% 58%, 83% 58%, 83% 5%, 68% 5%, 68% 36%, 62% 36%, 62% 1%, 12% 1%, 12% 34%, 60% 34%, 60% 57%, 98% 57%, 98% 83%, 1% 83%, 1% 53%, 91% 53%, 91% 84%, 8% 84%, 8% 83%, 4% 83%); +} + +.paths { + -webkit-animation: paths 5s step-end infinite; + animation: paths 5s step-end infinite; +} + +@-webkit-keyframes paths { + 0% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 5% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 30% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 45% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 76% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 90% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 1%, 7%, 33%, 47%, 78%, 93% { + -webkit-clip-path: none; + clip-path: none; + } +} + +@keyframes paths { + 0% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 5% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 30% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 45% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 76% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 90% { + -webkit-clip-path: polygon(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%); + clip-path: polygon(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%); + } + 1%, 7%, 33%, 47%, 78%, 93% { + -webkit-clip-path: none; + clip-path: none; + } +} +.movement { + /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */ + position: relative; + -webkit-animation: movement 8s step-end infinite; + animation: movement 8s step-end infinite; +} + +@-webkit-keyframes movement { + 0% { + top: 0px; + left: -20px; + } + 15% { + top: 10px; + left: 10px; + } + 60% { + top: 5px; + left: -10px; + } + 75% { + top: -5px; + left: 20px; + } + 100% { + top: 10px; + left: 5px; + } +} + +@keyframes movement { + 0% { + top: 0px; + left: -20px; + } + 15% { + top: 10px; + left: 10px; + } + 60% { + top: 5px; + left: -10px; + } + 75% { + top: -5px; + left: 20px; + } + 100% { + top: 10px; + left: 5px; + } +} +.opacity { + -webkit-animation: opacity 5s step-end infinite; + animation: opacity 5s step-end infinite; +} + +@-webkit-keyframes opacity { + 0% { + opacity: 0.1; + } + 5% { + opacity: 0.7; + } + 30% { + opacity: 0.4; + } + 45% { + opacity: 0.6; + } + 76% { + opacity: 0.4; + } + 90% { + opacity: 0.8; + } + 1%, 7%, 33%, 47%, 78%, 93% { + opacity: 0; + } +} + +@keyframes opacity { + 0% { + opacity: 0.1; + } + 5% { + opacity: 0.7; + } + 30% { + opacity: 0.4; + } + 45% { + opacity: 0.6; + } + 76% { + opacity: 0.4; + } + 90% { + opacity: 0.8; + } + 1%, 7%, 33%, 47%, 78%, 93% { + opacity: 0; + } +} +.font { + -webkit-animation: font 7s step-end infinite; + animation: font 7s step-end infinite; +} + +@-webkit-keyframes font { + 0% { + font-weight: 100; + color: #e0287d; + filter: blur(3px); + } + 20% { + font-weight: 500; + color: #000000; + filter: blur(0); + } + 50% { + font-weight: 300; + color: #1bc7fb; + filter: blur(2px); + } + 60% { + font-weight: 700; + color: #000000; + filter: blur(0); + } + 90% { + font-weight: 500; + color: #e0287d; + filter: blur(6px); + } +} + +@keyframes font { + 0% { + font-weight: 100; + color: #e0287d; + filter: blur(3px); + } + 20% { + font-weight: 500; + color: #000000; + filter: blur(0); + } + 50% { + font-weight: 300; + color: #1bc7fb; + filter: blur(2px); + } + 60% { + font-weight: 700; + color: #000000; + filter: blur(0); + } + 90% { + font-weight: 500; + color: #e0287d; + filter: blur(6px); + } +} +.glitch span { + -webkit-animation: paths 5s step-end infinite; + animation: paths 5s step-end infinite; +} + +.glitch::before { + -webkit-animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 8s step-end infinite, movement 10s step-end infinite; + animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 8s step-end infinite, movement 10s step-end infinite; +} + +.glitch::after { + -webkit-animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 7s step-end infinite, movement 8s step-end infinite; + animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 7s step-end infinite, movement 8s step-end infinite; +} + +.hero-container { + position:absolute; + top: 90%; + left: 20%; +} +a{ + text-decoration: none; +} + +@-webkit-keyframes blink { + 0.01% { + opacity: 0; + } + 50% { + opacity: 0; + } + 50.01% { + opacity: 1; + } +} + +@keyframes blink { + 0.01% { + opacity: 0; + } + 50% { + opacity: 0; + } + 50.01% { + opacity: 1; + } +} +@-webkit-keyframes scanline { + 0.01% { + height: 0; + } + 99.99% { + height: 100%; + } + 100% { + height: 0; + } +} +@keyframes scanline { + 0.01% { + height: 0; + } + 99.99% { + height: 100%; + } + 100% { + height: 0; + } +} +html { + font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; + text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); + background-color: #0f0000; + background-image: url(http://api.thumbr.it/whitenoise-200x200.png?background=00000000&noise=626262&density=15&opacity=15); + background-size: 100px; + color: red; + height: 100%; +} + + + +p, +pre { + font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; + font-size: inherit; + line-height: 1; + margin: 0; + display: block; + padding: 5px; +} + +.blink { + opacity: 1; + -webkit-animation: blink 1s linear infinite; + animation: blink 1s linear infinite; +} + +.scanline { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.02); + -webkit-animation: scanline 8s linear infinite; + animation: scanline 8s linear infinite; + pointer-events: none; +}/*# sourceMappingURL=cyberpunk.css.map */ \ No newline at end of file diff --git a/cyberpunk.css.map b/cyberpunk.css.map new file mode 100644 index 0000000..f05f468 --- /dev/null +++ b/cyberpunk.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["cyberpunk.scss","cyberpunk.css"],"names":[],"mappings":"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","file":"cyberpunk.css"} \ No newline at end of file diff --git a/cyberpunk.scss b/cyberpunk.scss new file mode 100644 index 0000000..62f7200 --- /dev/null +++ b/cyberpunk.scss @@ -0,0 +1,577 @@ +h1, +h2 { + margin: 0; + position: absolute; + z-index: 999; +} + +a { + color: #000000; +} + +section { + padding: 20px; +} + +.hero { + font-size: clamp(40px, 10vw, 100px); + line-height: 1; + display: inline-block; + color: #ff1111; + + letter-spacing: 10px; + + /* Bright things in dark environments usually cast that light, giving off a glow */ + filter: drop-shadow(0 1px 3px); + z-index: 999; +} + +.demo { + position: absolute; + height: 100px; + background: #000000; + z-index: 999; +} + +.layers { + position: relative; + z-index: 999; +} + +.layers::before, +.layers::after { + content: attr(data-text); + position: relative; + width: 110%; + z-index: -1; +} + +.layers::before { + top: 10px; + left: 15px; + color: #e0287d; +} + +.layers::after { + top: 5px; + left: -10px; + color: #1bc7fb; +} + +.single-path { + clip-path: polygon( + 0% 12%, + 53% 12%, + 53% 26%, + 25% 26%, + 25% 86%, + 31% 86%, + 31% 0%, + 53% 0%, + 53% 84%, + 92% 84%, + 92% 82%, + 70% 82%, + 70% 29%, + 78% 29%, + 78% 65%, + 69% 65%, + 69% 66%, + 77% 66%, + 77% 45%, + 85% 45%, + 85% 26%, + 97% 26%, + 97% 28%, + 84% 28%, + 84% 34%, + 54% 34%, + 54% 89%, + 30% 89%, + 30% 58%, + 83% 58%, + 83% 5%, + 68% 5%, + 68% 36%, + 62% 36%, + 62% 1%, + 12% 1%, + 12% 34%, + 60% 34%, + 60% 57%, + 98% 57%, + 98% 83%, + 1% 83%, + 1% 53%, + 91% 53%, + 91% 84%, + 8% 84%, + 8% 83%, + 4% 83% + ); +} + +.paths { + animation: paths 5s step-end infinite; +} + +@keyframes paths { + 0% { + clip-path: polygon( + 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% + ); + } + + 5% { + clip-path: polygon( + 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% + ); + } + + 30% { + clip-path: polygon( + 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% + ); + } + + 45% { + clip-path: polygon( + 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% + ); + } + + 76% { + clip-path: polygon( + 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% + ); + } + + 90% { + clip-path: polygon( + 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% + ); + } + + 1%, + 7%, + 33%, + 47%, + 78%, + 93% { + clip-path: none; + } +} + +.movement { + /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */ + position: relative; + animation: movement 8s step-end infinite; +} + +@keyframes movement { + 0% { + top: 0px; + left: -20px; + } + + 15% { + top: 10px; + left: 10px; + } + + 60% { + top: 5px; + left: -10px; + } + + 75% { + top: -5px; + left: 20px; + } + + 100% { + top: 10px; + left: 5px; + } +} + +.opacity { + animation: opacity 5s step-end infinite; +} + +@keyframes opacity { + 0% { + opacity: 0.1; + } + + 5% { + opacity: 0.7; + } + + 30% { + opacity: 0.4; + } + + 45% { + opacity: 0.6; + } + + 76% { + opacity: 0.4; + } + + 90% { + opacity: 0.8; + } + + 1%, + 7%, + 33%, + 47%, + 78%, + 93% { + opacity: 0; + } +} + +.font { + animation: font 7s step-end infinite; +} + +@keyframes font { + 0% { + font-weight: 100; + color: #e0287d; + filter: blur(3px); + } + + 20% { + font-weight: 500; + color: #000000; + filter: blur(0); + } + + 50% { + font-weight: 300; + color: #1bc7fb; + filter: blur(2px); + } + + 60% { + font-weight: 700; + color: #000000; + filter: blur(0); + } + + 90% { + font-weight: 500; + color: #e0287d; + filter: blur(6px); + } +} + +.glitch span { + animation: paths 5s step-end infinite; +} + +.glitch::before { + animation: paths 5s step-end infinite, opacity 5s step-end infinite, + font 8s step-end infinite, movement 10s step-end infinite; +} + +.glitch::after { + animation: paths 5s step-end infinite, opacity 5s step-end infinite, + font 7s step-end infinite, movement 8s step-end infinite; +} + +.hero-container { + position: absolute; + padding: 65rem 0; + left: 45%; + z-index: 999; +} + + + + + + + + + +$theme: red; +$font-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; + + +// Blink on and off +@keyframes blink { + 0.01% { + opacity: 0; + } + 50% { + opacity: 0; + } + 50.01% { + opacity: 1; + } +} + + +// Scanline height 1005 +@keyframes scanline { + 0.01% { + height: 0; + } + 99.99% { + height: 100% + } + 100% { + height: 0; + } +} + +html { + font-family: $font-mono; + text-shadow: 0 0 5px rgba(255,255,255,0.3); + background-color: darken($theme, 47%); + background-image: url(http://api.thumbr.it/whitenoise-200x200.png?background=00000000&noise=626262&density=15&opacity=15); + background-size: 100px; + color: $theme; + height: 100%; +} + +body { + margin: 0; + padding: 16px; +} + +p, +pre { + font-family: $font-mono; + font-size: inherit; + line-height: 1; + margin: 0; + display: block; + padding: 5px; +} + +.blink { + opacity: 1; + animation: blink 1s linear infinite; +} + +.scanline { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255,255,255,0.02); + animation: scanline 8s linear infinite; + pointer-events: none; +} \ No newline at end of file diff --git a/error.css b/error.css new file mode 100644 index 0000000..8040f40 --- /dev/null +++ b/error.css @@ -0,0 +1,498 @@ +body { + background: black; + font-family: sans-serif; + } + + h1, + h2 { + margin: 0; + } + + a { + color: #ff1111; + } + + section { + padding: 20px; + } + + .hero { + font-size: clamp(40px, 10vw, 100px); + line-height: 1; + display: inline-block; + color: #ff1111; + z-index: 2; + letter-spacing: 10px; + + /* Bright things in dark environments usually cast that light, giving off a glow */ + filter: drop-shadow(0 1px 3px); + } + + .demo { + height: 100px; + background: #ff1111; + } + + .layers { + position: relative; + } + + .layers::before, + .layers::after { + content: attr(data-text); + position: absolute; + width: 110%; + z-index: -1; + } + + .layers::before { + top: 10px; + left: 15px; + color: #e0287d; + } + + .layers::after { + top: 5px; + left: -10px; + color: #1bc7fb; + } + + .single-path { + clip-path: polygon( + 0% 12%, + 53% 12%, + 53% 26%, + 25% 26%, + 25% 86%, + 31% 86%, + 31% 0%, + 53% 0%, + 53% 84%, + 92% 84%, + 92% 82%, + 70% 82%, + 70% 29%, + 78% 29%, + 78% 65%, + 69% 65%, + 69% 66%, + 77% 66%, + 77% 45%, + 85% 45%, + 85% 26%, + 97% 26%, + 97% 28%, + 84% 28%, + 84% 34%, + 54% 34%, + 54% 89%, + 30% 89%, + 30% 58%, + 83% 58%, + 83% 5%, + 68% 5%, + 68% 36%, + 62% 36%, + 62% 1%, + 12% 1%, + 12% 34%, + 60% 34%, + 60% 57%, + 98% 57%, + 98% 83%, + 1% 83%, + 1% 53%, + 91% 53%, + 91% 84%, + 8% 84%, + 8% 83%, + 4% 83% + ); + } + + .paths { + animation: paths 5s step-end infinite; + } + + @keyframes paths { + 0% { + clip-path: polygon( + 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% + ); + } + + 5% { + clip-path: polygon( + 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% + ); + } + + 30% { + clip-path: polygon( + 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% + ); + } + + 45% { + clip-path: polygon( + 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% + ); + } + + 76% { + clip-path: polygon( + 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% + ); + } + + 90% { + clip-path: polygon( + 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% + ); + } + + 1%, + 7%, + 33%, + 47%, + 78%, + 93% { + clip-path: none; + } + } + + .movement { + /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */ + position: relative; + animation: movement 8s step-end infinite; + } + + @keyframes movement { + 0% { + top: 0px; + left: -20px; + } + + 15% { + top: 10px; + left: 10px; + } + + 60% { + top: 5px; + left: -10px; + } + + 75% { + top: -5px; + left: 20px; + } + + 100% { + top: 10px; + left: 5px; + } + } + + .opacity { + animation: opacity 5s step-end infinite; + } + + @keyframes opacity { + 0% { + opacity: 0.1; + } + + 5% { + opacity: 0.7; + } + + 30% { + opacity: 0.4; + } + + 45% { + opacity: 0.6; + } + + 76% { + opacity: 0.4; + } + + 90% { + opacity: 0.8; + } + + 1%, + 7%, + 33%, + 47%, + 78%, + 93% { + opacity: 0; + } + } + + .font { + animation: font 7s step-end infinite; + } + + @keyframes font { + 0% { + font-weight: 100; + color: #e0287d; + filter: blur(3px); + } + + 20% { + font-weight: 500; + color: #ff1111; + filter: blur(0); + } + + 50% { + font-weight: 300; + color: #1bc7fb; + filter: blur(2px); + } + + 60% { + font-weight: 700; + color: #ff1111; + filter: blur(0); + } + + 90% { + font-weight: 500; + color: #e0287d; + filter: blur(6px); + } + } + + .glitch span { + animation: paths 5s step-end infinite; + } + + .glitch::before { + animation: paths 5s step-end infinite, opacity 5s step-end infinite, + font 8s step-end infinite, movement 10s step-end infinite; + } + + .glitch::after { + animation: paths 5s step-end infinite, opacity 5s step-end infinite, + font 7s step-end infinite, movement 8s step-end infinite; + } + + .hero-container { + position: relative; + padding: 200px 0; + text-align: center; + } + + + \ No newline at end of file diff --git a/error.html b/error.html new file mode 100644 index 0000000..7d5f7fe --- /dev/null +++ b/error.html @@ -0,0 +1,21 @@ + + + + + + + + + error + + +
+
+
+

NOT AUTHORIZED
SELF DESTRUCTING IN:


+


+
+
+ + + \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..11ba226 --- /dev/null +++ b/index.php @@ -0,0 +1,36 @@ + + + + + + + + login + + + +
+
+
+
+
+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/java.js b/java.js new file mode 100644 index 0000000..539ca22 --- /dev/null +++ b/java.js @@ -0,0 +1,109 @@ +const commands = String.raw`samurai@internal-cdprojektred.com/:~ cd HAX +samurai@internal-cdprojektred.com/HAX/:~ ls`; + +const beep = String.raw` + + + _____ _____ _____ _____ + /\ \ /\ \ /\ \ /\ \ + /::\ \ /::\ \ /::\ \ /::\ \ + /::::\ \ /::::\ \ /::::\ \ /::::\ \ + /::::::\ \ /::::::\ \ /::::::\ \ /::::::\ \ + /:::/\:::\ \ /:::/\:::\ \ /:::/\:::\ \ /:::/\:::\ \ + /:::/__\:::\ \ /:::/__\:::\ \ /:::/__\:::\ \ /:::/__\:::\ \ + /::::\ \:::\ \ /::::\ \:::\ \ /::::\ \:::\ \ /::::\ \:::\ \ + /::::::\ \:::\ \ /::::::\ \:::\ \ /::::::\ \:::\ \ /::::::\ \:::\ \ + /:::/\:::\ \:::\ ___\ /:::/\:::\ \:::\ \ /:::/\:::\ \:::\ \ /:::/\:::\ \:::\____\ +/:::/__\:::\ \:::| |/:::/__\:::\ \:::\____\/:::/__\:::\ \:::\____\/:::/ \:::\ \:::| | +\:::\ \:::\ /:::|____|\:::\ \:::\ \::/ /\:::\ \:::\ \::/ /\::/ \:::\ /:::|____| + \:::\ \:::\/:::/ / \:::\ \:::\ \/____/ \:::\ \:::\ \/____/ \/_____/\:::\/:::/ / + \:::\ \::::::/ / \:::\ \:::\ \ \:::\ \:::\ \ \::::::/ / + \:::\ \::::/ / \:::\ \:::\____\ \:::\ \:::\____\ \::::/ / + \:::\ /:::/ / \:::\ \::/ / \:::\ \::/ / \::/____/ + \:::\/:::/ / \:::\ \/____/ \:::\ \/____/ ~~ + \::::::/ / \:::\ \ \:::\ \ + \::::/ / \:::\____\ \:::\____\ + \::/____/ \::/ / \::/ / + ~~ \/____/ \/____/ + + +# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #`; + +const samurai = String.raw` + + .. ,,,,,, ,,,,,, ,,,,, .,,,, ,,,,, .,,,,,,,,,,,,, .,,,,,, ,,,,, + #############/ #######. ####### ###### /####, (#### /############## #######. ##### + #####((((((((/ ######## ######## ####### /####, (#### /####* /##### *######## ##### + #####((((* #########. ################# /####, (#### /####* ###### #########. ##### + ############. #### (#### ################# /####, (#### /############## *#### ##### (*,.. + .############ ##### ####. ################# /####, (##(( *,. .,*/((## ####/ ##### ####( + /##########*,####, (###( (,. .,*/( ##### ##### ####( (########### ##### *#### ####( + (### #### (#### ##### .###* ##### ######(/######, (####. #####( ####/ ##### ####( + /###.###, ####.##### ### ####( .############# (####. #####.(#### /#### ####( +`; + +let blink = document.querySelector('.blink'); +const code = document.querySelector('.code'); + +const RandomNumber = (min, max) => { + return Math.floor(Math.random() * max) + min +}; + +const Delay = (time) => { + return new Promise((resolve) => setTimeout(resolve, time)) +}; + +const ResetTerminal = () => { + code.innerHTML = '█'; + blink = document.querySelector('.blink'); +}; + +const RenderString = characters => { + blink.insertAdjacentHTML('beforeBegin', characters); +}; + +const TypeString = async characters => { + for(const character of characters.split('')) { + await Delay(RandomNumber(100, 200)); + RenderString(character); + } +} + +const DrawLines = async ( characters, min = 50, max = 500 ) => { + for(const line of characters.split('\n')) { + await Delay(RandomNumber(min, max)); + RenderString(`${line}\n`); + } +} + +const DrawCommands = async commands => { + for( const line of commands.split('\n')){ + // Seperate the directory and the command + const [currentDir, command] = line.split(':~ '); + + // Print the directory, type the command and finish with new line + RenderString(`${currentDir}:~ `); + await TypeString(command); + RenderString('\n'); + } +} + + +// Start the code +(async()=> { + await DrawCommands("/:~ ssh samurai@internal-cdprojektred.com -p 2000"); + await Delay(1000); + RenderString("samurai@internal-cdprojektred.com password:"); + await Delay(5000); + RenderString("\n"); + await DrawCommands(commands); + RenderString('\nbeep.js samurai.js\n\n'); + await DrawCommands('samurai@internal-cdprojektred.com/HAX:~ node beep.js'); + await DrawLines( beep ); + await TypeString("\n\nSeems you're not among the sheep after all. Wanna play a game? Watch for the beeps."); + await Delay(3000); + ResetTerminal(); + await DrawCommands('samurai@internal-cdprojektred.com:~ KEY=3db7ca618243da1ba3bc76ab14bcf07b node samurai.js'); + await DrawLines(samurai); +})(); + diff --git a/panel.php b/panel.php new file mode 100644 index 0000000..591b235 --- /dev/null +++ b/panel.php @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..46294d6 --- /dev/null +++ b/style.css @@ -0,0 +1,219 @@ +@font-face { + font-family: Cyber; + src: url("https://assets.codepen.io/605876/Blender-Pro-Bold.otf"); + font-display: swap; + } + + * { + box-sizing: border-box; + } + body { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + min-height: 100vh; + font-family: 'Cyber', sans-serif; + background: linear-gradient(90deg, #f5ed00 70%, #e6de00 70%), #fff700; + } +label{ + color: #272343; +} + +form{ + font-size: 3rem; +} + +input[type="text"]{ + color: #02d7f2; + background-color: black; + width: 15rem; + padding: 0.56rem; +} + +input[type="password"]{ + color: #02d7f2; + background-color: black; + width: 15rem; + padding: 0.56rem; +} + + +body .cybr-btn + .cybr-btn { + margin-top: 2rem; + } + + .cybr-btn { + --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%)); + --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%); + --primary-hue: 0; + --primary-lightness: 50; + --color: hsl(0, 0%, 100%); + --font-size: 26px; + --shadow-primary-hue: 180; + --label-size: 9px; + --shadow-secondary-hue: 60; + --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%); + --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%); + --border: 4px; + --shimmy-distance: 5; + --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%); + --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%); + --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%); + --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); + --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); + --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%); + --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%); + font-family: 'Cyber', sans-serif; + color: var(--color); + cursor: pointer; + background: transparent; + text-transform: uppercase; + font-size: var(--font-size); + outline: transparent; + letter-spacing: 2px; + position: relative; + font-weight: 700; + border: 0; + min-width: 300px; + height: 75px; + line-height: 75px; + transition: background 0.2s; + } + + .cybr-btn:hover { + --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%)); + } + .cybr-btn:active { + --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%)); + } + + .cybr-btn:after, + .cybr-btn:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + clip-path: var(--clip); + z-index: -1; + } + + .cybr-btn:before { + background: var(--shadow-primary); + transform: translate(var(--border), 0); + } + + .cybr-btn:after { + background: var(--primary); + } + + .cybr-btn__tag { + position: absolute; + padding: 1px 4px; + letter-spacing: 1px; + line-height: 1; + bottom: -5%; + right: 5%; + font-weight: normal; + color: hsl(0, 0%, 0%); + font-size: var(--label-size); + } + + .cybr-btn__glitch { + position: absolute; + top: calc(var(--border) * -1); + left: calc(var(--border) * -1); + right: calc(var(--border) * -1); + bottom: calc(var(--border) * -1); + background: var(--shadow-primary); + text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary); + clip-path: var(--clip); + animation: glitch 2s infinite; + display: none; + } + + .cybr-btn:hover .cybr-btn__glitch { + display: block; + } + + .cybr-btn__glitch:before { + content: ''; + position: absolute; + top: calc(var(--border) * 1); + right: calc(var(--border) * 1); + bottom: calc(var(--border) * 1); + left: calc(var(--border) * 1); + clip-path: var(--clip); + background: var(--primary); + z-index: -1; + } + + @keyframes glitch { + 0% { + clip-path: var(--clip-one); + } + 2%, 8% { + clip-path: var(--clip-two); + transform: translate(calc(var(--shimmy-distance) * -1%), 0); + } + 6% { + clip-path: var(--clip-two); + transform: translate(calc(var(--shimmy-distance) * 1%), 0); + } + 9% { + clip-path: var(--clip-two); + transform: translate(0, 0); + } + 10% { + clip-path: var(--clip-three); + transform: translate(calc(var(--shimmy-distance) * 1%), 0); + } + 13% { + clip-path: var(--clip-three); + transform: translate(0, 0); + } + 14%, 21% { + clip-path: var(--clip-four); + transform: translate(calc(var(--shimmy-distance) * 1%), 0); + } + 25% { + clip-path: var(--clip-five); + transform: translate(calc(var(--shimmy-distance) * 1%), 0); + } + 30% { + clip-path: var(--clip-five); + transform: translate(calc(var(--shimmy-distance) * -1%), 0); + } + 35%, 45% { + clip-path: var(--clip-six); + transform: translate(calc(var(--shimmy-distance) * -1%)); + } + 40% { + clip-path: var(--clip-six); + transform: translate(calc(var(--shimmy-distance) * 1%)); + } + 50% { + clip-path: var(--clip-six); + transform: translate(0, 0); + } + 55% { + clip-path: var(--clip-seven); + transform: translate(calc(var(--shimmy-distance) * 1%), 0); + } + 60% { + clip-path: var(--clip-seven); + transform: translate(0, 0); + } + 31%, 61%, 100% { + clip-path: var(--clip-four); + } + } + + .cybr-btn:nth-of-type(2) { + --primary-hue: 260; + } + + + diff --git a/test.html b/test.html new file mode 100644 index 0000000..ae543d2 --- /dev/null +++ b/test.html @@ -0,0 +1,22 @@ + + + + + + + + + CYBERPUNK + + +
+ 
█
+
+
+
+ ログアウト +
+
+ + + \ No newline at end of file diff --git a/timer.js b/timer.js new file mode 100644 index 0000000..d99dbe7 --- /dev/null +++ b/timer.js @@ -0,0 +1,15 @@ +timeLeft = 15; +setInterval(function() { + // Decrementa el tiempo de cuenta atrás en un segundo + timeLeft--; + + // Actualiza la pantalla con el tiempo restante + document.getElementById("countdown").innerHTML = timeLeft; + + // Si el tiempo llega a cero, detiene la cuenta atrás + if (timeLeft == 0) { + window.location.replace("close_session.php"); + + clearInterval(countdownInterval); + } + }, 1000); \ No newline at end of file diff --git a/validate.php b/validate.php new file mode 100644 index 0000000..3c2419f --- /dev/null +++ b/validate.php @@ -0,0 +1,26 @@ + \ No newline at end of file From c857fc473451f4bec76657a419b4ac3cdc38727e Mon Sep 17 00:00:00 2001 From: Marian Roibu Date: Thu, 22 Dec 2022 20:32:53 +0100 Subject: [PATCH 2/2] fixed some bugs --- close_session.php | 14 +++++----- index.php | 70 +++++++++++++++++++++++------------------------ panel.php | 56 +++++++++++++++++++++++++------------ test.html | 22 --------------- validate.php | 50 ++++++++++++++++----------------- 5 files changed, 106 insertions(+), 106 deletions(-) delete mode 100644 test.html diff --git a/close_session.php b/close_session.php index 00c2d05..46c9274 100644 --- a/close_session.php +++ b/close_session.php @@ -1,7 +1,7 @@ - + diff --git a/index.php b/index.php index 11ba226..ac66cc9 100644 --- a/index.php +++ b/index.php @@ -1,36 +1,36 @@ - - - - - - - - login - - - -
-
-
-
-
-
-
- - -
- - - - + + + + + + + + login + + + +
+
+
+
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/panel.php b/panel.php index 591b235..a290bdd 100644 --- a/panel.php +++ b/panel.php @@ -1,18 +1,40 @@ - + + + + + + + CYBERPUNK + + +
+ 
█
+
+
+
+ ログアウト +
+
+ + + + + + + \ No newline at end of file diff --git a/test.html b/test.html deleted file mode 100644 index ae543d2..0000000 --- a/test.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - CYBERPUNK - - -
- 
█
-
-
-
- ログアウト -
-
- - - \ No newline at end of file diff --git a/validate.php b/validate.php index 3c2419f..47ca863 100644 --- a/validate.php +++ b/validate.php @@ -1,26 +1,26 @@ - \ No newline at end of file