|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Python Sandbox Environment</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.code-editor { |
|
|
font-family: 'Fira Code', 'Courier New', monospace; |
|
|
font-size: 14px; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.output-container { |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
|
|
|
.output-container::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
.output-container::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.output-container::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.output-container::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
.animate-pulse { |
|
|
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="mb-8 text-center"> |
|
|
<h1 class="text-4xl font-bold text-indigo-700 mb-2">Python Sandbox Environment</h1> |
|
|
<p class="text-gray-600">Write and execute Python code safely in your browser</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-gray-800 px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<span class="text-gray-300 text-sm font-mono">main.py</span> |
|
|
<div class="w-8"></div> |
|
|
</div> |
|
|
<div class="p-1 bg-gray-800"> |
|
|
<textarea id="code-editor" class="code-editor w-full h-96 bg-gray-900 text-gray-100 p-4 resize-none focus:outline-none" spellcheck="false"># Welcome to Python Sandbox! |
|
|
# Write your Python code here and click "Run Code" |
|
|
|
|
|
def greet(name): |
|
|
return f"Hello, {name}!" |
|
|
|
|
|
print(greet("World")) |
|
|
|
|
|
# Try some math: |
|
|
result = 42 * 3.14 |
|
|
print(f"The answer is {result}") |
|
|
|
|
|
# Or a simple loop: |
|
|
for i in range(5): |
|
|
print(f"Counting: {i}")</textarea> |
|
|
</div> |
|
|
<div class="bg-gray-100 px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 text-sm text-gray-600"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span>Python 3.8</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="clear-btn" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition"> |
|
|
<i class="fas fa-trash-alt mr-2"></i>Clear |
|
|
</button> |
|
|
<button id="run-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i>Run Code |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="bg-gray-800 px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-terminal text-gray-300"></i> |
|
|
<span class="text-gray-300 text-sm font-mono">Output</span> |
|
|
</div> |
|
|
<button id="copy-output-btn" class="text-gray-300 hover:text-white text-sm"> |
|
|
<i class="far fa-copy mr-1"></i>Copy |
|
|
</button> |
|
|
</div> |
|
|
<div id="output-container" class="output-container bg-gray-900 text-gray-100 p-4 h-96 font-mono whitespace-pre-wrap"> |
|
|
<div class="text-gray-500"> |
|
|
<p>Output will appear here after execution...</p> |
|
|
<p class="mt-2">Try writing some Python code and click "Run Code"!</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-100 px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 text-sm text-gray-600"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
<span>Sandboxed Environment</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span id="execution-time">Ready</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="text-indigo-600 text-2xl mb-3"> |
|
|
<i class="fas fa-lock"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Safe Execution</h3> |
|
|
<p class="text-gray-600">Your code runs in a secure sandbox environment with restricted access to system resources.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="text-indigo-600 text-2xl mb-3"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Fast Results</h3> |
|
|
<p class="text-gray-600">Get immediate feedback with our cloud-powered execution environment.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="text-indigo-600 text-2xl mb-3"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Python 3.8</h3> |
|
|
<p class="text-gray-600">Supports most Python 3.8 features and standard libraries.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-12 text-center text-gray-600 text-sm"> |
|
|
<p>This is a simulated sandbox environment. For security reasons, some system operations are restricted.</p> |
|
|
<p class="mt-2">© 2023 Python Sandbox Environment</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const codeEditor = document.getElementById('code-editor'); |
|
|
const runBtn = document.getElementById('run-btn'); |
|
|
const clearBtn = document.getElementById('clear-btn'); |
|
|
const copyOutputBtn = document.getElementById('copy-output-btn'); |
|
|
const outputContainer = document.getElementById('output-container'); |
|
|
const executionTime = document.getElementById('execution-time'); |
|
|
|
|
|
|
|
|
const codeSnippets = [ |
|
|
{ name: "Hello World", code: 'print("Hello, World!")' }, |
|
|
{ name: "Fibonacci", code: 'def fib(n):\n a, b = 0, 1\n for _ in range(n):\n print(a, end=" ")\n a, b = b, a + b\n\nfib(10)' }, |
|
|
{ name: "Factorial", code: 'def factorial(n):\n return 1 if n <= 1 else n * factorial(n-1)\n\nprint(factorial(5))' }, |
|
|
{ name: "Prime Check", code: 'def is_prime(n):\n if n <= 1:\n return False\n for i in range(2, int(n**0.5) + 1):\n if n % i == 0:\n return False\n return True\n\nprint([x for x in range(20) if is_prime(x)])' } |
|
|
]; |
|
|
|
|
|
|
|
|
runBtn.addEventListener('click', async function() { |
|
|
const code = codeEditor.value.trim(); |
|
|
|
|
|
if (!code) { |
|
|
outputContainer.innerHTML = '<div class="text-red-400">Error: No code to execute</div>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
runBtn.disabled = true; |
|
|
runBtn.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i>Running...'; |
|
|
outputContainer.innerHTML = '<div class="flex items-center text-gray-500"><i class="fas fa-spinner animate-spin mr-2"></i>Executing your code...</div>'; |
|
|
executionTime.textContent = 'Executing...'; |
|
|
|
|
|
try { |
|
|
|
|
|
const startTime = performance.now(); |
|
|
|
|
|
|
|
|
|
|
|
const simulatedResult = await simulateCodeExecution(code); |
|
|
const endTime = performance.now(); |
|
|
const elapsedTime = (endTime - startTime).toFixed(2); |
|
|
|
|
|
|
|
|
outputContainer.innerHTML = simulatedResult; |
|
|
executionTime.textContent = `Execution time: ${elapsedTime}ms`; |
|
|
} catch (error) { |
|
|
outputContainer.innerHTML = `<div class="text-red-400">Error: ${error.message}</div>`; |
|
|
executionTime.textContent = 'Error occurred'; |
|
|
} finally { |
|
|
runBtn.disabled = false; |
|
|
runBtn.innerHTML = '<i class="fas fa-play mr-2"></i>Run Code'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
clearBtn.addEventListener('click', function() { |
|
|
codeEditor.value = ''; |
|
|
outputContainer.innerHTML = '<div class="text-gray-500">Output will appear here after execution...</div>'; |
|
|
executionTime.textContent = 'Ready'; |
|
|
}); |
|
|
|
|
|
|
|
|
copyOutputBtn.addEventListener('click', function() { |
|
|
const range = document.createRange(); |
|
|
range.selectNode(outputContainer); |
|
|
window.getSelection().removeAllRanges(); |
|
|
window.getSelection().addRange(range); |
|
|
document.execCommand('copy'); |
|
|
window.getSelection().removeAllRanges(); |
|
|
|
|
|
|
|
|
const originalText = copyOutputBtn.innerHTML; |
|
|
copyOutputBtn.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!'; |
|
|
setTimeout(() => { |
|
|
copyOutputBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
function simulateCodeExecution(code) { |
|
|
return new Promise((resolve, reject) => { |
|
|
setTimeout(() => { |
|
|
try { |
|
|
|
|
|
if (code.includes('import os') || code.includes('import sys') || |
|
|
code.includes('__import__') || code.includes('eval(') || |
|
|
code.includes('exec(') || code.includes('open(')) { |
|
|
throw new Error('Restricted operation detected'); |
|
|
} |
|
|
|
|
|
|
|
|
if (code.includes('print("Hello, World!")')) { |
|
|
resolve('<div class="text-green-400">Hello, World!</div>'); |
|
|
} else if (code.includes('fib(')) { |
|
|
resolve('<div class="text-green-400">0 1 1 2 3 5 8 13 21 34</div>'); |
|
|
} else if (code.includes('factorial(')) { |
|
|
resolve('<div class="text-green-400">120</div>'); |
|
|
} else if (code.includes('is_prime(')) { |
|
|
resolve('<div class="text-green-400">[2, 3, 5, 7, 11, 13, 17, 19]</div>'); |
|
|
} else { |
|
|
|
|
|
const defaultOutput = code.split('\n') |
|
|
.filter(line => line.trim() && !line.trim().startsWith('#')) |
|
|
.map(line => `<div class="text-green-400">${line.trim()}</div>`) |
|
|
.join(''); |
|
|
|
|
|
resolve(defaultOutput || '<div class="text-green-400">Code executed successfully (simulated)</div>'); |
|
|
} |
|
|
} catch (err) { |
|
|
reject(err); |
|
|
} |
|
|
}, 1000); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
console.log('Try these example snippets:', codeSnippets); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Midwintertroll/tool-python-sandbox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
