Чат

lab1/report/report.tex

@@ -913,11 +913,12 @@
 
 \begin{figure}[h!]
    \centering
-   \includegraphics[width=0.6\linewidth]{img/template-screen.png}
+   \includegraphics[width=0.4\linewidth]{img/template-screen.png}
    \caption{Шаблон экранной формы мобильного приложения "По грибы!"}
    \label{fig:template}
 \end{figure}
 
+\newpage
     \section{Эскизы экранных форм}
     
     На основе разработанного шаблона созданы экранные формы для ключевых процессов приложения. Каждая форма реализует описанные ранее функции и соответствует принципам дизайна ISO 9241-161.
@@ -989,8 +990,6 @@
    \label{fig:navigation-screen}
 \end{figure}
 
-    \newpage
-    \phantom{text}
     \newpage
     \subsection{Экран семейной корзины}
 
@@ -1041,6 +1040,35 @@
    \label{fig:guide-screen}
 \end{figure}
 
+    \newpage
+    \subsection{Экран семейного чата}
+
+    Чат обеспечивает оперативную коммуникацию между участниками похода с возможностью отправки текста, фотографий и геолокации.
+
+    \textbf{Основные элементы:}
+    \begin{itemize}
+        \item \textbf{Область сообщений} --- прокручиваемый список с сообщениями участников, системными уведомлениями о достижении контрольных точек. Сообщения других участников слева с аватарами, свои сообщения справа в зелёных пузырях.
+        \item \textbf{Типы сообщений} --- текстовые, фотографии грибов, карточки с геолокацией (показывают расстояние до отправителя), системные уведомления (начало похода, достижение точек).
+        \item \textbf{Панель ввода} --- кнопки быстрых действий (камера, отправить геолокацию), поле ввода текста, кнопка отправки. Все элементы увеличенного размера для удобного использования в перчатках.
+    \end{itemize}
+
+\begin{figure}[h!]
+   \centering
+   \begin{subfigure}[b]{0.34\linewidth}
+       \centering
+       \includegraphics[width=\textwidth]{img/chat-screen.png}
+       \label{fig:chat-screen}
+   \end{subfigure}
+   \hspace{1cm}
+   \begin{subfigure}[b]{0.34\linewidth}
+       \centering
+       \includegraphics[width=\textwidth]{img/chat-screen2.png}
+       \label{fig:chat-screen2}
+   \end{subfigure}
+   \caption{Экран семейного чата}
+   \label{fig:chat-screens}
+\end{figure}
+
     % \section{Выводы}
     % Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования.
 

lab1/screen-forms/basket-screen.html

@@ -158,8 +158,8 @@
                 <span class="nav-label">Чат</span>
             </button>
             <button class="nav-button">
-                <span class="nav-icon">👥</span>
+                <span class="nav-icon">📖</span>
-                <span class="nav-label">Группа</span>
+                <span class="nav-label">Справочник</span>
             </button>
         </nav>
 

lab1/screen-forms/chat-screen.css

