From 5be45639e440dfa9e185947cfeda2daf0ddfe54d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=93=D1=80=D0=B8=D0=B3=D0=BE=D1=80=D0=B8=D0=B9=20=D0=A1?=
 =?UTF-8?q?=D0=B0=D1=84=D1=80=D0=BE=D0=BD=D0=BE=D0=B2?=
 <gvsafronov@yandex.ru>
Date: Tue, 18 Nov 2025 18:58:38 +0000
Subject: [PATCH] Upload files to "WUI"

---
 WUI/index.html | 464 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 464 insertions(+)
 create mode 100644 WUI/index.html
diff --git a/WUI/index.html b/WUI/index.html
new file mode 100644
index 0000000..76238de
--- /dev/null
+++ b/WUI/index.html
@@ -0,0 +1,464 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FutriiX</title>
+    <!-- Bootstrap 5.3 CSS -->
+   <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> -->
+   <link rel="stylesheet" href="bootstrap.min.css">
+    <style>
+        :root {
+            --primary-color: #015981;
+            --white-color: #ffffff;
+            --black-color: #000000;
+            --focus-color: #56b4ef;
+            --hover-color: #87ceeb; /* Светло-синий для наведения */
+            --active-color: #ff6b6b; /* Светло-красный для нажатия */
+            --gray-color: #6c757d; /* Серый цвет для кнопки "Прикрепить файлы" */
+        }
+        
+        body {
+            font-family: Arial, sans-serif;
+        }
+        
+        /* Стили для страницы авторизации */
+        .login-container {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f8f9fa;
+        }
+        
+        .login-form {
+            width: 100%;
+            max-width: 500px;
+            padding: 3rem;
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .logo-container {
+            text-align: center;
+            margin-bottom: 2.5rem;
+        }
+        
+        .logo {
+            font-size: 4rem;
+            font-weight: bold;
+            margin-bottom: 1rem;
+        }
+                  
+        .logo-lk {
+            font-size: 2.5rem;
+            font-weight: bold;
+            border-radius: 50px;
+            margin-bottom: 1rem;
+            margin-left: 2rem;
+        }
+        
+        .form-control {
+            font-size: 1.2rem;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+        }
+        
+        .form-control:focus {
+            border-color: var(--focus-color);
+            box-shadow: 0 0 0 0.25rem rgba(86, 180, 239, 0.25);
+        }
+        
+        .btn-login {
+            background-color: var(--primary-color);
+            color: var(--white-color);
+            width: 100%;
+            padding: 1rem;
+            border: none;
+            border-radius: 5px;
+            font-weight: bold;
+            font-size: 1.3rem;
+            transition: background-color 0.2s ease;
+        }
+        
+        /* Стили для наведения на кнопку входа */
+        .btn-login:hover {
+            background-color: var(--hover-color);
+        }
+        
+        /* Стили для нажатия на кнопку входа */
+        .btn-login:active {
+            background-color: var(--active-color);
+        }
+        
+        .form-check {
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
+        }
+        
+        .form-check-input {
+            transform: scale(1.3);
+            margin-right: 0.5rem;
+        }
+        
+        /* Стили для страницы личного кабинета */
+        .dashboard-container {
+            display: flex;
+            min-height: 100vh;
+        }
+        
+        .sidebar {
+            width: 250px;
+            background-color: #01415d;
+            padding: 1rem 0;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-logo {
+            display: flex;
+            align-items: center;
+            color: var(--white-color);
+            font-weight: bold;
+            font-size: 1.2rem;
+        }
+        
+        .sidebar-logo .logo {
+            font-size: 1.5rem;
+            margin-right: 0.5rem;
+        }
+        
+        .sidebar-menu {
+            flex-grow: 1;
+        }
+        
+        .sidebar-menu .nav-link {
+            color: var(--white-color);
+            padding: 0.75rem 1rem;
+            border-radius: 0;
+            font-size: 1.1rem;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            z-index: 1;
+        }
+        
+        .sidebar-menu .nav-link::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background-color: #8b0000;
+            transition: left 0.3s ease;
+            z-index: -1;
+        }
+        
+        .sidebar-menu .nav-link:hover::before,
+        .sidebar-menu .nav-link.active::before {
+            left: 0;
+        }
+        
+        /* Сохраняем подсветку пунктов меню */
+        .sidebar-menu .nav-link:hover,
+        .sidebar-menu .nav-link.active {
+            background-color: #8b0000;
+        }
+        
+        .content-area {
+            flex-grow: 1;
+            padding: 2rem;
+            border-left: 1px solid #dee2e6;
+        }
+        
+        /* Адаптивность */
+        @media (max-width: 768px) {
+            .dashboard-container {
+                flex-direction: column;
+            }
+            
+            .sidebar {
+                width: 100%;
+            }
+            
+            .content-area {
+                border-left: none;
+                border-top: 1px solid #dee2e6;
+            }
+        }
+        
+        .futriix {
+            color: #015981;
+            font-weight: bold;
+        }
+        
+        .futriix-menu {
+            color: #ffffff;
+            font-weight: bold;
+            margin-right: 4em;
+        }
+        
+        .line {
+            color: #ffffff;
+        }
+        
+        /* Стили для форм поддержки и скриптов */
+        .support-form, .scripts-form {
+            max-width: 600px;
+        }
+        
+        .btn-attach, .btn-submit {
+            font-size: 1rem;
+            padding: 0.6rem 1.2rem;
+            margin-top: 1rem;
+            transition: background-color 0.2s ease;
+        }
+        
+        .btn-attach {
+            background-color: var(--gray-color); /* Серый цвет фона */
+            border: 1px solid var(--gray-color); /* Серый цвет границы */
+            color: var(--white-color); /* Белый цвет текста */
+        }
+        
+        /* Стили для наведения на кнопку "Прикрепить файлы" */
+        .btn-attach:hover {
+            background-color: var(--hover-color);
+            border-color: var(--hover-color);
+            color: var(--white-color);
+        }
+        
+        /* Стили для нажатия на кнопку "Прикрепить файлы" */
+        .btn-attach:active {
+            background-color: var(--active-color);
+            border-color: var(--active-color);
+        }
+        
+        .btn-submit {
+            background-color: var(--primary-color);
+            color: var(--white-color);
+            border: none;
+            font-size: 1.1rem;
+            padding: 0.8rem 1.5rem;
+        }
+        
+        /* Стили для наведения на кнопки "Отправить" */
+        .btn-submit:hover {
+            background-color: var(--hover-color);
+        }
+        
+        /* Стили для нажатия на кнопки "Отправить" */
+        .btn-submit:active {
+            background-color: var(--active-color);
+        }
+        
+        /* Стили для всех кнопок при нажатии */
+        .btn:active {
+            background-color: var(--active-color) !important;
+            border-color: var(--active-color) !important;
+        }
+        
+        .form-title {
+            margin-bottom: 1.5rem;
+        }
+    </style>
+</head>
+<body>
+    <!-- Страница авторизации -->
+    <div id="login-page" class="login-container">
+        <div class="login-form">
+            <div class="logo-container">
+                <div class="logo"><img class="logo" src="logo.jpg" alt="logo.jpg" /></div>
+                <h1 class="futriix">FutriiX</h1>
+            </div>
+            <form>
+                <div class="mb-3">
+                    <input type="text" class="form-control" id="login" placeholder="логин" autofocus>
+                </div>
+                <div class="mb-3">
+                    <input type="password" class="form-control" id="password" placeholder="пароль">
+                </div>
+                <div class="mb-3 form-check">
+                    <input type="checkbox" class="form-check-input" id="remember">
+                    <label class="form-check-label" for="remember">Запомнить меня</label>
+                </div>
+                <button type="submit" class="btn-login">Вход</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Страница личного кабинета (скрыта по умолчанию) -->
+    <div id="dashboard-page" class="dashboard-container" style="display: none;">
+        <div class="sidebar">
+            <div class="sidebar-header">              
+                <div class="sidebar-logo">
+                    <div class="logo-lk"><img class="logo" src="logo.jpg" alt="logo.jpg" /></div>
+                    <h2 class="futriix-menu">utriiX</h2>
+                </div>
+            </div>
+            <div class="sidebar-menu">
+                <ul class="nav flex-column">
+                    <li class="nav-item">
+                         <hr class="line">
+                        <a class="nav-link" href="#" data-section="home">Главная</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-section="preparation">Подготовка</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-section="upload">Загрузка</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-section="installation">Установка</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-section="cluster">Кластер</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-section="examples">Примеры</a>
+                    </li>
+                    <hr class="line">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-section="support">Поддержка</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-section="scripts">Скрипты</a>
+                    </li>
+                    <hr class="line">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" id="logout-btn">Выход</a>
+                    </li>
+                    <hr class="line">
+                </ul>
+            </div>
+        </div>
+        <div class="content-area">
+            <!-- Контент по умолчанию -->
+            <div id="default-content">
+                <h2>Добро пожаловать в личный кабинет!</h2>
+                <p>Здесь будет отображаться содержимое выбранного раздела.</p>
+            </div>
+            
+            <!-- Форма поддержки -->
+            <div id="support-content" class="support-form" style="display: none;">
+                <h2 class="form-title">Форма поддержки</h2>
+                <div style="margin-bottom: 1.5rem;"></div>
+                <form>
+                    <div class="mb-3">
+                        <input type="text" class="form-control" id="support-user" placeholder="Пользователь">
+                    </div>
+                    <div class="mb-3">
+                        <input type="text" class="form-control" id="support-subject" placeholder="Тема">
+                    </div>
+                    <div class="mb-3">
+                        <input type="text" class="form-control" id="support-priority" placeholder="Важность">
+                    </div>
+                    <div class="mb-3">
+                        <textarea class="form-control" id="support-description" placeholder="Описание" rows="4"></textarea>
+                    </div>
+                    <button type="button" class="btn btn-attach">
+                        <i class="bi bi-paperclip"></i> Прикрепить файлы
+                    </button>
+                    <div>
+                        <button type="submit" class="btn btn-submit">Отправить</button>
+                    </div>
+                </form>
+            </div>
+            
+            <!-- Форма скриптов -->
+            <div id="scripts-content" class="scripts-form" style="display: none;">
+                <h2 class="form-title">Форма отправки скриптов</h2>
+                <div style="margin-bottom: 1.5rem;"></div>
+                <form>
+                    <div class="mb-3">
+                        <input type="text" class="form-control" id="scripts-user" placeholder="Пользователь">
+                    </div>
+                    <div class="mb-3">
+                        <input type="text" class="form-control" id="scripts-subject" placeholder="Тема">
+                    </div>
+                    <div class="mb-3">
+                        <textarea class="form-control" id="scripts-description" placeholder="Описание" rows="4"></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-submit">Отправить</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap 5.3 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Логика для перехода между страницами
+        document.querySelector('.btn-login').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('login-page').style.display = 'none';
+            document.getElementById('dashboard-page').style.display = 'flex';
+        });
+        
+        // Логика для кнопки "Выход"
+        document.getElementById('logout-btn').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('dashboard-page').style.display = 'none';
+            document.getElementById('login-page').style.display = 'flex';
+            // Сбрасываем активное состояние меню
+            resetActiveMenu();
+            // Показываем контент по умолчанию
+            showDefaultContent();
+        });
+        
+        // Функция для сброса активного состояния меню
+        function resetActiveMenu() {
+            document.querySelectorAll('.sidebar-menu .nav-link').forEach(link => {
+                link.classList.remove('active');
+            });
+        }
+        
+        // Функция для показа контента по умолчанию
+        function showDefaultContent() {
+            document.getElementById('default-content').style.display = 'block';
+            document.getElementById('support-content').style.display = 'none';
+            document.getElementById('scripts-content').style.display = 'none';
+        }
+        
+        // Функция для показа формы поддержки
+        function showSupportContent() {
+            document.getElementById('default-content').style.display = 'none';
+            document.getElementById('support-content').style.display = 'block';
+            document.getElementById('scripts-content').style.display = 'none';
+        }
+        
+        // Функция для показа формы скриптов
+        function showScriptsContent() {
+            document.getElementById('default-content').style.display = 'none';
+            document.getElementById('support-content').style.display = 'none';
+            document.getElementById('scripts-content').style.display = 'block';
+        }
+        
+        // Обработчики для пунктов меню
+        document.querySelectorAll('.sidebar-menu .nav-link').forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+                
+                // Сбрасываем активное состояние у всех пунктов меню
+                resetActiveMenu();
+                
+                // Устанавливаем активное состояние для текущего пункта
+                this.classList.add('active');
+                
+                // Получаем секцию из data-атрибута
+                const section = this.getAttribute('data-section');
+                
+                // Показываем соответствующий контент
+                if (section === 'support') {
+                    showSupportContent();
+                } else if (section === 'scripts') {
+                    showScriptsContent();
+                } else {
+                    showDefaultContent();
+                }
+            });
+        });
+    </script>
+</body>
+</html>
