passwordgen 9 nov 2023

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="icon" type="image/x-icon" href="key.png">
      <style>
         body {
         text-align: left;
         margin: 20px;
         }
         h1 {
         color: #3498db;
         }
         h2 {
         color: #7eb84b;
         }
         @media (min-width: 768px) {
         body {
         margin-right: 40%;
         }
         .slider-container {
         margin: 20px;
         }
         }
         @media (max-width: 767px) {
         body {
         margin: 5px;
         }
         .slider-container {
         flex-direction: column;
         }
         button {
         width: 100%;
         }
         .slider {
         width: 100%;
         }
         }
         pre {
         color: #000000;
         }
         code {
         color: #595959;
         }
         button {
         background-color: #27ae60;
         color: white;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
         }
         footer {
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         background-color: #111;
         color: white;
         text-align: left;
         padding: 2px;
         }
         .answer {
         padding-left: 15px;
         padding: 10px;
         }
         .slider-container {
         display: flex;
         align-items: center;
         margin: 20px;
         }
         .slider {
         flex: 1;
         }
         .monospaced-input {
         font-family: "Courier New", monospace;
         }
         #password {
         font-size: 20px;
         padding: 10px;
         margin: 10px;
         border: 1px solid #ccc;
         }
         .m {
         margin: 10px;
         }
         #password-strength-bar {
         height: 20px;
         width: 100%;
         margin: 10px 0;
         background-color: red;
         border-radius: 10px;
         }
      </style>
   </head>
   <body>
      <h1>Password Generator</h1>
      <div class="slider-container">
         <label for="password-length">Password length: <span id="password-length">19</span></label>
         <input type="range" min="12" max="31" value="19" class="slider" id="length-slider" />
      </div>
      <div>
         <label for="lowercase">Include lowercase:</label>
         <input type="checkbox" id="lowercase" checked />
      </div>
      <div>
         <label for="uppercase">Include uppercase:</label>
         <input type="checkbox" id="uppercase" checked />
      </div>
      <div>
         <label for="numbers">Include numbers:</label>
         <input type="checkbox" id="numbers" checked />
      </div>
      <div>
         <label for="special-chars">Include special:</label>
         <input type="checkbox" id="special-chars" checked />
      </div>
      <button onclick="generatePassword()">Generate password</button>
      <input type="text" id="password" readonly value="your password" onclick="copyToClipboard()" class="monospaced-input" />
      <div id="copiedText"></div>
usable?:
<p class="m" id="usable"></p>
password strength:
<p class="m" id="password-strength"></p>
hash equivalent (do not use) comparasion against 128 bit:
<p class="m" style="font-family: 'Courier New', monospace;" id="random-hex-string"></p>
<p class="m" style="font-family: 'Courier New', monospace;">f054bbd2f5ebab9cb5571000b2c50c02</p>

