/
index.htm
executable file
·68 lines (66 loc) · 3.86 KB
/
index.htm
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
<!--
Сторінка керування завантаженням файлів
@author Артем Висоцький <a.vysotsky@gmail.com>
@link https://github.com/ArtemVysotsky/SafeUpload
@copyright GNU General Public License v3
-->
<!DOCTYPE html>
<html xml:lang="uk" lang="uk" dir="ltr">
<head>
<title>Безпечне завантаження файлів</title>
<meta name="description" content="завантаження, безпечне завантаження, безпечне завантаження файлів, upload, safe upload, safe file upload" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<style>
main div.card,
main div.modal div.modal-dialog {max-width: 480px;}
main div.modal div.progress {height: 30px;}
main div.modal div.modal-footer button {width: 130px;}
</style>
<script defer src="Upload.js"></script>
<script defer src="index.js"></script>
</head>
<body>
<main class="container mt-5">
<div class="card mx-auto mt-5">
<div class="card-header">Безпечне завантаження файлів <span class="badge badge-warning">beta</span></div>
<div class="card-body">
<div class="custom-file mt-2">
<input type="file" class="custom-file-input" id="file" lang="uk" multiple>
<label class="custom-file-label" for="file">Виберіть файли</label>
</div>
</div>
</div>
<!-- Modal Start -->
<div class="modal fade mt-3" tabindex="-1">
<div class="modal-dialog mx-auto" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Завантаження</h5>
</div>
<div class="modal-body">
<div class="name small mt-2"> </div>
<div class="progresses mt-2">
<div class="progress current mt-2"><div class="progress-bar"></div></div>
<div class="progress total mt-2"><div class="progress-bar"></div></div>
</div>
<div class="status small row mt-2">
<div class="size col text-left pr-1" title="Завантажено / загальний розмір"> </div>
<div class="speed col-auto text-center px-0" title="Швидкість завантаження"> </div>
<div class="time col text-right pl-1" title="Часу пройшло / лишилось"> </div>
</div>
</div>
<div class="modal-footer buttons mt-2">
<button type="button" class="btn btn-secondary cancel">Скасувати</button>
<button type="button" class="btn btn-primary resume">Продовжити</button>
<button type="button" class="btn btn-primary pause">Призупинити</button>
</div>
</div>
</div>
</div>
<!-- Modal End -->
</main>
</body>
</html>