Files
interfaces/lab1/screen-forms/guide-screen.html
2025-11-24 16:06:02 +03:00

156 lines
7.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="guide-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>
<!-- Поиск -->
<div class="search-bar">
<span class="search-icon">🔍</span>
<input type="text" class="search-input" placeholder="Поиск гриба...">
</div>
<!-- Фильтры -->
<div class="filter-chips">
<button class="chip chip-active">Все</button>
<button class="chip">Съедобные</button>
<button class="chip">Ядовитые</button>
<button class="chip">Условно-съедобные</button>
</div>
<!-- Список грибов -->
<div class="mushrooms-list">
<!-- Карточка гриба - Белый -->
<div class="mushroom-card">
<img src="img/mushrooms/белый.jpg" alt="Белый гриб" class="mushroom-image">
<div class="mushroom-info">
<div class="mushroom-header">
<h3 class="mushroom-name">Белый гриб</h3>
<span class="mushroom-badge badge-safe">✓ Съедобный</span>
</div>
<div class="mushroom-latin">Boletus edulis</div>
<div class="mushroom-season">
<span class="season-icon">📅</span>
<span>Июнь — октябрь</span>
</div>
<div class="mushroom-description">
Ценный съедобный гриб. Шляпка коричневая, ножка толстая, белая.
Мякоть не темнеет на срезе.
</div>
<div class="mushroom-tags">
<span class="tag">Лиственный лес</span>
<span class="tag">Хвойный лес</span>
</div>
</div>
</div>
<!-- Карточка гриба - Лисички -->
<div class="mushroom-card">
<img src="img/mushrooms/лисички.jpg" alt="Лисички" class="mushroom-image">
<div class="mushroom-info">
<div class="mushroom-header">
<h3 class="mushroom-name">Лисичка обыкновенная</h3>
<span class="mushroom-badge badge-safe">✓ Съедобный</span>
</div>
<div class="mushroom-latin">Cantharellus cibarius</div>
<div class="mushroom-season">
<span class="season-icon">📅</span>
<span>Июнь — сентябрь</span>
</div>
<div class="mushroom-description">
Яркий оранжево-желтый гриб. Шляпка воронковидная с волнистым краем.
Не червивеет.
</div>
<div class="mushroom-tags">
<span class="tag">Хвойный лес</span>
<span class="tag">Смешанный лес</span>
</div>
</div>
</div>
<!-- Карточка гриба - Бледная поганка -->
<div class="mushroom-card card-danger">
<img src="img/mushrooms/бледная_поганка.jpg" alt="Бледная поганка" class="mushroom-image">
<div class="mushroom-info">
<div class="mushroom-header">
<h3 class="mushroom-name">Бледная поганка</h3>
<span class="mushroom-badge badge-danger">⚠️ Ядовитый</span>
</div>
<div class="mushroom-latin">Amanita phalloides</div>
<div class="mushroom-season">
<span class="season-icon">📅</span>
<span>Июль — октябрь</span>
</div>
<div class="mushroom-description">
<strong>СМЕРТЕЛЬНО ЯДОВИТ!</strong> Шляпка зеленоватая или белая,
ножка с кольцом и мешковидным влагалищем у основания.
</div>
<div class="warning-block">
⚠️ Можно спутать с шампиньонами или сыроежками
</div>
</div>
</div>
</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">
<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>
</nav>
<!-- Плавающая кнопка SOS -->
<button class="sos-button">
<span class="sos-icon">🆘</span>
</button>
</div>
</body>
</html>