-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathencrypt.html
More file actions
344 lines (316 loc) · 23.9 KB
/
Copy pathencrypt.html
File metadata and controls
344 lines (316 loc) · 23.9 KB
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SLS94VX99N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SLS94VX99N');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-T69296FK');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encrypt Text & Files Online | ZeroKey Secure Vault</title>
<meta name="description" content="Use ZeroKey's client-side AES-GCM encryption tool to secure your messages and files. Generate self-destructing, zero-knowledge links directly in your browser.">
<meta name="keywords" content="encrypt text online, AES-GCM encryption tool, secure payload generator, end-to-end encrypted message, zero-knowledge file share, secure link generator, Web Crypto API">
<meta name="author" content="Dippan Bhusal">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:url" content="https://zerokey.vercel.app/encrypt">
<meta property="og:title" content="Encrypt Payload Locally | ZeroKey">
<meta property="og:description" content="Lock your secrets using military-grade AES-GCM encryption before sharing. 100% zero-knowledge.">
<meta property="og:image" content="https://zerokey.vercel.app/assets/og/index.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Encrypt Payload Locally | ZeroKey">
<meta property="twitter:description" content="Lock your secrets using military-grade AES-GCM encryption before sharing. 100% zero-knowledge.">
<meta property="twitter:image" content="https://zerokey.vercel.app/assets/og/index.png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "SoftwareApplication",
"name": "ZeroKey Encryption Engine",
"operatingSystem": "Web Browser",
"applicationCategory": "SecurityApplication",
"description": "Client-side encryption tool utilizing the Web Crypto API to generate secure, ephemeral links.",
"creator": { "@type": "Person", "name": "Dippan Bhusal", "url": "https://github.com/kdippan" }
},
{
"@type": "HowTo",
"name": "How to Encrypt and Send a Secure Message",
"description": "Step-by-step guide to generating a zero-knowledge, self-destructing payload link.",
"step": [
{
"@type": "HowToStep",
"name": "Draft your payload",
"text": "Enter your sensitive text or attach a file (up to 2MB) into the secure vault interface."
},
{
"@type": "HowToStep",
"name": "Add optional security layers",
"text": "Set a custom decryption PIN or enable geofencing to restrict access to a specific physical location."
},
{
"@type": "HowToStep",
"name": "Encrypt and Share",
"text": "Click 'Encrypt Payload'. The browser will encrypt the data locally and generate a secure #hash link. Copy and share this link."
}
]
},
{
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is my unencrypted data sent to your servers?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. ZeroKey uses the native Web Crypto API to encrypt your data locally in your browser before transmission. We only receive the scrambled ciphertext."
}
},
{
"@type": "Question",
"name": "What is the maximum file size I can encrypt?",
"acceptedAnswer": {
"@type": "Answer",
"text": "You can encrypt files up to 2MB. This limit ensures browser stability during the heavy client-side encryption process."
}
}
]
}
]
}
</script>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="64x64" href="/assets/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="/assets/favicon-128x128.png">
<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/favicon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="/assets/favicon-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="/assets/favicon-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon-512x512.png">
<link rel="manifest" href="/assets/site.webmanifest">
<meta name="msapplication-TileColor" content="#0f172a">
<meta name="msapplication-TileImage" content="/assets/favicon-144x144.png">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<link rel="stylesheet" href="/style.css">
</head>
<body class="bg-[#0f172a] text-slate-300 min-h-screen font-sans overflow-x-hidden relative selection:bg-blue-500/30 selection:text-blue-200 flex flex-col">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T69296FK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="fixed top-0 left-1/4 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[150px] pointer-events-none z-0"></div>
<div class="fixed bottom-0 right-1/4 w-[500px] h-[500px] bg-emerald-600/10 rounded-full blur-[150px] pointer-events-none z-0"></div>
<nav class="relative z-10 border-b border-slate-800/50 bg-[#0f172a]/80 backdrop-blur-md sticky top-0">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div class="flex items-center gap-2 text-slate-100 font-bold text-2xl tracking-tight">
<i class="ph ph-fingerprint text-blue-500"></i> ZeroKey
</div>
<div class="hidden md:flex gap-6 text-sm font-medium text-slate-400">
<a href="/" class="hover:text-white transition-colors">Home</a>
<a href="/about" class="hover:text-white transition-colors">About</a>
<a href="/privacy" class="hover:text-white transition-colors">Privacy</a>
<a href="/contact" class="hover:text-white transition-colors">Contact</a>
<a href="/donate" class="hover:text-red-400 transition-colors flex items-center gap-1"><i class="ph-fill ph-heart text-red-500"></i> Support</a>
</div>
</div>
</nav>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-20 relative z-10 flex-grow w-full">
<main class="glass-panel p-6 md:p-10 rounded-2xl shadow-2xl border border-slate-700/50 bg-slate-900/60 backdrop-blur-md mb-16 mt-4">
<div class="mb-6 border-b border-slate-800 pb-4 flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
<i class="ph ph-shield-check text-blue-400"></i> Encrypt Payload
</h1>
<p class="text-xs text-slate-500 mt-1 font-mono uppercase tracking-wider">Local AES-GCM Engine Active</p>
</div>
<div class="hidden sm:flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-lg text-emerald-400 text-xs font-semibold">
<i class="ph ph-check-circle"></i> Client-Side Only
</div>
</div>
<div class="space-y-6">
<div>
<label for="secretInput" class="block text-sm font-medium text-slate-400 mb-2">Secret Message</label>
<textarea id="secretInput" rows="5" placeholder="Type your sensitive data here... It will never leave your device unencrypted." class="w-full bg-slate-950/50 border border-slate-700 rounded-xl p-4 text-slate-200 placeholder-slate-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all resize-none"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-slate-400 mb-2">Attach File (Max 2MB)</label>
<input type="file" id="fileInput" class="hidden">
<button type="button" id="attachBtn" class="w-full bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 font-semibold py-3 rounded-xl transition-all flex items-center justify-center gap-2 shadow-inner">
<i class="ph ph-paperclip text-lg"></i> Choose File
</button>
<div id="filePreview" class="hidden flex items-center justify-between p-4 bg-slate-950/80 border border-blue-500/30 rounded-xl mt-2 shadow-inner">
<span id="fileName" class="text-sm text-slate-300 truncate font-medium flex items-center"></span>
<button type="button" id="removeFileBtn" class="p-2 bg-red-500/10 hover:bg-red-500/20 text-red-400 rounded-lg transition-colors flex items-center justify-center">
<i class="ph ph-trash text-lg"></i>
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
<div>
<label for="pinInput" class="block text-sm font-medium text-slate-400 mb-2">Custom PIN (Optional)</label>
<input type="password" id="pinInput" placeholder="Add an extra layer of security" class="w-full bg-slate-950/50 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 placeholder-slate-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all">
</div>
<div class="flex flex-col justify-center pt-1 md:pt-6">
<label class="relative inline-flex items-center cursor-pointer group">
<input type="checkbox" id="geoToggle" class="sr-only peer">
<div class="w-11 h-6 bg-slate-800 border border-slate-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 transition-colors"></div>
<span class="ml-3 text-sm font-medium text-slate-300 group-hover:text-white transition-colors flex items-center gap-1.5">
<i class="ph ph-map-pin text-emerald-400"></i> Enable Geofencing
</span>
</label>
<p class="text-[10px] text-slate-500 mt-2 ml-14">Locks payload to your current GPS location.</p>
</div>
</div>
<button type="button" id="encryptBtn" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold text-lg py-4 rounded-xl transition-all shadow-[0_0_20px_rgba(37,99,235,0.3)] flex items-center justify-center gap-2 group mt-6">
<i class="ph ph-shield-check text-xl"></i> Encrypt Payload
</button>
</div>
<div id="resultContainer" class="hidden mt-8 p-6 bg-slate-900 border border-emerald-500/30 rounded-2xl shadow-inner relative overflow-hidden">
<div class="absolute -top-10 -right-10 w-32 h-32 bg-emerald-500/10 rounded-full blur-2xl pointer-events-none"></div>
<h3 class="text-emerald-400 font-semibold mb-2 flex items-center gap-2 relative z-10"><i class="ph ph-check-circle"></i> Payload Encrypted Successfully</h3>
<p class="text-xs text-slate-400 mb-6 relative z-10">Share this link securely. It will burn permanently after one read.</p>
<div class="flex gap-2 relative z-10 mb-6">
<input type="text" id="linkOutput" readonly class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-3 text-sm text-slate-300 focus:outline-none font-mono selection:bg-emerald-500/30">
<button id="copyBtn" class="bg-blue-600 hover:bg-blue-500 px-5 py-3 rounded-lg text-white transition-colors flex items-center justify-center shadow-lg">
<i class="ph ph-copy text-lg"></i>
</button>
</div>
<div class="relative z-10 flex flex-col items-center justify-center border-t border-slate-800 pt-6">
<p class="text-xs text-slate-500 uppercase tracking-widest font-semibold mb-4">Scan to Open</p>
<div class="bg-white p-3 rounded-xl shadow-[0_0_15px_rgba(0,0,0,0.5)]">
<div id="qrcode"></div>
</div>
</div>
</div>
</main>
<article class="space-y-16 border-t border-slate-800/50 pt-12">
<section class="max-w-3xl mx-auto text-center">
<h2 class="text-2xl font-bold text-white mb-4">What is the ZeroKey Encryptor?</h2>
<p class="text-slate-400 leading-relaxed text-sm mb-4">
ZeroKey is an advanced, client-side encryption tool designed for secure, ephemeral payload delivery. By utilizing your browser's native <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">Web Crypto API</a>, we ensure that your sensitive messages and files are locked using military-grade AES-256-GCM encryption <em>before</em> they ever leave your device.
</p>
<p class="text-slate-400 leading-relaxed text-sm mb-6">
Because we operate on a strict zero-knowledge framework, our servers only store unreadable ciphertext. The decryption key is generated locally and embedded in the URL fragment, meaning we fundamentally cannot read your data.
</p>
<a href="/about" class="inline-flex items-center justify-center gap-2 bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 px-6 py-2.5 rounded-lg transition-colors text-sm font-medium">
<i class="ph ph-book-open"></i> Explore our Technical Architecture
</a>
</section>
<hr class="border-slate-800/50">
<section class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold text-white mb-8 flex items-center gap-2">
<i class="ph ph-list-numbers text-blue-400"></i> How to Generate a Secure Link
</h2>
<ol class="space-y-6">
<li class="flex gap-4 p-4 rounded-xl bg-slate-900/30 border border-slate-800/50">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-900/50 border border-blue-500/30 flex items-center justify-center text-blue-400 font-bold">1</div>
<div>
<h3 class="text-white font-semibold">Draft Your Payload</h3>
<p class="text-sm text-slate-400 mt-1">Type your private message into the text box. Optionally, attach an image or document up to 2MB in size.</p>
</div>
</li>
<li class="flex gap-4 p-4 rounded-xl bg-slate-900/30 border border-slate-800/50">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-900/50 border border-blue-500/30 flex items-center justify-center text-blue-400 font-bold">2</div>
<div>
<h3 class="text-white font-semibold">Add Security Constraints (Optional)</h3>
<p class="text-sm text-slate-400 mt-1">Enhance security by requiring a custom PIN to decrypt, or toggle <strong>Geofencing</strong> to restrict decryption to your exact current GPS location.</p>
</div>
</li>
<li class="flex gap-4 p-4 rounded-xl bg-slate-900/30 border border-slate-800/50">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-900/50 border border-blue-500/30 flex items-center justify-center text-blue-400 font-bold">3</div>
<div>
<h3 class="text-white font-semibold">Encrypt and Distribute</h3>
<p class="text-sm text-slate-400 mt-1">Click the Encrypt button. Copy the generated `#hash` URL and send it to your recipient. The data will permanently self-destruct from the database immediately after they read it.</p>
</div>
</li>
</ol>
</section>
<hr class="border-slate-800/50">
<section class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold text-white mb-8 flex items-center gap-2">
<i class="ph ph-question text-emerald-400"></i> Frequently Asked Questions
</h2>
<div class="space-y-4">
<details class="group glass-panel rounded-xl bg-slate-900/40 border border-slate-800 [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-white">
Is my unencrypted data sent to your servers?
<i class="ph ph-caret-down text-slate-400 transition-transform group-open:-rotate-180"></i>
</summary>
<div class="px-5 pb-5 text-slate-400 text-sm leading-relaxed border-t border-slate-800/50 pt-4 mt-2">
Absolutely not. ZeroKey relies entirely on client-side encryption. Your data is encrypted locally within your device's RAM. We only receive and store the randomized ciphertext. For more details, read our <a href="/privacy" class="text-blue-400 hover:underline">Privacy Policy</a>.
</div>
</details>
<details class="group glass-panel rounded-xl bg-slate-900/40 border border-slate-800 [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-white">
What is the maximum file size I can encrypt?
<i class="ph ph-caret-down text-slate-400 transition-transform group-open:-rotate-180"></i>
</summary>
<div class="px-5 pb-5 text-slate-400 text-sm leading-relaxed border-t border-slate-800/50 pt-4 mt-2">
Currently, the limit is 2MB per payload. Because the Web Crypto API processes encryption entirely in your browser memory, attempting to encrypt massive files can cause mobile browsers to freeze or crash.
</div>
</details>
<details class="group glass-panel rounded-xl bg-slate-900/40 border border-slate-800 [&_summary::-webkit-details-marker]:hidden">
<summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-white">
What happens if someone intercepts the link?
<i class="ph ph-caret-down text-slate-400 transition-transform group-open:-rotate-180"></i>
</summary>
<div class="px-5 pb-5 text-slate-400 text-sm leading-relaxed border-t border-slate-800/50 pt-4 mt-2">
The link contains the decryption key in the `#hash` fragment. If intercepted, the third party could read it. However, because it is a "burn-after-reading" system, the moment the interceptor reads it, the file is destroyed. When your intended recipient tries to open it, they will see a "Vault Destroyed" error, instantly alerting you that the channel was compromised.
</div>
</details>
</div>
</section>
</article>
</div>
<footer class="border-t border-slate-800/50 bg-[#0f172a] relative z-10 pt-12 pb-8 mt-auto">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
<div class="flex items-center gap-2 text-slate-100 font-bold text-xl tracking-tight">
<i class="ph ph-fingerprint text-slate-500"></i> ZeroKey
</div>
<div class="flex flex-wrap justify-center gap-6 text-sm font-medium text-slate-500">
<a href="/about" class="hover:text-blue-400 transition-colors">About</a>
<a href="/privacy" class="hover:text-blue-400 transition-colors">Privacy Policy</a>
<a href="/terms" class="hover:text-blue-400 transition-colors">Terms & Conditions</a>
<a href="/disclaimer" class="hover:text-blue-400 transition-colors">Disclaimer</a>
<a href="/cookie-policy" class="hover:text-blue-400 transition-colors">Cookie Policy</a>
<a href="/contact" class="hover:text-blue-400 transition-colors">Contact</a>
<a href="/donate" class="hover:text-red-400 transition-colors text-red-500/70">Donate</a>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-center text-xs text-slate-600 border-t border-slate-800/50 pt-6">
<p>© 2026 ZeroKey. All rights reserved.</p>
<p class="mt-2 md:mt-0">Built for digital privacy by <a href="https://github.com/kdippan" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:text-blue-300 font-semibold transition-colors">Dippan Bhusal</a>.</p>
</div>
</div>
</footer>
<script src="/app.js"></script>
<script src="/script.js"></script>
</body>
</html>