lessPass-standalone-html/index.html at main · RodrigoWebDev/lessPass-standalone-html · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📴</text></svg>"
    />
    <link rel="stylesheet" href="./src/styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Standalone Lesspass</title>
  </head>
  <body>
    <main class="md:d-f md:g-24px">
      <div class="md:w-50%">
        <h1>📴 HTML Standalone Lesspass</h1>

        <button data-id="download-html">⬇️ Download this page.</button>
        <br />

        <hr />

        <h2>🗝️ Fill the form bellow to generate your password</h2>

        <form id="form">
          <input
            id="siteInput"
            required
            type="text"
            name="site"
            placeholder="🌐 Local"
          />
          <input
            id="loginInput"
            required
            type="text"
            name="login"
            placeholder="👤 Username"
          />
          <input
            id="passwordInput"
            required
            type="password"
            name="password"
            placeholder="🔑 Master password"
          />
          <div>
            <label
              ><input type="checkbox" name="lowercase" checked /> a-z
            </label>
            <label
              ><input type="checkbox" name="uppercase" checked /> A-Z
            </label>
            <label><input type="checkbox" name="digits" checked /> 0-9 </label>
            <label><input type="checkbox" name="symbols" checked /> %!@ </label>
          </div>
          <div>
            <small>📏 Length</small>
            <br />
            <input
              required
              type="number"
              name="length"
              value="16"
              placeholder="Length"
            />
          </div>
          <div>
            <small>🎰 Counter</small>
            <br />
            <input
              required
              type="number"
              name="counter"
              value="1"
              placeholder="Counter"
            />
          </div>
          <button type="submit">⚡ Generate and copy</button>

          <div id="passwordContainer" style="display: none">
            <br />
            <p>Your password:</p>
            <div id="passwordLock">****************</div>
            <div id="passwordDisplay" style="display: none"></div>
            <br />
            <button type="button" id="showPasswordButton">
              👀 Show password
            </button>

            <button type="button" id="clearPasswordButton">
              🧹 Clear password
            </button>
          </div>
        </form>
      </div>

      <div class="md:w-50%">
        <div class="md:d-n">
          <br />
          <br />
          <hr />
          <br />
        </div>

        <h2>💬 About</h2>

        <p>
          This is a lightweight, standalone HTML version of the
          <a href="https://www.lesspass.com/#/" target="_blank">Less Pass</a>
          password manager. In this version, you can download the single HTML
          file from this page and have your favorite password manager with you
          forever, without depending on the website, repository, internet
          connection and without the need to install any app on your OS. Your
          system only needs a modern browser. You can also back up this file
          wherever you want.
        </p>

        <h2>📜 How to use this version</h2>

        <p>
          If you want to use it offline, click the button
          <i>"⬇️ Download this page"</i> at the top and open the page file in
          your browser(I recommend Chrome).
        </p>
        <p>
          Fill the form and click the "⚡ Generate and copy" button. If the
          password is not copied, try clicking the "👀 Show password" button and
          then copy it manually.
        </p>
        <p>
          If you want to generate a new password, just change the counter value
          and click "⚡ Generate and copy" again.
        </p>
        <p>
          If you want to clear the password, click the "🧹 Clear password"
          button. After 30 seconds, the password will be cleared automatically
          if you don't clear it manually. This is a security measure to prevent
          your password from being exposed for too long.
        </p>

        <p>
          <strong>Pro tip</strong>: Backup this page file in your favorite cloud
          storage.
        </p>

        <h2>🤔 How it works</h2>

        <p>
          You can know how it work
          <a
            href="https://blog.lesspass.com/2016-10-19/how-does-it-work"
            target="_blank"
            >here</a
          >.
        </p>
      </div>
    </main>

    <input id="hiddenPass" type="text" style="display: none" />

    <div id="snackbar">Copied</div>

    <footer>
      <hr />
      <br />
      <a
        href="https://github.com/RodrigoWebDev/lessPass-standalone-html"
        target="_blank"
        >&lt;/&gt; Source code 🐱</a
      >
      developed by
      <a href="https://github.com/RodrigoWebDev" target="_blank"
        >👨🏻‍💻 Rodrigo Queiroz</a
      >
      <br />
    </footer>

    <script type="module" src="./src/index.js"></script>
  </body>
</html>