Generatore di password di SENAPI

10266 alqsdeus

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

9 November 2024

Modello di sito Web del prodotto HTML

5 February 2025

pagina di accesso futuristica moderna

10 March 2025

Barra di navigazione reattiva premium

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

Modello di sito Web del prodotto HTML

pagina di accesso futuristica moderna

Barra di navigazione reattiva premium

HTML

CSS

JS

Consigliato

Modello di sito Web del prodotto HTML

pagina di accesso futuristica moderna

Barra di navigazione reattiva premium

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS