Spaces:
Configuration error
Configuration error
| document.addEventListener('DOMContentLoaded', () => { | |
| // DOM Elements | |
| const dropZone = document.getElementById('dropZone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const translateBtn = document.getElementById('translateBtn'); | |
| const previewSection = document.getElementById('previewSection'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| const previewFrame = document.getElementById('previewFrame'); | |
| const themeToggle = document.querySelector('#themeToggle'); | |
| // File handling | |
| dropZone.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', (e) => { | |
| if (e.target.files.length) { | |
| handleFileSelection(e.target.files[0]); | |
| } | |
| }); | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropZone.classList.add('highlight'); | |
| } | |
| function unhighlight() { | |
| dropZone.classList.remove('highlight'); | |
| } | |
| dropZone.addEventListener('drop', (e) => { | |
| const dt = e.dataTransfer; | |
| const file = dt.files[0]; | |
| if (file && file.type === 'application/pdf') { | |
| handleFileSelection(file); | |
| } else { | |
| alert('Please upload a valid PDF file.'); | |
| } | |
| }); | |
| function handleFileSelection(file) { | |
| const fileName = file.name; | |
| const fileSize = (file.size / (1024 * 1024)).toFixed(2); // in MB | |
| if (fileSize > 50) { | |
| alert('File size exceeds 50MB limit.'); | |
| return; | |
| } | |
| // Update UI to show selected file | |
| dropZone.innerHTML = ` | |
| <i data-feather="file-text" class="w-12 h-12 text-primary-500 mb-4"></i> | |
| <p class="text-gray-900 dark:text-white font-medium">${fileName}</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">${fileSize} MB</p> | |
| `; | |
| feather.replace(); | |
| } | |
| // Translation process | |
| translateBtn.addEventListener('click', async () => { | |
| if (!fileInput.files.length) { | |
| alert('Please select a PDF file first.'); | |
| return; | |
| } | |
| // Show loading state | |
| translateBtn.disabled = true; | |
| translateBtn.innerHTML = ` | |
| <i data-feather="loader" class="animate-spin mr-2"></i> | |
| Translating... | |
| `; | |
| feather.replace(); | |
| // Simulate translation process | |
| setTimeout(() => { | |
| // In a real app, this would upload the file to a server for processing | |
| // and then return the translated PDF | |
| // For demo purposes, we'll just show the preview section | |
| previewSection.classList.remove('hidden'); | |
| previewFrame.src = URL.createObjectURL(fileInput.files[0]); | |
| // Reset button state | |
| translateBtn.disabled = false; | |
| translateBtn.innerHTML = ` | |
| <i data-feather="globe" class="mr-2"></i> | |
| Translate Document | |
| `; | |
| feather.replace(); | |
| }, 3000); | |
| }); | |
| // Download functionality | |
| downloadBtn.addEventListener('click', () => { | |
| if (previewFrame.src) { | |
| const a = document.createElement('a'); | |
| a.href = previewFrame.src; | |
| a.download = `translated_${fileInput.files[0].name}`; | |
| a.click(); | |
| } | |
| }); | |
| }); |