273 lines
6.4 KiB
HTML
273 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Third Echelon Secure Node</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
background: #000000;
|
|
color: #00ff9c;
|
|
overflow: hidden;
|
|
cursor: none;
|
|
}
|
|
|
|
/* Scanlines + CRT flicker */
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
rgba(0,255,156,0.05) 1px,
|
|
transparent 3px
|
|
);
|
|
pointer-events: none;
|
|
animation: flicker 0.12s infinite;
|
|
}
|
|
@keyframes flicker {
|
|
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {opacity: 0.03;}
|
|
20%, 22%, 24%, 55% {opacity: 0.07;}
|
|
}
|
|
|
|
/* HUD Grid */
|
|
.hud-grid {
|
|
position: fixed;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(rgba(0,255,156,0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0,255,156,0.05) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
animation: gridMove 12s linear infinite;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
@keyframes gridMove {
|
|
0% {transform: translate(0,0);}
|
|
100% {transform: translate(-50px,-50px);}
|
|
}
|
|
|
|
/* Scanning line */
|
|
.scan-line {
|
|
position: fixed;
|
|
top: -2px;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: rgba(0,255,156,0.2);
|
|
box-shadow: 0 0 15px #00ff9c, 0 0 30px #00ff9c inset;
|
|
animation: scan 3s linear infinite;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
@keyframes scan {
|
|
0% {top: -2px;}
|
|
100% {top: 100%;}
|
|
}
|
|
|
|
/* Blinking HUD indicators */
|
|
.indicator {
|
|
position: fixed;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #00ff9c;
|
|
top: 10%;
|
|
left: 10%;
|
|
box-shadow: 0 0 10px #00ff9c, 0 0 20px #00ff9c inset;
|
|
animation: blink-ind 1.2s infinite;
|
|
z-index: 2;
|
|
}
|
|
@keyframes blink-ind {
|
|
0%, 50%, 100% {opacity:1;}
|
|
25%, 75% {opacity:0.2;}
|
|
}
|
|
|
|
/* Terminal container */
|
|
.container {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 520px;
|
|
padding: 40px;
|
|
border: 1px solid #00ff9c;
|
|
background: rgba(0, 0, 0, 0.95);
|
|
box-shadow: 0 0 40px #00ff9c, inset 0 0 60px rgba(0,255,156,0.35);
|
|
z-index: 3;
|
|
}
|
|
|
|
/* Header / Subheader */
|
|
.header {
|
|
font-size: 28px;
|
|
margin-bottom: 5px;
|
|
text-shadow: 0 0 15px #00ff9c;
|
|
}
|
|
.sub {
|
|
font-size: 14px;
|
|
color: #00aa66;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Terminal log */
|
|
.log {
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
height: 220px;
|
|
overflow: hidden;
|
|
background: rgba(0,0,0,0.2);
|
|
padding: 10px;
|
|
border: 1px solid #00ff9c;
|
|
box-shadow: inset 0 0 15px rgba(0,255,156,0.5);
|
|
white-space: pre-wrap;
|
|
}
|
|
.log span {
|
|
display: inline-block;
|
|
animation: shake 0.15s infinite;
|
|
}
|
|
@keyframes shake {
|
|
0% { transform: translate(0,0);}
|
|
25% { transform: translate(-1px,1px);}
|
|
50% { transform: translate(1px,-1px);}
|
|
75% { transform: translate(-1px,1px);}
|
|
100% { transform: translate(0,0);}
|
|
}
|
|
|
|
/* blinking cursor */
|
|
.cursor {
|
|
display: inline-block;
|
|
width: 10px;
|
|
background: #00ff9c;
|
|
animation: blink 1s infinite;
|
|
}
|
|
@keyframes blink {
|
|
0%,50%,100% {opacity:1;}
|
|
25%,75% {opacity:0;}
|
|
}
|
|
|
|
/* Login button with glow */
|
|
.login-btn {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 25px;
|
|
padding: 12px;
|
|
border: 1px solid #00ff9c;
|
|
color: #00ff9c;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
position: relative;
|
|
}
|
|
.login-btn:hover {
|
|
background: #00ff9c;
|
|
color: #000;
|
|
box-shadow: 0 0 35px #00ff9c, 0 0 70px #00ff9c;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
margin-top: 20px;
|
|
font-size: 10px;
|
|
color: #007744;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Scroll terminal effect */
|
|
.log.scroll {
|
|
animation: scrollUp 25s linear infinite;
|
|
}
|
|
@keyframes scrollUp {
|
|
0% {transform: translateY(0);}
|
|
100% {transform: translateY(-50%);}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hud-grid"></div>
|
|
<div class="scan-line"></div>
|
|
<div class="indicator" style="top:10%; left:10%;"></div>
|
|
<div class="indicator" style="top:20%; left:85%; animation-delay:0.4s;"></div>
|
|
<div class="indicator" style="top:70%; left:30%; animation-delay:0.7s;"></div>
|
|
|
|
<div class="container">
|
|
<div class="header">THIRD ECHELON NODE</div>
|
|
<div class="sub">SECURE GIT ACCESS TERMINAL</div>
|
|
|
|
<div class="log" id="terminal-log"></div>
|
|
|
|
<a class="login-btn" href="https://git.grenu4.ru/user/login?redirect_to=%2f">
|
|
AUTHORIZE OPERATIVE
|
|
</a>
|
|
|
|
<div class="footer">
|
|
Third Echelon Secure System • Gitea Interface • Build 3.0.7
|
|
</div>
|
|
</div>
|
|
|
|
<audio id="beep-sound" src="https://freesound.org/data/previews/250/250629_4486188-lq.mp3"></audio>
|
|
|
|
<script>
|
|
const log = document.getElementById('terminal-log');
|
|
const beep = document.getElementById('beep-sound');
|
|
const messages = [
|
|
'[SYSTEM] BOOT SEQUENCE INITIATED',
|
|
'[SYSTEM] ENCRYPTION MODULES LOADED',
|
|
'[SECURITY] SCANNING FOR AUTHORIZED OPERATORS',
|
|
'[SECURITY] CLEARANCE LEVEL DETECTED: 3',
|
|
'[TERMINAL] ACCESS POINT ESTABLISHED',
|
|
'[TERMINAL] LOGIN REQUIRED <span class="cursor"></span>'
|
|
];
|
|
|
|
let i = 0;
|
|
|
|
function typeLine(line, callback) {
|
|
let j = 0;
|
|
const interval = setInterval(() => {
|
|
const span = document.createElement('span');
|
|
span.textContent = line[j];
|
|
log.appendChild(span);
|
|
j++;
|
|
if (beep) beep.currentTime=0, beep.play();
|
|
if(j >= line.length) {
|
|
clearInterval(interval);
|
|
log.appendChild(document.createElement('br'));
|
|
if(callback) callback();
|
|
}
|
|
log.scrollTop = log.scrollHeight;
|
|
}, 30);
|
|
}
|
|
|
|
function nextLine() {
|
|
if(i < messages.length) {
|
|
typeLine(messages[i], () => {
|
|
i++;
|
|
nextLine();
|
|
});
|
|
} else {
|
|
const clone = log.innerHTML;
|
|
log.innerHTML += clone;
|
|
log.classList.add('scroll');
|
|
}
|
|
}
|
|
|
|
nextLine();
|
|
|
|
// Cursor-follow glow effect
|
|
document.addEventListener('mousemove', e => {
|
|
document.querySelectorAll('.login-btn').forEach(btn => {
|
|
const rect = btn.getBoundingClientRect();
|
|
const x = e.clientX - rect.left - rect.width/2;
|
|
const y = e.clientY - rect.top - rect.height/2;
|
|
btn.style.boxShadow = `0 0 ${20+Math.abs(x/5)}px #00ff9c, 0 0 ${40+Math.abs(y/5)}px #00ff9c`;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |