# Макеты страниц веб-приложения My Speaker

Ниже представлены псевдографические макеты страниц приложения My Speaker в стиле ретро-игры (8-bit, шрифт "Press Start 2P", зеленая гамма `#0f0` на темном фоне). Макеты созданы для альбомной ориентации десктопных экранов и адаптивной верстки для мобильных устройств. Структура главного экрана включает:

1. **Шапка**: Верхняя панель (`header.html`) с именем пользователя и кнопкой выхода, навигационная панель (`nav.html`) с переключением разделов.
2. **Основной экран**:
   - **Левая часть (Main Parameters)**: 40% ширины, постоянно отображает статус системы, индикаторы речи/энергии и системную статистику (`main-params.html`).
   - **Правая часть (Контент)**: 60% ширины, динамически подгружает `graphics.html`, `settings.html`, `commands.html`.
3. **Футер**: Логи с последними распознанными фразами (`footer.html`).

Страница авторизации (`login.html`) отображается отдельно, без шапки, навигации и футера.

## 1. Страница авторизации (`login.html`)

**Описание**: Экран входа в стиле игрового меню с пиксельной рамкой. Содержит форму для логина (`PLAYER NAME`) и пароля (`SECRET CODE`), кнопку `[ START ]`, сообщение об ошибке (в красном цвете) и настройки интерфейса (цвет, URL бэкенда), открываемые по кнопке `[⚙️ Settings]`.

### Десктопная версия

```
+--------------------------------------------------+
|                                                  |
|                == MY SPEAKER LOGIN ==            |
|                                                  |
|         +-----------------------------+          |
|         | PLAYER NAME:  [==========]  |          |
|         | SECRET CODE:  [==========]  |          |
|         |        [ START ]            |          |
|         +-----------------------------+          |
|         [ ERROR: Invalid login ]                 |
|         Default: admin / admin                   |
|                                                  |
|         [⚙️ Settings]                           |
|         +-----------------------------+          |
|         | Main Color: [####]          |          |
|         | Backend URL: [==========]   |          |
|         +-----------------------------+          |
|                                                  |
+--------------------------------------------------+
```

### Мобильная версия

```
+---------------------+
|                     |
| == MY SPEAKER LOGIN ==
|                     |
| +-----------------+ |
| | PLAYER NAME:    | |
| | [============]   | |
| | SECRET CODE:    | |
| | [============]   | |
| |    [ START ]    | |
| +-----------------+ |
| [ ERROR: Invalid  ] |
| Default: admin/admin|
|                     |
| [⚙️ Settings]      |
| +-----------------+ |
| | Main Color: [##]| |
| | Backend: [====] | |
| +-----------------+ |
|                     |
+---------------------+
```

**Пояснения**:

- **Десктоп**: Форма центрирована, занимает ~30-40% ширины для альбомной ориентации. Пиксельная рамка (`+---+`) и ретро-стиль.
- **Мобильный**: Форма растягивается на всю ширину, поля ввода и кнопка увеличены.
- **Адаптивность**: Элементы масштабируются, текст остается читаемым.

## 2. Главный экран с `graphics.html`

**Описание**: Главный экран с `graphics.html` в правой части (60%). Левая часть (40%) показывает статус системы, индикаторы речи/энергии и статистику (`main-params.html`). Футер отображает последние фразы (`footer.html`).

### Десктопная версия

```
+--------------------------------------------------+
| User: admin                       [ Logout ]      |
+--------------------------------------------------+
| [ Dashboard | Settings | Commands ]               |
+--------------------------------------------------+
| +--------------------+ +--------------------------+
| | MAIN PARAMETERS    | | SPEACH                   |
| |                    | |                          |
| | Status: Listening  | |   ^
| | [============] 85% | |                    *    |
| |                    | |   |               *      |
| | Speech Prob: [===] | |   |             *        |
| | Energy:     [==]   | |   +-------------------+
| |                    | |   Time                   |
| | CPU: 25%           | |                          |
| | MEM: 40%           | |                          |
| | TEMP: 45°C         | |                          |
| +--------------------+ +--------------------------+
+--------------------------------------------------+
| == RECENT PHRASES ==                             |
| +---------------------------------------------+  |
| | "Turn on light"        "What's the weather" |  |
| +---------------------------------------------+  |
+--------------------------------------------------+
```

### Мобильная версия

```
+---------------------+
| User: admin [Logout]|
+---------------------+
| [Dash|Sett|Commands]|
+---------------------+
| == MAIN PARAMETERS ==
| Status: Listening   |
| [===========] 85%   |
| Speech Prob: [====] |
| Energy: [==] 1200   |
| CPU: 25%            |
| MEM: 40%            |
| TEMP: 45°C          |
| == GRAPHICS ==      |
|  ^             *    |
|  |            *     |
|  |           *      |
|  |          *       |
|  +-----------------+
|  Time              |
| == RECENT PHRASES ==
| "Turn on light"    |
| "What's the weather|
+---------------------+
```

**Пояснения**:

- **Десктоп**: Шапка и навигация во всю ширину. Левая часть (40%) с индикаторами и статистикой, правая (60%) с линейным графиком (`speech_prob`, `energy`). Футер с фразами.
- **Мобильный**: Карточки располагаются вертикально, график уменьшен.
- **Адаптивность**: Альбомная ориентация на десктопе использует ширину экрана, на мобильных — вертикальная компоновка.

## 3. Главный экран с `settings.html`

