File size: 14,880 Bytes
ecfa981 |
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 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 |
<!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>
/* Custom styles that can't be easily done with Tailwind */
.code-editor {
font-family: 'Fira Code', 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
}
.output-container {
max-height: 300px;
overflow-y: auto;
}
/* Custom scrollbar */
.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;
}
/* Loading animation */
@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 -->
<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>
<!-- Main Content -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Code Editor Section -->
<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> <!-- Spacer for alignment -->
</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>
<!-- Output Section -->
<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>
<!-- Features Section -->
<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 -->
<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');
// Sample code snippets
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)])' }
];
// Run code button click handler
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;
}
// Show loading state
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 {
// Simulate API call with timeout
const startTime = performance.now();
// In a real implementation, you would call an actual API here
// For this demo, we'll simulate execution with a timeout
const simulatedResult = await simulateCodeExecution(code);
const endTime = performance.now();
const elapsedTime = (endTime - startTime).toFixed(2);
// Display results
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';
}
});
// Clear button click handler
clearBtn.addEventListener('click', function() {
codeEditor.value = '';
outputContainer.innerHTML = '<div class="text-gray-500">Output will appear here after execution...</div>';
executionTime.textContent = 'Ready';
});
// Copy output button click handler
copyOutputBtn.addEventListener('click', function() {
const range = document.createRange();
range.selectNode(outputContainer);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
// Show copied feedback
const originalText = copyOutputBtn.innerHTML;
copyOutputBtn.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
setTimeout(() => {
copyOutputBtn.innerHTML = originalText;
}, 2000);
});
// Function to simulate code execution
function simulateCodeExecution(code) {
return new Promise((resolve, reject) => {
setTimeout(() => {
try {
// This is a simulation - in a real app, you'd call an API
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');
}
// Simulate different outputs based on code content
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 {
// Default simulated output
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); // Simulate network delay
});
}
// Add example selector (would be more elaborate in a real implementation)
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> |