manoraga/scud_context_api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: адаптация веб-интерфейса под мобильные браузеры (responsive drawer, header, touch Optimization)

Browse Source
This commit is contained in:
manoraga
2026-08-08 14:35:23 +03:00
parent 99b32720b6
commit cda2705334
2 changed files with 44 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/styles.css
+7 -2
View File
@@ -1,4 +1,4 @@
/* Плавное (градиентное) исчезновение текста сверху при скролле */ /* Плавное исчезновение текста сверху при скролле */
.fade-scroll-top { .fade-scroll-top {
mask-image: linear-gradient(to bottom, transparent 0%, black 14px); mask-image: linear-gradient(to bottom, transparent 0%, black 14px);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14px);
@@ -8,8 +8,13 @@
.no-scrollbar::-webkit-scrollbar { .no-scrollbar::-webkit-scrollbar {
display: none; display: none;
} }
.no-scrollbar { .no-scrollbar {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
} }
/* Оптимизация под мобильный viewport (борьба со скачками клавиатуры на iOS/Android) */
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
static/index.html
+37 -37
View File
@@ -2,94 +2,94 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>SCUD Orion AI — Context Manager</title> <title>SCUD Orion AI — Context Manager</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/styles.css"> <link rel="stylesheet" href="/static/css/styles.css">
</head> </head>
<body class="bg-slate-50 text-slate-800 h-screen flex flex-col font-sans"> <body class="bg-slate-50 text-slate-800 h-screen flex flex-col font-sans overflow-hidden">
<!-- Хедер --> <!-- Хедер -->
<header class="bg-white border-b border-slate-200 px-6 py-3 flex justify-between items-center shadow-sm"> <header class="bg-white border-b border-slate-200 px-4 sm:px-6 py-2.5 sm:py-3 flex justify-between items-center shadow-sm shrink-0">
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-2.5 sm:space-x-3">
<div class="bg-indigo-600 text-white p-2 rounded-lg"> <div class="bg-indigo-600 text-white p-1.5 sm:p-2 rounded-lg">
<i class="fa-solid fa-brain text-lg"></i> <i class="fa-solid fa-brain text-base sm:text-lg"></i>
</div> </div>
<div> <div>
<h1 class="text-base font-bold leading-none text-slate-900">SCUD Orion AI</h1> <h1 class="text-sm sm:text-base font-bold leading-none text-slate-900">SCUD Orion AI</h1>
<span class="text-xs text-slate-500">Context & Task Manager</span> <span class="hidden sm:inline text-xs text-slate-500">Context & Task Manager</span>
</div> </div>
</div> </div>
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-2 sm:space-x-4">
<span class="flex items-center text-xs text-emerald-600 font-medium bg-emerald-50 px-2.5 py-1 rounded-full border border-emerald-200"> <span class="flex items-center text-[11px] sm:text-xs text-emerald-600 font-medium bg-emerald-50 px-2 sm:px-2.5 py-1 rounded-full border border-emerald-200">
<span class="h-2 w-2 rounded-full bg-emerald-500 mr-1.5"></span> API Online <span class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-emerald-500 mr-1.5"></span> API Online
</span> </span>
<button onclick="toggleDrawer()" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-3.5 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-2 transition border border-indigo-200"> <button onclick="toggleDrawer()" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-2.5 sm:px-3.5 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 sm:gap-2 transition border border-indigo-200">
<i class="fa-solid fa-list-check text-indigo-600"></i> <i class="fa-solid fa-list-check text-indigo-600"></i>
<span>Реестр задач</span> <span class="hidden sm:inline">Реестр задач</span>
<span id="task-count-badge" class="bg-indigo-600 text-white text-[10px] px-1.5 py-0.2 rounded-full">0</span> <span id="task-count-badge" class="bg-indigo-600 text-white text-[10px] px-1.5 py-0.2 rounded-full">0</span>
</button> </button>
</div> </div>
</header> </header>
<!-- Основная зона чата --> <!-- Основная зона чата -->
<main class="flex-1 flex flex-col max-w-4xl w-full mx-auto bg-white my-4 rounded-xl border border-slate-200 shadow-sm overflow-hidden"> <main class="flex-1 flex flex-col max-w-4xl w-full mx-auto bg-white my-0 sm:my-4 sm:rounded-xl border-x-0 sm:border border-slate-200 shadow-sm overflow-hidden">
<div id="chat-window" class="flex-1 p-6 overflow-y-auto space-y-4 bg-slate-50/50"> <div id="chat-window" class="flex-1 p-3.5 sm:p-6 overflow-y-auto space-y-3.5 sm:space-y-4 bg-slate-50/50">
<div class="bg-white border border-slate-200 rounded-xl p-4 max-w-2xl shadow-sm"> <div class="bg-white border border-slate-200 rounded-xl p-3.5 sm:p-4 max-w-2xl shadow-sm">
<p class="text-xs font-bold text-indigo-600 uppercase tracking-wider mb-1"> <p class="text-xs font-bold text-indigo-600 uppercase tracking-wider mb-1">
<i class="fa-solid fa-robot mr-1"></i> ИИ-Ассистент <i class="fa-solid fa-robot mr-1"></i> ИИ-Ассистент
</p> </p>
<p class="text-slate-700 text-sm leading-relaxed"> <p class="text-slate-700 text-xs sm:text-sm leading-relaxed">
Привет! Я подключен к вашей базе задач и системным промптам. Вы можете писать команды прямо в чат или управлять задачами через панель справа. Привет! Я подключен к вашей базе задач и системным промптам. Вы можете писать команды прямо в чат или управлять задачами через панель задач.
</p> </p>
</div> </div>
</div> </div>
<!-- Поле ввода --> <!-- Поле ввода -->
<div class="p-4 bg-white border-t border-slate-200"> <div class="p-2.5 sm:p-4 bg-white border-t border-slate-200 shrink-0">
<form id="chat-form" onsubmit="sendMessage(event)" class="flex items-end gap-2"> <form id="chat-form" onsubmit="sendMessage(event)" class="flex items-end gap-2">
<div class="flex-1 bg-slate-50 border border-slate-300 rounded-lg p-1 focus-within:border-indigo-600 focus-within:bg-white transition"> <div class="flex-1 bg-slate-50 border border-slate-300 rounded-lg p-1 focus-within:border-indigo-600 focus-within:bg-white transition">
<textarea id="user-input" rows="1" autocomplete="off" autocorrect="off" spellcheck="false" <textarea id="user-input" rows="1" autocomplete="off" autocorrect="off" spellcheck="false"
placeholder="Команда или вопрос (Shift+Enter — новая строка, ↑/↓ — история)..." placeholder="Команда или вопрос..."
class="w-full bg-transparent text-slate-800 px-3 py-1.5 text-sm focus:outline-none resize-none overflow-y-auto max-h-[96px] leading-relaxed fade-scroll-top no-scrollbar"></textarea> class="w-full bg-transparent text-slate-800 px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm focus:outline-none resize-none overflow-y-auto max-h-[96px] leading-relaxed fade-scroll-top no-scrollbar"></textarea>
</div> </div>
<button type="submit" id="send-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-5 h-[42px] rounded-lg text-sm transition flex items-center gap-2 shrink-0"> <button type="submit" id="send-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-3.5 sm:px-5 h-[38px] sm:h-[42px] rounded-lg text-xs sm:text-sm transition flex items-center gap-1.5 shrink-0">
<span>Отправить</span> <span class="hidden sm:inline">Отправить</span>
<i class="fa-solid fa-paper-plane text-xs"></i> <i class="fa-solid fa-paper-plane text-xs"></i>
</button> </button>
</form> </form>
</div> </div>
</main> </main>
<!-- Выезжающая панель (Drawer) --> <!-- Выезжающая панель (Drawer) — полноэкранная на смартфонах -->
<div id="drawer-backdrop" onclick="toggleDrawer()" class="fixed inset-0 bg-slate-900/30 backdrop-blur-sm hidden transition-opacity z-40"></div> <div id="drawer-backdrop" onclick="toggleDrawer()" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm hidden transition-opacity z-40"></div>
<aside id="task-drawer" class="fixed right-0 top-0 h-full w-[420px] bg-white border-l border-slate-200 shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex flex-col"> <aside id="task-drawer" class="fixed right-0 top-0 h-full w-full sm:w-[420px] bg-white border-l border-slate-200 shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex flex-col">
<div class="p-4 border-b border-slate-200 flex justify-between items-center bg-slate-50"> <div class="p-3.5 sm:p-4 border-b border-slate-200 flex justify-between items-center bg-slate-50 shrink-0">
<h2 class="font-bold text-slate-800 flex items-center gap-2 text-sm"> <h2 class="font-bold text-slate-800 flex items-center gap-2 text-xs sm:text-sm">
<i class="fa-solid fa-list-check text-indigo-600"></i> Реестр задач <i class="fa-solid fa-list-check text-indigo-600"></i> Реестр задач
</h2> </h2>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button onclick="loadTasks()" class="text-xs text-slate-500 hover:text-indigo-600 transition p-1" title="Обновить"> <button onclick="loadTasks()" class="text-xs text-slate-500 hover:text-indigo-600 transition p-1.5" title="Обновить">
<i class="fa-solid fa-rotate-right"></i> <i class="fa-solid fa-rotate-right"></i>
</button> </button>
<button onclick="toggleDrawer()" class="text-slate-400 hover:text-slate-700 transition p-1"> <button onclick="toggleDrawer()" class="text-slate-400 hover:text-slate-700 transition p-1.5">
<i class="fa-solid fa-xmark text-lg"></i> <i class="fa-solid fa-xmark text-lg"></i>
</button> </button>
</div> </div>
</div> </div>
<!-- Фильтры задач --> <!-- Фильтры задач с горизонтальным скроллом для смартфонов -->
<div class="flex border-b border-slate-200 bg-white px-2 pt-2 text-xs font-medium text-slate-500 gap-1"> <div class="flex border-b border-slate-200 bg-white px-2 pt-2 text-xs font-medium text-slate-500 gap-1 overflow-x-auto no-scrollbar shrink-0">
<button onclick="setFilter('ALL')" id="filter-ALL" class="px-3 py-1.5 rounded-t-lg border-b-2 border-indigo-600 text-indigo-600 font-bold">Все</button> <button onclick="setFilter('ALL')" id="filter-ALL" class="px-3 py-1.5 rounded-t-lg border-b-2 border-indigo-600 text-indigo-600 font-bold whitespace-nowrap">Все</button>
<button onclick="setFilter('IN_PROGRESS')" id="filter-IN_PROGRESS" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700">В работе</button> <button onclick="setFilter('IN_PROGRESS')" id="filter-IN_PROGRESS" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700 whitespace-nowrap">В работе</button>
<button onclick="setFilter('BACKLOG')" id="filter-BACKLOG" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700">Бэклог</button> <button onclick="setFilter('BACKLOG')" id="filter-BACKLOG" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700 whitespace-nowrap">Бэклог</button>
<button onclick="setFilter('COMPLETED')" id="filter-COMPLETED" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700">Завершено</button> <button onclick="setFilter('COMPLETED')" id="filter-COMPLETED" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700 whitespace-nowrap">Завершено</button>
</div> </div>
<div id="tasks-container" class="flex-1 overflow-y-auto p-4 space-y-3 bg-slate-50/50"> <div id="tasks-container" class="flex-1 overflow-y-auto p-3.5 sm:p-4 space-y-3 bg-slate-50/50">
<div class="text-center text-slate-400 py-8 text-xs">Загрузка задач...</div> <div class="text-center text-slate-400 py-8 text-xs">Загрузка задач...</div>
</div> </div>
</aside> </aside>