Spaces:

Mohmmad35883736
/

darkpythonplayground

Running

App Files Files Community

Mohmmad35883736 commited on Oct 5, 2025

Commit

a9a3e57

verified ·

1 Parent(s): cf20ddf

قم بانشاء كود بايثون يعمل وصط صفحه ويب

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +126 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Darkpythonplayground
-emoji: 📉
-colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DarkPythonPlayground 🐍
+colorFrom: yellow
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,127 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Python Code Runner</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
+    <style>
+        .cm-editor {
+            height: 100% !important;
+            font-size: 14px !important;
+        }
+        .cm-scroller {
+            font-family: 'Fira Code', monospace !important;
+        }
+        .cm-gutters {
+            background-color: #111827 !important;
+            border-right: 1px solid #374151 !important;
+        }
+        .cm-activeLineGutter {
+            background-color: #1f2937 !important;
+        }
+        .cm-content {
+            caret-color: white !important;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
+    <header class="bg-black border-b border-gray-800 py-4 px-6">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <i data-feather="code" class="text-green-500"></i>
+                <h1 class="text-xl font-bold">DarkPythonPlayground</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="run-btn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center space-x-2 transition duration-200">
+                    <i data-feather="play" class="w-4 h-4"></i>
+                    <span>Run</span>
+                </button>
+                <button id="theme-toggle" class="p-2 rounded-md hover:bg-gray-800 transition duration-200">
+                    <i data-feather="moon" class="w-5 h-5"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <main class="flex-1 flex flex-col md:flex-row overflow-hidden">
+        <div class="flex-1 border-r border-gray-800 overflow-hidden">
+            <div id="editor" class="h-full w-full"></div>
+        </div>
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <div class="border-b border-gray-800 py-2 px-4 flex items-center">
+                <i data-feather="terminal" class="text-green-500 mr-2"></i>
+                <h2 class="font-medium">Output</h2>
+            </div>
+            <div id="output" class="flex-1 overflow-auto p-4 font-mono text-sm bg-gray-800"></div>
+        </div>
+    </main>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/closebrackets.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/dracula.min.js"></script>
+    <script>
+        feather.replace();
+        let pyodide;
+        async function initializePyodide() {
+            pyodide = await loadPyodide({
+                indexURL: "https://cdn.jsdelivr.net/pyodide/v0.23.4/full/"
+            });
+            await pyodide.loadPackage("micropip");
+        }
+        const editor = CodeMirror(document.getElementById('editor'), {
+            mode: 'python',
+            lineNumbers: true,
+            theme: 'dracula',
+            autoCloseBrackets: true,
+            matchBrackets: true,
+            indentUnit: 4,
+            tabSize: 4,
+            value: `# Welcome to DarkPythonPlayground!\n# Write your Python code here and click Run\n\ndef greet(name):\n    return f"Hello, {name}!"\n\nprint(greet("Python Developer"))`
+        });
+        document.getElementById('run-btn').addEventListener('click', async () => {
+            if (!pyodide) {
+                await initializePyodide();
+            }
+            const code = editor.getValue();
+            const outputDiv = document.getElementById('output');
+            outputDiv.innerHTML = '<span class="text-gray-400">Running...</span>';
+            try {
+                const result = await pyodide.runPythonAsync(code);
+                if (result !== undefined) {
+                    outputDiv.innerHTML = `<span class="text-green-400">${result}</span>`;
+                } else {
+                    outputDiv.innerHTML = '<span class="text-green-400">Code executed successfully!</span>';
+                }
+            } catch (error) {
+                outputDiv.innerHTML = `<span class="text-red-400">${error}</span>`;
+            }
+        });
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        themeToggle.addEventListener('click', () => {
+            const html = document.documentElement;
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                themeToggle.innerHTML = '<i data-feather="sun" class="w-5 h-5"></i>';
+                feather.replace();
+            } else {
+                html.classList.add('dark');
+                themeToggle.innerHTML = '<i data-feather="moon" class="w-5 h-5"></i>';
+                feather.replace();
+            }
+        });
+    </script>
+</body>
 </html>