Générateur de mots de passe Roblox : sécurisé et aléatoire en ligne

1,017 iroger7

Ouvrir dans l'éditeur Publiez votre code

Générateur de mots de passe Roblox : sécurisé et aléatoire en ligne

Recommandé

28 January 2024

Code CSS pour cartes animées

19 November 2025

Modèle de tableau de bord d'administration HTML avec CSS et graphiques

14 September 2024

Animation de la ligne de fréquence cardiaque

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Roblox-Style Password Generator</title>
  <style>
    body {
      background: #f6f8fc;
      font-family: 'Segoe UI', Arial, sans-serif;
      display: flex;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
    }
    .container {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(44,62,80,0.12);
      padding: 36px 30px;
      max-width: 420px;
      width: 100%;
      text-align: center;
    }
    h2 {
      color: #1a2233;
      margin-bottom: 18px;
      letter-spacing: .02em;
    }
    label {
      display: block;
      margin: 14px 0 5px 0;
      color: #444;
      font-size: 1.02em;
    }
    input, select {
      padding: 7px 10px;
      border: 1px solid #c9d8e5;
      border-radius: 6px;
      font-size: 1em;
      margin-bottom: 10px;
      width: 60px;
      text-align: center;
    }
    button {
      margin-top: 22px;
      padding: 12px 28px;
      background: #1976d2;
      color: #fff;
      border: none;
      border-radius: 7px;
      font-size: 1.1em;
      cursor: pointer;
      letter-spacing: .02em;
      transition: background 0.2s;
    }
    button:hover {
      background: #125ea2;
    }
    .password-box {
      margin: 30px 0 10px;
      font-size: 1.32em;
      color: #1976d2;
      background: #f2f6ff;
      padding: 15px;
      border-radius: 7px;
      word-break: break-all;
      font-family: 'Fira Mono', 'Consolas', monospace;
      min-height: 38px;
      box-shadow: 0 2px 8px rgba(25,118,210,0.05);
      letter-spacing: 0.04em;
    }
    .small {
      font-size: 0.98em;
      color: #888;
      margin-bottom: -7px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Roblox-Style Password Generator</h2>
    <div class="small">Word + Special Character + Numbers  <b></b></div>
    <form id="form" onsubmit="generatePassword(); return false;">
      <label>
        Numbers Length:
        <input type="number" id="numCount" min="3" max="8" value="6"/>
      </label>
      <label>
        Special Character:
        <select id="specialChar">
          <option value="!">!</option>
          <option value="@">@</option>
          <option value="#">#</option>
          <option value="$">$</option>
          <option value="%">%</option>
          <option value="*">*</option>
          <option value="?">?</option>
        </select>
      </label>
      <button type="submit">Generate Password</button>
    </form>
    <div class="password-box" id="result"></div>
  </div>
  <script>
    // Simple word list; expand for more variety
    const WORD_LIST = [
      "sun", "cloud", "happy", "yellow", "music", "tiger", "star", "ocean",
      "dream", "peach", "green", "silver", "mountain", "sunshine", "castle",
      "orange", "moon", "robot", "light", "shadow", "water", "leaf", "falcon",
      "rocket", "island", "smile", "rain", "comet", "banana", "coffee",
      "storm", "puzzle", "whale", "panda", "violet", "crystal", "parrot",
      "planet", "pearl", "flame", "magic", "velvet", "cookie", "maple",
      "twig", "pebble", "swan", "forest", "jungle", "fox", "river", "lake",
      "pilot", "frost", "ember", "stone", "raven", "quartz", "mint", "coral"
    ];

function capitalize(word) {
      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
    }

function getRandomWord() {
      return capitalize(WORD_LIST[Math.floor(Math.random() * WORD_LIST.length)]);
    }

function getRandomNumbers(len) {
      let nums = "";
      for (let i = 0; i < len; i++) {
        nums += Math.floor(Math.random() * 10);
      }
      return nums;
    }

function generatePassword() {
      const numCount = Math.max(3, Math.min(8, parseInt(document.getElementById('numCount').value) || 6));
      const specialChar = document.getElementById('specialChar').value;

const word = getRandomWord();
      const numbers = getRandomNumbers(numCount);

const password = word + specialChar + numbers;
      document.getElementById('result').textContent = password;
    }

// Auto-generate on page load
    window.onload = generatePassword;
  </script>
</body>
</html>

CSS