|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const animateElements = document.querySelectorAll('.animate-on-scroll'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate-fadeInUp'); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
animateElements.forEach(element => { |
|
|
observer.observe(element); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const tooltipElements = document.querySelectorAll('[data-tooltip]'); |
|
|
tooltipElements.forEach(el => { |
|
|
el.addEventListener('mouseenter', showTooltip); |
|
|
el.addEventListener('mouseleave', hideTooltip); |
|
|
}); |
|
|
|
|
|
function showTooltip(e) { |
|
|
const tooltipText = this.getAttribute('data-tooltip'); |
|
|
const tooltip = document.createElement('div'); |
|
|
tooltip.className = 'tooltip absolute bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-50'; |
|
|
tooltip.textContent = tooltipText; |
|
|
|
|
|
document.body.appendChild(tooltip); |
|
|
|
|
|
const rect = this.getBoundingClientRect(); |
|
|
tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`; |
|
|
tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; |
|
|
|
|
|
this.tooltip = tooltip; |
|
|
} |
|
|
|
|
|
function hideTooltip() { |
|
|
if (this.tooltip) { |
|
|
this.tooltip.remove(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function validateForm(form) { |
|
|
const inputs = form.querySelectorAll('input[required], textarea[required]'); |
|
|
let isValid = true; |
|
|
|
|
|
inputs.forEach(input => { |
|
|
if (!input.value.trim()) { |
|
|
input.classList.add('border-red-500'); |
|
|
isValid = false; |
|
|
} else { |
|
|
input.classList.remove('border-red-500'); |
|
|
} |
|
|
}); |
|
|
|
|
|
return isValid; |
|
|
} |