Update index.html

Bit-and-Pi · web-flow · commit 048665082e02 · 2025-07-06T12:53:43.000+05:30
diff --git a/docs/index.html b/docs/index.html
@@ -6,19 +6,32 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.css" />
   <style>
     body { font-family: Arial, sans-serif; margin: 20px; }
-    #editor { height: 300px; border: 1px solid #ccc; }
-    #output { border: 1px solid #ccc; padding: 10px; white-space: pre-wrap; margin-top: 10px; background: #f9f9f9; }
+    .container { display: flex; justify-content: space-between; flex-wrap: wrap; }
+    .draggable { border: 1px solid #ccc; margin: 10px; padding: 10px; background-color: #f9f9f9; }
+    #editor { height: 300px; width: 45%; }
+    #output { height: 300px; width: 45%; }
+    #runBtn { margin-top: 10px; padding: 8px 16px; cursor: pointer; }
+    #output { white-space: pre-wrap; }
+    #drag-editor, #drag-output { cursor: move; }
     button { margin-top: 10px; padding: 8px 16px; }
   </style>
 </head>
 <body>
 
 <h2>Try Python in Your Browser</h2>
-<textarea id="editor">print("Hello from Python!")</textarea><br>
-<button id="runBtn">▶ Run Code</button>
+<div class="container">
+  <div id="drag-editor" class="draggable" style="width:45%; cursor: move;">
+    <h3>Code Editor</h3>
+    <textarea id="editor">print("Hello from Python!")</textarea><br>
+  </div>
+
+  <div id="drag-output" class="draggable" style="width:45%; cursor: move;">
+    <h3>Output:</h3>
+    <div id="output">...</div>
+  </div>
+</div>
 
-<h3>Output:</h3>
-<div id="output">...</div>
+<button id="runBtn">▶ Run Code</button>
 
 <!-- CodeMirror -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.js"></script>
@@ -40,7 +53,6 @@ <h3>Output:</h3>
   let pyodideReady = false;
   let pyodide = null;
 
-  // Function to load Pyodide
   async function loadPyodideAndPackages() {
     pyodide = await loadPyodide();
     pyodideReady = true;
@@ -62,4 +74,62 @@ <h3>Output:</h3>
   document.getElementById("runBtn").addEventListener("click", async () => {
     const output = document.getElementById("output");
 
-    if (!pyodideReady
+    if (!pyodideReady) {
+      output.textContent = "⏳ Please wait, Pyodide is still loading...";
+      return;
+    }
+
+    output.textContent = ""; // clear old output
+    try {
+      const code = cm.getValue();  // Get code from editor
+      redirectOutput();  // Redirect stdout before running the code
+      await pyodide.runPythonAsync(code);
+
+      // Get the output and display it
+      const result = pyodide.runPython('sys.stdout.getvalue()');  // Capture the stdout
+      if (result !== undefined && result !== null) {
+        output.textContent = result.toString();
+      } else {
+        output.textContent = "✅ Code executed successfully.";
+      }
+    } catch (err) {
+      output.textContent = `❌ Error:\n${err.message || err}`;
+    }
+  });
+
+  // Drag functionality (for customizability)
+  let dragging = null;
+  let offsetX = 0;
+  let offsetY = 0;
+
+  function makeDraggable(element) {
+    element.addEventListener('mousedown', (e) => {
+      dragging = element;
+      offsetX = e.clientX - element.getBoundingClientRect().left;
+      offsetY = e.clientY - element.getBoundingClientRect().top;
+      
+      document.addEventListener('mousemove', dragElement);
+      document.addEventListener('mouseup', stopDragging);
+    });
+  }
+
+  function dragElement(e) {
+    if (dragging) {
+      dragging.style.position = 'absolute';
+      dragging.style.left = (e.clientX - offsetX) + 'px';
+      dragging.style.top = (e.clientY - offsetY) + 'px';
+    }
+  }
+
+  function stopDragging() {
+    dragging = null;
+    document.removeEventListener('mousemove', dragElement);
+    document.removeEventListener('mouseup', stopDragging);
+  }
+
+  makeDraggable(document.getElementById('drag-editor'));
+  makeDraggable(document.getElementById('drag-output'));
+</script>
+
+</body>
+</html>
