diff --git a/close_session.php b/close_session.php new file mode 100644 index 0000000..46c9274 --- /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..ac66cc9 --- /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..a290bdd --- /dev/null +++ b/panel.php @@ -0,0 +1,40 @@ + + + + + + + + CYBERPUNK + + +
+ 
█
+
+
+
+ ログアウト +
+
+ + + + + + + \ 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/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..47ca863 --- /dev/null +++ b/validate.php @@ -0,0 +1,26 @@ + \ No newline at end of file