156 lines
7.4 KiB
HTML
156 lines
7.4 KiB
HTML
<!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>
|
||
|