static/assets/js/main.js

// Cho phép thanh trượt swiper trượt với tốc độ 3s
let swiperHome = new Swiper('.home__swiper', {
    loop: true,
    spaceBetween: -24,
    grabCursor: true,
    slidesPerView: 'auto',
    centeredSlides: 'auto',
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    breakpoints: {
        1220: {
            spaceBetween: -32,
        },
    },
});

// Hiệu ứng tăng dần số khi cuộn tới của Mission
//IntersectionObserver để theo dõi các phần tử cụ thể trên trang web (.aboutUS và .sumenh).
// Khi các phần tử này xuất hiện trong khung nhìn của người dùng (viewport), các hiệu ứng động sẽ được kích hoạt.
const counters = document.querySelectorAll('.counter');
let countersStarted = false;

const startCounters = () => {
    counters.forEach(counter => {
        counter.innerText = '0';
        const updateCounter = () => {
            const target = +counter.getAttribute('data-target');
            const speed = +counter.getAttribute('data-speed');
            const suffix = counter.getAttribute('data-suffix') || '';
            const count = +counter.innerText.replace(suffix, '');
            const increment = target / speed; // Điều chỉnh tốc độ cho từng phần tử

            if (count < target) {
                counter.innerText = Math.ceil(count + increment) + suffix;
                setTimeout(updateCounter, 50); // Điều chỉnh giá trị thời gian để thay đổi tốc độ
            } else {
                counter.innerText = target + suffix;
            }
        };
        updateCounter();
    });
};
const observerAboutUS = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            startTextAnimationAboutUS();
            observerAboutUS.unobserve(entry.target); // Ngừng theo dõi sau khi hiệu ứng đã chạy
        }
    });
}, {threshold: 0.5});

observerAboutUS.observe(document.querySelector('.aboutUS'));

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting && !countersStarted) {
            countersStarted = true;
            startCounters();
            startTextAnimation();
        }
    });
}, {threshold: 0.5});
observer.observe(document.querySelector('.sumenh'));


//Hiệu ứng hover vào mở link của Application
document.addEventListener("DOMContentLoaded", function () {
    const box1 = document.getElementById("box1");

    if (box1) {
        box1.addEventListener("click", function () {
            window.location.href = "https://example.com"; // Replace with the desired URL
        });
    }
});

//Chữ chạy text-sumenh-top phần About
const textElement = document.getElementById('about1');
const baseText = "Neural* AI Research Lab ";
const textArray = ["was established in 2019.", "has achieved a lot of success in applying AI to medical.", "has more than 10 trusted countries.", "has more than 3,000 satisfied customers."];
let arrayIndex = 0; //Các biến chỉ số: arrayIndex để theo dõi câu hiện tại trong mảng, charIndex để theo dõi ký tự hiện tại trong câu.
let charIndex = 0; //

//Hiển thị từng ký tự của câu hiện tại cho đến khi hoàn thành, sau đó chuyển sang hàm erase().
function type() {
    if (charIndex < textArray[arrayIndex].length) //Kiểm tra xem câu hiện tại đã hoàn thành chưa
    {
        textElement.textContent = baseText + textArray[arrayIndex].substring(0, charIndex + 1);
        charIndex++;
        setTimeout(type, 100);
    } else {
        setTimeout(erase, 2000);
    }
}
//Xóa từng ký tự của câu hiện tại cho đến khi hoàn thành, sau đó chuyển sang câu tiếp theo và quay lại hàm type().
function erase() {
    if (charIndex > 0) {
        textElement.textContent = baseText + textArray[arrayIndex].substring(0, charIndex - 1);
        charIndex--;
        setTimeout(erase, 50);
    } else {
        arrayIndex = (arrayIndex + 1) % textArray.length;
        setTimeout(type, 1000);
    }
}
document.addEventListener('DOMContentLoaded', function () {
    setTimeout(type, 1000);
});


//Phần này giúp phần chuyển động từ trên xuống dưới cho research
//DOMContentLoaded: Đảm bảo mã chỉ chạy sau khi toàn bộ nội dung HTML đã được tải.
document.addEventListener('DOMContentLoaded', function () {
    const researchSection = document.querySelector('.research');
    function checkVisibility() //Hàm kiểm tra vị trí của phần tử so với khung nhìn của người dùng
    {
        const rect = researchSection.getBoundingClientRect(); //Lấy ra kích thước và vị trí của phần tử
        const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); //Lấy ra chiều cao của khung nhìn
        if (!(rect.bottom < 0 || rect.top - viewHeight >= 0))  //Kiểm tra xem phần tử có nằm trong khung nhìn không
        {
            researchSection.classList.add('visible');
            window.removeEventListener('scroll', checkVisibility);
        }
    }

    window.addEventListener('scroll', checkVisibility);
    checkVisibility(); // Gọi hàm ngay khi trang tải để kiểm tra vị trí ban đầu
});

