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.

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