-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
518 lines (467 loc) · 39.7 KB
/
Copy pathindex.html
File metadata and controls
518 lines (467 loc) · 39.7 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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZeroKey | Secure, Zero-Knowledge Encrypted Payload Delivery</title>
<meta name="description" content="Learn how to send highly secure, geofenced, self-destructing messages. ZeroKey uses client-side AES-GCM encryption for a strict zero-knowledge architecture.">
<meta name="keywords" content="encrypted messaging, zero-knowledge proof, secure payload delivery, AES-GCM encryption, self-destructing message, secure file share, how to encrypt text, privacy tools">
<meta name="author" content="Dippan Bhusal">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<link rel="canonical" href="https://zerokey.vercel.app/">
<meta property="og:type" content="website">
<meta property="og:url" content="https://zerokey.vercel.app/">
<meta property="og:site_name" content="ZeroKey">
<meta property="og:title" content="ZeroKey | Client-Side Encrypted Payloads">
<meta property="og:description" content="Share secrets without leaving a trace. Client-side encryption, zero-knowledge architecture, and self-destructing media.">
<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="ZeroKey | Secure Client-Side Share">
<meta property="twitter:description" content="Share secrets without leaving a trace. Client-side encryption, zero-knowledge architecture, and self-destructing media.">
<meta property="twitter:image" content="https://zerokey.vercel.app/assets/og/index.png">
<!-- 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 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebSite",
"name": "ZeroKey",
"alternateName": ["Zero Key"],
"url": "https://zerokey.vercel.app/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://zerokey.vercel.app/tools?q={search_term_string}",
"query-input": "required name=search_term_string"
}
},
{
"@type": "SoftwareApplication",
"name": "ZeroKey Vault",
"operatingSystem": "Web Browser",
"applicationCategory": "SecurityApplication",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
"description": "A zero-knowledge payload delivery system utilizing client-side AES-GCM encryption.",
"creator": { "@type": "Person", "name": "Dippan Bhusal", "url": "https://github.com/kdippan" }
},
{
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Can ZeroKey read my messages?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. ZeroKey uses client-side encryption. Your data is encrypted in your browser before being sent to our servers. We do not have the decryption keys."
}
},
{
"@type": "Question",
"name": "What happens after a message is read?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Once the recipient opens the link and decrypts the payload, it is permanently deleted from our database using a Burn-After-Reading mechanism."
}
}
]
}
]
}
</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="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="manifest" href="/assets/site.webmanifest">
<meta name="msapplication-TileColor" content="#0f172a">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<style>
/* Smooth scrolling */
html { scroll-behavior: smooth; }
/* Architecture Diagram Animations */
@keyframes pulse-glow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); box-shadow: 0 0 25px rgba(59, 130, 246, 0.4); }
}
.animate-pulse-glow {
animation: pulse-glow 3s infinite ease-in-out;
}
@keyframes data-flow {
0% { transform: translateX(0); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}
.animate-data-flow {
animation: data-flow 2s infinite linear;
}
/* Scroll Reveal Animation Classes */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }
</style>
<link rel="stylesheet" href="/style.css">
<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>
</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="parallax fixed top-0 left-1/4 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[150px] pointer-events-none -z-10 will-change-transform" data-speed="0.15"></div>
<div class="parallax fixed top-[40%] right-1/4 w-[600px] h-[600px] bg-emerald-600/10 rounded-full blur-[150px] pointer-events-none -z-10 will-change-transform" data-speed="0.1"></div>
<div class="parallax fixed bottom-0 left-1/3 w-[400px] h-[400px] bg-purple-600/10 rounded-full blur-[150px] pointer-events-none -z-10 will-change-transform" data-speed="0.2"></div>
<nav class="relative z-50 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">
<a href="/" class="flex items-center gap-2 text-slate-100 font-bold text-2xl tracking-tight group">
<i class="ph ph-fingerprint text-blue-500 group-hover:rotate-12 transition-transform"></i> ZeroKey
</a>
<div class="hidden md:flex gap-6 text-sm font-medium text-slate-400 items-center">
<a href="/about" class="hover:text-white transition-colors">How it Works</a>
<a href="/tools" class="hover:text-white transition-colors">Tools</a>
<a href="/blog" class="hover:text-white transition-colors">Blog</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 group"><i class="ph-fill ph-heart text-red-500 group-hover:scale-110 transition-transform"></i> Support</a>
</div>
<a href="/encrypt" class="bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-5 py-2 rounded-lg transition-all shadow-[0_0_15px_rgba(37,99,235,0.3)] hover:shadow-[0_0_25px_rgba(37,99,235,0.5)] hover:-translate-y-0.5">
Launch Vault
</a>
</div>
</nav>
<main class="relative z-10 flex-grow">
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16 text-center reveal">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold uppercase tracking-wider mb-6 hover:bg-emerald-500/20 transition-colors cursor-default">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
E2EE Systems Operational
</div>
<h1 class="text-5xl md:text-7xl font-extrabold text-white tracking-tight mb-6 leading-tight">
Share Secrets. <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Leave No Trace.</span>
</h1>
<p class="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
ZeroKey is a zero-knowledge payload delivery system. Send encrypted text and files that self-destruct upon reading. We don't hold your keys, and we can't read your data.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="/encrypt" class="w-full sm:w-auto bg-blue-600 hover:bg-blue-500 text-white font-semibold text-lg px-8 py-4 rounded-xl transition-all duration-300 shadow-[0_0_20px_rgba(37,99,235,0.3)] hover:shadow-[0_0_40px_rgba(37,99,235,0.4)] hover:-translate-y-1 flex items-center justify-center gap-2 group">
<i class="ph ph-lock-key text-2xl group-hover:scale-110 transition-transform"></i> Encrypt a Payload
</a>
</div>
<div class="relative mx-auto max-w-4xl group">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-emerald-600 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<img src="/assets/og/index.png" alt="ZeroKey dashboard demonstrating client-side AES-GCM encryption and self-destructing message creation" class="relative rounded-2xl shadow-2xl border border-slate-700/50 w-full object-cover aspect-video bg-slate-900/50 transition-transform duration-700 group-hover:scale-[1.01]">
</div>
</section>
<section class="bg-slate-900/30 border-y border-slate-800/50 py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
<h2 class="text-3xl font-bold text-white mb-10 text-center">5 Reasons to Use Client-Side Encryption</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="glass-panel p-6 rounded-2xl bg-slate-900/60 border border-slate-800 transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_15px_30px_-5px_rgba(0,0,0,0.5)] hover:border-slate-600 hover:bg-slate-800/80 group cursor-default">
<span class="text-4xl font-black text-blue-500/20 absolute -mt-4 -ml-2 group-hover:text-blue-500/40 transition-colors">01</span>
<h3 class="text-xl font-bold text-white mb-2 relative z-10 group-hover:text-blue-300 transition-colors">Absolute Privacy</h3>
<p class="text-slate-400 text-sm leading-relaxed relative z-10 group-hover:text-slate-300 transition-colors">Unencrypted plaintext never leaves your device. We fundamentally cannot read, scan, or monetize your private data.</p>
</article>
<article class="glass-panel p-6 rounded-2xl bg-slate-900/60 border border-slate-800 transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_15px_30px_-5px_rgba(0,0,0,0.5)] hover:border-slate-600 hover:bg-slate-800/80 group cursor-default">
<span class="text-4xl font-black text-emerald-500/20 absolute -mt-4 -ml-2 group-hover:text-emerald-500/40 transition-colors">02</span>
<h3 class="text-xl font-bold text-white mb-2 relative z-10 group-hover:text-emerald-300 transition-colors">Burn After Reading</h3>
<p class="text-slate-400 text-sm leading-relaxed relative z-10 group-hover:text-slate-300 transition-colors">Data is completely eradicated from our PostgreSQL database the millisecond it is decrypted by the recipient.</p>
</article>
<article class="glass-panel p-6 rounded-2xl bg-slate-900/60 border border-slate-800 transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_15px_30px_-5px_rgba(0,0,0,0.5)] hover:border-slate-600 hover:bg-slate-800/80 group cursor-default">
<span class="text-4xl font-black text-purple-500/20 absolute -mt-4 -ml-2 group-hover:text-purple-500/40 transition-colors">03</span>
<h3 class="text-xl font-bold text-white mb-2 relative z-10 group-hover:text-purple-300 transition-colors">Biometric Security</h3>
<p class="text-slate-400 text-sm leading-relaxed relative z-10 group-hover:text-slate-300 transition-colors">Integrates with WebAuthn to require physical human presence (TouchID/FaceID), blocking chat-bots from prematurely burning links.</p>
</article>
<article class="glass-panel p-6 rounded-2xl bg-slate-900/60 border border-slate-800 transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_15px_30px_-5px_rgba(0,0,0,0.5)] hover:border-slate-600 hover:bg-slate-800/80 group cursor-default">
<span class="text-4xl font-black text-orange-500/20 absolute -mt-4 -ml-2 group-hover:text-orange-500/40 transition-colors">04</span>
<h3 class="text-xl font-bold text-white mb-2 relative z-10 group-hover:text-orange-300 transition-colors">Geofencing</h3>
<p class="text-slate-400 text-sm leading-relaxed relative z-10 group-hover:text-slate-300 transition-colors">Restrict payload decryption to a specific 50-meter GPS radius. If they aren't at the location, the data self-destructs.</p>
</article>
<article class="glass-panel p-6 rounded-2xl bg-slate-900/60 border border-slate-800 md:col-span-2 lg:col-span-1 transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_15px_30px_-5px_rgba(0,0,0,0.5)] hover:border-slate-600 hover:bg-slate-800/80 group cursor-default">
<span class="text-4xl font-black text-pink-500/20 absolute -mt-4 -ml-2 group-hover:text-pink-500/40 transition-colors">05</span>
<h3 class="text-xl font-bold text-white mb-2 relative z-10 group-hover:text-pink-300 transition-colors">Open Architecture</h3>
<p class="text-slate-400 text-sm leading-relaxed relative z-10 group-hover:text-slate-300 transition-colors">Read our transparent <a href="/about" class="text-blue-400 hover:underline">technical breakdown</a> to understand exactly how the cryptographic engine works.</p>
</article>
</div>
</div>
</section>
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 reveal">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-semibold uppercase tracking-wider mb-4 hover:bg-blue-500/20 transition-colors cursor-default">
<i class="ph-fill ph-graph"></i> Architecture
</div>
<h2 class="text-3xl font-bold text-white mb-4">How Zero-Knowledge Works</h2>
<p class="text-slate-400 max-w-2xl mx-auto">Visualizing the flow of data from your device, across the network, and to the recipient. Your decryption key never touches our servers.</p>
</div>
<div class="relative bg-slate-900/50 border border-slate-800 rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden mt-8 hidden md:block hover:border-slate-700 transition-colors duration-500">
<div class="absolute top-[45%] left-[20%] w-20 h-0.5 bg-blue-500/50 animate-data-flow"></div>
<div class="absolute top-[45%] left-[55%] w-20 h-0.5 bg-emerald-500/50 animate-data-flow"></div>
<div class="flex items-center justify-between relative z-10">
<div class="flex flex-col items-center w-1/3 text-center group cursor-default">
<div class="w-24 h-24 rounded-2xl bg-slate-800 border border-slate-600 flex items-center justify-center text-blue-400 text-4xl mb-4 shadow-lg relative z-10 animate-pulse-glow group-hover:border-blue-500 transition-colors duration-300">
<i class="ph ph-laptop"></i>
</div>
<h4 class="text-white font-bold text-lg group-hover:text-blue-300 transition-colors">Your Browser</h4>
<p class="text-sm text-slate-400 mt-2">Data is encrypted locally using <strong class="text-blue-300">AES-GCM</strong>. A key is appended to the URL fragment.</p>
</div>
<div class="h-0.5 w-full bg-slate-800 relative -mx-8 flex-1 group cursor-default">
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-emerald-500/20 group-hover:opacity-100 opacity-50 transition-opacity duration-300"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#020617] border border-slate-700 px-3 py-1 rounded-full text-xs text-slate-400 whitespace-nowrap group-hover:text-white group-hover:border-slate-500 transition-colors">
<i class="ph ph-lock-key"></i> Ciphertext Only
</div>
</div>
<div class="flex flex-col items-center w-1/3 text-center group cursor-default">
<div class="w-24 h-24 rounded-full bg-slate-800 border border-slate-600 flex items-center justify-center text-slate-400 text-4xl mb-4 shadow-lg relative z-10 group-hover:text-white group-hover:border-slate-400 transition-colors duration-300">
<i class="ph ph-database"></i>
</div>
<h4 class="text-white font-bold text-lg">ZeroKey Database</h4>
<p class="text-sm text-slate-400 mt-2">We store the scrambled blob. We are mathematically blind to the actual payload contents.</p>
</div>
<div class="h-0.5 w-full bg-slate-800 relative -mx-8 flex-1 group cursor-default">
<div class="absolute inset-0 bg-gradient-to-r from-slate-800 to-emerald-500/50 group-hover:opacity-100 opacity-50 transition-opacity duration-300"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#020617] border border-slate-700 px-3 py-1 rounded-full text-xs text-emerald-400 whitespace-nowrap group-hover:border-emerald-500 group-hover:text-emerald-300 transition-colors">
<i class="ph ph-fire"></i> Fetch & Burn
</div>
</div>
<div class="flex flex-col items-center w-1/3 text-center group cursor-default">
<div class="w-24 h-24 rounded-2xl bg-emerald-900/30 border border-emerald-500/50 flex items-center justify-center text-emerald-400 text-4xl mb-4 shadow-[0_0_30px_rgba(16,185,129,0.2)] relative z-10 group-hover:bg-emerald-800/40 transition-colors duration-300">
<i class="ph ph-device-mobile"></i>
</div>
<h4 class="text-white font-bold text-lg group-hover:text-emerald-300 transition-colors">Recipient Device</h4>
<p class="text-sm text-slate-400 mt-2">URL hash key decrypts the blob locally. The database record is permanently destroyed.</p>
</div>
</div>
</div>
<div class="md:hidden space-y-6 mt-8">
<div class="bg-slate-900/50 border border-slate-800 rounded-xl p-6 text-center hover:border-blue-500/50 transition-colors">
<i class="ph ph-laptop text-4xl text-blue-400 mb-2"></i>
<h4 class="text-white font-bold">1. Your Browser</h4>
<p class="text-sm text-slate-400 mt-1">Data encrypted locally via AES-GCM.</p>
</div>
<div class="text-center text-slate-600"><i class="ph-bold ph-arrow-down text-2xl"></i></div>
<div class="bg-slate-900/50 border border-slate-800 rounded-xl p-6 text-center hover:border-slate-500 transition-colors">
<i class="ph ph-database text-4xl text-slate-400 mb-2"></i>
<h4 class="text-white font-bold">2. ZeroKey Database</h4>
<p class="text-sm text-slate-400 mt-1">Ciphertext stored. Mathematically blind to contents.</p>
</div>
<div class="text-center text-slate-600"><i class="ph-bold ph-arrow-down text-2xl"></i></div>
<div class="bg-emerald-900/20 border border-emerald-500/30 rounded-xl p-6 text-center hover:border-emerald-400 transition-colors">
<i class="ph ph-device-mobile text-4xl text-emerald-400 mb-2"></i>
<h4 class="text-white font-bold">3. Recipient Device</h4>
<p class="text-sm text-slate-400 mt-1">Decrypted locally. Database record burned.</p>
</div>
</div>
</section>
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16 mb-8 reveal">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-semibold uppercase tracking-wider mb-4 cursor-default hover:bg-purple-500/20 transition-colors">
<i class="ph-fill ph-terminal-window"></i> Built For Engineers
</div>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Free Developer Security Tools</h2>
<p class="text-slate-400 max-w-2xl mx-auto text-lg">We extracted the cryptographic primitives powering ZeroKey and open-sourced them into free, client-side tools for developers.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
<a href="/jwt-decoder" class="glass-panel p-6 rounded-2xl bg-slate-900/40 border border-slate-800 hover:border-emerald-500/50 hover:-translate-y-1 hover:bg-slate-800/60 hover:shadow-xl transition-all duration-300 group">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 text-2xl mb-4 group-hover:bg-emerald-500 group-hover:text-white transition-all shadow-inner group-hover:scale-110">
<i class="ph ph-brackets-curly"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2 group-hover:text-emerald-400 transition-colors">Secure JWT Decoder</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-4 group-hover:text-slate-300 transition-colors">Decode JSON Web Tokens entirely offline without sending session data to external servers.</p>
</a>
<a href="/rsa-key-generator" class="glass-panel p-6 rounded-2xl bg-slate-900/40 border border-slate-800 hover:border-blue-500/50 hover:-translate-y-1 hover:bg-slate-800/60 hover:shadow-xl transition-all duration-300 group">
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 text-2xl mb-4 group-hover:bg-blue-500 group-hover:text-white transition-all shadow-inner group-hover:scale-110">
<i class="ph ph-key"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2 group-hover:text-blue-400 transition-colors">RSA Key Generator</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-4 group-hover:text-slate-300 transition-colors">Generate 2048/4096-bit public and private key pairs instantly using your browser's entropy.</p>
</a>
<a href="/aes-encryption-tool" class="glass-panel p-6 rounded-2xl bg-slate-900/40 border border-slate-800 hover:border-purple-500/50 hover:-translate-y-1 hover:bg-slate-800/60 hover:shadow-xl transition-all duration-300 group">
<div class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center text-purple-400 text-2xl mb-4 group-hover:bg-purple-500 group-hover:text-white transition-all shadow-inner group-hover:scale-110">
<i class="ph ph-lock-key"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">AES-GCM Encryptor</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-4 group-hover:text-slate-300 transition-colors">Test AES-256-GCM authenticated encryption and decryption logic directly in your browser.</p>
</a>
<a href="/hmac-generator" class="glass-panel p-6 rounded-2xl bg-slate-900/40 border border-slate-800 hover:border-orange-500/50 hover:-translate-y-1 hover:bg-slate-800/60 hover:shadow-xl transition-all duration-300 group">
<div class="w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center text-orange-400 text-2xl mb-4 group-hover:bg-orange-500 group-hover:text-white transition-all shadow-inner group-hover:scale-110">
<i class="ph ph-stamp"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2 group-hover:text-orange-400 transition-colors">HMAC Generator</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-4 group-hover:text-slate-300 transition-colors">Calculate Hash-based Message Authentication Codes to securely verify webhooks and APIs.</p>
</a>
</div>
<div class="text-center">
<a href="/tools" class="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white font-semibold transition-all duration-300 hover:shadow-[0_0_20px_rgba(255,255,255,0.1)] hover:-translate-y-1 text-lg group">
<i class="ph ph-wrench group-hover:rotate-12 transition-transform"></i> Explore All Developer Tools
</a>
</div>
</section>
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16 mb-8 border-t border-slate-800/50 reveal">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-4 hover:bg-indigo-500/20 transition-colors cursor-default">
<i class="ph-fill ph-books"></i> Open Source Architecture
</div>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">ZeroKey Engineering Blog</h2>
<p class="text-slate-400 max-w-2xl mx-auto text-lg">Dive deep into client-side cryptography, browser security, and how we built a truly zero-knowledge payload delivery system.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
<a href="/blog/the-url-fragment-exploit-zero-knowledge" class="glass-panel p-6 rounded-2xl bg-slate-900/40 border border-slate-800 hover:border-indigo-500/50 hover:bg-slate-800/50 hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 group flex flex-col">
<div class="w-12 h-12 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 text-2xl mb-4 group-hover:bg-indigo-500 group-hover:text-white transition-all shadow-inner group-hover:scale-110">
<i class="ph ph-link"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2 group-hover:text-indigo-300 transition-colors">The URL Fragment Exploit</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-4 flex-grow group-hover:text-slate-300 transition-colors">How we use the URL hash to securely pass decryption keys without the server ever seeing them.</p>
<div class="text-indigo-400 text-sm font-semibold flex items-center gap-1 group-hover:gap-2 transition-all mt-auto">Read Article <i class="ph ph-arrow-right font-bold"></i></div>
</a>
<a href="/blog/why-xss-defeats-client-side-encryption" class="glass-panel p-6 rounded-2xl bg-slate-900/40 border border-slate-800 hover:border-fuchsia-500/50 hover:bg-slate-800/50 hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 group flex flex-col">
<div class="w-12 h-12 rounded-xl bg-fuchsia-500/10 flex items-center justify-center text-fuchsia-400 text-2xl mb-4 group-hover:bg-fuchsia-500 group-hover:text-white transition-all shadow-inner group-hover:scale-110">
<i class="ph ph-bug"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2 group-hover:text-fuchsia-300 transition-colors">Why XSS Defeats Encryption</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-4 flex-grow group-hover:text-slate-300 transition-colors">Military-grade AES encryption is useless if an attacker can run JavaScript on your page.</p>
<div class="text-fuchsia-400 text-sm font-semibold flex items-center gap-1 group-hover:gap-2 transition-all mt-auto">Read Article <i class="ph ph-arrow-right font-bold"></i></div>
</a>
<a href="/blog/how-to-prevent-ui-freezing-with-web-workers" class="glass-panel p-6 rounded-2xl bg-slate-900/40 border border-slate-800 hover:border-orange-500/50 hover:bg-slate-800/50 hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 group flex flex-col">
<div class="w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center text-orange-400 text-2xl mb-4 group-hover:bg-orange-500 group-hover:text-white transition-all shadow-inner group-hover:scale-110">
<i class="ph ph-cpu"></i>
</div>
<h3 class="text-lg font-bold text-white mb-2 group-hover:text-orange-300 transition-colors">Preventing UI Freezing</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-4 flex-grow group-hover:text-slate-300 transition-colors">Offload heavy Web Crypto API operations to background threads using Web Workers.</p>
<div class="text-orange-400 text-sm font-semibold flex items-center gap-1 group-hover:gap-2 transition-all mt-auto">Read Article <i class="ph ph-arrow-right font-bold"></i></div>
</a>
</div>
<div class="text-center">
<a href="/blog" class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white font-semibold transition-all duration-300 hover:shadow-lg hover:-translate-y-1 group">
View All Technical Articles <i class="ph ph-arrow-right font-bold group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</section>
<section class="bg-slate-900/30 border-t border-slate-800/50 py-20 reveal">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-white mb-10 text-center">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 hover:border-slate-600 transition-colors">
<summary class="flex items-center justify-between p-6 cursor-pointer font-semibold text-white">
Can ZeroKey or law enforcement read my messages?
<i class="ph ph-caret-down text-slate-400 transition-transform group-open:-rotate-180"></i>
</summary>
<div class="px-6 pb-6 text-slate-400 text-sm leading-relaxed border-t border-slate-800/50 pt-4 mt-2">
No. Because of our <a href="/about" class="text-blue-400 hover:underline">zero-knowledge architecture</a>, we only store encrypted ciphertext. The decryption key is generated locally and sent in the URL fragment (after the #), which browsers do not transmit over the network. Without the URL, the data is mathematically unreadable.
</div>
</details>
<details class="group glass-panel rounded-xl bg-slate-900/40 border border-slate-800 [&_summary::-webkit-details-marker]:hidden hover:border-slate-600 transition-colors">
<summary class="flex items-center justify-between p-6 cursor-pointer font-semibold text-white">
What happens to my uploaded images?
<i class="ph ph-caret-down text-slate-400 transition-transform group-open:-rotate-180"></i>
</summary>
<div class="px-6 pb-6 text-slate-400 text-sm leading-relaxed border-t border-slate-800/50 pt-4 mt-2">
Images are converted to ArrayBuffers and encrypted on your device. We store the scrambled blob in a secure Supabase bucket. Once the recipient views the image, a `DELETE` command is triggered, and the blob is permanently destroyed. Read our <a href="/privacy" class="text-blue-400 hover:underline">Privacy Policy</a> for more data retention details.
</div>
</details>
<details class="group glass-panel rounded-xl bg-slate-900/40 border border-slate-800 [&_summary::-webkit-details-marker]:hidden hover:border-slate-600 transition-colors">
<summary class="flex items-center justify-between p-6 cursor-pointer font-semibold text-white">
Why do I need to scan my fingerprint to read a message?
<i class="ph ph-caret-down text-slate-400 transition-transform group-open:-rotate-180"></i>
</summary>
<div class="px-6 pb-6 text-slate-400 text-sm leading-relaxed border-t border-slate-800/50 pt-4 mt-2">
When you share a link on apps like iMessage, WhatsApp, or Slack, automated bots scan the link to generate a preview image. Without WebAuthn (Biometric Gatekeeping), these bots would accidentally "read" the message and trigger the self-destruct sequence before the actual human clicked it.
</div>
</details>
</div>
</div>
</section>
</main>
<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 group cursor-default">
<i class="ph ph-fingerprint text-slate-500 group-hover:text-blue-500 transition-colors"></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="/tools" class="hover:text-blue-400 transition-colors">Developer Tools</a>
<a href="/blog" class="hover:text-blue-400 transition-colors">Blog</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>
document.addEventListener('DOMContentLoaded', () => {
// 1. Hardware Accelerated Parallax Engine
const parallaxElements = document.querySelectorAll('.parallax');
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(() => {
let scrollY = window.scrollY;
parallaxElements.forEach(el => {
let speed = parseFloat(el.getAttribute('data-speed')) || 0.1;
el.style.transform = `translateY(${scrollY * speed}px)`;
});
ticking = false;
});
ticking = true;
}
}, { passive: true });
// 2. Premium Scroll Reveal Animation via Intersection Observer
const reveals = document.querySelectorAll('.reveal');
const revealOptions = {
threshold: 0.1, // Trigger when 10% of the element is visible
rootMargin: "0px 0px -50px 0px"
};
const revealOnScroll = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('active');
// Stop observing once revealed to prevent re-animating
observer.unobserve(entry.target);
}
});
}, revealOptions);
reveals.forEach(reveal => {
revealOnScroll.observe(reveal);
});
});
</script>
</body>
</html>