//Phần này giúp phần chuyển động tuwf trên xuống duưới trang load cho application
document.addEventListener('DOMContentLoaded', function () {
    const researchSection = document.querySelector('.application');

    function checkVisibility() {
        const rect = researchSection.getBoundingClientRect();
        const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
        if (!(rect.bottom < 0 || rect.top - viewHeight >= 0)) {
            researchSection.classList.add('visible');
            window.removeEventListener('scroll', checkVisibility);
        }
    }

    window.addEventListener('scroll', checkVisibility);
    checkVisibility(); // Gọi hàm ngay khi trang tải để kiểm tra vị trí ban đầu
});

//Phần này giúp phần chuyển động tuwf trên xuống duưới trang load cho contactUs
document.addEventListener('DOMContentLoaded', function () {
    const researchSection = document.querySelector('.contactUS');

    function checkVisibility() {
        const rect = researchSection.getBoundingClientRect();
        const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
        if (!(rect.bottom < 0 || rect.top - viewHeight >= 0)) {
            researchSection.classList.add('visible');
            window.removeEventListener('scroll', checkVisibility);
        }
    }

    window.addEventListener('scroll', checkVisibility);
    checkVisibility(); // Gọi hàm ngay khi trang tải để kiểm tra vị trí ban đầu
});


//Gạch chân nav bar khi cuộn xuống
document.addEventListener('DOMContentLoaded', function () //Đảm bảo mã chỉ chạy sau khi toàn bộ nội dung HTML đã được tải.
{
    const sections = document.querySelectorAll('div[id$="Btn"]'); //Lấy ra tất cả các phần tử có id kết thúc bằng 'Btn'
    const navLinks = document.querySelectorAll('nav ul li a'); //Lấy ra tất cả các thẻ a trong thẻ li của thẻ ul trong thẻ nav

    function changeActiveNav() {
        let index = sections.length;

        while (--index && window.scrollY + 50 < sections[index].offsetTop) //Tìm ra phần tử đầu tiên mà người dùng đang nhìn thấy
        {
        }

        navLinks.forEach((link) => link.classList.remove('active-nav'));
        navLinks[index].classList.add('active-nav');
    }

    changeActiveNav();
    window.addEventListener('scroll', changeActiveNav);
});

//Chatbot

document.getElementById('iconChatBot').addEventListener('click', function() {
    const chatBotContent = document.getElementById('chatBotContent');
    chatBotContent.style.display = chatBotContent.style.display === 'block' ? 'none' : 'block'; // Nếu điều kiện đúng (display hiện tại là 'block'), giá trị mới sẽ là 'none', tức là ẩn phần tử.
    //Nếu điều kiện sai (display không phải là 'block'), giá trị mới sẽ là 'block', tức là hiển thị phần tử.
});

// Ngăn việc đóng form khi nhấp vào bên trong form
document.getElementById('chatBotContent').addEventListener('click', function(event) {
    event.stopPropagation(); // Ngăn chặn sự kiện click từ lan rộng ra ngoài
});

// Xử lý sự kiện gửi form
document.getElementById('chatBotForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const input = document.getElementById('chatBotInput').value;
    if (input.trim() !== '') {
        const chatBotMid = document.getElementById('chatBotmid');

        const userMessage = document.createElement('div');
        userMessage.style.textAlign = 'right';
        userMessage.style.marginRight = '8px';
        userMessage.style.color = 'black';
        userMessage.textContent = input;
        chatBotMid.appendChild(userMessage);

        fetch('/send-message', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: input })
        })
            .then(response => response.json())
            .then(data => {
                const botResponse = document.createElement('div');
                botResponse.style.textAlign = 'left';
                botResponse.style.marginLeft = '8px';
                botResponse.style.color = 'black';
                botResponse.textContent = `Bot response: ${data.response}`;
                chatBotMid.appendChild(botResponse);

                // Scroll to the bottom when a new message is added
                chatBotMid.scrollTop = chatBotMid.scrollHeight;
            });

        document.getElementById('chatBotInput').value = '';
    }
});

// Đóng form khi nhấp ra ngoài
document.addEventListener('click', function(event) {
    const chatBotContent = document.getElementById('chatBotContent');
    if (!chatBotContent.contains(event.target) && !event.target.matches('#iconChatBot')) {
        chatBotContent.style.display = 'none';
    }
});