File size: 5,565 Bytes
a9a3e57 cf20ddf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<!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>
|