-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
751 lines (683 loc) · 47.3 KB
/
index.html
File metadata and controls
751 lines (683 loc) · 47.3 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
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DisBucket - Unlimited Storage on Discord Channels</title>
<!-- SEO & Meta Tags -->
<meta name="description" content="Use a Discord channel as a lightweight, resumable object store with chunked, compressed, and optionally encrypted archives.">
<meta name="keywords" content="Discord, Object Store, Unlimited Storage, Cloud Storage, Encryption, Privacy, CLI, Python, FastAPI, DisBucket">
<meta name="author" content="Mohammed Shakib">
<meta name="creator" content="Mohammed Shakib">
<meta name="robots" content="index, follow">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://github.com/Mo-Shakib/discord-object-store">
<meta property="og:title" content="DisBucket - Unlimited Storage on Discord Channels">
<meta property="og:description" content="Secure, distributed file system using Discord as a backend. Featuring local encryption, chunked uploads, and a modern Web UI.">
<meta property="og:image" content="https://raw.githubusercontent.com/Mo-Shakib/discord-object-store/main/docs/preview.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://github.com/Mo-Shakib/discord-object-store">
<meta property="twitter:title" content="DisBucket - Unlimited Storage on Discord Channels">
<meta property="twitter:description" content="Secure, distributed file system using Discord as a backend. Featuring local encryption, chunked uploads, and a modern Web UI.">
<meta property="twitter:image" content="https://raw.githubusercontent.com/Mo-Shakib/discord-object-store/main/docs/preview.png">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 576 512%22><path fill=%22%235865F2%22 d=%22M290.8 48.6l78.4 29.7L288 109.5 206.8 78.3l78.4-29.7c1.8-.7 3.8-.7 5.7 0zM136 92.5V204.7c-1.3 .4-2.6 .8-3.9 1.3l-96 36.4C14.4 250.6 0 271.5 0 294.7V413.9c0 22.2 13.1 42.3 33.5 51.3l96 42.2c14.4 6.3 30.7 6.3 45.1 0L288 457.5l113.5 49.9c14.4 6.3 30.7 6.3 45.1 0l96-42.2c20.3-8.9 33.5-29.1 33.5-51.3V294.7c0-23.3-14.4-44.1-36.1-52.4l-96-36.4c-1.3-.5-2.6-.9-3.9-1.3V92.5c0-23.3-14.4-44.1-36.1-52.4l-96-36.4c-12.8-4.8-26.9-4.8-39.7 0l-96 36.4C150.4 48.4 136 69.3 136 92.5zM392 210.6l-82.4 31.2V152.6L392 121v89.6zM154.8 250.9l78.4 29.7L152 311.7 70.8 280.6l78.4-29.7c1.8-.7 3.8-.7 5.7 0zm18.8 204.4V354.8L256 323.2v95.9l-82.4 36.2zM421.2 250.9c1.8-.7 3.8-.7 5.7 0l78.4 29.7L424 311.7l-81.2-31.1 78.4-29.7zM523.2 421.2l-77.6 34.1V354.8L528 323.2v90.7c0 3.2-1.9 6-4.8 7.3z%22/></svg>">
<!-- Google Fonts -->
<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=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
discord: {
bg: '#313338', // Main background
dark: '#2b2d31', // Sidebar/Cards
darker: '#1e1f22', // Code blocks/Inputs
light: '#b5bac1', // Subtext
white: '#f2f3f5', // Main Text
divider: '#1f2023', // Borders
hover: '#3f4147', // Hover state
blurple: '#5865F2', // Brand Color
green: '#23a559',
yellow: '#f0b232',
red: '#f23f42'
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
animation: {
'float': 'float 6s ease-in-out infinite',
'blob': 'blob 7s infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
blob: {
'0%': { transform: 'translate(0px, 0px) scale(1)' },
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
'100%': { transform: 'translate(0px, 0px) scale(1)' },
}
}
}
}
}
</script>
<style>
/* Custom Scrollbar to match Discord */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #2b2d31;
}
::-webkit-scrollbar-thumb {
background-color: #1a1b1e;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: #2b2d31;
}
/* Animation Utilities */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Gradient Text */
.text-gradient {
background: linear-gradient(to right, #5865F2, #9ca3af);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Feature Card Glow */
.feature-card:hover {
box-shadow: 0 0 20px rgba(88, 101, 242, 0.15);
border-color: rgba(88, 101, 242, 0.5);
transform: translateY(-2px);
}
/* Code Block Styling */
.code-block {
position: relative;
overflow: hidden;
}
.code-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.02);
pointer-events: none;
}
/* Terminal Animation */
.terminal-line {
opacity: 0;
transform: translateY(6px);
animation: terminal-reveal 9s infinite;
}
.terminal-cursor {
display: inline-block;
width: 8px;
height: 1.2em;
margin-left: 4px;
background: #b5bac1;
animation: blink 1s step-end infinite;
vertical-align: middle;
}
@keyframes terminal-reveal {
0%, 12% { opacity: 0; transform: translateY(6px); }
16%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Syntax Highlighting Fake Classes */
.syntax-cmd { color: #5865F2; font-weight: bold; } /* Blue for command */
.syntax-arg { color: #f0b232; } /* Yellow for arguments */
.syntax-path { color: #23a559; } /* Green for paths */
.syntax-comment { color: #6d7178; font-style: italic; }
.syntax-prompt { color: #eb459e; }
</style>
</head>
<body class="bg-discord-bg text-discord-white font-sans antialiased selection:bg-discord-blurple selection:text-white overflow-x-hidden">
<!-- Navbar -->
<nav class="fixed top-0 w-full z-50 bg-discord-bg/80 backdrop-blur-xl border-b border-discord-divider transition-all duration-300" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<a href="#" class="flex-shrink-0 flex items-center gap-3 hover:opacity-80 transition-opacity">
<i class="fa-solid fa-cubes text-3xl text-discord-blurple"></i>
<span class="font-extrabold text-xl tracking-tight text-white">DisBucket</span>
</a>
<!-- Desktop Menu -->
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-6">
<a href="#features" class="hover:text-white text-discord-light px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-discord-dark/50">Features</a>
<a href="#how-it-works" class="hover:text-white text-discord-light px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-discord-dark/50">How it Works</a>
<a href="#setup" class="hover:text-white text-discord-light px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-discord-dark/50">Setup</a>
<a href="https://github.com/Mo-Shakib/discord-object-store" target="_blank" class="bg-discord-blurple hover:bg-indigo-500 text-white px-5 py-2 rounded-full text-sm font-bold transition-all transform hover:scale-105 shadow-lg shadow-discord-blurple/20">
<i class="fa-brands fa-github mr-2"></i>GitHub
</a>
</div>
</div>
<!-- Mobile menu button -->
<div class="-mr-2 flex md:hidden">
<button type="button" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="inline-flex items-center justify-center p-2 rounded-md text-discord-light hover:text-white hover:bg-discord-dark focus:outline-none">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="hidden md:hidden bg-discord-dark border-b border-discord-divider absolute w-full" id="mobile-menu">
<div class="px-4 pt-2 pb-6 space-y-2">
<a href="#features" class="text-discord-light hover:text-white block px-3 py-3 rounded-md text-base font-medium hover:bg-discord-hover">Features</a>
<a href="#how-it-works" class="text-discord-light hover:text-white block px-3 py-3 rounded-md text-base font-medium hover:bg-discord-hover">How it Works</a>
<a href="#setup" class="text-discord-light hover:text-white block px-3 py-3 rounded-md text-base font-medium hover:bg-discord-hover">Setup</a>
<a href="https://github.com/Mo-Shakib/discord-object-store" target="_blank" class="text-white bg-discord-blurple block px-3 py-3 rounded-md text-base font-bold mt-4 text-center">
<i class="fa-brands fa-github mr-2"></i> View on GitHub
</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
<!-- Background Blobs -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute -top-24 -left-24 w-96 h-96 bg-discord-blurple/20 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob"></div>
<div class="absolute top-48 -right-24 w-96 h-96 bg-purple-500/20 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob" style="animation-delay: 2s"></div>
<div class="absolute -bottom-32 left-1/3 w-96 h-96 bg-pink-500/20 rounded-full mix-blend-screen filter blur-[80px] opacity-30 animate-blob" style="animation-delay: 4s"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<a href="https://github.com/Mo-Shakib/discord-object-store/releases" target="_blank" class="inline-flex items-center px-4 py-1.5 rounded-full border border-discord-light/20 bg-discord-dark/50 backdrop-blur-sm mb-8 reveal hover:border-discord-blurple/50 hover:bg-discord-dark/80 transition-all group cursor-pointer">
<span class="flex h-2 w-2 relative mr-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
<span class="text-xs font-mono text-discord-light group-hover:text-white transition-colors">v4.0.0 is now available</span>
<i class="fa-solid fa-chevron-right ml-2 text-[10px] text-discord-light group-hover:translate-x-1 transition-transform"></i>
</a>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 reveal drop-shadow-2xl" style="transition-delay: 100ms;">
Unlimited Storage on <br />
<span class="text-gradient">Discord Channels</span>
</h1>
<p class="mt-6 max-w-2xl mx-auto text-xl text-discord-light reveal leading-relaxed" style="transition-delay: 200ms;">
Turn your Discord server into a secure, distributed file system.
Featuring chunked uploads, military-grade encryption, and a beautiful Web UI.
</p>
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4 px-4 sm:px-0 reveal" style="transition-delay: 300ms;">
<a href="#setup" class="w-full sm:w-auto text-center px-8 py-4 rounded-full bg-discord-blurple text-white font-bold text-lg hover:bg-indigo-500 transition-all transform hover:scale-105 shadow-xl shadow-discord-blurple/20">
Get Started
</a>
<a href="https://github.com/Mo-Shakib/discord-object-store" target="_blank" class="w-full sm:w-auto text-center px-8 py-4 rounded-full bg-discord-darker border border-discord-divider text-white font-bold text-lg hover:bg-discord-hover hover:border-discord-light/30 transition-all group">
<i class="fa-regular fa-star mr-2 group-hover:text-yellow-400 transition-colors"></i> Star on GitHub
</a>
</div>
<!-- Floating Terminal -->
<div class="mt-20 mx-auto max-w-3xl bg-[#1e1e1e] rounded-xl border border-discord-divider shadow-2xl overflow-hidden animate-float reveal text-left" style="transition-delay: 400ms;">
<!-- Terminal Header -->
<div class="flex items-center px-4 py-3 bg-[#252526] border-b border-black/20">
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
</div>
<div class="flex-1 text-center">
<span class="text-xs text-gray-400 font-mono flex items-center justify-center gap-2">
<i class="fa-solid fa-folder-open"></i> user@local: ~/projects/store
</span>
</div>
</div>
<!-- Terminal Body -->
<div class="p-6 font-mono text-sm md:text-base leading-relaxed bg-[#1e1e1e]/90 backdrop-blur-sm min-h-[300px]">
<div class="terminal-line" style="animation-delay: 0s;">
<span class="syntax-prompt">➜</span> <span class="text-cyan-400">~/store</span> <span class="syntax-cmd">python</span> bot.py upload <span class="syntax-path">./backups/photos</span>
</div>
<div class="terminal-line" style="animation-delay: 0.8s;">
<span class="text-gray-500">[10:42:01]</span> <span class="text-purple-400 font-bold">[SCAN]</span> Found 312 files, total 1.8GB
</div>
<div class="terminal-line" style="animation-delay: 1.6s;">
<span class="text-gray-500">[10:42:03]</span> <span class="text-yellow-400 font-bold">[PACK]</span> Created archive.tar.gz <span class="text-gray-500">(Comp level 9)</span>
</div>
<div class="terminal-line" style="animation-delay: 2.4s;">
<span class="text-gray-500">[10:42:05]</span> <span class="text-blue-400 font-bold">[CRYPT]</span> Encrypting with AES-256 + PBKDF2...
</div>
<div class="terminal-line" style="animation-delay: 3.2s;">
<div class="mt-2 mb-2 w-full bg-gray-700 h-1.5 rounded-full overflow-hidden">
<div class="bg-gradient-to-r from-blue-500 to-purple-500 h-full w-2/3"></div>
</div>
</div>
<div class="terminal-line" style="animation-delay: 4.0s;">
<span class="text-gray-500">[10:42:15]</span> <span class="text-green-500 font-bold">[UPLOAD]</span> Batch #20260119-01 active in thread.
</div>
<div class="terminal-line" style="animation-delay: 4.8s;">
<span class="text-gray-500">[10:42:16]</span> <span class="text-discord-light">Metadata synced to SQLite (WAL mode)</span>
</div>
<div class="terminal-line" style="animation-delay: 5.6s;">
<span class="syntax-prompt">➜</span> <span class="text-cyan-400">~/store</span> <span class="terminal-cursor"></span>
</div>
</div>
</div>
</div>
</header>
<!-- Features Grid -->
<section id="features" class="py-24 bg-discord-dark border-y border-discord-divider relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16 reveal">
<h2 class="text-3xl font-extrabold text-white mb-4">Core Capabilities</h2>
<p class="text-discord-light max-w-2xl mx-auto text-lg">Everything you need to turn a standard channel into a powerhouse database.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Feature 1 -->
<div class="feature-card p-8 bg-discord-bg rounded-2xl border border-discord-divider transition-all duration-300 group reveal">
<div class="w-14 h-14 bg-discord-darker rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-discord-blurple/20 transition-all">
<i class="fa-solid fa-layer-group text-discord-blurple text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-white">Smart Chunking</h3>
<p class="text-discord-light leading-relaxed">Files are automatically split into 24MB chunks to bypass Discord's file size limits while maintaining file integrity.</p>
</div>
<!-- Feature 2 -->
<div class="feature-card p-8 bg-discord-bg rounded-2xl border border-discord-divider transition-all duration-300 group reveal">
<div class="w-14 h-14 bg-discord-darker rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-green-500/20 transition-all">
<i class="fa-solid fa-lock text-green-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-white">Zero-Knowledge Auth</h3>
<p class="text-discord-light leading-relaxed">Your data is encrypted locally before upload using AES-256-GCM. Discord servers only see random noise.</p>
</div>
<!-- Feature 3 -->
<div class="feature-card p-8 bg-discord-bg rounded-2xl border border-discord-divider transition-all duration-300 group reveal">
<div class="w-14 h-14 bg-discord-darker rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-yellow-500/20 transition-all">
<i class="fa-solid fa-file-zipper text-yellow-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-white">Compression</h3>
<p class="text-discord-light leading-relaxed">Automatic Gzip compression (Level 9) maximizes your storage efficiency before the encryption step.</p>
</div>
<!-- Feature 4 -->
<div class="feature-card p-8 bg-discord-bg rounded-2xl border border-discord-divider transition-all duration-300 group reveal">
<div class="w-14 h-14 bg-discord-darker rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-pink-500/20 transition-all">
<i class="fa-solid fa-rotate-right text-pink-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-white">Resumable Uploads</h3>
<p class="text-discord-light leading-relaxed">Network failure? No problem. The bot tracks chunk status and resumes exactly where it left off.</p>
</div>
<!-- Feature 5 -->
<div class="feature-card p-8 bg-discord-bg rounded-2xl border border-discord-divider transition-all duration-300 group reveal">
<div class="w-14 h-14 bg-discord-darker rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-cyan-500/20 transition-all">
<i class="fa-solid fa-database text-cyan-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-white">Local Database</h3>
<p class="text-discord-light leading-relaxed">A lightning-fast SQLite layer manages metadata, allowing instant search without API rate limits.</p>
</div>
<!-- Feature 6 -->
<div class="feature-card p-8 bg-discord-bg rounded-2xl border border-discord-divider transition-all duration-300 group reveal">
<div class="w-14 h-14 bg-discord-darker rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-purple-500/20 transition-all">
<i class="fa-solid fa-desktop text-purple-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 text-white">Modern Dashboard</h3>
<p class="text-discord-light leading-relaxed">Includes a FastAPI-powered Web UI to manage jobs, view storage stats, and browse your file index.</p>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="py-24 bg-discord-bg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-20 text-center reveal">
<h2 class="text-3xl font-bold text-white mb-4">The Workflow</h2>
<p class="text-discord-light">From local folder to distributed cloud in three steps.</p>
</div>
<div class="relative">
<!-- Vertical Line for Desktop -->
<div class="hidden lg:block absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-transparent via-discord-divider to-transparent"></div>
<!-- Step 1 -->
<div class="relative flex flex-col-reverse lg:flex-row items-center mb-24 reveal group">
<div class="flex-1 text-center lg:text-right lg:pr-16 mt-6 lg:mt-0">
<h3 class="text-2xl font-bold text-white mb-2 group-hover:text-discord-blurple transition-colors">1. Package & Encrypt</h3>
<p class="text-discord-light text-lg">The CLI bundles your files into a <code>.tar.gz</code>, encrypts with PBKDF2-derived keys, then splits into upload chunks.</p>
</div>
<div class="w-16 h-16 rounded-full bg-discord-darker border-4 border-discord-bg shadow-xl flex items-center justify-center font-bold text-xl z-10 text-discord-light group-hover:border-discord-blurple group-hover:text-white transition-all">1</div>
<div class="flex-1 lg:pl-16 hidden lg:block">
<div class="bg-discord-darker p-5 rounded-xl border border-discord-divider font-mono text-xs text-gray-400 shadow-lg transform group-hover:translate-x-2 transition-transform">
> Scanning folder...<br>
> Creating archive.tar.gz...<br>
> Encrypting and splitting...
</div>
</div>
</div>
<!-- Step 2 -->
<div class="relative flex flex-col lg:flex-row items-center mb-24 reveal group">
<div class="flex-1 lg:pr-16 hidden lg:block text-right">
<div class="bg-discord-darker p-5 rounded-xl border border-discord-divider font-mono text-xs text-gray-400 shadow-lg transform group-hover:-translate-x-2 transition-transform">
$ python bot.py upload ./data<br>
[Bot] Creating batch card...<br>
[Bot] Uploading 190 chunks...
</div>
</div>
<div class="w-16 h-16 rounded-full bg-discord-darker border-4 border-discord-bg shadow-xl flex items-center justify-center font-bold text-xl z-10 text-discord-light group-hover:border-green-500 group-hover:text-white transition-all">2</div>
<div class="flex-1 text-center lg:text-left lg:pl-16 mt-6 lg:mt-0">
<h3 class="text-2xl font-bold text-white mb-2 group-hover:text-green-500 transition-colors">2. Sync to Discord</h3>
<p class="text-discord-light text-lg">The bot posts a metadata "Card", creates a private thread, and uploads chunks concurrently to maximize bandwidth.</p>
</div>
</div>
<!-- Step 3 -->
<div class="relative flex flex-col-reverse lg:flex-row items-center reveal group">
<div class="flex-1 text-center lg:text-right lg:pr-16 mt-6 lg:mt-0">
<h3 class="text-2xl font-bold text-white mb-2 group-hover:text-purple-500 transition-colors">3. Restore Anywhere</h3>
<p class="text-discord-light text-lg">Download on any machine with the key. Chunks are verified via SHA-256, merged, decrypted, and extracted.</p>
</div>
<div class="w-16 h-16 rounded-full bg-discord-darker border-4 border-discord-bg shadow-xl flex items-center justify-center font-bold text-xl z-10 text-discord-light group-hover:border-purple-500 group-hover:text-white transition-all">3</div>
<div class="flex-1 lg:pl-16 hidden lg:block">
<div class="bg-discord-darker p-5 rounded-xl border border-discord-divider font-mono text-xs text-gray-400 shadow-lg transform group-hover:translate-x-2 transition-transform">
> Verifying hashes... OK<br>
> Decrypting archive... OK<br>
> Extracted: ./data
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Setup Section -->
<section id="setup" class="py-24 bg-discord-dark border-t border-discord-divider">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-white mb-12 reveal text-center">Get Running in 30 Seconds</h2>
<div class="space-y-8">
<!-- Step 1 Code -->
<div class="reveal">
<h3 class="text-lg font-semibold text-discord-white mb-3 flex items-center gap-2">
<span class="w-6 h-6 rounded bg-discord-blurple/20 text-discord-blurple flex items-center justify-center text-xs">1</span>
Clone & Install
</h3>
<div class="code-block bg-[#1e1e1e] rounded-lg border border-discord-divider p-4 shadow-lg group">
<button onclick="copyToClipboard(this)" class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity text-xs bg-discord-bg border border-discord-divider px-3 py-1.5 rounded hover:bg-discord-blurple hover:text-white hover:border-discord-blurple text-discord-light">Copy</button>
<pre class="font-mono text-sm text-gray-300 overflow-x-auto"><code>git clone https://github.com/Mo-Shakib/discord-object-store.git
cd discord-object-store
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt</code></pre>
</div>
</div>
<!-- Step 2 Env -->
<div class="reveal">
<h3 class="text-lg font-semibold text-discord-white mb-3 flex items-center gap-2">
<span class="w-6 h-6 rounded bg-discord-blurple/20 text-discord-blurple flex items-center justify-center text-xs">2</span>
Configure
</h3>
<div class="code-block bg-[#1e1e1e] rounded-lg border border-discord-divider p-4 shadow-lg group">
<button onclick="copyToClipboard(this)" class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity text-xs bg-discord-bg border border-discord-divider px-3 py-1.5 rounded hover:bg-discord-blurple hover:text-white hover:border-discord-blurple text-discord-light">Copy</button>
<pre class="font-mono text-sm text-gray-300 overflow-x-auto"><code>python setup.py</code></pre>
</div>
<p class="text-discord-light text-sm mt-2 ml-1">Follow the wizard to set your Discord Token and encryption key.</p>
</div>
<!-- Step 3 Web UI -->
<div class="reveal">
<h3 class="text-lg font-semibold text-discord-white mb-3 flex items-center gap-2">
<span class="w-6 h-6 rounded bg-discord-blurple/20 text-discord-blurple flex items-center justify-center text-xs">3</span>
Launch UI
</h3>
<div class="code-block bg-[#1e1e1e] rounded-lg border border-discord-divider p-4 shadow-lg group">
<button onclick="copyToClipboard(this)" class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity text-xs bg-discord-bg border border-discord-divider px-3 py-1.5 rounded hover:bg-discord-blurple hover:text-white hover:border-discord-blurple text-discord-light">Copy</button>
<pre class="font-mono text-sm text-gray-300 overflow-x-auto"><code>uvicorn src.api:app --reload</code></pre>
</div>
<p class="text-discord-light text-sm mt-3 ml-1">
Open <a href="http://localhost:8000" target="_blank" class="text-discord-blurple hover:underline hover:text-indigo-400">http://localhost:8000</a> after the server starts.
</p>
</div>
</div>
</div>
</section>
<!-- Commands Table -->
<section id="commands" class="py-24 bg-discord-bg">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-white mb-10 text-center reveal">CLI Reference</h2>
<div class="overflow-hidden rounded-xl border border-discord-divider shadow-2xl reveal">
<table class="w-full text-left border-collapse">
<thead class="bg-discord-dark">
<tr>
<th class="p-5 font-semibold text-discord-light text-xs uppercase tracking-wider border-b border-discord-divider">Command</th>
<th class="p-5 font-semibold text-discord-light text-xs uppercase tracking-wider border-b border-discord-divider">Action</th>
</tr>
</thead>
<tbody class="bg-discord-dark/40 divide-y divide-discord-divider">
<tr class="hover:bg-discord-dark/80 transition-colors">
<td class="p-4 font-mono text-white whitespace-nowrap"><span class="text-discord-blurple">upload</span> <path></td>
<td class="p-4 text-discord-light text-sm">Packages, encrypts, and uploads target to Discord.</td>
</tr>
<tr class="hover:bg-discord-dark/80 transition-colors">
<td class="p-4 font-mono text-white whitespace-nowrap"><span class="text-discord-blurple">download</span> <id></td>
<td class="p-4 text-discord-light text-sm">Fetches and reconstructs a batch by ID.</td>
</tr>
<tr class="hover:bg-discord-dark/80 transition-colors">
<td class="p-4 font-mono text-white whitespace-nowrap"><span class="text-discord-blurple">resume</span> <id></td>
<td class="p-4 text-discord-light text-sm">Continues an interrupted upload from the last chunk.</td>
</tr>
<tr class="hover:bg-discord-dark/80 transition-colors">
<td class="p-4 font-mono text-white whitespace-nowrap"><span class="text-discord-blurple">list</span></td>
<td class="p-4 text-discord-light text-sm">Displays all indexed batches from local SQLite.</td>
</tr>
<tr class="hover:bg-discord-dark/80 transition-colors">
<td class="p-4 font-mono text-white whitespace-nowrap"><span class="text-discord-blurple">stats</span></td>
<td class="p-4 text-discord-light text-sm">Storage metrics, cache size, and API latency.</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Change Log Section -->
<section id="changelog" class="py-24 bg-discord-dark border-t border-discord-divider">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-white mb-12 text-center reveal">Change Log</h2>
<div class="relative border-l-2 border-discord-divider ml-3 space-y-12 reveal">
<!-- v4.0.0 -->
<div class="relative pl-8">
<span class="absolute -left-[9px] top-1.5 w-4 h-4 rounded-full bg-green-500 ring-4 ring-discord-dark"></span>
<h3 class="text-xl font-bold text-white mb-2 flex items-center gap-3">
<a href="https://github.com/Mo-Shakib/discord-object-store/releases/tag/v.4.0.0" target="_blank" class="hover:text-discord-blurple transition-colors">
v4.0.0
</a>
<span class="text-xs font-bold text-white bg-discord-blurple px-2 py-0.5 rounded shadow-lg shadow-discord-blurple/20">Latest</span>
</h3>
<p class="text-discord-light text-sm mb-5">Discord-style Web UI with live jobs, uploads, and batch management.</p>
<div class="bg-discord-bg rounded-lg border border-discord-divider p-6 hover:border-discord-light/30 transition-colors">
<h4 class="text-white font-semibold mb-4 flex items-center gap-2 text-sm uppercase tracking-wide">
<i class="fa-solid fa-desktop text-discord-blurple"></i> v4 Highlights
</h4>
<ul class="space-y-3 text-sm text-discord-light">
<li class="flex items-start gap-3">
<i class="fa-solid fa-check mt-1 text-xs text-green-500"></i>
<span><strong>Web UI:</strong> New dashboard with live job runner, stats, and uploads.</span>
</li>
<li class="flex items-start gap-3">
<i class="fa-solid fa-check mt-1 text-xs text-green-500"></i>
<span><strong>Batch Explorer:</strong> Searchable table with hover actions and metadata.</span>
</li>
<li class="flex items-start gap-3">
<i class="fa-solid fa-check mt-1 text-xs text-green-500"></i>
<span><strong>System Actions:</strong> One-click sync, backup, and reset workflows.</span>
</li>
</ul>
</div>
</div>
<!-- v3.0.0 -->
<div class="relative pl-8">
<span class="absolute -left-[9px] top-1.5 w-4 h-4 rounded-full bg-discord-darker border-2 border-discord-light/50 ring-4 ring-discord-dark"></span>
<h3 class="text-xl font-bold text-white mb-2">
<a href="https://github.com/Mo-Shakib/discord-object-store/releases/tag/v3.0.0" target="_blank" class="hover:text-discord-blurple transition-colors">
v3.0.0
</a>
</h3>
<p class="text-discord-light text-sm mb-5">New storage workflow with CLI commands, SQLite metadata, and faster sync.</p>
<div class="bg-discord-bg rounded-lg border border-discord-divider p-6">
<h4 class="text-white font-semibold mb-4 flex items-center gap-2 text-sm uppercase tracking-wide">
<i class="fa-solid fa-bolt text-yellow-500"></i> v3 Highlights
</h4>
<ul class="space-y-3 text-sm text-discord-light">
<li class="flex items-start gap-3">
<i class="fa-solid fa-check mt-1 text-xs text-discord-light/50"></i>
<span><strong>CLI Workflow:</strong> Upload, download, list, info, stats, verify, resume.</span>
</li>
<li class="flex items-start gap-3">
<i class="fa-solid fa-check mt-1 text-xs text-discord-light/50"></i>
<span><strong>SQLite Metadata:</strong> WAL mode, indexes, and fast local search.</span>
</li>
<li class="flex items-start gap-3">
<i class="fa-solid fa-check mt-1 text-xs text-discord-light/50"></i>
<span><strong>Discord Layout:</strong> Threaded storage channel + batch index cards.</span>
</li>
</ul>
<div class="mt-5 p-4 bg-yellow-500/5 border border-yellow-500/20 rounded-md text-yellow-200/80 text-xs flex items-start gap-3">
<i class="fa-solid fa-triangle-exclamation mt-0.5"></i>
<p><strong>Note:</strong> Keep your encryption key secure. Without it, batches cannot be decrypted.</p>
</div>
</div>
</div>
<!-- v2.0.0 -->
<div class="relative pl-8 opacity-80 hover:opacity-100 transition-opacity">
<span class="absolute -left-[9px] top-1.5 w-4 h-4 rounded-full bg-discord-darker border-2 border-discord-light/30 ring-4 ring-discord-dark"></span>
<h3 class="text-xl font-bold text-white mb-2">
<a href="https://github.com/Mo-Shakib/discord-object-store/releases/tag/v2.0.0" target="_blank" class="hover:text-discord-blurple transition-colors">
v2.0.0
</a>
</h3>
<p class="text-discord-light text-sm mb-5">Major security overhaul and architecture improvements.</p>
<div class="bg-discord-bg rounded-lg border border-discord-divider p-6">
<h4 class="text-white font-semibold mb-4 flex items-center gap-2 text-sm uppercase tracking-wide">
<i class="fa-solid fa-shield-halved text-green-500"></i> New Security Model
</h4>
<ul class="space-y-3 text-sm text-discord-light">
<li class="flex items-start gap-3">
<i class="fa-solid fa-check mt-1 text-xs text-discord-light/50"></i>
<span><strong>Encryption:</strong> AES-256-GCM per chunk.</span>
</li>
<li class="flex items-start gap-3">
<i class="fa-solid fa-check mt-1 text-xs text-discord-light/50"></i>
<span><strong>Key Derivation:</strong> PBKDF2-HMAC-SHA256 with 600,000 iterations.</span>
</li>
</ul>
</div>
</div>
<!-- v1.0.0 -->
<div class="relative pl-8 opacity-50 hover:opacity-100 transition-opacity">
<span class="absolute -left-[9px] top-1.5 w-4 h-4 rounded-full bg-discord-darker border-2 border-discord-light/20 ring-4 ring-discord-dark"></span>
<h3 class="text-xl font-bold text-white mb-2">
<a href="https://github.com/Mo-Shakib/discord-object-store/releases/tag/v1.0" target="_blank" class="hover:text-discord-blurple transition-colors">
v1.0.0
</a>
</h3>
<p class="text-discord-light text-sm">Initial release with basic chunking, upload/download commands, and archive cards.</p>
</div>
</div>
</div>
</section>
<!-- Star on GitHub CTA -->
<section class="py-20 bg-gradient-to-br from-discord-blurple to-[#4752c4] border-t border-discord-divider relative overflow-hidden">
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvc3ZnPg==')] opacity-30"></div>
<div class="max-w-4xl mx-auto px-4 text-center reveal relative z-10">
<h3 class="text-3xl font-extrabold text-white mb-6">Open Source & Community Driven</h3>
<p class="text-white/80 mb-8 max-w-2xl mx-auto text-lg">
Join thousands of users turning Discord into their personal cloud. <br>
Free, secure, and always open source.
</p>
<div class="flex justify-center gap-4">
<a href="https://github.com/Mo-Shakib/discord-object-store" target="_blank" class="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-white text-discord-blurple font-bold text-lg hover:bg-gray-100 transition-all transform hover:scale-105 shadow-xl">
<i class="fa-regular fa-star"></i> Star Repository
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-discord-darker pt-16 pb-8 border-t border-discord-divider">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center mb-8">
<div class="flex items-center gap-3 mb-4 md:mb-0">
<i class="fa-solid fa-cubes text-2xl text-discord-light"></i>
<span class="font-bold text-xl text-discord-white">DisBucket</span>
</div>
<div class="flex space-x-8">
<a href="#" class="text-discord-light hover:text-white transition-colors">Documentation</a>
<a href="#" class="text-discord-light hover:text-white transition-colors">Privacy</a>
<a href="https://github.com/Mo-Shakib/discord-object-store" class="text-discord-light hover:text-white transition-colors">
<i class="fa-brands fa-github text-xl"></i>
</a>
</div>
</div>
<div class="border-t border-discord-divider pt-8 text-center md:text-left">
<p class="text-xs text-discord-light/40">
Developed by <a href="https://github.com/Mo-Shakib" target="_blank" class="hover:text-discord-blurple transition-colors font-medium">Mohammed Shakib</a>.
Not affiliated with Discord Inc. Use responsibly and adhere to Discord Terms of Service. <br>
© 2026 Open Source Project.
</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
// Copy to clipboard functionality
function copyToClipboard(button) {
const pre = button.nextElementSibling;
const code = pre.innerText;
navigator.clipboard.writeText(code).then(() => {
const originalText = button.innerText;
button.innerText = 'Copied!';
button.classList.add('text-green-400', 'font-bold');
setTimeout(() => {
button.innerText = originalText;
button.classList.remove('text-green-400', 'font-bold');
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
// Intersection Observer for scroll animations
document.addEventListener('DOMContentLoaded', () => {
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target);
}
});
}, observerOptions);
const elements = document.querySelectorAll('.reveal');
elements.forEach(el => observer.observe(el));
});
// Navbar Scroll Effect
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 20) {
navbar.classList.add('shadow-lg');
navbar.classList.replace('bg-discord-bg/80', 'bg-discord-bg/95');
} else {
navbar.classList.remove('shadow-lg');
navbar.classList.replace('bg-discord-bg/95', 'bg-discord-bg/80');
}
});
</script>
</body>
</html>