Password Generator

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="fr" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Générateur de Mot de Passe Sécurisé</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        .dark {
            --bg-main: #111827;
            --bg-card: #1f2937;
            --text: #f3f4f6;
            --text-muted: #9ca3af;
            --border: #374151;
        }
        
        .light {
            --bg-main: #f3f4f6;
            --bg-card: #ffffff;
            --text: #1f2937;
            --text-muted: #6b7280;
            --border: #e5e7eb;
        }
        
        .glassmorphism {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
        }
        
        .custom-range {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            outline: none;
            transition: var(--transition);
        }
        
        .custom-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .custom-range::-webkit-slider-thumb:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }
        
        .checkbox-container {
            position: relative;
            display: flex;
            align-items: center;
            margin: 8px 0;
        }
        
        .custom-checkbox {
            appearance: none;
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 4px;
            margin-right: 10px;
            position: relative;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .custom-checkbox:checked::before {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            font-weight: bold;
        }
        
        .copy-btn {
            transition: var(--transition);
        }
        
        .copy-btn:hover {
            transform: scale(1.05);
        }
        
        .generate-btn {
            transition: var(--transition);
        }
        
        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
        }
        
        .password-display {
            transition: var(--transition);
            word-wrap: break-word;
            overflow-wrap: break-word;
            font-family: monospace;
        }
        
        .strength-bar {
            height: 8px;
            border-radius: 4px;
            transition: width 0.5s ease;
        }
        
        .shake {
            animation: shake 0.5s ease-in-out;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .scale-in {
            animation: scaleIn 0.3s ease-in-out;
        }
        
        @keyframes scaleIn {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        
        .copy-animation {
            animation: copyAnim 0.6s ease-in-out;
        }
        
        @keyframes copyAnim {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .theme-switch {
            transition: var(--transition);
        }
        
        .theme-switch:hover {
            transform: rotate(30deg);
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
    <div id="app" class="w-full max-w-md mx-auto glassmorphism rounded-2xl overflow-hidden p-6 dark:bg-gray-800 light:bg-white transition-all duration-300">
        <header class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-indigo-500">
                <i class="fas fa-key mr-2"></i>Générateur de Mot de Passe
            </h1>
            <button id="themeToggle" class="theme-switch p-2 rounded-full bg-gray-700 dark:bg-gray-700 light:bg-gray-200 text-yellow-400">
                <i id="themeIcon" class="fas fa-moon"></i>
            </button>
        </header>
        
        <main class="space-y-6">
            
            <div class="bg-gray-700 dark:bg-gray-700 light:bg-gray-100 rounded-lg p-4 relative fade-in">
                <pre id="passwordOutput" class="password-display text-lg font-medium break-all dark:text-gray-100 light:text-gray-800 min-h-[40px] flex items-center">Votre mot de passe apparaîtra ici</pre>
                <button id="copyBtn" class="copy-btn absolute right-3 top-3 text-indigo-400 hover:text-indigo-300 p-1" title="Copier">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
            
            
            <div>
                <div class="flex justify-between mb-1">
                    <span class="text-sm dark:text-gray-300 light:text-gray-600">Force du mot de passe:</span>
                    <span id="strengthText" class="text-sm font-medium">Aucun</span>
                </div>
                <div class="bg-gray-700 dark:bg-gray-700 light:bg-gray-200 rounded-full h-2 overflow-hidden">
                    <div id="strengthBar" class="strength-bar w-0 h-full bg-red-500 transition-all duration-500"></div>
                </div>
            </div>
            
            
            <div>
                <div class="flex justify-between mb-2">
                    <label for="lengthSlider" class="text-sm font-medium dark:text-gray-300 light:text-gray-600">Longueur:</label>
                    <span id="lengthValue" class="text-sm font-semibold text-indigo-400">12</span>
                </div>
                <input 
                    type="range" 
                    id="lengthSlider" 
                    min="6" 
                    max="64" 
                    value="12" 
                    class="custom-range w-full dark:bg-gray-700 light:bg-gray-200 dark:focus:bg-gray-600 light:focus:bg-gray-300"
                >
            </div>
            
            
            <div class="space-y-2">
                <h3 class="text-md font-medium dark:text-gray-300 light:text-gray-600 mb-2">Options</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="checkbox-container">
                        <input type="checkbox" id="upperCase" class="custom-checkbox dark:bg-gray-700 light:bg-gray-200 dark:border-gray-600 light:border-gray-300 dark:checked:bg-indigo-500 light:checked:bg-indigo-500" checked>
                        <label for="upperCase" class="text-sm dark:text-gray-300 light:text-gray-600">Majuscules (A-Z)</label>
                    </div>
                    <div class="checkbox-container">
                        <input type="checkbox" id="lowerCase" class="custom-checkbox dark:bg-gray-700 light:bg-gray-200 dark:border-gray-600 light:border-gray-300 dark:checked:bg-indigo-500 light:checked:bg-indigo-500" checked>
                        <label for="lowerCase" class="text-sm dark:text-gray-300 light:text-gray-600">Minuscules (a-z)</label>
                    </div>
                    <div class="checkbox-container">
                        <input type="checkbox" id="numbers" class="custom-checkbox dark:bg-gray-700 light:bg-gray-200 dark:border-gray-600 light:border-gray-300 dark:checked:bg-indigo-500 light:checked:bg-indigo-500" checked>
                        <label for="numbers" class="text-sm dark:text-gray-300 light:text-gray-600">Chiffres (0-9)</label>
                    </div>
                    <div class="checkbox-container">
                        <input type="checkbox" id="symbols" class="custom-checkbox dark:bg-gray-700 light:bg-gray-200 dark:border-gray-600 light:border-gray-300 dark:checked:bg-indigo-500 light:checked:bg-indigo-500" checked>
                        <label for="symbols" class="text-sm dark:text-gray-300 light:text-gray-600">Caractères spéciaux (!@#$)</label>
                    </div>
                </div>
            </div>
            
            
            <button id="generateBtn" class="generate-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 flex items-center justify-center">
                <i class="fas fa-bolt mr-2"></i>
                Générer un mot de passe
            </button>
            
            
            <div class="bg-gray-700 dark:bg-gray-700 light:bg-gray-100 rounded-lg p-4 text-sm dark:text-gray-300 light:text-gray-600">
                <h3 class="font-medium mb-1 text-indigo-400"><i class="fas fa-info-circle mr-1"></i> Conseils de sécurité:</h3>
                <ul class="list-disc list-inside space-y-1 ml-1">
                    <li>Utilisez au moins 12 caractères pour plus de sécurité</li>
                    <li>Combinez différents types de caractères</li>
                    <li>Évitez d'utiliser des informations personnelles</li>
                    <li>Utilisez un gestionnaire de mots de passe</li>
                </ul>
            </div>
        </main>
    </div>
    
    <footer class="mt-6 text-sm text-gray-500 text-center">
        <p>© 2023 Générateur de Mot de Passe Sécurisé</p>
    </footer>
    
    <script>
        // DOM Elements
        const app = document.getElementById('app');
        const themeToggle = document.getElementById('themeToggle');
        const themeIcon = document.getElementById('themeIcon');
        const lengthSlider = document.getElementById('lengthSlider');
        const lengthValue = document.getElementById('lengthValue');
        const generateBtn = document.getElementById('generateBtn');
        const passwordOutput = document.getElementById('passwordOutput');
        const copyBtn = document.getElementById('copyBtn');
        const upperCaseCheckbox = document.getElementById('upperCase');
        const lowerCaseCheckbox = document.getElementById('lowerCase');
        const numbersCheckbox = document.getElementById('numbers');
        const symbolsCheckbox = document.getElementById('symbols');
        const strengthBar = document.getElementById('strengthBar');
        const strengthText = document.getElementById('strengthText');
        
        // Set initial theme based on user preference
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
            toggleTheme();
        }
        
        // Character sets
        const charSets = {
            upperCase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
            lowerCase: 'abcdefghijklmnopqrstuvwxyz',
            numbers: '0123456789',
            symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?/~'
        };
        
        // Update length value display
        lengthSlider.addEventListener('input', () => {
            lengthValue.textContent = lengthSlider.value;
        });
        
        // Toggle theme
        themeToggle.addEventListener('click', toggleTheme);
        
        function toggleTheme() {
            document.documentElement.classList.toggle('light');
            document.documentElement.classList.toggle('dark');
            
            if (document.documentElement.classList.contains('light')) {
                themeIcon.className = 'fas fa-sun';
                app.classList.add('light:bg-white');
                app.classList.remove('dark:bg-gray-800');
                document.body.classList.add('bg-gray-100', 'text-gray-900');
                document.body.classList.remove('bg-gray-900', 'text-gray-100');
            } else {
                themeIcon.className = 'fas fa-moon';
                app.classList.add('dark:bg-gray-800');
                app.classList.remove('light:bg-white');
                document.body.classList.add('bg-gray-900', 'text-gray-100');
                document.body.classList.remove('bg-gray-100', 'text-gray-900');
            }
        }
        
        // Generate password
        generateBtn.addEventListener('click', generatePassword);
        
        function generatePassword() {
            const length = parseInt(lengthSlider.value);
            let charset = '';
            let password = '';
            
            // At least one option must be selected
            if (!upperCaseCheckbox.checked && 
                !lowerCaseCheckbox.checked && 
                !numbersCheckbox.checked && 
                !symbolsCheckbox.checked) {
                
                // Visual feedback for error
                passwordOutput.textContent = 'Veuillez sélectionner au moins une option';
                passwordOutput.classList.add('shake', 'text-red-500');
                
                setTimeout(() => {
                    passwordOutput.classList.remove('shake', 'text-red-500');
                }, 500);
                
                return;
            }
            
            // Build character set based on options
            if (upperCaseCheckbox.checked) charset += charSets.upperCase;
            if (lowerCaseCheckbox.checked) charset += charSets.lowerCase;
            if (numbersCheckbox.checked) charset += charSets.numbers;
            if (symbolsCheckbox.checked) charset += charSets.symbols;
            
            // Generate the password
            const categories = {
                upperCase: false,
                lowerCase: false,
                numbers: false,
                symbols: false
            };
            
            // Ensure at least one character from each selected category
            if (upperCaseCheckbox.checked) {
                password += charSets.upperCase.charAt(Math.floor(Math.random() * charSets.upperCase.length));
                categories.upperCase = true;
            }
            if (lowerCaseCheckbox.checked) {
                password += charSets.lowerCase.charAt(Math.floor(Math.random() * charSets.lowerCase.length));
                categories.lowerCase = true;
            }
            if (numbersCheckbox.checked) {
                password += charSets.numbers.charAt(Math.floor(Math.random() * charSets.numbers.length));
                categories.numbers = true;
            }
            if (symbolsCheckbox.checked) {
                password += charSets.symbols.charAt(Math.floor(Math.random() * charSets.symbols.length));
                categories.symbols = true;
            }
            
            // Fill the rest of the password length
            for (let i = password.length; i < length; i++) {
                password += charset.charAt(Math.floor(Math.random() * charset.length));
            }
            
            // Shuffle the password to avoid predictable patterns
            password = shuffleString(password);
            
            // Display with animation
            passwordOutput.classList.add('scale-in');
            passwordOutput.textContent = password;
            
            setTimeout(() => {
                passwordOutput.classList.remove('scale-in');
            }, 300);
            
            // Update strength indicator
            updateStrengthIndicator(password);
        }
        
        // Fisher-Yates shuffle algorithm
        function shuffleString(string) {
            const array = string.split('');
            
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            
            return array.join('');
        }
        
        // Copy to clipboard
        copyBtn.addEventListener('click', copyToClipboard);
        
        function copyToClipboard() {
            const password = passwordOutput.textContent;
            
            if (password === 'Votre mot de passe apparaîtra ici' || 
                password === 'Veuillez sélectionner au moins une option') {
                return;
            }
            
            navigator.clipboard.writeText(password).then(() => {
                // Visual feedback
                copyBtn.innerHTML = '<i class="fas fa-check"></i>';
                copyBtn.classList.add('text-green-500', 'copy-animation');
                
                setTimeout(() => {
                    copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
                    copyBtn.classList.remove('text-green-500', 'copy-animation');
                }, 1500);
            });
        }
        
        // Update strength indicator
        function updateStrengthIndicator(password) {
            // Calculate strength based on multiple factors
            let score = 0;
            const length = password.length;
            
            // Length score (max 40 points)
            if (length >= 8) score += 10;
            if (length >= 12) score += 10;
            if (length >= 16) score += 10;
            if (length >= 20) score += 10;
            
            // Character variety score (max 40 points)
            if (/[A-Z]/.test(password)) score += 10;
            if (/[a-z]/.test(password)) score += 10;
            if (/[0-9]/.test(password)) score += 10;
            if (/[^A-Za-z0-9]/.test(password)) score += 10;
            
            // Complexity score (max 20 points)
            if (/(.)\1{2,}/.test(password)) score -= 10; // Penalize repeating characters
            if (/[A-Za-z0-9]{3,}/.test(password)) score += 5; // Reward for alphanumeric sequences
            if (/[^A-Za-z0-9]{2,}/.test(password)) score += 5; // Reward for symbol sequences
            if (length > 24) score += 10; // Extra bonus for very long passwords
            
            // Clamp score between 0 and 100
            score = Math.max(0, Math.min(100, score));
            
            // Update UI based on score
            let strengthColor, strengthDescription;
            
            if (score < 30) {
                strengthColor = 'bg-red-500';
                strengthDescription = 'Très faible';
                strengthText.className = 'text-sm font-medium text-red-500';
            } else if (score < 50) {
                strengthColor = 'bg-orange-500';
                strengthDescription = 'Faible';
                strengthText.className = 'text-sm font-medium text-orange-500';
            } else if (score < 70) {
                strengthColor = 'bg-yellow-500';
                strengthDescription = 'Moyen';
                strengthText.className = 'text-sm font-medium text-yellow-500';
            } else if (score < 90) {
                strengthColor = 'bg-green-500';
                strengthDescription = 'Fort';
                strengthText.className = 'text-sm font-medium text-green-500';
            } else {
                strengthColor = 'bg-indigo-500';
                strengthDescription = 'Très fort';
                strengthText.className = 'text-sm font-medium text-indigo-500';
            }
            
            // Apply changes
            strengthBar.className = `strength-bar h-full ${strengthColor}`;
            strengthBar.style.width = `${score}%`;
            strengthText.textContent = strengthDescription;
        }
        
        // Generate a password on page load
        window.addEventListener('DOMContentLoaded', generatePassword);
        
        // Check for empty selections
        [upperCaseCheckbox, lowerCaseCheckbox, numbersCheckbox, symbolsCheckbox].forEach(checkbox => {
            checkbox.addEventListener('change', () => {
                const anyChecked = upperCaseCheckbox.checked || 
                                   lowerCaseCheckbox.checked || 
                                   numbersCheckbox.checked || 
                                   symbolsCheckbox.checked;
                
                if (!anyChecked) {
                    checkbox.checked = true;
                    
                    checkbox.classList.add('shake');
                    setTimeout(() => {
                        checkbox.classList.remove('shake');
                    }, 500);
                }
            });
        });
    </script>
</body>
</html>

Password Generator

Recommended

HTML Login Form with Password Toggle

Password generator

Flickr Letter Art Generator (Spell with Photos)

HTML

CSS

JS

Recommended

HTML Login Form with Password Toggle

Password generator

Flickr Letter Art Generator (Spell with Photos)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS