Webleb - HTML UI Elements - Passwortgenerator

<!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>

Validating your code, please wait...

HTML

CSS