Spaces:

pythononlinegcc
/

onlinepython

Running

App Files Files Community

pythononlinegcc commited on 16 days ago

Commit

e702980

verified ·

1 Parent(s): 638c6d5

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +220 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,220 @@

+<!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>
+    /* Немного подправим стили вывода, чтобы формулы и списки не разъезжались */
+    .output-body {
+        line-height: 1.6;
+    }
+    .output-body p { margin: 8px 0; }
+    .output-body h3 { font-size: 1.1em; margin: 15px 0 5px 0; color: #007bff; }
+    .katex-display { margin: 10px 0; overflow-x: auto; overflow-y: hidden; }
+</style>
+    <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; }
+        .btn-add-file { color: var(--text-muted); padding: 5px; cursor: pointer; }
+        .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; }
+        /* Редактор (слева) */
+        .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; }
+        .loading-text { color: var(--text-muted); }
+        /* Статус-бар (внизу) */
+        .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; }
+    </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>
+            <i class="fa-solid fa-plus btn-add-file"></i>
+        </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>
+                    <button class="toolbar-btn"><i class="fa-solid fa-arrow-right-from-bracket"></i></button>
+                </div>
+                <button class="toolbar-btn" style="color: black;"><i class="fa-solid fa-plus-circle"></i> Install Module</button>
+            </div>
+            <div class="toolbar-right">
+                <button onclick="runCode()" class="toolbar-btn btn-run"><i class="fa-solid fa-play"></i> Run</button>
+                <button class="toolbar-btn"><i class="fa-solid fa-share-nodes"></i> Share</button>
+                <div class="input-group">
+                    <input type="text" placeholder="Command Line Arguments">
+                    <i class="fa-solid fa-paperclip"></i>
+                </div>
+                <div class="toolbar-group">
+                    <button class="toolbar-btn"><i class="fa-solid fa-user-circle"></i></button>
+                    <button class="toolbar-btn"><i class="fa-solid fa-moon"></i></button>
+                    <button class="toolbar-btn"><i class="fa-solid fa-cog"></i></button>
+                    <button class="toolbar-btn"><i class="fa-solid fa-life-ring"></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>
+                <i class="fa-solid fa-search sidebar-icon"></i>
+                <i class="fa-solid fa-code-merge 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>
+    <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 sum(a, b):\n    return (a + b)\n\na = int(input('Enter 1st number: '))\nb = int(input('Enter 2nd number: '))\n\nprint(f'Sum of {a} and {b} is {sum(a, b)}')\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(); // Инициализация при загрузке
+        // Функция «запуска кода» (отправка запроса к ИИ)
+        async function runCode() {
+            const code = editor.getValue();
+            const outputDiv = document.getElementById("output");
+            outputDiv.innerHTML = "<span class='loading-text'>Executing main.py...</span>";
+            try {
+                const response = await fetch('/run', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ code: code })
+                });
+                const data = await response.json();
+                // 1. Превращаем Markdown в HTML
+                let formattedHTML = marked.parse(data.output);
+                // 2. Вставляем в блок вывода
+                outputDiv.innerHTML = formattedHTML;
+                // 3. Запускаем рендер формул KaTeX
+                renderMathInElement(outputDiv, {
+                    delimiters: [
+                        {left: '$$', right: '$$', display: true},
+                        {left: '$', right: '$', display: false},
+                        {left: '\\(', right: '\\)', display: false},
+                        {left: '\\[', right: '\\]', display: true}
+                    ],
+                    throwOnError : false
+                });
+                // Добавляем финальную строчку
+                outputDiv.innerHTML += "<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>";
+            } catch (err) {
+                outputDiv.innerText = "Error: Could not connect to the compilation server.";
+                console.error(err);
+            }
+        }
+    </script>
+</body>
+</html>