GenPassX/index.html at master · shubhamnarware67-cmd/GenPassX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>GenPassX — Ultimate Password Generator</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
  <main class="app" role="main" aria-labelledby="appTitle">
    <header class="app-header">
      <div>
        <h1 id="appTitle"><span class="brand">GenPassX</span></h1>
        <p class="tagline">Strong, memorable, and secure — generated for you 🔒</p>
      </div>
      <div class="mode-row">
        <label class="sr-only" for="themeToggle">Toggle theme</label>
        <button id="themeToggle" aria-pressed="false" title="Toggle light/dark theme">🌙</button>
      </div>
    </header>

    <section class="controls" aria-label="Password controls">
      <div class="row">
        <label for="lengthRange">Password length: <strong id="lengthValue">12</strong></label>
        <input id="lengthRange" type="range" min="4" max="64" value="12" aria-valuemin="4" aria-valuemax="64" />
      </div>

      <fieldset class="fieldset-options" aria-label="Character options">
        <legend>Include characters</legend>
        <label><input type="checkbox" id="uppercase" checked> Uppercase (A–Z)</label>
        <label><input type="checkbox" id="lowercase" checked> Lowercase (a–z)</label>
        <label><input type="checkbox" id="numbers" checked> Numbers (0–9)</label>
        <label><input type="checkbox" id="symbols" checked> Symbols (!@#$...)</label>
      </fieldset>

      <div class="toggles">
        <label><input type="checkbox" id="autoRegenerate"> Auto-regenerate (every 5s)</label>
        <label><input type="checkbox" id="showPasswords"> Show passwords</label>
      </div>

      <div class="controls-row">
        <button id="generateBtn" class="primary" aria-label="Generate passwords">⚡ Generate</button>
        <button id="downloadAll" aria-label="Download all passwords">⬇️ Download All</button>
        <button id="clearBtn" aria-label="Clear passwords">🗑 Clear</button>
      </div>
    </section>

    <section class="passwords" aria-live="polite" aria-label="Generated passwords list">
      <!-- Two password cards (template-like) -->
      <div class="password-card" data-index="0">
        <div class="left">
          <label class="sr-only" for="pwd0">Password 1</label>
          <input id="pwd0" class="password-input" type="password" readonly aria-readonly="true" value="">
        </div>
        <div class="meta">
          <div class="entropy" aria-hidden="true"><span class="bits">0</span> bits</div>
          <div class="strength" aria-hidden="true">Strength: <span class="str-text">—</span></div>
          <div class="card-actions">
            <button class="copy-btn" title="Copy password" aria-label="Copy password">📋</button>
            <button class="regen-btn" title="Regenerate password" aria-label="Regenerate password">🔄</button>
            <button class="download-btn" title="Download this password" aria-label="Download password">⬇️</button>
          </div>
        </div>
      </div>

      <div class="password-card" data-index="1">
        <div class="left">
          <label class="sr-only" for="pwd1">Password 2</label>
          <input id="pwd1" class="password-input" type="password" readonly aria-readonly="true" value="">
        </div>
        <div class="meta">
          <div class="entropy" aria-hidden="true"><span class="bits">0</span> bits</div>
          <div class="strength" aria-hidden="true">Strength: <span class="str-text">—</span></div>
          <div class="card-actions">
            <button class="copy-btn" title="Copy password" aria-label="Copy password">📋</button>
            <button class="regen-btn" title="Regenerate password" aria-label="Regenerate password">🔄</button>
            <button class="download-btn" title="Download this password" aria-label="Download password">⬇️</button>
          </div>
        </div>
      </div>
    </section>

    <section class="history" aria-label="Password history">
      <h2>History</h2>
      <ul id="historyList" tabindex="0" aria-live="polite"></ul>
    </section>

    <section class="meter" aria-hidden="false">
      <div class="meter-bar" role="progressbar" aria-valuemin="0" aria-valuemax="64" aria-valuenow="0"></div>
      <div class="meter-label" id="meterLabel">Entropy: <strong id="globalEntropy">0</strong> bits — Strength: <span id="globalStrength">—</span></div>
    </section>

    <footer class="app-footer">
      <p>© 2026 <strong>GenPassX</strong> — Designed & Developed by <strong>Shubham Narware</strong></p>
      <p class="small">Icons & UI are free for use; no third-party copyrighted assets included.</p>
    </footer>
  </main>

  <script src="script.js" defer></script>
</body>
</html>