DjayChucko's picture
Build me a landing page using this html:
0b2a6ce verified
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.animate-on-scroll').forEach(element => {
observer.observe(element);
});
// Form validation helper
function validateForm(form) {
let isValid = true;
const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
inputs.forEach(input => {
if (!input.value.trim()) {
input.classList.add('border-red-500');
isValid = false;
} else {
input.classList.remove('border-red-500');
}
});
return isValid;
}
// Cookie consent banner
function initCookieBanner() {
if (!localStorage.getItem('cookieConsent')) {
const banner = document.createElement('div');
banner.className = 'fixed bottom-0 left-0 right-0 bg-gray-800 text-white p-4 flex flex-col md:flex-row justify-between items-center z-50';
banner.innerHTML = `
<p class="mb-4 md:mb-0">We use cookies to enhance your experience. By continuing to browse, you agree to our use of cookies.</p>
<div class="flex space-x-4">
<button id="acceptCookies" class="px-4 py-2 bg-primary rounded-lg hover:bg-opacity-90 transition">Accept</button>
<button id="rejectCookies" class="px-4 py-2 border border-white rounded-lg hover:bg-white hover:text-gray-800 transition">Reject</button>
</div>
`;
document.body.appendChild(banner);
document.getElementById('acceptCookies').addEventListener('click', () => {
localStorage.setItem('cookieConsent', 'accepted');
banner.remove();
});
document.getElementById('rejectCookies').addEventListener('click', () => {
localStorage.setItem('cookieConsent', 'rejected');
banner.remove();
});
}
}
// Initialize cookie banner on DOM content loaded
document.addEventListener('DOMContentLoaded', () => {
initCookieBanner();
// Initialize tooltips if any
if (window.tippy) {
tippy('[data-tippy-content]', {
theme: 'light-border',
placement: 'top',
animation: 'scale',
arrow: true
});
}
});