| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>βββββββββββββββββββββ</title> |
| <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'VT323', monospace; |
| } |
| |
| body { |
| min-height: 100vh; |
| background: #000; |
| color: #0f0; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .crt-effect::before { |
| content: " "; |
| display: block; |
| position: fixed; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| right: 0; |
| background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); |
| z-index: 2; |
| background-size: 100% 2px, 3px 100%; |
| pointer-events: none; |
| } |
| |
| .scanline { |
| position: fixed; |
| width: 100%; |
| height: 4px; |
| background: rgba(0, 255, 0, 0.1); |
| animation: scan 4s linear infinite; |
| box-shadow: 0 0 10px #0f0; |
| z-index: 3; |
| } |
| |
| .auth-container { |
| background: rgba(0, 0, 0, 0.8); |
| border: 3px solid #0f0; |
| padding: 2rem; |
| width: 90%; |
| max-width: 500px; |
| position: relative; |
| box-shadow: 0 0 30px rgba(0, 255, 0, 0.3); |
| z-index: 1; |
| animation: pulse 3s infinite alternate; |
| } |
| |
| .glitch-text { |
| font-size: 2.5rem; |
| text-align: center; |
| text-shadow: 2px 2px #ff00ff; |
| animation: glitch 2s infinite; |
| margin-bottom: 2rem; |
| letter-spacing: 2px; |
| } |
| |
| .input-field { |
| margin-bottom: 1.5rem; |
| position: relative; |
| } |
| |
| .input-field::before { |
| content: ">"; |
| position: absolute; |
| left: 5px; |
| top: 50%; |
| transform: translateY(-50%); |
| color: #0f0; |
| font-size: 1.2rem; |
| z-index: 1; |
| } |
| |
| .input-field input { |
| width: 100%; |
| padding: 12px 12px 12px 25px; |
| background: rgba(0, 0, 0, 0.7); |
| border: 1px solid #0f0; |
| color: #0f0; |
| font-size: 1.2rem; |
| transition: all 0.3s; |
| box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2); |
| } |
| |
| .input-field input:focus { |
| outline: none; |
| box-shadow: 0 0 15px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.2); |
| border-color: #0f0; |
| } |
| |
| .auth-button { |
| width: 100%; |
| padding: 15px; |
| background: #0f0; |
| border: 2px solid #000; |
| color: #000; |
| font-size: 1.2rem; |
| cursor: pointer; |
| transition: all 0.3s; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .auth-button:hover { |
| background: #0c0; |
| box-shadow: 0 0 20px #0f0; |
| } |
| |
| .auth-button::after { |
| content: ""; |
| position: absolute; |
| top: -50%; |
| left: -60%; |
| width: 20%; |
| height: 200%; |
| background: rgba(255, 255, 255, 0.3); |
| transform: rotate(30deg); |
| transition: all 0.6s; |
| } |
| |
| .auth-button:hover::after { |
| left: 120%; |
| } |
| |
| .console { |
| margin-top: 2rem; |
| border-top: 1px solid rgba(0, 255, 0, 0.3); |
| padding-top: 1rem; |
| } |
| |
| .terminal { |
| height: 120px; |
| overflow-y: auto; |
| background: rgba(0, 0, 0, 0.7); |
| padding: 10px; |
| font-family: 'Courier New', monospace; |
| font-size: 0.9rem; |
| border: 1px solid rgba(0, 255, 0, 0.3); |
| box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.1); |
| } |
| |
| .terminal::-webkit-scrollbar { |
| width: 5px; |
| } |
| |
| .terminal::-webkit-scrollbar-track { |
| background: #000; |
| } |
| |
| .terminal::-webkit-scrollbar-thumb { |
| background: #0f0; |
| } |
| |
| @keyframes scan { |
| 0% { transform: translateY(-100%); } |
| 100% { transform: translateY(100vh); } |
| } |
| |
| @keyframes glitch { |
| 0% { text-shadow: 2px 2px #ff00ff; transform: translateX(-1px); } |
| 25% { text-shadow: -2px 2px #00ffff; transform: translateX(1px); } |
| 50% { text-shadow: -2px -2px #ffff00; transform: translateX(-1px); } |
| 75% { text-shadow: 2px -2px #00ffff; transform: translateX(1px); } |
| 100% { text-shadow: 2px 2px #ff00ff; transform: translateX(-1px); } |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); } |
| 100% { box-shadow: 0 0 40px rgba(0, 255, 0, 0.5); } |
| } |
| |
| .matrix-code { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| opacity: 0.15; |
| z-index: -1; |
| } |
| |
| .access-denied { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| font-size: 5rem; |
| color: #f00; |
| text-shadow: 0 0 20px #f00; |
| display: none; |
| z-index: 10; |
| animation: flicker 0.5s infinite alternate; |
| } |
| |
| @keyframes flicker { |
| 0% { opacity: 1; } |
| 100% { opacity: 0.7; } |
| } |
| |
| @media (max-width: 600px) { |
| .auth-container { |
| padding: 1.5rem; |
| width: 95%; |
| } |
| |
| .glitch-text { |
| font-size: 2rem; |
| } |
| |
| .terminal { |
| height: 100px; |
| } |
| } |
| </style> |
| </head> |
| <body class="crt-effect"> |
| <div class="scanline"></div> |
| <div class="matrix-code" id="matrix"></div> |
| <div class="access-denied" id="accessDenied">ACCESS DENIED</div> |
|
|
| <div class="auth-container"> |
| <div class="glitch-text" style="display: flex; justify-content: center; align-items: center;">βββββββββββββββββββββ</div> |
| <form id="loginForm"> |
| <div class="input-field"> |
| <input type="text" placeholder="[root@heaven ~]$" required autocomplete="off" id="username"> |
| </div> |
| <div class="input-field"> |
| <input type="password" placeholder="[encryption key]" required id="password"> |
| </div> |
| <button type="submit" class="auth-button">INITIATE SEQUENCE</button> |
| </form> |
|
|
| <div class="console"> |
| <div class="terminal" id="terminal"> |
| > Initializing security protocols...<br> |
| > Firewall active: HEAVEN_ACC3SS<br> |
| > Encryption: AES-256 TOR enabled<br> |
| > Warning: Unauthorized access prohibited<br> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function createMatrix() { |
| const chars = "01γ’γ€γ¦γ¨γͺγ«γγ―γ±γ³γ΅γ·γΉγ»γ½γΏγγγγγγγγγγγγγγγγγ γ‘γ’γ€γ¦γ¨γ©γͺγ«γ¬γγ―γ²γ³"; |
| const matrix = document.getElementById('matrix'); |
| const width = window.innerWidth; |
| const columns = Math.floor(width / 20); |
| |
| for (let i = 0; i < columns; i++) { |
| const column = document.createElement('div'); |
| column.style.position = 'absolute'; |
| column.style.left = i * 20 + 'px'; |
| column.style.top = Math.floor(Math.random() * -1000) + 'px'; |
| column.style.color = '#0f0'; |
| column.style.fontSize = '1.2rem'; |
| column.style.textShadow = '0 0 5px #0f0'; |
| matrix.appendChild(column); |
| |
| let y = 0; |
| |
| setInterval(() => { |
| const text = chars[Math.floor(Math.random() * chars.length)]; |
| column.innerHTML = text + '<br>' + column.innerHTML; |
| |
| if (column.offsetHeight > window.innerHeight * 1.5) { |
| column.innerHTML = text; |
| column.style.top = Math.floor(Math.random() * -1000) + 'px'; |
| } |
| |
| column.style.top = parseInt(column.style.top) + 20 + 'px'; |
| }, 100 + Math.random() * 200); |
| } |
| } |
| |
| |
| function typeEffect(element, text, speed = 50) { |
| let i = 0; |
| const timer = setInterval(() => { |
| if (i < text.length) { |
| element.innerHTML += text.charAt(i); |
| i++; |
| } else { |
| clearInterval(timer); |
| } |
| element.scrollTop = element.scrollHeight; |
| }, speed); |
| } |
| |
| |
| document.getElementById('loginForm').addEventListener('submit', (e) => { |
| e.preventDefault(); |
| const terminal = document.getElementById('terminal'); |
| const username = document.getElementById('username').value; |
| const accessDenied = document.getElementById('accessDenied'); |
| |
| |
| terminal.innerHTML += '<br>> Authenticating credentials...'; |
| |
| setTimeout(() => { |
| typeEffect(terminal, '<br>> Verifying username: ' + username, 30); |
| |
| setTimeout(() => { |
| typeEffect(terminal, '<br>> Checking encryption key...', 30); |
| |
| setTimeout(() => { |
| typeEffect(terminal, '<br>> ERROR 0x7E: ACCESS DENIED', 30); |
| |
| setTimeout(() => { |
| accessDenied.style.display = 'block'; |
| document.body.style.animation = 'glitch 0.2s infinite'; |
| |
| setTimeout(() => { |
| accessDenied.style.display = 'none'; |
| document.body.style.animation = ''; |
| typeEffect(terminal, '<br>> Security alert triggered', 30); |
| typeEffect(terminal, '<br>> IP logged: ' + (Math.floor(Math.random() * 255) + 1) + '.' + |
| (Math.floor(Math.random() * 255)) + '.' + |
| (Math.floor(Math.random() * 255)) + '.' + |
| (Math.floor(Math.random() * 255)), 30); |
| }, 2000); |
| }, 1000); |
| }, 1000); |
| }, 1000); |
| }, 1000); |
| }); |
| |
| |
| window.addEventListener('load', () => { |
| createMatrix(); |
| const terminal = document.getElementById('terminal'); |
| terminal.scrollTop = terminal.scrollHeight; |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 𧬠<a href="https://enzostvs-deepsite.hf.space?remix=Tirvo/p0p" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
