Home
QQ-VVN
Hacker terminal #fake

Hacker terminal #fake

hacker terminal tailwind css

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author QQ-VVN

872

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Hacker Terminal</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');
        
        :root {
            --terminal-bg: #0c0d16;
            --terminal-text: #00ff00;
            --terminal-text-dim: #00cc00;
            --terminal-header: #0f111a;
            --terminal-shadow: 0 0 20px rgba(0, 255, 0, 0.4);
            --terminal-border: 1px solid #1a1d2e;
            --terminal-font: 'Fira Code', monospace;
        }
        
        body {
            background-color: #000000;
            background-image: 
                radial-gradient(rgba(0, 40, 0, 0.75), transparent 2px),
                radial-gradient(rgba(0, 40, 0, 0.75), transparent 1.5px);
            background-size: 30px 30px;
            background-position: 0 0, 15px 15px;
            margin: 0;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .matrix-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.15;
        }
        
        .terminal-container {
            width: 90%;
            max-width: 1000px;
            height: 80vh;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--terminal-shadow);
            border: var(--terminal-border);
            animation: bootup 2s ease-out;
        }
        
        .terminal-header {
            background-color: var(--terminal-header);
            padding: 8px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: var(--terminal-border);
        }
        
        .window-controls {
            display: flex;
            gap: 8px;
        }
        
        .control {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .control.close { background-color: #ff5f56; }
        .control.minimize { background-color: #ffbd2e; }
        .control.maximize { background-color: #27c93f; }
        
        .terminal-title {
            color: #6c7693;
            font-size: 14px;
            font-family: var(--terminal-font);
        }
        
        .terminal-body {
            background-color: var(--terminal-bg);
            height: calc(100% - 36px);
            padding: 15px;
            overflow-y: auto;
            font-family: var(--terminal-font);
            color: var(--terminal-text);
            font-size: 14px;
            line-height: 1.6;
        }
        
        .terminal-body::-webkit-scrollbar {
            width: 8px;
        }
        
        .terminal-body::-webkit-scrollbar-track {
            background: rgba(30, 30, 30, 0.5);
        }
        
        .terminal-body::-webkit-scrollbar-thumb {
            background: rgba(0, 255, 0, 0.3);
            border-radius: 4px;
        }
        
        .terminal-body::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 255, 0, 0.5);
        }
        
        .prompt {
            display: flex;
            margin: 5px 0;
        }
        
        .prompt-text {
            color: var(--terminal-text);
            margin-right: 8px;
            font-weight: 500;
        }
        
        .command-input {
            background: transparent;
            border: none;
            outline: none;
            color: var(--terminal-text);
            font-family: var(--terminal-font);
            font-size: 14px;
            caret-color: transparent;
            flex-grow: 1;
        }
        
        .cursor {
            display: inline-block;
            width: 8px;
            height: 16px;
            background-color: var(--terminal-text);
            animation: blink 1s step-end infinite;
            vertical-align: middle;
            margin-left: 2px;
        }
        
        .output-line {
            margin: 5px 0;
            opacity: 0;
            animation: fadeIn 0.3s forwards;
        }
        
        .output-line.error {
            color: #ff5f56;
        }
        
        .output-line.success {
            color: #27c93f;
        }
        
        .output-line.warning {
            color: #ffbd2e;
        }
        
        .output-line.info {
            color: #58a6ff;
        }
        
        .typing {
            overflow: hidden;
            white-space: nowrap;
            animation: typing 1s steps(30, end);
        }
        
        .scan-line {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(0, 255, 0, 0.3);
            z-index: 1;
            animation: scanline 6s linear infinite;
            opacity: 0.5;
        }
        
        .glitch {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 255, 0, 0.02);
            z-index: 1;
            display: none;
        }
        
        .noise {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/png;base64,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");
            background-repeat: repeat;
            opacity: 0.05;
            z-index: 1;
            pointer-events: none;
        }
        
        /* Animations */
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes scanline {
            0% { top: 0; }
            100% { top: 100%; }
        }
        
        @keyframes glitch {
            0% { display: none; }
            2% { display: block; }
            4% { display: none; }
            50% { display: none; }
            52% { display: block; }
            54% { display: none; }
            98% { display: none; }
            100% { display: block; }
        }
        
        @keyframes bootup {
            0% { opacity: 0; transform: scale(0.95); }
            50% { opacity: 0.5; }
            100% { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body class="bg-black">
    <canvas id="matrix" class="matrix-bg"></canvas>
    
    <div class="terminal-container">
        <div class="terminal-header">
            <div class="window-controls">
                <div class="control close"></div>
                <div class="control minimize"></div>
                <div class="control maximize"></div>
            </div>
            <div class="terminal-title">root@darknet:~/operations</div>
            <div class="connection-status text-xs text-green-500">SECURE CONNECTION</div>
        </div>
        
        <div class="terminal-body" id="terminal">
            
        </div>
        
        <div class="scan-line"></div>
        <div class="glitch" id="glitch"></div>
        <div class="noise"></div>
    </div>
    
    <script>
        // Matrix background effect
        const canvas = document.getElementById('matrix');
        const ctx = canvas.getContext('2d');
        
        // Set canvas size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // Characters for matrix effect
        const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
        const fontSize = 14;
        const columns = canvas.width / fontSize;
        
        // Array to track the y position of each column
        const drops = [];
        for (let i = 0; i < columns; i++) {
            drops[i] = Math.random() * -100;
        }
        
        // Draw the matrix effect
        function drawMatrix() {
            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 < drops.length; i++) {
                const text = chars.charAt(Math.floor(Math.random() * chars.length));
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                
                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                
                drops[i]++;
            }
        }
        
        // Terminal functionality
        const terminal = document.getElementById('terminal');
        const glitchElement = document.getElementById('glitch');
        
        // Predefined responses for commands
        const commandResponses = {
            'help': [
                { text: 'Available commands:', type: 'info' },
                { text: '  access        - Attempt to access a system', type: 'normal' },
                { text: '  scan          - Scan network for vulnerabilities', type: 'normal' },
                { text: '  decrypt       - Decrypt encrypted files', type: 'normal' },
                { text: '  exploit       - Run exploit on target system', type: 'normal' },
                { text: '  backdoor      - Install backdoor on compromised system', type: 'normal' },
                { text: '  ddos          - Launch DDoS attack on target', type: 'normal' },
                { text: '  clear         - Clear terminal screen', type: 'normal' },
                { text: '  exit          - Exit terminal session', type: 'normal' }
            ],
            'access': [
                { text: 'Attempting to access target system...', type: 'normal' },
                { text: 'Bypassing firewall...', type: 'normal' },
                { text: 'Cracking password hash...', type: 'normal' },
                { text: 'Access granted! You now have root privileges.', type: 'success' }
            ],
            'scan': [
                { text: 'Scanning network for vulnerabilities...', type: 'normal' },
                { text: 'Scanning port range 1-1000...', type: 'normal' },
                { text: 'Discovered open ports: 22, 80, 443, 3306', type: 'info' },
                { text: 'Vulnerability found: CVE-2023-1234 (Critical)', type: 'warning' },
                { text: 'Vulnerability found: CVE-2023-5678 (High)', type: 'warning' },
                { text: 'Scan complete. 2 critical vulnerabilities found.', type: 'success' }
            ],
            'decrypt': [
                { text: 'Starting decryption process...', type: 'normal' },
                { text: 'Analyzing encryption algorithm...', type: 'normal' },
                { text: 'Attempting brute force attack...', type: 'normal' },
                { text: 'Decryption successful!', type: 'success' },
                { text: 'Decrypted content:', type: 'info' },
                { text: '-----BEGIN DECRYPTED DATA-----', type: 'normal' },
                { text: 'The access codes are: 7H4X0R-9Y2Z-8A1B', type: 'normal' },
                { text: '-----END DECRYPTED DATA-----', type: 'normal' }
            ],
            'exploit': [
                { text: 'Preparing exploit payload...', type: 'normal' },
                { text: 'Targeting vulnerability CVE-2023-1234...', type: 'normal' },
                { text: 'Sending exploit payload...', type: 'normal' },
                { text: 'Exploit successful! Shell access established.', type: 'success' }
            ],
            'backdoor': [
                { text: 'Installing backdoor on target system...', type: 'normal' },
                { text: 'Creating hidden user account...', type: 'normal' },
                { text: 'Setting up remote access service...', type: 'normal' },
                { text: 'Backdoor installed successfully!', type: 'success' },
                { text: 'Connection details:', type: 'info' },
                { text: '  IP: 192.168.1.100', type: 'normal' },
                { text: '  Port: 4444', type: 'normal' },
                { text: '  User: phantom', type: 'normal' },
                { text: '  Pass: d4rkn3t2023', type: 'normal' }
            ],
            'ddos': [
                { text: 'Preparing DDoS attack...', type: 'normal' },
                { text: 'Connecting to botnet...', type: 'normal' },
                { text: 'Botnet status: 10,000 nodes ready', type: 'info' },
                { text: 'Starting attack on target...', type: 'warning' },
                { text: 'Attack in progress...', type: 'warning' },
                { text: 'Target is experiencing service disruption.', type: 'success' }
            ],
            'clear': [],
            'exit': [
                { text: 'Terminating session...', type: 'normal' },
                { text: 'Clearing logs...', type: 'normal' },
                { text: 'Disconnecting...', type: 'normal' },
                { text: 'Session terminated. Goodbye.', type: 'info' }
            ]
        };
        
        // Boot sequence messages
        const bootSequence = [
            { text: 'Initializing system...', type: 'normal' },
            { text: 'Loading kernel modules...', type: 'normal' },
            { text: 'Establishing secure connection...', type: 'normal' },
            { text: 'Connection established.', type: 'success' },
            { text: 'Welcome to DarkNet Terminal v3.7.2', type: 'info' },
            { text: 'WARNING: Unauthorized access is prohibited and will be prosecuted.', type: 'warning' },
            { text: 'Type "help" for available commands.', type: 'normal' }
        ];
        
        // Function to add a line to the terminal
        function addLine(text, type = 'normal', typing = false) {
            const line = document.createElement('div');
            line.className = `output-line ${type}`;
            
            if (typing) {
                line.className += ' typing';
                const typingSpeed = 30 + Math.random() * 50;
                let i = 0;
                const typeText = () => {
                    if (i < text.length) {
                        line.textContent += text.charAt(i);
                        i++;
                        setTimeout(typeText, Math.random() * 50 + 10);
                    }
                };
                setTimeout(typeText, typingSpeed);
            } else {
                line.textContent = text;
            }
            
            terminal.appendChild(line);
            terminal.scrollTop = terminal.scrollHeight;
            
            return line;
        }
        
        // Function to add a command prompt
        function addPrompt() {
            const promptDiv = document.createElement('div');
            promptDiv.className = 'prompt';
            
            const promptText = document.createElement('span');
            promptText.className = 'prompt-text';
            promptText.textContent = 'root@darknet:~# ';
            
            const commandInput = document.createElement('input');
            commandInput.className = 'command-input';
            commandInput.type = 'text';
            commandInput.autofocus = true;
            
            const cursor = document.createElement('span');
            cursor.className = 'cursor';
            
            promptDiv.appendChild(promptText);
            promptDiv.appendChild(commandInput);
            promptDiv.appendChild(cursor);
            
            terminal.appendChild(promptDiv);
            commandInput.focus();
            
            // Handle command input
            commandInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    const command = commandInput.value.trim().toLowerCase();
                    
                    // Disable the input and remove cursor
                    commandInput.disabled = true;
                    cursor.style.display = 'none';
                    
                    // Add the command to the terminal
                    const commandLine = document.createElement('div');
                    commandLine.className = 'output-line';
                    commandLine.textContent = `root@darknet:~# ${command}`;
                    terminal.appendChild(commandLine);
                    
                    // Process the command
                    processCommand(command);
                }
            });
            
            return commandInput;
        }
        
        // Function to process commands
        function processCommand(command) {
            // Trigger glitch effect
            triggerGlitch();
            
            setTimeout(() => {
                if (command === 'clear') {
                    // Clear the terminal
                    terminal.innerHTML = '';
                } else if (commandResponses[command]) {
                    // Display predefined response
                    const responses = commandResponses[command];
                    displayResponses(responses);
                } else if (command) {
                    // Unknown command
                    addLine(`Command not found: ${command}`, 'error');
                }
                
                // Add a new prompt after processing (unless exit command)
                if (command !== 'exit') {
                    setTimeout(() => {
                        addPrompt();
                    }, 500);
                }
            }, 300);
        }
        
        // Function to display a sequence of responses with delays
        function displayResponses(responses, index = 0) {
            if (index < responses.length) {
                const response = responses[index];
                const typingEffect = index === 0; // Only first line gets typing effect
                
                addLine(response.text, response.type, typingEffect);
                
                const delay = typingEffect ? 
                    response.text.length * 20 + 300 : // Longer delay for typing effect
                    Math.random() * 300 + 200; // Random delay for other lines
                
                setTimeout(() => {
                    displayResponses(responses, index + 1);
                }, delay);
            }
        }
        
        // Function to trigger glitch effect
        function triggerGlitch() {
            glitchElement.style.display = 'block';
            glitchElement.style.backgroundColor = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.05)`;
            
            setTimeout(() => {
                glitchElement.style.display = 'none';
            }, 50);
            
            setTimeout(() => {
                glitchElement.style.display = 'block';
                glitchElement.style.backgroundColor = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.05)`;
                
                setTimeout(() => {
                    glitchElement.style.display = 'none';
                }, 50);
            }, 200);
        }
        
        // Initialize matrix animation
        setInterval(drawMatrix, 50);
        
        // Start boot sequence
        window.addEventListener('load', function() {
            // Display boot sequence
            displayResponses(bootSequence, 0);
            
            // Add first prompt after boot sequence
            setTimeout(() => {
                addPrompt();
                
                // Set up periodic glitch effects
                setInterval(() => {
                    if (Math.random() > 0.95) {
                        triggerGlitch();
                    }
                }, 3000);
            }, bootSequence.length * 500 + 1000);
        });
        
        // Handle window resize for matrix effect
        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            const columns = canvas.width / fontSize;
            
            // Reset drops array
            drops.length = 0;
            for (let i = 0; i < columns; i++) {
                drops[i] = Math.random() * -100;
            }
        });
        
        // Add keyboard sounds
        document.addEventListener('keydown', function(event) {
            if (Math.random() > 0.7) {
                triggerGlitch();
            }
        });
        
        // Focus on input when clicking anywhere in terminal
        terminal.addEventListener('click', function() {
            const activeInput = terminal.querySelector('.command-input:not([disabled])');
            if (activeInput) {
                activeInput.focus();
            }
        });
    </script>
</body>
</html>

</div>

Related Examples

authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.6k
Login page

Author:
Reuben Enahoro

10 months ago

1.7k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

8 months ago

1.6k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

8 months ago

2.5k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

6 months ago

562
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

4 months ago

454
Sign up
sign up page

Author:
gidy

4 months ago

920
Forgot password?
you can change password an time

Author:
gidy

4 months ago

410
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

3 months ago

971
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

3 months ago

616
Contact us Form with Responsive

Author:
KULDEEP

3 months ago

317
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

3 months ago

540

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components