Update index.html

index.html

@@ -7,10 +7,11 @@
     <style>
         :root {
             --bg: #0a0a0a;
-            --card: #1a1a1a;
+            --card: #121212;
             --accent: #7b2ff7;
             --text: #e0e0e0;
             --border: #333;
+            --success: #4caf50;
         }
 
         body {
@@ -35,39 +36,70 @@
         .module-box {
             background: var(--card);
             border: 2px solid var(--accent);
-            border-radius: 8px;
-            padding: 15px;
+            border-radius: 12px;
+            padding: 20px;
             position: relative;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.8);
         }
 
         .module-header {
             display: flex;
             justify-content: space-between;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
             font-size: 0.8rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
+            font-weight: bold;
             color: var(--accent);
         }
 
+        .exit-btn {
+            color: #ff4444;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
         textarea {
             width: 100%;
-            height: 100px;
+            height: 150px;
             background: #000;
             color: #00ff41;
             border: 1px solid var(--border);
-            border-radius: 4px;
-            font-family: monospace;
-            padding: 10px;
+            border-radius: 6px;
+            font-family: 'Courier New', monospace;
+            padding: 12px;
             box-sizing: border-box;
             resize: vertical;
+            font-size: 0.9rem;
+        }
+
+        /* LIVE RENDER AREA */
+        .preview-container {
+            margin-top: 15px;
+            background: white; /* Default white background for rendered content */
+            color: black;
+            border-radius: 6px;
+            min-height: 50px;
+            overflow: hidden;
+            display: none; /* Shown only when rendered */
+        }
+
+        .preview-label {
+            background: #222;
+            color: #aaa;
+            font-size: 0.7rem;
+            padding: 4px 10px;
+            display: block;
+        }
+
+        iframe {
+            width: 100%;
+            border: none;
+            background: white;
         }
 
         .controls {
-            margin-top: 10px;
+            margin-top: 15px;
             display: flex;
-            gap: 10px;
+            gap: 12px;
             flex-wrap: wrap;
         }
 
@@ -75,40 +107,45 @@
             background: transparent;
             color: white;
             border: 1px solid var(--accent);
-            padding: 8px 15px;
-            border-radius: 4px;
+            padding: 10px 20px;
+            border-radius: 6px;
             cursor: pointer;
-            transition: 0.2s;
-            font-size: 0.8rem;
+            transition: all 0.2s ease;
+            font-size: 0.85rem;
+            font-weight: 600;
+            text-transform: uppercase;
         }
 
         button:hover {
             background: var(--accent);
+            transform: translateY(-1px);
         }
 
         .save-btn {
-            border-color: #00ff41;
-            color: #00ff41;
+            border-color: var(--success);
+            color: var(--success);
         }
 
         .save-btn:hover {
-            background: #00ff41;
-            color: black;
+            background: var(--success);
+            color: white;
         }
 
         #library {
             width: 100%;
             max-width: 800px;
-            margin-top: 30px;
-            padding: 15px;
+            margin: 40px 0;
+            padding: 20px;
             background: #111;
-            border-top: 1px solid var(--border);
+            border: 1px dashed #444;
+            border-radius: 12px;
         }
 
         .library-title {
             font-size: 0.9rem;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
             color: #888;
+            letter-spacing: 1px;
         }
 
         .library-grid {
@@ -118,22 +155,25 @@
         }
 
         .lib-item {
-            background: #222;
-            border: 1px solid #444;
-            padding: 5px 10px;
-            font-size: 0.75rem;
+            background: #1a1a1a;
+            border: 1px solid #333;
+            padding: 8px 16px;
+            font-size: 0.8rem;
             cursor: pointer;
+            border-radius: 4px;
         }
 
         .lib-item:hover {
             border-color: var(--accent);
+            background: #222;
         }
 
         .add-module-trigger {
-            margin: 20px;
-            padding: 15px 40px;
-            font-weight: bold;
+            margin-top: 30px;
+            padding: 18px 50px;
+            font-size: 1rem;
             border-width: 2px;
+            background: rgba(123, 47, 247, 0.1);
         }
     </style>
 </head>
@@ -154,12 +194,13 @@
 
         function init() {
             renderLibrary();
-            createModule(); // Start with one module
+            // Start with one module automatically
+            createModule();
         }
 
         function createModule(initialContent = '') {
             const canvas = document.getElementById('canvas');
-            const moduleId = 'mod_' + Date.now();
+            const moduleId = 'mod_' + Math.random().toString(36).substr(2, 9);
             
             const box = document.createElement('div');
             box.className = 'module-box';
@@ -168,17 +209,45 @@
             box.innerHTML = `
                 <div class="module-header">
                     <span>HTML NODE</span>
-                    <span style="cursor:pointer" onclick="document.getElementById('${moduleId}').remove()">[EXIT]</span>
+                    <span class="exit-btn" onclick="document.getElementById('${moduleId}').remove()">[EXIT]</span>
                 </div>
-                <textarea placeholder="Paste or type HTML here..." id="text_${moduleId}">${initialContent}</textarea>
+                <textarea 
+                    placeholder="Paste or type HTML/JS/CSS code here..." 
+                    id="text_${moduleId}" 
+                    spellcheck="false"
+                >${initialContent}</textarea>
+                
                 <div class="controls">
-                    <button onclick="previewModule('${moduleId}')">RENDER PREVIEW</button>
+                    <button onclick="renderPreview('${moduleId}')">RENDER PREVIEW</button>
                     <button class="save-btn" onclick="saveToLibrary('${moduleId}')">SAVE TO LIBRARY</button>
                 </div>
-                <div id="preview_${moduleId}" style="margin-top:15px; display:none; padding:10px; border:1px dashed #444;"></div>
+
+                <div class="preview-container" id="cont_${moduleId}">
+                    <span class="preview-label">LIVE OUTPUT</span>
+                    <iframe id="iframe_${moduleId}" sandbox="allow-scripts"></iframe>
+                </div>
             `;
             
             canvas.appendChild(box);
+            if(initialContent) renderPreview(moduleId);
+        }
+
+        function renderPreview(moduleId) {
+            const code = document.getElementById(`text_${moduleId}`).value;
+            const container = document.getElementById(`cont_${moduleId}`);
+            const iframe = document.getElementById(`iframe_${moduleId}`);
+            
+            container.style.display = 'block';
+            
+            const blob = new Blob([code], { type: 'text/html' });
+            iframe.src = URL.createObjectURL(blob);
+            
+            // Auto-resize iframe height
+            iframe.onload = function() {
+                setTimeout(() => {
+                    iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 20) + 'px';
+                }, 100);
+            };
         }
 
         function saveToLibrary(moduleId) {
@@ -200,18 +269,12 @@
                 const btn = document.createElement('button');
                 btn.className = 'lib-item';
                 btn.innerText = item.name;
+                btn.title = "Click to open in new module";
                 btn.onclick = () => createModule(item.content);
                 grid.appendChild(btn);
             });
         }
 
-        function previewModule(moduleId) {
-            const content = document.getElementById(`text_${moduleId}`).value;
-            const prevDiv = document.getElementById(`preview_${moduleId}`);
-            prevDiv.style.display = 'block';
-            prevDiv.innerHTML = content;
-        }
-
         init();
     </script>
 </body>