valencik · September 3, 2025 17:00
diff --git a/input-grid.html b/input-grid.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>28x28 Input Grid</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background-color: #f0f0f0;
        }

        #grid-container {
            display: grid;
            grid-template-columns: repeat(28, 20px);
            grid-template-rows: repeat(28, 20px);
            gap: 1px;
            background-color: #ccc;
            padding: 1px;
            border: 2px solid #333;
            user-select: none;
            cursor: crosshair;
        }

        .cell {
            width: 20px;
            height: 20px;
            background-color: white;
            transition: background-color 0.1s;
        }

        .cell.active {
            background-color: black;
        }

        #controls {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        #clear-button {
            background-color: #f44336;
        }

        #clear-button:hover {
            background-color: #da190b;
        }

        #output {
            margin-top: 20px;
            padding: 10px;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
            max-width: 800px;
            max-height: 400px;
            overflow: auto;
            white-space: pre;
            display: none;
        }
    </style>
 </head>

 <body>
    <h1>28x28 Input Grid</h1>
    <div id="grid-container"></div>
    <div id="controls">
        <button id="print-button">Print Grid Array</button>
        <button id="clear-button">Clear Grid</button>
    </div>
    <pre id="output"></pre>

    <script>
        // Initialize the grid
        const gridSize = 28;
        const gridContainer = document.getElementById('grid-container');
        const printButton = document.getElementById('print-button');
        const clearButton = document.getElementById('clear-button');
        const output = document.getElementById('output');
        let isDrawing = false;

        // Create 2D array to store grid state
        let gridState = Array(gridSize).fill().map(() => Array(gridSize).fill(0));

        // Create grid cells
        for (let row = 0; row < gridSize; row++) {
            for (let col = 0; col < gridSize; col++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.row = row;
                cell.dataset.col = col;
                gridContainer.appendChild(cell);
            }
        }

        function activateCell(cell) {
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);
            cell.classList.add('active');
            gridState[row][col] = 1;
        }

        // Activate cells when clicking or dragging
        gridContainer.addEventListener('mousedown', (e) => {
            if (e.target.classList.contains('cell')) {
                isDrawing = true;
                activateCell(e.target);
                e.preventDefault();
            }
        });
        gridContainer.addEventListener('mouseover', (e) => {
            if (isDrawing && e.target.classList.contains('cell')) {
                activateCell(e.target);
            }
        });

        // Stop drawing when mouseup
        document.addEventListener('mouseup', () => { isDrawing = false; });

        // Prevent right-click context menu on grid
        gridContainer.addEventListener('contextmenu', (e) => { e.preventDefault(); });

        // Print button handler
        printButton.addEventListener('click', () => {
            const formattedArray = '[\n' +
                gridState.map(row => '  [' + row.join(', ') + ']').join(',\n') +
                '\n]';
            output.textContent = formattedArray;
            output.style.display = 'block';
        });

        // Clear button handler
        const cells = document.querySelectorAll('.cell');
        clearButton.addEventListener('click', () => {
            cells.forEach(cell => {
                cell.classList.remove('active');
            });
            gridState = Array(gridSize).fill().map(() => Array(gridSize).fill(0));
            output.style.display = 'none';
        });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>28x28 Input Grid</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background-color: #f0f0f0;
	}

	#grid-container {
	display: grid;
	grid-template-columns: repeat(28, 20px);
	grid-template-rows: repeat(28, 20px);
	gap: 1px;
	background-color: #ccc;
	padding: 1px;
	border: 2px solid #333;
	user-select: none;
	cursor: crosshair;
	}

	.cell {
	width: 20px;
	height: 20px;
	background-color: white;
	transition: background-color 0.1s;
	}

	.cell.active {
	background-color: black;
	}

	#controls {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	}

	button {
	padding: 10px 20px;
	font-size: 16px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}

	button:hover {
	background-color: #45a049;
	}

	#clear-button {
	background-color: #f44336;
	}

	#clear-button:hover {
	background-color: #da190b;
	}

	#output {
	margin-top: 20px;
	padding: 10px;
	background-color: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: monospace;
	font-size: 12px;
	max-width: 800px;
	max-height: 400px;
	overflow: auto;
	white-space: pre;
	display: none;
	}
	</style>
	</head>

	<body>
	<h1>28x28 Input Grid</h1>
	<div id="grid-container"></div>
	<div id="controls">
	<button id="print-button">Print Grid Array</button>
	<button id="clear-button">Clear Grid</button>
	</div>
	<pre id="output"></pre>

	<script>
	// Initialize the grid
	const gridSize = 28;
	const gridContainer = document.getElementById('grid-container');
	const printButton = document.getElementById('print-button');
	const clearButton = document.getElementById('clear-button');
	const output = document.getElementById('output');
	let isDrawing = false;

	// Create 2D array to store grid state
	let gridState = Array(gridSize).fill().map(() => Array(gridSize).fill(0));

	// Create grid cells
	for (let row = 0; row < gridSize; row++) {
	for (let col = 0; col < gridSize; col++) {
	const cell = document.createElement('div');
	cell.className = 'cell';
	cell.dataset.row = row;
	cell.dataset.col = col;
	gridContainer.appendChild(cell);
	}
	}

	function activateCell(cell) {
	const row = parseInt(cell.dataset.row);
	const col = parseInt(cell.dataset.col);
	cell.classList.add('active');
	gridState[row][col] = 1;
	}

	// Activate cells when clicking or dragging
	gridContainer.addEventListener('mousedown', (e) => {
	if (e.target.classList.contains('cell')) {
	isDrawing = true;
	activateCell(e.target);
	e.preventDefault();
	}
	});
	gridContainer.addEventListener('mouseover', (e) => {
	if (isDrawing && e.target.classList.contains('cell')) {
	activateCell(e.target);
	}
	});

	// Stop drawing when mouseup
	document.addEventListener('mouseup', () => { isDrawing = false; });

	// Prevent right-click context menu on grid
	gridContainer.addEventListener('contextmenu', (e) => { e.preventDefault(); });

	// Print button handler
	printButton.addEventListener('click', () => {
	const formattedArray = '[\n' +
	gridState.map(row => ' [' + row.join(', ') + ']').join(',\n') +
	'\n]';
	output.textContent = formattedArray;
	output.style.display = 'block';
	});

	// Clear button handler
	const cells = document.querySelectorAll('.cell');
	clearButton.addEventListener('click', () => {
	cells.forEach(cell => {
	cell.classList.remove('active');
	});
	gridState = Array(gridSize).fill().map(() => Array(gridSize).fill(0));
	output.style.display = 'none';
	});
	</script>
	</body>

	</html>
No results found