-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (63 loc) · 2.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merge CSS Files</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap">
</head>
<body>
<div id="app" class="container">
<form
method="post"
action="/"
enctype="multipart/form-data"
novalidate
class="box has-advanced-upload"
:class="{ 'is-dragover': isDragging }"
@dragover.prevent="isDragging = true"
@dragenter.prevent="isDragging = true"
@dragleave.prevent="isDragging = false"
@dragend.prevent="isDragging = false"
@drop.prevent="drop"
>
<div class="box__input">
<svg class="box__icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
<path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z" />
</svg>
<input
ref="fileInput"
type="file"
name="files[]"
accept=".css"
id="file"
class="box__file"
data-multiple-caption="{count} files selected"
multiple
:class="{ 'has-focus': inputHasFocus }"
@focus="inputHasFocus = true"
@blur="inputHasFocus = false"
@change="fileInputChange"
/>
<label for="file">
<strong>Add CSS files</strong><span class="box__dragndrop"> or by dragging here</span>
</label>
<ul class="file-list" v-if="selectedFiles.length" v-cloak>
<li v-for="file in selectedFiles">
<div class="file-name">
{{ file.name }}
</div>
<div class="file-size">
{{ file.size | fileSizeFormat }}
</div>
</li>
</ul>
<button v-cloak v-if="selectedFiles.length && result.length" type="button" class="box__button" @click="mergeCSS">Download Merged CSS ({{ result.length | fileSizeFormat }})</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>