menuRect.width > viewportWidth) {
submenu.style.right = '0';
submenu.style.left = 'auto';
}
if (currentSubmenu === submenu) {
submenu.classList.remove('active');
menuItem.classList.remove('active');
currentSubmenu = null;
menuToggle.classList.remove('hidden');
} else {
submenu.classList.add('active');
menuItem.classList.add('active');
currentSubmenu = submenu;
menuToggle.classList.add('hidden');
if (window.innerWidth <= 768) {
window.scrollTo({top: 0, behavior: 'smooth'});
}
}
}
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
menuToggle.addEventListener('click', toggleMenu);
document.querySelectorAll('.menu-item').forEach(menuItem => {
menuItem.addEventListener('click', e => handleSubmenuClick(e, menuItem));
});
document.querySelectorAll('.btn-back').forEach(btn => {
btn.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
closeAllSubmenus();
document.querySelector('.menu-toggle').classList.remove('hidden');
});
});
document.addEventListener('click', e => {
if (isMenuOpen && !menu.contains(e.target) && !menuToggle.contains(e.target)) {
toggleMenu();
}
});
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
menu.classList.remove('active');
isMenuOpen = false;
closeAllSubmenus();
}
});
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
function toggleTheme() {
const isDark = body.getAttribute('data-theme') === 'light';
body.setAttribute('data-theme', isDark ? 'dark' : 'light');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
const moonIcon = themeToggle.querySelector('.moon-icon');
const sunIcon = themeToggle.querySelector('.sun-icon');
if (isDark) {
moonIcon.classList.remove('hidden');
sunIcon.classList.add('hidden');
} else {
moonIcon.classList.add('hidden');
sunIcon.classList.remove('hidden');
}
document.querySelectorAll('.btn-back').forEach(btn => {
btn.style.backgroundColor = 'black';
});
document.querySelectorAll('.carousel-control').forEach(btn => {
btn.style.backgroundColor = 'var(--primary)';
btn.style.color = 'var(--dark)';
});
}
themeToggle.addEventListener('click', toggleTheme);
const savedTheme = localStorage.getItem('theme') || 'dark';
body.setAttribute('data-theme', savedTheme);
});
function openModal(imgSrc) {
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modal-content');
modal.style.display = 'block';
modalImg.src = imgSrc;
}
function startCarousel() {
let interval; // Declare interval variable
function startAutoSlide() {
interval = setInterval(nextSlide, 5000); // Automatically slide every 5 seconds
}
const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.carousel img');
// Ensure at least one slide exists before starting carousel
if (slides.length === 0) {
return; // Exit if no slides
}
// Basic touch handling for mobile devices
carousel.addEventListener('touchstart', () => {
clearInterval(interval); // Stop auto sliding on touch
});
carousel.addEventListener('touchend', () => {
startAutoSlide(); // Restart auto sliding on touch end
});
// Start the auto slide
startAutoSlide();
// Add click listeners to control buttons
document.querySelectorAll('.carousel-control').forEach(control => {
control.addEventListener('click', () => {
clearInterval(interval); // Stop auto sliding when manually controlled
if (control.textContent === '‹') {
prevSlide(); // Call prevSlide function
} else {
nextSlide(); // Call nextSlide function
}
startAutoSlide(); // Restart auto slide after manual control
});
});
}
document.querySelectorAll('.carousel img').forEach(img => {
img.addEventListener('click', () => {
openModal(img.src);
});
});
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modal-content');
const closeBtn = document.getElementById('modal-close');
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
}
});
let currentSlide = 0;
function prevSlide() {
const carousel = document.querySelector('.carousel-container');
const slides = document.querySelectorAll('.carousel img');
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
}
function nextSlide() {
const carousel = document.querySelector('.carousel-container');
const slides = document.querySelectorAll('.carousel img');
currentSlide = (currentSlide + 1) % slides.length;
carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
}
document.addEventListener('DOMContentLoaded', startCarousel);
const chatbotButton = document.getElementById('chatbot-button');
const chatbotWidget = document.getElementById('chatbot-widget');
let isChatbotOpen = false;
chatbotButton.addEventListener('click', () => {
isChatbotOpen = !isChatbotOpen;
chatbotWidget.style.display = isChatbotOpen ? 'block' : 'none';
chatbotButton.style.transform = isChatbotOpen ? 'scale(0.9)' : 'scale(1)';
});
const chatbotClose = document.getElementById('chatbot-close');
chatbotClose.addEventListener('click', () => {
chatbotWidget.style.display = 'none';
isChatbotOpen = false;
chatbotButton.style.transform = 'scale(1)';
});
function adjustCarousel() {
const carousel = document.querySelector('.carousel');
if (!carousel) return;
const isMobile = window.innerWidth <= 768;
if (isMobile) {
carousel.style.width = 'calc(100vw - 32px)';
carousel.style.height = 'auto';
} else {
carousel.style.width = '800px';
carousel.style.height = '800px';
}
}
document.addEventListener('DOMContentLoaded', () => {
adjustCarousel();
window.addEventListener('resize', () => {
adjustCarousel();
});
});
const socialIcons = document.querySelectorAll('.contact-socials a');
function adjustSocialIcons() {
socialIcons.forEach(icon => {
icon.style.width = '42px';
icon.style.height = '42px';
icon.style.fontSize = '1.4rem';
icon.style.padding = '0.6rem';
if (window.innerWidth <= 768) {
icon.style.width = '36px';
icon.style.height = '36px';
icon.style.fontSize = '1.2rem';
icon.style.padding = '0.5rem';
}
});
const socialSvgs = document.querySelectorAll('.contact-socials svg');
socialSvgs.forEach(svg => {
svg.style.width = '24px';
svg.style.height = '24px';
if (window.innerWidth <= 768) {
svg.style.width = '20px';
svg.style.height = '20px';
}
});
}
window.addEventListener('resize', adjustSocialIcons);
document.addEventListener('DOMContentLoaded', adjustSocialIcons);
document.addEventListener('click', (e) => {
if (isMenuOpen && !menu.contains(e.target) && !menuToggle.contains(e.target)) {
menu.classList.remove('active');
isMenuOpen = false;
}
});
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('click', (e) => {
const isClickInsideMenu = menu.contains(e.target);
const isClickOnToggle = menuToggle.contains(e.target);
if (!isClickInsideMenu && !isClickOnToggle && isMenuOpen) {
menu.classList.remove('active');
isMenuOpen = false;
}
});
document.querySelectorAll('.menu-item').forEach(menuItem => {
menuItem.addEventListener('click', (e) => {
e.preventDefault();
document.querySelectorAll('.menu-item').forEach(item => {
if (item !== menuItem) {
item.classList.remove('active');
const otherSubmenu = item.querySelector('.submenu');
if (otherSubmenu) {
otherSubmenu.style.display = 'none';
}
}
});
const submenu = menuItem.querySelector('.submenu');
if (submenu) {
const isOpen = submenu.style.display === 'block';
submenu.style.display = isOpen ? 'none' : 'block';
if (window.innerWidth <= 768 && !isOpen) {
window.scrollTo({top: 0, behavior: 'smooth'});
}
}
});
});
document.querySelectorAll('.btn-back').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const submenu = btn.closest('.submenu');
if (submenu) {
submenu.style.display = 'none';
window.scrollTo({top: 0, behavior: 'smooth'});
}
});
});
});
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.btn-back').forEach(btn => {
const submenu = btn.closest('.submenu');
if (submenu) {
submenu.appendChild(btn);
}
});
});
function adjustChatbotDimensions() {
const chatbotWidget = document.getElementById('chatbot-widget');
const iframe = chatbotWidget.querySelector('iframe');
iframe.style.width = '100%';
iframe.style.height = '100%';
chatbotWidget.style.margin = '0';
}
adjustChatbotDimensions();
window.addEventListener('resize', adjustChatbotDimensions);