wpassgen/index.html at main · verlor/wpassgen · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <link rel="manifest" href="wpassgen.webmanifest" />
    <title>Passgen - Human-readable Passwords Generator</title>
    <link href="./dist/output.css" rel="stylesheet" />
  </head>

  <body
    class="sm:bg-gray-100 bg-white sm:min-h-screen sm:flex sm:items-center sm:justify-center"
  >
    <div
      id="toast"
      class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-sm px-4 py-2 rounded shadow-md transition-all duration-300 opacity-0 z-50"
    ></div>
    <div
      class="sm:flex sm:items-center sm:justify-center sm:bg-gray-100 bg-white px-4"
    >
      <div
        class="bg-white sm:shadow-xl sm:rounded-2xl p-6 sm:w-full sm:max-w-md space-y-6 min-w-xs mt-6 sm:mt-0"
      >
        <!-- Header -->
        <div class="sm:space-y-2">
          <h1 class="text-lg font-semibold text-gray-900">
            🔐 Password Generator
          </h1>
          <p class="text-sm text-gray-500">
            Generate a secure passphrase with custom rules.
          </p>
        </div>

        <!-- Output Display -->
        <div>
          <label for="password" class="sr-only">Generated Password</label>
          <div class="relative">
            <textarea
              id="password"
              readonly
              class="w-full text-sm font-mono text-gray-800 bg-gray-50 border border-gray-300 rounded-lg p-3 pr-20 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
              rows="2"
            ></textarea>

            <!-- Actions -->
            <div class="absolute right-2 top-2 flex gap-2">
              <button
                id="copyBtn"
                title="Copy"
                class="p-1.5 rounded-md bg-gray-200 hover:bg-gray-300 text-gray-600"
              >
                📋
              </button>
              <button
                id="clearBtn"
                title="Clear"
                class="p-1.5 rounded-md bg-gray-200 hover:bg-red-200 text-red-500"
              >
                🗑️
              </button>
            </div>
          </div>
        </div>

        <!-- Generate Button -->
        <div>
          <button
            id="generateBtn"
            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-sm transition"
          >
            Generate Password
          </button>
        </div>

        <!-- Options Section -->
        <div class="pt-4 border-t space-y-4">
          <h2 class="text-sm font-semibold text-gray-700">Options</h2>

          <div class="space-y-2">
            <label class="flex items-center gap-2 text-sm text-gray-700">
              <input
                type="checkbox"
                id="symbols"
                class="form-checkbox h-4 w-4 text-blue-600"
              />
              Include Special Characters
            </label>
            <label class="flex items-center gap-2 text-sm text-gray-700">
              <input
                type="checkbox"
                id="uppercase"
                class="form-checkbox h-4 w-4 text-blue-600"
              />
              Uppercase letters
            </label>
            <label class="flex items-center gap-2 text-sm text-gray-700">
              <input
                type="checkbox"
                id="replaceVowels"
                class="form-checkbox h-4 w-4 text-blue-600"
              />
              Replace vowels
            </label>
            <label class="flex items-center gap-2 text-sm text-gray-700">
              <input
                type="checkbox"
                id="randomChars"
                class="form-checkbox h-4 w-4 text-blue-600"
              />
              Use Random Characters Instead of Passphrase
            </label>
          </div>

          <div>
            <label for="prefix" class="block text-sm text-gray-700 mb-1">
              Custom Special Characters
            </label>
            <input
              id="prefix"
              type="text"
              class="w-full border border-gray-300 rounded-md p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Example: !@#$%^&*()_+"
            />
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="index.js"></script>
  </body>
</html>