diff --git a/react-app/src/components/AnalyticsPage.css b/react-app/src/components/AnalyticsPage.css deleted file mode 100644 index c95bfdc..0000000 --- a/react-app/src/components/AnalyticsPage.css +++ /dev/null @@ -1,96 +0,0 @@ -/* Общие стили для страницы */ -body { - background-color: #000; - color: #fff; - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - height: 100vh; - display: flex; - justify-content: center; - align-items: flex-start; /* Выравнивание по верхнему краю */ - overflow-y: auto; -} - -/* Контейнер с аналитикой */ -.analytics-container { - background-color: #1a1a1a; - border-radius: 15px; - padding: 30px; - box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); - max-width: 900px; - width: 100%; - overflow-y: auto; - margin-top: 20px; /* Добавляем отступ сверху, чтобы контент не прижимался к верхнему краю */ -} - -/* Секция с контентом */ -.analytics-content { - display: flex; - flex-direction: column; - gap: 20px; -} - -/* Секция графиков */ -.graph-section, .metrics-section, .visualization-section { - background-color: #2a2a2a; - border-radius: 10px; - padding: 20px; -} - -/* Названия секций */ -.section-title { - margin-bottom: 15px; - color: #ccc; -} - -/* Контейнер для графиков */ -.graph-container { - display: flex; - flex-wrap: wrap; - gap: 20px; -} - -/* Каждый график */ -.graph { - flex: 1; - min-width: 300px; -} - -/* Таблица метрик */ -.metrics-table { - width: 100%; - border-collapse: collapse; - margin-top: 15px; - color: #fff; -} - -/* Стили для ячеек таблицы */ -.metrics-table th, .metrics-table td { - border: 1px solid #555; - padding: 10px; - text-align: center; -} - -/* Заголовки таблицы */ -.metrics-table th { - background-color: #444; - color: #fff; -} - -/* Строки таблицы */ -.metrics-table tr:nth-child(even) { - background-color: #333; -} - -/* Визуализация */ -.visualization-placeholder { - background-color: #333; - border-radius: 10px; - height: 200px; - text-align: center; - color: #ccc; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/react-app/src/components/AnalyticsPage.js b/react-app/src/components/AnalyticsPage.js index 0415cf6..874a573 100644 --- a/react-app/src/components/AnalyticsPage.js +++ b/react-app/src/components/AnalyticsPage.js @@ -1,6 +1,6 @@ import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; -import './AnalyticsPage.css'; +import './Style.css'; function AnalyticsPage() { const metricsData = Array.from({ length: 10 }, (_, epoch) => ({ diff --git a/react-app/src/components/AuthPage.css b/react-app/src/components/AuthPage.css deleted file mode 100644 index 9647e78..0000000 --- a/react-app/src/components/AuthPage.css +++ /dev/null @@ -1,58 +0,0 @@ -body { - background-color: #000; - color: #fff; - font-family: Arial, sans-serif; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.auth-container { - background-color: #1a1a1a; - border-radius: 15px; - padding: 30px; - box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); - max-width: 400px; - width: 100%; -} - -.form-control { - background-color: #2a2a2a; - border: none; - border-radius: 10px; - color: #fff; - transition: all 0.3s ease; -} - -.form-control:hover { - color: #000; - background-color: #fff; -} - -.form-control:focus { - box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); - color: #000; - outline: none; -} - -.form-control::placeholder { - color: #fff; -} - -.btn { - background-color: #fff; - color: #000; - border-radius: 10px; - transition: all 0.3s ease; -} - -.btn:hover { - background-color: #000; - color: #fff; - border: 1px solid #fff; -} - -.form-label { - color: #fff; -} \ No newline at end of file diff --git a/react-app/src/components/AuthPage.js b/react-app/src/components/AuthPage.js index 51aad87..6bf7bda 100644 --- a/react-app/src/components/AuthPage.js +++ b/react-app/src/components/AuthPage.js @@ -1,6 +1,6 @@ import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; -import './AuthPage.css'; +import './Style.css'; import { useNavigate } from 'react-router-dom'; function AuthPage() { diff --git a/react-app/src/components/Dashboard.css b/react-app/src/components/Dashboard.css deleted file mode 100644 index 09307fc..0000000 --- a/react-app/src/components/Dashboard.css +++ /dev/null @@ -1,74 +0,0 @@ -body { - background-color: #000; - color: #fff; - font-family: Arial, sans-serif; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.dashboard-container { - background-color: #1a1a1a; - border-radius: 15px; - padding: 30px; - box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); - max-width: 800px; - width: 100%; -} - -.dashboard-content { - display: flex; - flex-direction: column; - gap: 20px; -} - -.buttons-section { - display: flex; - justify-content: space-between; -} - -.btn-dashboard { - background-color: #fff; - color: #000; - border-radius: 10px; - padding: 10px 20px; - transition: all 0.3s ease; -} - -.btn-dashboard:hover { - background-color: #000; - color: #fff; - border: 1px solid #fff; -} - -.projects-section, .analytics-section { - background-color: #2a2a2a; - border-radius: 10px; - padding: 20px; -} - -.section-title { - margin-bottom: 15px; - color: #ccc; -} - -.projects-list { - list-style: none; - padding: 0; -} - -.project-item { - background-color: #1a1a1a; - border-radius: 5px; - padding: 10px; - margin-bottom: 10px; - color: #fff; - cursor: pointer; - transition: all 0.3s ease; -} - -.project-item:hover { - background-color: #e6e6e6; - color: #000; -} \ No newline at end of file diff --git a/react-app/src/components/Dashboard.js b/react-app/src/components/Dashboard.js index 68f8a29..584d147 100644 --- a/react-app/src/components/Dashboard.js +++ b/react-app/src/components/Dashboard.js @@ -1,6 +1,6 @@ import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; -import './Dashboard.css'; +import './Style.css'; import { useNavigate } from 'react-router-dom'; function Dashboard() { diff --git a/react-app/src/components/DataProcessing.css b/react-app/src/components/DataProcessing.css deleted file mode 100644 index 3e0a4a3..0000000 --- a/react-app/src/components/DataProcessing.css +++ /dev/null @@ -1,121 +0,0 @@ -body { - background-color: #000; - color: #fff; - font-family: Arial, sans-serif; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.data-processing-container { - background-color: #1a1a1a; - border-radius: 15px; - padding: 30px; - box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); - max-width: 900px; - width: 100%; -} - -.data-processing-content { - display: flex; - flex-direction: column; - gap: 20px; -} - -.upload-section, .preprocessing-section { - background-color: #2a2a2a; - border-radius: 10px; - padding: 20px; -} - -.section-title { - margin-bottom: 15px; - color: #ccc; -} - -.file-input { - background-color: #fff; - color: #000; - border-radius: 10px; - padding: 10px; - width: 100%; - transition: all 0.3s ease; -} - -.file-input:hover { - background-color: #ccc; -} - -.file-name { - margin-top: 10px; - color: #fff; -} - -.data-table { - width: 100%; - border-collapse: collapse; - margin-top: 15px; - color: #fff; -} - -.data-table th, .data-table td { - border: 1px solid #555; - padding: 10px; - text-align: center; -} - -.data-table th { - background-color: #444; - color: #fff; -} - -.data-table tr:nth-child(even) { - background-color: #333; -} - -.pagination { - display: flex; - justify-content: center; - margin-top: 15px; - gap: 5px; -} - -.page-button { - background-color: #444; - color: #fff; - border: none; - padding: 5px 10px; - border-radius: 5px; - cursor: pointer; - transition: all 0.3s ease; -} - -.page-button.active { - background-color: #fff; - color: #000; - font-weight: bold; -} - -.page-button:hover { - background-color: #666; -} - -.processing-section { - display: flex; - justify-content: center; -} - -.btn-process { - background-color: #fff; - color: #000; - border-radius: 10px; - padding: 10px 20px; - transition: all 0.3s ease; -} - -.btn-process:hover { - background-color: #000; - color: #fff; - border: 1px solid #fff; -} \ No newline at end of file diff --git a/react-app/src/components/DataProcessing.js b/react-app/src/components/DataProcessing.js index 0dd32ee..cfaa345 100644 --- a/react-app/src/components/DataProcessing.js +++ b/react-app/src/components/DataProcessing.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; -import './DataProcessing.css'; +import './Style.css'; function DataProcessing() { const [fileName, setFileName] = useState(null); diff --git a/react-app/src/components/ModelDesigner.css b/react-app/src/components/ModelDesigner.css deleted file mode 100644 index 2a9a549..0000000 --- a/react-app/src/components/ModelDesigner.css +++ /dev/null @@ -1,104 +0,0 @@ -body { - background-color: #000; - color: #fff; - font-family: Arial, sans-serif; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.model-designer-container { - background-color: #1a1a1a; - border-radius: 15px; - padding: 30px; - box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); - max-width: 900px; - width: 100%; -} - -.model-designer-content { - display: flex; - flex-direction: column; - gap: 20px; -} - -.toolbar { - display: flex; - justify-content: space-between; -} - -.btn-designer { - background-color: #fff; - color: #000; - border-radius: 10px; - padding: 10px 20px; - transition: all 0.3s ease; -} - -.btn-designer:hover { - background-color: #000; - color: #fff; - border: 1px solid #fff; -} - -.layers-section, .training-section { - background-color: #2a2a2a; - border-radius: 10px; - padding: 20px; -} - -.section-title { - margin-bottom: 15px; - color: #ccc; -} - -.layers-list { - list-style: none; - padding: 0; -} - -.layer-item { - background-color: #1a1a1a; - border-radius: 5px; - padding: 10px; - margin-bottom: 10px; - color: #fff; - display: flex; - justify-content: space-between; - align-items: center; - transition: all 0.3s ease; -} - -.layer-item:hover { - background-color: #e6e6e6; - color: #000; -} - -.btn-remove { - background-color: #e63946; - color: #fff; - border: none; - border-radius: 5px; - padding: 5px 10px; - cursor: pointer; - transition: all 0.3s ease; -} - -.btn-remove:hover { - background-color: #ff0000; -} - -.btn-train { - background-color: #fff; - color: #000; - border-radius: 10px; - padding: 10px 20px; - transition: all 0.3s ease; -} - -.btn-train:hover { - background-color: #000; - color: #fff; - border: 1px solid #fff; -} diff --git a/react-app/src/components/ModelDesigner.js b/react-app/src/components/ModelDesigner.js index aa19868..5a3fc2b 100644 --- a/react-app/src/components/ModelDesigner.js +++ b/react-app/src/components/ModelDesigner.js @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; -import './ModelDesigner.css'; - +import './Style.css'; function ModelDesigner() { const [layers, setLayers] = useState([]); diff --git a/react-app/src/components/Style.css b/react-app/src/components/Style.css new file mode 100644 index 0000000..b4596cd --- /dev/null +++ b/react-app/src/components/Style.css @@ -0,0 +1,446 @@ +body { + background-color: #000; + color: #fff; + font-family: Arial, sans-serif; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + } + + .auth-container { + background-color: #1a1a1a; + border-radius: 15px; + padding: 30px; + box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); + max-width: 400px; + width: 100%; + } + + .form-control { + background-color: #2a2a2a; + border: none; + border-radius: 10px; + color: #fff; + transition: all 0.3s ease; + } + + .form-control:hover { + color: #000; + background-color: #fff; + } + + .form-control:focus { + box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); + color: #000; + outline: none; + } + + .form-control::placeholder { + color: #fff; + } + + .btn { + background-color: #fff; + color: #000; + border-radius: 10px; + transition: all 0.3s ease; + } + + .btn:hover { + background-color: #000; + color: #fff; + border: 1px solid #fff; + } + + .form-label { + color: #fff; + } + + .analytics-container { + background-color: #1a1a1a; + border-radius: 15px; + padding: 30px; + box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); + max-width: 900px; + width: 100%; + overflow-y: auto; + margin-top: 20px; /* Добавляем отступ сверху, чтобы контент не прижимался к верхнему краю */ +} + +/* Секция с контентом */ +.analytics-content { + display: flex; + flex-direction: column; + gap: 20px; +} + +/* Секция графиков */ +.graph-section, .metrics-section, .visualization-section { + background-color: #2a2a2a; + border-radius: 10px; + padding: 20px; +} + +/* Названия секций */ +.section-title { + margin-bottom: 15px; + color: #ccc; +} + +/* Контейнер для графиков */ +.graph-container { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +/* Каждый график */ +.graph { + flex: 1; + min-width: 300px; +} + +/* Таблица метрик */ +.metrics-table { + width: 100%; + border-collapse: collapse; + margin-top: 15px; + color: #fff; +} + +/* Стили для ячеек таблицы */ +.metrics-table th, .metrics-table td { + border: 1px solid #555; + padding: 10px; + text-align: center; +} + +/* Заголовки таблицы */ +.metrics-table th { + background-color: #444; + color: #fff; +} + +/* Строки таблицы */ +.metrics-table tr:nth-child(even) { + background-color: #333; +} + +/* Визуализация */ +.visualization-placeholder { + background-color: #333; + border-radius: 10px; + height: 200px; + text-align: center; + color: #ccc; + display: flex; + justify-content: center; + align-items: center; +} + +.dashboard-container { + background-color: #1a1a1a; + border-radius: 15px; + padding: 30px; + box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); + max-width: 800px; + width: 100%; +} + +.dashboard-content { + display: flex; + flex-direction: column; + gap: 20px; +} + +.buttons-section { + display: flex; + justify-content: space-between; +} + +.btn-dashboard { + background-color: #fff; + color: #000; + border-radius: 10px; + padding: 10px 20px; + transition: all 0.3s ease; +} + +.btn-dashboard:hover { + background-color: #000; + color: #fff; + border: 1px solid #fff; +} + +.projects-section, .analytics-section { + background-color: #2a2a2a; + border-radius: 10px; + padding: 20px; +} + +.projects-list { + list-style: none; + padding: 0; +} + +.project-item { + background-color: #1a1a1a; + border-radius: 5px; + padding: 10px; + margin-bottom: 10px; + color: #fff; + cursor: pointer; + transition: all 0.3s ease; +} + +.project-item:hover { + background-color: #e6e6e6; + color: #000; +} + +.data-processing-container { + background-color: #1a1a1a; + border-radius: 15px; + padding: 30px; + box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); + max-width: 900px; + width: 100%; +} + +.data-processing-content { + display: flex; + flex-direction: column; + gap: 20px; +} + +.upload-section, .preprocessing-section { + background-color: #2a2a2a; + border-radius: 10px; + padding: 20px; +} + +.file-input { + background-color: #fff; + color: #000; + border-radius: 10px; + padding: 10px; + width: 100%; + transition: all 0.3s ease; +} + +.file-input:hover { + background-color: #ccc; +} + +.file-name { + margin-top: 10px; + color: #fff; +} + +.data-table { + width: 100%; + border-collapse: collapse; + margin-top: 15px; + color: #fff; +} + +.data-table th, .data-table td { + border: 1px solid #555; + padding: 10px; + text-align: center; +} + +.data-table th { + background-color: #444; + color: #fff; +} + +.data-table tr:nth-child(even) { + background-color: #333; +} + +.pagination { + display: flex; + justify-content: center; + margin-top: 15px; + gap: 5px; +} + +.page-button { + background-color: #444; + color: #fff; + border: none; + padding: 5px 10px; + border-radius: 5px; + cursor: pointer; + transition: all 0.3s ease; +} + +.page-button.active { + background-color: #fff; + color: #000; + font-weight: bold; +} + +.page-button:hover { + background-color: #666; +} + +.btn-process { + background-color: #fff; + color: #000; + border-radius: 10px; + padding: 10px 20px; + transition: all 0.3s ease; +} + +.btn-process:hover { + background-color: #000; + color: #fff; + border: 1px solid #fff; +} + +/* Контейнер с настройками пользователя */ +.user-settings-container { + background-color: #1a1a1a; + border-radius: 15px; + padding: 30px; + box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); + max-width: 900px; + width: 100%; + overflow-y: auto; + margin-top: 20px; /* Отступ сверху */ +} + +/* Секция с контентом */ +.user-settings-content { + display: flex; + flex-direction: column; + gap: 20px; +} + +/* Секция настройки профиля */ +.profile-settings-section, .notification-settings-section { + background-color: #2a2a2a; + border-radius: 10px; + padding: 20px; +} + +/* Форма для ввода данных */ +.form-group label { + font-weight: 500; + margin-bottom: 10px; + display: block; +} + +/* Кнопка сохранения */ +.btn-success { + background-color: #28a745; + border-color: #28a745; + padding: 10px 20px; + font-size: 16px; +} + +.btn-success:hover { + background-color: #218838; + border-color: #1e7e34; +} + +/* Секция для переключателя уведомлений */ +.notification-toggle { + display: flex; + align-items: center; + gap: 10px; + color: #ccc; +} + +.model-designer-container { + background-color: #1a1a1a; + border-radius: 15px; + padding: 30px; + box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); + max-width: 900px; + width: 100%; +} + +.model-designer-content { + display: flex; + flex-direction: column; + gap: 20px; +} + +.toolbar { + display: flex; + justify-content: space-between; +} + +.btn-designer { + background-color: #fff; + color: #000; + border-radius: 10px; + padding: 10px 20px; + transition: all 0.3s ease; +} + +.btn-designer:hover { + background-color: #000; + color: #fff; + border: 1px solid #fff; +} + +.layers-section, .training-section { + background-color: #2a2a2a; + border-radius: 10px; + padding: 20px; +} + +.layers-list { + list-style: none; + padding: 0; +} + +.layer-item { + background-color: #1a1a1a; + border-radius: 5px; + padding: 10px; + margin-bottom: 10px; + color: #fff; + display: flex; + justify-content: space-between; + align-items: center; + transition: all 0.3s ease; +} + +.layer-item:hover { + background-color: #e6e6e6; + color: #000; +} + +.btn-remove { + background-color: #e63946; + color: #fff; + border: none; + border-radius: 5px; + padding: 5px 10px; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-remove:hover { + background-color: #ff0000; +} + +.btn-train { + background-color: #fff; + color: #000; + border-radius: 10px; + padding: 10px 20px; + transition: all 0.3s ease; +} + +.btn-train:hover { + background-color: #000; + color: #fff; + border: 1px solid #fff; +} \ No newline at end of file diff --git a/react-app/src/components/UserSettings.css b/react-app/src/components/UserSettings.css deleted file mode 100644 index b0d4991..0000000 --- a/react-app/src/components/UserSettings.css +++ /dev/null @@ -1,87 +0,0 @@ -/* Общие стили для страницы */ -body { - background-color: #000; - color: #fff; - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - height: 100vh; - display: flex; - justify-content: center; - align-items: flex-start; /* Выравнивание по верхнему краю */ - overflow-y: auto; -} - -/* Контейнер с настройками пользователя */ -.user-settings-container { - background-color: #1a1a1a; - border-radius: 15px; - padding: 30px; - box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); - max-width: 900px; - width: 100%; - overflow-y: auto; - margin-top: 20px; /* Отступ сверху */ -} - -/* Секция с контентом */ -.user-settings-content { - display: flex; - flex-direction: column; - gap: 20px; -} - -/* Секция настройки профиля */ -.profile-settings-section, .notification-settings-section { - background-color: #2a2a2a; - border-radius: 10px; - padding: 20px; -} - -/* Названия секций */ -.section-title { - margin-bottom: 15px; - color: #ccc; -} - -/* Форма для ввода данных */ -.form-group label { - font-weight: 500; - margin-bottom: 10px; - display: block; -} - -/* Стили для инпутов */ -.form-control { - background-color: #333; - border: 1px solid #444; - color: #fff; - padding: 10px; - border-radius: 5px; -} - -.form-control:focus { - border-color: #2d93f2; - box-shadow: 0 0 5px rgba(45, 147, 242, 0.5); -} - -/* Кнопка сохранения */ -.btn-success { - background-color: #28a745; - border-color: #28a745; - padding: 10px 20px; - font-size: 16px; -} - -.btn-success:hover { - background-color: #218838; - border-color: #1e7e34; -} - -/* Секция для переключателя уведомлений */ -.notification-toggle { - display: flex; - align-items: center; - gap: 10px; - color: #ccc; -} diff --git a/react-app/src/components/UserSettings.js b/react-app/src/components/UserSettings.js index 56dfa6c..bfd1e74 100644 --- a/react-app/src/components/UserSettings.js +++ b/react-app/src/components/UserSettings.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; -import './UserSettings.css'; +import './Style.css'; function UserSettings() { const [password, setPassword] = useState('');