strictly in this code only:


///

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel Grid with ASCII Output</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            font-size: 16px;
            line-height: 1.5;
        }
        #grid-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #pixel-grid {
            display: grid;
            margin-top: 10px;
            border: 2px solid #333; /* Border around the grid */
            position: relative; /* Needed for positioning row headers */
        }
        .pixel {
            width: 20px;
            height: 20px;
            background-color: #ffffff; /* Default color */
            border: 1px solid #ddd; /* Light border for clarity */
            cursor: pointer; /* Change cursor to pointer for user feedback */
        }

        /* Numbering styles */
        .header, .footer {
            display: flex; 
            justify-content: center;
            width: fit-content;
            margin-top: -1px; /* Adjust to align with pixel grid border */
        }
        .header .number, .footer .number {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        .row-header {
            display: flex; 
            flex-direction: column; 
            align-items: center;
            margin-right: 10px; /* Space for row numbers */
        }

        #ascii-output {
            margin-top: 20px;
            font-family: monospace; /* Monospace font */
            white-space: pre; /* Preserve whitespace */
            background-color: #e0e0e0;
            padding: 10px;
            border: 1px solid #333;
            width: fit-content; /* Adjusts to the content size */
        }
    </style>
</head>
<body>

    <h1>Pixel Grid with ASCII Output</h1>
    
    <label for="grid-size">Select Grid Size:</label>
    <select id="grid-size" onchange="createGrid()">
        <option value="8">8x8</option>
        <option value="16">16x16</option>
        <option value="24">24x24</option>
        <option value="32">32x32</option>
        <option value="64">64x64</option>
    </select>

    <div id="grid-container">
        <div class="header" id="header"></div>
        <div style="display: flex; align-items: flex-start;"> <!-- Wrapper for grid and row headers -->
            <div class="row-header" id="row-header"></div>
            <div id="pixel-grid"></div>
        </div>
        <div class="footer" id="footer"></div>
    </div>

    <div id="ascii-output"></div>

    <script>
        const pixelGrid = document.getElementById('pixel-grid');
        const header = document.getElementById('header');
        const footer = document.getElementById('footer');
        const rowHeader = document.getElementById('row-header');
        const asciiOutput = document.getElementById('ascii-output');

        function createGrid() {
            pixelGrid.innerHTML = '';
            header.innerHTML = '';
            footer.innerHTML = '';
            rowHeader.innerHTML = '';
            asciiOutput.textContent = '';

            const gridSize = parseInt(document.getElementById('grid-size').value);
            pixelGrid.style.gridTemplateColumns = `repeat(${gridSize}, 20px)`;
            pixelGrid.style.gridTemplateRows = `repeat(${gridSize}, 20px)`;

            // Column headers
            header.appendChild(document.createElement('div')); // Empty corner
            for (let x = 0; x < gridSize; x++) {
                const num = document.createElement('div');
                num.classList.add('number');
                num.textContent = x; // Column numbering
                header.appendChild(num);
            }

            // Row headers and pixel grid
            for (let y = 0; y < gridSize; y++) {
                const rowNum = document.createElement('div');
                rowNum.classList.add('number');
                rowNum.textContent = y; // Row numbering
                rowHeader.appendChild(rowNum); // Adding row header

                for (let x = 0; x < gridSize; x++) {
                    const pixel = document.createElement('div');
                    pixel.classList.add('pixel');
                    pixel.dataset.x = x; // Set the x-coordinate
                    pixel.dataset.y = y; // Set the y-coordinate
                    pixelGrid.appendChild(pixel);
                    
                    // Toggle fill on left click
                    pixel.addEventListener('click', function () {
                        // Toggle pixel color
                        if (this.style.backgroundColor === 'rgb(255, 255, 255)' || this.style.backgroundColor === '') {
                            this.style.backgroundColor = '#000000'; // Draw pixel (black)
                        } else {
                            this.style.backgroundColor = '#ffffff'; // Erase pixel (white)
                        }
                        updateAsciiOutput(); // Update ASCII output after each click
                    });
                }
            }
            updateAsciiOutput(); // Initial ASCII rendering when grid is created
        }

        function updateAsciiOutput() {
            const gridSize = parseInt(document.getElementById('grid-size').value);
            let ascii = '';
            const pixels = document.querySelectorAll('.pixel');

            // Construct ASCII representation
            for (let y = 0; y < gridSize; y++) {
                for (let x = 0; x < gridSize; x++) {
                    const pixel = pixels[y * gridSize + x];
                    ascii += pixel.style.backgroundColor === 'rgb(0, 0, 0)' ? '█' : '░'; // Filled or empty
                }
                ascii += '\n'; // New line for each row
            }
            asciiOutput.textContent = ascii; // Display ASCII representation
        }

        // Create initial grid with 8x8
        window.onload = () => createGrid();
    </script>
</body>
</html>

///

refactor all indexing coordinates system in both grid and ascii as it need to be properly visible outside of both of them.

let's refine ascii and grid and add indices in rows from the left and columns above on top outside properly.


properly auto-align and auto-fit everything within available viewport, including that indices column outside of grid from the left and on top of it.

do not forget that you also need to index similarly correctly evenly ascii output inside actual ascii in through blocks.