-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (78 loc) · 4.14 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recall - Encrypt</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-expand navbar-dark bg-primary shadow-sm">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Recall</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active fw-semibold" href="index.html">Encrypt</a>
</li>
<li class="nav-item">
<a class="nav-link fw-semibold" href="decrypt.html">Decrypt</a>
</li>
<li class="nav-item">
<a class="nav-link fw-semibold" target=_blank href="https://github.com/rualark/Recall">Help</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container py-5">
<div class="mb-4">
<h1 class="fw-bold text-primary">Encrypt the secret</h1>
</div>
<hr class="my-4">
<!-- Description Section -->
<p>Create associative pairs to secure your secrets. Each associative pair starts with a <code>?</code> symbol, where the question (or clue) is on the right and the answer is on the left, separated by <code>=</code>.</p>
<p>If you want to create layers of protection, separate groups of associative pairs with <code>---</code>. This will ensure that the next group of questions is only accessible after correctly solving the previous group.</p>
<p>To ensure your password is robust, aim for at least 15 elements in one of the groups. Make sure the answers are not too obvious, and that all choices seem equally plausible for each question, making it harder for anyone to guess.</p>
<p>Any line that doesn't start with a <code>?</code> is your secret information (like passwords) that Recall will encrypt for you.</p>
<p><a target=_blank href="https://github.com/rualark/Recall">Read more</a></p>
<!-- Secret Section -->
<div class="card shadow-sm mb-4">
<div class="card-body">
<h4 class="card-title text-secondary">Secret:</h4>
<textarea style="width: 100%" class="form-control mb-3" rows="30" id="secret">
MySecretPassword
AnotherVerySecretPassword
? Mortal Kombat = My favorite game when I was 12.
? Doom 2 = My first shooter game.
? WOW = I never played this game.
? Fortnite = I once built a giant llama fort.
? Minecraft = Once I got lost underground, with no torches.
? League of Legends = I soloed Baron and forgot to ping.
---
? Tokyo = I got lost inside a cat café.
? Paris = A mime mistook me for another mime.
? New York = I accidentally joined a flash mob dance.
? Istanbul = I bargained for spices, and got flowers.
? Sydney = A cockatoo stole my sandwich in Hyde Park.
? Cairo = A camel wandered into my wedding photo.
? Rio de Janeiro = I got stuck mid-parade in Carnival feathers.
</textarea>
<button id="pack" class="btn btn-primary w-100">Encrypt</button>
</div>
</div>
<div class="card shadow-sm">
<div class="card-body">
<h4 class="card-title text-secondary">Encrypted:</h4>
<textarea class="form-control" rows="5" id="packed"></textarea>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script type='text/javascript' src='plugins/lz-string-1.4.4/lz-string.min.js'></script>
<script type=module src=js/packer.js></script>
</body>
</html>