diff --git a/lab1/report/img/basket-screen.png b/lab1/report/img/basket-screen.png new file mode 100644 index 0000000..7f147ff Binary files /dev/null and b/lab1/report/img/basket-screen.png differ diff --git a/lab1/report/img/basket-screen2.png b/lab1/report/img/basket-screen2.png new file mode 100644 index 0000000..e989962 Binary files /dev/null and b/lab1/report/img/basket-screen2.png differ diff --git a/lab1/report/img/guide-screen.png b/lab1/report/img/guide-screen.png new file mode 100644 index 0000000..100163e Binary files /dev/null and b/lab1/report/img/guide-screen.png differ diff --git a/lab1/report/report.tex b/lab1/report/report.tex index 1a2d55e..2a97425 100644 --- a/lab1/report/report.tex +++ b/lab1/report/report.tex @@ -989,6 +989,58 @@ \label{fig:navigation-screen} \end{figure} + \newpage + \phantom{text} + \newpage + \subsection{Экран семейной корзины} + + Экран отображает все найденные грибы с возможностью фильтрации, статистику похода и вклад каждого участника. + + \textbf{Основные элементы:} + \begin{itemize} + \item \textbf{Статистика} --- карточка с градиентным фоном показывает общее количество грибов (37), количество видов (6) и время в пути (2:15). + \item \textbf{Вклад участников} --- три карточки с аватарами и счётчиками находок для каждого члена семьи (Иван: 18, Мария: 10, Алиса: 9). + \item \textbf{Карточки находок} --- каждая содержит фото гриба, название, количество экземпляров, автора находки, время и местоположение. Ядовитые грибы выделены предупреждающими бейджами и комментариями. + \end{itemize} + +\begin{figure}[h!] + \centering + \begin{subfigure}[b]{0.34\linewidth} + \centering + \includegraphics[width=\textwidth]{img/basket-screen.png} + % \caption{Общий вид} + \label{fig:basket-screen} + \end{subfigure} + \hspace{1cm} + \begin{subfigure}[b]{0.34\linewidth} + \centering + \includegraphics[width=\textwidth]{img/basket-screen2.png} + % \caption{Детали} + \label{fig:basket-screen2} + \end{subfigure} + \caption{Экран семейной корзины с находками} + \label{fig:basket-screens} +\end{figure} + +\newpage + \subsection{Экран справочника грибов} + + Справочник содержит информацию о распространённых съедобных и ядовитых грибах с фотографиями и описаниями. + + \textbf{Основные элементы:} + \begin{itemize} + \item \textbf{Поисковая строка} --- быстрый поиск гриба по названию. + \item \textbf{Фильтры} --- фильтрация по категориям: все, съедобные, ядовитые, условно-съедобные. + \item \textbf{Карточки грибов} --- фотография, название (русское и латинское), бейдж съедобности, сезон сбора, описание признаков, метки мест обитания. Ядовитые грибы выделены красной рамкой и предупреждающим блоком о возможной путанице с похожими съедобными грибами. + \end{itemize} + +\begin{figure}[h!] + \centering + \includegraphics[width=0.35\linewidth]{img/guide-screen.png} + \caption{Экран справочника грибов} + \label{fig:guide-screen} +\end{figure} + % \section{Выводы} % Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования. diff --git a/lab1/screen-forms/basket-screen.css b/lab1/screen-forms/basket-screen.css new file mode 100644 index 0000000..190c868 --- /dev/null +++ b/lab1/screen-forms/basket-screen.css @@ -0,0 +1,239 @@ +/* Специфичные стили для экрана корзины */ + +/* Карточка статистики */ +.stats-card { + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); + border-radius: var(--radius-md); + padding: var(--spacing-xl); + margin-bottom: var(--spacing-xxl); + display: flex; + justify-content: space-around; + align-items: center; + box-shadow: var(--shadow-lg); +} + +.stat-item { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-xs); +} + +.stat-value { + font-size: 32px; + font-weight: var(--font-weight-bold); + color: var(--color-bg-card); + line-height: 1; +} + +.stat-label { + font-size: var(--font-size-small); + color: rgba(255, 255, 255, 0.9); +} + +.stat-divider { + width: 1px; + height: 40px; + background: rgba(255, 255, 255, 0.3); +} + +/* Секция вклада участников */ +.contributors-section { + margin-bottom: var(--spacing-xxl); +} + +.section-subtitle { + font-size: var(--font-size-large); + font-weight: var(--font-weight-semibold); + color: var(--color-text-dark); + margin-bottom: var(--spacing-md); +} + +.contributors { + display: flex; + gap: var(--spacing-md); +} + +.contributor { + flex: 1; + background: var(--color-bg-card); + border-radius: var(--radius-md); + padding: var(--spacing-lg); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-sm); + box-shadow: var(--shadow-sm); +} + +.contributor-avatar { + font-size: 36px; + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-bg-secondary); + border-radius: 50%; +} + +.contributor-name { + font-size: var(--font-size-small); + color: var(--color-text-medium); +} + +.contributor-count { + font-size: var(--font-size-xlarge); + font-weight: var(--font-weight-bold); + color: var(--color-primary); +} + +/* Секция находок */ +.findings-section { + margin-bottom: var(--spacing-xl); +} + +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--spacing-md); +} + +.filter-btn { + display: flex; + align-items: center; + gap: var(--spacing-xs); + padding: var(--spacing-xs) var(--spacing-md); + background: var(--color-bg-secondary); + border: none; + border-radius: var(--radius-sm); + font-size: var(--font-size-small); + font-weight: var(--font-weight-medium); + color: var(--color-text-dark); + cursor: pointer; + transition: background var(--transition-fast) ease; +} + +.filter-btn:active { + background: #D5DBDB; +} + +.filter-icon { + font-size: 10px; + color: var(--color-text-medium); +} + +/* Карточка находки */ +.finding-card { + background: var(--color-bg-card); + border-radius: var(--radius-md); + padding: var(--spacing-md); + margin-bottom: var(--spacing-md); + display: flex; + gap: var(--spacing-md); + align-items: center; + box-shadow: var(--shadow-sm); + cursor: pointer; + transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease; +} + +.finding-card:active { + transform: scale(0.98); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.finding-image { + width: 80px; + height: 80px; + border-radius: var(--radius-sm); + object-fit: cover; + flex-shrink: 0; +} + +.finding-content { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--spacing-xs); +} + +.finding-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.finding-name { + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + color: var(--color-text-dark); +} + +.finding-count { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + color: var(--color-primary); +} + +.finding-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--spacing-sm); + border-radius: 12px; + font-size: var(--font-size-tiny); + font-weight: var(--font-weight-semibold); +} + +.badge-warning { + background: #FEF5E7; + color: #D68910; +} + +.finding-author { + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-size: var(--font-size-small); +} + +.author-avatar { + font-size: 16px; +} + +.author-name { + color: var(--color-text-dark); + font-weight: var(--font-weight-medium); +} + +.finding-time { + color: var(--color-text-medium); + margin-left: auto; +} + +.finding-location { + font-size: var(--font-size-small); + color: var(--color-text-medium); +} + +.finding-note { + font-size: var(--font-size-small); + color: var(--color-text-dark); + font-style: italic; + padding: var(--spacing-xs) var(--spacing-sm); + background: #FEF5E7; + border-radius: var(--radius-sm); + border-left: 3px solid var(--color-warning); +} + +.finding-action { + font-size: 24px; + color: var(--color-text-medium); + background: none; + border: none; + padding: var(--spacing-sm); + cursor: pointer; + flex-shrink: 0; +} + diff --git a/lab1/screen-forms/basket-screen.html b/lab1/screen-forms/basket-screen.html new file mode 100644 index 0000000..6839855 --- /dev/null +++ b/lab1/screen-forms/basket-screen.html @@ -0,0 +1,175 @@ + + + + + + + По грибы! - Корзина + + + + + +
+ + +
+
+ +

По грибы!

+
+
+ + +
+
+

Семейная корзина

+ + +
+
+
37
+
грибов
+
+
+
+
6
+
видов
+
+
+
+
2:15
+
в пути
+
+
+ + +
+

Вклад участников

+
+
+
👴
+
Иван
+
18
+
+
+
👩
+
Мария
+
10
+
+
+
👧
+
Алиса
+
9
+
+
+
+ + +
+
+

Находки

+ +
+ + +
+ Белый гриб +
+
+

Белый гриб

+ ×12 +
+
+ 👴 + Иван + 14:35 +
+
+ 📍 1.2 км от точки №2 +
+
+ +
+ +
+ Лисички +
+
+

Лисички

+ ×15 +
+
+ 👩 + Мария + 14:20 +
+
+ 📍 0.8 км от точки №1 +
+
+ +
+ +
+ Бледная поганка +
+
+

Бледная поганка

+ ⚠️ Ядовит +
+
+ 👧 + Алиса + 13:45 +
+
+ Иван: "Это ядовитый гриб, не брать!" +
+
+ +
+ +
+ +
+
+
+ + + + + + + +
+ + + + diff --git a/lab1/screen-forms/guide-screen.css b/lab1/screen-forms/guide-screen.css new file mode 100644 index 0000000..fe0b63d --- /dev/null +++ b/lab1/screen-forms/guide-screen.css @@ -0,0 +1,195 @@ +/* Специфичные стили для экрана справочника */ + +/* Поисковая строка */ +.search-bar { + 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-lg); + box-shadow: var(--shadow-sm); +} + +.search-icon { + font-size: 20px; + color: var(--color-text-medium); +} + +.search-input { + flex: 1; + border: none; + outline: none; + font-size: var(--font-size-base); + font-family: var(--font-family); + color: var(--color-text-dark); + background: transparent; +} + +.search-input::placeholder { + color: var(--color-text-medium); +} + +/* Фильтры-чипсы */ +.filter-chips { + display: flex; + gap: var(--spacing-sm); + overflow-x: auto; + margin-bottom: var(--spacing-xxl); + padding-bottom: var(--spacing-xs); + -webkit-overflow-scrolling: touch; +} + +.filter-chips::-webkit-scrollbar { + display: none; +} + +.chip { + padding: var(--spacing-xs) var(--spacing-lg); + border: 2px solid var(--color-border); + border-radius: 20px; + background: var(--color-bg-card); + font-size: var(--font-size-small); + font-weight: var(--font-weight-medium); + color: var(--color-text-dark); + white-space: nowrap; + cursor: pointer; + transition: all var(--transition-fast) ease; +} + +.chip:active { + transform: scale(0.95); +} + +.chip-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-bg-card); +} + +/* Список грибов */ +.mushrooms-list { + display: flex; + flex-direction: column; + gap: var(--spacing-lg); +} + +/* Карточка гриба */ +.mushroom-card { + background: var(--color-bg-card); + border-radius: var(--radius-md); + overflow: hidden; + box-shadow: var(--shadow-md); + cursor: pointer; + transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease; +} + +.mushroom-card:active { + transform: scale(0.99); + box-shadow: var(--shadow-sm); +} + +.card-danger { + border: 2px solid var(--color-danger); +} + +.mushroom-image { + width: 100%; + height: 180px; + object-fit: cover; +} + +.mushroom-info { + padding: var(--spacing-lg); +} + +.mushroom-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-xs); +} + +.mushroom-name { + font-size: var(--font-size-large); + font-weight: var(--font-weight-semibold); + color: var(--color-text-dark); + flex: 1; +} + +.mushroom-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px var(--spacing-md); + border-radius: 16px; + font-size: var(--font-size-tiny); + font-weight: var(--font-weight-semibold); + white-space: nowrap; +} + +.badge-safe { + background: #D5F4E6; + color: var(--color-success); +} + +.badge-danger { + background: #FADBD8; + color: var(--color-danger); +} + +.mushroom-latin { + font-size: var(--font-size-small); + font-style: italic; + color: var(--color-text-medium); + margin-bottom: var(--spacing-md); +} + +.mushroom-season { + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-size: var(--font-size-small); + color: var(--color-text-dark); + margin-bottom: var(--spacing-md); +} + +.season-icon { + font-size: 16px; +} + +.mushroom-description { + font-size: var(--font-size-base); + line-height: var(--line-height-relaxed); + color: var(--color-text-dark); + margin-bottom: var(--spacing-md); +} + +.mushroom-tags { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-xs); +} + +.tag { + padding: 4px var(--spacing-md); + background: var(--color-bg-secondary); + border-radius: 12px; + font-size: var(--font-size-tiny); + font-weight: var(--font-weight-medium); + color: var(--color-text-dark); +} + +.warning-block { + margin-top: var(--spacing-md); + padding: var(--spacing-md); + background: #FEF5E7; + border-left: 4px solid var(--color-danger); + border-radius: var(--radius-sm); + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); + color: var(--color-danger); +} + diff --git a/lab1/screen-forms/guide-screen.html b/lab1/screen-forms/guide-screen.html new file mode 100644 index 0000000..4d08895 --- /dev/null +++ b/lab1/screen-forms/guide-screen.html @@ -0,0 +1,155 @@ + + + + + + + По грибы! - Справочник + + + + + +
+ + +
+
+ +

По грибы!

+
+
+ + +
+
+

Справочник грибов

+ + +
+ 🔍 + +
+ + +
+ + + + +
+ + +
+ + +
+ Белый гриб +
+
+

Белый гриб

+ ✓ Съедобный +
+
Boletus edulis
+
+ 📅 + Июнь — октябрь +
+
+ Ценный съедобный гриб. Шляпка коричневая, ножка толстая, белая. + Мякоть не темнеет на срезе. +
+
+ Лиственный лес + Хвойный лес +
+
+
+ + +
+ Лисички +
+
+

Лисичка обыкновенная

+ ✓ Съедобный +
+
Cantharellus cibarius
+
+ 📅 + Июнь — сентябрь +
+
+ Яркий оранжево-желтый гриб. Шляпка воронковидная с волнистым краем. + Не червивеет. +
+
+ Хвойный лес + Смешанный лес +
+
+
+ + +
+ Бледная поганка +
+
+

Бледная поганка

+ ⚠️ Ядовитый +
+
Amanita phalloides
+
+ 📅 + Июль — октябрь +
+
+ СМЕРТЕЛЬНО ЯДОВИТ! Шляпка зеленоватая или белая, + ножка с кольцом и мешковидным влагалищем у основания. +
+
+ ⚠️ Можно спутать с шампиньонами или сыроежками +
+
+
+ +
+ +
+
+
+ + + + + + + +
+ + + + diff --git a/lab1/screen-forms/img/mushrooms/белый.jpg b/lab1/screen-forms/img/mushrooms/белый.jpg new file mode 100644 index 0000000..4193750 Binary files /dev/null and b/lab1/screen-forms/img/mushrooms/белый.jpg differ diff --git a/lab1/screen-forms/img/mushrooms/бледная_поганка.jpg b/lab1/screen-forms/img/mushrooms/бледная_поганка.jpg new file mode 100644 index 0000000..4b618e5 Binary files /dev/null and b/lab1/screen-forms/img/mushrooms/бледная_поганка.jpg differ diff --git a/lab1/screen-forms/img/mushrooms/лисички.jpg b/lab1/screen-forms/img/mushrooms/лисички.jpg new file mode 100644 index 0000000..c0b587e Binary files /dev/null and b/lab1/screen-forms/img/mushrooms/лисички.jpg differ