my_speaker_RPi3/docs/PAGE_LAYOUTS.md

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