-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
70 lines (61 loc) · 4.19 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
<!DOCTYPE html>
<html class="h-full">
<head>
<title>FroggoCutter 🐸⚔️</title>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
<link rel="manifest" href="site.webmanifest">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script defer src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
<script type="module" src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full flex flex-col min-h-screen bg-gray-100 text-gray-900">
<div class="container mx-auto px-4 rounded-lg py-8">
<div class="flex flex-wrap gap-4 justify-center items-center mb-6">
<select id="outputFormat" class=" rounded-2xl border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors duration-300">
<option value="t_login">t_login</option>
<option value="bmp">BMP</option>
</select>
<div id="BitContainer" class="hidden items-center gap-2">
<label class="flex items-center space-x-2">
<input type="checkbox" id="8Bit" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
<span>8Bit</span>
</label>
<select id="paletteMethod" disabled class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors duration-300">
<option value="medianCut">medianCut</option>
<option value="kmeans">kmeans</option>
<option value="popularityQuantization">popularityQuantization</option>
</select>
</div>
</div>
<input type="file" id="imageInput" accept="image/*" class="hidden">
<div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-2xl w-4/5 h-[70vh] mx-auto flex items-center justify-center text-lg text-gray-500 cursor-pointer hover:border-green-500 transition-colors duration-300">
Click here, drag and drop, or Ctrl+V to paste an image
</div>
<div id="container" class="max-h-[77vh] hidden mx-auto max-w-4xl">
<canvas id="canvas" class="rounded-2xl"></canvas>
</div>
<div class="flex flex-wrap justify-center gap-4 mt-6">
<button id="aspectRatio169" class="px-4 py-2 bg-gray-800 text-white rounded-2xl hover:bg-green-600 transition-colors duration-300" title="Best aspect ratio for Ragnarok clients in fullscreen">16:9</button>
<button id="aspectRatio43" class="px-4 py-2 bg-gray-800 text-white rounded-2xl hover:bg-green-600 transition-colors duration-300">4:3</button>
<button id="aspectRatio11" class="px-4 py-2 bg-gray-800 text-white rounded-2xl hover:bg-green-600 transition-colors duration-300">1:1</button>
<button id="aspectRatioFree" class="px-4 py-2 bg-gray-800 text-white rounded-2xl hover:bg-green-600 transition-colors duration-300">Free</button>
<button id="reset" class="px-4 py-2 bg-gray-800 text-white rounded-2xl hover:bg-green-600 transition-colors duration-300">Reset</button>
</div>
<div class="flex justify-center mt-6">
<button id="cropButton" class="relative px-6 py-3 bg-gray-800 text-white rounded-2xl hover:bg-green-600 transition-colors duration-300">
Crop & Download
</button>
</div>
</div>
<button id="dark-mode-btn" class="fixed bottom-5 right-8 px-5 py-2.5 bg-gray-800 text-white rounded-2xl hover:bg-green-600 transition-all duration-300 transform hover:scale-105 z-50">
<span class="btn-text">Dark Mode</span>
</button>
</body>
</html>