# Файловая структура проекта 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.

Эта структура готова к реализации. Если нужны дополнительные корректировки (например, добавление папок для ассетов или тестов), уточните.