Mercurial

comparison mrjunejune/src/tools/file_converter/index.html @ 93:be91a73d801a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Updated my website.
author June Park <parkjune1995@gmail.com>
date Fri, 02 Jan 2026 18:02:22 -0800
parents 655ea0b661fd
children 3bdfffaad162
comparison
equal deleted inserted replaced
92:655ea0b661fd 93:be91a73d801a
146 <div class="result" id="videoResult"> 146 <div class="result" id="videoResult">
147 <p id="videoMessage"></p> 147 <p id="videoMessage"></p>
148 <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a> 148 <a id="videoDownload" class="download-link" style="display: none;">Download MP4 Video</a>
149 </div> 149 </div>
150 </div> 150 </div>
151 {{/parts/footer.html}}
151 </div> 152 </div>
152 153 <script src="/tools/file_converter/index.js"></script>
153 <script>
154 async function convertImageToWebP() {
155 const input = document.getElementById('imageInput');
156 const btn = document.getElementById('convertImageBtn');
157 const loading = document.getElementById('imageLoading');
158 const result = document.getElementById('imageResult');
159 const message = document.getElementById('imageMessage');
160 const download = document.getElementById('imageDownload');
161
162 if (!input.files || !input.files[0]) {
163 alert('Please select an image file first');
164 return;
165 }
166
167 const file = input.files[0];
168
169 // Show loading state
170 btn.disabled = true;
171 loading.classList.add('show');
172 result.classList.remove('show', 'success', 'error');
173 download.style.display = 'none';
174
175 try {
176 const response = await fetch('/api/convert/image-to-webp', {
177 method: 'POST',
178 body: file,
179 headers: {
180 'Content-Type': file.type
181 }
182 });
183
184 loading.classList.remove('show');
185 result.classList.add('show');
186
187 if (response.ok) {
188 const data = await response.json();
189
190 download.href = data.download_url;
191 download.download = file.name.replace(/\.[^/.]+$/, '') + '.webp';
192 download.style.display = 'inline-block';
193
194 message.textContent = 'Conversion successful! Link expires in ' + data.expires + '.';
195 result.classList.add('success');
196 } else {
197 const text = await response.text();
198 message.textContent = 'Conversion failed: ' + text;
199 result.classList.add('error');
200 }
201 } catch (error) {
202 loading.classList.remove('show');
203 result.classList.add('show', 'error');
204 message.textContent = 'Error: ' + error.message;
205 } finally {
206 btn.disabled = false;
207 }
208 }
209
210 async function convertVideoToMP4() {
211 const input = document.getElementById('videoInput');
212 const btn = document.getElementById('convertVideoBtn');
213 const loading = document.getElementById('videoLoading');
214 const result = document.getElementById('videoResult');
215 const message = document.getElementById('videoMessage');
216 const download = document.getElementById('videoDownload');
217
218 if (!input.files || !input.files[0]) {
219 alert('Please select a video file first');
220 return;
221 }
222
223 const file = input.files[0];
224
225 // Show loading state
226 btn.disabled = true;
227 loading.classList.add('show');
228 result.classList.remove('show', 'success', 'error');
229 download.style.display = 'none';
230
231 try {
232 const response = await fetch('/api/convert/video-to-mp4', {
233 method: 'POST',
234 body: file,
235 headers: {
236 'Content-Type': file.type
237 }
238 });
239
240 loading.classList.remove('show');
241 result.classList.add('show');
242
243 if (response.ok) {
244 const data = await response.json();
245
246 download.href = data.download_url;
247 download.download = file.name.replace(/\.[^/.]+$/, '') + '.mp4';
248 download.style.display = 'inline-block';
249
250 message.textContent = 'Conversion successful! Link expires in ' + data.expires + '.';
251 result.classList.add('success');
252 } else {
253 const text = await response.text();
254 message.textContent = 'Conversion failed: ' + text;
255 result.classList.add('error');
256 }
257 } catch (error) {
258 loading.classList.remove('show');
259 result.classList.add('show', 'error');
260 message.textContent = 'Error: ' + error.message;
261 } finally {
262 btn.disabled = false;
263 }
264 }
265 </script>
266 </body> 154 </body>
267 </html> 155 </html>