Spaces:

pythononlinegcc
/

onlinepython

Running

App Files Files Community

pythononlinegcc commited on 14 days ago

Commit

e4527a0

verified ·

1 Parent(s): 86c7a70

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +63 -57

templates/index.html CHANGED Viewed

@@ -63,48 +63,47 @@
         .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; }
-        /* --- СТЕЛС-ОКНО ДЛЯ ИИ (Твой старый код) --- */
-        .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>
@@ -152,13 +151,14 @@
                 <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">
@@ -178,7 +178,7 @@
             autofocus: true
         });
-        // 1. Дефолтный стелс-код в редакторе
         editor.setValue("\nprint(\"Hello, World!\")\n");
         function updateStatusBar() {
@@ -189,7 +189,7 @@
         editor.on('cursorActivity', updateStatusBar);
         updateStatusBar();
-        // 2. Фейковый Run (Твой старый код)
         async function runFakeConsole() {
             const outputDiv = document.getElementById("output");
             outputDiv.innerHTML = "<span class='info-log'>Executing main.py...</span>\n";
@@ -198,7 +198,7 @@
             }, 600);
         }
-        // Парсинг Markdown и LaTeX (Твой старый рабочий код)
         function renderOutput(rawText) {
             const mathBlocks = [];
             const protect = (match) => {
@@ -215,24 +215,26 @@
             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: queryText }) // Промпт берем из нижнего поля!
                 });
                 const data = await response.json();
                 if (data.output) {
-                    modal.innerHTML = renderOutput(data.output);
-                    renderMathInElement(modal, {
                         delimiters: [
                             { left: '$$',  right: '$$',  display: true  },
                             { left: '$',   right: '$',   display: false },
@@ -243,14 +245,14 @@
                         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.";
             }
         }
-        // Обработка Enter в секретном поле
         function handleStealthSubmit(e) {
             if (e.key === 'Enter') {
                 e.preventDefault();
@@ -258,28 +260,32 @@
                 const queryText = queryField.value.trim();
                 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'; // Прячем окно ответа
                 }
             }
         });

         .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>
                 <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">
             autofocus: true
         });
+        // Дефолтный код
         editor.setValue("\nprint(\"Hello, World!\")\n");
         function updateStatusBar() {
         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";
             }, 600);
         }
+        // Парсинг
         function renderOutput(rawText) {
             const mathBlocks = [];
             const protect = (match) => {
             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 },
                         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 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 = '';
                 }
             }
         });