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

260

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

11 months ago

2.2k
Login page

Author:
Reuben Enahoro

6 months ago

1.2k
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

4 months ago

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

Author:
Ahita Bisma Adlula

4 months ago

1.4k
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

2 months ago

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

Author:
ORGIN_DREAMS

3 weeks ago

37
Sign up
sign up page

Author:
gidy

3 weeks ago

218
Forgot password?
you can change password an time

Author:
gidy

2 weeks ago

119
cards
html , css ,

Author:
Hacker Development

1 month ago

85
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

8 months ago

1.5k
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

2 days ago

37
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

7 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components