<!DOCTYPE html>
<html>

<head>
    <title>Slideshow Example</title>
    <script src="utils/RenderSlide.js"></script>
    <script src="utils/RenderDataInChart.js"></script>
    <script src="utils/RenderDataInTable.js"></script>
    <script src="https://cdn.plot.ly/plotly-2.18.2.min.js" defer></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>


</head>

<body>
    <div id="slideshow-container"></div>

    <script>
       

    const slideshowContainer = document.getElementById("slideshow-container");
        let slideContentContainer 
        if(slideContentContainer==null){
        slideContentContainer = document.createElement("div");
        }
        // Render the first slide
        
        slideshowContainer.appendChild(slideContentContainer);
        renderSlide(templateNames[currentSlideIndex], slideContentContainer);
        // Start the slideshow loop
        startSlideshow();
        // Set up the mousemove event listener to detect user activity
        // document.addEventListener('mousemove', handleUserActivity);

    </script>
</body>

</html>