Spaces:

halgorn
/

unityleadcapture-game-dev-career-launchpad

Running

unityleadcapture-game-dev-career-launchpad / script.js

crie um site para captura de leads com unity dev e mercado de trabalho com backend e banco de dados mysql

679b160 verified about 1 year ago

3.44 kB

// Shared JavaScript across all pages
console.log('UnityLeadCapture App loaded');

// Form submission handler
document.addEventListener('DOMContentLoaded', function() {
    const leadForm = document.getElementById('leadForm');
    
    if (leadForm) {
        leadForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(leadForm);
            const data = {
                name: formData.get('name') || leadForm.querySelector('input[type="text"]').value,
                email: formData.get('email') || leadForm.querySelector('input[type="email"]').value,
                phone: formData.get('phone') || leadForm.querySelector('input[type="tel"]').value,
                experience: formData.get('experience') || leadForm.querySelector('select').value,
                skills: formData.get('skills') || leadForm.querySelector('textarea').value
            };
            
            // Simulate API call to backend
            try {
                const submitBtn = leadForm.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                
                // Show loading state
                submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin inline mr-2"></i>Processando...';
                feather.replace();
                
                // Simulate API delay
                await new Promise(resolve => setTimeout(resolve, 2000));
                
                // Show success message
                showSuccessMessage('Cadastro realizado com sucesso! Em breve entraremos em contato com oportunidades exclusivas. 🎮');
                
                // Reset form
                leadForm.reset();
                submitBtn.innerHTML = originalText;
                feather.replace();
                
            } catch (error) {
                console.error('Error submitting form:', error);
                alert('Erro ao processar cadastro. Tente novamente.');
            }
        });
    }
});

// Show success message
function showSuccessMessage(message) {
    const existingMessage = document.querySelector('.success-message');
    if (existingMessage) {
        existingMessage.remove();
    }
    
    const successDiv = document.createElement('div');
    successDiv.className = 'success-message fixed top-4 right-4 bg-green-500 text-white p-4 rounded-lg shadow-lg z-50 max-w-sm';
    successDiv.innerHTML = `
        <div class="flex items-center">
            <i data-feather="check-circle" class="mr-2"></i>
            <span>${message}</span>
        </div>
    `;
    
    document.body.appendChild(successDiv);
    feather.replace();
    
    // Remove message after 5 seconds
    setTimeout(() => {
        successDiv.remove();
    }, 5000);
}

// Initialize tooltips and other interactive elements
function initInteractiveElements() {
    // Add hover effects to benefit cards
    const benefitCards = document.querySelectorAll('.bg-gray-800');
    benefitCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-5px)';
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
        });
    });
}

// Call initialization when DOM is loaded
document.addEventListener('DOMContentLoaded', initInteractiveElements);

	// Shared JavaScript across all pages
	console.log('UnityLeadCapture App loaded');

	// Form submission handler
	document.addEventListener('DOMContentLoaded', function() {
	const leadForm = document.getElementById('leadForm');

	if (leadForm) {
	leadForm.addEventListener('submit', async function(e) {
	e.preventDefault();

	const formData = new FormData(leadForm);
	const data = {
	name: formData.get('name') \|\| leadForm.querySelector('input[type="text"]').value,
	email: formData.get('email') \|\| leadForm.querySelector('input[type="email"]').value,
	phone: formData.get('phone') \|\| leadForm.querySelector('input[type="tel"]').value,
	experience: formData.get('experience') \|\| leadForm.querySelector('select').value,
	skills: formData.get('skills') \|\| leadForm.querySelector('textarea').value
	};

	// Simulate API call to backend
	try {
	const submitBtn = leadForm.querySelector('button[type="submit"]');
	const originalText = submitBtn.innerHTML;

	// Show loading state
	submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin inline mr-2"></i>Processando...';
	feather.replace();

	// Simulate API delay
	await new Promise(resolve => setTimeout(resolve, 2000));

	// Show success message
	showSuccessMessage('Cadastro realizado com sucesso! Em breve entraremos em contato com oportunidades exclusivas. 🎮');

	// Reset form
	leadForm.reset();
	submitBtn.innerHTML = originalText;
	feather.replace();

	} catch (error) {
	console.error('Error submitting form:', error);
	alert('Erro ao processar cadastro. Tente novamente.');
	}
	});
	}
	});

	// Show success message
	function showSuccessMessage(message) {
	const existingMessage = document.querySelector('.success-message');
	if (existingMessage) {
	existingMessage.remove();
	}

	const successDiv = document.createElement('div');
	successDiv.className = 'success-message fixed top-4 right-4 bg-green-500 text-white p-4 rounded-lg shadow-lg z-50 max-w-sm';
	successDiv.innerHTML = `
	<div class="flex items-center">
	<i data-feather="check-circle" class="mr-2"></i>
	<span>${message}</span>
	</div>
	`;

	document.body.appendChild(successDiv);
	feather.replace();

	// Remove message after 5 seconds
	setTimeout(() => {
	successDiv.remove();
	}, 5000);
	}

	// Initialize tooltips and other interactive elements
	function initInteractiveElements() {
	// Add hover effects to benefit cards
	const benefitCards = document.querySelectorAll('.bg-gray-800');
	benefitCards.forEach(card => {
	card.addEventListener('mouseenter', () => {
	card.style.transform = 'translateY(-5px)';
	});

	card.addEventListener('mouseleave', () => {
	card.style.transform = 'translateY(0)';
	});
	});
	}

	// Call initialization when DOM is loaded
	document.addEventListener('DOMContentLoaded', initInteractiveElements);