Spaces:

Sinketji
/

Notebook1

Paused

App Files Files Community

Sinketji commited on Feb 11

Commit

9679cff

verified ·

1 Parent(s): 21b5792

Update index.html

Browse files

Files changed (1) hide show

index.html +108 -47

index.html CHANGED Viewed

@@ -3,71 +3,95 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Custom AI Notebook</title>
     <style>
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #121212; color: #e0e0e0; margin: 0; padding: 10px; }
-        h2 { text-align: center; color: #00d2ff; margin-bottom: 20px;}
-        .notebook-container { max-width: 800px; margin: auto; padding-bottom: 250px; }
-        .cell { background: #1e1e1e; margin-bottom: 15px; border-radius: 8px; border: 1px solid #333; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
-        .cell-header { padding: 10px 15px; background: #252526; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; font-weight: bold; color: #858585;}
-        textarea.code-input { width: 100%; height: 120px; background: #1e1e1e; color: #9cdcfe; border: none; padding: 15px; font-family: monospace; font-size: 14px; resize: vertical; outline: none; box-sizing: border-box; }
-        .output { background: #000; color: #fff; padding: 15px; font-family: monospace; font-size: 13px; min-height: 20px; white-space: pre-wrap; display: none; margin: 0; border-top: 1px solid #333;}
-        button.run-btn { background: #007acc; color: white; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; font-weight: bold; transition: 0.2s; }
-        button.run-btn:hover { background: #005f9e; }
-        .add-cell-btn { display: block; width: 100%; max-width: 800px; margin: auto; padding: 15px; font-size: 16px; font-weight: bold; background: #2ea043; color: white; border: none; border-radius: 8px; cursor: pointer; margin-top: 10px; }
-        .add-cell-btn:hover { background: #238636; }
-        /* Terminal Styling */
-        .terminal-container { position: fixed; bottom: 0; left: 0; width: 100%; background: #0d1117; border-top: 3px solid #00d2ff; height: 30vh; display: flex; flex-direction: column; z-index: 100; }
-        .terminal-header { background: #161b22; padding: 8px 15px; font-weight: bold; color: #00d2ff; font-size: 14px; }
-        .terminal-output { flex: 1; overflow-y: auto; padding: 10px 15px; font-family: monospace; color: #00ff00; white-space: pre-wrap; font-size: 13px; }
-        .terminal-input-row { display: flex; border-top: 1px solid #30363d; background: #0d1117;}
-        .terminal-input-row span { padding: 12px 10px 12px 15px; color: #00ff00; font-family: monospace; font-weight: bold; }
-        .terminal-input-row input { flex: 1; background: transparent; border: none; color: #fff; font-family: monospace; font-size: 14px; outline: none; padding: 12px 10px; }
     </style>
 </head>
 <body>
-    <h2>⚡ Custom Python Notebook</h2>
-    <div class="notebook-container" id="notebook">
-        </div>
-    <button class="add-cell-btn" onclick="addCell()">+ Add New Code Cell</button>
-    <div class="terminal-container">
-        <div class="terminal-header">💻 Terminal (bash)</div>
-        <div class="terminal-output" id="term-out"></div>
-        <div class="terminal-input-row">
-            <span>$</span>
-            <input type="text" id="term-in" placeholder="Command likho (e.g., pip install requests) aur Enter dabao..." onkeydown="runTerminal(event)">
         </div>
     </div>
     <script>
         let cellCount = 0;
         function addCell() {
             cellCount++;
             const id = cellCount;
             const cellHtml = `
                 <div class="cell" id="cell-${id}">
-                    <div class="cell-header">
-                        <span>Code Cell [${id}]</span>
-                        <button class="run-btn" onclick="runCode(${id})">Run ▶</button>
                     </div>
-                    <textarea class="code-input" id="code-${id}" placeholder="Python code yahan likho..."></textarea>
-                    <pre class="output" id="output-${id}"></pre>
                 </div>
             `;
             document.getElementById("notebook").insertAdjacentHTML('beforeend', cellHtml);
         }
         async function runCode(id) {
             const code = document.getElementById(`code-${id}`).value;
             const outputEl = document.getElementById(`output-${id}`);
             outputEl.style.display = "block";
-            outputEl.innerText = "Executing...";
             try {
                 const res = await fetch("/run_code", {
@@ -76,21 +100,24 @@
                     body: JSON.stringify({ code })
                 });
                 const data = await res.json();
-                outputEl.innerText = data.output || "Done (No output to display)";
             } catch (err) {
-                outputEl.innerText = "Error: " + err;
             }
         }
         async function runTerminal(e) {
             if (e.key === "Enter") {
                 const cmd = e.target.value;
-                if (!cmd) return;
-                const outEl = document.getElementById("term-out");
-                outEl.innerText += `\n$ ${cmd}\nRunning...`;
-                e.target.value = "";
-                outEl.scrollTop = outEl.scrollHeight;
                 try {
                     const res = await fetch("/run_terminal", {
@@ -99,15 +126,49 @@
                         body: JSON.stringify({ cmd })
                     });
                     const data = await res.json();
-                    outEl.innerText = outEl.innerText.replace("Running...", "") + data.output;
-                    outEl.scrollTop = outEl.scrollHeight;
                 } catch (err) {
-                    outEl.innerText += "\nError: " + err;
                 }
             }
         }
-        window.onload = addCell; // Page load hote hi ek cell add ho jayegi
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Classic Python Notebook</title>
     <style>
+        body, html { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #1e1e1e; color: #cccccc; overflow: hidden; display: flex; flex-direction: column; }
+        /* Top Navigation/Header */
+        .header { background-color: #333333; padding: 10px 20px; border-bottom: 1px solid #000; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10; }
+        .header h2 { margin: 0; font-size: 18px; color: #ffffff; font-weight: 500; }
+        .add-btn { background-color: #0e639c; color: white; border: none; padding: 6px 15px; cursor: pointer; border-radius: 3px; font-size: 14px; font-weight: bold; transition: background 0.2s; }
+        .add-btn:hover { background-color: #1177bb; }
+        /* Main Container: Split Layout */
+        .main-container { display: flex; flex-direction: column; flex: 1; height: calc(100% - 40px); }
+        /* Notebook Section */
+        .notebook-panel { flex: 1; overflow-y: auto; padding: 20px; background-color: #1e1e1e; }
+        .cell { background: #252526; border: 1px solid #3c3c3c; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+        .cell-toolbar { background: #2d2d30; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3c3c3c; border-top-left-radius: 4px; border-top-right-radius: 4px; }
+        .cell-title { font-size: 12px; color: #969696; font-weight: bold; }
+        .run-btn { background: #4caf50; color: white; border: none; padding: 4px 12px; cursor: pointer; border-radius: 3px; font-size: 12px; font-weight: bold; }
+        .run-btn:hover { background: #45a049; }
+        .code-input { width: 100%; height: 100px; background: #1e1e1e; color: #d4d4d4; border: none; padding: 12px; font-family: 'Courier New', Courier, monospace; font-size: 14px; resize: vertical; outline: none; box-sizing: border-box; }
+        .code-output { background: #111111; color: #4daaf1; padding: 12px; font-family: 'Courier New', Courier, monospace; font-size: 13px; white-space: pre-wrap; border-top: 1px solid #3c3c3c; display: none; margin: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
+        /* Draggable Resizer */
+        .resizer { height: 6px; background-color: #333333; cursor: ns-resize; border-top: 1px solid #000; border-bottom: 1px solid #000; display: flex; justify-content: center; align-items: center; z-index: 10; }
+        .resizer::after { content: "•••••"; color: #888; font-size: 10px; letter-spacing: 2px; }
+        .resizer:hover { background-color: #007acc; }
+        /* Terminal Section */
+        .terminal-panel { height: 250px; background-color: #000000; display: flex; flex-direction: column; min-height: 50px; max-height: 80vh; }
+        .terminal-header { background: #1e1e1e; color: #e7e7e7; padding: 5px 15px; font-size: 12px; border-bottom: 1px solid #333; text-transform: uppercase; letter-spacing: 1px; }
+        .terminal-content { flex: 1; overflow-y: auto; padding: 10px; font-family: 'Courier New', Courier, monospace; font-size: 13px; color: #00ff00; }
+        .terminal-history { white-space: pre-wrap; margin-bottom: 5px; }
+        .terminal-input-wrapper { display: flex; align-items: center; }
+        .terminal-prompt { color: #00ff00; margin-right: 8px; font-weight: bold; }
+        .terminal-input { flex: 1; background: transparent; border: none; color: #ffffff; font-family: 'Courier New', Courier, monospace; font-size: 13px; outline: none; caret-color: #ffffff; }
     </style>
 </head>
 <body>
+    <div class="header">
+        <h2>🐍 Classic Notebook</h2>
+        <button class="add-btn" onclick="addCell()">+ New Cell</button>
+    </div>
+    <div class="main-container">
+        <div class="notebook-panel" id="notebook">
+            </div>
+        <div class="resizer" id="dragMe"></div>
+        <div class="terminal-panel" id="terminalPanel">
+            <div class="terminal-header">Terminal (Bash)</div>
+            <div class="terminal-content" id="term-content" onclick="document.getElementById('term-in').focus()">
+                <div class="terminal-history" id="term-history">Welcome to the integrated terminal...</div>
+                <div class="terminal-input-wrapper">
+                    <span class="terminal-prompt">user@space:~$</span>
+                    <input type="text" class="terminal-input" id="term-in" onkeydown="runTerminal(event)" autocomplete="off">
+                </div>
+            </div>
         </div>
     </div>
     <script>
         let cellCount = 0;
+        // Notebook ke andar ek cell add karne ka function
         function addCell() {
             cellCount++;
             const id = cellCount;
             const cellHtml = `
                 <div class="cell" id="cell-${id}">
+                    <div class="cell-toolbar">
+                        <span class="cell-title">In [${id}]:</span>
+                        <button class="run-btn" onclick="runCode(${id})">▶ Run</button>
                     </div>
+                    <textarea class="code-input" id="code-${id}" placeholder="Type Python code here..."></textarea>
+                    <pre class="code-output" id="output-${id}"></pre>
                 </div>
             `;
             document.getElementById("notebook").insertAdjacentHTML('beforeend', cellHtml);
         }
+        // Code execute karne ka logic
         async function runCode(id) {
             const code = document.getElementById(`code-${id}`).value;
             const outputEl = document.getElementById(`output-${id}`);
             outputEl.style.display = "block";
+            outputEl.innerText = "Running...";
             try {
                 const res = await fetch("/run_code", {
                     body: JSON.stringify({ code })
                 });
                 const data = await res.json();
+                outputEl.innerText = data.output || "Execution completed. No output.";
             } catch (err) {
+                outputEl.innerText = "Error connecting to server.";
             }
         }
+        // Terminal run karne ka logic
         async function runTerminal(e) {
             if (e.key === "Enter") {
                 const cmd = e.target.value;
+                if (!cmd.trim()) return;
+                const historyEl = document.getElementById("term-history");
+                const contentEl = document.getElementById("term-content");
+                historyEl.innerText += `\nuser@space:~$ ${cmd}`;
+                e.target.value = "Running...";
+                e.target.disabled = true;
                 try {
                     const res = await fetch("/run_terminal", {
                         body: JSON.stringify({ cmd })
                     });
                     const data = await res.json();
+                    if(data.output.trim() !== "") {
+                        historyEl.innerText += `\n${data.output.trim()}`;
+                    }
                 } catch (err) {
+                    historyEl.innerText += `\nError executing command.`;
                 }
+                e.target.value = "";
+                e.target.disabled = false;
+                e.target.focus();
+                contentEl.scrollTop = contentEl.scrollHeight; // Auto-scroll to bottom
             }
         }
+        // --- Terminal ko draggable (kheenchne wala) banane ka logic ---
+        const resizer = document.getElementById('dragMe');
+        const terminalPanel = document.getElementById('terminalPanel');
+        let isResizing = false;
+        resizer.addEventListener('mousedown', function(e) {
+            isResizing = true;
+            document.body.style.cursor = 'ns-resize';
+        });
+        document.addEventListener('mousemove', function(e) {
+            if (!isResizing) return;
+            // Total height calculate karke terminal ki height set kar rahe hain
+            const windowHeight = window.innerHeight;
+            const newHeight = windowHeight - e.clientY;
+            // Limits lagana taaki poora gayab na ho jaye
+            if (newHeight > 50 && newHeight < windowHeight - 100) {
+                terminalPanel.style.height = newHeight + 'px';
+            }
+        });
+        document.addEventListener('mouseup', function() {
+            isResizing = false;
+            document.body.style.cursor = 'default';
+        });
+        // Load hote hi ek default cell bana do
+        window.onload = addCell;
     </script>
 </body>
 </html>