File size: 2,569 Bytes
b320581 | 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 | document.addEventListener('DOMContentLoaded', function() {
const uploadContainer = document.getElementById('upload-container');
const photoUpload = document.getElementById('photo-upload');
const previewContainer = document.getElementById('preview-container');
const originalPreview = document.getElementById('original-preview');
const heroPreview = document.getElementById('hero-preview');
const controls = document.getElementById('controls');
const generateBtn = document.getElementById('generate-btn');
// Handle drag and drop
uploadContainer.addEventListener('dragover', (e) => {
e.preventDefault();
uploadContainer.classList.add('border-primary', 'bg-gray-700');
});
uploadContainer.addEventListener('dragleave', () => {
uploadContainer.classList.remove('border-primary', 'bg-gray-700');
});
uploadContainer.addEventListener('drop', (e) => {
e.preventDefault();
uploadContainer.classList.remove('border-primary', 'bg-gray-700');
handleFiles(e.dataTransfer.files);
});
// Handle click to upload
uploadContainer.addEventListener('click', () => {
photoUpload.click();
});
// Handle file selection
photoUpload.addEventListener('change', (e) => {
if (e.target.files.length) {
handleFiles(e.target.files);
}
});
// Process selected files
function handleFiles(files) {
const file = files[0];
if (file.type.match('image.*')) {
const reader = new FileReader();
reader.onload = function(e) {
originalPreview.src = e.target.result;
// Generate mock hero preview (in a real app, this would call an API)
heroPreview.src = e.target.result;
previewContainer.classList.remove('hidden');
controls.classList.remove('hidden');
// Simulate processing delay
setTimeout(() => {
heroPreview.parentElement.querySelector('.absolute').classList.add('hidden');
}, 3000);
};
reader.readAsDataURL(file);
} else {
alert('Please upload an image file.');
}
}
// Generate button click
generateBtn.addEventListener('click', () => {
// In a real app, this would call an API to generate the transformation video
alert('Generating your superhero transformation video...');
});
}); |