|
|
<!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> |
