-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (165 loc) · 4.17 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
<!doctype html>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<!-- Icon is CC-BY VisualPharm https://findicons.com/icon/558618/zip -->
<title>Remove hidden files from zip</title>
<!--
/*
#90AFC5 mist
#336B87 stone
#763626
#F4CC70
#DE7A22
#20948B
#6AB187
#e5edf1 body
#0f3c4b text
#c8dadf container
#92b0b3 outline
*/
-->
<style>
:root {
--bg: #90afc5;
--obg: #336B87;
--tc: #000;
--otc: #fff;
--otch: var(--bg);
/* 00ffff #c8dadf .15s*/
}
/*a lot of these styles come from view-source:https://css-tricks.com/examples/DragAndDropFileUploading/*/
body {
font-family: sans-serif;
color: var(--tc);
padding: 5rem 1.25rem;
background-color: var(--bg);
}
.container {
/* background-color: #92b0b3; */
outline: 2px dashed #fff;
outline-offset: -10px;
transition: outline-offset .15s ease-in-out, background-color .15s linear, color .15s ease-in-out;
background-color: var(--obg);
padding: 100px 20px;
box-sizing: border-box;
vertical-align: baseline;
border: 0;
color: var(--otc);
}
#containerContainer {
width: 100%;
max-width: 680px;
text-align: center;
margin: 0 auto;
font-size: 1.5rem;
}
.animated {
outline-offset: -20px;
outline-color: var(--obg);
background-color: var(--otc);
color: var(--obg);
}
.container label {
cursor: pointer;
}
.container label:hover strong {
color: var(--otch);
}
p, a {
/*text-decoration: none;*/
font-style: italic;
color: var(--tc);
font-size: 0.75rem;
}
.rembox > label {
display: inline-flex;
}
.list {
text-align: initial;
margin-top: 1rem;
}
.list li {
font-size: 0.9rem;
}
.flex {
display: flex;
}
.stretch {
align-items: stretch;
}
.flex section {
flex-grow: 1;
}
/*.flexcontainer label {
text-align: center;
}*/
.hidden {
display: none;
}
.center {
text-align: center;
justify-content: center;
}
.rembox {
margin-top: .5em;
}
.default {
cursor: default;
}
.reminput {
min-width: 1em;
background-color: var(--obg);
cursor: text;
color: var(--otc);
}
</style>
<h2 class="center">Remove Hidden Files from Zip Folders</h2>
<section id="containerContainer">
<section class="container">
<input type="file" id="fileElem" style="display: none" accept=".zip">
<label id="label" for="fileElem"><strong>Select zip</strong> which has hidden files to remove</label>
</section>
</section>
<section class="center">
<section class="flex center rembox default">
<input type="checkbox" id="remc">
<label><label for="remc">Remove </label><div id="rem" class="reminput" contenteditable>-raw</div><label> from zip filename
</label>
</section>
<div>
<p>A zip file will be downloaded with the hidden files removed.</p>
</div>
</section>
<section class="flex stretch hidden">
<section class="list left">
<label>Original</label>
<p id="itemsleft"></p>
<ul id="left">
</ul>
</section>
<section class="list right">
<label>Result</label>
<p id="itemsright"></p>
<ul id="right">
</ul>
</section>
</section>
<p class="center default">Thanks heaps to <a href="https://css-tricks.com/drag-and-drop-file-uploading/">CSS-Tricks</a> for the layout, <a href="https://stuk.github.io/jszip/">JSZip</a> for working with zip files and <a href="https://github.com/eligrey/FileSaver.js">FileSaver</a> for downloading the file.</p>
<script src="alt.js" defer></script>
<script src="jszip.js" defer></script>
<script src="filesaver.js" defer></script>
<script>
(function(d, h, m){
var js, fjs = d.getElementsByTagName(h)[0];
if (d.getElementById(m)){return;}
js = d.createElement(h); js.id = m; js.src = 'https://makerwidget.com/js/embed.js';
js.onload = function(){
window.makerWidgetComInit({
position: 'left',
widget: 'hiayuviklmksxba0-z54bbicafujhwlc3-s0h9k5yamvczlbbf'
})};
if (navigator.onLine) {
fjs.parentNode.insertBefore(js, fjs)
}
}(document, 'script', 'dhm'))
</script>