@@ -0,0 +1,263 @@
+/* Специфичные стили для экрана чата */
+
+/* Главный контейнер чата */
+.chat-main {
+    padding: 0;
+}
+
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+/* Область сообщений */
+.messages-area {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-lg);
+    padding-bottom: var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+/* Системное сообщение */
+.system-message {
+    display: flex;
+    justify-content: center;
+    margin: var(--spacing-sm) 0;
+}
+
+.system-text {
+    background: rgba(0, 0, 0, 0.05);
+    color: var(--color-text-medium);
+    font-size: var(--font-size-small);
+    padding: var(--spacing-xs) var(--spacing-lg);
+    border-radius: 16px;
+    text-align: center;
+}
+
+/* Сообщение */
+.message {
+    display: flex;
+    gap: var(--spacing-sm);
+    max-width: 80%;
+    animation: slideIn 0.2s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Сообщение от другого участника */
+.message-other {
+    align-self: flex-start;
+}
+
+/* Своё сообщение */
+.message-own {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+}
+
+/* Аватар отправителя */
+.message-avatar {
+    font-size: 32px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-secondary);
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+/* Пузырь сообщения */
+.message-bubble {
+    background: var(--color-bg-card);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    box-shadow: var(--shadow-sm);
+}
+
+.message-own .message-bubble {
+    background: var(--color-primary);
+    color: var(--color-bg-card);
+}
+
+.message-author {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+    margin-bottom: var(--spacing-xs);
+}
+
+.message-own .message-author {
+    display: none;
+}
+
+.message-text {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-relaxed);
+    color: var(--color-text-dark);
+    word-wrap: break-word;
+    margin-bottom: var(--spacing-xs);
+}
+
+.message-own .message-text {
+    color: var(--color-bg-card);
+}
+
+.message-time {
+    font-size: var(--font-size-tiny);
+    color: var(--color-text-medium);
+    text-align: right;
+}
+
+.message-own .message-time {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Фото в сообщении */
+.message-photo {
+    width: 100%;
+    max-width: 200px;
+    height: auto;
+    border-radius: var(--radius-sm);
+    margin-bottom: var(--spacing-sm);
+    cursor: pointer;
+}
+
+/* Карточка местоположения */
+.location-card {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    background: var(--color-bg-secondary);
+    padding: var(--spacing-md);
+    border-radius: var(--radius-sm);
+    margin-bottom: var(--spacing-xs);
+}
+
+.location-icon {
+    font-size: 28px;
+    flex-shrink: 0;
+}
+
+.location-info {
+    flex: 1;
+}
+
+.location-text {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-dark);
+    margin-bottom: 2px;
+}
+
+.location-distance {
+    font-size: var(--font-size-small);
+    color: var(--color-text-medium);
+}
+
+/* Панель ввода */
+.input-panel {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: var(--color-bg-card);
+    border-top: 1px solid var(--color-border);
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.input-action-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-secondary);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform var(--transition-fast) ease, background var(--transition-fast) ease;
+    flex-shrink: 0;
+}
+
+.input-action-btn:active {
+    transform: scale(0.95);
+    background: #D5DBDB;
+}
+
+.action-icon {
+    font-size: 20px;
+}
+
+.message-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: var(--color-bg-secondary);
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-radius: 20px;
+    font-size: var(--font-size-base);
+    font-family: var(--font-family);
+    color: var(--color-text-dark);
+}
+
+.message-input::placeholder {
+    color: var(--color-text-medium);
+}
+
+.send-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-primary);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform var(--transition-fast) ease, background var(--transition-fast) ease;
+    flex-shrink: 0;
+}
+
+.send-btn:active {
+    transform: scale(0.95);
+    background: #245238;
+}
+
+.send-icon {
+    font-size: 20px;
+    color: var(--color-bg-card);
+}
+
+/* Скроллбар для области сообщений */
+.messages-area::-webkit-scrollbar {
+    width: 4px;
+}
+
+.messages-area::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.messages-area::-webkit-scrollbar-thumb {
+    background: #BDC3C7;
+    border-radius: 2px;
+}
+
+.messages-area::-webkit-scrollbar-thumb:hover {
+    background: #95A5A6;
+}
+

lab1/screen-forms/chat-screen.html

