document.getElementById('currentYear').textContent = new Date().getFullYear();

        const imageUrlInput = document.getElementById('imageUrl');
        const positionInput = document.getElementById('position');
        const fetchButton = document.getElementById('fetchButton');
        const buttonText = document.getElementById('buttonText');
        const loadingSpinner = document.getElementById('loadingSpinner');
        const outputDiv = document.getElementById('output');
        const errorDisplayDiv = document.getElementById('errorDisplay');
        const byteInspectorForm = document.getElementById('byteInspectorForm');

        byteInspectorForm.addEventListener('submit', async function(event) {
            event.preventDefault();
            await fetchByteValue();
        });

        async function fetchByteValue() {
            fetchButton.disabled = true;
            buttonText.textContent = 'Fetching...';
            loadingSpinner.style.display = 'inline-block';
            outputDiv.style.display = 'none';
            outputDiv.innerHTML = '';
            errorDisplayDiv.innerHTML = '';

            const url = imageUrlInput.value;
            const positionStr = positionInput.value;
            const position = parseInt(positionStr);

            if (!url) {
                displayError('Please enter a URL.');
                resetButton();
                return;
            }

            if (isNaN(position) || position < 1) {
                displayError('Please enter a valid byte position (starting at 1).');
                resetButton();
                return;
            }

            try {
                const response = await fetch(url);

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status} ${response.statusText}`);
                }

                const buffer = await response.arrayBuffer();
                const byteArray = new Uint8Array(buffer);
                const zeroBasedIndex = position - 1;

                if (zeroBasedIndex >= byteArray.length) {
                    displayError(`Position ${position} exceeds file length (${byteArray.length} bytes).`);
                    resetButton();
                    return;
                }

                const targetByte = byteArray[zeroBasedIndex];
                const hexValue = targetByte.toString(16).padStart(2, '0').toUpperCase();
                const decimalValue = targetByte;
                const unicodeChar = String.fromCharCode(targetByte);
                const unicodeCodePoint = `U+${hexValue.padStart(4, '0')}`;

                outputDiv.innerHTML = `
                    <h3>Byte Information:</h3>
                    <div class="grid">
                        <div>
                            <span class="label">Hex Value:</span>
                            <span class="value hex">${hexValue}</span>
                        </div>
                        <div>
                            <span class="label">Decimal Value:</span>
                            <span class="value">${decimalValue}</span>
                        </div>
                        <div>
                            <span class="label">Unicode Char:</span>
                            <span class="value">'${escapeHtml(unicodeChar)}'</span>
                        </div>
                        <div>
                            <span class="label">Unicode Code Point:</span>
                            <span class="value">${unicodeCodePoint}</span>
                        </div>
                        <div class="span-2">
                            <span class="label">File Size:</span>
                            <span class="value">${byteArray.length.toLocaleString()} bytes</span>
                        </div>
                    </div>
                `;
                outputDiv.style.display = 'block';

            } catch (e) {
                console.error(e);
                displayError(`Error: ${e.message}. Ensure the URL is correct, publicly accessible, and allows CORS (Cross-Origin Resource Sharing). For local files, try using a simple HTTP server instead of file:/// URLs due to browser security restrictions.`);
            }
            finally {
                resetButton();
            }
        }

        function resetButton() {
            fetchButton.disabled = false;
            buttonText.textContent = 'Fetch Byte Value';
            loadingSpinner.style.display = 'none';
        }

        function displayError(message) {
            errorDisplayDiv.innerHTML = `<div class="error-message"><p class="font-medium">Error:</p><p>${message}</p></div>`;
        }

        function escapeHtml(unsafe) {
            if (unsafe === undefined || unsafe === null) return '';
            return unsafe
                .toString()
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }