univer-7th-semester/interfaces
Code Actions Releases 2

Шаблон экранных форм

Browse Source
This commit is contained in:
Артём Тищенко
2025-11-24 14:38:21 +03:00
parent c41a79e141
commit 3a80e084a1
8 changed files with 622 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
lab1/screen-forms/template.html Normal file
View File

@@ -0,0 +1,91 @@
<!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="template.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>