<script> (function() // DOM elements const passwordInput = document.getElementById('password'); const lengthSlider = document.getElementById('lengthSlider'); const lengthValue = document.getElementById('lengthValue'); const uppercaseCheck = document.getElementById('uppercase'); const lowercaseCheck = document.getElementById('lowercase'); const numbersCheck = document.getElementById('numbers'); const symbolsCheck = document.getElementById('symbols'); const generateBtn = document.getElementById('generateBtn'); const copyBtn = document.getElementById('copyBtn'); const copyMessageDiv = document.getElementById('copyMessage'); const strengthFill = document.getElementById('strengthFill'); const strengthTextSpan = document.getElementById('strengthText');

.copy-btn:hover background: rgba(0,0,0,0.05); transform: scale(1.05);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Insta Generate Password 🔐</title> <style> * margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; body background: linear-gradient(145deg, #f5f7fa 0%, #e9eef5 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px;

.strength-fill width: 0%; height: 100%; border-radius: 12px; transition: width 0.3s ease, background 0.2s;

<button class="generate-btn" id="generateBtn">✨ Generate new password</button> </div>

.insta-header h1 color: white; font-size: 28px; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; justify-content: center; gap: 12px;

<div class="insta-footer"> <i>⚡ Instagram-style secure generator • Tap copy to use instantly</i> </div> </div>

input[type="range"] width: 100%; height: 6px; border-radius: 10px; background: #dbdfea; -webkit-appearance: none;