-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
283 lines (270 loc) · 19.3 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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en" data-theme="light" data-theme-name="light" style="color-scheme: light;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Pix Lab - Images Resizer | A free offline tool, to resize, format & compress images</title>
<meta name="title" content="Pix Lab - Images Resizer | A free offline tool, to resize, format & compress images" />
<meta name="description" content="A completely free image resizer that works offline, allowing you to resize images, change their format, and compress them—all without the need to upload any files to a server." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://pixlab.cttricks.com" />
<meta property="og:title" content="Pix Lab - Images Resizer | A free offline tool, to resize, format & compress images" />
<meta property="og:description" content="A completely free image resizer that works offline, allowing you to resize images, change their format, and compress them—all without the need to upload any files to a server." />
<meta property="og:image" content="/assets/banners/banner3.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://pixlab.cttricks.com" />
<meta property="twitter:title" content="Pix Lab - Images Resizer | A free offline tool, to resize, format & compress images" />
<meta property="twitter:description" content="A completely free image resizer that works offline, allowing you to resize images, change their format, and compress them—all without the need to upload any files to a server." />
<meta property="twitter:image" content="/assets/banners/banner3.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css">
<link href="/assets/css/global-min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</head>
<body>
<header class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-6 px-10">
<div class="navbar">
<div class="navbar-start">
<a class="navbar-item">
<div class="flex justify-center">
<img src="/assets/icons/android-chrome-192x192.png" class="w-8 h-8">
<h1 class="font-akaya-kanadaka text-3xl -mt-1 ml-0.5 color-main">ix Lab</h1>
</div>
</a>
</div>
<div class="navbar-end gap-0">
<div class="dropdown navbar-item">
<label tabindex="0"><i class="ri-sun-fill"></i></label>
<div class="dropdown-menu font-rubik w-32">
<div class="dropdown-item text-base flex justify-center">
<div class="pointer-events-none"><span class="ri-sun-fill text-lg mr-2"></span>Light</div>
</div>
<div class="dropdown-item text-base flex justify-center">
<div class="pointer-events-none"><span class="ri-moon-fill text-lg mr-2"></span>Dark</div>
</div>
<div class="dropdown-item text-base flex justify-center">
<div class="pointer-events-none"><span class="ri-computer-fill text-lg mr-2"></span>System</div>
</div>
</div>
</div>
<a href="https://github.com/cttricks/pixlab" target="_blank" class="navbar-item"><i class="ri-github-line"></i></a>
<a class="navbar-item"><i class="ri-share-fill"></i></a>
</div>
</div>
</header>
<main class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-4 px-10">
<!-- Feature: Resize Image -->
<section class="w-full py-4" id="image-resizer">
<h2 class="text-center font-rubik font-normal text-4xl text-gray-700">Images Resizer</h2>
<!-- Choose image container -->
<div class="border-2 mt-12 rounded-md flex justify-center items-center border-dashed border-purple-500 relative" id="imageDropArea">
<!-- Before Choosing Images -->
<label for="choose-images" class="absolute top-0 left-0 h-full w-full z-0 cursor-pointer"></label>
<input id="choose-images" type="file" multiple>
<div class="text-center my-16 relative z-10 cursor-pointer">
<i class="ri-upload-2-fill text-6xl text-purple-600"></i>
<h3 class="mt-6 font-rubik text-gray-700 text-[20px] font-normal">Drop your images here or <a class="text-purple-600 hover:underline">browse</a>.</h3>
<div class="mt-2 mb-10">
<span class="badge badge-flat-secondary bg-transparent text-gray-500 font-normal text-sm">choose only</span>
<span class="badge badge-flat-secondary">.png</span>
<span class="badge badge-flat-secondary">.jpg</span>
<span class="badge badge-flat-secondary">.jpeg</span>
</div>
<button class="btn btn-primary rounded-md text-base">Select Images</button>
</div>
</div>
<!-- Choose new size, resolution, quality, bg-color & format -->
<div id="formatting-form">
<!-- Selected Images -->
<div class="border-2 flex p-8 gap-8 mt-12 rounded-md justify-start items-start border-dashed border-purple-500 relative flex-wrap">
<label for="choose-images" class="absolute top-0 left-0 h-full w-full z-0 cursor-pointer"></label>
<template id="selected-images">
<div class="image-preview">
<i class="ri-close-line"></i>
<div class="__image pointer-events-auto">
<img src="/assets/images/sample.png">
</div>
<h4 class="pointer-events-none">Sample1.png</h4>
<h5 class="pointer-events-none">1200 x 120px</h5>
<p class="pointer-events-none">114.96 KB</p>
</div>
</template>
</div>
<div class="mt-4 flex gap-4">
<label class="btn btn-solid-error rounded-md"><i class="ri-delete-bin-7-fill mr-2"></i>Clear All</label>
<label for="choose-images" class="btn btn-primary rounded-md"><i class="ri-image-add-fill mr-2"></i>Choose more</label>
</div>
<!-- Formatting -->
<h2 class="mt-12 text-left font-rubik font-normal text-3xl text-gray-700">Configure new size and formatting</h2>
<div class="mt-2 md:flex pt-4 gap-5">
<form class="flex-1">
<h3 class="font-rubik text-lg text-gray-600">Size</h3>
<div class="flex justify-start items-center gap-16 relative mt-2">
<input name="width" class="input-lg input w-20 rounded-md" type="number" placeholder="Width" />
<input name="height" class="input-lg input w-20 rounded-md" type="number" placeholder="Height" />
<select name="unit" class="select select-lg w-32 -ml-12 rounded-md">
<option value="percent">percent</option>
<option value="pixels" selected>pixels</option>
<option value="centimeters">centimeters</option>
<option value="inches">inches</option>
</select>
<div class="w-16 h-0.5 bg-gray-200 absolute left-20"></div>
<div class="w-8 h-8 absolute left-24 rounded-full bg-gray-200 cursor-pointer text-gray-600 flex justify-center items-center">
<div class="popover popover-hover">
<label id="lockWidthAndHeight" class="popover-trigger ri-lock-fill text-lg cursor-pointer"></label>
<div class="popover-content popover-top-center mb-3">
<div class="popover-arrow"></div>
<div class="p-4 text-sm font-rubik">Locks width and height to make the final image proportional to the original</div>
</div>
</div>
</div>
</div>
<h3 class="font-rubik text-lg text-gray-600 mt-6">Format & Background</h3>
<div class="flex justify-start items-center gap-2 relative mt-2">
<select name="format" class="select select-lg w-24 rounded-md">
<option value="png" selected>PNG</option>
<option value="jpg">JPG</option>
<option value="jpeg">JPEG</option>
<option value="gif" disabled>GIF</option>
<option value="webp" disabled>WebP</option>
</select>
<div data-color="#000000" class="bg-black border-2 input rounded-md w-10 ml-4 cursor-pointer"></div>
<div data-color="#ffffff" class="bg-white border-purple-600 border-2 input rounded-md w-10 cursor-pointer"></div>
<!-- ToDo <div data-color="transparent" class="bg-[url('/assets/icons/transparent.png')] border-2 input rounded-md w-10 cursor-pointer"></div> -->
<div data-color="#ffffff" class="input relative rounded-md w-10 flex justify-center items-center cursor-pointer">
<label for="bg-color-picker" class="ri-paint-fill text-xl cursor-pointer"></label>
<input name="bgColor" type="color" id="bg-color-picker" class="absolute top-0 w-1 h-1 -z-10" value="#ffffff">
</div>
</div>
<h3 class="font-rubik text-lg text-gray-600 mt-6">Image Quality & Compression</h3>
<div class="flex justify-start items-center gap-4 relative mt-2">
<select name="quality" class="select select-lg w-32 rounded-md">
<option value="100">Maximum</option>
<option value="90" selected>Best</option>
<option value="70">High</option>
<option value="50">Medium</option>
<option value="30">Low</option>
<option value="0">Minimal</option>
</select>
<select name="compression" class="select select-lg w-32 rounded-md">
<option value="lossless" selected>Lossless</option>
<option value="lossy">Lossy</option>
</select>
</div>
<div class="mt-12">
<button type="submit" class="btn btn-primary rounded-md text-base">Apply Changes</button>
</div>
</form>
<div class="hidden md:flex w-[340px] min-h-[280px] -mt-4 justify-center items-center flex-col-reverse">
<img src="/assets/banners/banner1.png" class="mr-[50%] mix-blend-darken">
<img src="/assets/banners/banner2.png" class="mix-blend-darken">
</div>
</div>
</div>
<!-- Export Images -->
<div id="formatted-images">
<h2 class="mt-12 text-left font-rubik font-normal text-3xl text-gray-700">Your images has been resized!</h2>
<div class="border-2 flex p-8 gap-8 mt-12 rounded-md justify-start items-start border-double border-purple-500 relative flex-wrap">
<template id="resizedImageTemplate">
<div class="image-preview">
<div class="__image">
<img src="/assets/images/sample.png">
</div>
<h4>Sample1.png</h4>
<h5>1200 x 120px</h5>
<p>114.96 KB</p>
<button class="btn btn-solid-primary mt-2 rounded-md btn-xs"><i class="ri-download-fill mr-1"></i>Download</button>
</div>
</template>
</div>
<button id="download-all" class="btn btn-primary mt-4 rounded-md"><i class="ri-download-fill mr-1"></i>Download All Images</button>
</div>
</section>
<!-- General Info & FAQ -->
<section class="w-full py-12 mt-12 font-rubik">
<h2 class="font-normal text-4xl text-gray-700">FAQ's</h2>
<p class="font-normal text-lg text-gray-500">Here are some common questions you may have while using this tool for image resizing.</p>
<div class="accordion-group mt-4 mb-12">
<template id="accordion-template">
<div class="accordion">
<input type="checkbox" id="accordion-1" class="accordion-toggle" />
<label for="accordion-1" class="accordion-title font-normal">What is Lossless Compression?</label>
<div class="accordion-content">
<p class="min-h-0 text-gray-600">Lorem ipsum</p>
</div>
</div>
</template>
</div>
</section>
</main>
<footer class="w-fill bg-purple-50">
<!-- Site info -->
<section class="py-16 px-10 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
<div class="w-full md:flex gap-20">
<div class="flex-1">
<div class="flex justify-start">
<img src="/assets/icons/android-chrome-192x192.png" class="w-7 h-7">
<div class="font-akaya-kanadaka text-2xl -mt-0.5 ml-0.5 color-main">ix Lab</div>
</div>
<p class="font-rubik text-gray-700 font-light mt-4">PixLab - Images resizer is a completely free image resizer that works offline, allowing you to resize images, change their format, and compress them—all without the need to upload any files to a server.</p>
</div>
<div class="flex-1 flex gap-10 md:gap-4 mt-10 md:mt-0">
<div class="flex-1 justify-end hidden lg:flex"></div>
<div class="md:flex-1 justify-start md:justify-end flex">
<div>
<h3 class="text-base font-rubik mb-3">Important Links</h3>
<p class="mb-1.5"><a class="text-gray-600 cursor-pointer hover:text-purple-600 hover:underline" href="mailto:hello@cttricks.com">Contact</a></p>
<p class="mb-1.5"><a class="text-gray-600 cursor-pointer hover:text-purple-600 hover:underline" href="https://cttricks.com/privacy-policy-2/" target="_blank">Privacy Policy</a></p>
<p class="mb-1.5"><a class="text-gray-600 cursor-pointer hover:text-purple-600 hover:underline" target="_blank" href="https://github.com/cttricks/pixlab">GitHub</a></p>
<p class="mb-1.5"><a class="text-gray-600 cursor-pointer hover:text-purple-600 hover:underline" target="_blank" href="https://x.com/ct_tricks">Twitter</a></p>
</div>
</div>
<div class="md:flex-1 justify-start md:justify-end flex">
<div>
<h3 class="text-base font-rubik mb-3">Other Projects</h3>
<p class="mb-1.5"><a class="text-gray-600 cursor-pointer hover:text-purple-600 hover:underline">Favicon Generator</a></p>
<p class="mb-1.5"><a class="text-gray-600 cursor-pointer hover:text-purple-600 hover:underline" href="/#image-resizer">Images Resizer</a></p>
<p class="mb-1.5"><a class="text-gray-400 pointer-events-none">More coming soon</a></p>
</div>
</div>
</div>
</div>
</section>
<!-- Copyright Info -->
<section class="w-full text-center bg-purple-600 px-10">
<p class="text-base pt-4 pb-3 text-purple-100 font-rubik">© 2024 Pix Lab • Passionately crafted for you • All rights reserved</p>
</section>
</footer>
<!-- modals -->
<input class="modal-state" id="image-import-log" type="checkbox" />
<div class="modal">
<div class="modal-content flex flex-col gap-4">
<label for="image-import-log" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
<h2 class="text-xl">Unsupported Files</h2>
<p class="text-sm text-gray-500">The following files could not be processed because they do not meet the required criteria. Please ensure that you only upload image files with the following extensions: PNG, JPG, or JPEG.</p>
<div class="images-error-logs w-full">
<div class="bg-rose-50 p-4 rounded-md">
<div class="text-gray-800">Unsupported FileSize 10546518, it must be less ten 10MB</div>
<div class="text-rose-600 text-sm">sample.png</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pica/6.1.1/pica.min.js"></script>
<script type="text/javascript" src="/assets/js/controls.js"></script>
<script type="text/javascript" src="/assets/js/resizer.js"></script>
</body>
</html>