Initial commit: полный проект my_speaker

2025-12-25 12:16:19 +03:00
commit 8279fbb35f
85 changed files with 6027 additions and 0 deletions
@@ -0,0 +1,64 @@
+# Файловая структура проекта My Speaker
+
+Ниже представлена скорректированная файловая структура проекта веб-приложения My Speaker. Корректировки включают:
+- Добавление `main-params.html` в папку `components/` для постоянной левой части (Main Parameters) на главном экране.
+- Добавление `footer.html` в папку `components/` для футера с логами.
+- Добавление `graphics.html` в папку `pages/` для правой части с графиками (как указано в макетах).
+- Обновление модулей JavaScript для соответствия новым компонентам (например, добавление `graphics.js` для логики графиков).
+- Уточнение папок для лучшей организации: `pages/` для динамически подгружаемых правых частей, `components/` для общих элементов (шапка, навигация, Main Parameters, футер).
+- Обеспечение модульности в соответствии с `FRONTEND_REQUIREMENTS.md`: использование чистого JavaScript (ES6+), без фреймворков.
+- Учёт ретро-стиля и адаптивности в `style.css`.
+
+Структура проекта оптимизирована для SPA (Single Page Application), где `index.html` служит точкой входа, а контент подгружается динамически через `router.js`.
+
+## Полная структура
+
+```
+webapp/
+├── index.html          # Основная страница приложения (SPA): содержит контейнеры для шапки, основного экрана и футера
+├── style.css           # Основные стили в ретро-стилистике (пиксельные рамки, шрифт "Press Start 2P", адаптивность)
+├── api.js              # Модуль для работы с API (авторизация, получение данных, обновление настроек)
+├── app.js              # Точка входа: инициализация приложения, подключение модулей и запуск маршрутизации
+├── modules/            # Папка для JavaScript-модулей (логика страниц и компонентов)
+│   ├── router.js       # Маршрутизация: динамическая загрузка HTML в правую часть основного экрана
+│   ├── login.js        # Логика страницы авторизации (обработка формы, настройки интерфейса)
+│   ├── dashboard.js    # Логика главного экрана: инициализация Main Parameters, футера и общей структуры
+│   ├── graphics.js     # Логика для `graphics.html` (инициализация и обновление графиков с использованием Chart.js или Canvas)
+│   ├── settings.js     # Логика для `settings.html` (формы настроек, валидация, отправка на API)
+│   ├── commands.js     # Логика для `commands.html` (список команд, редактирование файла команд)
+│   ├── header.js       # Логика для `header.html` (имя пользователя, кнопка выхода, запрос на /api/auth/me)
+│   ├── nav.js          # Логика для `nav.html` (переключение разделов, подсветка активного)
+│   └── utils.js        # Общие утилиты (обработка ошибок, валидация форм, форматирование данных, DOM-манипуляции)
+├── pages/              # Папка для динамически подгружаемых HTML-страниц (правая часть основного экрана)
+│   ├── login.html      # Разметка страницы авторизации (форма входа, настройки интерфейса)
+│   ├── graphics.html   # Разметка для графиков (canvas для speech_prob и energy)
+│   ├── settings.html   # Разметка для настроек (раскрывающиеся формы с <details>, поля ввода, кнопки сохранения)
+│   └── commands.html   # Разметка для команд (поле для commands_file, список команд, кнопки редактирования)
+└── components/         # Папка для общих HTML-компонентов (шапка, навигация, левая часть, футер)
+    ├── header.html     # Разметка верхней панели (имя пользователя, кнопка выхода)
+    ├── nav.html        # Разметка навигационной панели (кнопки Dashboard, Settings, Commands)
+    ├── main-params.html# Разметка левой части (Main Parameters: статус, индикаторы, статистика CPU/MEM/TEMP)
+    └── footer.html     # Разметка футера (список последних фраз из recent-phrases)
+
+```
+
+## Объяснение корректировок
+- **Добавления**: 
+  - `graphics.html` и `graphics.js` — для отдельного раздела с графиками, как в макетах PAGE_LAYOUTS.md.
+  - `main-params.html` — для постоянной левой части (40%), чтобы избежать дублирования разметки в каждом разделе.
+  - `footer.html` — для футера с логами, чтобы сделать его переиспользуемым и легко обновляемым.
+- **Изменения**:
+  - `dashboard.js` теперь отвечает за инициализацию всего главного экрана (загрузка `main-params.html`, футера и динамической правой части).
+  - `pages/login.html` — остается отдельной, но теперь явно отделена от динамических страниц главного экрана.
+  - Убраны ненужные файлы (если были ранее); структура оптимизирована для модульности (каждый модуль экспортирует функции для ES6 import).
+- **Соответствие требованиям**:
+  - Структура соответствует `FRONTEND_REQUIREMENTS.md`: модульный JS-код, отдельные файлы для логики (app.js, api.js), стили в style.css.
+  - Поддержка адаптивности: в style.css используются медиа-запросы для мобильных устройств (вертикальное расположение карточек).
+  - Масштабируемость: Легко добавить новые страницы (например, `analytics.html` и `analytics.js`) в `pages/` и зарегистрировать в `router.js`.
+- **Рекомендации по реализации**:
+  - В `index.html` добавить контейнеры: `<header id="header"></header>`, `<nav id="nav"></nav>`, `<main><div id="main-params"></div><div id="content"></div></main>`, `<footer id="footer"></footer>`.
+  - В `router.js` загружать контент в `#content` на основе маршрута (например, `#/graphics` → `graphics.html`).
+  - В `utils.js` добавить функции для показа ошибок в ретро-стиле (красный текст на темном фоне).
+  - Для графиков в `graphics.js` использовать Chart.js (подключить через CDN в `index.html`) или Canvas API.
+
+Эта структура готова к реализации. Если нужны дополнительные корректировки (например, добавление папок для ассетов или тестов), уточните.