SENAPI द्वारा पासवर्ड जनरेटर

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

24 May 2025

क्यूआर कोड जनरेटर एचटीएमएल, जावास्क्रिप्ट

18 May 2025

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

SENAPI द्वारा पासवर्ड जनरेटर

अनुशंसित

testingai द्वारा एक कोड

क्यूआर कोड जनरेटर एचटीएमएल, जावास्क्रिप्ट

BENE द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

testingai द्वारा एक कोड

क्यूआर कोड जनरेटर एचटीएमएल, जावास्क्रिप्ट

BENE द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS