Spaces:

Humarga
/

heroforge-superhero-maker

Running

It doesn't work

b320581 verified 12 months ago

2.57 kB

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...');
    });
});

	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...');
	});
	});