Шаблон экранных форм

lab1/report/report.tex

@@ -720,14 +720,202 @@
     
     \textit{Метод обработки:} Приложение непрерывно отслеживает положение относительно маршрута и устанавливает <<коридор безопасности>> шириной 200-300 метров. При выходе за пределы коридора срабатывает голосовое предупреждение: <<Вы отклонились от маршрута на 250 метров>> и отображается стрелка направления возврата. Все остальные участники получают уведомления. Для детей можно установить более строгие ограничения.
 
-    % \section{Описание структуры информационной модели экранной формы, описание элементов управления}
-    % Основной экран --- карта с наложением маршрута, панелью состояния (связь, заряд, шаги) и плавающей кнопкой SOS. Ниже расположен горизонтальный список контрольных точек. Карточка точки содержит название, прогнозное время прибытия, кнопки "Отметиться" и "Фото". Чат и чек-лист открываются свайпом вверх. Экран приглашения включает поля: дата, время, список контактов, чек-лист снаряжения, переключатель режима сложности.
+    \section{Описание дизайна экранной формы}
     
-    % \section{Описание дизайна экранной формы (шрифтов, цветовой палитры) ИСО 9241-161. Элементы графического пользовательского интерфейса}
-    % Используются шрифты без засечек (Inter или Roboto), базовый размер 16--18pt для читабельности в лесу. Цветовая палитра: зелёные оттенки для маршрутов, тёплые оранжевые акценты для действий, красный для SOS. Контрастные режимы и крупные кнопки поддерживают пользователей со сниженным зрением. Пиктограммы грибов, костра и компаса помогают ориентироваться, а активные элементы получают явное состояние фокуса.
+    Дизайн экранных форм приложения разработан в соответствии с требованиями международного стандарта ISO 9241-161 (Эргономика взаимодействия человек-система. Часть 161: Руководство по элементам графического пользовательского интерфейса) и адаптирован под специфические условия использования: лесная местность, плохая освещённость, использование в перчатках, разный уровень цифровой грамотности пользователей.
     
