-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
150 lines (132 loc) · 9.63 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bulk Image Size Reducer</title>
<!-- Include Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3209599667193374" crossorigin="anonymous"></script>
<meta name="google-adsense-account" content="ca-pub-3209599667193374">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4J6WHWB100"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-4J6WHWB100");
</script>
</head>
<body class="font-sans text-center bg-gray-100 py-10">
<h1 class="text-4xl mb-6" id="pageTitle">Bulk Image Size Reducer</h1>
<form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm" class="w-96 mx-auto bg-white p-6 rounded-lg shadow-md">
<label for="images" class="block text-left text-sm font-medium text-gray-700 mb-2" id="chooseImagesLabel">Choose multiple images (JPEG, JPG, PNG):</label>
<input type="file" id="imageInput" name="images" multiple required class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 mb-4" />
<div id="fileError" class="text-red-500"></div>
<label for="instagramFormat" class="block mb-2 flex items-center">
<input type="checkbox" id="instagramFormat" name="isInstagramFeedFormat" class="mr-2" onchange="toggleExplanationAndDefaults()" />
<span id="instagramFormatText">Instagram Feed Format</span>
</label>
<p class="text-sm text-gray-500" id="instagramFormatExplanation" style="display: none">Enable this option to format images for Instagram feed, adding white padding to make them fit the grid.</p>
<label for="removeBackground" class="block mb-2 flex items-center">
<input type="checkbox" id="removeBackground" name="isRemoveBackground" class="mr-2" />
<span id="removeBackgroundText">Remove Background</span>
</label>
<label for="quality" class="block text-left text-sm font-medium text-gray-700 mb-2" id="qualityLabel">Quality (%):</label>
<input type="number" name="quality" min="1" max="100" value="80" required class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 mb-4" />
<div class="flex mb-4">
<div class="w-1/2 pr-2">
<label for="maxSizeValue" class="block text-left text-sm font-medium text-gray-700 mb-2" id="maxSizeLabel">Max Size:</label>
<input type="number" name="maxSizeValue" min="1" value="2" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
</div>
<div class="w-1/2 pl-2">
<label for="maxSizeUnit" class="block text-left text-sm font-medium text-gray-700 mb-2" id="maxSizeUnitLabel">Unit:</label>
<select name="maxSizeUnit" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<option value="KB">KB</option>
<option value="MB" selected>MB</option>
</select>
</div>
</div>
<!-- Use placeholders for default values -->
<div id="maxWidthContainer">
<label for="maxWidth" class="block text-left text-sm font-medium text-gray-700 mb-2" id="maxWidthLabel">Max Width (px):</label>
<input type="number" name="maxWidth" min="1" placeholder="Default: 4096" value="4096" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 mb-4" />
</div>
<div id="maxHeightContainer">
<label for="maxHeight" class="block text-left text-sm font-medium text-gray-700 mb-2" id="maxHeightLabel">Max Height (px):</label>
<input type="number" name="maxHeight" min="1" placeholder="Default: 4096" value="4096" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 mb-6" />
</div>
<button type="submit" class="bg-blue-500 text-white font-semibold px-4 py-2 rounded-full hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50" id="submitButton">Upload and Reduce</button>
</form>
<script>
// Function to get the user's browser language
function getUserLanguage() {
return navigator.language || navigator.userLanguage;
}
// Function to set translations based on language
function setTranslations(language) {
const translations = {
en: {
pageTitle: "Bulk Image Size Reducer",
chooseImagesLabel: "Choose multiple images (JPEG, JPG, PNG):",
instagramFormatText: "Instagram Feed Format",
removeBackgroundText: "Remove Background",
instagramFormatExplanation: "Enable this option to format images for Instagram feed, adding white padding to make them fit the grid.",
qualityLabel: "Quality (%):",
maxSizeLabel: "Max Size:",
maxSizeUnitLabel: "Unit:",
maxWidthLabel: "Max Width (px):",
maxHeightLabel: "Max Height (px):",
submitButton: "Upload and Reduce",
},
id: {
pageTitle: "Pengurang Ukuran Gambar Massal",
chooseImagesLabel: "Pilih beberapa gambar (JPEG, JPG, PNG):",
instagramFormatText: "Format Feed Instagram",
instagramFormatExplanation: "Aktifkan opsi ini untuk memformat gambar untuk feed Instagram, menambahkan padding putih untuk membuatnya cocok dengan grid.",
removeBackgroundText: "Hapus Background",
qualityLabel: "Kualitas (%):",
maxSizeLabel: "Ukuran Maks:",
maxSizeUnitLabel: "Unit:",
maxWidthLabel: "Lebar Maks (px):",
maxHeightLabel: "Tinggi Maks (px):",
submitButton: "Unggah dan Kurangi",
},
};
const currentTranslations = translations[language] || translations.en;
// Set text content based on translations
document.getElementById("pageTitle").textContent = currentTranslations.pageTitle;
document.getElementById("chooseImagesLabel").textContent = currentTranslations.chooseImagesLabel;
document.getElementById("instagramFormatText").textContent = currentTranslations.instagramFormatText;
document.getElementById("removeBackgroundText").textContent = currentTranslations.removeBackgroundText;
document.getElementById("instagramFormatExplanation").textContent = currentTranslations.instagramFormatExplanation;
document.getElementById("qualityLabel").textContent = currentTranslations.qualityLabel;
document.getElementById("maxSizeLabel").textContent = currentTranslations.maxSizeLabel;
document.getElementById("maxSizeUnitLabel").textContent = currentTranslations.maxSizeUnitLabel;
document.getElementById("maxWidthLabel").textContent = currentTranslations.maxWidthLabel;
document.getElementById("maxHeightLabel").textContent = currentTranslations.maxHeightLabel;
document.getElementById("submitButton").textContent = currentTranslations.submitButton;
}
// Get user's language and set translations
const userLanguage = getUserLanguage().toLowerCase().substring(0, 2);
setTranslations(userLanguage);
// Check for language change on submit (if you want to update language dynamically without reloading the page)
document.getElementById("uploadForm").addEventListener("submit", function (event) {
const userLanguage = getUserLanguage().toLowerCase().substring(0, 2);
setTranslations(userLanguage);
});
function toggleExplanationAndDefaults() {
const explanation = document.getElementById("instagramFormatExplanation");
const checkbox = document.getElementById("instagramFormat");
const maxWidthContainer = document.getElementById("maxWidthContainer");
const maxHeightContainer = document.getElementById("maxHeightContainer");
explanation.style.display = checkbox.checked ? "block" : "none";
// Toggle visibility of Max Width and Max Height fields
maxWidthContainer.style.display = checkbox.checked ? "none" : "block";
maxHeightContainer.style.display = checkbox.checked ? "none" : "block";
}
</script>
</body>
</html>