Khalel81765/pythonsandbox-pyramids
0
1<!DOCTYPE html>2<html lang="en" class="undefined">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>PythonSandbox Editor</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 tailwind.config = {11 theme: {12 extend: {13 colors: {14 undefined: {15 50: '#f0f9ff',16 100: '#e0f2fe',17 200: '#bae6fd',18 300: '#7dd3fc',19 400: '#38bdf8',20 500: '#0ea5e9',21 600: '#0284c7',22 700: '#0369a1',23 800: '#075985',24 900: '#0c4a6e',25 }26 }27 }28 }29 }30 </script>31 <script src="https://unpkg.com/feather-icons"></script>32 <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>33 <style>34 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');35 body {36 font-family: 'Space Grotesk', sans-serif;37 }38 #editor-container {39 height: 500px;40 border: 1px solid #e5e7eb;41 border-radius: 0.5rem;42 overflow: hidden;43 }44 .btn-run {45 background-color: rgba(14, 165, 233, 1);46 color: white;47 transition: all 0.2s ease;48 }49 .btn-run:hover {50 background-color: rgba(2, 132, 199, 1);51 transform: translateY(-1px);52 }53 </style>54</head>55<body class="bg-undefined-50 min-h-screen">56 <!-- Navigation -->57 <nav class="bg-white bg-opacity-80 backdrop-blur-md shadow-sm sticky top-0 z-50">58 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">59 <div class="flex items-center justify-between h-16">60 <div class="flex items-center">61 <div class="flex-shrink-0 flex items-center">62 <i data-feather="box" class="text-undefined-600 h-8 w-8"></i>63 <span class="ml-2 text-xl font-bold text-undefined-700">PythonSandbox Pyramids</span>64 </div>65 </div>66 <div class="flex items-center gap-4">67 <a href="/" class="text-gray-500 hover:text-undefined-700 flex items-center gap-1">68 <i data-feather="arrow-left" class="h-4 w-4"></i> Back to Home69 </a>70 <a href="telegram-bot-maker.html" class="text-gray-500 hover:text-undefined-700 flex items-center gap-1">71 <i data-feather="package" class="h-4 w-4"></i> Bot Maker72 </a>73 <a href="https://t.me/your_bot_username" target="_blank" class="text-gray-500 hover:text-undefined-700 flex items-center gap-1">74 <i data-feather="send" class="h-4 w-4"></i> Telegram Bot75 </a>76</div>77 </div>78 </div>79 </nav>80 81 <!-- Editor Section -->82 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">83 <div class="bg-white rounded-xl shadow-lg overflow-hidden">84 <div class="p-6">85 <div class="flex justify-between items-center mb-4">86 <h2 class="text-xl font-bold text-gray-800">Python Code Editor</h2>87 <div class="flex gap-2">88 <button class="btn-run px-4 py-2 rounded-md text-sm font-medium flex items-center gap-1">89 <i data-feather="play" class="h-4 w-4"></i> Run Code90 </button>91 <button class="border border-gray-300 px-4 py-2 rounded-md text-sm font-medium flex items-center gap-1">92 <i data-feather="save" class="h-4 w-4"></i> Save93 </button>94 </div>95 </div>96 97 <div id="editor-container"></div>98 99 <div class="mt-4">100 <h3 class="text-sm font-medium text-gray-700 mb-2">Output</h3>101 <div class="bg-gray-50 p-4 rounded-md min-h-32 font-mono text-sm" id="output-container">102 <p class="text-gray-500">Your code output will appear here...</p>103 </div>104 </div>105 </div>106 </div>107 </div>108 109 <script>110 // Initialize Monaco Editor111 require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs' }});112 require(['vs/editor/editor.main'], function() {113 const editor = monaco.editor.create(document.getElementById('editor-container'), {114 value: '# Welcome to PythonSandbox Pyramids!\n# Write your Python code here\n\nprint("Hello, World!")\n',115 language: 'python',116 theme: 'vs-light',117 automaticLayout: true,118 minimap: { enabled: false },119 fontSize: 14,120 lineNumbers: 'on',121 scrollBeyondLastLine: false,122 roundedSelection: true123 });124 125 // Store editor instance globally for demo purposes126 window.editor = editor;127 });128 129 // Feather icons130 feather.replace();131 </script>132</body>133</html>