diff --git a/lab1/report/img/navigation-screen.png b/lab1/report/img/navigation-screen.png
new file mode 100644
index 0000000..cc35bb3
Binary files /dev/null and b/lab1/report/img/navigation-screen.png differ
diff --git a/lab1/report/report.tex b/lab1/report/report.tex
index 205de62..1a2d55e 100644
--- a/lab1/report/report.tex
+++ b/lab1/report/report.tex
@@ -964,6 +964,31 @@
\label{fig:planning-screens}
\end{figure}
+\newpage
+ \subsection{Экран навигации в походе}
+
+ Экран навигации --- основной экран во время активного похода. Занимает полноэкранный режим с картой, поверх которой размещены информационные панели и элементы управления.
+
+ \textbf{Основные элементы экрана:}
+ \begin{itemize}
+ \item \textbf{Полноэкранная карта} --- отображает местность, маршрут, контрольные точки и местоположение всех участников группы в реальном времени. Текущая позиция пользователя выделена синей пульсирующей точкой с анимацией расширяющегося кольца.
+
+ \item \textbf{Панель состояния} --- расположена сверху, показывает критически важную информацию: уровень сигнала сети (3G/4G), заряд батареи (78\%), время в пути (2:15). Полупрозрачный белый фон для видимости на любой карте.
+
+ \item \textbf{Компас-навигатор} --- крупная карточка над группой участников, содержит визуальный компас с направлением движения (стрелка указывает на север), название целевой точки ("До точки встречи №2"), расстояние до неё (1.2 км) и прогнозируемое время прибытия (примерно 25 мин). Зелёный градиентный круг компаса выделяет элемент.
+
+ \item \textbf{Маркеры на карте} --- визуальные метки: аватары участников (Иван, Алиса), оранжевый круг с иконкой (контрольная точка).
+ \end{itemize}
+
+ Экран оптимизирован для использования в движении: все элементы управления имеют увеличенный размер (56×56pt), информация сгруппирована в легко читаемые карточки с тенями для отделения от карты. Анимация пульсации текущей позиции помогает быстро найти себя на карте даже при беглом взгляде.
+
+\begin{figure}[h!]
+ \centering
+ \includegraphics[width=0.35\linewidth]{img/navigation-screen.png}
+ \caption{Экран навигации в походе с картой и информационными панелями}
+ \label{fig:navigation-screen}
+\end{figure}
+
% \section{Выводы}
% Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования.
diff --git a/lab1/screen-forms/img/map-navigation.png b/lab1/screen-forms/img/map-navigation.png
new file mode 100644
index 0000000..230b4b9
Binary files /dev/null and b/lab1/screen-forms/img/map-navigation.png differ
diff --git a/lab1/screen-forms/navigation-screen.css b/lab1/screen-forms/navigation-screen.css
new file mode 100644
index 0000000..3ff9d77
--- /dev/null
+++ b/lab1/screen-forms/navigation-screen.css
@@ -0,0 +1,357 @@
+/* Специфичные стили для экрана навигации */
+
+/* Главный контейнер для навигационного экрана */
+.navigation-main {
+ padding: 0;
+ position: relative;
+}
+
+/* Полноэкранная карта */
+.map-full {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ background: #E8F5E9;
+}
+
+.map-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* Маркеры на карте */
+.map-marker {
+ position: absolute;
+ transform: translate(-50%, -50%);
+}
+
+/* Маркер текущего пользователя */
+.user-marker {
+ width: 40px;
+ height: 40px;
+ position: relative;
+}
+
+.marker-pulse {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(52, 152, 219, 0.3);
+ animation: pulse-ring 2s ease-out infinite;
+}
+
+@keyframes pulse-ring {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: scale(2);
+ opacity: 0;
+ }
+}
+
+.marker-dot {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 16px;
+ height: 16px;
+ background: var(--color-info);
+ border: 3px solid var(--color-bg-card);
+ border-radius: 50%;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Маркеры других участников */
+.participant-marker {
+ z-index: 10;
+}
+
+.participant-dot {
+ font-size: 24px;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-card);
+ border: 2px solid var(--color-success);
+ border-radius: 50%;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
+/* Маркер контрольной точки */
+.checkpoint-marker {
+ z-index: 5;
+}
+
+.checkpoint-icon {
+ font-size: 32px;
+ width: 45px;
+ height: 45px;
+ line-height: 33px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-card);
+ border: 3px solid var(--color-accent);
+ border-radius: 50%;
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Панель состояния */
+.status-panel {
+ position: absolute;
+ top: var(--spacing-md);
+ left: var(--spacing-md);
+ right: var(--spacing-md);
+ display: flex;
+ gap: var(--spacing-sm);
+ z-index: 20;
+}
+
+.status-item {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ padding: var(--spacing-xs) var(--spacing-md);
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: var(--radius-sm);
+ font-size: var(--font-size-small);
+ font-weight: var(--font-weight-semibold);
+ box-shadow: var(--shadow-md);
+}
+
+.status-icon {
+ font-size: 16px;
+ line-height: 1;
+}
+
+.status-value {
+ color: var(--color-text-dark);
+}
+
+/* Компас-навигатор */
+.compass-card {
+ position: absolute;
+ bottom: calc(var(--nav-height) + var(--spacing-xl));
+ left: var(--spacing-md);
+ background: var(--color-bg-card);
+ border-radius: var(--radius-md);
+ padding: var(--spacing-lg);
+ box-shadow: var(--shadow-lg);
+ display: flex;
+ gap: var(--spacing-lg);
+ align-items: center;
+ z-index: 20;
+}
+
+.compass-container {
+ flex-shrink: 0;
+}
+
+.compass-circle {
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.compass-arrow {
+ width: 0;
+ height: 0;
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+ border-bottom: 24px solid var(--color-bg-card);
+ position: absolute;
+ top: 12px;
+ transform: rotate(45deg);
+}
+
+.compass-direction {
+ position: absolute;
+ bottom: 8px;
+ font-size: var(--font-size-small);
+ font-weight: var(--font-weight-bold);
+ color: var(--color-bg-card);
+}
+
+.compass-info {
+ flex: 1;
+}
+
+.compass-target {
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-dark);
+ margin-bottom: var(--spacing-xs);
+}
+
+.compass-distance {
+ display: flex;
+ align-items: baseline;
+ gap: var(--spacing-sm);
+}
+
+.distance-value {
+ font-size: var(--font-size-large);
+ font-weight: var(--font-weight-bold);
+ color: var(--color-primary);
+}
+
+.distance-time {
+ font-size: var(--font-size-small);
+ color: var(--color-text-medium);
+}
+
+/* Карточка группы */
+.group-card {
+ position: absolute;
+ bottom: calc(var(--nav-height) + var(--spacing-xxxl) * 2 + var(--spacing-md));
+ left: var(--spacing-md);
+ right: var(--spacing-md);
+ background: var(--color-bg-card);
+ border-radius: var(--radius-md);
+ padding: var(--spacing-lg);
+ box-shadow: var(--shadow-lg);
+ z-index: 20;
+}
+
+.group-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: var(--spacing-md);
+}
+
+.group-title {
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-dark);
+}
+
+.group-count {
+ font-size: var(--font-size-small);
+ color: var(--color-text-medium);
+ background: var(--color-bg-secondary);
+ padding: 2px var(--spacing-sm);
+ border-radius: 12px;
+}
+
+.group-members {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+}
+
+.group-member {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
+}
+
+.member-avatar {
+ font-size: 24px;
+ width: 36px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-bg-secondary);
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.member-info {
+ flex: 1;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.member-name {
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-dark);
+}
+
+.member-distance {
+ font-size: var(--font-size-small);
+ color: var(--color-text-medium);
+}
+
+.member-status {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-size: 14px;
+ font-weight: var(--font-weight-bold);
+ flex-shrink: 0;
+}
+
+.status-ok {
+ background: #D5F4E6;
+ color: var(--color-success);
+}
+
+/* Быстрые действия */
+.quick-actions {
+ position: absolute;
+ top: 20px;
+ right: var(--spacing-md);
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ z-index: 25;
+}
+
+.action-btn {
+ width: 90px;
+ height: 90px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 2px;
+ background: var(--color-bg-card);
+ border: none;
+ border-radius: 50%;
+ box-shadow: var(--shadow-md);
+ cursor: pointer;
+ transition: transform var(--transition-fast) ease;
+}
+
+.action-btn:active {
+ transform: scale(0.95);
+}
+
+.action-icon {
+ font-size: 36px;
+ line-height: 1;
+}
+
+.action-label {
+ font-size: 16px;
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-dark);
+}
+
+.action-camera {
+ background: var(--color-accent);
+}
+
+.action-camera .action-label {
+ color: var(--color-bg-card);
+}
\ No newline at end of file
diff --git a/lab1/screen-forms/navigation-screen.html b/lab1/screen-forms/navigation-screen.html
new file mode 100644
index 0000000..50805d0
--- /dev/null
+++ b/lab1/screen-forms/navigation-screen.html
@@ -0,0 +1,166 @@
+
+
+
+
+
+
+ По грибы! - Навигация
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 📶
+ 3G
+
+
+ 🔋
+ 78%
+
+
+ ⏱️
+ 2:15
+
+
+
+
+
До точки №2
+
+ 1.2 км
+ ≈ 25 мин
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+