Spaces:

iimran
/

cyberpunk-html-website

Running

App Files Files Community

iimran commited on Apr 7

Commit

d625af6

verified ·

1 Parent(s): 7f76c9b

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +724 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Cyberpunk Html Website
-emoji: 👀
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: cyberpunk-html-website
+emoji: 🐳
+colorFrom: blue
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,724 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cyber Terminal v2.0</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Share+Tech+Mono&display=swap');
+        :root {
+            --terminal-bg: #0a0a12;
+            --terminal-green: #0f0;
+            --terminal-cyan: #0ff;
+            --terminal-purple: #b19cd9;
+            --terminal-red: #f44;
+            --terminal-glow: rgba(0, 255, 0, 0.7);
+            --terminal-border: #333;
+            --text-color: #e0e0e0;
+            --text-shadow: 0 0 8px var(--terminal-glow);
+            --selection-color: rgba(0, 255, 0, 0.3);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background: #000;
+            overflow: hidden;
+            font-family: 'Inconsolata', monospace;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            perspective: 1000px;
+        }
+        .matrix-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.15;
+        }
+        .terminal-container {
+            position: relative;
+            width: 85%;
+            max-width: 900px;
+            height: 75vh;
+            background: var(--terminal-bg);
+            border-radius: 8px;
+            box-shadow: 0 0 30px rgba(0, 255, 0, 0.5),
+                        inset 0 0 10px rgba(0, 255, 0, 0.2);
+            overflow: hidden;
+            border: 1px solid var(--terminal-green);
+            transform-style: preserve-3d;
+            animation: float 8s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotateX(10deg) rotateY(5deg); }
+            50% { transform: translateY(-20px) rotateX(5deg) rotateY(10deg); }
+        }
+        .terminal-header {
+            background: linear-gradient(to right, #0a0a0a, #111);
+            padding: 8px 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: var(--terminal-green);
+            font-family: 'Share Tech Mono', monospace;
+            border-bottom: 1px solid var(--terminal-green);
+            box-shadow: 0 2px 15px rgba(0, 255, 0, 0.3);
+        }
+        .terminal-buttons {
+            display: flex;
+            gap: 8px;
+        }
+        .terminal-button {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.2s;
+            cursor: pointer;
+        }
+        .terminal-button:hover {
+            transform: scale(1.2);
+        }
+        .terminal-button.red {
+            background: #ff5f56;
+        }
+        .terminal-button.yellow {
+            background: #ffbd2e;
+        }
+        .terminal-button.green {
+            background: #27c93f;
+        }
+        .terminal-body {
+            padding: 15px;
+            height: calc(100% - 40px);
+            overflow-y: auto;
+            color: var(--text-color);
+            text-shadow: var(--text-shadow);
+            line-height: 1.6;
+            scrollbar-width: thin;
+            scrollbar-color: var(--terminal-green) transparent;
+        }
+        .terminal-body::-webkit-scrollbar {
+            width: 8px;
+        }
+        .terminal-body::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .terminal-body::-webkit-scrollbar-thumb {
+            background-color: var(--terminal-green);
+            border-radius: 10px;
+        }
+        .typing-text {
+            white-space: pre-wrap;
+            font-size: 1.1rem;
+        }
+        .command-line {
+            margin-top: 20px;
+            display: flex;
+            align-items: center;
+            position: sticky;
+            bottom: 0;
+            background: var(--terminal-bg);
+            padding-bottom: 10px;
+        }
+        .prompt {
+            color: var(--terminal-green);
+            margin-right: 10px;
+            font-weight: bold;
+        }
+        .cursor {
+            display: inline-block;
+            width: 10px;
+            height: 20px;
+            background: var(--terminal-green);
+            animation: blink 1s infinite;
+            vertical-align: middle;
+            margin-left: 5px;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .command-input {
+            flex-grow: 1;
+            background: transparent;
+            border: none;
+            color: var(--terminal-green);
+            font-family: 'Inconsolata', monospace;
+            font-size: 1.1rem;
+            outline: none;
+            caret-color: var(--terminal-green);
+            text-shadow: var(--text-shadow);
+        }
+        .command-input::selection {
+            background: var(--selection-color);
+        }
+        .glitch {
+            position: relative;
+        }
+        .glitch::before, .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--terminal-bg);
+        }
+        .glitch::before {
+            left: 2px;
+            text-shadow: -2px 0 var(--terminal-red);
+            clip: rect(24px, 550px, 90px, 0);
+            animation: glitch-anim-1 2s infinite linear alternate-reverse;
+        }
+        .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 var(--terminal-cyan);
+            clip: rect(85px, 550px, 140px, 0);
+            animation: glitch-anim-2 2s infinite linear alternate-reverse;
+        }
+        @keyframes glitch-anim-1 {
+            0% { clip: rect(54px, 800px, 54px, 0); }
+            20% { clip: rect(27px, 800px, 86px, 0); }
+            40% { clip: rect(14px, 800px, 75px, 0); }
+            60% { clip: rect(39px, 800px, 104px, 0); }
+            80% { clip: rect(18px, 800px, 53px, 0); }
+            100% { clip: rect(73px, 800px, 112px, 0); }
+        }
+        @keyframes glitch-anim-2 {
+            0% { clip: rect(35px, 800px, 89px, 0); }
+            20% { clip: rect(56px, 800px, 103px, 0); }
+            40% { clip: rect(22px, 800px, 64px, 0); }
+            60% { clip: rect(88px, 800px, 120px, 0); }
+            80% { clip: rect(13px, 800px, 32px, 0); }
+            100% { clip: rect(42px, 800px, 99px, 0); }
+        }
+        .ascii-art {
+            color: var(--terminal-purple);
+            line-height: 1.3;
+            margin: 15px 0;
+            white-space: pre;
+            font-size: 0.6rem;
+            letter-spacing: 1px;
+        }
+        .highlight {
+            color: var(--terminal-cyan);
+        }
+        .skill-bar {
+            margin: 8px 0;
+            display: flex;
+            align-items: center;
+        }
+        .skill-name {
+            display: inline-block;
+            width: 150px;
+            color: var(--terminal-green);
+        }
+        .skill-level {
+            display: inline-block;
+            height: 15px;
+            background: linear-gradient(to right, var(--terminal-green), var(--terminal-cyan));
+            box-shadow: 0 0 5px var(--terminal-glow);
+            animation: expand 1s ease-out;
+            transform-origin: left;
+            border-radius: 3px;
+            position: relative;
+            overflow: hidden;
+        }
+        .skill-level::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg,
+                rgba(255,255,255,0) 0%,
+                rgba(255,255,255,0.2) 50%,
+                rgba(255,255,255,0) 100%);
+            animation: shine 2s infinite;
+        }
+        @keyframes shine {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        @keyframes expand {
+            from { transform: scaleX(0); }
+            to { transform: scaleX(1); }
+        }
+        .contact-item {
+            margin: 8px 0;
+            display: flex;
+            align-items: center;
+        }
+        .contact-item a {
+            color: var(--terminal-purple);
+            text-decoration: none;
+            transition: all 0.3s;
+            margin-left: 10px;
+        }
+        .contact-item a:hover {
+            color: var(--terminal-cyan);
+            text-shadow: 0 0 10px var(--terminal-cyan);
+        }
+        .hidden {
+            display: none;
+        }
+        .command-history {
+            opacity: 0.8;
+        }
+        .system-alert {
+            color: var(--terminal-red);
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+        .hacker-icon {
+            color: var(--terminal-green);
+            margin-right: 8px;
+        }
+        .secret-mode {
+            animation: secretGlow 0.5s infinite alternate;
+        }
+        @keyframes secretGlow {
+            from { text-shadow: 0 0 5px var(--terminal-green); }
+            to { text-shadow: 0 0 20px var(--terminal-cyan), 0 0 30px var(--terminal-purple); }
+        }
+        /* Matrix rain effect */
+        canvas {
+            display: block;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .terminal-container {
+                width: 95%;
+                height: 85vh;
+            }
+            .skill-name {
+                width: 120px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <canvas id="matrix" class="matrix-background"></canvas>
+    <div class="terminal-container">
+        <div class="terminal-header">
+            <div class="terminal-buttons">
+                <div class="terminal-button red" onclick="minimizeTerminal()"></div>
+                <div class="terminal-button yellow" onclick="maximizeTerminal()"></div>
+                <div class="terminal-button green" onclick="closeTerminal()"></div>
+            </div>
+            <div class="glitch" data-text="root@cybernode:~">root@cybernode:~</div>
+            <div class="terminal-buttons">
+                <i class="fas fa-lock-open hacker-icon" id="security-icon"></i>
+            </div>
+        </div>
+        <div class="terminal-body" id="terminal-body">
+            <div id="typing-text" class="typing-text"></div>
+            <div id="command-line" class="command-line hidden">
+                <span class="prompt">></span>
+                <input type="text" class="command-input" id="command-input" autocomplete="off" spellcheck="false">
+                <span class="cursor"></span>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Matrix effect
+        const canvas = document.getElementById('matrix');
+        const ctx = canvas.getContext('2d');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
+        const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        const nums = '0123456789';
+        const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~';
+        const binary = '01';
+        const alphabet = katakana + latin + nums + symbols + binary;
+        const fontSize = 16;
+        const columns = canvas.width / fontSize;
+        const rainDrops = [];
+        for (let x = 0; x < columns; x++) {
+            rainDrops[x] = Math.floor(Math.random() * canvas.height / fontSize);
+        }
+        function draw() {
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = '#0f0';
+            ctx.font = fontSize + 'px monospace';
+            for (let i = 0; i < rainDrops.length; i++) {
+                const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
+                const y = rainDrops[i] * fontSize;
+                // Gradient effect - brighter at the top
+                const opacity = Math.min(1, 1 - y / canvas.height);
+                ctx.fillStyle = `rgba(0, 255, 0, ${opacity})`;
+                ctx.fillText(text, i * fontSize, y);
+                if (y > canvas.height && Math.random() > 0.975) {
+                    rainDrops[i] = 0;
+                }
+                rainDrops[i]++;
+            }
+            requestAnimationFrame(draw);
+        }
+        // Terminal typing effect
+        const terminalText = document.getElementById('typing-text');
+        const commandLine = document.getElementById('command-line');
+        const commandInput = document.getElementById('command-input');
+        const securityIcon = document.getElementById('security-icon');
+        const messages = [
+            { text: "Booting CYBERNODE v2.0...", delay: 50 },
+            { text: "Initializing quantum encryption...", delay: 50 },
+            { text: "██████████████ 100%", delay: 30, style: "color: #0ff" },
+            { text: "\n", delay: 200 },
+            { text: "> Authentication sequence complete", delay: 10, style: "color: #0f0; font-weight: bold" },
+            { text: "\n\n", delay: 100 },
+            { text: ">> SYSTEM USER PROFILE <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
+            { text: "\n", delay: 100 },
+            { text: "> NAME: ", delay: 20 },
+            { text: "Imran", delay: 100, style: "color: #0ff; font-weight: bold" },
+            { text: "\n", delay: 50 },
+            { text: "> TITLE: ", delay: 20 },
+            { text: "FULL-STACK CYBER DEVELOPER", delay: 50, style: "color: #0ff" },
+            { text: "\n", delay: 50 },
+            { text: "> CLEARANCE: ", delay: 20 },
+            { text: "LEVEL 5", delay: 70, style: "color: #f44" },
+            { text: "\n", delay: 50 },
+            { text: "> STATUS: ", delay: 20 },
+            { text: "ACTIVE // SECURE CONNECTION ESTABLISHED", delay: 50, style: "color: #0f0" },
+            { text: "\n\n", delay: 100 },
+            { text: ">> SKILL MATRIX <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
+            { text: "\n", delay: 100 },
+            { text: "> PYTHON: ", delay: 20 },
+            { text: "██████████ 95%", delay: 30, style: "color: #0ff" },
+            { text: "\n", delay: 50 },
+            { text: "> JAVASCRIPT: ", delay: 20 },
+            { text: "██████████ 97%", delay: 30, style: "color: #0ff" },
+            { text: "\n", delay: 50 },
+            { text: "> CYBERSECURITY: ", delay: 20 },
+            { text: "████████▉ 88%", delay: 30, style: "color: #0ff" },
+            { text: "\n", delay: 50 },
+            { text: "> CLOUD ARCHITECTURE: ", delay: 20 },
+            { text: "████████▊ 86%", delay: 30, style: "color: #0ff" },
+            { text: "\n", delay: 50 },
+            { text: "> AI/ML: ", delay: 20 },
+            { text: "███████▍ 75%", delay: 30, style: "color: #0ff" },
+            { text: "\n", delay: 50 },
+            { text: "> BLOCKCHAIN: ", delay: 20 },
+            { text: "██████▎ 70%", delay: 30, style: "color: #0ff" },
+            { text: "\n\n", delay: 100 },
+            { text: ">> PROJECT HISTORY <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
+            { text: "\n", delay: 100 },
+            { text: "> [2023] QUANTUM ENCRYPTION PROTOCOL - LEAD DEVELOPER", delay: 30 },
+            { text: "\n", delay: 50 },
+            { text: "> [2022] NEURAL NETWORK SECURITY FRAMEWORK - AI SPECIALIST", delay: 30 },
+            { text: "\n", delay: 50 },
+            { text: "> [2021] DECENTRALIZED IDENTITY SYSTEM - ARCHITECT", delay: 30 },
+            { text: "\n\n", delay: 100 },
+            { text: ">> CONTACT CHANNELS <<", delay: 10, style: "color: #b19cd9; text-decoration: underline" },
+            { text: "\n", delay: 100 },
+            { text: "> EMAIL: ", delay: 20 },
+            { text: "[email protected]", delay: 30, style: "color: #0ff" },
+            { text: "\n", delay: 50 },
+            { text: "> GITHUB: ", delay: 20 },
+            { text: "github.com/coder-one", delay: 30, style: "color: #0ff" },
+            { text: "\n", delay: 50 },
+            { text: "> TWITTER: ", delay: 20 },
+            { text: "@coder_one", delay: 30, style: "color: #0ff" },
+            { text: "\n\n", delay: 100 },
+            { text: "> Type 'help' for available commands", delay: 30, style: "color: #0f0" },
+            { text: "\n", delay: 50 },
+        ];
+        let currentMessageIndex = 0;
+        let currentCharIndex = 0;
+        let isTyping = true;
+        let commandHistory = [];
+        let historyIndex = -1;
+        let secretMode = false;
+        function typeNextCharacter() {
+            if (currentMessageIndex >= messages.length) {
+                isTyping = false;
+                commandLine.classList.remove('hidden');
+                commandInput.focus();
+                return;
+            }
+            const currentMessage = messages[currentMessageIndex];
+            const textToType = currentMessage.text;
+            if (currentCharIndex < textToType.length) {
+                const char = textToType.charAt(currentCharIndex);
+                const span = document.createElement('span');
+                span.textContent = char;
+                if (currentMessage.style) {
+                    span.style = currentMessage.style;
+                }
+                terminalText.appendChild(span);
+                currentCharIndex++;
+                setTimeout(typeNextCharacter, currentMessage.delay);
+            } else {
+                currentMessageIndex++;
+                currentCharIndex = 0;
+                setTimeout(typeNextCharacter, 100);
+            }
+        }
+        function processCommand(command) {
+            // Add to command history
+            if (command.trim() !== '') {
+                commandHistory.unshift(command);
+                historyIndex = -1;
+            }
+            terminalText.appendChild(document.createElement('br'));
+            const prompt = document.createElement('span');
+            prompt.textContent = '> ';
+            prompt.style.color = '#0f0';
+            terminalText.appendChild(prompt);
+            const cmdText = document.createElement('span');
+            cmdText.textContent = command;
+            cmdText.style.color = '#e0e0e0';
+            terminalText.appendChild(cmdText);
+            terminalText.appendChild(document.createElement('br'));
+            const response = document.createElement('div');
+            response.style.marginTop = '10px';
+            command = command.toLowerCase().trim();
+            if (command === 'help') {
+                response.innerHTML = `Available commands:<br><br>
+                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">about</span>: Show detailed profile</div>
+                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">skills</span>: List technical skills</div>
+                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">contact</span>: Show contact information</div>
+                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">projects</span>: List recent projects</div>
+                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">clear</span>: Clear the terminal</div>
+                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">secret</span>: Enable secret mode</div>
+                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">exit</span>: Close terminal (just kidding)</div>`;
+            }
+            else if (command === 'about') {
+                response.innerHTML = `// SYSTEM USER PROFILE //<br><br>
+                <i class="fas fa-user-secret hacker-icon"></i> <span class="highlight">CODER_ONE</span> is a full-spectrum developer with expertise in:<br>
+                - Secure system architecture<br>
+                - Cryptographic protocols<br>
+                - Decentralized applications<br>
+                - AI-driven security<br><br>
+                With over 8 years in the field, I've worked on classified and commercial systems, always pushing the boundaries of what's possible in the digital realm.`;
+            }
+            else if (command === 'skills') {
+                response.innerHTML = `>> TECHNICAL PROWESS <<<br><br>
+                <div class="skill-bar"><i class="fas fa-code hacker-icon"></i> <span class="skill-name">Programming:</span> <span class="skill-level" style="width: 95%"></span></div>
+                <div class="skill-bar"><i class="fas fa-shield-alt hacker-icon"></i> <span class="skill-name">Security:</span> <span class="skill-level" style="width: 90%"></span></div>
+                <div class="skill-bar"><i class="fas fa-network-wired hacker-icon"></i> <span class="skill-name">Networking:</span> <span class="skill-level" style="width: 85%"></span></div>
+                <div class="skill-bar"><i class="fas fa-brain hacker-icon"></i> <span class="skill-name">AI/ML:</span> <span class="skill-level" style="width: 80%"></span></div>
+                <div class="skill-bar"><i class="fas fa-link hacker-icon"></i> <span class="skill-name">Blockchain:</span> <span class="skill-level" style="width: 75%"></span></div>`;
+            }
+            else if (command === 'contact') {
+                response.innerHTML = `>> SECURE CONTACT CHANNELS <<<br><br>
+                <div class="contact-item"><i class="fas fa-envelope hacker-icon"></i> Email: <a href="mailto:[email protected]">[email protected]</a></div>
+                <div class="contact-item"><i class="fab fa-github hacker-icon"></i> GitHub: <a href="https://github.com/coder-one" target="_blank">github.com/coder-one</a></div>
+                <div class="contact-item"><i class="fab fa-twitter hacker-icon"></i> Twitter: <a href="https://twitter.com/coder_one" target="_blank">@coder_one</a></div>
+                <div class="contact-item"><i class="fas fa-key hacker-icon"></i> PGP: <span style="color: #f44">[Available upon request]</span></div>`;
+            }
+            else if (command === 'projects') {
+                response.innerHTML = `>> RECENT PROJECTS <<<br><br>
+                <div class="contact-item"><i class="fas fa-lock hacker-icon"></i> <span class="highlight">Quantum Encryption Protocol</span> - Developed unbreakable quantum-resistant encryption</div>
+                <div class="contact-item"><i class="fas fa-robot hacker-icon"></i> <span class="highlight">Neural Security Framework</span> - AI-powered threat detection system</div>
+                <div class="contact-item"><i class="fas fa-id-card hacker-icon"></i> <span class="highlight">Decentralized Identity</span> - Self-sovereign identity solution</div>
+                <div class="contact-item"><i class="fas fa-cloud hacker-icon"></i> <span class="highlight">Secure Cloud Architecture</span> - Zero-trust cloud infrastructure</div>`;
+            }
+            else if (command === 'clear') {
+                terminalText.innerHTML = '';
+                commandInput.value = '';
+                return;
+            }
+            else if (command === 'secret') {
+                secretMode = !secretMode;
+                if (secretMode) {
+                    response.innerHTML = `<span class="secret-mode">SECRET MODE ACTIVATED</span><br><br>
+                    <i class="fas fa-user-secret hacker-icon"></i> Welcome to the secret zone.<br>
+                    <i class="fas fa-bug hacker-icon"></i> System vulnerabilities detected: 0<br>
+                    <i class="fas fa-shield-virus hacker-icon"></i> Firewall status: <span style="color: #0f0">IMPENETRABLE</span>`;
+                    securityIcon.className = 'fas fa-lock hacker-icon';
+                    document.body.style.background = '#000a0a';
+                } else {
+                    response.innerHTML = `<span style="color: #0f0">SECRET MODE DEACTIVATED</span>`;
+                    securityIcon.className = 'fas fa-lock-open hacker-icon';
+                    document.body.style.background = '#000';
+                }
+            }
+            else if (command === 'exit') {
+                response.innerHTML = `<span class="system-alert"><i class="fas fa-exclamation-triangle hacker-icon"></i> Access Denied: Terminal cannot be closed from this session.</span>`;
+            }
+            else {
+                response.innerHTML = `<span style="color: #f44"><i class="fas fa-exclamation-circle hacker-icon"></i> Command not found: ${command}</span><br>
+                Type <span class="highlight">'help'</span> for available commands.`;
+            }
+            terminalText.appendChild(response);
+            terminalText.appendChild(document.createElement('br'));
+            commandLine.scrollIntoView();
+        }
+        // Terminal window controls
+        function minimizeTerminal() {
+            const terminal = document.querySelector('.terminal-container');
+            terminal.style.transform = 'translateY(100vh)';
+            setTimeout(() => {
+                alert('Terminal minimized. Refresh page to restore.');
+            }, 500);
+        }
+        function maximizeTerminal() {
+            const terminal = document.querySelector('.terminal-container');
+            if (terminal.style.width === '100%') {
+                terminal.style.width = '85%';
+                terminal.style.height = '75vh';
+            } else {
+                terminal.style.width = '100%';
+                terminal.style.height = '100vh';
+            }
+        }
+        function closeTerminal() {
+            const terminal = document.querySelector('.terminal-container');
+            terminal.style.animation = 'none';
+            terminal.style.transform = 'scale(0)';
+            terminal.style.opacity = '0';
+            setTimeout(() => {
+                document.body.innerHTML = '<div style="color: #0f0; font-family: monospace; text-align: center; margin-top: 40vh;">Connection terminated. Refresh to reconnect.</div>';
+            }, 500);
+        }
+        // Command history navigation
+        commandInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') {
+                const command = this.value;
+                this.value = '';
+                if (command.trim() !== '') {
+                    processCommand(command);
+                }
+            }
+            else if (e.key === 'ArrowUp') {
+                if (commandHistory.length > 0 && historyIndex < commandHistory.length - 1) {
+                    historyIndex++;
+                    this.value = commandHistory[historyIndex];
+                    e.preventDefault();
+                }
+            }
+            else if (e.key === 'ArrowDown') {
+                if (historyIndex > 0) {
+                    historyIndex--;
+                    this.value = commandHistory[historyIndex];
+                    e.preventDefault();
+                } else if (historyIndex === 0) {
+                    historyIndex = -1;
+                    this.value = '';
+                    e.preventDefault();
+                }
+            }
+        });
+        // Start animations
+        window.addEventListener('load', function() {
+            draw();
+            typeNextCharacter();
+            // Easter egg
+            console.log('%c Looking for something? Try the "secret" command.', 'color: #0f0; font-family: monospace; font-size: 14px;');
+        });
+        window.addEventListener('resize', function() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+    </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=iimran/cyberpunk-html-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>