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

Элементы по отдельности

Browse Source
This commit is contained in:
Артём Тищенко
2025-11-25 11:52:22 +03:00
parent 77c7e2834a
commit b2f30dfc00
13 changed files with 491 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
lab1/screen-forms/elements/navigation-bar.html Normal file
View File

@@ -0,0 +1,84 @@
<!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">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--color-bg-light);
padding: 40px;
}
.element-container {
width: 375px;
display: flex;
flex-direction: column;
gap: 20px;
}
.element-title {
font-size: 20px;
font-weight: 600;
color: var(--color-text-dark);
text-align: center;
}
.element-description {
font-size: 14px;
color: var(--color-text-medium);
text-align: center;
}
.nav-container {
position: relative;
}
</style>
</head>
<body>
<div class="element-container">
<h2 class="element-title">Навигационная панель</h2>
<div class="nav-container">
<nav class="app-navigation" style="position: relative; bottom: 0;">
<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>
</div>
<p class="element-description">
Высота: 72pt<br>
5 кнопок: Маршрут, Корзина, Главная, Чат, Справочник<br>
Активная вкладка: зелёный текст + подчёркивание<br>
Иконки: 24pt, подписи: 11pt
</p>
</div>
</body>
</html>