-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlanding.html
More file actions
486 lines (438 loc) · 23.2 KB
/
landing.html
File metadata and controls
486 lines (438 loc) · 23.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="icons/textlock.ico" type="image/x-icon">
<title>TextLock - Time-Locked Encryption for Your Secrets</title>
<link rel="stylesheet" href="landing.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="nav-container">
<div class="nav-logo">
<span class="logo" aria-hidden="true"></span>
<span class="logo-text">TextLock</span>
</div>
<a href="app.html" class="nav-cta">Launch App</a>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="hero-container">
<div class="hero-badge fade-in">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2L8 14M2 8L14 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
End-to-End Encrypted
</div>
<h1 class="hero-title">
<span class="hero-title-line fade-in-up delay-1">Lock Your Secrets</span>
<span class="hero-title-line fade-in-up delay-2">In Time</span>
</h1>
<p class="hero-description fade-in-up delay-3">
Time-locked encryption that keeps your messages secure until the perfect moment.
Write now, reveal later.
</p>
<div class="hero-cta fade-in-up delay-4">
<a href="app.html" class="btn btn-primary">Get Started Free</a>
<a href="#how-to-install" class="btn btn-secondary">Learn More</a>
</div>
</div>
<div class="hero-visual fade-in delay-5">
<div class="lock-animation">
<div class="lock-body"></div>
<div class="lock-shackle"></div>
</div>
</div>
<div class="scroll-indicator fade-in delay-6">
<div class="scroll-line"></div>
<span>Scroll</span>
</div>
</section>
<!-- How to Install Section -->
<section class="how-to-install" id="how-to-install">
<div class="install-guide-container">
<div class="section-header">
<h2 class="section-title scroll-reveal">Install as an App</h2>
<p class="section-subtitle scroll-reveal">Get the full experience with our Progressive Web App</p>
</div>
<!-- Platform Tabs -->
<div class="platform-tabs scroll-reveal">
<button class="platform-tab active" data-platform="android">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.6,9.48l1.84-3.18c0.16-0.31,0.04-0.69-0.26-0.85c-0.29-0.15-0.65-0.06-0.83,0.22l-1.88,3.24 c-2.86-1.21-6.08-1.21-8.94,0L5.65,5.67c-0.19-0.29-0.58-0.38-0.87-0.2C4.5,5.65,4.41,6.01,4.56,6.3L6.4,9.48 C3.3,11.25,1.28,14.44,1,18h22C22.72,14.44,20.7,11.25,17.6,9.48z M7,15.25c-0.69,0-1.25-0.56-1.25-1.25 c0-0.69,0.56-1.25,1.25-1.25S8.25,13.31,8.25,14C8.25,14.69,7.69,15.25,7,15.25z M17,15.25c-0.69,0-1.25-0.56-1.25-1.25 c0-0.69,0.56-1.25,1.25-1.25s1.25,0.56,1.25,1.25C18.25,14.69,17.69,15.25,17,15.25z"/>
</svg>
Android
</button>
<button class="platform-tab" data-platform="ios">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
</svg>
iOS
</button>
<button class="platform-tab" data-platform="desktop">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM4 5h16v11H4V5zm8 14c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
</svg>
Desktop
</button>
</div>
<!-- Android Instructions -->
<div class="platform-content active" data-platform="android">
<div class="install-steps-grid scroll-reveal">
<div class="install-step">
<div class="step-badge">1</div>
<div class="step-icon">🚀</div>
<h3>Launch App</h3>
<p>Open TextLock in Chrome browser. </p>
</div>
<div class="install-step">
<div class="step-badge">2</div>
<div class="step-icon">⋮</div>
<h3>Open Menu</h3>
<p>Tap the <strong>three-dot menu (⋮)</strong> in the top-right corner of Chrome.</p>
</div>
<div class="install-step">
<div class="step-badge">3</div>
<div class="step-icon">📥</div>
<h3>Install App</h3>
<p>Select <strong>"Install app"</strong> or <strong>"Add to Home screen"</strong> from the menu.</p>
</div>
<div class="install-step">
<div class="step-badge">4</div>
<div class="step-icon">✓</div>
<h3>Confirm</h3>
<p>Tap <strong>"Install"</strong> to add TextLock to your home screen. Launch anytime like a native app!</p>
</div>
</div>
<div class="platform-note scroll-reveal">
<strong>💡 Tip:</strong> If you don't see "Install app" option, visit the page a second time or wait a few seconds after loading.
</div>
</div>
<!-- iOS Instructions -->
<div class="platform-content" data-platform="ios">
<div class="install-steps-grid scroll-reveal">
<div class="install-step">
<div class="step-badge">1</div>
<div class="step-icon">🚀</div>
<h3>Launch App</h3>
<p>Open TextLock in Safari browser. Make sure the page has fully loaded before proceeding.</p>
</div>
<div class="install-step">
<div class="step-badge">2</div>
<div class="step-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z"/>
</svg>
</div>
<h3>Tap Share</h3>
<p>Tap the <strong>Share button</strong> (square with arrow up) at the bottom of Safari.</p>
</div>
<div class="install-step">
<div class="step-badge">3</div>
<div class="step-icon">⊕</div>
<h3>Add to Home Screen</h3>
<p>Scroll down and tap <strong>"Add to Home Screen"</strong> from the options.</p>
</div>
<div class="install-step">
<div class="step-badge">4</div>
<div class="step-icon">✓</div>
<h3>Confirm</h3>
<p>Tap <strong>"Add"</strong> in the top-right corner. TextLock appears on your home screen!</p>
</div>
</div>
<div class="platform-note scroll-reveal">
<strong>📱 Note:</strong> iOS installation must be done through Safari. Chrome and other browsers on iOS don't support app installation.
</div>
</div>
<!-- Desktop Instructions -->
<div class="platform-content" data-platform="desktop">
<div class="install-steps-grid scroll-reveal">
<div class="install-step">
<div class="step-badge">1</div>
<div class="step-icon">🚀</div>
<h3>Launch App</h3>
<p>Open TextLock in Chrome, Edge, or Chromium browser. Wait for the page to load completely.</p>
</div>
<div class="install-step">
<div class="step-badge">2</div>
<div class="step-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/>
<path d="M 12 10 L 8 14 L 10 14 L 10 18 L 14 18 L 14 14 L 16 14 Z"/>
</svg>
</div>
<h3>Find Install Icon</h3>
<p>Look for the <strong>install icon</strong> in the address bar (usually on the right side, looks like a computer with arrow).</p>
</div>
<div class="install-step">
<div class="step-badge">3</div>
<div class="step-icon">📥</div>
<h3>Click Install</h3>
<p>Click the install icon and select <strong>"Install"</strong> from the popup. Or use Menu → "Install TextLock..."</p>
</div>
<div class="install-step">
<div class="step-badge">4</div>
<div class="step-icon">✓</div>
<h3>Launch</h3>
<p>TextLock opens in its own window! Find it in your apps menu or pin to taskbar.</p>
</div>
</div>
<div class="platform-note scroll-reveal">
<strong>💻 Works on:</strong> Chrome, Edge, Chromium, Brave, Opera on Windows, Linux, macOS, and ChromeOS.
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="features-container">
<div class="section-header">
<h2 class="section-title scroll-reveal">Built for Privacy</h2>
<p class="section-subtitle scroll-reveal">Military-grade encryption meets elegant simplicity</p>
</div>
<div class="features-grid">
<div class="feature-card scroll-reveal">
<div class="feature-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<rect x="10" y="14" width="12" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
<path d="M11 14V10C11 7.23858 13.2386 5 16 5C18.7614 5 21 7.23858 21 10V14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<h3 class="feature-title">Time-Locked</h3>
<p class="feature-description">Set a future unlock time. Your secrets stay encrypted until that exact moment arrives.</p>
</div>
<div class="feature-card scroll-reveal">
<div class="feature-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M16 11V16L19 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<h3 class="feature-title">Self-Destructing</h3>
<p class="feature-description">Once unlocked, you have 20 minutes to read. Then it's gone forever.</p>
</div>
<div class="feature-card scroll-reveal">
<div class="feature-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 5C16 5 8 9 8 16C8 23 16 27 16 27C16 27 24 23 24 16C24 9 16 5 16 5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="feature-title">Zero Knowledge</h3>
<p class="feature-description">All encryption happens in your browser. We never see your data.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="how-it-works" id="how-it-works">
<div class="how-container">
<h2 class="section-title scroll-reveal">How It Works</h2>
<div class="steps">
<div class="step scroll-reveal">
<div class="step-number">01</div>
<div class="step-content">
<h3 class="step-title">Write Your Message</h3>
<p class="step-description">Type anything you want to lock away - a secret, a reminder, a message to your future self.</p>
</div>
</div>
<div class="step-connector scroll-reveal"></div>
<div class="step scroll-reveal">
<div class="step-number">02</div>
<div class="step-content">
<h3 class="step-title">Set Unlock Time</h3>
<p class="step-description">Choose when you want to reveal it. Could be hours, days, or months from now.</p>
</div>
</div>
<div class="step-connector scroll-reveal"></div>
<div class="step scroll-reveal">
<div class="step-number">03</div>
<div class="step-content">
<h3 class="step-title">Encrypted & Locked</h3>
<p class="step-description">Your message is encrypted using AES-256-GCM. Even you can't read it until the time arrives.</p>
</div>
</div>
<div class="step-connector scroll-reveal"></div>
<div class="step scroll-reveal">
<div class="step-number">04</div>
<div class="step-content">
<h3 class="step-title">Reveal & Read</h3>
<p class="step-description">When the time comes, unlock your message. You'll have 20 minutes before it self-destructs.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Use Cases -->
<section class="use-cases">
<div class="use-cases-container">
<h2 class="section-title scroll-reveal">Perfect For</h2>
<div class="use-cases-grid">
<div class="use-case scroll-reveal">
<div class="use-case-emoji">💭</div>
<h3>Future Self Messages</h3>
<p>Leave advice, encouragement, or reminders for yourself in the future.</p>
</div>
<div class="use-case scroll-reveal">
<div class="use-case-emoji">🎁</div>
<h3>Timed Surprises</h3>
<p>Create surprise messages that unlock on birthdays or special occasions.</p>
</div>
<div class="use-case scroll-reveal">
<div class="use-case-emoji">🔐</div>
<h3>Sensitive Information</h3>
<p>Store passwords or private info that you need access to later.</p>
</div>
<div class="use-case scroll-reveal">
<div class="use-case-emoji">✍️</div>
<h3>Digital Time Capsules</h3>
<p>Capture thoughts and memories to unlock years from now.</p>
</div>
<div class="use-case scroll-reveal">
<div class="use-case-emoji">🎯</div>
<h3>Goal Tracking</h3>
<p>Set goals and lock motivational messages to open on target dates.</p>
</div>
<div class="use-case scroll-reveal">
<div class="use-case-emoji">📝</div>
<h3>Journaling</h3>
<p>Write daily reflections and lock them to review later periodically.</p>
</div>
</div>
</div>
</section>
<!-- Security Section -->
<section class="security" id="security">
<div class="security-container">
<div class="section-header">
<h2 class="section-title scroll-reveal">Military-Grade Security</h2>
<p class="section-subtitle scroll-reveal">Your privacy is our foundation</p>
</div>
<div class="security-grid">
<div class="security-card scroll-reveal">
<div class="security-icon">🔒</div>
<h3>Encryption Details</h3>
<div class="security-details">
<div class="security-item">
<strong>Algorithm:</strong>
<span>AES-256-GCM</span>
</div>
<div class="security-item">
<strong>Key Derivation:</strong>
<span>PBKDF2 with 100,000 iterations</span>
</div>
<div class="security-item">
<strong>Hash Function:</strong>
<span>SHA-256</span>
</div>
<div class="security-item">
<strong>Implementation:</strong>
<span>Web Crypto API (native browser)</span>
</div>
</div>
</div>
<div class="security-card scroll-reveal">
<div class="security-icon">🛡️</div>
<h3>Privacy Policy</h3>
<ul class="security-list">
<li>No data is sent to any server</li>
<li>All encryption happens locally in your browser</li>
<li>No accounts, no tracking, no analytics</li>
<li>Your notes are stored only on your device</li>
<li>We can't decrypt your messages even if we wanted to</li>
</ul>
</div>
<div class="security-card scroll-reveal">
<div class="security-icon">💻</div>
<h3>Open Source</h3>
<ul class="security-list">
<li>Fully open source and auditable</li>
<li>No hidden code or backdoors</li>
<li>Community-reviewed security</li>
<li>Transparent development process</li>
<li>Contributions welcome on GitHub</li>
</ul>
</div>
</div>
<div class="security-footer scroll-reveal">
<p class="security-note">
<strong>Note:</strong> TextLock uses client-side encryption with time-based key derivation.
The unlock time is used as part of the encryption key, making it cryptographically impossible
to decrypt the message before the specified time without the exact timestamp.
</p>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="cta-container scroll-reveal">
<h2 class="cta-title">Ready to Lock Your Secrets?</h2>
<p class="cta-description">Start using TextLock today. Free, secure, and private.</p>
<a href="app.html" class="btn btn-primary btn-large">Launch TextLock</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<div class="footer-brand">
<div class="footer-logo">
<span class="logo" aria-hidden="true"></span>
<span class="logo-text">TextLock</span>
</div>
<p class="footer-tagline">Time-locked encryption for your secrets</p>
</div>
<div class="footer-links">
<div class="footer-column">
<h4>Product</h4>
<a href="#install">Install</a>
<a href="#features">Features</a>
<a href="#how-it-works">How It Works</a>
<a href="app.html">Launch App</a>
</div>
<div class="footer-column">
<h4>Security</h4>
<a href="#security">Encryption Details</a>
<a href="#security">Privacy Policy</a>
<a href="#security">Open Source</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 TextLock. All rights reserved.</p>
</div>
</footer>
<script src="landing.js"></script>
<script>
// Register service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js')
.then(registration => {
console.log('ServiceWorker registered:', registration);
})
.catch(err => {
console.log('ServiceWorker registration failed:', err);
});
});
}
// Track when user installs the app and store the event for later use
window.addEventListener('beforeinstallprompt', (e) => {
window.deferredPrompt = e;
});
window.addEventListener('appinstalled', () => {
// Mark that user has installed the app
localStorage.setItem('textlock-installed', 'true');
console.log('TextLock installed successfully');
});
// Check if running as installed app
if (window.matchMedia('(display-mode: standalone)').matches) {
localStorage.setItem('textlock-installed', 'true');
}
</script>
</body>
</html>