Экран справочника и корзины
This commit is contained in:
155
lab1/screen-forms/guide-screen.html
Normal file
155
lab1/screen-forms/guide-screen.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<!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 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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user