🐳 10/02 - 14:00 - They dont work, and still doesnt sync right and left

index.html

@@ -180,713 +180,5 @@
         </div>
     </div>
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Sample JSON data
-            const sampleJSON = {
-                "name": "John Doe",
-                "age": 30,
-                "isStudent": false,
-                "address": {
-                    "street": "123 Main St",
-                    "city": "Anytown",
-                    "zipcode": "12345"
-                },
-                "hobbies": [
-                    "reading",
-                    "swimming",
-                    "coding"
-                ],
-                "contact": {
-                    "email": "john@example.com",
-                    "phone": "555-1234"
-                }
-            };
-            
-            // DOM elements
-            const jsonEditor = document.getElementById('jsonEditor');
-            const jsonOutput = document.getElementById('jsonOutput');
-            const notification = document.getElementById('notification');
-            const copyBtn = document.getElementById('copyBtn');
-            const downloadBtn = document.getElementById('downloadBtn');
-            const applyCodeBtn = document.getElementById('applyCodeBtn');
-            const validationStatus = document.getElementById('validationStatus');
-            
-            // Create saved indicator
-            const savedIndicator = document.createElement('div');
-            savedIndicator.className = 'saved-indicator';
-            savedIndicator.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Saved';
-            document.body.appendChild(savedIndicator);
-            
-            let isApplyingChanges = false;
-            
-            // Current state
-            let jsonData = {};
-            let history = [];
-            let historyIndex = -1;
-            const MAX_HISTORY = 50;
-            
-            // Track all editable fields for TAB navigation
-            let editableFields = [];
-            let currentFieldIndex = -1;
-            
-            // Layer colors for visual distinction
-            const layerColors = [
-                '#ef4444', '#f97316', '#eab308', '#22c55e',
-                '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'
-            ];
-            
-            // Initialize with sample data
-            loadJSON(sampleJSON);
-            
-            // Create hidden file input for opening files
-            const fileInput = document.createElement('input');
-            fileInput.type = 'file';
-            fileInput.accept = 'application/json,.json';
-            fileInput.style.display = 'none';
-            document.body.appendChild(fileInput);
-            
-            // Open file functionality
-            function openFile() {
-                fileInput.click();
-            }
-            
-            fileInput.addEventListener('change', (event) => {
-                const file = event.target.files[0];
-                if (file) {
-                    const reader = new FileReader();
-                    reader.onload = (e) => {
-                        try {
-                            const data = JSON.parse(e.target.result);
-                            loadJSON(data);
-                            showNotification('File loaded successfully!');
-                        } catch (error) {
-                            showNotification('Error loading file: Invalid JSON');
-                        }
-                    };
-                    reader.readAsText(file);
-                }
-            });
-            
-            document.getElementById('openBtn').addEventListener('click', openFile);
-            document.getElementById('openBtn2').addEventListener('click', openFile);
-            
-            copyBtn.addEventListener('click', () => {
-                jsonOutput.select();
-                document.execCommand('copy');
-                showNotification('JSON copied to clipboard!');
-            });
-            
-            downloadBtn.addEventListener('click', () => {
-                const blob = new Blob([jsonOutput.value], { type: 'application/json' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = 'data.json';
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-                showNotification('JSON file downloaded!');
-            });
-            
-            // Load JSON data into the editor
-            function loadJSON(data) {
-                jsonData = JSON.parse(JSON.stringify(data));
-                renderEditor();
-                updateOutput();
-                saveToHistory();
-            }
-            
-            // Render the JSON editor
-            function renderEditor() {
-                jsonEditor.innerHTML = '';
-                editableFields = [];
-                currentFieldIndex = -1;
-                renderElement(jsonEditor, jsonData, 0, 'root');
-            }
-            
-            // Render a single JSON element (COMPLETE VERSION)
-            function renderElement(container, data, depth, key, parentKey = 'root') {
-                const layerClass = `lcars-layer-${Math.min(depth, 7)}`;
-                const layerColor = layerColors[Math.min(depth, 7)];
-                
-                if (typeof data === 'object' && data !== null) {
-                    // Object or Array - render opening bracket and children
-                    const wrapper = document.createElement('div');
-                    wrapper.className = `json-item relative ${layerClass}`;
-                    wrapper.dataset.key = key;
-                    wrapper.dataset.parent = parentKey;
-                    wrapper.dataset.depth = depth;
-                    wrapper.dataset.layer = Math.min(depth, 7);
-                    
-                    // Layer indicator line (LCARS style)
-                    const layerIndicator = document.createElement('div');
-                    layerIndicator.className = 'layer-indicator';
-                    layerIndicator.style.left = `${depth * 24}px`;
-                    layerIndicator.style.background = layerColor;
-                    layerIndicator.style.boxShadow = `2px 0 8px ${layerColor}`;
-                    wrapper.appendChild(layerIndicator);
-                    
-                    const content = document.createElement('div');
-                    content.className = 'json-item-content flex items-start py-1';
-                    content.style.marginLeft = `${depth * 24 + 12}px`;
-                    
-                    // Key (for objects, not arrays)
-                    if (!Array.isArray(data) && key !== 'root') {
-                        const keySpan = document.createElement('span');
-                        keySpan.className = 'json-key';
-                        keySpan.textContent = `"${key}"`;
-                        keySpan.style.color = '#93c5fd';
-                        content.appendChild(keySpan);
-                        
-                        const colon = document.createElement('span');
-                        colon.textContent = ': ';
-                        colon.className = 'text-slate-500';
-                        content.appendChild(colon);
-                        
-                        // Make key editable
-                        keySpan.style.cursor = 'pointer';
-                        keySpan.addEventListener('click', (e) => {
-                            e.stopPropagation();
-                            makeEditable(keySpan, 'key', key, parentKey);
-                        });
-                    }
-                    
-                    // Value or children
-                    if (Array.isArray(data)) {
-                        // Array
-                        const bracket = document.createElement('span');
-                        bracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
-                        bracket.textContent = '[';
-                        content.appendChild(bracket);
-                        
-                        wrapper.appendChild(content);
-                        container.appendChild(wrapper);
-                        
-                        // Render array items
-                        data.forEach((item, index) => {
-                            renderElement(container, item, depth + 1, index, key);
-                        });
-                        
-                        // Closing bracket
-                        const closingWrapper = document.createElement('div');
-                        closingWrapper.className = `json-item relative ${layerClass}`;
-                        closingWrapper.dataset.key = 'closing';
-                        closingWrapper.dataset.parent = key;
-                        closingWrapper.dataset.depth = depth;
-                        closingWrapper.dataset.layer = Math.min(depth, 7);
-                        
-                        const closingLayerIndicator = document.createElement('div');
-                        closingLayerIndicator.className = 'layer-indicator';
-                        closingLayerIndicator.style.left = `${depth * 24}px`;
-                        closingWrapper.appendChild(closingLayerIndicator);
-                        
-                        const closingContent = document.createElement('div');
-                        closingContent.className = 'json-item-content flex items-start py-1';
-                        closingContent.style.marginLeft = `${depth * 24 + 12}px`;
-                        const closingBracket = document.createElement('span');
-                        closingBracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
-                        closingBracket.textContent = ']';
-                        closingContent.appendChild(closingBracket);
-                        closingWrapper.appendChild(closingContent);
-                        container.appendChild(closingWrapper);
-                    } else {
-                        // Object
-                        const bracket = document.createElement('span');
-                        bracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
-                        bracket.textContent = '{';
-                        content.appendChild(bracket);
-                        
-                        wrapper.appendChild(content);
-                        container.appendChild(wrapper);
-                        
-                        // Render object properties
-                        Object.keys(data).forEach(propKey => {
-                            renderElement(container, data[propKey], depth + 1, propKey, key);
-                        });
-                        
-                        // Closing bracket
-                        const closingWrapper = document.createElement('div');
-                        closingWrapper.className = `json-item relative ${layerClass}`;
-                        closingWrapper.dataset.key = 'closing';
-                        closingWrapper.dataset.parent = key;
-                        closingWrapper.dataset.depth = depth;
-                        closingWrapper.dataset.layer = Math.min(depth, 7);
-                        
-                        const closingLayerIndicator = document.createElement('div');
-                        closingLayerIndicator.className = 'layer-indicator';
-                        closingLayerIndicator.style.left = `${depth * 24}px`;
-                        closingWrapper.appendChild(closingLayerIndicator);
-                        
-                        const closingContent = document.createElement('div');
-                        closingContent.className = 'json-item-content flex items-start py-1';
-                        closingContent.style.marginLeft = `${depth * 24 + 12}px`;
-                        const closingBracket = document.createElement('span');
-                        closingBracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
-                        closingBracket.textContent = '}';
-                        closingContent.appendChild(closingBracket);
-                        closingWrapper.appendChild(closingContent);
-                        container.appendChild(closingWrapper);
-                    }
-                } else {
-                    // Primitive value (string, number, boolean, null)
-                    const wrapper = document.createElement('div');
-                    wrapper.className = `json-item relative ${layerClass}`;
-                    wrapper.dataset.key = key;
-                    wrapper.dataset.parent = parentKey;
-                    wrapper.dataset.depth = depth;
-                    wrapper.dataset.layer = Math.min(depth, 7);
-                    
-                    // Layer indicator line
-                    const layerIndicator = document.createElement('div');
-                    layerIndicator.className = 'layer-indicator';
-                    layerIndicator.style.left = `${depth * 24}px`;
-                    layerIndicator.style.background = layerColor;
-                    layerIndicator.style.boxShadow = `2px 0 8px ${layerColor}`;
-                    wrapper.appendChild(layerIndicator);
-                    
-                    const content = document.createElement('div');
-                    content.className = 'json-item-content flex items-start py-1';
-                    content.style.marginLeft = `${depth * 24 + 12}px`;
-                    
-                    // Key
-                    if (key !== 'root') {
-                        const keySpan = document.createElement('span');
-                        keySpan.className = 'json-key';
-                        keySpan.textContent = `"${key}"`;
-                        keySpan.style.color = '#93c5fd';
-                        content.appendChild(keySpan);
-                        
-                        const colon = document.createElement('span');
-                        colon.textContent = ': ';
-                        colon.className = 'text-slate-500';
-                        content.appendChild(colon);
-                        
-                        // Make key editable
-                        keySpan.style.cursor = 'pointer';
-                        keySpan.addEventListener('click', (e) => {
-                            e.stopPropagation();
-                            makeEditable(keySpan, 'key', key, parentKey);
-                        });
-                    }
-                    
-                    // Value
-                    const valueSpan = document.createElement('span');
-                    valueSpan.className = 'json-value';
-                    if (typeof data === 'string') {
-                        valueSpan.textContent = `"${data}"`;
-                        valueSpan.style.color = '#6ee7b7';
-                    } else if (typeof data === 'number') {
-                        valueSpan.textContent = data;
-                        valueSpan.style.color = '#f472b6';
-                    } else if (typeof data === 'boolean') {
-                        valueSpan.textContent = data;
-                        valueSpan.style.color = '#fbbf24';
-                    } else if (data === null) {
-                        valueSpan.textContent = 'null';
-                        valueSpan.style.color = '#94a3b8';
-                    }
-                    content.appendChild(valueSpan);
-                    
-                    // Make value editable
-                    valueSpan.style.cursor = 'pointer';
-                    valueSpan.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        makeEditable(valueSpan, 'value', key, parentKey);
-                    });
-                    
-                    wrapper.appendChild(content);
-                    container.appendChild(wrapper);
-                }
-            }
-            
-            // Make an element editable
-            function makeEditable(span, type, key, parentKey) {
-                const currentValue = type === 'key' ? key : getValue(parentKey, key);
-                let displayValue = type === 'key' ? currentValue : JSON.stringify(currentValue);
-                
-                // Remove quotes from display for editing
-                if (displayValue.startsWith('"') && displayValue.endsWith('"')) {
-                    displayValue = displayValue.slice(1, -1);
-                }
-                
-                const input = document.createElement('input');
-                input.type = 'text';
-                input.value = displayValue;
-                input.className = `editable-field ${type}-input`;
-                
-                // Replace span with input
-                span.parentNode.replaceChild(input, span);
-                input.focus();
-                input.select();
-                
-                // Save on blur or Enter
-                const saveEdit = () => {
-                    const newValue = input.value.trim();
-                    input.parentNode.replaceChild(span, span);
-                    
-                    if (type === 'key') {
-                        // Rename the key
-                        if (newValue !== key) {
-                            renameKey(parentKey, key, newValue);
-                        }
-                    } else {
-                        // Update the value
-                        const parsedValue = parseValue(newValue);
-                        if (JSON.stringify(parsedValue) !== JSON.stringify(currentValue)) {
-                            updateValue(parentKey, key, parsedValue);
-                        }
-                    }
-                };
-                
-                input.addEventListener('blur', saveEdit);
-                input.addEventListener('keydown', (e) => {
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        input.blur();
-                    } else if (e.key === 'Tab') {
-                        e.preventDefault();
-                        const direction = e.shiftKey ? -1 : 1;
-                        navigateFields(direction);
-                    } else if (e.key === 'Shift+Enter' || (e.shiftKey && e.key === 'Enter')) {
-                        e.preventDefault();
-                        saveEdit();
-                        insertNewField({ key, parentKey });
-                    }
-                });
-            }
-            
-            // Navigate to next/previous editable field
-            function navigateFields(direction) {
-                // Find all editable spans
-                const keys = jsonEditor.querySelectorAll('.json-key');
-                const values = jsonEditor.querySelectorAll('.json-value');
-                const allFields = [];
-                
-                keys.forEach(k => allFields.push({ element: k, type: 'key' }));
-                values.forEach(v => allFields.push({ element: v, type: 'value' }));
-                
-                let currentIndex = -1;
-                for (let i = 0; i < allFields.length; i++) {
-                    if (document.activeElement === allFields[i].element || 
-                        document.activeElement.parentNode === allFields[i].element.parentNode) {
-                        currentIndex = i;
-                        break;
-                    }
-                }
-                
-                let nextIndex = currentIndex + direction;
-                if (nextIndex < 0) nextIndex = allFields.length - 1;
-                if (nextIndex >= allFields.length) nextIndex = 0;
-                
-                if (allFields[nextIndex]) {
-                    allFields[nextIndex].element.click();
-                }
-            }
-            
-            // Get nested value
-            function getValue(parentKey, key) {
-                if (parentKey === 'root') {
-                    return jsonData[key];
-                }
-                const parent = findElementByKey(jsonData, parentKey);
-                if (parent && typeof parent === 'object') {
-                    return parent[key];
-                }
-                return undefined;
-            }
-            
-            // Update a value
-            function updateValue(parentKey, key, newValue) {
-                if (parentKey === 'root') {
-                    jsonData[key] = newValue;
-                } else {
-                    const parent = findElementByKey(jsonData, parentKey);
-                    if (parent && typeof parent === 'object') {
-                        parent[key] = newValue;
-                    }
-                }
-                renderEditor();
-                updateOutput();
-                saveToHistory();
-                showSavedIndicator();
-            }
-            
-            // Rename a key
-            function renameKey(parentKey, oldKey, newKey) {
-                if (parentKey === 'root') {
-                    jsonData[newKey] = jsonData[oldKey];
-                    delete jsonData[oldKey];
-                } else {
-                    const parent = findElementByKey(jsonData, parentKey);
-                    if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
-                        parent[newKey] = parent[oldKey];
-                        delete parent[oldKey];
-                    }
-                }
-                renderEditor();
-                updateOutput();
-                saveToHistory();
-                showSavedIndicator();
-            }
-            
-            // Insert a new field after the current one
-            function insertNewField(currentFieldData) {
-                const { key, parentKey } = currentFieldData;
-                
-                if (parentKey === 'root') {
-                    const keys = Object.keys(jsonData);
-                    const index = keys.indexOf(key);
-                    const newKey = 'newField';
-                    
-                    const newData = {};
-                    keys.forEach((k, i) => {
-                        newData[k] = jsonData[k];
-                        if (i === index) {
-                            newData[newKey] = '';
-                        }
-                    });
-                    if (index === -1 || index === keys.length - 1) {
-                        newData[newKey] = '';
-                    }
-                    
-                    jsonData = newData;
-                } else {
-                    const parent = findElementByKey(jsonData, parentKey);
-                    if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
-                        const keys = Object.keys(parent);
-                        const index = keys.indexOf(key);
-                        const newKey = 'newField';
-                        
-                        const newData = {};
-                        keys.forEach((k, i) => {
-                            newData[k] = parent[k];
-                            if (i === index) {
-                                newData[newKey] = '';
-                            }
-                        });
-                        if (index === -1 || index === keys.length - 1) {
-                            newData[newKey] = '';
-                        }
-                        
-                        Object.keys(parent).forEach(k => delete parent[k]);
-                        Object.assign(parent, newData);
-                    }
-                }
-                
-                renderEditor();
-                updateOutput();
-                saveToHistory();
-                showSavedIndicator();
-            }
-            
-            // Parse a value from string to appropriate type
-            function parseValue(value) {
-                if (value === 'true') return true;
-                if (value === 'false') return false;
-                if (value === 'null') return null;
-                if (!isNaN(value) && value.trim() !== '' && !isNaN(Number(value))) {
-                    return Number(value);
-                }
-                return value;
-            }
-            
-            // Show saved indicator
-            function showSavedIndicator() {
-                savedIndicator.classList.add('show');
-                setTimeout(() => {
-                    savedIndicator.classList.remove('show');
-                }, 1500);
-            }
-            
-            // Find an element by key in nested structure
-            function findElementByKey(obj, key) {
-                if (obj[key] !== undefined) return obj;
-                
-                for (let prop in obj) {
-                    if (typeof obj[prop] === 'object' && obj[prop] !== null) {
-                        const result = findElementByKey(obj[prop], key);
-                        if (result) return result;
-                    }
-                }
-                
-                return null;
-            }
-            
-            // Update JSON output
-            function updateOutput() {
-                if (isApplyingChanges) return;
-                try {
-                    const jsonString = JSON.stringify(jsonData, null, 2);
-                    jsonOutput.value = jsonString;
-                    jsonOutput.style.borderColor = '#10b981';
-                    validationStatus.innerHTML = '<i class="fas fa-check-circle text-green-500"></i><span class="text-green-600">Valid JSON</span>';
-                } catch (e) {
-                    jsonOutput.style.borderColor = '#ef4444';
-                    validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';
-                }
-            }
-            
-            // Apply changes from code editor to visual editor
-            function applyCodeChanges() {
-                if (!jsonOutput.value.trim()) return false;
-                try {
-                    const newData = JSON.parse(jsonOutput.value);
-                    isApplyingChanges = true;
-                    jsonData = JSON.parse(JSON.stringify(newData));
-                    renderEditor();
-                    updateOutput();
-                    saveToHistory();
-                    isApplyingChanges = false;
-                    showNotification('Changes applied successfully!');
-                    return true;
-                } catch (e) {
-                    showNotification('Invalid JSON: ' + e.message);
-                    jsonOutput.style.borderColor = '#ef4444';
-                    validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';
-                    return false;
-                }
-            }
-            
-            // Real-time validation of code editor
-            jsonOutput.addEventListener('input', () => {
-                try {
-                    JSON.parse(jsonOutput.value);
-                    jsonOutput.style.borderColor = '#10b981';
-                    validationStatus.innerHTML = '<i class="fas fa-check-circle text-green-500"></i><span class="text-green-600">Valid JSON</span>';
-                } catch (e) {
-                    jsonOutput.style.borderColor = '#ef4444';
-                    validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';
-                }
-            });
-            
-            // Apply button click
-            applyCodeBtn.addEventListener('click', applyCodeChanges);
-            
-            // Auto-apply on Ctrl+Enter or Cmd+Enter
-            jsonOutput.addEventListener('keydown', (e) => {
-                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                    e.preventDefault();
-                    applyCodeChanges();
-                }
-            });
-            
-            // Auto-apply on blur (when clicking away)
-            jsonOutput.addEventListener('blur', () => {
-                const autoSaveStatus = document.getElementById('autoSaveStatus');
-                if (applyCodeChanges()) {
-                    autoSaveStatus.classList.remove('hidden');
-                    setTimeout(() => {
-                        autoSaveStatus.classList.add('hidden');
-                    }, 2000);
-                }
-            }, true);
-            
-            // Show notification
-            function showNotification(message) {
-                const notificationContent = notification.querySelector('p');
-                notificationContent.textContent = message;
-                notification.classList.add('show');
-                
-                setTimeout(() => {
-                    notification.classList.remove('show');
-                }, 3000);
-            }
-            
-            // Save to history for undo/redo
-            function saveToHistory() {
-                if (historyIndex < history.length - 1) {
-                    history = history.slice(0, historyIndex + 1);
-                }
-                
-                if (history.length >= MAX_HISTORY) {
-                    history.shift();
-                    historyIndex--;
-                }
-                
-                if (history.length > 0 && JSON.stringify(history[historyIndex]) === JSON.stringify(jsonData)) {
-                    return;
-                }
-                
-                history.push(JSON.parse(JSON.stringify(jsonData)));
-                historyIndex = history.length - 1;
-            }
-            
-            // Undo action
-            function undo() {
-                if (historyIndex > 0) {
-                    historyIndex--;
-                    jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
-                    renderEditor();
-                    updateOutput();
-                    showNotification('Undo successful');
-                }
-            }
-            
-            // Redo action
-            function redo() {
-                if (historyIndex < history.length - 1) {
-                    historyIndex++;
-                    jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
-                    renderEditor();
-                    updateOutput();
-                    showNotification('Redo successful');
-                }
-            }
-            
-            // Event listeners for undo/redo
-            document.getElementById('undoBtn').addEventListener('click', undo);
-            document.getElementById('redoBtn').addEventListener('click', redo);
-            
-            // Paste in JSON output pane
-            jsonOutput.addEventListener('paste', (e) => {
-                e.preventDefault();
-                const pasteHandler = (text) => {
-                    try {
-                        const data = JSON.parse(text);
-                        loadJSON(data);
-                        showNotification('JSON pasted and loaded successfully');
-                    } catch (parseError) {
-                        const start = jsonOutput.selectionStart;
-                        const end = jsonOutput.selectionEnd;
-                        const currentValue = jsonOutput.value;
-                        jsonOutput.value = currentValue.substring(0, start) + text + currentValue.substring(end);
-                    }
-                };
-                
-                navigator.clipboard.readText().then(text => {
-                    pasteHandler(text);
-                }).catch(err => {
-                    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
-                    pasteHandler(text);
-                });
-            });
-            
-            // Format JSON
-            document.getElementById('formatBtn').addEventListener('click', () => {
-                updateOutput();
-                showNotification('JSON formatted');
-            });
-            
-            document.getElementById('formatBtn2').addEventListener('click', () => {
-                updateOutput();
-                showNotification('JSON formatted');
-            });
-            
-            // Validate JSON
-            document.getElementById('validateBtn').addEventListener('click', () => {
-                try {
-                    JSON.parse(jsonOutput.value);
-                    showNotification('JSON is valid!');
-                } catch (e) {
-                    showNotification('Invalid JSON: ' + e.message);
-                }
-            });
-            
-            document.getElementById('validateBtn2').addEventListener('click', () => {
-                try {
-                    JSON.parse(jsonOutput.value);
-                    showNotification('JSON is valid!');
-                } catch (e) {
-                    showNotification('Invalid JSON: ' + e.message);
+    <script src="script.js"></script>
+</body>

script.js

@@ -772,4 +772,10 @@ document.addEventListener('DOMContentLoaded', function() {
         history.push(JSON.parse(JSON.stringify(jsonData)));
         historyIndex = history.length - 1;
     }
+    
+    // Initialize on DOM ready
+    document.addEventListener('DOMContentLoaded', function() {
+        // Re-initialize with sample data
+        loadJSON(sampleJSON);
+    });
 });