kodepilot/main.js

function goToLogin() {
    window.location.href = "/login";
}

(function () {
    if (window.Slide1rSliderLoaded) {
        return;
    }
    window.Slide1rSliderLoaded = true;

    class Slide1rSlider {
        constructor() {
            setTimeout(() => {
                this.initSlider();
            }, 100);
        }

        initSlider() {
            try {
                this.track = document.getElementById('slide1rTrack');
                this.slides = document.querySelectorAll('.slide1');
                this.prevBtn = document.getElementById('prevBtn');
                this.nextBtn = document.getElementById('nextBtn');

                if (!this.track || this.slides.length === 0) {
                    console.warn("Slider DOM elements not found. Retrying...");
                    // Retry after a short delay
                    setTimeout(() => this.initSlider(), 200);
                    return;
                }

                this.currentIndex = 0;
                this.totalSlides = this.slides.length;
                this.autoPlayDuration = 5000;

                this.init();
            } catch (err) {
                console.error("Slider initialization failed:", err);
            }
        }

        init() {
            try {
                this.updateSlider();
                this.bindEvents();
                this.startAutoPlay();
                this.bindKeyboardEvents();
            } catch (err) {
                console.error("Slider init error:", err);
            }
        }


        updateSlider() {
            try {
                const translateX = -this.currentIndex * 100;
                this.track.style.transform = `translateX(${translateX}%)`;

            } catch (err) {
                console.error("Error updating slider:", err);
            }
        }

        nextSlide() {
            try {
                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
                this.updateSlider();
                this.restartAutoPlay();
            } catch (err) {
                console.error("Error going to next slide:", err);
            }
        }

        prevSlide() {
            try {
                this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
                this.updateSlider();
                this.restartAutoPlay();
            } catch (err) {
                console.error("Error going to previous slide:", err);
            }
        }

        goToSlide(index) {
            try {
                this.currentIndex = index;
                this.updateSlider();
                this.restartAutoPlay();
            } catch (err) {
                console.error("Error going to slide:", err);
            }
        }

        startAutoPlay() {
            try {
                this.stopAutoPlay();

                this.autoPlayInterval = setInterval(() => {
                    this.nextSlide();
                }, this.autoPlayDuration);

            } catch (err) {
                console.error("Error starting autoplay:", err);
            }
        }

        stopAutoPlay() {
            if (this.autoPlayInterval) {
                clearInterval(this.autoPlayInterval);
                this.autoPlayInterval = null;
            }
        }

        restartAutoPlay() {
            this.stopAutoPlay();
            this.startAutoPlay();
        }

        bindEvents() {
            try {
                if (this.nextBtn) {
                    this.nextBtn.addEventListener('click', () => this.nextSlide());
                }

                if (this.prevBtn) {
                    this.prevBtn.addEventListener('click', () => this.prevSlide());
                }

                // Pause on hover
                const container = document.querySelector('.slide1r-container');
                if (container) {
                    container.addEventListener('mouseenter', () => this.stopAutoPlay());
                    container.addEventListener('mouseleave', () => this.startAutoPlay());
                }

                // Touch support
                let startX = 0;
                let endX = 0;

                if (this.track) {
                    this.track.addEventListener('touchstart', (e) => {
                        startX = e.touches[0].clientX;
                        this.stopAutoPlay();
                    });

                    this.track.addEventListener('touchmove', (e) => {
                        endX = e.touches[0].clientX;
                    });

                    this.track.addEventListener('touchend', () => {
                        const deltaX = startX - endX;
                        if (Math.abs(deltaX) > 50) {
                            if (deltaX > 0) {
                                this.nextSlide();
                            } else {
                                this.prevSlide();
                            }
                        }
                        this.startAutoPlay();
                    });
                }
            } catch (err) {
                console.error("Error binding events:", err);
            }
        }

        bindKeyboardEvents() {
            // Use a more specific event listener to avoid conflicts
            const keyHandler = (e) => {
                // Only respond if the slider container is visible
                const container = document.querySelector('.slide1r-container');
                if (container && this.isElementInViewport(container)) {
                    if (e.key === 'ArrowLeft') {
                        this.prevSlide();
                    } else if (e.key === 'ArrowRight') {
                        this.nextSlide();
                    }
                }
            };

            document.addEventListener('keydown', keyHandler);
        }

        isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }
    }

    // Initialize the slider immediately
    new Slide1rSlider();
})();

const allCourses = [
    {
        category: "Software Development & Engineering",
        link: "https://kodepilot.in/course/view.php?id=16",
        image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png",
        name: "UI/UX Design",
        description: "Go beyond aesthetics. Design seamless journeys that users love. Translate user needs into intuitive prototypes and pixel-perfect designs for web and mobile."
    },
    {
        category: "Software Development & Engineering",
        link: "https://kodepilot.in/course/view.php?id=17",
        image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png",
        name: "Python Basics",
        description: "Learn Python from scratch. Master variables, loops, functions, and create real projects."
    },
    {
        category: "Data Science",
        link: "https://kodepilot.in/course/view.php?id=20",
        image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png",
        name: "Data Analysis with Pandas",
        description: "Analyze data efficiently using Pandas. Explore datasets, clean data, and visualize results."
    }
];

(async () => {
    const baseUrl = 'https://kodepilot.in/course/index.php';

    // Step 1: Fetch categories dynamically
    const res = await fetch(baseUrl);
    const html = await res.text();
    const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;

    const categories = [];
    let match;
    while ((match = categoryRegex.exec(html)) !== null) {
        categories.push({ url: match[1], name: match[2] });
    }

    console.log('Categories found:', categories);

    // Step 2: Fetch courses for each category
    const allCourses = [];

    for (const category of categories) {
        const resCat = await fetch(category.url);
        const catHtml = await resCat.text();
        const cleanHtml = catHtml.replace(/\n/g, ' '); // Flatten HTML for easier regex

        // Regex to extract course info
        const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;

        while ((match = courseRegex.exec(cleanHtml)) !== null) {
            allCourses.push({
                category: match[4].trim(),
                link: match[1].trim(),
                image: match[2].trim(),
                name: match[3].trim(),
                description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
            });
        }
    }

    console.log('All courses:', allCourses);
})();


// Test printing all courses
console.log("Testing allCourses array:");
const container = document.querySelector('.corces');

allCourses.forEach(course => {
    const courseDiv = document.createElement('div');
    courseDiv.className = 'course-card'; // you can style this class later

    courseDiv.innerHTML = `
    <a href="${course.link}" target="_blank">
      <div class="course-image" style="background-image: url(${course.image});"></div>
    </a>
    <div class="course-content">
      <div class="course-category">${course.category}</div>
      <a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
      <div class="course-description">${course.description}</div>
    </div>
  `;

    container.appendChild(courseDiv);
});