PASSWORD GENERATOR

Password Generator

1. မိမိ site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages ကိုနှိပ်
3. ➕ New Page (or) ➕ အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်ပါ </> HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က ပေးထားတဲ့ Design code တွေကို copy ယူ၍ကူးထည့်
6. save ကိုနှိပ်ပြီးပါပြီ

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

box {
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.password-generator-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 24px;
  font-size: 32px;
}

.password-display {
  background-color: #f7f7f7;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.password-text {
  font-family: monospace;
  font-size: 18px;
  color: #333;
}

.copy-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.copy-btn svg {
  width: 20px;
  height: 20px;
}

.strength-text {
  text-align: right;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
}

.strength-meter {
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  margin-bottom: 25px;
}

.strength-meter-fill {
  height: 100%;
  width: 30%;
  border-radius: 5px;
  background: green;
}

.password-options {
  margin-bottom: 25px;
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.option-item label {
  font-size: 16px;
  color: #555;
}

.length-value {
  font-weight: bold;
  color: #333;
}

input[type="range"] {
  width: 100%;
  margin: 10px 0;
  height: 6px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
  border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #003049;
  cursor: pointer;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #003049;
  cursor: pointer;
}

.generate-btn {
  width: 100%;
  padding: 15px;
  background-color: #003049;
  color: #fff;
  border-radius: 6px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.generate-btn:hover {
  background-color: #001520;
}

.tooltip {
  position: absolute;
  right: 0;
  background-color: #333;
  padding: 5px 10px;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  bottom: 110%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip.visible {
  opacity: 1;
}
</style>

    <div class="password-generator-container">
      <h1>Password Generator</h1>

      <div class="password-display">
        <span class="password-text">SQ0||tSg6@MF</span>
        <button class="copy-btn">
          <svg class="size-6" fill="none" stroke-width="1.5" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" stroke-linecap="round" stroke-linejoin="round">
          </path></svg>

          <span class="tooltip">Copied!</span>
        </button>
      </div>

      <div class="strength-text">Strength: Strong</div>
      <div class="strength-meter">
        <div class="strength-meter-fill" id="strengthMeter"></div>
      </div>

      <div class="password-options">
        <div class="option-item">
          <label>Password Length: </label>
          <span class="length-value" id="lengthValue">12</span>
        </div>

        <input id="lengthSlider" max="32" type="range" value="12" />

        <div class="option-item">
          <label>Include Uppercase</label>
          <input checked="" id="uppercaseCheck" type="checkbox" />
        </div>

        <div class="option-item">
          <label>Include Lowercase</label>
          <input checked="" id="lowercaseCheck" type="checkbox" />
        </div>

        <div class="option-item">
          <label>Include Numbers</label>
          <input checked="" id="numbersCheck" type="checkbox" />
        </div>

        <div class="option-item">
          <label>Include Symbols</label>
          <input checked="" id="symbolsCheck" type="checkbox" />
        </div>
      </div>

      <button class="generate-btn">Generate Password</button>
    </div>

<script>
const lengthSlider = document.getElementById("lengthSlider");
const lengthValue = document.getElementById("lengthValue");
const checkboxes = document.querySelectorAll(
  ".password-options input[type='checkbox']"
);
const generateBtn = document.querySelector(".generate-btn");
const passwordOutput = document.querySelector(".password-text");
const strengthMeter = document.getElementById("strengthMeter");
const strengthText = document.querySelector(".strength-text");
const tooltip = document.querySelector(".tooltip");
const copyBtn = document.querySelector(".copy-btn");

const charSets = {
  uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  lowercase: "abcdefghijklmnopqrstuvwxyz",
  numbers: "0123456789",
  symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?",
};

lengthSlider.addEventListener("input", () => {
  lengthValue.textContent = lengthSlider.value;
});

const generatePassword = () => {
  const length = parseInt(lengthSlider.value);

  const selectedSets = [...checkboxes]
    .filter((c) => c.checked)
    .map((c) => charSets[c.id.replace("Check", "")]);

  if (!selectedSets.length) {
    alert("Please select at least one character type.");
    return;
  }

  let password = selectedSets
    .map((set) => set[Math.floor(Math.random() * set.length)])
    .join("");

  const allChars = selectedSets.join("");

  for (let i = password.length; i < length; i++) {
    password += allChars[Math.floor(Math.random() * allChars.length)];
  }

  password = password
    .split("")
    .sort(() => 0.5 - Math.random())
    .join("");

  passwordOutput.textContent = password;
  calculateStrength(password);
};

const calculateStrength = (password) => {
  let strength = 0;
  const length = password.length;

  if (length >= 8) strength += 1;
  if (length >= 12) strength += 2;
  if (length >= 16) strength += 2;

  const hasUpper = /[A-Z]/.test(password);
  const hasLower = /[a-z]/.test(password);
  const hasNumber = /[0-9]/.test(password);
  const hasSymbol = /[^A-Za-z0-9]/.test(password);

  const variety = hasUpper + hasLower + hasNumber + hasSymbol;

  console.log("Variety: ", variety);

  strength += variety;

  if (length < 6) strength = 1;
  if (length < 8 && variety < 3) strength = 2;

  const strengthPercentage = Math.min((strength / 8) * 100, 100);

  let color, strengthLabel;
  if (strengthPercentage <= 20) {
    strengthLabel = "Very Weak";
    color = "#ff4757";
  } else if (strengthPercentage <= 40) {
    strengthLabel = "Weak";
    color = "#ffa502";
  } else if (strengthPercentage <= 70) {
    strengthLabel = "Moderate";
    color = "#26de81";
  } else {
    strengthLabel = "Strong";
    color = "#0bbe65";
  }

  strengthMeter.style.width = `${strengthPercentage}%`;
  strengthMeter.style.backgroundColor = color;
  strengthText.textContent = `Strength: ${strengthLabel}`;

  console.log("Strength: ", strength);
  console.log("Strength percentage: ", strengthPercentage);
};

generatePassword();

generateBtn.addEventListener("click", generatePassword);

copyBtn.addEventListener("click", () => {
  navigator.clipboard.writeText(passwordOutput.textContent).then(() => {
    tooltip.classList.add("visible");
    setTimeout(() => {
      tooltip.classList.remove("visible");
    }, 2000);
  });
});
</script>