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 */
        }
        .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: space-between;
            width: fit-content;
        }
        .number {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        #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 id="pixel-grid"></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 asciiOutput = document.getElementById('ascii-output');

        function createGrid() {
            pixelGrid.innerHTML = '';
            header.innerHTML = '';
            footer.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);
            }

            // Create the pixel grid
            for (let y = 0; y < gridSize; y++) {
                const rowNum = document.createElement('div');
                rowNum.classList.add('number');
                rowNum.textContent = y; // Row numbering
                footer.appendChild(rowNum);

                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.