multipass/template.html at master · serialhex/multipass · 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
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <style>
#w3css#

#theme#

#basic#
    </style>
    <script type="text/javascript">

////////////////////////////////////////////////////////////////////////////////
// Import "Libraries" used...
#hash#

#rng#

#vis#

#main#

// Maybe calculate this later?
// https://en.wikipedia.org/wiki/Password_strength

    </script>
  </head>
  <body onload="draw('flippity flopity floo! 12345');" class="w3-theme-d5">
    <h1>Leeloo Dallas Multipass!</h1>

    <canvas id="tutorial" width="32" height="32">(no HTML canvas support)</canvas>

    <p>tl;dr This is a simple password "manager" that is: 1. free 2. private 3. fast 4. safe 5. secure 6. portable (supports all platforms that have a web browser with javascript)</p>

    <p>More information below, here's the Multipass:</p>

    <img class="w3-round" src="data:image/jpeg;base64, #leeloo#"/><br>

    <div class="w3-container w3-theme-l3">
      <label for="basephrase">Base Input:</label>
        <input id="basephrase" class="w3-input w3-border" type="text"><br>

      <input id="low_alpha" type="checkbox" class="w3-input" checked="true">
        <label for="low_alpha">Lowercase Alphabet</label> <br>

      <input id="up_alpha" type="checkbox" class="w3-input" checked="true">
        <label for="up_alpha">Upper Alphabet</label> <br>

      <input id="numbr" type="checkbox" class="w3-input" checked="true">
        <label for="numbr">Numbers</label> <br>

      <input id="punct" type="checkbox" class="w3-input" value="0">
        <label for="punct">Punctuation</label> <br>

      <label for="min_chars">Minimum number of characters:</label> <input type="number" id="min_chars" min="1" max="100" step="1" value="8"><br>
      <label for="max_chars">Maximum number of characters:</label> <input type="number" id="max_chars" min="1" max="100" step="1" value="20"><br>

      <input onclick="doit()" type="button" value="Runnit!"><br>
      <p>Character Set: <div id="char_set"></div></p>

      <p>Output: <div id="output" class="grid-container"></div></p>
    </div>

    <img src="data:image/jpeg;base64, #multipass#"/><br>

    <!-- Description down here -->

<h2>
The Second Header!
</h2>

<p>
First of all, I'm not a fancy web designer.
I can do the CSS & HTML & JavaScript thing, but I can't design shit, so this looks ugly, deal!
</p>

    <p>Second, Leeloo & her images are copyright Fox media or something, along with "The Fifth Element" yada yada don't sue me.  Also this is not sponsored by them in any way, just fyi.</p>

    <p>Okay, onto the fun stuff!  You're probably reading this because you're wondering how this magic works, if you can trust it, and stuff like that.</p>

    <h3>Trust</h3>

    <p>Honestly you can trust this as much as you can trust the likes of 1Password, LastPass, Apple's Keychain, Gnome Keyring, or anything else you find on this site: <a href="https://en.wikipedia.org/wiki/List_of_password_managers">https://en.wikipedia.org/wiki/List_of_password_managers</a>, or anywhere else.  That is, not much.  The problem with most of these is that they store your information somewhere (like your hard drive, or their hard drives).  This means that if someone breaks into $PASSWORD_MANAGER's servers, your passwords are stolen.  If you stop paying for the service, your passwords are gone.  If your hard drive explodes, all of your passwords are gone, etc...</p>

    <p>The benefit of using this is that it is offline-able, we don't store anything, and everything is generated new each time!</p>

    <p>the down side is I don't have a team of security professionals to make sure this is a robust & secure tool.  Nor do I have a set of web designer people to make this looks good. (The upside though is that this page loads insanely fast!  It's self-contained, which is another upside, no external JS to ship your data anywhere!!!)</p>

    <h3>How to use</h3>

    <p>This is a fairly simple tool, with a number of options.  Here are the steps:</p>

    <ol>
      <li>Make a passphrase</li>
      <li>Choose generation options</li>
      <li>Run it</li>
    </ol>

    <p>The first thing you <b>*need*</b> to do is think of a simple, memorable passphrase.  This is <b>*not*</b> to be something super complicated.  "Password1" will do as a passphrase.  Though don't use that, as other people might use it, then you get into problems of multiple people using the same password, etc. Choose something memorable, like "My favorite ice cream is bananna", whatever.  Doesn't matter.</p>

    <p>Next, select your parameters!  These are usually specified by the website you are using.  A good default is to have all but punctuation enabled, as some places don't accept that.  The default of 8-20 characters is fine also.  Some want more, so give them more.</p>

    <p>Last, run the thing!  This will generare 10 passwords you can copy/paste somewhere else.  These passwords are deterministic!  So you only need to remember your passphrase, the options you chose, and which password you selected.</p>

    <p>You can also use the <b>*same*</b> passphrase with <b>*different*</b> options to get different passwords.  Maybe one day I'll update it so that it refreshes when you change values so you can see...</p>

    <h2>But wait, there's more!</h2>

    <p>Kinda, not really.  I could write more but I don't feel like it.  Have fun & stay safe!</p>

  </body>
</html>