Экран планирования похода

lab1/report/report.tex

@@ -34,6 +34,7 @@
 \renewcommand\listingoffset{0.2em} %отступ от номеров строк в листинге
 \renewcommand{\arraystretch}{1.4} % изменяю высоту строки в таблице
 \usepackage[font=small, singlelinecheck=false, justification=centering, format=plain, labelsep=period]{caption} %для настройки заголовка таблицы
+\usepackage{subcaption} %для подфигур
 \usepackage{listings} %листинги
 \usepackage{xcolor} % цвета
 \usepackage{hyperref}% для гиперссылок
@@ -912,11 +913,57 @@
 
 \begin{figure}[h!]
    \centering
-   \includegraphics[width=0.5\linewidth]{img/template-screen.png}
+   \includegraphics[width=0.6\linewidth]{img/template-screen.png}
    \caption{Шаблон экранной формы мобильного приложения "По грибы!"}
    \label{fig:template}
 \end{figure}
 
+    \section{Эскизы экранных форм}
+    
+    На основе разработанного шаблона созданы экранные формы для ключевых процессов приложения. Каждая форма реализует описанные ранее функции и соответствует принципам дизайна ISO 9241-161.
+
+    \subsection{Экран планирования похода}
+
+    Экран планирования реализует функции конструктора маршрутов и подготовки к походу. Пользователь (организатор) может выбрать маршрут на карте, установить дату и время, просмотреть прогноз погоды и пригласить участников.
+
+    \textbf{Основные элементы экрана:}
+    \begin{itemize}
+        \item \textbf{Предварительный просмотр карты} --- интерактивная область высотой 200pt с наложенным маршрутом, кнопка "Выбрать на карте" для перехода к полноэкранной карте.
+        \item \textbf{Информация о маршруте} --- карточка с основными параметрами: район (Токсово), расстояние (8.3 км), прогнозируемое время (4ч 30мин).
+        \item \textbf{Селекторы даты и времени} --- крупные нажимаемые элементы с иконками календаря и часов, отображают выбранные значения.
+        \item \textbf{Виджет погоды} --- показывает температуру, описание погоды, время восхода/заката, скорость ветра для выбранной даты.
+        \item \textbf{Список участников} --- карточки с аватарами, именами, ролями и статусами подтверждения. Кнопка "Пригласить ещё" для добавления новых участников.
+        \item \textbf{Кнопки действий} --- "Сохранить черновик" (вторичная) и "Создать поход" (основная, оранжевая).
+    \end{itemize}
+
+    Экран оптимизирован для быстрого планирования: все ключевые параметры видны без прокрутки, часто используемые действия доступны крупными кнопками. Прогноз погоды помогает организатору принять решение о целесообразности похода.
+
+\begin{figure}[h!]
+   \centering
+   \begin{subfigure}[b]{0.30\linewidth}
+       \centering
+       \includegraphics[width=\textwidth]{img/planning-screen.png}
+       \caption{Карта}
+       \label{fig:planning-screen}
+   \end{subfigure}
+   \hfill
+   \begin{subfigure}[b]{0.30\linewidth}
+       \centering
+       \includegraphics[width=\textwidth]{img/planning-screen2.png}
+       \caption{Когда идём?}
+       \label{fig:planning-screen2}
+   \end{subfigure}
+   \hfill
+   \begin{subfigure}[b]{0.30\linewidth}
+       \centering
+       \includegraphics[width=\textwidth]{img/planning-screen3.png}
+       \caption{Участники похода}
+       \label{fig:planning-screen3}
+   \end{subfigure}
+   \caption{Экран планирования похода}
+   \label{fig:planning-screens}
+\end{figure}
+
     % \section{Выводы}
     % Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования.
 

lab1/screen-forms/common.css

