pythonsandbox-pyramids / editor.html
Khalel81765's picture
اصنع لي بوت تليكرام صانع بوتات بلغة بايثون ، المتطلبات :اريد واجهة آدمن بسيطة ومفهومة يكون فيها اذعار دخول الأشخاص +حظر شخص معين +اذاعة للجميع +اريد واجهة مستخدم مفهومة وسهلة جدا . وأريد ان يكون فيه البوت اكثر من 50 قالب بوتات ، حين الضغط على قالب بوت معين يطلب التوكن حين اعطسة التوكن يعمل البوت
fe0a7c5 verified
<!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>