-    % \section{Сравнение разработанного варианта с требованиями нормативных документов}
-    % Макет следует ISO 9241-161: обеспечиваются доступность (крупные элементы, читабельные шрифты), однозначность команд и предсказуемость диалогов. Учитываются требования по защите данных (согласия, минимизация собираемых полей) и рекомендации WCAG 2.1 AA: цветовой контраст, фокусируемость элементов, альтернативные описания для иконок.
+    \subsection{Типографика и шрифты}
+    
+    В приложении используется шрифтовая система, обеспечивающая высокую читабельность в сложных условиях освещения и при быстром просмотре информации на ходу.
+    
+    \textbf{Основной шрифт:} Inter или Roboto --- современные гротескные шрифты без засечек, специально разработанные для экранов с высокой читабельностью при малых размерах. Эти шрифты имеют открытые апертуры (внутренние просветы букв), что улучшает различимость символов при плохом освещении.
+    
+    \textbf{Размеры шрифтов:}
+    \begin{itemize}
+        \item \textbf{Базовый размер текста:} 16--18pt для основного контента (описания, инструкции, названия грибов). Это на 2--4pt больше стандартных 14pt, что обусловлено необходимостью чтения на ходу и при плохой видимости.
+        \item \textbf{Заголовки экранов:} 22--24pt, полужирное начертание, для быстрой идентификации текущего раздела.
+        \item \textbf{Навигационные данные:} 18--20pt для расстояний, времени, направлений --- критически важная информация, которую нужно считывать мгновенно.
+        \item \textbf{Минимальный размер:} не менее 14pt для второстепенной информации (метки времени, подписи к иконкам), что соответствует рекомендациям ISO 9241-161.
+    \end{itemize}
+    
+    \textbf{Межстрочный интервал:} 1.4--1.5 от размера шрифта для улучшения читабельности блоков текста. Для коротких надписей (кнопки, метки) можно использовать 1.2--1.3.
+    
+    \textbf{Насыщенность:} основной текст использует regular (400) или medium (500) начертание, заголовки и активные элементы --- semibold (600) или bold (700). Тонкие начертания (light, thin) не используются из-за плохой видимости на солнце и в тумане.
+    
+    \subsection{Цветовая палитра}
+    
+    Цветовая схема построена на природных оттенках с учётом контрастности и психологического восприятия цветов в контексте лесной прогулки.
+    
+    \textbf{Основные цвета:}
+    \begin{itemize}
+        \item \textbf{Лесной зелёный \#2D5F3F} --- основной цвет бренда, используется для маршрутов на карте, пройденных участков пути, успешных действий. Ассоциируется с природой, безопасностью, спокойствием.
+        \item \textbf{Янтарный оранжевый \#E67E22} --- акцентный цвет для активных элементов, кнопок действия, контрольных точек. Хорошо виден в лесу, привлекает внимание, ассоциируется с теплом и энергией.
+        \item \textbf{Тревожный красный \#C0392B} --- используется исключительно для критических элементов: кнопка SOS, предупреждения об опасности, низкий заряд батареи. Сигнализирует о необходимости немедленных действий.
+        \item \textbf{Небесный голубой \#3498DB} --- для информационных элементов, ссылок, текущего местоположения на карте. Нейтральный, не конфликтует с зелёным фоном карты.
+    \end{itemize}
+    
+    \textbf{Нейтральная палитра (оттенки серого):}
+    \begin{itemize}
+        \item Тёмно-серый \#2C3E50 --- основной цвет текста на светлом фоне.
+        \item Средний серый \#7F8C8D --- второстепенный текст, неактивные элементы.
+        \item Светло-серый \#ECF0F1 --- фон карточек, разделители.
+        \item Почти белый \#FAFAFA --- основной фон приложения.
+    \end{itemize}
+    
+    \textbf{Контрастность:} все текстово-фоновые комбинации обеспечивают коэффициент контрастности не менее 4.5:1 для обычного текста и 3:1 для крупного текста (18pt+), что соответствует уровню AA стандарта WCAG 2.1. Для критических элементов (SOS, предупреждения) используется усиленный контраст 7:1 (уровень AAA).
+    
+    \textbf{Семантика цвета:}
+    \begin{itemize}
+        \item \textbf{Зелёный:} успех, завершение, безопасность (отметка на контрольной точке, подтверждение снаряжения).
+        \item \textbf{Оранжевый:} действие, внимание, активность (кнопки "Начать поход", "Добавить гриб", контрольные точки).
+        \item \textbf{Красный:} опасность, критическая ситуация, запрет (SOS, отклонение от маршрута, разрядка батареи <15\%).
+        \item \textbf{Голубой:} информация, навигация, нейтральное состояние (текущая позиция, информационные подсказки).
+        \item \textbf{Серый:} неактивное, второстепенное, фоновое (отключенные кнопки, пройденные точки).
+    \end{itemize}
+    
+    \subsection{Размеры и отступы}
+    
+    Система размеров построена на модульной сетке с базовым шагом 8pt (пикселей), что обеспечивает визуальную согласованность и упрощает адаптацию под разные размеры экранов.
+    
+    \textbf{Размеры интерактивных элементов:}
+    \begin{itemize}
+        \item \textbf{Минимальный размер касания:} 48×48pt (примерно 9×9 мм на физическом экране) для стандартного режима, что соответствует рекомендациям ISO 9241-161 и позволяет уверенно нажимать пальцем в перчатке.
+        \item \textbf{Основные кнопки действий:} 56×56pt, увеличенный размер для часто используемых элементов ("Добавить гриб", "Открыть чат").
+        \item \textbf{Кнопка SOS:} 80×80pt, максимальный размер для мгновенного доступа в критической ситуации, постоянно видна в углу экрана.
+        \item \textbf{Расстояние между интерактивными элементами:} не менее 8pt, чтобы избежать случайных нажатий.
+    \end{itemize}
+    
+    \textbf{Отступы и воздух:}
+    \begin{itemize}
+        \item Внутренние отступы кнопок: 12--16pt по вертикали, 20--24pt по горизонтали.
+        \item Отступы между секциями экрана: 24--32pt для визуального разделения.
+        \item Поля экрана от края: 16--20pt, чтобы контент не прижимался к границам.
+        \item Расстояние между строками в списках: 16pt для комфортного чтения и случайных нажатий.
+    \end{itemize}
+    
+    \subsection{Иконография}
+    
+    Визуальные символы играют ключевую роль в навигации по приложению, особенно для пользователей с низкой цифровой грамотностью.
+    
+    \textbf{Стиль иконок:} используются иконки в едином стиле "outlined" (контурные) с толщиной линии 2pt. Контурный стиль обеспечивает лучшую видимость на разных фонах и при ярком солнечном свете по сравнению с заливными (filled) иконками.
+    
+    \textbf{Размеры иконок:}
+    \begin{itemize}
+        \item Стандартный размер: 24×24pt для иконок в кнопках и меню.
+        \item Крупные иконки: 32×32pt для главных действий на экране.
+        \item Иконка SOS: 40×40pt, красного цвета с белой обводкой для максимальной заметности.
+    \end{itemize}
+    
+    \textbf{Основные иконки:}
+    \begin{itemize}
+        \item \textbf{Компас} (круг со стрелкой) --- навигация, направление движения.
+        \item \textbf{Корзина с грибами} --- раздел находок, семейная корзина.
+        \item \textbf{Маркер на карте} --- контрольная точка, место встречи.
+        \item \textbf{Группа людей} --- участники похода, управление группой.
+        \item \textbf{Сообщение} --- семейный чат, коммуникация.
+        \item \textbf{Список с галочками} --- чек-лист снаряжения.
+        \item \textbf{Молния} --- уровень заряда батареи.
+        \item \textbf{Антенна с волнами} --- уровень сигнала связи.
+        \item \textbf{Фотоаппарат} --- сделать фото гриба.
+        \item \textbf{Тревожный треугольник/круг SOS} --- экстренная кнопка.
+    \end{itemize}
+    
+    \textbf{Цвет иконок:} по умолчанию тёмно-серый (\#2C3E50) для нейтральных элементов, окрашиваются в акцентные цвета при активации или для семантического значения (красная иконка низкого заряда, зелёная галочка выполнения).
+    
+    \subsection{Карточки и контейнеры}
+    
+    Информация группируется в визуальные контейнеры для улучшения сканируемости и понимания структуры.
+    
+    \textbf{Карточки:} прямоугольные контейнеры с лёгкой тенью (elevation 2--4dp в терминологии Material Design) для создания ощущения "слоя" над фоном. Радиус скругления углов 8--12pt для современного внешнего вида и мягкости восприятия.
+    
+    \textbf{Структура карточки контрольной точки:}
+    \begin{itemize}
+        \item Заголовок (название точки, 18pt semibold).
+        \item Расстояние и время прибытия (16pt, серый цвет).
+        \item Статус (иконка + текст): "Не пройдена" / "Идём сейчас" / "Пройдена".
+        \item Кнопка действия "Отметиться" (оранжевая, 48pt высотой).
+    \end{itemize}
+    
+    \textbf{Разделители:} тонкие линии (1pt, светло-серый \#ECF0F1) для отделения элементов списка. Используются умеренно, чтобы не создавать визуального шума.
+    
+    \subsection{Состояния элементов}
+    
+    В соответствии с ISO 9241-161, все интерактивные элементы должны иметь визуально различимые состояния.
+    
+    \textbf{Состояния кнопок:}
+    \begin{itemize}
+        \item \textbf{Обычное (default):} полный цвет заливки, чёткие границы.
+        \item \textbf{Наведение/фокус (hover/focus):} лёгкое затемнение цвета на 10--15\%, появление обводки 3pt голубого цвета для фокуса.
+        \item \textbf{Нажатие (pressed):} затемнение на 20--25\%, лёгкое уменьшение размера (scale 0.95) для тактильного отклика.
+        \item \textbf{Неактивное (disabled):} полупрозрачность 40\%, серый цвет, курсор "not-allowed".
+        \item \textbf{Загрузка (loading):} анимированный спиннер внутри кнопки, текст сохраняется.
+    \end{itemize}
+    
+    \textbf{Индикация выбора:} для элементов списка, переключателей, чекбоксов используется изменение цвета фона (светло-зелёный \#E8F5E9 для выбранного), появление галочки-иконки, увеличение высоты элемента на 2--4pt.
+
+    \subsection{Анимация и обратная связь}
+    
+    Анимации используются для улучшения понимания системы и подтверждения действий, но не должны замедлять работу.
+    
+    \textbf{Длительность анимаций:}
+    \begin{itemize}
+        \item Быстрые переходы (смена состояний кнопок): 100--150ms.
+        \item Средние переходы (открытие модальных окон, карточек): 200--300ms.
+        \item Длинные анимации (переход между экранами): 300--400ms.
+    \end{itemize}
+    
+    \textbf{Тактильная обратная связь (вибрация):}
+    \begin{itemize}
+        \item Лёгкая вибрация (10ms) при нажатии кнопок для подтверждения касания.
+        \item Средняя вибрация (50ms) при достижении контрольной точки.
+        \item Сильная вибрация (200ms, паттерн) при предупреждениях и активации SOS.
+    \end{itemize}
+    
+    \textbf{Звуковые сигналы:}
+    \begin{itemize}
+        \item Лёгкий щелчок при обычных действиях (опционально, можно отключить).
+        \item Мелодичный сигнал при успешных действиях (отметка на точке, добавление гриба).
+        \item Настойчивый звук при критических уведомлениях (низкий заряд, отклонение от маршрута).
+        \item Тревожный сигнал при активации SOS (можно отключить, если нужна скрытность).
+    \end{itemize}
+
+    \section{Шаблон экранной формы}
+
+    Шаблон экранной формы определяет единую структуру для всех основных экранов мобильного приложения. Он обеспечивает визуальную согласованность, предсказуемость навигации и соответствие принципам дизайна, описанным в предыдущем разделе.
+
+    \subsection{Структура шаблона}
+
+    Шаблон состоит из следующих обязательных компонентов:
+
+    \begin{itemize}
+        \item \textbf{Шапка приложения (Header)} --- содержит логотип и название приложения "По грибы". Фиксирована в верхней части экрана, имеет зелёный градиентный фон (\#2D5F3F → \#3A7A52), высоту 64pt. Логотип размером 36×36pt расположен слева, название выполнено белым шрифтом 24pt, полужирное начертание.
+
+        \item \textbf{Основная область контента (Main)} --- прокручиваемая область для размещения содержимого конкретного экрана. Включает заголовок экрана (22pt, полужирный), описание при необходимости (16pt, серый цвет), карточки с информацией и элементы управления. Отступы от краёв 20pt, отступ снизу 80pt для навигационной панели.
+
+        \item \textbf{Нижняя навигационная панель (Navigation)} --- фиксирована внизу экрана, высота 72pt, белый фон с тенью. Содержит 5 навигационных кнопок с иконками и подписями: "Маршрут", "Корзина", "Главная", "Чат", "Группа". Активная вкладка выделяется зелёным цветом текста и подчёркиванием снизу.
+
+        \item \textbf{Плавающая кнопка SOS} --- расположена в правом нижнем углу над навигацией, размер 80×80pt, красный цвет (\#C0392B), круглая форма с белой обводкой 4pt. Постоянно видима на всех экранах, имеет анимацию пульсации для привлечения внимания.
+    \end{itemize}
+
+    \subsection{Визуальные особенности}
+
+    Шаблон реализует описанную ранее цветовую палитру и типографику:
+    
+    \begin{itemize}
+        \item Карточки контента имеют белый фон, радиус скругления 12pt, лёгкую тень для создания эффекта "слоя".
+        \item Элементы списков включают иконку слева (40×40pt в скруглённом контейнере), заголовок (17pt, полужирный) и подзаголовок (14pt, серый).
+        \item Все интерактивные элементы реагируют на нажатие визуальным эффектом (уменьшение до 95--98\% размера).
+        \item Общий фон приложения --- светло-серый \#FAFAFA для снижения контрастности и уменьшения утомляемости глаз.
+    \end{itemize}
+
+    Шаблон рассчитан на стандартную ширину мобильного экрана 375pt (iPhone, большинство Android-устройств) и может адаптироваться по высоте от 667pt до 844pt.
+
+\begin{figure}[h!]
+   \centering
+   \includegraphics[width=0.5\linewidth]{img/template-screen.png}
+   \caption{Шаблон экранной формы мобильного приложения "По грибы!"}
+   \label{fig:template}
+\end{figure}
 
     % \section{Выводы}
     % Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования.

lab1/screen-forms/README.md

@@ -0,0 +1,47 @@
+# Шаблоны экранных форм приложения "По грибы"
+
+## Описание
+
+Этот каталог содержит HTML/CSS шаблоны экранных форм для мобильного приложения "По грибы".
+
+## Файлы
+
+- `template.html` - базовый шаблон экранной формы
+- `template.css` - стили для шаблона
+
+## Как использовать
+
+1. Откройте `template.html` в браузере
+2. Измените размер окна браузера до мобильного формата (375px ширина) или используйте режим разработчика (F12) для эмуляции мобильного устройства
+3. Сделайте скриншот для отчёта
+
+## Структура шаблона
+
+Шаблон включает:
+
+- **Шапка (Header)**: логотип и название "По грибы"
+- **Основной контент (Main)**: прокручиваемая область с примерами карточек и элементов списка
+- **Нижняя навигация (Navigation)**: 5 кнопок для основных разделов
+- **Кнопка SOS**: плавающая красная кнопка в правом нижнем углу
+
+## Технические параметры
+
+- Ширина: 375px (стандартный мобильный экран)
+- Высота: 812px (iPhone X и выше)
+- Шрифт: Inter или Roboto
+- Базовый размер шрифта: 16-18pt
+
+## Цветовая палитра
+
+- Зелёный (основной): #2D5F3F
+- Оранжевый (акцент): #E67E22
+- Красный (SOS): #C0392B
+- Голубой (информация): #3498DB
+- Серый текст: #7F8C8D
+- Тёмный текст: #2C3E50
+- Светлый фон: #FAFAFA
+
+## Для разработки новых экранов
+
+На основе этого шаблона можно создавать конкретные экраны приложения, заменяя содержимое блока `.content-container` на специфичные для экрана элементы.
+

lab1/screen-forms/template.css

@@ -0,0 +1,290 @@
+/* Общие настройки */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background-color: #FAFAFA;
+    color: #2C3E50;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Контейнер приложения - фиксированная ширина для мобильного */
+.app-container {
+    width: 375px;
+    height: 812px;
+    margin: 20px auto;
+    background: #FAFAFA;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+/* Шапка приложения */
+.app-header {
+    background: linear-gradient(135deg, #2D5F3F 0%, #3A7A52 100%);
+    padding: 16px 20px 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.app-logo {
+    width: 36px;
+    height: 36px;
+    object-fit: contain;
+}
+
+.app-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: #FFFFFF;
+    letter-spacing: -0.5px;
+}
+
+/* Основной контент */
+.app-main {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 80px; /* Отступ для нижней навигации */
+}
+
+.content-container {
+    padding: 20px;
+}
+
+/* Заголовок экрана */
+.screen-title {
+    font-size: 22px;
+    font-weight: 600;
+    color: #2C3E50;
+    margin-bottom: 8px;
+}
+
+.screen-description {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #7F8C8D;
+    margin-bottom: 24px;
+}
+
+/* Карточки */
+.card {
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.card-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #2C3E50;
+    margin-bottom: 8px;
+}
+
+.card-text {
+    font-size: 16px;
+    line-height: 1.4;
+    color: #7F8C8D;
+}
+
+/* Элементы списка */
+.list-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 14px 16px;
+    margin-bottom: 12px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.list-item:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.list-item-icon {
+    font-size: 28px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ECF0F1;
+    border-radius: 10px;
+    flex-shrink: 0;
+}
+
+.list-item-content {
+    flex: 1;
+}
+
+.list-item-title {
+    font-size: 17px;
+    font-weight: 500;
+    color: #2C3E50;
+    margin-bottom: 3px;
+}
+
+.list-item-subtitle {
+    font-size: 14px;
+    color: #7F8C8D;
+}
+
+/* Нижняя навигация */
+.app-navigation {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 72px;
+    background: #FFFFFF;
+    border-top: 1px solid #ECF0F1;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 8px 0;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.nav-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    background: none;
+    border: none;
+    padding: 6px 10px;
+    cursor: pointer;
+    transition: transform 0.15s ease;
+    min-width: 56px;
+}
+
+.nav-button:active {
+    transform: scale(0.95);
+}
+
+.nav-icon {
+    font-size: 24px;
+    line-height: 1;
+}
+
+.nav-label {
+    font-size: 11px;
+    color: #7F8C8D;
+    font-weight: 500;
+}
+
+.nav-button-active .nav-label {
+    color: #2D5F3F;
+    font-weight: 600;
+}
+
+.nav-button-active {
+    position: relative;
+}
+
+.nav-button-active::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 32px;
+    height: 3px;
+    background: #2D5F3F;
+    border-radius: 2px 2px 0 0;
+}
+
+/* Кнопка SOS */
+.sos-button {
+    position: absolute;
+    bottom: 88px;
+    right: 20px;
+    width: 80px;
+    height: 80px;
+    background: #C0392B;
+    border: 4px solid #FFFFFF;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 16px rgba(192, 57, 43, 0.4);
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    z-index: 100;
+}
+
+.sos-button:active {
+    transform: scale(0.95);
+    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.5);
+}
+
+.sos-icon {
+    font-size: 32px;
+    color: #FFFFFF;
+    font-weight: bold;
+}
+
+/* Анимация пульсации для SOS */
+@keyframes pulse {
+    0%, 100% {
+        box-shadow: 0 4px 16px rgba(192, 57, 43, 0.4);
+    }
+    50% {
+        box-shadow: 0 4px 24px rgba(192, 57, 43, 0.6);
+    }
+}
+
+.sos-button {
+    animation: pulse 2s ease-in-out infinite;
+}
+
+/* Скроллбар для webkit браузеров */
+.app-main::-webkit-scrollbar {
+    width: 4px;
+}
+
+.app-main::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.app-main::-webkit-scrollbar-thumb {
+    background: #BDC3C7;
+    border-radius: 2px;
+}
+
+.app-main::-webkit-scrollbar-thumb:hover {
+    background: #95A5A6;
+}
+
+/* Адаптация для разных высот экрана */
+@media (max-height: 700px) {
+    .app-container {
+        height: 667px;
+    }
+}
+
+@media (min-height: 850px) {
+    .app-container {
+        height: 844px;
+    }
+}
+

lab1/screen-forms/template.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>По грибы - Шаблон</title>
+    <link rel="stylesheet" href="template.css">
+</head>
+
+<body>
+    <!-- Основной контейнер приложения -->
+    <div class="app-container">
+
+        <!-- Шапка приложения -->
+        <header class="app-header">
+            <div class="header-content">
+                <img src="../logo/logo.png" alt="Логотип" class="app-logo">
+                <h1 class="app-title">По грибы!</h1>
+            </div>
+        </header>
+
+        <!-- Основное содержимое экрана -->
+        <main class="app-main">
+            <div class="content-container">
+                <!-- Здесь будет размещаться содержимое конкретного экрана -->
+                <h2 class="screen-title">Название экрана</h2>
+
+                <p class="screen-description">
+                    Описание или инструкции для текущего экрана.
+                    Этот текст объясняет пользователю, что он может сделать на данном экране.
+                </p>
+
+                <!-- Пример карточки -->
+                <div class="card">
+                    <h3 class="card-title">Заголовок карточки</h3>
+                    <p class="card-text">Содержимое карточки с информацией</p>
+                </div>
+
+                <!-- Пример списка -->
+                <div class="list-item">
+                    <div class="list-item-icon">📍</div>
+                    <div class="list-item-content">
+                        <div class="list-item-title">Элемент списка</div>
+                        <div class="list-item-subtitle">Дополнительная информация</div>
+                    </div>
+                </div>
+
+                <div class="list-item">
+                    <div class="list-item-icon">🍄</div>
+                    <div class="list-item-content">
+                        <div class="list-item-title">Второй элемент</div>
+                        <div class="list-item-subtitle">Подробности</div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Нижняя навигационная панель -->
+        <nav class="app-navigation">
+            <button class="nav-button">
+                <span class="nav-icon">🗺️</span>
+                <span class="nav-label">Маршрут</span>
+            </button>
+            <button class="nav-button">
+                <span class="nav-icon">🧺</span>
+                <span class="nav-label">Корзина</span>
+            </button>
+            <button class="nav-button nav-button-active">
+                <span class="nav-icon">🏠</span>
+                <span class="nav-label">Главная</span>
+            </button>
+            <button class="nav-button">
+                <span class="nav-icon">💬</span>
+                <span class="nav-label">Чат</span>
+            </button>
+            <button class="nav-button">
+                <span class="nav-icon">👥</span>
+                <span class="nav-label">Группа</span>
+            </button>
+        </nav>
+
+        <!-- Плавающая кнопка SOS -->
+        <button class="sos-button">
+            <span class="sos-icon">🆘</span>
+        </button>
+
+    </div>
+</body>
+
+</html>