<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hacker Vibe</title>
<style>
/* Base styles for the hacker vibe */
body {
background-color: #0a0a0a;
color: #00ff00;
font-family: 'Courier New', monospace;
text-align: center;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: 3em;
margin: 0;
animation: flicker 1s infinite;
}
p {
font-size: 1.2em;
margin: 20px 0;
animation: flicker 1.5s infinite;
}
/* Terminal-like effect */
.terminal {
border: 2px solid #00ff00;
padding: 20px;
width: 60%;
height: 300px;
overflow-y: auto;
background-color: #1c1c1c;
font-size: 1.1em;
white-space: pre-wrap;
}
/* Flicker effect */
@keyframes flicker {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
/* Glowing effect for hacker text */
.glow {
text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00;
}
/* Typing effect */
.typewriter {
font-family: 'Courier New', monospace;
overflow: hidden;
border-right: .15em solid #00ff00;
white-space: nowrap;
margin: 0 auto;
animation: typing 4s steps(30) 1s 1 normal both, blink 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink {
50% { border-color: transparent; }
}
</style>
</head>
<body>
<h1 class="glow">Hacker Vibe Terminal</h1>
<p class="typewriter">Initializing...</p>
<div class="terminal" id="terminal">
<p>Loading system files...</p>
<p>Accessing mainframe...</p>
<p>Encrypting data...</p>
<p>Security breach detected!</p>
<p>Access granted...</p>
<p>Welcome back, Admin.</p>
</div>
<script>
// Simulate typing effect in terminal
const terminal = document.getElementById('terminal');
const lines = [
"System running...",
"Hacking into server...",
"Data decrypted successfully.",
"Gathering intel...",
"Connection lost.",
"Re-establishing connection...",
"Access granted. You are in."
];
let currentLine = 0;
function typeLine() {
if (currentLine < lines.length) {
let line = lines[currentLine];
let lineElement = document.createElement("p");
terminal.appendChild(lineElement);
let i = 0;
function typeCharacter() {
if (i < line.length) {
lineElement.textContent += line[i];
i++;
setTimeout(typeCharacter, 50);
} else {
currentLine++;
setTimeout(typeLine, 500);
}
}
typeCharacter();
}
}
// Start typing effect after 1 second
setTimeout(typeLine, 1000);
</script>
</body>
</html>