@@ -0,0 +1,412 @@
+/* Общие переменные для всех экранных форм приложения "По грибы!" */
+
+:root {
+    /* Цветовая палитра */
+    --color-primary: #2D5F3F;
+    /* Лесной зелёный */
+    --color-primary-light: #3A7A52;
+    /* Светлый зелёный для градиентов */
+    --color-accent: #E67E22;
+    /* Янтарный оранжевый */
+    --color-danger: #C0392B;
+    /* Тревожный красный */
+    --color-info: #3498DB;
+    /* Небесный голубой */
+
+    /* Нейтральная палитра */
+    --color-text-dark: #2C3E50;
+    /* Основной цвет текста */
+    --color-text-medium: #7F8C8D;
+    /* Второстепенный текст */
+    --color-bg-light: #FAFAFA;
+    /* Основной фон */
+    --color-bg-card: #FFFFFF;
+    /* Фон карточек */
+    --color-border: #ECF0F1;
+    /* Разделители */
+    --color-bg-secondary: #ECF0F1;
+    /* Вторичный фон */
+
+    /* Семантические цвета */
+    --color-success: #2ECC71;
+    /* Успех */
+    --color-warning: #F39C12;
+    /* Предупреждение */
+
+    /* Типографика */
+    --font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-size-base: 16px;
+    --font-size-small: 14px;
+    --font-size-tiny: 12px;
+    --font-size-large: 18px;
+    --font-size-xlarge: 22px;
+    --font-size-xxlarge: 24px;
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --line-height-tight: 1.2;
+    --line-height-normal: 1.4;
+    --line-height-relaxed: 1.5;
+
+    /* Размеры и отступы */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 12px;
+    --spacing-lg: 16px;
+    --spacing-xl: 20px;
+    --spacing-xxl: 24px;
+    --spacing-xxxl: 32px;
+
+    /* Радиусы скругления */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-full: 50%;
+
+    /* Размеры элементов */
+    --touch-target-min: 48px;
+    /* Минимальный размер для касания */
+    --touch-target-large: 56px;
+    /* Увеличенный размер */
+    --sos-button-size: 80px;
+    /* Размер кнопки SOS */
+
+    /* Размеры контейнера */
+    --app-width: 375px;
+    --app-height: 700px;
+    --header-height: 64px;
+    --nav-height: 72px;
+
+    /* Тени */
+    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
+    --shadow-sos: 0 4px 16px rgba(192, 57, 43, 0.4);
+
+    /* Длительность анимаций */
+    --transition-fast: 150ms;
+    --transition-medium: 250ms;
+    --transition-slow: 400ms;
+}
+
+/* Общие стили сброса */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font-family);
+    background-color: var(--color-bg-light);
+    color: var(--color-text-dark);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-normal);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Контейнер приложения */
+.app-container {
+    width: var(--app-width);
+    height: var(--app-height);
+    margin: 20px auto;
+    background: var(--color-bg-light);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-lg);
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+/* Шапка приложения */
+.app-header {
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
+    box-shadow: var(--shadow-md);
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.app-logo {
+    width: 36px;
+    height: 36px;
+    object-fit: contain;
+}
+
+.app-title {
+    font-size: var(--font-size-xxlarge);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-bg-card);
+    letter-spacing: -0.5px;
+}
+
+/* Основной контент */
+.app-main {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: calc(var(--nav-height) + var(--spacing-sm));
+}
+
+.content-container {
+    padding: var(--spacing-xl);
+}
+
+/* Скроллбар */
+.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;
+}
+
+/* Заголовки */
+.screen-title {
+    font-size: var(--font-size-xlarge);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-dark);
+    margin-bottom: var(--spacing-sm);
+}
+
+.screen-description {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-relaxed);
+    color: var(--color-text-medium);
+    margin-bottom: var(--spacing-xxl);
+}
+
+/* Карточки */
+.card {
+    background: var(--color-bg-card);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+    box-shadow: var(--shadow-md);
+}
+
+.card-title {
+    font-size: var(--font-size-large);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-dark);
+    margin-bottom: var(--spacing-sm);
+}
+
+.card-text {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-normal);
+    color: var(--color-text-medium);
+}
+
+/* Элементы списка */
+.list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    background: var(--color-bg-card);
+    border-radius: var(--radius-md);
+    padding: 14px var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
+    cursor: pointer;
+}
+
+.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: var(--color-bg-secondary);
+    border-radius: 10px;
+    flex-shrink: 0;
+}
+
+.list-item-content {
+    flex: 1;
+}
+
+.list-item-title {
+    font-size: 17px;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-dark);
+    margin-bottom: 3px;
+}
+
+.list-item-subtitle {
+    font-size: var(--font-size-small);
+    color: var(--color-text-medium);
+}
+
+/* Кнопки */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md) var(--spacing-xxl);
+    border: none;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    cursor: pointer;
+    transition: all var(--transition-fast) ease;
+    min-height: var(--touch-target-min);
+}
+
+.btn-primary {
+    background: var(--color-accent);
+    color: var(--color-bg-card);
+}
+
+.btn-primary:active {
+    background: #D35400;
+    transform: scale(0.97);
+}
+
+.btn-secondary {
+    background: var(--color-bg-secondary);
+    color: var(--color-text-dark);
+}
+
+.btn-secondary:active {
+    background: #D5DBDB;
+    transform: scale(0.97);
+}
+
+.btn-full {
+    width: 100%;
+}
+
+/* Нижняя навигация */
+.app-navigation {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--nav-height);
+    background: var(--color-bg-card);
+    border-top: 1px solid var(--color-border);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: var(--spacing-sm) 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: var(--spacing-xs);
+    background: none;
+    border: none;
+    padding: 6px 10px;
+    cursor: pointer;
+    transition: transform var(--transition-fast) 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: var(--color-text-medium);
+    font-weight: var(--font-weight-medium);
+}
+
+.nav-button-active .nav-label {
+    color: var(--color-primary);
+    font-weight: var(--font-weight-semibold);
+}
+
+.nav-button-active {
+    position: relative;
+}
+
+.nav-button-active::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 32px;
+    height: 3px;
+    background: var(--color-primary);
+    border-radius: 2px 2px 0 0;
+}
+
+/* Кнопка SOS */
+.sos-button {
+    position: absolute;
+    bottom: calc(var(--nav-height) + var(--spacing-lg));
+    right: var(--spacing-xl);
+    width: var(--sos-button-size);
+    height: var(--sos-button-size);
+    background: var(--color-danger);
+    border: 4px solid var(--color-bg-card);
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow-sos);
+    cursor: pointer;
+    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
+    z-index: 100;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+.sos-button:active {
+    transform: scale(0.95);
+    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.5);
+}
+
+.sos-icon {
+    font-size: 32px;
+    color: var(--color-bg-card);
+    font-weight: bold;
+}
+
+@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);
+    }
+}

lab1/screen-forms/planning-screen.css

@@ -0,0 +1,304 @@
+/* Специфичные стили для экрана планирования похода */
+
+/* Контейнер карты */
+.map-container {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    margin-bottom: var(--spacing-lg);
+    box-shadow: var(--shadow-md);
+}
+
+.map-preview {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.map-action-btn {
+    position: absolute;
+    bottom: var(--spacing-md);
+    right: var(--spacing-md);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-lg);
+    background: var(--color-bg-card);
+    border: none;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-dark);
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    transition: transform var(--transition-fast) ease;
+}
+
+.map-action-btn:active {
+    transform: scale(0.95);
+}
+
+.btn-icon {
+    font-size: 16px;
+    line-height: 1;
+}
+
+/* Информация о маршруте */
+.route-info {
+    margin-bottom: var(--spacing-lg);
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-md) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.info-row:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+}
+
+.info-row:first-child {
+    padding-top: 0;
+}
+
+.info-label {
+    font-size: var(--font-size-base);
+    color: var(--color-text-medium);
+}
+
+.info-value {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-dark);
+}
+
+/* Секции */
+.date-time-section,
+.participants-section {
+    margin-bottom: var(--spacing-xxl);
+}
+
+.section-title {
+    font-size: var(--font-size-large);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-dark);
+    margin-bottom: var(--spacing-md);
+}
+
+/* Селекторы даты и времени */
+.date-selector,
+.time-selector {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg);
+    cursor: pointer;
+    transition: transform var(--transition-fast) ease;
+}
+
+.date-selector {
+    margin-bottom: var(--spacing-md);
+}
+
+.date-selector:active,
+.time-selector:active {
+    transform: scale(0.98);
+}
+
+.selector-icon {
+    font-size: 28px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-secondary);
+    border-radius: 10px;
+    flex-shrink: 0;
+}
+
+.selector-content {
+    flex: 1;
+}
+
+.selector-label {
+    font-size: var(--font-size-small);
+    color: var(--color-text-medium);
+    margin-bottom: 2px;
+}
+
+.selector-value {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-dark);
+}
+
+.selector-arrow {
+    font-size: 24px;
+    color: var(--color-text-medium);
+    line-height: 1;
+}
+
+/* Карточка погоды */
+.weather-card {
+    margin-bottom: var(--spacing-xxl);
+}
+
+.weather-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-lg);
+}
+
+.weather-icon {
+    font-size: 48px;
+    line-height: 1;
+}
+
+.weather-info {
+    flex: 1;
+}
+
+.weather-temp {
+    font-size: var(--font-size-xlarge);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text-dark);
+    margin-bottom: 2px;
+}
+
+.weather-desc {
+    font-size: var(--font-size-base);
+    color: var(--color-text-medium);
+}
+
+.weather-details {
+    display: flex;
+    justify-content: space-between;
+    padding-top: var(--spacing-md);
+    border-top: 1px solid var(--color-border);
+}
+
+.weather-detail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-xs);
+}
+
+.detail-label {
+    font-size: var(--font-size-small);
+    color: var(--color-text-medium);
+}
+
+.detail-value {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-dark);
+}
+
+/* Участники */
+.participant-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    background: var(--color-bg-card);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md) var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
+    box-shadow: var(--shadow-sm);
+}
+
+.participant-avatar {
+    font-size: 32px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-full);
+    flex-shrink: 0;
+}
+
+.participant-info {
+    flex: 1;
+}
+
+.participant-name {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-dark);
+    margin-bottom: 2px;
+}
+
+.participant-role {
+    font-size: var(--font-size-small);
+    color: var(--color-text-medium);
+}
+
+.participant-status {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+    font-size: 16px;
+    font-weight: var(--font-weight-bold);
+    flex-shrink: 0;
+}
+
+.status-confirmed {
+    background: #D5F4E6;
+    color: var(--color-success);
+}
+
+.status-pending {
+    background: #FEF5E7;
+    color: var(--color-warning);
+}
+
+/* Кнопка добавления участника */
+.btn-add-participant {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    width: 100%;
+    padding: var(--spacing-md);
+    background: transparent;
+    border: 2px dashed var(--color-border);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-medium);
+    cursor: pointer;
+    transition: all var(--transition-fast) ease;
+    margin-top: var(--spacing-sm);
+}
+
+.btn-add-participant:active {
+    transform: scale(0.98);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+}
+
+/* Секция действий */
+.actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-xxl);
+}
+
+/* Нижний отступ для прокрутки */
+.bottom-spacer {
+    height: var(--spacing-xl);
+}

