Spaces:

iimran
/

cyberpunk-html-website

Running

File size: 31,117 Bytes

<!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 - Imran Sarwar</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); }
        }
        
        canvas {
            display: block;
        }
        
        @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@ennovative:~">root@ennovative:~</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>
        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;
                
                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);
        }
        
        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 ..", delay: 50 },
            { text: "Initializing secure Salesforce connection...", 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 Sarwar", delay: 100, style: "color: #0ff; font-weight: bold" },
            { text: "\n", delay: 50 },
            { text: "> TITLE: ", delay: 20 },
            { text: "Senior Business Analyst & Salesforce Solution Architect", delay: 50, style: "color: #0ff" },
            { text: "\n", delay: 50 },
            { text: "> ORGANIZATION: ", delay: 20 },
            { text: "Ennovative Pty Ltd", delay: 70, style: "color: #f44" },
            { text: "\n", delay: 50 },
            { text: "> STATUS: ", delay: 20 },
            { text: "ACTIVE // AI-ENHANCED CRM SPECIALIST", 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: "> Salesforce Architecture: ", delay: 20 },
            { text: "██████████ 98%", delay: 30, style: "color: #0ff" },
            { text: "\n", delay: 50 },
            { text: "> Business Analysis: ", delay: 20 },
            { text: "██████████ 95%", delay: 30, style: "color: #0ff" },
            { text: "\n", delay: 50 },
            { text: "> AI Integration: ", delay: 20 },
            { text: "████████▉ 90%", delay: 30, style: "color: #0ff" },
            { text: "\n", delay: 50 },
            { text: "> Public Sector Solutions: ", delay: 20 },
            { text: "████████▊ 88%", delay: 30, style: "color: #0ff" },
            { text: "\n", delay: 50 },
            { text: "> Data Management: ", delay: 20 },
            { text: "███████▍ 85%", 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] Wollondilly Shire - CFSuite Implementation", delay: 30 },
            { text: "\n", delay: 50 },
            { text: "> [2022] City of Marion - Hard Waste Booking System", delay: 30 },
            { text: "\n", delay: 50 },
            { text: "> [2017] City of Tea Tree Gully - Award-Winning Portal", 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: "1@1m.au", 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) {
            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 key projects</div>
                <div class="command-history"><i class="fas fa-terminal hacker-icon"></i> <span class="highlight">certs</span>: List Salesforce certifications</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 (simulated)</div>`;
            } 
            else if (command === 'about') {
                response.innerHTML = `// SYSTEM USER PROFILE //<br><br>
                <i class="fas fa-user-secret hacker-icon"></i> <span class="highlight">Imran Sarwar</span> is a visionary Digital Transformation Consultant with:<br>
                - 14+ years of IT expertise<br>
                - 13+ years as ICT Business Analyst<br>
                - Salesforce Solution Architect specialist<br>
                - AI-enhanced public sector solutions<br><br>
                Currently driving innovation at Ennovative Pty Ltd since 2012, revolutionizing local government operations across Australia.`;
            } 
            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">Salesforce:</span> <span class="skill-level" style="width: 98%"></span></div>
                <div class="skill-bar"><i class="fas fa-shield-alt hacker-icon"></i> <span class="skill-name">Business Analysis:</span> <span class="skill-level" style="width: 95%"></span></div>
                <div class="skill-bar"><i class="fas fa-network-wired hacker-icon"></i> <span class="skill-name">AI Integration:</span> <span class="skill-level" style="width: 90%"></span></div>
                <div class="skill-bar"><i class="fas fa-brain hacker-icon"></i> <span class="skill-name">Solution Design:</span> <span class="skill-level" style="width: 88%"></span></div>
                <div class="skill-bar"><i class="fas fa-database hacker-icon"></i> <span class="skill-name">Data Migration:</span> <span class="skill-level" style="width: 85%"></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:1@1m.au">1@1m.au</a></div>`;
            }
            else if (command === 'projects') {
                response.innerHTML = `>> KEY PROJECTS <<<br><br>
                <div class="contact-item"><i class="fas fa-city hacker-icon"></i> <span class="highlight">Wollondilly Shire</span> - 30% faster request processing</div>
                <div class="contact-item"><i class="fas fa-trash hacker-icon"></i> <span class="highlight">City of Marion</span> - Hard Waste Booking system</div>
                <div class="contact-item"><i class="fas fa-award hacker-icon"></i> <span class="highlight">Tea Tree Gully</span> - GOV Design Award 2017</div>
                <div class="contact-item"><i class="fas fa-bolt hacker-icon"></i> <span class="highlight">Virtual Power Plant SA</span> - State government portal</div>`;
            }
            else if (command === 'certs') {
                response.innerHTML = `>> SALESFORCE CERTIFICATIONS <<<br><br>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Business Analyst</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> B2B Solution Architect</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> System Architect</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Application Architect</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Administrator</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Sales Cloud Consultant</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Service Cloud Consultant</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Community Cloud Consultant</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Advanced Administrator</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Sharing and Visibility Architect</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Data Architect</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Platform App Builder</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Platform Developer I</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Identity and Access Management Architect</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Development Lifecycle and Deployment Architect</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Integration Architect</div>
                <div class="contact-item"><i class="fas fa-certificate hacker-icon"></i> Security & Privacy Accredited Professional</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> AI Initiatives Unlocked:<br>
                    <i class="fas fa-brain hacker-icon"></i> MoodLens: Sentiment Analysis<br>
                    <i class="fas fa-shield-alt hacker-icon"></i> Abuse Detector: Content Filter<br>
                    <i class="fas fa-robot hacker-icon"></i> CouncilCaseClassifier: Case Routing<br>
                    <i class="fas fa-book hacker-icon"></i> CfSuiteKnowbler: GPT-4 Knowledge Generation<br>
                    <i class="fas fa-heartbeat hacker-icon"></i> MindMeter: Stress Detection`;
                    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 session persists.</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();
        }
        
        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);
        }
        
        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();
                }
            }
        });
        
        window.addEventListener('load', function() {
            draw();
            typeNextCharacter();
            
            console.log('%c Try "secret" for hidden AI projects!', 'color: #0f0; font-family: monospace; font-size: 14px;');
        });
        
        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            const newColumns = canvas.width / fontSize;
            while (rainDrops.length < newColumns) {
                rainDrops.push(Math.floor(Math.random() * canvas.height / fontSize));
            }
            while (rainDrops.length > newColumns) {
                rainDrops.pop();
            }
        });
    </script>
</body>
</html>