Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Fortress - Cryptographically Secure Password Generator</title> | |
| <!-- Google Fonts Inter --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <header class="app-header"> | |
| <div class="logo"> | |
| <h1>> password_generator</h1> | |
| </div> | |
| </header> | |
| <main class="glass-card"> | |
| <!-- Password Display Section --> | |
| <div class="password-display-wrapper"> | |
| <input type="text" id="password-output" class="password-input" readonly placeholder="Select options..." value="" /> | |
| <div class="display-actions"> | |
| <!-- Refresh / Regenerate Button --> | |
| <button id="btn-regenerate" class="action-btn" title="Regenerate Password" aria-label="Regenerate Password"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-refresh"> | |
| <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"></path> | |
| </svg> | |
| </button> | |
| <!-- Copy Button --> | |
| <button id="btn-copy" class="action-btn copy-btn" title="Copy to Clipboard" aria-label="Copy to Clipboard"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-copy"> | |
| <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> | |
| </svg> | |
| <span class="tooltip" id="copy-tooltip">Copy</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Parameters Configuration Section --> | |
| <div class="controls-section"> | |
| <!-- Length Slider --> | |
| <div class="control-group"> | |
| <div class="control-header"> | |
| <label for="length-slider">Password Length</label> | |
| <span id="length-val" class="badge">16</span> | |
| </div> | |
| <div class="slider-wrapper"> | |
| <input type="range" id="length-slider" min="8" max="64" value="16" class="range-slider" /> | |
| </div> | |
| </div> | |
| <!-- Character Group Checkboxes --> | |
| <div class="control-group"> | |
| <label class="section-label">Character Classes</label> | |
| <div class="checkbox-grid"> | |
| <label class="custom-checkbox"> | |
| <input type="checkbox" id="chk-upper" checked /> | |
| <span class="checkmark"></span> | |
| <span class="label-text">Uppercase (A-Z)</span> | |
| </label> | |
| <label class="custom-checkbox"> | |
| <input type="checkbox" id="chk-lower" checked /> | |
| <span class="checkmark"></span> | |
| <span class="label-text">Lowercase (a-z)</span> | |
| </label> | |
| <label class="custom-checkbox"> | |
| <input type="checkbox" id="chk-numbers" checked /> | |
| <span class="checkmark"></span> | |
| <span class="label-text">Numbers (0-9)</span> | |
| </label> | |
| <label class="custom-checkbox"> | |
| <input type="checkbox" id="chk-symbols" checked /> | |
| <span class="checkmark"></span> | |
| <span class="label-text">Symbols (&@#...)</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Extra Options Toggle --> | |
| <div class="control-group border-top"> | |
| <label class="custom-checkbox toggle-option"> | |
| <input type="checkbox" id="chk-exclude-ambiguous" checked /> | |
| <span class="checkmark"></span> | |
| <span class="label-text">Exclude Ambiguous Characters <span class="subtext">(e.g., 1, l, I, 0, O)</span></span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Password Strength & Metrics Section --> | |
| <div class="metrics-section"> | |
| <div class="metrics-header"> | |
| <span class="metric-label">Entropy: <strong id="entropy-val">0.0</strong> bits</span> | |
| <span class="metric-label" id="strength-label">Rating: -</span> | |
| </div> | |
| <!-- 5-Segment Strength Meter --> | |
| <div class="strength-meter" id="strength-meter"> | |
| <div class="meter-segment"></div> | |
| <div class="meter-segment"></div> | |
| <div class="meter-segment"></div> | |
| <div class="meter-segment"></div> | |
| <div class="meter-segment"></div> | |
| </div> | |
| <div class="crack-time-wrapper"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-clock"> | |
| <circle cx="12" cy="12" r="10"></circle> | |
| <polyline points="12 6 12 12 16 14"></polyline> | |
| </svg> | |
| <span id="crack-time">Select at least one character class</span> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="app-footer"> | |
| <p>Secured by Web Crypto API. Zero server communication.</p> | |
| </footer> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |