diff --git a/lab1/logo/logo.png b/lab1/logo/logo.png new file mode 100644 index 0000000..b3e66ff Binary files /dev/null and b/lab1/logo/logo.png differ diff --git a/lab1/logo/logo_with_name-removebg.png b/lab1/logo/logo_with_name-removebg.png new file mode 100644 index 0000000..b7f08a4 Binary files /dev/null and b/lab1/logo/logo_with_name-removebg.png differ diff --git a/lab1/logo/logo_with_name.png b/lab1/logo/logo_with_name.png new file mode 100644 index 0000000..b8bb664 Binary files /dev/null and b/lab1/logo/logo_with_name.png differ diff --git a/lab1/report/img/template-screen.png b/lab1/report/img/template-screen.png new file mode 100644 index 0000000..0e238f0 Binary files /dev/null and b/lab1/report/img/template-screen.png differ diff --git a/lab1/report/report.tex b/lab1/report/report.tex index 9127341..634615b 100644 --- a/lab1/report/report.tex +++ b/lab1/report/report.tex @@ -720,14 +720,202 @@ \textit{Метод обработки:} Приложение непрерывно отслеживает положение относительно маршрута и устанавливает <<коридор безопасности>> шириной 200-300 метров. При выходе за пределы коридора срабатывает голосовое предупреждение: <<Вы отклонились от маршрута на 250 метров>> и отображается стрелка направления возврата. Все остальные участники получают уведомления. Для детей можно установить более строгие ограничения. - % \section{Описание структуры информационной модели экранной формы, описание элементов управления} - % Основной экран --- карта с наложением маршрута, панелью состояния (связь, заряд, шаги) и плавающей кнопкой SOS. Ниже расположен горизонтальный список контрольных точек. Карточка точки содержит название, прогнозное время прибытия, кнопки "Отметиться" и "Фото". Чат и чек-лист открываются свайпом вверх. Экран приглашения включает поля: дата, время, список контактов, чек-лист снаряжения, переключатель режима сложности. + \section{Описание дизайна экранной формы} + + Дизайн экранных форм приложения разработан в соответствии с требованиями международного стандарта ISO 9241-161 (Эргономика взаимодействия человек-система. Часть 161: Руководство по элементам графического пользовательского интерфейса) и адаптирован под специфические условия использования: лесная местность, плохая освещённость, использование в перчатках, разный уровень цифровой грамотности пользователей. + + \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. - % \section{Описание дизайна экранной формы (шрифтов, цветовой палитры) ИСО 9241-161. Элементы графического пользовательского интерфейса} - % Используются шрифты без засечек (Inter или Roboto), базовый размер 16--18pt для читабельности в лесу. Цветовая палитра: зелёные оттенки для маршрутов, тёплые оранжевые акценты для действий, красный для SOS. Контрастные режимы и крупные кнопки поддерживают пользователей со сниженным зрением. Пиктограммы грибов, костра и компаса помогают ориентироваться, а активные элементы получают явное состояние фокуса. + \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{Сравнение разработанного варианта с требованиями нормативных документов} - % Макет следует ISO 9241-161: обеспечиваются доступность (крупные элементы, читабельные шрифты), однозначность команд и предсказуемость диалогов. Учитываются требования по защите данных (согласия, минимизация собираемых полей) и рекомендации WCAG 2.1 AA: цветовой контраст, фокусируемость элементов, альтернативные описания для иконок. + \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{Выводы} % Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования. diff --git a/lab1/screen-forms/README.md b/lab1/screen-forms/README.md new file mode 100644 index 0000000..d3a300b --- /dev/null +++ b/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` на специфичные для экрана элементы. + diff --git a/lab1/screen-forms/template.css b/lab1/screen-forms/template.css new file mode 100644 index 0000000..ddaea2e --- /dev/null +++ b/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; + } +} + diff --git a/lab1/screen-forms/template.html b/lab1/screen-forms/template.html new file mode 100644 index 0000000..70f6157 --- /dev/null +++ b/lab1/screen-forms/template.html @@ -0,0 +1,91 @@ + + + + + + + По грибы - Шаблон + + + + + +
+ + +
+
+ +

По грибы!

+
+
+ + +
+
+ +

Название экрана

+ +

+ Описание или инструкции для текущего экрана. + Этот текст объясняет пользователю, что он может сделать на данном экране. +

+ + +
+

Заголовок карточки

+

Содержимое карточки с информацией

+
+ + +
+
📍
+
+
Элемент списка
+
Дополнительная информация
+
+
+ +
+
🍄
+
+
Второй элемент
+
Подробности
+
+
+
+
+ + + + + + + +
+ + + \ No newline at end of file