-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
228 lines (224 loc) · 13.5 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
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Work+Sans&display=swap"
rel="stylesheet">
<style id="safariStyle"></style>
<link rel="manifest" href="./manifest.json" />
<link rel="apple-touch-icon" href="./assets/logo.png" />
<meta name="apple-mobile-web-app-status-bar" content="#191919" />
<meta name="theme-color" content="#81C784" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<link rel="icon" href="./assets/logo.png">
<title>Unzipify - Manage zip files</title>
</head>
<body>
<div class="spinnerAnimate" style="display: none;" id="fileSpinner"></div>
<div style="display: flex; align-items: center; justify-content: center">
<img data-fetch="logo" height="60px" width="60px" style="margin-right: 15px;">
<h1>Unzipify</h1>
</div>
<i>Read, extract or edit .zip files and extract only the files you actually need, with a website designed to do just
that.</i><br><br>
<div id="introduction" class="opacity" style="margin-right: 3vw;">
<div class="rightMargin card" style="float: left">
<h2>Open file</h2>
<l>Open a .zip file from here:</l><br><br>
<img style="display: block; margin: auto; height: 40vh; max-height: 120px;" data-fetch="folderopen"><br><br>
<div style="display: flex;">
<div class="button" style="width: 100%; margin-right: 1vw;" id="fileBtn">Select a file</div>
<div class="button" style="width: 100%; margin-left: 1vw;" id="startNew">Create new zip</div>
</div>
</div>
<div class="leftMargin card" id="rightMove">
<h2>Privacy</h2>
<div class="btnPrivacy">
<div style="padding: 10px; display: flex;">
<img data-fetch="shield" width="30px" height="30px" style="margin: auto; margin-right: 10px;">
<l>All the data is elaborated locally on your device, and no files are sent to a server. This means that you can use the app completely offline.</l>
</div>
</div>
<div class="btnPrivacy">
<div style="padding: 10px; display: flex;">
<img data-fetch="jsdoc" width="30px" height="30px" style="margin: auto; margin-right: 10px;">
<l>Some external libraries might be fetched from GitHub or JSDelivr, and the custom fonts are loaded from Google Fonts. No data is shared with them.</l>
</div>
</div>
<div class="btnPrivacy">
<div style="padding: 10px; display: flex;">
<img data-fetch="code" width="30px" height="30px" style="margin: auto; margin-right: 10px;">
<l>This website is published under the <a href="https://github.com/Dinoosauro/Unzipify/blob/main/LICENSE">MIT license</a> and it's open source, so you can check the source code <a href="https://github.com/Dinoosauro/Unzipify/tree/main">on GitHub.</a></l>
</div>
</div>
</div>
</div>
<div class="actionContainer opacity" id="toolbar" style="display: none; opacity: 0;">
<div style="display: flex; align-items: center;">
<div class="imgBtn" data-action="back" style="margin-right: 30px;" data-hover="Previous folder">
<img data-fetch="prev" class="disabled" height="32px" width="32px">
</div>
<div class="imgBtn" data-action="search" id="tempsearch" data-hover="Search items">
<img data-fetch="search" height="32px" width="32px">
</div>
<div class="imgBtn" data-action="addFile" data-hover="Add a file">
<img data-fetch="adddoc" height="32px" width="32px">
</div>
<div class="imgBtn" data-action="folderDialog" data-hover="Add or create a folder">
<img data-fetch="addfolder" height="32px" width="32px">
</div>
<div class="imgBtn" data-action="downloadDialog" data-hover="Download or extract zip file">
<img data-fetch="download" height="32px" width="32px">
</div>
<div class="imgBtn" data-action="settings" data-hover="Show settings">
<img data-fetch="settings" height="32px" width="32px">
</div>
<div class="imgBtn" data-action="next" style="margin-left: 30px;" data-hover="Next folder">
<img data-fetch="next" class="disabled" height="32px" width="32px">
</div>
</div>
</div><br><br>
<div class="dialog opacity" style="opacity: 0; display: none;" id="settingsDialog">
<div class="innerDialog">
<img style="position: absolute; z-index: 2; top: 15px; right: 15px;" data-fetch="minimize"
id="minimizeSettings">
<h2 class="center">Settings</h2>
<div class="settingTab">
<h3 class="center">Change theme</h3>
<i class="center">You can find here the themes you've saved:</i><br><br>
<div id="themeContainer" class="heightAnimation" style="max-height: 0px;"></div>
</div><br>
<div class="settingTab">
<h3 class="center">Create theme</h3>
<i class="center">Create your own theme by changing the colors below.</i><br><br>
<div style="display: flex; flex-wrap: wrap;">
<div class="colorSelect rightm">
<l>Text color:</l><input type="color" data-change="text">
</div>
<div class="colorSelect rightm">
<l>Background color:</l><input type="color" data-change="background">
</div>
<div class="colorSelect rightm">
<l>Card color:</l><input type="color" data-change="card">
</div>
<div class="colorSelect rightm">
<l>Row color:</l><input type="color" data-change="row">
</div>
<div class="colorSelect rightm">
<l>Accent color:</l><input type="color" data-change="accent">
</div>
</div><br><br>
<div style="display: flex;">
<div class="button" id="saveTheme" style="background-color: var(--background); width: 100%; margin-right: 1vw;">Save theme</div>
<div class="button" id="importTheme" style="background-color: var(--background); width: 100%; margin-left: 1vw;">Import theme</div>
</div>
</div><br>
<div class="settingTab">
<h3 class="center">Alerts</h3>
<i class="center">Change alert duration</i><br><br>
<l>Duration (in milliseconds):</l><input type="number" id="alertChange" value="5000" style="margin-left: 10px; background-color: var(--background);">
</div><br>
<div class="settingTab">
<h3 class="center">Lazy loading</h3>
<i class="center">Change option(s) about how many entries will be displayed</i><br><br>
<l>When new items are loaded, go back to </l><input type="number" max="100" id="lazyLoadingMove" style="margin-left: 10px; background-color: var(--background);"><l>% of the div.</l><br><br><i>Put a value from 0 to 10, or from 90 to 100 to not change anything.</i>
</div><br>
<div class="settingTab" id="pwaTab">
<h3>Install as a PWA</h3>
<l>Open Unzipify also offline by instaling it as a Progressive Web Application</l><br><br>
<img style="display: block; margin: auto; height: 40vh; max-height: 120px;" data-fetch="laptop">
<div class="button" style="background-color: var(--background);" id="pwaBtn">Install app</div>
</div><br>
<div class="settingTab">
<h3 class="center">About Unzipify</h3>
<i class="center">Version <span id="versionId">1.0.0</span></i><br><br>
<div class="button" id="openSource" style="background-color: var(--background);">See open source licenses</div><br><br>
<div id="openSourceDiv" style="background-color: var(--background); padding: 15px; border-radius: 8px; padding-bottom: 10px; padding-top: 5px;"></div>
</div>
</div>
</div>
<div class="dialog opacity" id="downloadDialog" style="opacity: 0; display: none;">
<div class="innerDialog">
<img style="position: absolute; z-index: 2; top: 15px; right: 15px;" data-fetch="minimize"
id="minimizeDownload">
<h2>Download file</h2>
<l>You can download the new .zip file, or you can extract all of its content on a folder.</l><br><br>
<div style="display: flex; margin-right: 1vw;">
<div style="width: 100%;">
<div class="imgBtn" data-action="download">
<img data-fetch="folderzip" height="60px" width="60px" class="chooserImg"><br>
<l class="textCenter">Download this .zip file</l>
</div><br>
</div>
<div style="width: 100%; margin-left: 1vw;">
<div class="imgBtn" data-action="extract">
<img data-fetch="folderup" height="60px" width="60px" class="chooserImg"><br>
<l class="textCenter">Extract file in a folder</l>
</div><br>
</div>
</div><br><br>
</div>
</div>
<div class="dialog opacity" id="folderDialog" style="opacity: 0; display: none;">
<div class="innerDialog">
<img style="position: absolute; z-index: 2; top: 15px; right: 15px;" data-fetch="minimize"
id="minimizeFolder">
<h2>Create a folder</h2>
<l>You can upload an existing folder, or you can create a new one with no data inside.</l><br><br>
<div style="display: flex; margin-right: 1vw;">
<div style="width: 100%;">
<div class="imgBtn" data-action="folderzip">
<img data-fetch="folderzip" height="60px" width="60px" class="chooserImg"><br>
<l class="textCenter">Zip an existing folder</l>
</div><br>
</div>
<div style="width: 100%; margin-left: 1vw;">
<div class="imgBtn" data-action="addfolder">
<img data-fetch="addfolder" height="60px" width="60px" class="chooserImg"><br>
<l class="textCenter">Create a blank folder</l>
</div><br>
</div>
</div><br><br>
<div id="newFolderExclusive" style="display: none; opacity: 0;" class="opacity">
<l>Write the folder name:</l><input type="text" id="folderName"><br><br>
<div class="button" id="folderCreate">Create folder</div>
</div>
</div>
</div>
<div id="searchContainer" class="dialog opacity" style="z-index: 1; display: none; opacity: 0;">
<img style="position: absolute; z-index: 2; top: 15px; right: 15px;" data-fetch="minimize" id="minimizeFetch">
<div class="innerDialog" id="searchDialogInner">
<h2>Search file</h2>
<l>Check: </l><select id="checkSelect">
<option value="a">Everywhere</option>
<option value="b">Only in this folder and its subfolders</option>
<option value="c">Only in this folder</option>
</select><br><br>
<l>Write here a name, the results will be shown below.</l><br>
<input id="searchItem" type="text"><br><br>
<div id="searchContent" style="overflow-y: scroll; height: 30vh;"></div>
</div>
</div>
<div id="fileContainer" style="overflow-y: scroll; height: 60vh; flex-wrap: wrap; display: flex; align-content: flex-start;"></div>
<div class="dialog opacity" style="display: none; opacity: 0;" id="previewDialog">
<div class="innerDialog">
<img style="position: absolute; z-index: 2; top: 15px; right: 15px;" data-fetch="minimize"
id="minimizeInner">
<h2>File preview:</h2>
<l>File name: <span id="fileName"></span></l><br><br>
<div id="pdfControlContainer" style="display: flex; align-items: center; justify-content: center; background-color: var(--background); padding: 10px; border-radius: 8px; margin-bottom: 10px;">
<div class="imgBtn" data-action="prevPage">
<img data-fetch="prev" height="32px" width="32px">
</div>
<div class="imgBtn" data-action="nextPage">
<img data-fetch="next" height="32px" width="32px">
</div>
</div>
<div id="jsMediaContainer" style="height: 40vh;"></div>
</div>
</div>
<div id="hoverContainer"></div>
<script src="./jszip.js"></script>
<script>// Adding separated JS files if debugging with local server
if (location.hostname === "localhost" && location.pathname.indexOf("dist") === -1) {let a = document.createElement("script"); a.src = "./script.js"; document.body.append(a);}
</script>
</body>