@@ -0,0 +1,154 @@
+<!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="chat-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 chat-main">
+            <div class="chat-container">
+
+                <!-- Сообщения чата -->
+                <div class="messages-area">
+
+                    <!-- Системное сообщение -->
+                    <div class="system-message">
+                        <div class="system-text">Поход начался в 09:00</div>
+                    </div>
+
+                    <!-- Сообщение от другого участника -->
+                    <div class="message message-other">
+                        <div class="message-avatar">👴</div>
+                        <div class="message-bubble">
+                            <div class="message-author">Иван</div>
+                            <div class="message-text">Нашел поляну с белыми! Идите сюда</div>
+                            <div class="message-time">14:35</div>
+                        </div>
+                    </div>
+
+                    <!-- Сообщение с местоположением -->
+                    <div class="message message-other">
+                        <div class="message-avatar">👴</div>
+                        <div class="message-bubble">
+                            <div class="message-author">Иван</div>
+                            <div class="location-card">
+                                <div class="location-icon">📍</div>
+                                <div class="location-info">
+                                    <div class="location-text">Отправил геолокацию</div>
+                                    <div class="location-distance">1.2 км от вас</div>
+                                </div>
+                            </div>
+                            <div class="message-time">14:36</div>
+                        </div>
+                    </div>
+
+                    <!-- Своё сообщение -->
+                    <div class="message message-own">
+                        <div class="message-bubble">
+                            <div class="message-text">Отлично! Идём к тебе</div>
+                            <div class="message-time">14:37</div>
+                        </div>
+                    </div>
+
+                    <!-- Сообщение с фото -->
+                    <div class="message message-other">
+                        <div class="message-avatar">👧</div>
+                        <div class="message-bubble">
+                            <div class="message-author">Алиса</div>
+                            <img src="img/mushrooms/лисички.jpg" alt="Фото гриба" class="message-photo">
+                            <div class="message-text">Мама, это лисички?</div>
+                            <div class="message-time">14:38</div>
+                        </div>
+                    </div>
+
+                    <!-- Своё сообщение -->
+                    <div class="message message-own">
+                        <div class="message-bubble">
+                            <div class="message-text">Да, лисички! Молодец! 👍</div>
+                            <div class="message-time">14:39</div>
+                        </div>
+                    </div>
+
+                    <!-- Системное сообщение -->
+                    <div class="system-message">
+                        <div class="system-text">🎯 Иван достиг точки встречи №2</div>
+                    </div>
+
+                    <!-- Сообщение от другого участника -->
+                    <div class="message message-other">
+                        <div class="message-avatar">👧</div>
+                        <div class="message-bubble">
+                            <div class="message-author">Алиса</div>
+                            <div class="message-text">Я тоже собрала целую корзину!</div>
+                            <div class="message-time">14:42</div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- Панель ввода сообщения -->
+                <div class="input-panel">
+                    <button class="input-action-btn">
+                        <span class="action-icon">📷</span>
+                    </button>
+                    <button class="input-action-btn">
+                        <span class="action-icon">📍</span>
+                    </button>
+                    <input type="text" class="message-input" placeholder="Сообщение...">
+                    <button class="send-btn">
+                        <span class="send-icon">📤</span>
+                    </button>
+                </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">
+                <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>
+        </nav>
+
+        <!-- Плавающая кнопка SOS -->
+        <button class="sos-button">
+            <span class="sos-icon">🆘</span>
+        </button>
+
+    </div>
+</body>
+
+</html>

lab1/screen-forms/guide-screen.html

@@ -129,7 +129,7 @@
                 <span class="nav-icon">🧺</span>
                 <span class="nav-label">Корзина</span>
             </button>
-            <button class="nav-button nav-button-active">
+            <button class="nav-button">
                 <span class="nav-icon">🏠</span>
                 <span class="nav-label">Главная</span>
             </button>
@@ -137,9 +137,9 @@
                 <span class="nav-icon">💬</span>
                 <span class="nav-label">Чат</span>
             </button>
-            <button class="nav-button">
+            <button class="nav-button nav-button-active">
-                <span class="nav-icon">👥</span>
+                <span class="nav-icon">📖</span>
-                <span class="nav-label">Группа</span>
+                <span class="nav-label">Справочник</span>
             </button>
         </nav>
 

lab1/screen-forms/navigation-screen.html

@@ -150,8 +150,8 @@
                 <span class="nav-label">Чат</span>
             </button>
             <button class="nav-button">
-                <span class="nav-icon">👥</span>
+                <span class="nav-icon">📖</span>
-                <span class="nav-label">Группа</span>
+                <span class="nav-label">Справочник</span>
             </button>
         </nav>
 

lab1/screen-forms/planning-screen.html

@@ -166,8 +166,8 @@
                 <span class="nav-label">Чат</span>
             </button>
             <button class="nav-button">
-                <span class="nav-icon">👥</span>
+                <span class="nav-icon">📖</span>
-                <span class="nav-label">Группа</span>
+                <span class="nav-label">Справочник</span>
             </button>
         </nav>
 

lab1/screen-forms/template.html

@@ -75,8 +75,8 @@
                 <span class="nav-label">Чат</span>
             </button>
             <button class="nav-button">
-                <span class="nav-icon">👥</span>
+                <span class="nav-icon">📖</span>
-                <span class="nav-label">Группа</span>
+                <span class="nav-label">Справочник</span>
             </button>
         </nav>