Password Strength Meters

<input type="password" class="uk-pw-input" value="MySecret123!">
<div class="uk-pw-bar-wrap">
    <div class="uk-pw-bar" style="width: 100%; background: #10b981;"></div>
</div>
<div class="uk-pw-text" style="color: #10b981;">Strong password</div>

<style>
    .uk-pw-input {
        width: 100%; padding: 0.6rem 0.875rem; border: 1px solid #cbd5e1;
        border-radius: 0.5rem; outline: none; margin-bottom: 0.5rem;
    }
    .uk-pw-input:focus { border-color: #1e3a8a; }
    .uk-pw-bar-wrap {
        height: 6px; background: #e2e8f0; border-radius: 99px;
        overflow: hidden; margin-bottom: 0.4rem;
    }
    .uk-pw-bar { height: 100%; border-radius: 99px; transition: width 0.3s; }
    .uk-pw-text { font-size: 0.75rem; font-weight: 600; }
</style>

<input type="password" class="uk-pw-segmented-input" value="MySecret123!">
<div class="uk-pw-segments">
    <div class="uk-pw-seg active" style="background: #10b981;"></div>
    <div class="uk-pw-seg active" style="background: #10b981;"></div>
    <div class="uk-pw-seg active" style="background: #10b981;"></div>
    <div class="uk-pw-seg active" style="background: #10b981;"></div>
</div>
<div class="uk-pw-seg-text" style="color: #10b981;">Very Strong</div>

<style>
    .uk-pw-segmented-input {
        width: 100%; padding: 0.6rem 0.875rem; border: 1px solid #cbd5e1;
        border-radius: 0.5rem; outline: none; margin-bottom: 0.75rem;
    }
    .uk-pw-segments { display: flex; gap: 4px; margin-bottom: 0.4rem; }
    .uk-pw-seg { flex: 1; height: 6px; border-radius: 99px; background: #e2e8f0; transition: all 0.3s; }
    .uk-pw-seg-text { font-size: 0.75rem; font-weight: 600; }
</style>

<input type="password" class="uk-pw-input" value="MySecret123!">
<ul class="uk-pw-rules">
    <li class="uk-pw-rule met"><i class="fas fa-check-circle"></i> At least 8 characters</li>
    <li class="uk-pw-rule met"><i class="fas fa-check-circle"></i> Contains a number</li>
    <li class="uk-pw-rule unmet"><i class="fas fa-circle"></i> Contains an uppercase letter</li>
</ul>

<style>
    .uk-pw-input {
        width: 100%; padding: 0.6rem 0.875rem; border: 1px solid #cbd5e1;
        border-radius: 0.5rem; outline: none; margin-bottom: 0.75rem;
    }
    .uk-pw-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
    .uk-pw-rule { font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
    .uk-pw-rule.met { color: #10b981; }
    .uk-pw-rule.unmet { color: #94a3b8; }
    .uk-pw-rule i { font-size: 0.85rem; }
</style>

<input type="password" class="uk-pw-input" value="123">
<div class="uk-pw-bar-wrap">
    <div class="uk-pw-bar" style="width: 25%; background: #ef4444;"></div>
</div>
<div class="uk-pw-text" style="color: #ef4444;">Weak password</div>

<input type="password" class="uk-pw-input" value="Password123">
<div class="uk-pw-bar-wrap">
    <div class="uk-pw-bar" style="width: 60%; background: #f59e0b;"></div>
</div>
<div class="uk-pw-text" style="color: #f59e0b;">Medium password</div>

<div class="uk-pw-float">
    <input type="password" class="uk-pw-input-float" value="MySecret123!">
    <label class="uk-pw-label-float">Password</label>
</div>
<div class="uk-pw-bar-wrap" style="margin-top: 0.75rem;">
    <div class="uk-pw-bar" style="width: 100%; background: #10b981;"></div>
</div>
<div class="uk-pw-text" style="color: #10b981;">Strong password</div>

<style>
    .uk-pw-float { position: relative; }
    .uk-pw-input-float {
        width: 100%; padding: 1.25rem 1rem 0.5rem 1rem; font-size: 0.95rem;
        color: #0f172a; border: 1px solid #cbd5e1; border-radius: 0.5rem;
        outline: none; background: #fff;
    }
    .uk-pw-input-float:focus { border-color: #1e3a8a; }
    .uk-pw-label-float {
        position: absolute; top: 0.4rem; left: 1rem; font-size: 0.7rem;
        font-weight: 600; color: #64748b; pointer-events: none; text-transform: uppercase;
    }
</style>