lab1/screen-forms/planning-screen.html

@@ -0,0 +1,177 @@
+<!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="common.css">
+    <link rel="stylesheet" href="planning-screen.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="map-container">
+                    <img src="img/map-preview.png" alt="Предварительный просмотр карты" class="map-preview">
+                    <button class="map-action-btn">
+                        <span class="btn-icon">📍</span>
+                        <span>Выбрать на карте</span>
+                    </button>
+                </div>
+
+                <!-- Информация о маршруте -->
+                <div class="route-info card">
+                    <div class="info-row">
+                        <span class="info-label">Район</span>
+                        <span class="info-value">Токсово, Всеволожский р-н</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Расстояние</span>
+                        <span class="info-value">8.3 км</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Время в пути</span>
+                        <span class="info-value">~4 часа 30 минут</span>
+                    </div>
+                </div>
+
+                <!-- Дата и время -->
+                <div class="date-time-section">
+                    <h3 class="section-title">Когда идём?</h3>
+                    <div class="date-selector card">
+                        <div class="selector-icon">📅</div>
+                        <div class="selector-content">
+                            <div class="selector-label">Дата похода</div>
+                            <div class="selector-value">Суббота, 28 сентября 2025</div>
+                        </div>
+                        <div class="selector-arrow">›</div>
+                    </div>
+
+                    <div class="time-selector card">
+                        <div class="selector-icon">🕐</div>
+                        <div class="selector-content">
+                            <div class="selector-label">Время начала</div>
+                            <div class="selector-value">09:00</div>
+                        </div>
+                        <div class="selector-arrow">›</div>
+                    </div>
+                </div>
+
+                <!-- Погода -->
+                <div class="weather-card card">
+                    <div class="weather-header">
+                        <span class="weather-icon">☀️</span>
+                        <div class="weather-info">
+                            <div class="weather-temp">+12°C</div>
+                            <div class="weather-desc">Ясно, без осадков</div>
+                        </div>
+                    </div>
+                    <div class="weather-details">
+                        <div class="weather-detail">
+                            <span class="detail-label">Восход</span>
+                            <span class="detail-value">06:45</span>
+                        </div>
+                        <div class="weather-detail">
+                            <span class="detail-label">Закат</span>
+                            <span class="detail-value">18:20</span>
+                        </div>
+                        <div class="weather-detail">
+                            <span class="detail-label">Ветер</span>
+                            <span class="detail-value">3 м/с</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Участники -->
+                <div class="participants-section">
+                    <h3 class="section-title">Участники похода</h3>
+
+                    <div class="participant-item">
+                        <div class="participant-avatar">👩</div>
+                        <div class="participant-info">
+                            <div class="participant-name">Мария (Вы)</div>
+                            <div class="participant-role">Организатор</div>
+                        </div>
+                        <div class="participant-status status-confirmed">✓</div>
+                    </div>
+
+                    <div class="participant-item">
+                        <div class="participant-avatar">👴</div>
+                        <div class="participant-info">
+                            <div class="participant-name">Иван Семёнович</div>
+                            <div class="participant-role">Участник</div>
+                        </div>
+                        <div class="participant-status status-confirmed">✓</div>
+                    </div>
+
+                    <div class="participant-item">
+                        <div class="participant-avatar">👧</div>
+                        <div class="participant-info">
+                            <div class="participant-name">Алиса</div>
+                            <div class="participant-role">Участник</div>
+                        </div>
+                        <div class="participant-status status-pending">?</div>
+                    </div>
+
+                    <button class="btn-add-participant">
+                        <span class="btn-icon">➕</span>
+                        <span>Пригласить ещё</span>
+                    </button>
+                </div>
+
+                <!-- Кнопки действий -->
+                <div class="actions">
+                    <button class="btn btn-secondary btn-full">Сохранить черновик</button>
+                    <button class="btn btn-primary btn-full">Создать поход</button>
+                </div>
+
+                <div class="bottom-spacer"></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>
+
+    </div>
+</body>
+
+</html>

lab1/screen-forms/template.css

@@ -57,7 +57,8 @@ body {
 .app-main {
     flex: 1;
     overflow-y: auto;
-    padding-bottom: 80px; /* Отступ для нижней навигации */
+    padding-bottom: 80px;
+    /* Отступ для нижней навигации */
 }
 
 .content-container {
@@ -245,9 +246,12 @@ body {
 
 /* Анимация пульсации для SOS */
 @keyframes pulse {
-    0%, 100% {
+
+    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);
     }
@@ -286,5 +290,4 @@ body {
     .app-container {
         height: 844px;
     }
-}
+}
-

lab1/screen-forms/template.html

@@ -4,8 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>По грибы - Шаблон</title>
+    <title>По грибы! - Шаблон</title>
-    <link rel="stylesheet" href="template.css">
+    <link rel="stylesheet" href="common.css">
 </head>
 
 <body>