ok, each image should fit in each placeholder automatically and keep its original aspect-ratio. also, the whole gallery container of images, excluding control elements, should auto-fit in whole window width and height strictly in dependece of window resize. all images should auto-fit within their fixed placeholders or grid of containers in gallery. there should be no scrollbar appeared, the whole gallery container with everything inside should auto-fit strictly within available viewport. so, basically everything got resized dramatically. and when you click on some specific image it should simply fit on whole viewport and close if you click it again with the left mouse click. also, need to make sure that only this specific range used to update on currently viewed rangeof images by using manual or auto-updating method. output your reimplemented variant but without any backticks used in template literals, do it in old fashioned method through + and ': <!DOCTYPE html>
<html>
<head>
    <title>Auto-Updating Image Gallery</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden; 
    }

    .container {
        position: relative;
        height: 100vh; 
        display: flex;
        flex-direction: column;
    }

    #gallery {
        flex: 1; 
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px;
        align-items: start;
        justify-items: center;
        padding: 20px;
        overflow-y: auto; 
        -webkit-overflow-scrolling: touch; 
    }

    .gallery-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    .image-placeholder {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-color: lightgray;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #updateButtonContainer {
        position: absolute;
        top: 10px;
        right: 20px;
    }

    #rangeSlider {
        width: 100%;
        margin-top: 10px;
    }
    </style>
</head>
<body>
    <div class='container'>
        <div id='updateButtonContainer'>
            <button id='updateButton' onclick='manualUpdate()'>Manual Update</button>
            <label for='autoUpdate'>Auto-Update:</label>
            <input type='checkbox' id='autoUpdate' onchange='toggleAutoUpdate()' />
        </div>
        
        <h1>Auto-Updating Image Gallery</h1>
        
        <div id='gallery'></div>
        
        <input type='range' id='rangeSlider' min='1' max='200' step='1' value='1' onchange='updateRange(this.value)' />
    </div>

    <script>
        const gallery = document.getElementById('gallery');
        const autoUpdateCheckbox = document.getElementById('autoUpdate');
        const updateButton = document.getElementById('updateButton');
        const rangeSlider = document.getElementById('rangeSlider');
        const imageUrl = 'https://camenduru-com-webui-docker.hf.space/file=outputs/extras-images/';
        let intervalId;
        let currentRange = 1;

        // Function to fetch and update the gallery
        function updateGallery() {
            gallery.innerHTML = ''; // Clear existing gallery images

            for (let i = currentRange; i <= currentRange + 9; i++) {
                if (i <= 200) {
                    const imageContainer = document.createElement('div');
                    imageContainer.classList.add('image-container');
                    
                    const image = new Image();
                    const imageSrc = imageUrl + padNumberWithZero(i, 5) + '.png';
                    image.src = imageSrc;
                    image.classList.add('gallery-image');
                    
                    const imagePlaceholder = document.createElement('div');
                    imagePlaceholder.classList.add('image-placeholder');
                    
                    imageContainer.appendChild(imagePlaceholder);
                    imageContainer.appendChild(image);
                    
                    image.onerror = () => {
                        // Replace missing image with a backup image if available
                        const missingImageBackupSrc = imageUrl + 'backup.png';
                        image.src = missingImageBackupSrc;
                    };

                    gallery.appendChild(imageContainer);
                }
            }
        }
        
        // Function to pad numbers with leading zeros
        function padNumberWithZero(number, length) {
            let numString = String(number);
            while (numString.length < length) {
                numString = '0' + numString;
            }
            return numString;
        }
        
        // Function to manually update the gallery
        function manualUpdate() {
            clearInterval(intervalId); // Stop auto-update if in progress
            currentRange = 1;
            rangeSlider.value = 1;
            updateGallery();
        }
        
        // Function to toggle auto-update
        function toggleAutoUpdate() {
            if (autoUpdateCheckbox.checked) {
                intervalId = setInterval(updateGallery, 5000); // Auto-update every 5 seconds
                updateButton.disabled = true;
            } else {
                clearInterval(intervalId);
                updateButton.disabled = false;
            }
        }

        // Function to update the range
        function updateRange(value) {
            currentRange = parseInt(value);
            updateGallery();
        }
        
        // Initial gallery update
        updateGallery();
    </script>
</body>
</html>