fixed characters drawing orientation and array handling

2026-01-27 07:59:50 +01:00
parent 8afb7cd747
commit c8a8f31477
4 changed files with 1192 additions and 66 deletions
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        
+        .grid-container {
+            display: inline-grid;
+            grid-template-columns: repeat(5, 25px);
+            gap: 5px;
+            margin: 20px 0;
+            padding: 10px;
+            background-color: #f5f5f5;
+            border-radius: 8px;
+        }
+        
+        .checkbox-cell {
+            width: 25px;
+            height: 25px;
+            cursor: pointer;
+        }
+        
+        .controls {
+            margin: 20px 0;
+            text-align: center;
+        }
+        
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            background-color: #0969da;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            margin: 0 5px;
+        }
+        
+        button:hover {
+            background-color: #0860ca;
+        }
+        
+        .json-output {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #f6f8fa;
+            border: 1px solid #d0d7de;
+            border-radius: 6px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        
+        .hidden {
+            display: none;
+        }
+        
+        .copy-button {
+            background-color: #2da44e;
+            margin-top: 10px;
+        }
+        
+        .copy-button:hover {
+            background-color: #2c974b;
+        }
+        
+        .copied-message {
+            color: #2da44e;
+            margin-left: 10px;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="grid-container" id="checkboxGrid"></div>
+    
+    <div class="controls">
+        <button onclick="generateJSON()">Generate JSON</button>
+        <button onclick="clearGrid()">Clear All</button>
+        <button onclick="checkAll()">Check All</button>
+    </div>
+    
+    <div id="jsonOutputContainer" class="hidden">
+        <h3>JSON Output:</h3>
+        <div class="json-output" id="jsonOutput"></div>
+        <button class="copy-button" onclick="copyToClipboard()">Copy to Clipboard</button>
+        <span id="copiedMessage" class="copied-message hidden">✓ Copied!</span>
+    </div>
+
+    <script>
+        // Initialize the 7x5 grid (7 rows, 5 columns)
+        function initializeGrid() {
+            const grid = document.getElementById('checkboxGrid');
+            grid.innerHTML = '';
+            
+            for (let i = 0; i < 7; i++) {
+                for (let j = 0; j < 5; j++) {
+                    const checkbox = document.createElement('input');
+                    checkbox.type = 'checkbox';
+                    checkbox.className = 'checkbox-cell';
+                    checkbox.dataset.row = i;
+                    checkbox.dataset.col = j;
+                    grid.appendChild(checkbox);
+                }
+            }
+        }
+        
+        // Generate JSON from checkbox states
+        function generateJSON() {
+            const checkboxes = document.querySelectorAll('.checkbox-cell');
+            const grid = [];
+            
+            // Create 2D array (7 rows x 5 columns)
+            for (let i = 0; i < 7; i++) {
+                grid[i] = [];
+                for (let j = 0; j < 5; j++) {
+                    const checkbox = document.querySelector(`[data-row="${i}"][data-col="${j}"]`);
+                    grid[i][j] = checkbox.checked;
+                }
+            }
+            
+            // Display JSON
+            const jsonOutput = document.getElementById('jsonOutput');
+            const jsonOutputContainer = document.getElementById('jsonOutputContainer');
+            jsonOutput.textContent = JSON.stringify(grid, null, 2);
+            jsonOutputContainer.classList.remove('hidden');
+            
+            // Hide copied message
+            document.getElementById('copiedMessage').classList.add('hidden');
+        }
+        
+        // Clear all checkboxes
+        function clearGrid() {
+            const checkboxes = document.querySelectorAll('.checkbox-cell');
+            checkboxes.forEach(cb => cb.checked = false);
+        }
+        
+        // Check all checkboxes
+        function checkAll() {
+            const checkboxes = document.querySelectorAll('.checkbox-cell');
+            checkboxes.forEach(cb => cb.checked = true);
+        }
+        
+        // Copy JSON to clipboard
+        function copyToClipboard() {
+            const jsonText = document.getElementById('jsonOutput').textContent;
+            navigator.clipboard.writeText(jsonText).then(() => {
+                const message = document.getElementById('copiedMessage');
+                message.classList.remove('hidden');
+                setTimeout(() => {
+                    message.classList.add('hidden');
+                }, 2000);
+            }).catch(err => {
+                alert('Failed to copy to clipboard');
+                console.error('Copy failed:', err);
+            });
+        }
+        
+        // Initialize grid on page load
+        initializeGrid();
+    </script>
+</body>
+</html>