Spaces:

pythononlinegcc
/

onlinepython

Running

File size: 15,377 Bytes

<!DOCTYPE html>
<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); z-index: 10; }
        .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); z-index: 9; }
        .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; }

        .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; }
        .info-log { color: #007bff; }
        .test-pass { color: #28a745; font-weight: bold; }

        /* --- НОВЫЙ СТЕЛС-КОНТЕЙНЕР (Ввод + Вывод) --- */
        .stealth-container {
            display: flex;
            flex-direction: column;
            background-color: #eaedf1;
            border-top: 1px solid var(--gray-border);
            z-index: 5;
        }

        .stealth-input-row {
            display: flex;
            padding: 4px 15px;
            align-items: center;
            gap: 10px;
        }
        
        .stealth-label { font-size: 12px; color: var(--text-muted); font-family: monospace; white-space: nowrap; }
        .stealth-field { flex: 1; border: 1px solid var(--gray-border); border-radius: 3px; padding: 4px 8px; font-size: 13px; font-family: 'Segoe UI', sans-serif; background: white; }
        .stealth-field:focus { outline: 1px solid var(--blue-primary); }

        /* Блок с ответом, который появляется под вводом */
        .stealth-result {
            display: none; /* Скрыто до отправки запроса */
            padding: 10px 15px;
            background-color: white;
            border-top: 1px dashed var(--gray-border);
            max-height: 35vh; /* Занимает не больше трети экрана */
            overflow-y: auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 13px;
            color: #2c3e50;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }

        .stealth-result h1, .stealth-result h2, .stealth-result h3 { font-size: 1.1em; color: #007bff; margin: 10px 0 5px 0; }
        .stealth-result p { margin: 5px 0; }
        .stealth-result code { background: #f0f0f0; padding: 2px 4px; border-radius: 3px; font-family: monospace; }
        .stealth-result .katex-display { margin: 5px 0; overflow-x: auto; overflow-y: hidden; }
        .loading-stealth { color: #d35400; font-weight: bold; font-family: monospace; }

        .status-bar { background-color: #eaedf1; color: var(--text-muted); font-size: 0.8em; padding: 4px 15px; z-index: 4; display: flex; justify-content: flex-start; gap: 15px; border-top: 1px solid var(--gray-border); }
    </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>

    <div id="stealth-container" class="stealth-container">
        <div class="stealth-input-row">
            <span class="stealth-label">Search in files...</span>
            <input type="text" id="stealth-query" class="stealth-field" placeholder="Enter terms to filter project files..." onkeydown="handleStealthSubmit(event)">
        </div>
        <div id="stealth-result" class="stealth-result"></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("\nprint(\"Hello, World!\")\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();

        // Фейковый Run
        async function runFakeConsole() {
            const outputDiv = document.getElementById("output");
            outputDiv.innerHTML = "<span class='info-log'>Executing main.py...</span>\n";
            setTimeout(() => {
                outputDiv.innerHTML += "Hello, World!\n\n<hr style='border:0; border-top:1px solid #eee; margin: 10px 0;'><span style='color: #6c757d; font-size: 0.9em;'>Process finished with exit code 0</span>";
            }, 600);
        }

        // Парсинг
        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;
        }

        // Запрос к ИИ и вывод в ту же панель
        async function fetchAI(queryText) {
            const resultDiv = document.getElementById("stealth-result");
            
            // Открываем панель с результатами
            resultDiv.style.display = 'block'; 
            resultDiv.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: queryText }) 
                });
                
                const data = await response.json();
                
                if (data.output) {
                    resultDiv.innerHTML = renderOutput(data.output);
                    renderMathInElement(resultDiv, {
                        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) {
                    resultDiv.innerHTML = `<span style="color: red;">${data.error}</span>`;
                }
            } catch (err) {
                resultDiv.innerText = "Connection lost.";
            }
        }

        // Обработка Enter
        function handleStealthSubmit(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const queryField = document.getElementById("stealth-query");
                const queryText = queryField.value.trim();
                
                if (queryText) {
                    fetchAI(queryText);
                    // Очищаем поле, чтобы не палить запрос, если кто-то посмотрит
                    queryField.value = ""; 
                }
            }
        }

        // Обработчик ALT: скрывает или показывает ВЕСЬ стелс-контейнер
        let isStealthVisible = true;

        window.addEventListener('keyup', function(e) {
            if (e.key === 'Alt') {
                e.preventDefault();
                const container = document.getElementById('stealth-container');
                const resultDiv = document.getElementById('stealth-result');
                
                isStealthVisible = !isStealthVisible;
                
                if (isStealthVisible) {
                    container.style.display = 'flex';
                } else {
                    container.style.display = 'none';
                    // Прячем и очищаем блок с ответом при скрытии, 
                    // чтобы при следующем открытии он не висел открытым
                    resultDiv.style.display = 'none';
                    resultDiv.innerHTML = '';
                }
            }
        });
    </script>
</body>
</html>