Update index.html

index.html

@@ -35,6 +35,7 @@
     <!-- Top Controls -->
     <div id="toolbar" class="flex items-center bg-gray-100 p-2 border-b transition-transform duration-300">
       <button id="toggleSidebarBtn" class="p-1 mr-2 hover:bg-gray-200 rounded"><svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
+      <button id="toggleEditorBtn" class="p-1 mr-2 hover:bg-gray-200 rounded"><svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M8 4h8v16H8z"/></svg></button>
       <input id="pageTitle" class="flex-1 px-2 py-1 border rounded focus:outline-none mr-2" placeholder="Page Title..." />
       <button id="saveBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Save</button>
     </div>
@@ -42,7 +43,7 @@
     <!-- Editor & Preview Panes -->
     <div class="flex flex-1 overflow-hidden">
       <!-- Editor Pane -->
-      <div class="relative w-1/2">
+      <div id="editorPane" class="relative w-1/2 transition-all duration-300">
         <div id="editorToolbar" class="absolute top-2 left-2 flex space-x-1 z-10">
           <button data-action="bold" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">B</button>
           <button data-action="italic" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">I</button>
@@ -53,7 +54,7 @@
       </div>
 
       <!-- Preview Pane -->
-      <div id="preview" class="w-1/2 p-6 overflow-auto scrollbar-thin prose prose-indigo max-w-none"></div>
+      <div id="previewPane" class="w-1/2 p-6 overflow-auto scrollbar-thin prose prose-indigo max-w-none transition-all duration-300"></div>
     </div>
   </main>
 
@@ -72,9 +73,11 @@
     const saveBtn = document.getElementById('saveBtn');
     const pageTitleInput = document.getElementById('pageTitle');
     const editor = document.getElementById('editor');
-    const preview = document.getElementById('preview');
+    const previewPane = document.getElementById('previewPane');
     const toggleSidebarBtn = document.getElementById('toggleSidebarBtn');
+    const toggleEditorBtn = document.getElementById('toggleEditorBtn');
     const editorToolbar = document.getElementById('editorToolbar');
+    const editorPane = document.getElementById('editorPane');
 
     // Render file tree
     function renderTree() {
@@ -101,8 +104,8 @@
     // Update preview with syntax highlighting
     function updatePreview() {
       const html = marked.parse(editor.value || '');
-      preview.innerHTML = html;
-      preview.querySelectorAll('pre code').forEach(block => hljs.highlightBlock(block));
+      previewPane.innerHTML = html;
+      previewPane.querySelectorAll('pre code').forEach(block => hljs.highlightBlock(block));
     }
 
     // Save current page
@@ -127,7 +130,7 @@
       localStorage.setItem('docPages', JSON.stringify(pages));
       const ids = Object.keys(pages);
       if (ids.length) loadPage(ids[0]);
-      else { currentId = null; editor.value = ''; pageTitleInput.value = ''; preview.innerHTML = ''; renderTree(); }
+      else { currentId = null; editor.value = ''; pageTitleInput.value = ''; previewPane.innerHTML = ''; renderTree(); }
     };
 
     saveBtn.onclick = () => { savePage(); alert('Saved!'); };
@@ -141,6 +144,13 @@
       toolbarDiv.classList.toggle('pl-0');
     };
 
+    // Toggle editor visibility
+    toggleEditorBtn.onclick = () => {
+      const hidden = editorPane.classList.toggle('hidden');
+      if (hidden) previewPane.classList.replace('w-1/2', 'w-full');
+      else previewPane.classList.replace('w-full', 'w-1/2');
+    };
+
     // Editor formatting toolbar
     editorToolbar.onclick = e => {
       if (!e.target.dataset.action) return;
@@ -167,4 +177,4 @@
     if (!currentId && Object.keys(pages).length) loadPage(Object.keys(pages)[0]);
   </script>
 </body>
-</html>
+</html>