File size: 5,684 Bytes
92ce715 fe0a7c5 92ce715 857e030 fe0a7c5 857e030 fe0a7c5 41ab270 92ce715 |
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 |
<!DOCTYPE html>
<html lang="en" class="undefined">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PythonSandbox Editor</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
undefined: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
}
}
}
}
</script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Space Grotesk', sans-serif;
}
#editor-container {
height: 500px;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
overflow: hidden;
}
.btn-run {
background-color: rgba(14, 165, 233, 1);
color: white;
transition: all 0.2s ease;
}
.btn-run:hover {
background-color: rgba(2, 132, 199, 1);
transform: translateY(-1px);
}
</style>
</head>
<body class="bg-undefined-50 min-h-screen">
<!-- Navigation -->
<nav class="bg-white bg-opacity-80 backdrop-blur-md shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="box" class="text-undefined-600 h-8 w-8"></i>
<span class="ml-2 text-xl font-bold text-undefined-700">PythonSandbox Pyramids</span>
</div>
</div>
<div class="flex items-center gap-4">
<a href="/" class="text-gray-500 hover:text-undefined-700 flex items-center gap-1">
<i data-feather="arrow-left" class="h-4 w-4"></i> Back to Home
</a>
<a href="telegram-bot-maker.html" class="text-gray-500 hover:text-undefined-700 flex items-center gap-1">
<i data-feather="package" class="h-4 w-4"></i> Bot Maker
</a>
<a href="https://t.me/your_bot_username" target="_blank" class="text-gray-500 hover:text-undefined-700 flex items-center gap-1">
<i data-feather="send" class="h-4 w-4"></i> Telegram Bot
</a>
</div>
</div>
</div>
</nav>
<!-- Editor Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-gray-800">Python Code Editor</h2>
<div class="flex gap-2">
<button class="btn-run px-4 py-2 rounded-md text-sm font-medium flex items-center gap-1">
<i data-feather="play" class="h-4 w-4"></i> Run Code
</button>
<button class="border border-gray-300 px-4 py-2 rounded-md text-sm font-medium flex items-center gap-1">
<i data-feather="save" class="h-4 w-4"></i> Save
</button>
</div>
</div>
<div id="editor-container"></div>
<div class="mt-4">
<h3 class="text-sm font-medium text-gray-700 mb-2">Output</h3>
<div class="bg-gray-50 p-4 rounded-md min-h-32 font-mono text-sm" id="output-container">
<p class="text-gray-500">Your code output will appear here...</p>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize Monaco Editor
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs' }});
require(['vs/editor/editor.main'], function() {
const editor = monaco.editor.create(document.getElementById('editor-container'), {
value: '# Welcome to PythonSandbox Pyramids!\n# Write your Python code here\n\nprint("Hello, World!")\n',
language: 'python',
theme: 'vs-light',
automaticLayout: true,
minimap: { enabled: false },
fontSize: 14,
lineNumbers: 'on',
scrollBeyondLastLine: false,
roundedSelection: true
});
// Store editor instance globally for demo purposes
window.editor = editor;
});
// Feather icons
feather.replace();
</script>
</body>
</html> |