-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
99 lines (91 loc) · 2.65 KB
/
popup.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
<!DOCTYPE html>
<html>
<head>
<title>Upload & Download Manager</title>
<style>
body { font-family: Arial, sans-serif; padding: 10px; }
#uploadStatus { margin-top: 10px; }
#filesList { margin-top: 20px; }
.file-item { margin-bottom: 5px; }
.delete-button { margin-left: 10px; }
#progressBarContainer {
width: 100%;
background-color: #ddd;
margin-top: 20px;
height: 20px;
display: none; /* Initially hidden */
}
#restartButton{
display: none;
}
#deleteAllButton{
display: none;
}
#progressBar {
height: 100%;
background-color: #4CAF50;
width: 0%;
text-align: center;
line-height: 20px;
color: white;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div class="tab">
<button class="tablinks" id="uploadTab">Upload</button>
<button class="tablinks" id="downloadTab">Download</button>
</div>
<div id="Upload" class="tabcontent">
<input type="file" id="fileInput" multiple>
<div id="progressBarContainer">
<div id="progressBar">0%</div>
</div>
<div id="uploadStatus"></div>
<button id="cancelButton">Cancel Upload</button>
<button id="restartButton">Restart Upload</button>
<button id="pauseResumeButton">Pause</button>
<button id="deleteAllButton">Delete All</button>
<div id="filesList"></div>
</div>
<div id="Download" class="tabcontent">
<div id="downloadProgressBarContainer" style="width: 100%; background-color: #ddd; margin-top: 20px; height: 20px; display: none;">
<div id="downloadProgressBar" style="height: 100%; background-color: #4CAF50; width: 0%; text-align: center; line-height: 20px; color: white;">0%</div>
</div>
<button id="cancelCurrentDownloadButton">Cancel Current Download</button>
<button id="pauseResumeDownloadButton">Pause</button>
<button id="restartDownloadButton">Restart Download</button>
<button id="cancelDownloadButton">Cancel Downloads</button>
<div id="downloadQueueDisplay">No files in queue</div>
<div id="filesDownloadList"></div>
</div>
<script src="popup.js"></script>
</body>
</html>