#make it more robust.
#redesign whole ui to make it modern and sleek.
#make extremely fast and smooth.
#don't comprise in anything.
#refine it further.
#make the UI/UX better and visually appealing for the user, and I mean it.
#handle all of it async
#- modern and visually appealing ui.
#don't use framework.
#fix all of the possible edge cases, errors, bottlenecks, loopholes, leaks, etc..
#use only free and lightweight resources, if necessary.
#optimise it fully for any circumstances possible.
#always consider all of the possible consequences of your modification before modifying.
#show the full potential of it #makesure everything actually works 
#Send the fully working full improved codes.
--- javascript:(function(){
    // Configuration with advanced options
    const CONFIG = {
        MAX_IMAGES: 500,
        CHUNK_SIZE: 50,
        CORS_PROXIES: [
            'https://corsproxy.io/?',
            'https://api.allorigins.win/raw?url=',
            'https://api.codetabs.com/v1/proxy?quest='
        ],
        VIEWER: {
            MIN_WIDTH: 800,
            MIN_HEIGHT: 600,
            PREFERRED_WIDTH: 1200,
            PREFERRED_HEIGHT: 800
        },
        SLIDESHOW: {
            MIN_INTERVAL: 1,
            MAX_INTERVAL: 10,
            DEFAULT_INTERVAL: 3
        },
        PRELOAD: {
            ADJACENT: 3,
            BATCH_SIZE: 5,
            TIMEOUT: 5000
        },
        ANIMATION: {
            DURATION: 300,
            EASING: 'cubic-bezier(0.4, 0, 0.2, 1)'
        },
        ZOOM: {
            MIN: 1,
            MAX: 5,
            STEP: 0.1
        },
        GESTURE: {
            SWIPE_THRESHOLD: 50,
            PINCH_THRESHOLD: 0.1
        },
        CACHE: {
            MAX_SIZE: 100,
            EXPIRE_TIME: 3600000 // 1 hour
        }
    };

    // Prevent multiple instances and handle cleanup
    if (window.ultimateImageViewerInstance) {
        try {
            window.ultimateImageViewerInstance.focus();
            return;
        } catch (e) {
            window.ultimateImageViewerInstance = null;
        }
    }

    // Enhanced URL sanitization with additional security checks
    function sanitizeURL(url) {
        try {
            const sanitized = new URL(url, window.location.href);
            
            // Strict protocol check
            if (!['http:', 'https:'].includes(sanitized.protocol)) {
                return null;
            }

            // Exclude potentially dangerous file types
            const dangerous = /\.(svg|svgz|html|htm|php|asp|aspx|jsp|cgi)$/i;
            if (dangerous.test(sanitized.pathname)) {
                return null;
            }

            // Check for common image extensions
            const validExtension = /\.(jpe?g|png|gif|webp|avif|bmp|ico)$/i;
            if (!validExtension.test(sanitized.pathname)) {
                // Additional check for images without extensions
                const contentType = url.match(/^data:image\/(jpeg|png|gif|webp|avif|bmp|ico)/i);
                if (!contentType) {
                    return null;
                }
            }

            // Remove hash and search parameters for cache consistency
            sanitized.hash = '';
            sanitized.search = '';
            
            return sanitized.href;
        } catch (e) {
            return null;
        }
    }

    // Advanced image source gathering with lazy-loading support
    async function gatherImageSources() {
        const sources = new Set();
        const seenUrls = new Set();
        let processedCount = 0;

        // Process elements in chunks to avoid blocking
        async function processElements(elements, attributeGetter) {
            for (let i = 0; i < elements.length; i += CONFIG.CHUNK_SIZE) {
                const chunk = Array.from(elements).slice(i, i + CONFIG.CHUNK_SIZE);
                await new Promise(resolve => {
                    setTimeout(() => {
                        chunk.forEach(element => {
                            const urls = attributeGetter(element);
                            urls.forEach(url => {
                                if (!seenUrls.has(url)) {
                                    seenUrls.add(url);
                                    const sanitized = sanitizeURL(url);
                                    if (sanitized) {
                                        sources.add(sanitized);
                                        processedCount++;
                                        if (processedCount >= CONFIG.MAX_IMAGES) {
                                            return Array.from(sources);
                                        }
                                    }
                                }
                            });
                        });
                        resolve();
                    }, 0);
                });
                if (processedCount >= CONFIG.MAX_IMAGES) break;
            }
        }

        // Image tag sources
        await processElements(
            document.querySelectorAll('img'),
            img => {
                const urls = [];
                ['src', 'data-src', 'data-original', 'data-lazy', 'data-lazy-src'].forEach(attr => {
                    const value = img.getAttribute(attr);
                    if (value) urls.push(value);
                });
                const srcset = img.srcset;
                if (srcset) {
                    srcset.split(',').forEach(src => {
                        const url = src.trim().split(' ')[0];
                        if (url) urls.push(url);
                    });
                }
                return urls;
            }
        );

        // Background images
        const styleObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                    const element = mutation.target;
                    const computed = window.getComputedStyle(element);
                    const background = computed.backgroundImage;
                    if (background && background !== 'none') {
                        const matches = background.match(/url\(['"]?([^'"]+)['"]?\)/g);
                        if (matches) {
                            matches.forEach(match => {
                                const url = match.slice(4, -1).replace(/['"]/g, '');
                                if (!seenUrls.has(url)) {
                                    seenUrls.add(url);
                                    const sanitized = sanitizeURL(url);
                                    if (sanitized) sources.add(sanitized);
                                }
                            });
                        }
                    }
                }
            });
        });

        // Observe dynamic style changes
        document.querySelectorAll('*').forEach(element => {
            styleObserver.observe(element, {
                attributes: true,
                attributeFilter: ['style']
            });
        });

        // Process link tags that might contain images
        await processElements(
            document.querySelectorAll('a[href]'),
            link => {
                const href = link.getAttribute('href');
                return href ? [href] : [];
            }
        );

        // Cleanup
        styleObserver.disconnect();

        return Array.from(sources).slice(0, CONFIG.MAX_IMAGES);
    }

    // Initialize viewer with advanced error handling
    async function initializeViewer() {
        try {
            const imageUrls = await gatherImageSources();

            if (imageUrls.length === 0) {
                throw new Error('No valid images found on this page.');
            }

            // Calculate optimal window size
            const screenWidth = window.screen.availWidth;
            const screenHeight = window.screen.availHeight;
            const width = Math.min(CONFIG.VIEWER.PREFERRED_WIDTH, screenWidth * 0.9);
            const height = Math.min(CONFIG.VIEWER.PREFERRED_HEIGHT, screenHeight * 0.9);

            // Open viewer window with position calculation
            const left = (screenWidth - width) / 2;
            const top = (screenHeight - height) / 2;
            const viewer = window.open(
                '',
                '_blank',
                `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=yes`
            );

            if (!viewer) {
                throw new Error('Unable to open image viewer. Please allow popups for this website.');
            }

            window.ultimateImageViewerInstance = viewer;

            // Generate viewer HTML
            const viewerHTML = generateViewerHTML(imageUrls);
            
            // Write content safely
            viewer.document.open();
            viewer.document.write(viewerHTML);
            viewer.document.close();

            // Add unload handler
            viewer.addEventListener('unload', () => {
                window.ultimateImageViewerInstance = null;
            });

        } catch (error) {
            console.error('Image Viewer Initialization Error:', error);
            alert(error.message || 'An error occurred while initializing the image viewer.');
        }
    }

    // Generate viewer HTML with modern UI
    function generateViewerHTML(imageUrls) {
        return `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta name="color-scheme" content="dark">
                <title>Enhanced Image Viewer</title>
                <style>
                    /* Modern CSS Reset */
                    *, *::before, *::after {
                        box-sizing: border-box;
                        margin: 0;
                        padding: 0;
                    }

                    /* Custom Properties */
                    :root {
                        --primary-bg: #1a1a1a;
                        --secondary-bg: #2a2a2a;
                        --primary-text: #ffffff;
                        --secondary-text: #cccccc;
                        --accent-color: #3498db;
                        --danger-color: #e74c3c;
                        --success-color: #2ecc71;
                        --border-radius: 8px;
                        --transition-duration: ${CONFIG.ANIMATION.DURATION}ms;
                        --transition-timing: ${CONFIG.ANIMATION.EASING};
                    }

                    /* Base Styles */
                    html {
                        font-size: 16px;
                        line-height: 1.5;
                        -webkit-text-size-adjust: 100%;
                    }

                    body {
                        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
                        background-color: var(--primary-bg);
                        color: var(--primary-text);
                        overflow: hidden;
                        height: 100vh;
                        width: 100vw;
                    }

                    /* Container Layout */
                    .viewer-container {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        display: grid;
                        grid-template-rows: auto 1fr auto;
                        gap: 1rem;
                        padding: 1rem;
                    }

                    /* Header Styles */
                    .viewer-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0.5rem 1rem;
                        background-color: var(--secondary-bg);
                        border-radius: var(--border-radius);
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                    }

                    /* Main Content Area */
                    .viewer-main {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;
                        border-radius: var(--border-radius);
                        background-color: var(--secondary-bg);
                    }

                    /* Image Styles */
                    .main-image {
                        max-width: 100%;
                        max-height: 100%;
                        object-fit: contain;
                        transition: transform var(--transition-duration) var(--transition-timing),
                                  opacity var(--transition-duration) var(--transition-timing);
                        opacity: 0;
                        cursor: grab;
                        touch-action: none;
                        will-change: transform, opacity;
                    }

                    .main-image.visible {
                        opacity: 1;
                    }

                    .main-image.panning {
                        cursor: grabbing;
                    }

                    /* Controls */
                    .controls {
                        display: flex;
                        gap: 0.5rem;
                        flex-wrap: wrap;
                    }

                    .controls button {
                        background-color: var(--secondary-bg);
                        color: var(--primary-text);
                        border: none;
                        padding: 0.5rem 1rem;
                        border-radius: var(--border-radius);
                        cursor: pointer;
                        transition: background-color var(--transition-duration) var(--transition-timing);
                        display: flex;
                        align-items: center;
                        gap: 0.5rem;
                        font-size: 0.875rem;
                        white-space: nowrap;
                    }

                    .controls button:hover {
                        background-color: var(--accent-color);
                    }

                    .controls button:active {
                        transform: translateY(1px);
                    }

                    /* Navigation Buttons */
                    .nav-button {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        background-color: rgba(0, 0, 0, 0.5);
                        color: var(--primary-text);
                        border: none;
                        width: 48px;
                        height: 48px;
                        border-radius: 50%;
                        cursor: pointer;
                        opacity: 0;
                        transition: opacity var(--transition-duration) var(--transition-timing),
                                  background-color var(--transition-duration) var(--transition-timing);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.5rem;
                    }

                    .viewer-main:hover .nav-button {
                        opacity: 1;
                    }

                    .nav-button:hover {
                        background-color: rgba(0, 0, 0, 0.8);
                    }

                    .prev-button { left: 1rem; }
                    .next-button { right: 1rem; }

                    /* Thumbnails */
                    .thumbnails {
                        display: flex;
                        gap: 0.5rem;
                        padding: 0.5rem;
                        overflow-x: auto;
                        scrollbar-width: thin;
                        scrollbar-color: var(--accent-color) var(--secondary-bg);
                        background-color: var(--secondary-bg);
                        border-radius: var(--border-radius);
                        scroll-behavior: smooth;
                    }

                    .thumbnails::-webkit-scrollbar {
                        height: 6px;
                    }

                    .thumbnails::-webkit-scrollbar-track {
                        background: var(--secondary-bg);
                        border-radius: var(--border-radius);
                    }

                    .thumbnails::-webkit-scrollbar-thumb {
                        background-color: var(--accent-color);
                        border-radius: var(--border-radius);
                    }

                    .thumbnail {
                        width: 60px;
                        height: 60px;
                        object-fit: cover;
                        border-radius: 4px;
                        cursor: pointer;
                        transition: transform var(--transition-duration) var(--transition-timing),
                                  box-shadow var(--transition-duration) var(--transition-timing);
                        flex-shrink: 0;
                    }

                    .thumbnail:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                    }

                    .thumbnail.active {
                        border: 2px solid var(--accent-color);
                        transform: scale(1.1);
                    }

                    /* Loading Indicator */
                    .loader {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 40px;
                        height: 40px;
                        display: none;
                    }

                    .loader::after {
                        content: '';
                        width: 100%;
                        height: 100%;
                        border: 4px solid var(--secondary-bg);
                        border-top-color: var(--accent-color);
                        border-radius: 50%;
                        animation: spin 1s linear infinite;
                        display: block;
                    }

                    @keyframes spin {
                        to { transform: rotate(360deg); }
                    }

                    /* Error Message */
                    .error-message {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background-color: var(--danger-color);
                        color: white;
                        padding: 1rem;
                        border-radius: var(--border-radius);
                        text-align: center;
                        max-width: 80%;
                        display: none;
                    }

                    /* Responsive Design */
                    @media (max-width: 768px) {
                        .viewer-container {
                            padding: 0.5rem;
                            gap: 0.5rem;
                        }

                        .viewer-header {
                            padding: 0.25rem 0.5rem;
                        }

                        .controls button {
                            padding: 0.35rem 0.7rem;
                            font-size: 0.75rem;
                        }

                        .nav-button {
                            width: 36px;
                            height: 36px;
                            font-size: 1.25rem;
                        }

                        .thumbnail {
                            width: 48px;
                            height: 48px;
                        }
                    }

                    /* Touch Device Optimizations */
                    @media (hover: none) {
                        .nav-button {
                            opacity: 1;
                            background-color: rgba(0, 0, 0, 0.3);
                        }
                    }
                </style>
            </head>
            <body>
                <div class="viewer-container">
                    <div class="viewer-header">
                        <div class="controls">
                            <button id="playPauseBtn">
                                <span class="icon">▶</span>
                                <span class="text">Slideshow</span>
                            </button>
                            <button id="downloadBtn">
                                <span class="icon">⬇</span>
                                <span class="text">Download</span>
                            </button>
                            <button id="zoomInBtn">
                                <span class="icon">+</span>
                                <span class="text">Zoom In</span>
                            </button>
                            <button id="zoomOutBtn">
                                <span class="icon">-</span>
                                <span class="text">Zoom Out</span>
                            </button>
                            <button id="resetBtn">
                                <span class="icon">↺</span>
                                <span class="text">Reset</span>
                            </button>
                        </div>
                        <button id="fullscreenBtn" class="fullscreen-btn">⛶</button>
                    </div>

                    <div class="viewer-main">
                        <img src="" alt="Main Image" class="main-image" id="mainImage">
                        <div class="loader" id="loader"></div>
                        <div class="error-message" id="errorMessage"></div>
                        <button class="nav-button prev-button" id="prevBtn">❮</button>
                        <button class="nav-button next-button" id="nextBtn">❯</button>
                    </div>

                    <div class="thumbnails" id="thumbnails"></div>
                </div>

                <script>
                    (function() {
                        // Configuration
                        const CONFIG = ${JSON.stringify(CONFIG)};
                        const imageUrls = ${JSON.stringify(imageUrls)};

                        // State Management using Proxy for reactivity
                        const state = new Proxy({
                            currentIndex: 0,
                            proxyIndex: 0,
                            isFullscreen: false,
                            isSlideshow: false,
                            slideshowInterval: null,
                            zoom: 1,
                            translateX: 0,
                            translateY: 0,
                            isPanning: false,
                            startX: 0,
                            startY: 0,
                            initialX: 0,
                            initialY: 0,
                            loadedImages: new Set(),
                            errorRetries: new Map(),
                            touchStartTime: 0,
                            touchStartX: 0,
                            lastTapTime: 0
                        }, {
                            set(target, property, value) {
                                const oldValue = target[property];
                                target[property] = value;
                                
                                // React to state changes
                                switch(property) {
                                    case 'currentIndex':
                                        handleIndexChange(oldValue, value);
                                        break;
                                    case 'zoom':
                                        handleZoomChange(value);
                                        break;
                                    case 'isSlideshow':
                                        updateSlideshowUI(value);
                                        break;
                                }
                                
                                return true;
                            }
                        });

                        // Cache Management
                        const imageCache = {
                            cache: new Map(),
                            maxSize: CONFIG.CACHE.MAX_SIZE,
                            expireTime: CONFIG.CACHE.EXPIRE_TIME,

                            set(key, value) {
                                if (this.cache.size >= this.maxSize) {
                                    const oldestKey = this.cache.keys().next().value;
                                    this.cache.delete(oldestKey);
                                }
                                this.cache.set(key, {
                                    value,
                                    timestamp: Date.now()
                                });
                            },

                            get(key) {
                                const entry = this.cache.get(key);
                                if (!entry) return null;
                                
                                if (Date.now() - entry.timestamp > this.expireTime) {
                                    this.cache.delete(key);
                                    return null;
                                }
                                
                                return entry.value;
                            },

                            clear() {
                                this.cache.clear();
                            }
                        };

                        // Element References
                        const elements = {
                            mainImage: document.getElementById('mainImage'),
                            loader: document.getElementById('loader'),
                            errorMessage: document.getElementById('errorMessage'),
                            playPauseBtn: document.getElementById('playPauseBtn'),
                            downloadBtn: document.getElementById('downloadBtn'),
                            zoomInBtn: document.getElementById('zoomInBtn'),
                            zoomOutBtn: document.getElementById('zoomOutBtn'),
                            resetBtn: document.getElementById('resetBtn'),
                            fullscreenBtn: document.getElementById('fullscreenBtn'),
                            prevBtn: document.getElementById('prevBtn'),
                            nextBtn: document.getElementById('nextBtn'),
                            thumbnails: document.getElementById('thumbnails'),
                            container: document.querySelector('.viewer-container')
                        };

                        // Utility Functions
                        const utils = {
                            debounce(func, wait) {
                                let timeout;
                                return function executedFunction(...args) {
                                    const later = () => {
                                        clearTimeout(timeout);
                                        func(...args);
                                    };
                                    clearTimeout(timeout);
                                    timeout = setTimeout(later, wait);
                                };
                            },

                            throttle(func, limit) {
                                let inThrottle;
                                return function executedFunction(...args) {
                                    if (!inThrottle) {
                                        func(...args);
                                        inThrottle = true;
                                        setTimeout(() => inThrottle = false, limit);
                                    }
                                };
                            },

                            clamp(value, min, max) {
                                return Math.min(Math.max(value, min), max);
                            },

                            getDistance(touch1, touch2) {
                                return Math.hypot(
                                    touch2.clientX - touch1.clientX,
                                    touch2.clientY - touch1.clientY
                                );
                            },

                            getMidpoint(touch1, touch2) {
                                return {
                                    x: (touch1.clientX + touch2.clientX) / 2,
                                    y: (touch1.clientY + touch2.clientY) / 2
                                };
                            }
                        };

                        // Image Loading and Management
                        async function loadImage(url, retryCount = 0) {
                            const cachedUrl = imageCache.get(url);
                            if (cachedUrl) return cachedUrl;

                            const maxRetries = 3;
                            try {
                                if (retryCount >= maxRetries) {
                                    throw new Error('Max retries exceeded');
                                }

                                // Try different CORS proxies
                                for (const proxy of CONFIG.CORS_PROXIES) {
                                    try {
                                        const proxiedUrl = proxy + encodeURIComponent(url);
                                        const controller = new AbortController();
                                        const timeoutId = setTimeout(() => controller.abort(), CONFIG.PRELOAD.TIMEOUT);
                                        const response = await fetch(proxiedUrl, {
                                            method: 'HEAD',
                                            signal: controller.signal
                                        });
                                        clearTimeout(timeoutId);
                                        
                                        if (response.ok) {
                                            imageCache.set(url, proxiedUrl);
                                            return proxiedUrl;
                                        }
                                    } catch (e) {
                                        continue;
                                    }
                                }

                                // If all proxies fail, retry with exponential backoff
                                const backoffDelay = Math.pow(2, retryCount) * 1000;
                                await new Promise(resolve => setTimeout(resolve, backoffDelay));
                                return loadImage(url, retryCount + 1);

                            } catch (error) {
                                console.error(\`Failed to load image: \${url}\`, error);
                                throw error;
                            }
                        }

                        // Image Display and Navigation
                        async function showImage(index, useTransition = true) {
                            if (index < 0 || index >= imageUrls.length) return;
                            
                            state.currentIndex = index;
                            updateThumbnails();
                            resetZoomAndPan();

                            elements.loader.style.display = 'block';
                            elements.errorMessage.style.display = 'none';
                            elements.mainImage.classList.remove('visible');

                            try {
                                const url = imageUrls[index];
                                const imgUrl = await loadImage(url);
                                
                                await new Promise((resolve, reject) => {
                                    const img = new Image();
                                    img.onload = resolve;
                                    img.onerror = reject;
                                    img.src = imgUrl;
                                });

                                elements.mainImage.src = imgUrl;
                                if (useTransition) {
                                    requestAnimationFrame(() => {
                                        elements.mainImage.classList.add('visible');
                                    });
                                } else {
                                    elements.mainImage.classList.add('visible');
                                }

                                preloadAdjacentImages();
                                updateNavButtons();

                            } catch (error) {
                                showError('Failed to load image. Please try again.');
                            } finally {
                                elements.loader.style.display = 'none';
                            }
                        }

                        // Handle index changes
                        function handleIndexChange(oldValue, newValue) {
                            showImage(newValue);
                        }

                        // Handle zoom changes
                        function handleZoomChange(value) {
                            updateTransform();
                        }

                        // Update slideshow UI based on state
                        function updateSlideshowUI(isSlideshow) {
                            elements.playPauseBtn.querySelector('.icon').textContent = isSlideshow ? '⏸' : '▶';
                            elements.playPauseBtn.querySelector('.text').textContent = isSlideshow ? 'Pause' : 'Slideshow';
                        }

                        // Error Handling
                        function showError(message) {
                            elements.errorMessage.textContent = message;
                            elements.errorMessage.style.display = 'block';
                            elements.loader.style.display = 'none';
                        }

                        // Navigation and Controls
                        function updateNavButtons() {
                            elements.prevBtn.style.display = state.currentIndex > 0 ? 'flex' : 'none';
                            elements.nextBtn.style.display = state.currentIndex < imageUrls.length - 1 ? 'flex' : 'none';
                        }

                        // Zoom and Pan Controls
                        function setZoom(newZoom, centerX = null, centerY = null) {
                            const oldZoom = state.zoom;
                            state.zoom = utils.clamp(newZoom, CONFIG.ZOOM.MIN, CONFIG.ZOOM.MAX);

                            if (centerX !== null && centerY !== null) {
                                // Adjust pan to keep the zoom centered on the mouse position
                                const rect = elements.mainImage.getBoundingClientRect();
                                const offsetX = (centerX - rect.left) / rect.width;
                                const offsetY = (centerY - rect.top) / rect.height;

                                state.translateX = (state.translateX * state.zoom / oldZoom) +
                                    (1 - state.zoom / oldZoom) * offsetX * rect.width;
                                state.translateY = (state.translateY * state.zoom / oldZoom) +
                                    (1 - state.zoom / oldZoom) * offsetY * rect.height;
                            }

                            updateTransform();
                        }

                        function updateTransform() {
                            elements.mainImage.style.transform = 
                                \`scale(\${state.zoom}) translate(\${state.translateX}px, \${state.translateY}px)\`;
                        }

                        function resetZoomAndPan() {
                            state.zoom = 1;
                            state.translateX = 0;
                            state.translateY = 0;
                            updateTransform();
                        }

                        // Preload adjacent images
                        function preloadAdjacentImages() {
                            const start = Math.max(state.currentIndex - CONFIG.PRELOAD.ADJACENT, 0);
                            const end = Math.min(state.currentIndex + CONFIG.PRELOAD.ADJACENT, imageUrls.length - 1);
                            for (let i = start; i <= end; i++) {
                                loadImage(imageUrls[i]).catch(() => {});
                            }
                        }

                        // Update Thumbnails
                        function updateThumbnails() {
                            const thumbnails = elements.thumbnails.querySelectorAll('.thumbnail');
                            thumbnails.forEach((thumb, index) => {
                                thumb.classList.toggle('active', index === state.currentIndex);
                            });
                        }

                        // Initialize Thumbnails
                        function initThumbnails() {
                            imageUrls.forEach((url, index) => {
                                const thumb = document.createElement('img');
                                thumb.src = url;
                                thumb.classList.add('thumbnail');
                                thumb.addEventListener('click', () => {
                                    showImage(index);
                                });
                                elements.thumbnails.appendChild(thumb);
                            });
                        }

                        // Initialize Event Listeners
                        function bindEvents() {
                            // Play/Pause Slideshow
                            elements.playPauseBtn.addEventListener('click', toggleSlideshow);

                            // Download Image
                            elements.downloadBtn.addEventListener('click', downloadCurrentImage);

                            // Zoom In
                            elements.zoomInBtn.addEventListener('click', () => {
                                setZoom(state.zoom + CONFIG.ZOOM.STEP);
                            });

                            // Zoom Out
                            elements.zoomOutBtn.addEventListener('click', () => {
                                setZoom(state.zoom - CONFIG.ZOOM.STEP);
                            });

                            // Reset Zoom and Pan
                            elements.resetBtn.addEventListener('click', resetZoomAndPan);

                            // Fullscreen
                            elements.fullscreenBtn.addEventListener('click', toggleFullscreen);

                            // Next Image
                            elements.nextBtn.addEventListener('click', () => {
                                if (state.currentIndex < imageUrls.length - 1) {
                                    showImage(state.currentIndex + 1);
                                }
                            });

                            // Previous Image
                            elements.prevBtn.addEventListener('click', () => {
                                if (state.currentIndex > 0) {
                                    showImage(state.currentIndex - 1);
                                }
                            });

                            // Keyboard Events
                            window.addEventListener('keydown', handleKeyboardEvents);

                            // Mouse Events for Panning
                            elements.mainImage.addEventListener('mousedown', startPan);
                            window.addEventListener('mousemove', pan);
                            window.addEventListener('mouseup', endPan);

                            // Touch Events
                            elements.mainImage.addEventListener('touchstart', handleTouchStart, { passive: false });
                            elements.mainImage.addEventListener('touchmove', handleTouchMove, { passive: false });
                            elements.mainImage.addEventListener('touchend', handleTouchEnd);

                            // Prevent image dragging
                            elements.mainImage.addEventListener('dragstart', (e) => e.preventDefault());
                        }

                        // Toggle Fullscreen
                        function toggleFullscreen() {
                            if (!state.isFullscreen) {
                                if (window.document.documentElement.requestFullscreen) {
                                    window.document.documentElement.requestFullscreen().catch(() => {});
                                } else if (window.document.documentElement.webkitRequestFullscreen) { /* Safari */
                                    window.document.documentElement.webkitRequestFullscreen();
                                } else if (window.document.documentElement.msRequestFullscreen) { /* IE11 */
                                    window.document.documentElement.msRequestFullscreen();
                                }
                                state.isFullscreen = true;
                                elements.fullscreenBtn.textContent = '🡽';
                            } else {
                                if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
                                    if (document.exitFullscreen) {
                                        document.exitFullscreen().catch(() => {});
                                    } else if (document.webkitExitFullscreen) { /* Safari */
                                        document.webkitExitFullscreen();
                                    } else if (document.msExitFullscreen) { /* IE11 */
                                        document.msExitFullscreen();
                                    }
                                }
                                state.isFullscreen = false;
                                elements.fullscreenBtn.textContent = '⛶';
                            }
                        }

                        // Toggle Slideshow
                        function toggleSlideshow() {
                            if (state.isSlideshow) {
                                clearInterval(state.slideshowInterval);
                                state.slideshowInterval = null;
                                state.isSlideshow = false;
                                updateSlideshowUI(false);
                            } else {
                                state.slideshowInterval = setInterval(() => {
                                    if (state.currentIndex < imageUrls.length - 1) {
                                        showImage(state.currentIndex + 1);
                                    } else {
                                        showImage(0);
                                    }
                                }, CONFIG.SLIDESHOW.DEFAULT_INTERVAL * 1000);
                                state.isSlideshow = true;
                                updateSlideshowUI(true);
                            }
                        }

                        // Download Current Image
                        function downloadCurrentImage() {
                            const url = elements.mainImage.src;
                            if (!url) {
                                alert('No image to download.');
                                return;
                            }
                            const link = document.createElement('a');
                            link.href = url;
                            link.download = \`image_\${state.currentIndex + 1}.jpg\`;
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        }

                        // Handle Keyboard Events
                        function handleKeyboardEvents(e) {
                            switch(e.key) {
                                case 'ArrowLeft':
                                    if (state.currentIndex > 0) {
                                        showImage(state.currentIndex - 1);
                                    }
                                    break;
                                case 'ArrowRight':
                                    if (state.currentIndex < imageUrls.length - 1) {
                                        showImage(state.currentIndex + 1);
                                    }
                                    break;
                                case '+':
                                case '=':
                                    setZoom(state.zoom + CONFIG.ZOOM.STEP);
                                    break;
                                case '-':
                                    setZoom(state.zoom - CONFIG.ZOOM.STEP);
                                    break;
                                case '0':
                                    resetZoomAndPan();
                                    break;
                                case 'Escape':
                                    if (state.isFullscreen) {
                                        toggleFullscreen();
                                    }
                                    break;
                            }
                        }

                        // Panning Functions
                        function startPan(e) {
                            if (state.zoom <= 1) return;
                            state.isPanning = true;
                            state.startX = e.clientX;
                            state.startY = e.clientY;
                            state.initialX = state.translateX;
                            state.initialY = state.translateY;
                            elements.mainImage.classList.add('panning');
                        }

                        function pan(e) {
                            if (!state.isPanning) return;
                            const dx = e.clientX - state.startX;
                            const dy = e.clientY - state.startY;
                            state.translateX = state.initialX + dx;
                            state.translateY = state.initialY + dy;
                            updateTransform();
                        }

                        function endPan() {
                            if (state.isPanning) {
                                state.isPanning = false;
                                elements.mainImage.classList.remove('panning');
                            }
                        }

                        // Touch Event Handlers
                        let initialTouchDistance = 0;
                        let initialZoom = 1;

                        function handleTouchStart(e) {
                            if (e.touches.length === 2) {
                                initialTouchDistance = utils.getDistance(e.touches[0], e.touches[1]);
                                initialZoom = state.zoom;
                            }
                        }

                        function handleTouchMove(e) {
                            if (e.touches.length === 2) {
                                const currentDistance = utils.getDistance(e.touches[0], e.touches[1]);
                                const scale = currentDistance / initialTouchDistance;
                                setZoom(initialZoom * scale);
                                e.preventDefault();
                            } else if (e.touches.length === 1 && state.zoom > 1) {
                                // Handle panning with single touch
                                const touch = e.touches[0];
                                const dx = touch.clientX - state.startX;
                                const dy = touch.clientY - state.startY;
                                state.translateX = state.initialX + dx;
                                state.translateY = state.initialY + dy;
                                updateTransform();
                            }
                        }

                        function handleTouchEnd(e) {
                            if (e.touches.length < 2) {
                                initialTouchDistance = 0;
                                initialZoom = state.zoom;
                            }
                        }

                        // Initialize the viewer
                        function initViewer() {
                            initThumbnails();
                            showImage(state.currentIndex, false);
                            bindEvents();
                        }

                        // Initialize Viewer on Load
                        window.addEventListener('load', initViewer);

                        // Cleanup on Close
                        window.addEventListener('beforeunload', () => {
                            window.ultimateImageViewerInstance = null;
                        });
                    })();
                </script>
            </body>
            </html>
        `;
    }

    // Start the viewer initialization
    initializeViewer();

})();