Update templates/index2.html

templates/index2.html

@@ -7,30 +7,10 @@
     <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>
+    <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;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        color: #2c3e50;
-    }
-    .output-body h1, .output-body h2, .output-body h3 { color: #007bff; margin-top: 20px; }
-    .output-body code { background: #f0f0f0; padding: 2px 4px; border-radius: 4px; font-family: monospace; }
-    .katex-display {
-        padding: 10px 0;
-        margin: 10px 0;
-        overflow-x: auto;
-        overflow-y: hidden;
-    }
-    hr.process-divider {
-        border: 0;
-        border-top: 2px solid #eaedf1;
-        margin: 20px 0 10px 0;
-    }
-</style>
     <style>
         :root {
             --blue-primary: #007bff;
@@ -57,8 +37,7 @@
         .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; }
@@ -70,7 +49,7 @@
         .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; }
+        .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; }
 
@@ -81,10 +60,40 @@
         
         .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); }
+        .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; }
+        .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>
@@ -101,29 +110,18 @@
     <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>
+                <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-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>
@@ -137,14 +135,14 @@
             <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 id="stealth-modal" class="stealth-modal"></div>
     </div>
 
     <footer class="status-bar">
@@ -164,7 +162,8 @@
             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");
+        // Дефолтный стартовый код
+        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();
@@ -174,14 +173,32 @@
         editor.on('cursorActivity', updateStatusBar);
         updateStatusBar();
 
-        /**
-         * Защищает блоки с математическими формулами от обработки Markdown-парсером.
-         * Заменяет формулы на уникальные плейсхолдеры, а после парсинга восстанавливает их.
-         */
+        // 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);
@@ -189,34 +206,24 @@
             };
 
             let text = rawText;
-
-            // 1. Защищаем блочные формулы $$...$$  (многострочные)
             text = text.replace(/\$\$([\s\S]*?)\$\$/g, protect);
-
-            // 2. Защищаем блочные формулы \[...\]
             text = text.replace(/\\\[([\s\S]*?)\\\]/g, protect);
-
-            // 3. Защищаем инлайновые формулы \(...\)
             text = text.replace(/\\\([\s\S]*?\\\)/g, protect);
-
-            // 4. Защищаем инлайновые формулы $...$  (не многострочные)
             text = text.replace(/\$([^\$\n]+?)\$/g, protect);
 
-            // 5. Парсим Markdown — теперь он не видит LaTeX
             marked.setOptions({ breaks: true, gfm: true });
             let html = marked.parse(text);
-
-            // 6. Восстанавливаем формулы обратно в HTML
             html = html.replace(/%%MATH_BLOCK_(\d+)%%/g, (_, idx) => mathBlocks[parseInt(idx)]);
-
             return html;
         }
 
-        async function runCode() {
-            const code = editor.getValue();
-            const outputDiv = document.getElementById("output");
-            
-            outputDiv.innerHTML = "<span class='loading-text'>Executing main.py...</span>";
+        // 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', {
@@ -228,11 +235,8 @@
                 const data = await response.json();
                 
                 if (data.output) {
-                    // Рендерим Markdown с защитой формул
-                    outputDiv.innerHTML = renderOutput(data.output);
-
-                    // Запускаем KaTeX — теперь формулы уже восстановлены в DOM
-                    renderMathInElement(outputDiv, {
+                    modal.innerHTML = renderOutput(data.output);
+                    renderMathInElement(modal, {
                         delimiters: [
                             { left: '$$',  right: '$$',  display: true  },
                             { left: '$',   right: '$',   display: false },
@@ -242,21 +246,39 @@
                         throwOnError: false,
                         ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"]
                     });
-
                 } else if (data.error) {
-                    outputDiv.innerHTML = `<span style="color: #dc3545;">${data.error}</span>`;
+                    modal.innerHTML = `<span style="color: red;">${data.error}</span>`;
                 }
-
-                outputDiv.innerHTML += `
-                    <hr class="process-divider">
-                    <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 server.";
-                console.error(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>
+</html>