delta_project_slide.html

<apex:page renderAs="html" standardStylesheets="false">
    <style>
        .slide-container {
            position: relative;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
        }

        .slide-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            z-index: 10;
        }

        .chevron {
            background-color: rgba(0,0,255,0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 24px;
            user-select: none;
            transition: background-color 0.3s;
        }

        .chevron:hover {
            background-color: rgba(0,0,255,0.7);
        }

        .progress-bar {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
            max-width: 80%;
            overflow-x: auto;
            padding: 5px;
        }

        .progress-dot {
            width: 12px;
            height: 12px;
            min-width: 12px;
            border-radius: 50%;
            background-color: white;
            border: 2px solid blue;
            cursor: pointer;
            transition: background-color 0.3s;
            flex-shrink: 0;
        }

        .progress-dot.active {
            background-color: blue;
        }

        .google-slide-iframe {
            width: 100%;
            max-width: 1000px;
            height: 850px;
            border: none;
        }
    </style>

    <div class="slide-container">
        <div class="slide-navigation">
            <button class="chevron prev-slide" onclick="navigateSlide(-1)">&#10094;</button>
            <button class="chevron next-slide" onclick="navigateSlide(1)">&#10095;</button>
        </div>

        <iframe 
            id="google-slides-iframe"
            class="google-slide-iframe"
            src="https://docs.google.com/presentation/d/e/2PACX-1vQjySdmK_14lv1zTWGU6oM28pU9meXSvquHSFN2PwPVbD7fO65HuZv-lVH73-3KRA/embed?start=false&loop=false&delayms=3000" 
            allowfullscreen="true" 
            mozallowfullscreen="true" 
            webkitallowfullscreen="true">
        </iframe>

        <div class="progress-bar" id="progress-dots">
            <!-- Dots will be dynamically generated -->
        </div>
    </div>

    <script>
        (function() {
            var iframe = document.getElementById('google-slides-iframe');
            var progressDotsContainer = document.getElementById('progress-dots');
            var totalSlides = 19;
            var currentSlide = 0;

            // Create progress dots
            function createProgressDots() {
                progressDotsContainer.innerHTML = '';
                for (var i = 0; i < totalSlides; i++) {
                    var dot = document.createElement('div');
                    dot.className = 'progress-dot';
                    if (i === 0) dot.classList.add('active');
                    dot.setAttribute('data-slide', i);
                    dot.onclick = (function(index) {
                        return function() {
                            goToSlide(index);
                        };
                    })(i);
                    progressDotsContainer.appendChild(dot);
                }
            }

            // Navigation functions
            function navigateSlide(direction) {
                var newSlide = currentSlide + direction;
                
                // Implement wrap-around logic
                if (newSlide < 0) newSlide = totalSlides - 1;
                if (newSlide >= totalSlides) newSlide = 0;
                
                goToSlide(newSlide);
            }

            function goToSlide(slideNum) {
                // Validate slide number
                if (slideNum < 0 || slideNum >= totalSlides) return;

                // Update URL to specific slide
                var baseUrl = iframe.src.split('&')[0];
                var newUrl = baseUrl + '&slide=' + slideNum;
                iframe.src = newUrl;

                // Update progress dots
                var dots = document.querySelectorAll('.progress-dot');
                dots.forEach(function(dot) {
                    dot.classList.remove('active');
                });
                dots[slideNum].classList.add('active');

                currentSlide = slideNum;
            }

            // Initialize progress dots when the page loads
            window.addEventListener('load', createProgressDots);

            // Expose functions globally for Salesforce compatibility
            window.navigateSlide = navigateSlide;
            window.goToSlide = goToSlide;
        })();
    </script>
</apex:page>