Générateur de mots de passe par SENAPI

Ouvrir dans l'éditeur Publiez votre code

Recommandé

6 August 2025

Modèle HTML de site Web de salle de sport

10 August 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>password gens</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Fredoka One', sans-serif;
    }

body {
      background: #0d0d0d;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
      min-height: 100vh;
    }

.header {
      font-size: 28px;
      color: #b6fcd5;
      margin-bottom: 20px;
      text-align: center;
    }

.info-box {
      background-color: rgba(0, 0, 0, 0.65);
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(0, 255, 128, 0.2);
      backdrop-filter: blur(12px);
      margin-bottom: 20px;
      width: 100%;
      max-width: 600px;
      text-align: center;
      color: rgba(255, 255, 255, 0.7);
    }

.generator-box {
      background-color: rgba(0, 0, 0, 0.65);
      padding: 24px;
      border-radius: 20px;
      border: 1px solid rgba(0, 255, 128, 0.2);
      box-shadow: 0 0 12px rgba(0, 255, 128, 0.1);
      backdrop-filter: blur(12px);
      width: 100%;
      max-width: 600px;
    }

.input-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
    }

.input-group label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(0, 255, 128, 0.2);
      padding: 10px;
      border-radius: 10px;
      font-size: 14px;
    }

input[type="range"] {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      background: rgba(0, 255, 128, 0.1);
      border-radius: 8px;
      outline: none;
      margin-top: 8px;
    }

input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      background: #00ff80;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 8px rgba(0,255,128,0.6);
    }

.text-input {
      padding: 10px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(0, 255, 128, 0.2);
      color: white;
      width: 100%;
    }

.generate-button {
      width: 100%;
      background-color: rgba(0, 255, 128, 0.25);
      border: 1px solid rgba(0, 255, 128, 0.4);
      color: white;
      font-size: 16px;
      padding: 12px;
      border-radius: 12px;
      cursor: pointer;
      transition: 0.3s;
    }

.generate-button:hover {
      background-color: rgba(0, 255, 128, 0.5);
    }

.output-box {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }

.output-box input {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.05);
      color: white;
      border: 1px solid rgba(0, 255, 128, 0.15);
    }

.copy-button {
      background-color: rgba(0, 255, 128, 0.3);
      border: none;
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      color: white;
    }

.copy-button:hover {
      background-color: rgba(0, 255, 128, 0.5);
    }

.message {
      margin-top: 15px;
      text-align: center;
      font-size: 14px;
      border-radius: 12px;
      padding: 10px;
      display: none;
    }

.message.success {
      background-color: rgba(0, 255, 128, 0.2);
      color: #00ff80;
      border: 1px solid rgba(0, 255, 128, 0.3);
    }

.message.error {
      background-color: rgba(255, 0, 0, 0.15);
      color: #ff4d4d;
      border: 1px solid rgba(255, 0, 0, 0.3);
    }
  </style>
</head>
<body>
  <h1 class="header"><i class="fas fa-lock"></i> Password Generator</h1>

<div class="info-box">
    Generate a secure password and optionally include your name or a keyword. You can also create an easy-to-remember password!
  </div>

<div class="input-group">
      <label><input type="checkbox" id="includeUppercase"> Include Uppercase <i class="fas fa-font"></i></label>
      <label><input type="checkbox" id="includeNumbers"> Include Numbers <i class="fas fa-hashtag"></i></label>
      <label><input type="checkbox" id="includeSymbols"> Include Symbols <i class="fas fa-asterisk"></i></label>
      <label><input type="checkbox" id="easyMode"> Easy to Remember <i class="fas fa-lightbulb"></i></label>
    </div>

<div class="input-group">
      <label>Password Length: <span id="lengthValue">12</span></label>
      <input type="range" id="length" min="6" max="30" value="12">
    </div>

<button class="generate-button" onclick="generatePassword()">
      <i class="fas fa-magic"></i> Generate Password
    </button>

lengthSlider.addEventListener("input", () => {
      lengthValue.textContent = lengthSlider.value;
    });

function generatePassword() {
      const includeUppercase = document.getElementById("includeUppercase").checked;
      const includeNumbers = document.getElementById("includeNumbers").checked;
      const includeSymbols = document.getElementById("includeSymbols").checked;
      const easyMode = document.getElementById("easyMode").checked;
      const length = parseInt(lengthSlider.value);
      const customWord = document.getElementById("customWord").value.trim();

if (easyMode) {
        const words = ["blue", "car", "tree", "pizza", "sky", "lunar", "code", "star", "games"];
        const word1 = customWord || words[Math.floor(Math.random() * words.length)];
        const word2 = words[Math.floor(Math.random() * words.length)];
        const number = Math.floor(Math.random() * 10000);
        output.value = word1 + number + word2;
        showNotification("Easy password generated!", "success");
        return;
      }

let charset = "abcdefghijklmnopqrstuvwxyz";
      if (includeUppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      if (includeNumbers) charset += "0123456789";
      if (includeSymbols) charset += "!@#$%^&*()_+-=[]{}|;:,.<>?";

if (!includeUppercase && !includeNumbers && !includeSymbols) {
        showNotification("Select at least one option!", "error");
        return;
      }

let password = "";
      let randomPartLength = length - customWord.length;
      for (let i = 0; i < randomPartLength; i++) {
        password += charset.charAt(Math.floor(Math.random() * charset.length));
      }

const insertAt = Math.floor(Math.random() * (password.length + 1));
      const finalPassword = password.slice(0, insertAt) + customWord + password.slice(insertAt);

output.value = finalPassword;
      showNotification("Password generated successfully!", "success");
    }

function copyPassword() {
      if (output.value.trim() === "") {
        showNotification("Nothing to copy!", "error");
        return;
      }

navigator.clipboard.writeText(output.value).then(() => {
        showNotification("Password copied to clipboard!", "success");
      });
    }

Générateur de mots de passe par SENAPI

Recommandé

Modèle HTML de site Web de salle de sport

Filtre de galerie

Carte membres de l'équipe CSS

HTML

CSS

JS

Recommandé

Modèle HTML de site Web de salle de sport

Filtre de galerie

Carte membres de l'équipe CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS