-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
487 lines (458 loc) · 24.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Web DL - Download the Web.</title>
<!-- Primary Meta Tags -->
<meta name="title" content="Web DL - Download the Web.">
<meta name="description" content="Self-hosted tools to download audio & video resources, scrape various content types, direct download online resources and retrieve torrent file contents quickly and easily.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://web-dl-tools.github.io/">
<meta property="og:title" content="Web DL - Download the Web.">
<meta property="og:description" content="Self-hosted tools to download audio & video resources, scrape various content types, direct download online resources and retrieve torrent file contents quickly and easily.">
<meta property="og:image" content="https://web-dl-tools.github.io/img/overview-social.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://web-dl-tools.github.io/">
<meta property="twitter:title" content="Web DL - Download the Web.">
<meta property="twitter:description" content="Self-hosted tools to download audio & video resources, scrape various content types, direct download online resources and retrieve torrent file contents quickly and easily.">
<meta property="twitter:image" content="https://web-dl-tools.github.io/img/overview-social.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" rel="stylesheet">
<!--vendors styles-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS / Color Scheme -->
<link rel="stylesheet" href="css/default.css" id="theme-color">
<link rel="stylesheet" href="css/custom.css" id="custom-css">
<!-- MDI icons -->
<link rel="stylesheet" href="https://pictogrammers.github.io/@mdi/font/5.4.55/css/materialdesignicons.min.css" id="mdi-icons-css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100;300;400;600;700;900&display=swap"
rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XJYHHGFQ2Q"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XJYHHGFQ2Q');
</script>
</head>
<body>
<!--navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top sticky-navigation">
<a class="pl-4 navbar-brand title mx-auto" href="#">
<i class="mdi mdi-cloud-download-outline"></i>
Web DL
</a>
<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span data-feather="grid"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#how-to-use">How to use</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#features">Features</a>
</li>
<li class="nav-item border border-radius btn-primary">
<a class="nav-link page-scroll" href="#install">Install</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#documentation">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#creator">Creator</a>
</li>
</ul>
</div>
</nav>
<!--hero header-->
<section class="pt-7 pt-md-8 overflow-hidden" id="home">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto my-auto text-center">
<h1>Download the Web.</h1>
<p class="lead mt-4">
Self-hosted tools to download audio & video resources, scrape various content types,
direct download online resources and retrieve torrent file contents quickly and easily.
</p>
<p class="mt-2 mb-5">
<i>
Build for the Raspberry Pi 4 (2GB+)
</i>
</p>
<p class="bottom-cutoff">
<img class="img-fluid img-fluid-larger img-fluid-cutoff" src="img/overview-framed.png"
alt="Mockup" />
</p>
</div>
</div>
</div>
</section>
<!--How to use section-->
<section class="pt-0 pb-6" id="how-to-use">
<div class="container">
<hr class="mt-0 mb-8 margin-top-none" />
<div class="row">
<div class="col-md-6 mx-auto text-center">
<h4 class="dot-circle font-weight-normal">
Downloading resources from the web should be as quick and easy as possible. This is how it works:
</h4>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6 order-2 order-md-1 my-md-auto">
<h3>What do you want to download?</h3>
<p class="text-muted lead">
Enter the URL or Torrent URI of the resource you want to download. Each Web DL handler will check and show if it can be used.
Simply pick a handler to decide how to download and process your request.
</p>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="img/create_handlers_framed.png" class="img-fluid d-block mx-auto" alt="Create resource handlers" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="img/create_resource_framed.png" class="img-fluid d-block mx-auto" alt="Create resource config" />
</div>
<div class="col-md-6 my-md-auto">
<h3>How do you want to download it?</h3>
<p class="text-muted lead">
After selecting a handler you can configure the handler specifics (when available) to further
specify how to download and process your request.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1 my-md-auto">
<h3>It will be handled...</h3>
<p class="text-muted lead">
Your request will be queued, and when resources are available, will download and process in the background.
You'll get live updates as your request starts downloading and processing.
</p>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="img/active_and_pending_framed.png" class="img-fluid d-block mx-auto" alt="Active and pending" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="img/details_information_audiovisual_framed.png" class="img-fluid d-block mx-auto" alt="Create resource config" />
</div>
<div class="col-md-6 my-md-auto">
<h3>Get your files.</h3>
<p class="text-muted lead">
After Web DL has finished downloading and processing your request you can view it's details, download files
and go deep into the timeline, raw data and logs.
</p>
</div>
</div>
</div>
</section>
<!--features section-->
<section class="bg-light pt-8 pb-7" id="features">
<div class="container">
<div class="row">
<div class="col-md-7 mx-auto">
<h2 class="dot-circle">Features</h2>
<p class="text-muted lead">
Here are some select features Web DL offers to make it even
safer and easier to use.
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-10 mx-auto">
<div class="row card-services">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body text-center">
<div class="icon-box border-box">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="users" width="30" height="30"></span>
</div>
</div>
<h5 class="mt-0 mb-3">User management</h5>
Create and manage different <b>authenticated users</b> to separate requests securely
and manage access to them.
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body text-center">
<div class="icon-box border-box">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="shield" width="30" height="30"></span>
</div>
</div>
<h5 class="mt-0 mb-3">Secure</h5>
Web DL's code is publicly available to see and review and will run locally.
<b>Only you can see your requests</b> and it's contents.
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body text-center">
<div class="icon-box border-box">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="cloud" width="30" height="30"></span>
</div>
</div>
<h5 class="mt-0 mb-3">Local cloud</h5>
Requests are stored in your <b>own cloud</b> (on the device you run Web DL on).
Client devices that interact with Web DL only receive the files you decide to download.
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body text-center">
<div class="icon-box border-box">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="feather" width="30" height="30"></span>
</div>
</div>
<h5 class="mt-0 mb-3">Lightweight</h5>
Web DL runs light! It's first iteration was created for usage on a Raspberry Pi 3 Model B.
The latest version of Web DL only requires <b>a little over 1GB</b> of memory and can be run on any ARM device.
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body text-center">
<div class="icon-box border-box">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="share-2" width="30" height="30"></span>
</div>
</div>
<h5 class="mt-0 mb-3">Locally accessible</h5>
Your requests are accessible to all devices on your local network, <b>similar to a NAS</b>.
All you need is a browser.
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body text-center">
<div class="icon-box border-box">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="smartphone" width="30" height="30"></span>
</div>
</div>
<h5 class="mt-0 mb-3">Responsive</h5>
Whether you use a <b>mobile</b>, tablet or ultra-wide monitor, Web DL's UI can handle it all.
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body text-center">
<div class="icon-box border-box">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="globe" width="30" height="30"></span>
</div>
</div>
<h5 class="mt-0 mb-3">Many supported sites</h5>
Web DL supports many different web resources. Download from <b>YouTube, Twitch, SoundCloud,
MixCloud, Imgur, torrents</b> and many others.
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body text-center">
<div class="icon-box border-box">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="plus" width="30" height="30"></span>
</div>
</div>
<h5 class="mt-0 mb-3">Even more features</h5>
From compressing all downloaded resource files to live status updates using a secure websocket connection,
Web DL contains <b>even more features</b> to make it easier to use.
</div>
</div>
</div>
<div class="col-md-6 mx-auto text-center">
<hr class="my-5" />
<h4 class="mb-4">Want to add some more?</h4>
<a href="https://github.com/web-dl-tools" class="btn btn-primary">🛠️ along with me!</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--install section-->
<section class="py-7" id="install">
<div class="container">
<div class="row">
<div class="col-md-7 mx-auto text-center">
<h2>How to install</h2>
<p class="lead text-muted">
Setting up Web DL requires some manual steps, but the setup process has been
designed and developed to be as easy as possible. All you need is
<a href="https://git-scm.com/downloads">Git</a> and
<a href="https://docs.docker.com/get-docker">Docker</a>.
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-7 mx-auto timeline">
<div class="media pb-5">
<div class="icon-box mt-1">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="copy"></span>
</div>
</div>
<div class="media-body">
<h5>Clone</h5>
<p class="text-muted">
Start by cloning/downloading the <a href="https://github.com/web-dl-tools/api">API</a> and <a href="https://github.com/web-dl-tools/website">Website</a> repositories from the GitHub page linked below.
</p>
</div>
</div>
<div class="media pb-5">
<div class="icon-box mt-1">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="settings"></span>
</div>
</div>
<div class="media-body">
<h5>Configure</h5>
<p class="text-muted">
Copy the following files and fill in the empty fields.
<pre>.env.dist</pre> → <pre>.env</pre>
</p>
</div>
</div>
<div class="media pb-5">
<div class="icon-box mt-1">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="box"></span>
</div>
</div>
<div class="media-body">
<h5>Execute</h5>
<p class="text-muted">
Install Docker and Docker compose in order to be able to build and run the required
API and website containers.
</p>
</div>
</div>
<div class="media">
<div class="icon-box mt-1">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="server"></span>
</div>
</div>
<div class="media-body">
<h5>Deploy</h5>
<p class="text-muted">
Run the following command to build and start it all.
<pre class="d-inline">make start</pre>
</p>
</div>
</div>
</div>
</div>
<div class="row mt-7">
<div class="col-md-6 mx-auto text-center">
<h3 class="dot-circle dot-lg">Go and get it all.</h3>
<p class="lead text-muted mb-4">
All code is available on GitHub.
</p>
<a class="btn btn-primary page-scroll" href="https://github.com/web-dl-tools">👀 On GitHub</a>
</div>
</div>
</div>
</section>
<!--Documentation section-->
<section class="pt-6 pb-6 bg-light" id="documentation">
<div class="container">
<div class="row">
<div class="col-12">
<a href="https://web-dl-tools.github.io/docs">
<div class="card">
<div class="card-body">
<h5 class="card-title">Documentation</h5>
<h6 class="card-subtitle mb-2 text-muted">Need help?</h6>
<p class="card-text">
View the quick-start guide, hardware, OS & software requirements, configuration options, common pitfalls and more.
</p>
<a class="mt-4 btn btn-light page-scroll" href="https://web-dl-tools.github.io/docs">Go to documentation</a>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!--creator section-->
<section class="bg-hero py-7" id="creator" style="background-image: url(img/background.png)">
<div class="container">
<div class="row">
<div class="col-md-7 mx-auto text-center">
<h2 class="text-white">Hello World.</h2>
<p class="lead text-white my-4">
I created this stack mainly for personal use. Since I often grabbed resources
from the internet I created several tools/scripts to make it easier for me.
What you see here is it's latest iteration (bringing it all together).
</p>
</div>
</div>
</div>
</section>
<!--footer / contact-->
<footer class="py-6 bg-light">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto text-center">
<ul class="list-inline">
<li class="list-inline-item"><a href="https://github.com/web-dl-tools/api">API</a></li>
<li class="list-inline-item"><a href="https://github.com/web-dl-tools/website">Website</a></li>
<li class="list-inline-item"><a href="https://github.com/web-dl-tools/extension">Extension</a></li>
<li class="list-inline-item"><a href="https://github.com/web-dl-tools/docs">Documentation</a></li>
</ul>
<p class="text-muted small text-uppercase mt-4">
Star the repositories
</p>
<ul class="list-inline social social-dark social-sm">
<li class="list-inline-item">
<a href="https://github.com/web-dl-tools"><i class="fa fa-github"></i></a>
</li>
</ul>
</div>
</div>
<div class="row mt-5">
<div class="col-12 text-muted text-center small-xl">
© 2024 Web DL - All Rights Reserved
</div>
</div>
</div>
</footer>
<!--scroll to top-->
<div class="scroll-top">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.5.0/feather.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>