**Описание**: Правая часть (60%) подгружает `settings.html` с раскрывающимися формами для настройки VAD, системных параметров и т.д. Левая часть и футер неизменны.

### Десктопная версия

```
+--------------------------------------------------+
| User: admin                       [ Logout ]      |
+--------------------------------------------------+
| [ Dashboard | Settings | Commands ]               |
+--------------------------------------------------+
| +--------------------+ +--------------------------+
| | MAIN PARAMETERS    | | SETTINGS                 |
| |                    | |                          |
| | Status: Listening  | | + VAD Settings        v  |
| | [============] 85% | | +---------------------+  |
| |                    | | | Mode: [0-3]         |  |
| | Speech Prob: [===] | | | Speech Thr: [====]  |  |
| | Energy:     [==]   | | | Energy Thr: [####]  |  |
| |                    | | | [ SAVE ]            |  |
| | CPU: 25%           | | +---------------------+  |
| | MEM: 40%           | | - System Settings      |
| | TEMP: 45°C         | | [ REBOOT ]             |
| +--------------------+ +--------------------------+
+--------------------------------------------------+
| == RECENT PHRASES ==                             |
| +---------------------------------------------+  |
| | "Turn on light"        "What's the weather" |  |
| +---------------------------------------------+  |
+--------------------------------------------------+
```

### Мобильная версия

```
+---------------------+
| User: admin [Logout]|
+---------------------+
| [Dash|Sett|Commands]|
+---------------------+
| == MAIN PARAMETERS ==
| Status: Listening   |
| [===========] 85%   |
| Speech Prob: [====] |
| Energy: [==] 1200   |
| CPU: 25%            |
| MEM: 40%            |
| TEMP: 45°C          |
| == SETTINGS ==      |
| + VAD Settings    v |
| +-----------------+ |
| | Mode: [0-3]     | |
| | Speech Thr: [==]| |
| | Energy Thr: [##]| |
| | [ SAVE ]        | |
| +-----------------+ |
| - System Settings   |
| [ REBOOT ]         |
| == RECENT PHRASES ==
| "Turn on light"    |
| "What's the weather|
+---------------------+
```

**Пояснения**:

- **Десктоп**: Правая часть показывает формы (`<details>`), например, VAD с выпадающим списком и ползунком. Кнопка `[ REBOOT ]` внизу.
- **Мобильный**: Формы растягиваются на всю ширину, поля ввода увеличены.
- **Адаптивность**: Элементы управления масштабируются, формы сворачиваются/разворачиваются.

## 4. Главный экран с `commands.html`

**Описание**: Правая часть (60%) подгружает `commands.html` с минимальной реализацией (путь к файлу команд и список). Левая часть и футер неизменны.

### Десктопная версия

```
+--------------------------------------------------+
| User: admin                       [ Logout ]      |
+--------------------------------------------------+
| [ Dashboard | Settings | Commands ]               |
+--------------------------------------------------+
| +--------------------+ +--------------------------+
| | MAIN PARAMETERS    | | COMMANDS                 |
| |                    | |                          |
| | Status: Listening  | | Commands File: [file]    |
| | [============] 85% | | [ EDIT ]  [ SAVE ]      |
| |                    | |                          |
| | Speech Prob: [===] | | "Turn on light"         |
| | Energy:     [==]   | | "Play music"           |
| |                    | |                          |
| | CPU: 25%           | |                          |
| | MEM: 40%           | |                          |
| | TEMP: 45°C         | |                          |
| +--------------------+ +--------------------------+
+--------------------------------------------------+
| == RECENT PHRASES ==                             |
| +---------------------------------------------+  |
| | "Turn on light"        "What's the weather" |  |
| +---------------------------------------------+  |
+--------------------------------------------------+
```

### Мобильная версия

```
+---------------------+
| User: admin [Logout]|
+---------------------+
| [Dash|Sett|Commands]|
+---------------------+
| == MAIN PARAMETERS ==
| Status: Listening   |
| [===========] 85%   |
| Speech Prob: [====] |
| Energy: [==] 1200   |
| CPU: 25%            |
| MEM: 40%            |
| TEMP: 45°C          |
| == COMMANDS ==      |
| Commands File: [f]  |
| [ EDIT ] [ SAVE ]   |
| "Turn on light"     |
| "Play music"        |
| == RECENT PHRASES ==
| "Turn on light"    |
| "What's the weather|
+---------------------+
```

**Пояснения**:

- **Десктоп**: Правая часть показывает поле для `commands_file` и список команд. Кнопки `[ EDIT ]` и `[ SAVE ]` для редактирования.
- **Мобильный**: Элементы растягиваются на всю ширину, список команд вертикальный.
- **Адаптивность**: Компактное расположение, текст читаемый.

## Пояснения к макетам

- **Ретро-стиль**: Используются символы `+`, `=`, `*` для пиксельных рамок и индикаторов, отражая 8-bit эстетику и зеленую гамму (`#0f0`).
- **Альбомная ориентация**: Десктопные макеты оптимизированы для широкого экрана, с разделением на 40% (Main Parameters) и 60% (контент).
- **Адаптивность**: Мобильные макеты используют вертикальное расположение, избегая горизонтальной прокрутки, как указано в `FRONTEND_REQUIREMENTS.md`.
- **Структура**: Шапка, основной экран (две карточки) и футер соответствуют запросу. Страница авторизации отдельная.
- **Функциональность**: Макеты включают все элементы из требований (индикаторы, графики, формы, логи).