Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Online Python - IDE, Editor, Compiler, Interpreter</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"> | |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js"></script> | |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <style> | |
| :root { | |
| --blue-primary: #007bff; | |
| --blue-hover: #0056b3; | |
| --green-primary: #28a745; | |
| --green-hover: #218838; | |
| --gray-bg: #f8f9fa; | |
| --gray-border: #dee2e6; | |
| --text-dark: #343a40; | |
| --text-muted: #6c757d; | |
| } | |
| body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; background-color: var(--gray-bg); color: var(--text-dark); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } | |
| .header { background-color: var(--blue-primary); color: white; display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-bottom: 1px solid rgba(0,0,0,.1); } | |
| .header-left { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 1.1em; } | |
| .header-left img { height: 24px; } | |
| .header-right { display: flex; align-items: center; gap: 10px; } | |
| .btn-learn { background-color: white; color: var(--blue-primary); border: 1px solid white; padding: 6px 12px; font-size: 0.9em; font-weight: bold; border-radius: 4px; cursor: pointer; text-decoration: none; } | |
| .btn-learn:hover { background-color: #f1f1f1; } | |
| .btn-try-new { background-color: var(--green-primary); color: white; border: none; padding: 6px 12px; font-size: 0.9em; font-weight: bold; border-radius: 4px; cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 5px; } | |
| .btn-try-new:hover { background-color: var(--green-hover); } | |
| .toolbar-wrapper { display: flex; flex-direction: column; background: #eaedf1; border-bottom: 1px solid var(--gray-border); } | |
| .file-tabs { display: flex; align-items: center; background: #e2e6ea; padding: 5px 10px 0 10px; border-bottom: 1px solid var(--gray-border); } | |
| .file-tab { padding: 8px 15px; background: white; border: 1px solid var(--gray-border); border-bottom: 1px solid white; border-radius: 4px 4px 0 0; font-family: monospace; font-size: 0.9em; cursor: pointer; margin-right: 5px; position: relative; bottom: -1px; } | |
| .toolbar-core { display: flex; justify-content: space-between; align-items: center; padding: 8px 15px; background-color: #f1f3f5; border-bottom: 1px solid var(--gray-border); } | |
| .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 10px; } | |
| .toolbar-btn { background: white; color: var(--text-muted); border: 1px solid var(--gray-border); border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 0.9em; } | |
| .toolbar-btn:hover { color: var(--blue-primary); background-color: #f8f9fa; } | |
| .btn-run { background-color: var(--green-primary); color: white; font-weight: bold; display: flex; align-items: center; gap: 5px; } | |
| .btn-run:hover { background-color: var(--green-hover); } | |
| .toolbar-group { display: flex; gap: 5px; } | |
| .input-group { position: relative; } | |
| .input-group input { border: 1px solid var(--gray-border); border-radius: 4px; padding: 6px 10px; font-size: 0.9em; width: 200px; } | |
| .input-group i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; } | |
| .content-wrapper { flex: 1; display: flex; overflow: hidden; position: relative; } | |
| .editor-pane { flex: 1; border-right: 2px solid #ddd; display: flex; flex-direction: column; } | |
| .CodeMirror { flex: 1; height: 100%; font-size: 14px; line-height: 1.4; border: none; } | |
| .output-pane { flex: 1; display: flex; } | |
| .output-sidebar { width: 40px; background-color: #f1f3f5; border-right: 1px solid var(--gray-border); display: flex; flex-direction: column; align-items: center; padding-top: 10px; gap: 15px; } | |
| .sidebar-icon { color: var(--text-muted); cursor: pointer; font-size: 1.1em; } | |
| .sidebar-icon:hover, .sidebar-icon.active { color: var(--blue-primary); } | |
| .output-main { flex: 1; display: flex; flex-direction: column; background: white; } | |
| .output-header-pane { border-bottom: 1px solid var(--gray-border); padding: 5px 15px; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; font-weight: bold; background: #f8f9fa; } | |
| /* Стили основной консоли */ | |
| .output-body { flex: 1; padding: 15px; white-space: pre-wrap; font-family: 'Courier New', Courier, monospace; overflow-y: auto; color: #333; font-size: 14px; } | |
| .test-pass { color: #28a745; font-weight: bold; } | |
| .info-log { color: #007bff; } | |
| .status-bar { background-color: #eaedf1; color: var(--text-muted); font-size: 0.8em; padding: 4px 15px; border-top: 1px solid var(--gray-border); display: flex; justify-content: flex-start; gap: 15px; z-index: 10; } | |
| /* --- СТЕЛС-ОКНО ДЛЯ ИИ --- */ | |
| .stealth-modal { | |
| display: none; /* Скрыто по умолчанию */ | |
| position: absolute; | |
| bottom: 10px; | |
| right: 10px; | |
| width: 380px; | |
| max-height: 400px; | |
| background: rgba(255, 255, 255, 0.97); | |
| border: 1px solid #ccc; | |
| box-shadow: 0px 4px 15px rgba(0,0,0,0.2); | |
| border-radius: 4px; | |
| z-index: 9999; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| padding: 12px; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| font-size: 13px; | |
| color: #2c3e50; | |
| } | |
| .stealth-modal h1, .stealth-modal h2, .stealth-modal h3 { font-size: 1.1em; color: #007bff; margin: 10px 0 5px 0; } | |
| .stealth-modal p { margin: 5px 0; } | |
| .stealth-modal code { background: #f0f0f0; padding: 2px 4px; border-radius: 3px; font-family: monospace; } | |
| .stealth-modal .katex-display { margin: 5px 0; overflow-x: auto; overflow-y: hidden; } | |
| .loading-stealth { color: #d35400; font-weight: bold; font-family: monospace; } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-left"> | |
| <i class="fa-brands fa-python"></i> <span>ONLINE PYTHON</span> | |
| </div> | |
| <div class="header-right"> | |
| <a href="#" class="btn-learn">Learn Python</a> | |
| <a href="#" class="btn-try-new">Try New IDE <i class="fa-solid fa-arrow-right-long"></i></a> | |
| </div> | |
| </header> | |
| <div class="toolbar-wrapper"> | |
| <div class="file-tabs"> | |
| <div class="file-tab">main.py</div> | |
| </div> | |
| <div class="toolbar-core"> | |
| <div class="toolbar-left"> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-btn"><i class="fa-solid fa-arrow-rotate-left"></i></button> | |
| <button class="toolbar-btn"><i class="fa-solid fa-arrow-rotate-right"></i></button> | |
| </div> | |
| </div> | |
| <div class="toolbar-right"> | |
| <button onclick="runFakeConsole()" class="toolbar-btn btn-run"><i class="fa-solid fa-play"></i> Run</button> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-btn"><i class="fa-solid fa-cog"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content-wrapper"> | |
| <div class="editor-pane"> | |
| <textarea id="editor"></textarea> | |
| </div> | |
| <div class="output-pane"> | |
| <div class="output-sidebar"> | |
| <i class="fa-solid fa-terminal sidebar-icon active"></i> | |
| <i class="fa-solid fa-folder-open sidebar-icon"></i> | |
| </div> | |
| <div class="output-main"> | |
| <div class="output-header-pane">Terminal / Output</div> | |
| <div id="output" class="output-body">Process finished with exit code 0</div> | |
| </div> | |
| </div> | |
| <div id="stealth-modal" class="stealth-modal"></div> | |
| </div> | |
| <footer class="status-bar"> | |
| <span>Ln: <span id="line-count">1</span>, Col: <span id="col-count">1</span></span> | |
| </footer> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script> | |
| <script> | |
| var editor = CodeMirror.fromTextArea(document.getElementById("editor"), { | |
| mode: "python", | |
| theme: "default", | |
| lineNumbers: true, | |
| indentUnit: 4, | |
| matchBrackets: true, | |
| autofocus: true | |
| }); | |
| // Дефолтный стартовый код | |
| editor.setValue("# Online Python - IDE, Editor, Compiler, Interpreter\n\ndef solve_olympiad_task():\n # Решение графов с помощью Дейкстры\n pass\n\nif __name__ == '__main__':\n solve_olympiad_task()\n"); | |
| function updateStatusBar() { | |
| var cursor = editor.getCursor(); | |
| document.getElementById('line-count').innerText = cursor.line + 1; | |
| document.getElementById('col-count').innerText = cursor.ch + 1; | |
| } | |
| editor.on('cursorActivity', updateStatusBar); | |
| updateStatusBar(); | |
| // 1. ЛОЖНАЯ КОНСОЛЬ (Вызывается по кнопке RUN) | |
| async function runFakeConsole() { | |
| const outputDiv = document.getElementById("output"); | |
| outputDiv.innerHTML = "<span class='info-log'>Executing main.py...</span>\n"; | |
| // Имитация задержки компиляции | |
| setTimeout(() => { | |
| outputDiv.innerHTML += "<span class='info-log'>[info] Compiling with PyPy 3.10...</span>\n"; | |
| outputDiv.innerHTML += "<span class='info-log'>[info] Compilation successful.</span>\n\n"; | |
| }, 600); | |
| // Имитация прохождения тестов | |
| setTimeout(() => { | |
| outputDiv.innerHTML += "Running Test Case 1... <span class='test-pass'>Passed</span> [0.012s, 12MB]\n"; | |
| outputDiv.innerHTML += "Running Test Case 2... <span class='test-pass'>Passed</span> [0.015s, 12MB]\n"; | |
| outputDiv.innerHTML += "Running Test Case 3... <span class='test-pass'>Passed</span> [0.041s, 14MB]\n"; | |
| outputDiv.innerHTML += "Running Test Case 4... <span class='test-pass'>Passed</span> [0.105s, 18MB]\n\n"; | |
| outputDiv.innerHTML += "Output:\n492113\n\n"; | |
| outputDiv.innerHTML += "<hr style='border:0; border-top:1px solid #eee; margin: 10px 0;'>"; | |
| outputDiv.innerHTML += "<span style='color: #6c757d; font-size: 0.9em;'>Process finished with exit code 0</span>"; | |
| }, 1800); | |
| } | |
| // Парсинг Markdown и LaTeX (Твой старый рабочий код) | |
| function renderOutput(rawText) { | |
| const mathBlocks = []; | |
| const protect = (match) => { | |
| const id = mathBlocks.length; | |
| mathBlocks.push(match); | |
| return `%%MATH_BLOCK_${id}%%`; | |
| }; | |
| let text = rawText; | |
| text = text.replace(/\$\$([\s\S]*?)\$\$/g, protect); | |
| text = text.replace(/\\\[([\s\S]*?)\\\]/g, protect); | |
| text = text.replace(/\\\([\s\S]*?\\\)/g, protect); | |
| text = text.replace(/\$([^\$\n]+?)\$/g, protect); | |
| marked.setOptions({ breaks: true, gfm: true }); | |
| let html = marked.parse(text); | |
| html = html.replace(/%%MATH_BLOCK_(\d+)%%/g, (_, idx) => mathBlocks[parseInt(idx)]); | |
| return html; | |
| } | |
| // 2. СТЕЛС ИИ (Вызывается по ALT) | |
| let isStealthVisible = false; | |
| let lastFetchedCode = ""; | |
| async function fetchAI(code) { | |
| const modal = document.getElementById("stealth-modal"); | |
| modal.innerHTML = "<span class='loading-stealth'>> decrypting stream...</span>"; | |
| try { | |
| const response = await fetch('/run', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ code: code }) | |
| }); | |
| const data = await response.json(); | |
| if (data.output) { | |
| modal.innerHTML = renderOutput(data.output); | |
| renderMathInElement(modal, { | |
| delimiters: [ | |
| { left: '$$', right: '$$', display: true }, | |
| { left: '$', right: '$', display: false }, | |
| { left: '\\(', right: '\\)', display: false }, | |
| { left: '\\[', right: '\\]', display: true } | |
| ], | |
| throwOnError: false, | |
| ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"] | |
| }); | |
| } else if (data.error) { | |
| modal.innerHTML = `<span style="color: red;">${data.error}</span>`; | |
| } | |
| } catch (err) { | |
| modal.innerText = "Connection lost."; | |
| } | |
| } | |
| // 3. ОБРАБОТЧИК КНОПКИ ALT | |
| window.addEventListener('keyup', function(e) { | |
| // Если нажата клавиша Alt (код 'Alt') | |
| if (e.key === 'Alt') { | |
| e.preventDefault(); | |
| const modal = document.getElementById('stealth-modal'); | |
| // Переключаем видимость | |
| isStealthVisible = !isStealthVisible; | |
| if (isStealthVisible) { | |
| modal.style.display = 'flex'; // Показываем окошко | |
| const currentCode = editor.getValue(); | |
| // Запрашиваем у ИИ ответ ТОЛЬКО если текст поменялся с прошлого раза, | |
| // чтобы не ждать загрузку заново, если ты просто спрятал и открыл окно. | |
| if (currentCode !== lastFetchedCode) { | |
| lastFetchedCode = currentCode; | |
| fetchAI(currentCode); | |
| } | |
| } else { | |
| modal.style.display = 'none'; // Прячем окошко | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |