Generatore di password di SENAPI

10263 alqsdeus

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

24 March 2025

Pannello di controllo di amministrazione di AdminHub v2.1

30 March 2025

Un codice di ytr3d3

24 August 2025

Esempio semplice di modulo di registrazione HTML

HTML

<!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");
      });
    }

Generatore di password di SENAPI

Consigliato

Pannello di controllo di amministrazione di AdminHub v2.1

Un codice di ytr3d3

Esempio semplice di modulo di registrazione HTML

HTML

CSS

JS

Consigliato

Pannello di controllo di amministrazione di AdminHub v2.1

Un codice di ytr3d3

Esempio semplice di modulo di registrazione HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS