Фух. Как грустно, что нельзя просто сделать в Figma

react-app/src/components/AnalyticsPage.css

@@ -1,13 +1,18 @@
+/* Общие стили для страницы */
 body {
     background-color: #000;
     color: #fff;
     font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
     height: 100vh;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start; /* Выравнивание по верхнему краю */
+    overflow-y: auto;
 }
 
+/* Контейнер с аналитикой */
 .analytics-container {
     background-color: #1a1a1a;
     border-radius: 15px;
@@ -15,35 +20,44 @@ body {
     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-placeholder, .visualization-placeholder {
-    background-color: #333;
-    color: #ccc;
-    height: 200px;
+/* Контейнер для графиков */
+.graph-container {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 10px;
+    flex-wrap: wrap;
+    gap: 20px;
 }
 
+/* Каждый график */
+.graph {
+    flex: 1;
+    min-width: 300px;
+}
+
+/* Таблица метрик */
 .metrics-table {
     width: 100%;
     border-collapse: collapse;
@@ -51,17 +65,32 @@ body {
     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;
+}

react-app/src/components/AnalyticsPage.js

@@ -5,19 +5,63 @@ import './AnalyticsPage.css';
 function AnalyticsPage() {
     const metricsData = Array.from({ length: 10 }, (_, epoch) => ({
         epoch: epoch + 1,
-        accuracy: (Math.random() * 20 + 80).toFixed(2),
-        loss: (Math.random() * 0.5 + 0.5).toFixed(2),
+        accuracy: Math.random() * 20 + 80,
+        loss: Math.random() * 0.5 + 0.5,
     }));
 
     return (
         <div className="analytics-container">
             <h2 className="text-center mb-4">Аналитика и результаты обучения</h2>
             <div className="analytics-content">
+                {/* Графики */}
                 <div className="graph-section mb-4">
                     <h3 className="section-title">Графики метрик</h3>
-                    <div className="graph-placeholder">Здесь будут графики (accuracy, loss)</div>
+                    <div className="graph-container">
+                        <div className="graph">
+                            <h5 className="text-light">Точность (Accuracy)</h5>
+                            {metricsData.map((data, index) => (
+                                <div key={index} className="mb-2">
+                                    <label className="text-light">Эпоха {data.epoch}</label>
+                                    <div className="progress">
+                                        <div
+                                            className="progress-bar bg-success"
+                                            role="progressbar"
+                                            style={{ width: `${data.accuracy}%` }}
+                                            aria-valuenow={data.accuracy}
+                                            aria-valuemin="0"
+                                            aria-valuemax="100"
+                                        >
+                                            {data.accuracy.toFixed(2)}%
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+
+                        <div className="graph">
+                            <h5 className="text-light">Потери (Loss)</h5>
+                            {metricsData.map((data, index) => (
+                                <div key={index} className="mb-2">
+                                    <label className="text-light">Эпоха {data.epoch}</label>
+                                    <div className="progress">
+                                        <div
+                                            className="progress-bar bg-danger"
+                                            role="progressbar"
+                                            style={{ width: `${data.loss * 100}%` }}
+                                            aria-valuenow={data.loss * 100}
+                                            aria-valuemin="0"
+                                            aria-valuemax="100"
+                                        >
+                                            {data.loss.toFixed(2)}
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
                 </div>
 
+                {/* Таблица метрик */}
                 <div className="metrics-section mb-4">
                     <h3 className="section-title">Таблица метрик</h3>
                     <table className="metrics-table">
@@ -32,14 +76,15 @@ function AnalyticsPage() {
                             {metricsData.map((row, index) => (
                                 <tr key={index}>
                                     <td>{row.epoch}</td>
-                                    <td>{row.accuracy}%</td>
-                                    <td>{row.loss}</td>
+                                    <td>{row.accuracy.toFixed(2)}%</td>
+                                    <td>{row.loss.toFixed(2)}</td>
                                 </tr>
                             ))}
                         </tbody>
                     </table>
                 </div>
 
+                {/* Визуализация */}
                 <div className="visualization-section">
                     <h3 className="section-title">Визуализация процесса обучения</h3>
                     <div className="visualization-placeholder">Здесь будет визуализация (например, конфигурация модели)</div>

react-app/src/components/UserSettings.css

@@ -0,0 +1,87 @@
+/* Общие стили для страницы */
+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;
+}

react-app/src/components/UserSettings.js

@@ -1,13 +1,77 @@
-import React from 'react';
+import React, { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './UserSettings.css';
 
 function UserSettings() {
-  return (
-    <div className="user-settings container">
-      <h1>Настройки профиля</h1>
-      <button className="btn btn-primary mb-2">Сменить пароль</button>
-      <button className="btn btn-secondary mb-2">Настроить уведомления</button>
-    </div>
-  );
+    const [password, setPassword] = useState('');
+    const [notifications, setNotifications] = useState(true);
+
+    const handlePasswordChange = (e) => {
+        setPassword(e.target.value);
+    };
+
+    const handleNotificationsChange = () => {
+        setNotifications(!notifications);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Логика отправки данных (например, изменение пароля, настройка уведомлений)
+        console.log("Изменения сохранены!");
+    };
+
+    return (
+        <div className="user-settings-container">
+            <h2 className="text-center mb-4">Настройки пользователя</h2>
+            <div className="user-settings-content">
+                {/* Секция настройки профиля */}
+                <div className="profile-settings-section mb-4">
+                    <h3 className="section-title">Настройки профиля</h3>
+                    <form onSubmit={handleSubmit}>
+                        <div className="form-group">
+                            <label htmlFor="password" className="text-light">Новый пароль</label>
+                            <input
+                                type="password"
+                                id="password"
+                                className="form-control"
+                                value={password}
+                                onChange={handlePasswordChange}
+                                placeholder="Введите новый пароль"
+                                required
+                            />
+                        </div>
+
+                        <div className="form-group mt-3">
+                            <label htmlFor="confirm-password" className="text-light">Подтверждение пароля</label>
+                            <input
+                                type="password"
+                                id="confirm-password"
+                                className="form-control"
+                                placeholder="Подтвердите новый пароль"
+                                required
+                            />
+                        </div>
+
+                        <button type="submit" className="btn btn-success mt-4">Сохранить изменения</button>
+                    </form>
+                </div>
+
+                {/* Секция настройки уведомлений */}
+                <div className="notification-settings-section mb-4">
+                    <h3 className="section-title">Настройки уведомлений</h3>
+                    <div className="notification-toggle">
+                        <label className="text-light">Получать уведомления</label>
+                        <input
+                            type="checkbox"
+                            className="ml-2"
+                            checked={notifications}
+                            onChange={handleNotificationsChange}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 }
 
 export default UserSettings;