|
|
<!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>`; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
|
|
|
