/
bytevalue
/
optimal
Обзор
Документация
Войти
/
bytevalue
/
optimal
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/main/resources/static/index.html
211 строк
9 KB
Ivan Srdbt
Bugfixes
13 дек 2025, 11:37
13 дек 2025, 11:37
1fa7f8f
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Optimal AI — Профессиональный ассистент</title> <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/animate.css/4.1.1/animate.min.css"> <!-- Подключаем разбитые CSS файлы --> <link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/layout.css"> <link rel="stylesheet" href="/css/components.css"> <link rel="stylesheet" href="/css/sidebar.css"> <link rel="stylesheet" href="/css/chat.css"> <link rel="stylesheet" href="/css/structured.css"> <link rel="stylesheet" href="/css/responsive.css"> <link rel="stylesheet" href="/css/mobile.css"> </head> <body class="dark-theme"> <!-- Плавный фон с градиентами --> <div class="gradient-bg"> <div class="gradient-circle gradient-1"></div> <div class="gradient-circle gradient-2"></div> <div class="gradient-circle gradient-3"></div> </div> <!-- Бэкдроп для мобильного меню --> <div id="sidebarBackdrop" class="sidebar-backdrop"></div> <div id="app" class="app-container"> <!-- Единый сайдбар --> <aside id="sidebar" class="sidebar"> <!-- ШАПКА САЙДБАРА - ВЕРТИКАЛЬНОЕ РАСПОЛОЖЕНИЕ --> <div class="sidebar-header"> <div class="logo-container" id="logoContainer"> <div class="logo-icon animate__animated animate__pulse"> <i class="fas fa-brain"></i> </div> <h1 class="app-title">Optimal<span class="logo-accent">AI</span></h1> </div> <button id="toggleSidebarBtn" class="sidebar-toggle-btn" title="Свернуть панель"> <i class="fas fa-chevron-left"></i> </button> </div> <!-- ОСНОВНОЙ КОНТЕНТ --> <div class="sidebar-main"> <!-- КНОПКА СОЗДАНИЯ ЧАТА --> <button id="newChatBtn" class="btn btn-primary btn-new-chat" title="Создать чат"> <i class="fas fa-plus"></i> <span>Новый чат</span> </button> <!-- КОНТЕНТ САЙДБАРА --> <div class="sidebar-content"> <div class="chats-header"> <h3 class="section-title">Чаты</h3> <span class="chats-count" id="chatsCount">0</span> </div> <ul id="chatList" class="chat-list"> <!-- Chats will be rendered here --> </ul> </div> </div> <!-- ФУТЕР САЙДБАРА - ВЕРТИКАЛЬНОЕ РАСПОЛОЖЕНИЕ --> <div class="sidebar-footer"> <div class="user-profile"> <div class="user-avatar"> <i class="fas fa-user"></i> </div> <div class="user-info"> <span class="user-name" id="userName">Пользователь</span> <span class="user-id" id="userId">ID: loading...</span> </div> </div> <button id="settingsBtn" class="btn-settings" title="Настройки"> <i class="fas fa-cog"></i> </button> </div> </aside> <!-- Основная область чата --> <main class="chat-main"> <!-- Пустое состояние с приветствием --> <div id="emptyState" class="empty-state animate__animated animate__fadeIn"> <div class="welcome-container glass"> <div class="welcome-header"> <div class="welcome-icon"> <i class="fas fa-robot"></i> </div> <h1 class="welcome-title">Добро пожаловать в <span class="gradient-text">Optimal AI</span></h1> <p class="welcome-subtitle">Ваш профессиональный AI-ассистент для комплексного анализа данных</p> </div> <div class="quick-actions"> <h3 class="section-title">Быстрый старт</h3> <div class="actions-grid"> <button id="emptyCreateChatBtn" class="action-card"> <div class="action-icon"> <i class="fas fa-plus-circle"></i> </div> <div class="action-content"> <h4>Новый чат</h4> <p>Начните новый диалог</p> </div> </button> </div> </div> <div class="recent-chats"> <h3 class="section-title">Недавние чаты</h3> <div id="recentChats" class="recent-chats-list"> <!-- Динамически заполняется --> </div> </div> </div> </div> <!-- Основной вид чата --> <div id="chatView" class="chat-view" style="display: none;"> <!-- Шапка чата с мобильной кнопкой меню --> <div class="chat-header glass"> <div class="chat-header-left"> <button id="mobileMenuBtn" class="mobile-menu-btn" title="Меню" style="display: none;"> <i class="fas fa-bars"></i> </button> <div class="chat-info"> <h2 id="chatTitle" class="chat-title">Новый чат</h2> </div> </div> <div class="chat-header-actions"> <button id="renameChatBtn" class="btn btn-icon btn-secondary" title="Переименовать чат"> <i class="fas fa-edit"></i> </button> <button id="deleteChatBtn" class="btn btn-icon btn-danger" title="Удалить чат"> <i class="fas fa-trash-alt"></i> </button> </div> </div> <!-- Область сообщений --> <div id="messagesContainer" class="messages-container"> <!-- Сообщения загружаются динамически --> </div> <!-- Поле ввода --> <div class="chat-input-container glass"> <div class="input-wrapper"> <textarea id="messageInput" class="message-input" placeholder="Напишите сообщение... (Shift+Enter для новой строки)" rows="1" maxlength="4000" ></textarea> <div class="input-actions"> <div class="char-counter"> <span id="charCount">0</span>/4000 </div> <button id="sendBtn" class="btn btn-primary btn-send" title="Отправить (Ctrl+Enter)"> <i class="fas fa-paper-plane"></i> </button> </div> </div> </div> </div> </main> </div> <!-- Loading indicator --> <div id="loadingOverlay" class="loading-overlay" style="display: none;"> <div class="loading-spinner"> <div class="spinner"></div> <p>Loading...</p> </div> </div> <!-- Error toast --> <div id="errorToast" class="toast toast-error" style="display: none;"> <span id="errorMessage"></span> <button class="toast-close">×</button> </div> <!-- Success toast --> <div id="successToast" class="toast toast-success" style="display: none;"> <span id="successMessage"></span> <button class="toast-close">×</button> </div> <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script> <!-- Скрипты --> <script src="/js/renderers/time-series-processor.js"></script> <script src="/js/renderers/table-sorter.js"></script> <script src="/js/renderers/chart-renderer-base.js"></script> <script src="/js/renderers/bar-chart-renderer.js"></script> <script src="/js/renderers/line-chart-renderer.js"></script> <script src="/js/renderers/pie-chart-renderer.js"></script> <script src="/js/renderers/district-map-renderer.js"></script> <script src="/js/renderers/renderers.js"></script> <script src="/js/config.js"></script> <script src="/js/state.js"></script> <script src="/js/api.js"></script> <script src="/js/websocket.js"></script> <script src="/js/ui.js"></script> <script src="/js/app.js"></script> </body> </html>