<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>А4</title>
<!-- Подключение Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Стиль для анимации желтого кружка при наведении */
.brand-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
border-radius: 50%;
border: 3px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
}
/* Эффект при наведении курсора */
.brand-logo:hover {
border-color: #ffc107; /* Желтый цвет Bootstrap (warning) */
box-shadow: 0 0 10px #ffc107; /* Легкое желтое свечение */
}
</style>
</head>
<body class="bg-secondary text-white d-flex flex-column h-100">
<!-- Верхняя черная плашка (Навигационная панель) -->
<nav class="navbar navbar-dark bg-dark shadow">
<div class="container-fluid justify-content-center">
<!-- Обернули название в класс brand-logo для эффекта кружка -->
<span class="navbar-brand mb-0 h1 fs-3 fw-bold brand-logo">А4</span>
</div>
</nav>
<!-- Основной контент по центру страницы -->
<main class="flex-grow-1 d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
<a href="{% url 'task_list' %}" class="btn btn-primary btn-lg px-4 gap-3 fw-bold shadow">Перейти к заданиям</a>
<a href="{% url 'about' %}" class="btn btn-light btn-lg px-4 shadow">О нас</a>
</div>
</div>
</main>
<!-- Подвал сайта с кнопкой контактов в самом низу -->
<footer class="footer mt-auto py-3 bg-dark text-center">
<div class="container">
<a href="{% url 'contacts' %}" class="btn btn-outline-info btn-sm">Контакты</a>
</div>
</footer>
<!-- Подключение Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>