Password Strength

<!-- Password Strength — set data-strength to 0–4 from JS as the user types -->
<div class="nuda-pw">
  <input class="nuda-pw__input" type="password" placeholder="Password" />
  <div class="nuda-pw__meter" data-strength="0">
    <span></span><span></span><span></span><span></span>
  </div>
  <span class="nuda-pw__label">Weak</span>
</div>

/* Password Strength
   Strength meter with colored segments per level (1–4).
   Customize: --pw-bg, --pw-strong, the per-level colors. */

.nuda-pw {
  --pw-strong: #e4ff54;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 240px;
}

.nuda-pw__input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fafafa;
  font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
  outline: none;
  transition: border-color 0.25s;
}

.nuda-pw__input:focus { border-color: rgba(228, 255, 84, 0.4); }

.nuda-pw__meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  height: 4px;
}

.nuda-pw__meter span {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: background 0.3s, transform 0.3s;
}

.nuda-pw__meter[data-strength="1"] span:nth-child(-n+1),
.nuda-pw__meter[data-strength="2"] span:nth-child(-n+2),
.nuda-pw__meter[data-strength="3"] span:nth-child(-n+3),
.nuda-pw__meter[data-strength="4"] span:nth-child(-n+4) { transform: scaleX(1); }

.nuda-pw__meter[data-strength="1"] span:nth-child(-n+1) { background: #ff6363; }
.nuda-pw__meter[data-strength="2"] span:nth-child(-n+2) { background: #ffae54; }
.nuda-pw__meter[data-strength="3"] span:nth-child(-n+3) {
  background: var(--pw-strong);
  box-shadow: 0 0 4px rgba(228, 255, 84, 0.3);
}
.nuda-pw__meter[data-strength="4"] span:nth-child(-n+4) {
  background: var(--pw-strong);
  box-shadow: 0 0 6px rgba(228, 255, 84, 0.5);
}

.nuda-pw__label {
  font: 600 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: var(--pw-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Password Strength — minimal scoring you can swap for zxcvbn / your rules. */

(function () {
  var input = document.querySelector('.nuda-pw__input');
  var meter = document.querySelector('.nuda-pw__meter');
  var label = document.querySelector('.nuda-pw__label');
  if (!input || !meter || !label) return;

  var labels = ['', 'Weak', 'Fair', 'Strong', 'Excellent'];

  function score(v) {
    if (!v) return 0;
    var n = 0;
    if (v.length >= 8) n++;
    if (/[A-Z]/.test(v) && /[a-z]/.test(v)) n++;
    if (/\d/.test(v)) n++;
    if (/[^A-Za-z0-9]/.test(v)) n++;
    return n;
  }

  input.addEventListener('input', function () {
    var s = score(input.value);
    meter.dataset.strength = String(s);
    label.textContent = labels[s] || '';
  });
})();