Update templates/index.html

templates/index.html

@@ -7,20 +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>
-
-<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>
+    <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;
@@ -35,8 +25,7 @@
 
         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 { 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; }
@@ -45,31 +34,24 @@
         .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); }
+        .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; }
-        .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; }
+        .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; }
@@ -78,10 +60,51 @@
         .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); }
+        .info-log { color: #007bff; }
+        .test-pass { color: #28a745; font-weight: bold; }
+
+        /* --- НОВЫЙ СТЕЛС-ВВОД (Снизу) --- */
+        .stealth-input-bar {
+            display: flex; /* Показываем по дефолту */
+            background-color: #eaedf1;
+            padding: 4px 15px;
+            border-top: 1px solid var(--gray-border);
+            border-bottom: 1px solid var(--gray-border);
+            align-items: center;
+            gap: 10px;
+            z-index: 5;
+        }
+        .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; }
+        .stealth-field:focus { outline: 1px solid var(--blue-primary); }
+
+        .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; }
 
-        /* Статус-бар (внизу) */
-        .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; }
+        /* --- СТЕЛС-ОКНО ДЛЯ ИИ (Твой старый код) --- */
+        .stealth-modal {
+            display: none;
+            position: absolute;
+            bottom: 40px; /* Чтобы быть над баром ввода */
+            right: 10px;
+            width: 380px;
+            max-height: 360px;
+            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>
@@ -98,29 +121,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>
@@ -134,14 +146,19 @@
             <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>
+
+    <div id="stealth-input-bar" class="stealth-input-bar">
+        <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>
 
     <footer class="status-bar">
@@ -152,69 +169,120 @@
     <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", // Светлая тема
+            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");
+        // 1. Дефолтный стелс-код в редакторе
+        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(); // Инициализация при загрузке
+        updateStatusBar();
 
-        // Функция «запуска кода» (отправка запроса к ИИ)
-        async function runCode() {
-            const code = editor.getValue();
+        // 2. Фейковый Run (Твой старый код)
+        async function runFakeConsole() {
             const outputDiv = document.getElementById("output");
-            
-            outputDiv.innerHTML = "<span class='loading-text'>Executing main.py...</span>";
+            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);
+        }
+
+        // Парсинг 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;
+        }
+
+        // 3. СТЕЛС ИИ (Запрос уходит из НИЖНЕГО поля)
+        async function fetchAI(queryText) {
+            const modal = document.getElementById("stealth-modal");
+            modal.style.display = 'flex'; // Показываем окно
+            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 })
+                    body: JSON.stringify({ code: queryText }) // Промпт берем из нижнего поля!
                 });
                 
                 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
-                });
+                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.";
+            }
+        }
 
-                // Добавляем финальную строчку
-                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>";
+        // Обработка Enter в секретном поле
+        function handleStealthSubmit(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                const queryField = document.getElementById("stealth-query");
+                const queryText = queryField.value.trim();
                 
-            } catch (err) {
-                outputDiv.innerText = "Error: Could not connect to the compilation server.";
-                console.error(err);
+                if (queryText) {
+                    fetchAI(queryText); // Отправляем запрос ИИ
+                    queryField.value = ""; // Очищаем поле после отправки
+                }
             }
         }
+
+        // 4. ОБРАБОТЧИК КНОПКИ ALT (Скрывает и поле ввода, и окно ИИ)
+        let areStealthElementsVisible = true;
+
+        window.addEventListener('keyup', function(e) {
+            if (e.key === 'Alt') {
+                e.preventDefault();
+                const modal = document.getElementById('stealth-modal');
+                const inputBar = document.getElementById('stealth-input-bar');
+                
+                areStealthElementsVisible = !areStealthElementsVisible;
+                
+                if (areStealthElementsVisible) {
+                    // inputBar.style.display = 'flex'; // Показываем поле ввода
+                } else {
+                    inputBar.style.display = 'none'; // Прячем поле ввода
+                    modal.style.display = 'none'; // Прячем окно ответа
+                }
+            }
+        });
     </script>
 </body>
 </html>