Generador de contraseñas de SENAPI

10261 alqsdeus

Abrir en el editor Video Publica tu código

Recomendado

23 May 2025

Menú de hamburguesa de inicio de sesión en 3D

6 November 2024

Un sitio web donde puedes reproducir canciones.

6 June 2025

Un código del texto

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

Generador de contraseñas de SENAPI

Recomendado

Menú de hamburguesa de inicio de sesión en 3D

Un sitio web donde puedes reproducir canciones.

Un código del texto

HTML

CSS

JS

Recomendado

Menú de hamburguesa de inicio de sesión en 3D

Un sitio web donde puedes reproducir canciones.

Un código del texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS