-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (140 loc) · 5.06 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Compressor</title>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.0/dist/browser-image-compression.min.js"></script>
<link href="styles.css" rel="stylesheet" />
</head>
<body
class="min-h-screen bg-gray-900 text-gray-100 transition-colors duration-200"
>
<div class="container mx-auto px-4 py-8">
<header class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold">Image Compressor</h1>
<div class="flex items-center gap-4">
<button
id="reset-btn"
class="px-4 py-2 rounded-md bg-red-500 hover:bg-red-600 text-white transition-colors duration-200"
>
Reset
</button>
<div class="theme-switch-wrapper">
<label class="theme-switch">
<input type="checkbox" id="theme-toggle" />
<div class="slider round">
<svg
class="sun-icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
<svg
class="moon-icon"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M21 12.79A9 9 0 1 1 11.21 3 A7 7 0 0 0 21 12.79z"
/>
</svg>
</div>
</label>
</div>
</div>
</header>
<!-- Add toast container at the top -->
<div id="toast" class="toast hidden">
<div class="toast-content">Reset successful</div>
</div>
<div id="progress" class="progress-overlay hidden">
<div class="progress-container">
<div class="progress-spinner"></div>
<p class="progress-text">Compressing images...</p>
<p class="progress-counter"></p>
</div>
</div>
<!-- Remove spinner section completely -->
<div
id="drop-zone"
class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center hover:border-blue-500 transition-colors duration-200"
>
<div class="space-y-4">
<div class="compression-control mb-6">
<label class="block text-sm font-medium mb-2"
>Compression Level: <span id="compression-value">50%</span></label
>
<input
type="range"
id="compression-slider"
class="w-full"
min="0"
max="100"
value="50"
/>
<p class="text-xs mt-1 text-gray-500">
Higher value = better quality, larger file size
</p>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="mx-auto h-12 w-12 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p class="text-lg">
Drag & drop images here or
<label class="text-blue-500 hover:text-blue-400 cursor-pointer"
>browse<input
type="file"
class="hidden"
id="file-input"
multiple
accept="image/*"
/></label>
</p>
<p class="text-sm text-gray-500">Supports JPG & PNG</p>
</div>
</div>
<div
id="results"
class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
>
<!-- Results will be dynamically added here -->
</div>
</div>
<script src="app.js"></script>
</body>
</html>