Update index.html

Bit-and-Pi · web-flow · commit d8cbd199fa86 · 2025-07-06T12:24:12.000+05:30
diff --git a/docs/index.html b/docs/index.html
@@ -2,11 +2,8 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>Python Editor with Pyodide</title>
-
-  <!-- CodeMirror CSS -->
+  <title>Python Editor (Pyodide)</title>
   <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; }
@@ -16,48 +13,58 @@
 </head>
 <body>
 
-  <h2>Try Python in Your Browser</h2>
-  <p>Write Python code below and click "Run Code".</p>
-
-  <textarea id="editor">print("Hello, Python!")</textarea><br/>
-  <button id="runBtn">▶ Run Code</button>
-
-  <h3>Output:</h3>
-  <div id="output"></div>
-
-  <!-- Load CodeMirror -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/mode/python/python.min.js"></script>
-
-  <!-- Load Pyodide -->
-  <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
-
-  <script>
-    // Initialize CodeMirror
-    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
-      mode: "python",
-      lineNumbers: true,
-      indentUnit: 4,
-      tabSize: 4,
-    });
-
-    // Load Pyodide
-    let pyodideReadyPromise = loadPyodide();
-
-    // Run code button
-    document.getElementById("runBtn").addEventListener("click", async () => {
-      const outputElem = document.getElementById("output");
-      outputElem.textContent = "Running...";
-      try {
-        const pyodide = await pyodideReadyPromise;
-        let code = editor.getValue();
-        let result = await pyodide.runPythonAsync(code);
-        outputElem.textContent = result === undefined ? "" : result.toString();
-      } catch (err) {
-        outputElem.textContent = err;
-      }
-    });
-  </script>
+<h2>Try Python in Your Browser</h2>
+<textarea id="editor">print("Hello from Python!")</textarea><br>
+<button id="runBtn">▶ Run Code</button>
+
+<h3>Output:</h3>
+<div id="output">...</div>
+
+<!-- CodeMirror -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/mode/python/python.min.js"></script>
+
+<!-- Pyodide -->
+<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
+
+<script>
+  // Initialize CodeMirror
+  const cm = CodeMirror.fromTextArea(document.getElementById("editor"), {
+    mode: "python",
+    lineNumbers: true,
+    theme: "default",
+    indentUnit: 4,
+    tabSize: 4,
+  });
+
+  let pyodideReady = false;
+  let pyodide = null;
+
+  async function loadPyodideAndPackages() {
+    pyodide = await loadPyodide();
+    pyodideReady = true;
+    document.getElementById("output").textContent = "✅ Pyodide loaded. You can now run Python code.";
+  }
+
+  loadPyodideAndPackages();
+
+  document.getElementById("runBtn").addEventListener("click", async () => {
+    const output = document.getElementById("output");
+    if (!pyodideReady) {
+      output.textContent = "⏳ Please wait, Pyodide is still loading...";
+      return;
+    }
+
+    output.textContent = ""; // clear old output
+    try {
+      const code = cm.getValue();
+      let result = await pyodide.runPythonAsync(code);
+      output.textContent = result !== undefined ? result.toString() : "✅ Code executed.";
+    } catch (err) {
+      output.textContent = `❌ Error:\n${err}`;
+    }
+  });
+</script>
 
 </body>
 </html>
