File size: 4,563 Bytes
9c69b5a | 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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | // Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 100,
behavior: 'smooth'
});
}
});
});
// Mobile menu toggle functionality
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuBtn = document.querySelector('custom-navbar')?.shadowRoot?.querySelector('.mobile-menu-btn');
const navLinks = document.querySelector('custom-navbar')?.shadowRoot?.querySelector('.nav-links');
if (mobileMenuBtn && navLinks) {
mobileMenuBtn.addEventListener('click', () => {
const isOpen = navLinks.style.display === 'flex';
navLinks.style.display = isOpen ? 'none' : 'flex';
// Change icon based on menu state
const icon = mobileMenuBtn.querySelector('i');
if (icon) {
icon.setAttribute('data-feather', isOpen ? 'menu' : 'x');
feather.replace();
}
});
}
});
// Animate elements when they come into view
const animateOnScroll = () => {
const elements = document.querySelectorAll('.feature-card, section h2, section h3');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.2;
if (elementPosition < screenPosition) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
// Set initial styles for animation
document.querySelectorAll('.feature-card, section h2, section h3').forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
});
window.addEventListener('scroll', animateOnScroll);
window.addEventListener('load', animateOnScroll);
// Form submission handling with more detailed processing
const contactForm = document.querySelector('form');
if (contactForm) {
contactForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Get form values
const formData = {
name: document.getElementById('name').value.trim(),
email: document.getElementById('email').value.trim(),
message: document.getElementById('message').value.trim(),
interest: document.getElementById('interest')?.value || 'general'
};
// Validation
if (!formData.name || !formData.email || !formData.message) {
showAlert('Please fill in all required fields', 'error');
return;
}
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(formData.email)) {
showAlert('Please enter a valid email address', 'error');
return;
}
try {
// In a real implementation, this would be an actual API call
// const response = await fetch('/api/contact', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify(formData)
// });
// Simulate API delay
await new Promise(resolve => setTimeout(resolve, 1000));
showAlert(`Thank you for your interest in ${formData.interest === 'general' ? 'our services' : 'our ' + formData.interest + ' solutions'}! Our team will contact you shortly.`, 'success');
contactForm.reset();
} catch (error) {
showAlert('There was an error submitting your request. Please try again later.', 'error');
console.error('Form submission error:', error);
}
});
}
function showAlert(message, type = 'success') {
const alertDiv = document.createElement('div');
alertDiv.className = `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg text-white ${
type === 'success' ? 'bg-green-500' : 'bg-red-500'
}`;
alertDiv.textContent = message;
document.body.appendChild(alertDiv);
setTimeout(() => {
alertDiv.style.opacity = '0';
setTimeout(() => alertDiv.remove(), 300);
}, 5000);
}
|