Spaces:

NzService
/

password-generator

Running

File size: 28,577 Bytes

c6931eb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARCADE PASSWORD GENERATOR</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <style>
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        @keyframes flash {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        @keyframes glow {
            0% { box-shadow: 0 0 5px #00ff00; }
            50% { box-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00; }
            100% { box-shadow: 0 0 5px #00ff00; }
        }
        .blink {
            animation: blink 1s step-end infinite;
        }
        .bounce:hover {
            animation: bounce 0.5s ease;
        }
        .flash {
            animation: flash 0.3s ease;
        }
        .glow {
            animation: glow 2s infinite;
        }
        .pixel-font {
            font-family: 'Press Start 2P', cursive;
        }
        .arcade-btn {
            position: relative;
            overflow: hidden;
        }
        .arcade-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }
        .arcade-btn:hover:before {
            left: 100%;
        }
        .password-item {
            transition: all 0.3s ease;
        }
        .password-item:hover {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .notification.show {
            opacity: 1;
        }
    </style>
</head>
<body class="bg-black text-white pixel-font min-h-screen flex flex-col items-center p-4">
    <!-- Notification -->
    <div id="notification" class="notification bg-purple-600 p-4 rounded-lg shadow-lg border-2 border-pink-500 hidden">
        <span id="notification-text"></span>
    </div>

    <!-- Main Container -->
    <div class="max-w-3xl w-full border-4 border-purple-600 rounded-lg p-6 bg-gray-900 bg-opacity-90 shadow-xl">
        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-4xl md:text-5xl text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-blue-400 to-green-400 mb-2">
                ARCADE PASSWORD GENERATOR
            </h1>
            <div class="flex justify-center items-center gap-4">
                <div class="bg-blue-900 px-4 py-2 rounded-lg border-2 border-blue-400">
                    <span class="text-green-400">SAVED: </span>
                    <span id="saved-count" class="text-yellow-300">00</span>
                </div>
                <div class="bg-purple-900 px-4 py-2 rounded-lg border-2 border-purple-400">
                    <span class="text-pink-400">LEVEL: </span>
                    <span id="level-count" class="text-yellow-300">01</span>
                </div>
            </div>
        </div>

        <!-- Password Display -->
        <div class="bg-black p-4 rounded-lg border-2 border-green-500 mb-6 relative">
            <div class="flex justify-between items-center">
                <span class="text-green-400">PASSWORD:</span>
                <div class="flex gap-2">
                    <button id="copy-btn" class="arcade-btn bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded bounce">
                        COPY
                    </button>
                    <button id="save-btn" class="arcade-btn bg-pink-600 hover:bg-pink-500 text-white px-3 py-1 rounded bounce">
                        SAVE
                    </button>
                </div>
            </div>
            <div id="password-display" class="text-2xl md:text-3xl text-center py-4 my-2 bg-gray-800 rounded border border-gray-700 relative">
                <span id="password-text" class="text-yellow-300">PRESS GENERATE</span>
                <span id="cursor" class="blink text-green-400">|</span>
            </div>
        </div>

        <!-- Generator Controls -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="bg-gray-800 p-4 rounded-lg border-2 border-blue-400">
                <h3 class="text-blue-400 mb-2 text-center">MODE</h3>
                <div class="flex flex-col gap-2">
                    <button id="friendly-btn" class="arcade-btn bg-green-700 hover:bg-green-600 text-white py-2 rounded bounce">
                        FRIENDLY
                    </button>
                    <button id="strong-btn" class="arcade-btn bg-yellow-600 hover:bg-yellow-500 text-white py-2 rounded bounce">
                        STRONG
                    </button>
                    <button id="custom-btn" class="arcade-btn bg-purple-700 hover:bg-purple-600 text-white py-2 rounded bounce">
                        CUSTOM
                    </button>
                </div>
            </div>

            <div class="bg-gray-800 p-4 rounded-lg border-2 border-pink-400">
                <h3 class="text-pink-400 mb-2 text-center">LENGTH</h3>
                <div class="flex flex-col items-center">
                    <input id="length-slider" type="range" min="4" max="32" value="12" class="w-full mb-2">
                    <span id="length-value" class="text-yellow-300">12</span>
                </div>
            </div>

            <div id="custom-options" class="bg-gray-800 p-4 rounded-lg border-2 border-green-400 hidden">
                <h3 class="text-green-400 mb-2 text-center">CUSTOM OPTIONS</h3>
                <div class="flex flex-col gap-2">
                    <label class="flex items-center">
                        <input type="checkbox" id="uppercase" checked class="mr-2">
                        <span>Uppercase (A-Z)</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="lowercase" checked class="mr-2">
                        <span>Lowercase (a-z)</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="numbers" checked class="mr-2">
                        <span>Numbers (0-9)</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="symbols" checked class="mr-2">
                        <span>Symbols (!@#$)</span>
                    </label>
                </div>
            </div>
        </div>

        <!-- Seed Input -->
        <div class="bg-gray-800 p-4 rounded-lg border-2 border-yellow-400 mb-6">
            <h3 class="text-yellow-400 mb-2">SEED (OPTIONAL)</h3>
            <div class="flex gap-2">
                <input id="seed-input" type="text" placeholder="Enter seed for reproducibility" class="flex-1 bg-black text-white p-2 rounded border border-gray-700">
                <button id="generate-btn" class="arcade-btn bg-red-600 hover:bg-red-500 text-white px-4 py-2 rounded-lg bounce flash">
                    GENERATE
                </button>
            </div>
        </div>

        <!-- Saved Passwords -->
        <div class="bg-gray-800 p-4 rounded-lg border-2 border-purple-400">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-purple-400">SAVED PASSWORDS</h3>
                <div class="flex gap-2">
                    <button id="download-btn" class="arcade-btn bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded bounce">
                        DOWNLOAD .TXT
                    </button>
                    <button id="clear-all-btn" class="arcade-btn bg-red-600 hover:bg-red-500 text-white px-3 py-1 rounded bounce">
                        CLEAR ALL
                    </button>
                </div>
            </div>
            <div id="saved-passwords" class="space-y-2 max-h-64 overflow-y-auto">
                <!-- Passwords will be added here -->
                <div class="text-center text-gray-500 py-4">No passwords saved yet</div>
            </div>
        </div>
    </div>

    <!-- Sound toggle -->
    <div class="fixed bottom-4 right-4">
        <button id="sound-toggle" class="arcade-btn bg-gray-800 hover:bg-gray-700 text-white p-3 rounded-full bounce">
            <i class="fas fa-volume-up"></i>
        </button>
    </div>

    <script>
        // DOM Elements
        const passwordDisplay = document.getElementById('password-text');
        const cursor = document.getElementById('cursor');
        const lengthSlider = document.getElementById('length-slider');
        const lengthValue = document.getElementById('length-value');
        const generateBtn = document.getElementById('generate-btn');
        const copyBtn = document.getElementById('copy-btn');
        const saveBtn = document.getElementById('save-btn');
        const friendlyBtn = document.getElementById('friendly-btn');
        const strongBtn = document.getElementById('strong-btn');
        const customBtn = document.getElementById('custom-btn');
        const customOptions = document.getElementById('custom-options');
        const uppercaseCheck = document.getElementById('uppercase');
        const lowercaseCheck = document.getElementById('lowercase');
        const numbersCheck = document.getElementById('numbers');
        const symbolsCheck = document.getElementById('symbols');
        const seedInput = document.getElementById('seed-input');
        const savedPasswords = document.getElementById('saved-passwords');
        const savedCount = document.getElementById('saved-count');
        const levelCount = document.getElementById('level-count');
        const downloadBtn = document.getElementById('download-btn');
        const clearAllBtn = document.getElementById('clear-all-btn');
        const soundToggle = document.getElementById('sound-toggle');
        const notification = document.getElementById('notification');
        const notificationText = document.getElementById('notification-text');

        // State
        let currentPassword = '';
        let savedPasswordsList = JSON.parse(localStorage.getItem('savedPasswords')) || [];
        let soundEnabled = true;
        let level = 1;

        // Initialize
        updateSavedPasswordsDisplay();
        updateLevel();

        // Event Listeners
        lengthSlider.addEventListener('input', () => {
            lengthValue.textContent = lengthSlider.value;
        });

        generateBtn.addEventListener('click', generatePassword);
        copyBtn.addEventListener('click', copyPassword);
        saveBtn.addEventListener('click', savePassword);
        friendlyBtn.addEventListener('click', () => setMode('friendly'));
        strongBtn.addEventListener('click', () => setMode('strong'));
        customBtn.addEventListener('click', () => setMode('custom'));
        downloadBtn.addEventListener('click', downloadPasswords);
        clearAllBtn.addEventListener('click', clearAllPasswords);
        soundToggle.addEventListener('click', toggleSound);

        // Set initial mode
        setMode('friendly');

        // Functions
        function setMode(mode) {
            // Reset all buttons
            friendlyBtn.classList.remove('glow');
            strongBtn.classList.remove('glow');
            customBtn.classList.remove('glow');
            
            // Hide custom options by default
            customOptions.classList.add('hidden');
            
            // Set the selected mode
            switch(mode) {
                case 'friendly':
                    friendlyBtn.classList.add('glow');
                    lengthSlider.value = 8;
                    lengthValue.textContent = '8';
                    break;
                case 'strong':
                    strongBtn.classList.add('glow');
                    lengthSlider.value = 16;
                    lengthValue.textContent = '16';
                    break;
                case 'custom':
                    customBtn.classList.add('glow');
                    customOptions.classList.remove('hidden');
                    break;
            }
            
            // Play sound if enabled
            if (soundEnabled) {
                playSound('click');
            }
        }

        function generatePassword() {
            const length = parseInt(lengthSlider.value);
            const seed = seedInput.value;
            
            let charset = '';
            let password = '';
            
            // Determine character set based on mode
            if (friendlyBtn.classList.contains('glow')) {
                // Friendly mode - easy to remember words
                const words = ['apple', 'banana', 'cherry', 'dragon', 'elephant', 'flamingo', 'giraffe', 'honey', 'iguana', 'jelly', 'koala', 'lemon', 'mango', 'ninja', 'orange', 'panda', 'quokka', 'rainbow', 'sunshine', 'tiger', 'unicorn', 'volcano', 'watermelon', 'xylophone', 'yellow', 'zebra'];
                const separators = ['-', '_', '.', '!', '@', '#', '$', '%', '&', '*'];
                
                // Generate a pattern like word-separator-word-number
                const word1 = words[Math.floor(Math.random() * words.length)];
                const word2 = words[Math.floor(Math.random() * words.length)];
                const separator = separators[Math.floor(Math.random() * separators.length)];
                const num = Math.floor(Math.random() * 90) + 10; // 10-99
                
                password = `${word1}${separator}${word2}${num}`;
                
                // If seed is provided, use it to generate predictable results
                if (seed) {
                    const seedNum = hashSeed(seed);
                    const w1 = words[seedNum % words.length];
                    const w2 = words[(seedNum + 1) % words.length];
                    const sep = separators[(seedNum + 2) % separators.length];
                    const n = (seedNum % 90) + 10;
                    password = `${w1}${sep}${w2}${n}`;
                }
                
                // Ensure the password isn't too long
                if (password.length > length) {
                    password = password.substring(0, length);
                }
            } 
            else if (strongBtn.classList.contains('glow')) {
                // Strong mode - completely random characters
                charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
                
                if (seed) {
                    // Use seed for reproducibility
                    const seedNum = hashSeed(seed);
                    for (let i = 0; i < length; i++) {
                        const index = (seedNum + i) % charset.length;
                        password += charset.charAt(index);
                    }
                } else {
                    // Completely random
                    for (let i = 0; i < length; i++) {
                        const randomIndex = Math.floor(Math.random() * charset.length);
                        password += charset.charAt(randomIndex);
                    }
                }
            } 
            else {
                // Custom mode - use selected character sets
                if (uppercaseCheck.checked) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                if (lowercaseCheck.checked) charset += 'abcdefghijklmnopqrstuvwxyz';
                if (numbersCheck.checked) charset += '0123456789';
                if (symbolsCheck.checked) charset += '!@#$%^&*()_+-=[]{}|;:,.<>?';
                
                if (charset.length === 0) {
                    showNotification('Please select at least one character set!', 'red');
                    return;
                }
                
                if (seed) {
                    // Use seed for reproducibility
                    const seedNum = hashSeed(seed);
                    for (let i = 0; i < length; i++) {
                        const index = (seedNum + i) % charset.length;
                        password += charset.charAt(index);
                    }
                } else {
                    // Completely random
                    for (let i = 0; i < length; i++) {
                        const randomIndex = Math.floor(Math.random() * charset.length);
                        password += charset.charAt(randomIndex);
                    }
                }
            }
            
            currentPassword = password;
            
            // Animate the password display
            passwordDisplay.textContent = '';
            let i = 0;
            const typingEffect = setInterval(() => {
                if (i < password.length) {
                    passwordDisplay.textContent += password.charAt(i);
                    i++;
                    
                    // Play typing sound if enabled
                    if (soundEnabled && i % 2 === 0) {
                        playSound('type');
                    }
                } else {
                    clearInterval(typingEffect);
                    
                    // Show success notification
                    showNotification('PASSWORD GENERATED!', 'green');
                    
                    // Play success sound if enabled
                    if (soundEnabled) {
                        playSound('success');
                    }
                }
            }, 50);
            
            // Animate the generate button
            generateBtn.classList.add('flash');
            setTimeout(() => {
                generateBtn.classList.remove('flash');
            }, 300);
        }

        function copyPassword() {
            if (!currentPassword) {
                showNotification('No password to copy!', 'red');
                return;
            }
            
            navigator.clipboard.writeText(currentPassword)
                .then(() => {
                    showNotification('COPIED TO CLIPBOARD!', 'blue');
                    
                    // Animate the copy button
                    copyBtn.classList.add('flash');
                    setTimeout(() => {
                        copyBtn.classList.remove('flash');
                    }, 300);
                    
                    // Play sound if enabled
                    if (soundEnabled) {
                        playSound('click');
                    }
                })
                .catch(err => {
                    console.error('Failed to copy: ', err);
                    showNotification('Failed to copy!', 'red');
                });
        }

        function savePassword() {
            if (!currentPassword) {
                showNotification('No password to save!', 'red');
                return;
            }
            
            // Check if password already exists
            if (savedPasswordsList.includes(currentPassword)) {
                showNotification('Password already saved!', 'yellow');
                return;
            }
            
            // Add to saved passwords
            savedPasswordsList.push(currentPassword);
            localStorage.setItem('savedPasswords', JSON.stringify(savedPasswordsList));
            
            // Update display
            updateSavedPasswordsDisplay();
            
            // Show success notification
            showNotification('PASSWORD SAVED!', 'green');
            
            // Animate the save button
            saveBtn.classList.add('flash');
            setTimeout(() => {
                saveBtn.classList.remove('flash');
            }, 300);
            
            // Play sound if enabled
            if (soundEnabled) {
                playSound('coin');
            }
            
            // Check for level up
            checkLevelUp();
        }

        function updateSavedPasswordsDisplay() {
            savedPasswords.innerHTML = '';
            
            if (savedPasswordsList.length === 0) {
                savedPasswords.innerHTML = '<div class="text-center text-gray-500 py-4">No passwords saved yet</div>';
                savedCount.textContent = '00';
                return;
            }
            
            savedCount.textContent = savedPasswordsList.length.toString().padStart(2, '0');
            
            savedPasswordsList.forEach((password, index) => {
                const passwordItem = document.createElement('div');
                passwordItem.className = 'password-item bg-gray-700 p-3 rounded-lg border border-gray-600 flex justify-between items-center';
                
                passwordItem.innerHTML = `
                    <div class="flex items-center">
                        <span class="text-yellow-400 mr-2">${(index + 1).toString().padStart(2, '0')}</span>
                        <span class="text-green-300 font-mono">${password}</span>
                    </div>
                    <button class="delete-btn arcade-btn bg-red-600 hover:bg-red-500 text-white px-2 py-1 rounded bounce" data-index="${index}">
                        <i class="fas fa-trash"></i>
                    </button>
                `;
                
                savedPasswords.appendChild(passwordItem);
            });
            
            // Add event listeners to delete buttons
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const index = parseInt(this.getAttribute('data-index'));
                    deletePassword(index);
                });
            });
        }

        function deletePassword(index) {
            savedPasswordsList.splice(index, 1);
            localStorage.setItem('savedPasswords', JSON.stringify(savedPasswordsList));
            updateSavedPasswordsDisplay();
            
            // Show notification
            showNotification('PASSWORD DELETED!', 'red');
            
            // Play sound if enabled
            if (soundEnabled) {
                playSound('delete');
            }
        }

        function clearAllPasswords() {
            if (savedPasswordsList.length === 0) {
                showNotification('No passwords to clear!', 'red');
                return;
            }
            
            savedPasswordsList = [];
            localStorage.setItem('savedPasswords', JSON.stringify(savedPasswordsList));
            updateSavedPasswordsDisplay();
            
            // Show notification
            showNotification('ALL PASSWORDS CLEARED!', 'red');
            
            // Animate the clear button
            clearAllBtn.classList.add('flash');
            setTimeout(() => {
                clearAllBtn.classList.remove('flash');
            }, 300);
            
            // Play sound if enabled
            if (soundEnabled) {
                playSound('delete');
            }
            
            // Reset level
            level = 1;
            updateLevel();
        }

        function downloadPasswords() {
            if (savedPasswordsList.length === 0) {
                showNotification('No passwords to download!', 'red');
                return;
            }
            
            const content = savedPasswordsList.join('\n\n');
            const blob = new Blob([content], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'arcade-passwords.txt';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            // Show notification
            showNotification('DOWNLOAD STARTED!', 'blue');
            
            // Animate the download button
            downloadBtn.classList.add('flash');
            setTimeout(() => {
                downloadBtn.classList.remove('flash');
            }, 300);
            
            // Play sound if enabled
            if (soundEnabled) {
                playSound('click');
            }
        }

        function toggleSound() {
            soundEnabled = !soundEnabled;
            soundToggle.innerHTML = soundEnabled ? '<i class="fas fa-volume-up"></i>' : '<i class="fas fa-volume-mute"></i>';
            
            // Show notification
            showNotification(soundEnabled ? 'SOUND ON!' : 'SOUND OFF!', soundEnabled ? 'green' : 'red');
            
            // Play sound if enabling
            if (soundEnabled) {
                playSound('click');
            }
        }

        function showNotification(message, color) {
            notificationText.textContent = message;
            notification.className = `notification bg-${color}-600 p-4 rounded-lg shadow-lg border-2 border-${color === 'yellow' ? 'yellow-400' : color === 'red' ? 'red-400' : color === 'blue' ? 'blue-400' : 'green-400'} show`;
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }

        function playSound(type) {
            if (!soundEnabled) return;
            
            // In a real app, you would play actual sound files here
            // For this demo, we'll just log the sound type
            console.log(`Playing ${type} sound`);
        }

        function hashSeed(seed) {
            // Simple hash function for seed reproducibility
            let hash = 0;
            for (let i = 0; i < seed.length; i++) {
                const char = seed.charCodeAt(i);
                hash = ((hash << 5) - hash) + char;
                hash = hash & hash; // Convert to 32bit integer
            }
            return Math.abs(hash);
        }

        function checkLevelUp() {
            const passwordsCount = savedPasswordsList.length;
            const newLevel = Math.floor(passwordsCount / 5) + 1;
            
            if (newLevel > level) {
                level = newLevel;
                updateLevel();
                showNotification('LEVEL UP!', 'pink');
                
                // Play level up sound if enabled
                if (soundEnabled) {
                    playSound('levelup');
                }
            }
        }

        function updateLevel() {
            levelCount.textContent = level.toString().padStart(2, '0');
        }
    </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=intipires/pwd-gen" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=NzService/password-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>