Étape 1 : Initialisation du Générateur de Mots de Passe

Nous allons créer un outil sécurisé pour générer des mots de passe robustes. Le design respectera le thème Vert Matrix (Hacker / Cybersécurité).

1. Création du dossier

Créez un dossier password-generator et les 3 fichiers habituels :

1. index.html
2. style.css
3. script.js

2. Structure HTML de base

Ouvrez index.html. Nous utiliserons une police “monospace” pour que chaque caractère du mot de passe ait la même largeur (très important pour la lisibilité).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Générateur de Mots de Passe</title>
        <!-- Police "JetBrains Mono" pour un look de développeur pro -->
        <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="style.css" />
        <!-- Icônes pour le bouton copier (FontAwesome ou SVG) -->
    </head>
    <body>
        <div class="container">
            <!-- Titre -->
            <h1 class="title">Password Gen <span class="cursor">_</span></h1>

            <!-- Zone d'affichage du résultat -->
            <div class="result-container">
                <span id="result">P4$sw0rd!</span>
                <button class="btn" id="clipboard" title="Copier">
                    <!-- SVG Copier -->
                    <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
                        ></path>
                    </svg>
                </button>
            </div>

            <!-- Suite des réglages à l'étape suivante... -->
        </div>

        <script src="script.js"></script>
    </body>
</html>

L’effet “cursor” (tiret bas) dans le titre sera animé en CSS pour clignoter comme dans un terminal.