<div id="password-strength-bar"></div>
      <br>
      <textarea id="passwordlist" readonly onclick="copyAndDownload()" class="monospaced-input" rows="10" cols="30">>your password list</textarea>
      <div id="copiedList"></div>

      <br />
      <br />
      <br />
      visualization of bit calculating in an average computer in 2 minutes
              <details>
            <summary>click to see picture</summary>
      <img src="BITS_2023-11-09_13-13.png" style="width: 100%">
      </details>

          <h2>Recommendations</h2>
    <p>Creating strong passwords is essential for your online security. Follow these guidelines to help protect your accounts:</p>
    <ul>
        <li><strong>length:</strong> use passwords that are at least 12 characters long. longer passwords are more secure.</li>
        <li><strong>complexity:</strong> include a mix of upper and lower case letters, numbers, and special characters (e.g., !, @, #, $, %).</li>
        <li><strong>passphrases:</strong> consider using passphrases, which are longer combinations of words or phrases that are easy for you to remember but hard for others to guess. for example, "purpletiger$jump4joy!"</li>
        <li><strong>avoid dictionary words:</strong> do not use easily guessable words found in dictionaries or common phrases.</li>
        <li><strong>unique:</strong> create unique passwords for each account. do not reuse passwords across multiple sites.</li>
        <li><strong>two-factor authentication (2fa):</strong> enable 2fa whenever possible to add an extra layer of security.</li>
        <li><strong>password managers:</strong> use a reputable password manager to generate, store, and autofill complex and unique passwords.</li>
        <li><strong>avoid personal information:</strong> do not use easily discoverable personal information like birthdates, names of family members, or common patterns.</li>
        <li><strong>secure storage:</strong> store your passwords securely. avoid writing them down on easily accessible physical items.</li>
    </ul>

      <h2>FAQ:</h2>
      <b>why i can only choose between 12 and 31 length? </b><br>
      <div class="answer">below 12 characters is not recommended at any level that isn't for fun, it will be just reckless to do so. the >31 limit is because they will be uncompatible with some crappy websites (see tiktok with 20 character limit). other solution could be not using trash websites like tiktok. if you want a really long password, <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">click here</a>
      </div>
      <br><br>
      <b>why aren't there more options like extended ascii or unicode characters? </b><br>
      <div class="answer">
      same reason as before: they will be uncompatible with some crappy websites, so it's just stupid to include them
</div>

      <br />
      <br />
    <div style="background-color: #cfcfcf; border: 2px solid #2980b9; padding: 10px;">
        <h3>8 Nov 2023 Update</h3>
        <p>- Added a password list that you can download and copy by clicking it.<br>
        - Added favicon.<br>
        - Corrected the news board and uppercased it on accident.<br>
        - Added some more stuff.</p>

        <details>
            <summary>click to see code</summary>
            <pre><code>function copyAndDownload() {
  const passwordListTextarea = document.getElementById("passwordlist");

  const textContent = passwordListTextarea.value;

  const blob = new Blob([textContent], { type: "text/plain" });

  const url = URL.createObjectURL(blob);

  const downloadLink = document.createElement("a");
  downloadLink.href = url;
  downloadLink.download = "password_list.txt";

  downloadLink.click();

  URL.revokeObjectURL(url);
}
</code></pre>
        </details>
        <hr>

        <p>Permalink: <a href="https://pastebin.com/4Wiq8CRS">https://pastebin.com/4Wiq8CRS</a></p>
        <hr>

        <h3>5 Nov 2023 Update</h3>
        <p>Fixed a bug in generatePassword() that made the password sometimes shorter than the user's input. Also changed getRandomInt() to:</p>

        <details>
            <summary>click to see code</summary>
            <pre><code>function getRandomInt(min, max) {
  const cryptoObj = window.crypto || window.msCrypto;
  const range = max - min + 1;
  if (range <= 0) {
    throw new Error('Invalid range');
  }

  const maxMultiple = Math.floor(0xFFFFFFFF / range) * range;

  let randomValue;
  do {
    const array = new Uint32Array(1);
    cryptoObj.getRandomValues(array);
    randomValue = array[0];
  } while (randomValue >= maxMultiple);

  const bucketSize = maxMultiple / range;
  return min + Math.floor(randomValue / bucketSize);
}
</code></pre>
        </details>

        <hr>

        <h3>4 Nov 2023 Update</h3>
        <p>Added crypto randomness:</p>

        <details>
            <summary>click to see code</summary>
            <pre><code>let password = "";

for (let i = 0; i < length; i++) {
  const randomIndex = getRandomInt(0, allChars.length);
  password += allChars.charAt(randomIndex);
}

function getRandomInt(min, max) {
  const cryptoObj = window.crypto || window.msCrypto;
  const array = new Uint32Array(1);
  cryptoObj.getRandomValues(array);
  return min + (array[0] / 0xFFFFFFFF) * (max - min + 1);
}
</code></pre>
        </details>

        <hr>

        <p>Old version: <a href="https://pastebin.com/um2W0W8q">https://pastebin.com/um2W0W8q</a></p>

        <hr>

        <h3>3 Nov 2023</h3>
        <p>Made under 10 minutes! (Using ChatGPT 3.5) Still adding stuff.</p>

        <p>Second ChatGPT-3.5 conversation: <a href="https://chat.openai.com/share/44f5d06b-f855-40bb-85fb-2ae02d1aa41b">https://chat.openai.com/share/44f5d06b-f855-40bb-85fb-2ae02d1aa41b</a></p>

        <p>Original ChatGPT-3.5 conversation: <a href="https://chat.openai.com/share/bf48570d-0cbd-4d54-a763-0ade7e0c574d">https://chat.openai.com/share/bf48570d-0cbd-4d54-a763-0ade7e0c574d</a></p>

        <hr>

        <div style="display: inline-block; text-align: center; font-family: Arial, sans-serif;">
            <img src="key.webp" alt="key" style="width: 100%; max-width: 500px;">
            <div style="background-color: darkgrey; color: white; padding: 5px 10px;">
               AI generated cool art
            </div>
         </div>
    </div>
      <br>
      <br>
      <br>
      <script>
  function generateRandomHexString(bits) {
    const bytes = Math.ceil(bits / 8);
    const buffer = new Uint8Array(bytes);
    crypto.getRandomValues(buffer);
    const hexString = Array.from(buffer).map(byte => byte.toString(16).padStart(2, '0')).join('');
    return hexString.substr(0, bytes * 2);
  }
         function copyToClipboard() {
             const passwordField = document.getElementById("password");
             passwordField.select();
             document.execCommand("copy");
             const copiedText = document.getElementById("copiedText");
             copiedText.innerHTML = "Copied to clipboard!";
         }

         function copyAndDownload() {
             const passwordListTextarea = document.getElementById("passwordlist");

          const textContent = passwordListTextarea.value;

             const blob = new Blob([textContent], { type: "text/plain" });

             const url = URL.createObjectURL(blob);

             const downloadLink = document.createElement("a");
             downloadLink.href = url;
             downloadLink.download = "password_list.txt";

             downloadLink.click();

             URL.revokeObjectURL(url);
             const copiedText = document.getElementById("copiedList");
             copiedList.innerHTML = "Downloaded!";
         }

         const lengthSlider = document.getElementById("length-slider");
         const passwordLengthDisplay = document.getElementById("password-length");
         const passwordInput = document.getElementById("password");
         const passwordListInput = document.getElementById("passwordlist");
         const passwordStrength = document.getElementById("password-strength");
         const passwordStrengthBar = document.getElementById("password-strength-bar");

         const lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
         const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
         const numberChars = "0123456789";
         const specialChars = "!@#$%^&*()_+-=[]{}|;:'<>,.?/";

         lengthSlider.addEventListener("input", updatePassword);
         document.getElementById("lowercase").addEventListener("change", updatePassword);
         document.getElementById("uppercase").addEventListener("change", updatePassword);
         document.getElementById("numbers").addEventListener("change", updatePassword);
         document.getElementById("special-chars").addEventListener("change", updatePassword);

         function updatePassword() {
             const length = parseInt(lengthSlider.value);
             passwordLengthDisplay.textContent = length;
             generatePassword();
         }

         function generatePassword() {


             const length = lengthSlider.value;
             const useLowercase = document.getElementById("lowercase").checked;
             const useUppercase = document.getElementById("uppercase").checked;
             const useNumbers = document.getElementById("numbers").checked;
             const useSpecialChars = document.getElementById("special-chars").checked;

             // space is the only character by default, which is also a character (that doesn't enter in the other categories)
             const allChars = "" + (useLowercase ? "abcdefghijklmnopqrstuvwxyz" : "")+ (useUppercase ? "ABCDEFGHIJKLMNOPQRSTUVWXYZ" : "") + (useNumbers ? "0123456789" : "") + (useSpecialChars ? "!@#$%^&*()_+-=[]{}|;:'<>,.?/" : "");

             let password = "";
             while (password.length < length) {
                 const randomIndex = getRandomInt(0, allChars.length);
                 password += allChars.charAt(randomIndex);
             }

             password = password.slice(0, length);

             passwordInput.value = password;
             calculatePasswordStrength(password);

             const passwordList = [];

             for (let i = 0; i < 10; i++) {
                 let password = "";
                 while (password.length < length) {
                   const randomIndex = getRandomInt(0, allChars.length);
                   password += allChars.charAt(randomIndex);
                 }
                   passwordList.push(password);
                   console.log(passwordList)
             }
             const htmlContent = passwordList.join("\n");

             passwordListInput.value = htmlContent;
         }

         function getRandomInt(min, max) {
             const cryptoObj = window.crypto || window.msCrypto;
             const range = max - min + 1;
             if (range <= 0) {
                 throw new Error("Invalid range");
             }

             const maxMultiple = Math.floor(0xffffffff / range) * range;

             let randomValue;
             do {
                 const array = new Uint32Array(1);
                 cryptoObj.getRandomValues(array);
                 randomValue = array[0];
             } while (randomValue >= maxMultiple);

             const bucketSize = maxMultiple / range;
             return min + Math.floor(randomValue / bucketSize);
         }

         function calculatePasswordStrength(password) {
             const minBits = 0;
             const maxBits = 200;
             const charsetSize = calculateCharsetSize();
             const passwordBits = Math.log2(Math.pow(charsetSize, password.length));
             passwordStrength.textContent = `${passwordBits.toFixed(2)} bits`;
             updatePasswordStrengthBar(passwordBits, minBits, maxBits);


             let usable = ""
             let color = "red"
             if (passwordBits < 60) {
               usable = "NO! DO NOT USE THIS PASSWORD. THIS IS ONLY FOR DEMONSTRATIONAL PURPOSES"
             } else if (passwordBits < 80) {
               usable = "Maybe. It's crackable in a lifetime, but it will last at least some years. Better if it isn't in the hands of a powerful computer."
               color = "#dbc72e"
             } else if (passwordBits < 128) {
               usable = "Yes! This password is absolutely secure. It will only fail if everyone in the world is trying to crack it."
               color = "green"
             } else {
               usable = "Yes! Even if it's in the hands of many supercomputers!"
               color = "#00470b"

             }
            const use = document.getElementById('usable');
            use.textContent = `${usable}`;
            use.style.color = color;
            const randomHexString = generateRandomHexString(passwordBits);

            const randomHexStringElement = document.getElementById('random-hex-string');
            randomHexStringElement.textContent = `${randomHexString}`;

         }

         function calculateCharsetSize() {
           const useLowercase = document.getElementById("lowercase").checked;
             const useUppercase = document.getElementById("uppercase").checked;
             const useNumbers = document.getElementById("numbers").checked;
             const useSpecialChars = document.getElementById("special-chars").checked;

             let charsetSize = 0;
             if (useLowercase) charsetSize += lowercaseChars.length;
             if (useUppercase) charsetSize += uppercaseChars.length;
             if (useNumbers) charsetSize += numberChars.length;
             if (useSpecialChars) charsetSize += specialChars.length;

             return charsetSize;
         }

         function updatePasswordStrengthBar(passwordBits, minBits, maxBits) {
             const clampedBits = Math.min(Math.max(passwordBits, minBits), maxBits);
             const strengthPercentage = ((clampedBits - minBits) / (maxBits - minBits)) * 100;
             let strengthColor;

             if (strengthPercentage < 30) {
                 strengthColor = "red";
             } else if (strengthPercentage < 40) {
                 strengthColor = "#dbc72e";
             } else {
                 strengthColor = "green";
             }

             passwordStrengthBar.style.backgroundColor = strengthColor;
             passwordStrengthBar.style.width = `${strengthPercentage}%`;
         }

         updatePasswordStrengthBar(0, 0, 200);

         generatePassword();
      </script>
   </body>
   <footer>
      <p>This work is in the public domain.</p>
   </footer>
</html>