285 lines
14 KiB
Markdown
285 lines
14 KiB
Markdown
# Макеты страниц веб-приложения 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`.
|
||
- **Структура**: Шапка, основной экран (две карточки) и футер соответствуют запросу. Страница авторизации отдельная.
|
||
- **Функциональность**: Макеты включают все элементы из требований (индикаторы, графики, формы, логи).
|