Экран справочника и корзины
This commit is contained in:
175
lab1/screen-forms/basket-screen.html
Normal file
175
lab1/screen-forms/basket-screen.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!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="basket-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="stats-card">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">37</div>
|
||||
<div class="stat-label">грибов</div>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">6</div>
|
||||
<div class="stat-label">видов</div>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">2:15</div>
|
||||
<div class="stat-label">в пути</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Вклад участников -->
|
||||
<div class="contributors-section">
|
||||
<h3 class="section-subtitle">Вклад участников</h3>
|
||||
<div class="contributors">
|
||||
<div class="contributor">
|
||||
<div class="contributor-avatar">👴</div>
|
||||
<div class="contributor-name">Иван</div>
|
||||
<div class="contributor-count">18</div>
|
||||
</div>
|
||||
<div class="contributor">
|
||||
<div class="contributor-avatar">👩</div>
|
||||
<div class="contributor-name">Мария</div>
|
||||
<div class="contributor-count">10</div>
|
||||
</div>
|
||||
<div class="contributor">
|
||||
<div class="contributor-avatar">👧</div>
|
||||
<div class="contributor-name">Алиса</div>
|
||||
<div class="contributor-count">9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Список находок -->
|
||||
<div class="findings-section">
|
||||
<div class="section-header">
|
||||
<h3 class="section-subtitle">Находки</h3>
|
||||
<button class="filter-btn">
|
||||
<span>Все виды</span>
|
||||
<span class="filter-icon">▼</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Карточка находки -->
|
||||
<div class="finding-card">
|
||||
<img src="img/mushrooms/белый.jpg" alt="Белый гриб" class="finding-image">
|
||||
<div class="finding-content">
|
||||
<div class="finding-header">
|
||||
<h4 class="finding-name">Белый гриб</h4>
|
||||
<span class="finding-count">×12</span>
|
||||
</div>
|
||||
<div class="finding-author">
|
||||
<span class="author-avatar">👴</span>
|
||||
<span class="author-name">Иван</span>
|
||||
<span class="finding-time">14:35</span>
|
||||
</div>
|
||||
<div class="finding-location">
|
||||
📍 1.2 км от точки №2
|
||||
</div>
|
||||
</div>
|
||||
<button class="finding-action">›</button>
|
||||
</div>
|
||||
|
||||
<div class="finding-card">
|
||||
<img src="img/mushrooms/лисички.jpg" alt="Лисички" class="finding-image">
|
||||
<div class="finding-content">
|
||||
<div class="finding-header">
|
||||
<h4 class="finding-name">Лисички</h4>
|
||||
<span class="finding-count">×15</span>
|
||||
</div>
|
||||
<div class="finding-author">
|
||||
<span class="author-avatar">👩</span>
|
||||
<span class="author-name">Мария</span>
|
||||
<span class="finding-time">14:20</span>
|
||||
</div>
|
||||
<div class="finding-location">
|
||||
📍 0.8 км от точки №1
|
||||
</div>
|
||||
</div>
|
||||
<button class="finding-action">›</button>
|
||||
</div>
|
||||
|
||||
<div class="finding-card">
|
||||
<img src="img/mushrooms/бледная_поганка.jpg" alt="Бледная поганка" class="finding-image">
|
||||
<div class="finding-content">
|
||||
<div class="finding-header">
|
||||
<h4 class="finding-name">Бледная поганка</h4>
|
||||
<span class="finding-badge badge-warning">⚠️ Ядовит</span>
|
||||
</div>
|
||||
<div class="finding-author">
|
||||
<span class="author-avatar">👧</span>
|
||||
<span class="author-name">Алиса</span>
|
||||
<span class="finding-time">13:45</span>
|
||||
</div>
|
||||
<div class="finding-note">
|
||||
Иван: "Это ядовитый гриб, не брать!"
|
||||
</div>
|
||||
</div>
|
||||
<button class="finding-action">›</button>
|
||||
</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 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>
|
||||
<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