91 lines
3.6 KiB
HTML
91 lines
3.6 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">
|
||
</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>
|
||
|
||
<p class="screen-description">
|
||
Описание или инструкции для текущего экрана.
|
||
Этот текст объясняет пользователю, что он может сделать на данном экране.
|
||
</p>
|
||
|
||
<!-- Пример карточки -->
|
||
<div class="card">
|
||
<h3 class="card-title">Заголовок карточки</h3>
|
||
<p class="card-text">Содержимое карточки с информацией</p>
|
||
</div>
|
||
|
||
<!-- Пример списка -->
|
||
<div class="list-item">
|
||
<div class="list-item-icon">📍</div>
|
||
<div class="list-item-content">
|
||
<div class="list-item-title">Элемент списка</div>
|
||
<div class="list-item-subtitle">Дополнительная информация</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-item">
|
||
<div class="list-item-icon">🍄</div>
|
||
<div class="list-item-content">
|
||
<div class="list-item-title">Второй элемент</div>
|
||
<div class="list-item-subtitle">Подробности</div>
|
||
</div>
|
||
</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> |