-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
64 lines (61 loc) · 3.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encrypted Bookmarklet Generator</title>
<link rel="icon" href="svg/favicon.svg">
<link rel="stylesheet" href="lib/tailwind.min.css">
<link rel="stylesheet" href="css/generator-custom.min.css">
</head>
<body class="bg-gray-100 px-4 sm:px-6 lg:px-8 py-8">
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl sm:text-4xl font-bold mb-8">Encrypted Bookmarklet Generator</h1>
<p class="mb-4">
Enter a link or any text (Markdown formatting supported) along with a password to generate a
bookmarklet containing your encrypted data.<br>You can find more information on
<a href="https://github.com/Kakifrucht/BookmarkletGenerator" class="text-blue-500 hover:text-blue-600">GitHub</a>.
</p>
<form id="content-form">
<div class="flex flex-col sm:flex-row my-2">
<input type="text" id="content" placeholder="Enter link or text to encrypt, double click to expand" autofocus required autocomplete="off"
class="border border-gray-300 rounded p-2 mb-2 sm:mr-2 sm:w-1/2 w-full" />
<div class="flex flex-wrap sm:flex-nowrap">
<input type="password" id="password" placeholder="Enter password"
class="border border-gray-300 rounded p-2 mb-2 w-full" />
<button id="generate" type="submit"
class="bg-blue-500 text-white sm:ml-2 px-4 py-2 mb-2 rounded hover:bg-blue-600 transition duration-200 w-full flex-1 whitespace-nowrap">
Generate Bookmarklet
</button>
</div>
</div>
</form>
<div class="flex flex-col md:flex-row items-center justify-center md:justify-start md:items-start">
<a id="bookmarklet-link" href="#" download="bookmarklet.html"
title="Click to copy to clipboard or drag into your bookmarks"
class="url-hidden bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 transition duration-200 inline-flex shadow-lg font-semibold">
<img src="svg/bookmark-icon.svg" alt="" class="w-6 h-6 ml-auto mr-1 -ml-1 inline-block" />Generated Bookmarklet
</a>
<p id="warning" class="w-full md:w-auto text-red-600 m-2 text-center md:text-left"></p>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold mb-4">Why Use This Tool?</h2>
<ul class="list-none space-y-1">
<li><span class="font-semibold">🔒 Enhanced Privacy on Shared Devices:</span> Keep your bookmarks encrypted.</li>
<li><span class="font-semibold">📝 Secure Note Storage:</span> Safely store encrypted, <a class="text-blue-500 hover:text-blue-600" href="https://www.markdownguide.org/cheat-sheet/">Markdown formatted</a> notes directly in your bookmarks.</li>
<li><span class="font-semibold">🗂️ Consolidate Bookmarks:</span> Combine multiple bookmarks into a single encrypted entry.</li>
<li><span class="font-semibold">📑 Temporary Notes in your open Tabs:</span> Encrypt notes and leave them in a browser tab.</li>
<li><span class="font-semibold">🔗 Secure Bookmarking of Authentication Links:</span> Encrypt URLs containing <a class="text-blue-500 hover:text-blue-600" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#access_using_credentials_in_the_url">HTTP authentication credentials</a>.</li>
<li><span class="font-semibold">🕵️♂️ Hide a bookmark from Autocomplete:</span> Your browser will never reveal it in the address bar.</li>
<li><span class="font-semibold">🌐 Universal Browser Compatibility:</span> Operates across all major browsers without special extensions.</li>
</ul>
</div>
</div>
<script src="lib/aes-lib.js"></script>
<script src="lib/forge-sha256.js"></script>
<script src="lib/fflate.min.js"></script>
<script src="lib/terser.js"></script>
<script src="generator.js"></script>
<script src="derive-key.js"></script>
</body>
</html>