Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const dropZone = document.getElementById('dropZone');
+ const fileInput = document.getElementById('fileInput');
+ const sourcePreview = document.getElementById('sourcePreview');
+ const resultPreview = document.getElementById('resultPreview');
+ const translateBtn = document.getElementById('translateBtn');
+
+ // Drag and drop handlers
+ dropZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropZone.classList.add('active');
+ });
+
+ dropZone.addEventListener('dragleave', () => {
+ dropZone.classList.remove('active');
+ });
+
+ dropZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ dropZone.classList.remove('active');
+ const file = e.dataTransfer.files[0];
+ handleFile(file);
+ });
+
+ // Click to upload
+ dropZone.querySelector('.upload-btn').addEventListener('click', () => {
+ fileInput.click();
+ });
+
+ fileInput.addEventListener('change', (e) => {
+ const file = e.target.files[0];
+ handleFile(file);
+ });
+
+ // File handling
+ function handleFile(file) {
+ if (!file.type.startsWith('image/')) {
+ alert('Please upload an image file');
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const img = document.createElement('img');
+ img.src = e.target.result;
+ sourcePreview.innerHTML = '';
+ sourcePreview.appendChild(img);
+ };
+ reader.readAsDataURL(file);
+ }
+
+ // Translation simulation
+ translateBtn.addEventListener('click', () => {
+ if (!sourcePreview.querySelector('img')) {
+ alert('Please upload an image first');
+ return;
+ }
+
+ translateBtn.disabled = true;
+ translateBtn.textContent = 'Translating...';
+
+ // Simulate translation process
+ setTimeout(() => {
+ const sourceImage = sourcePreview.querySelector('img');
+ const translatedImage = sourceImage.cloneNode(true);
+ resultPreview.innerHTML = '';
+ resultPreview.appendChild(translatedImage);
+
+ translateBtn.disabled = false;
+ translateBtn.textContent = 'Translate';
+ }, 1500);
+ });
+
+ // Smooth scrolling for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+ });
