Password Generator HTML
<body>
<div class="container">
<div class="glass-card">
<h1>SecureGen</h1>
<p class="subtitle">Generate strong, secure passwords instantly</p>
<div class="display-container">
<input type="text" id="password-output" readonly placeholder="Generating..."
aria-label="Generated Password">
<button class="copy-btn" id="copy-btn" aria-label="Copy to Clipboard">
<div class="tooltip" id="copy-tooltip">Copied!</div>
<svg viewBox="0 0 24 24">
<path
d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z" />
</svg>
</button>
</div>
<div class="controls">
<div class="control-group">
<div class="label-row">
<label for="length-slider">Password Length</label>
<span id="length-val">16</span>
</div>
<input type="range" id="length-slider" min="6" max="32" value="16">
</div>
<div class="options-grid">
<label class="checkbox-wrapper">
<input type="checkbox" id="uppercase" checked>
<div class="custom-checkbox"></div>
<span class="check-label">Uppercase</span>
</label>
<label class="checkbox-wrapper">
<input type="checkbox" id="lowercase" checked disabled>
<div class="custom-checkbox"></div>
<span class="check-label">Lowercase</span>
</label>
<label class="checkbox-wrapper">
<input type="checkbox" id="numbers" checked>
<div class="custom-checkbox"></div>
<span class="check-label">Numbers</span>
</label>
<label class="checkbox-wrapper">
<input type="checkbox" id="symbols" checked>
<div class="custom-checkbox"></div>
<span class="check-label">Symbols</span>
</label>
</div>
<div class="strength-section">
<div class="strength-header">
<span>Strength</span>
<span id="strength-text" class="strength-text">STRONG</span>
</div>
<div class="strength-bars">
<div class="bar" id="bar1"></div>
<div class="bar" id="bar2"></div>
<div class="bar" id="bar3"></div>
<div class="bar" id="bar4"></div>
</div>
</div>
<button class="btn-generate" id="generate-btn">Generate Password</button>
</div>
</div>
</div>
</body>
Public Last updated: 2026-08-25 08:55:13 AM