Files
volleyball_miniapp/templates/base.html
2026-07-01 17:58:05 +03:00

70 lines
2.7 KiB
HTML

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{% block title %}Voley{% endblock %}</title>
<!-- Tailwind (CDN) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Flatpickr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ru.js"></script>
<style>
.container-max { max-width: 980px; }
.fp-theme .flatpickr-calendar { border-radius: 14px; }
/* Glassmorphism */
.glass {
background: rgba(15, 23, 42, 0.38);
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow:
0 10px 30px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.06);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.glass-hover:hover { border-color: rgba(148, 163, 184, 0.30); }
</style>
</head>
<body class="min-h-screen text-slate-100 relative overflow-x-hidden">
<!-- Фон-картинка + затемнение/размытие (картинку положите в templates/bg.jpg) -->
<div class="fixed inset-0 -z-10">
<div class="absolute inset-0 bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900"></div>
<!-- именно <img>, чтобы браузер точно загрузил файл -->
<img
src="/assets/bg.jpg?v={{ bg_version }}"
alt=""
class="absolute inset-0 w-full h-full object-cover opacity-55"
loading="eager"
decoding="async"
/>
<!-- подложка и “дымка”, чтобы контент читался -->
<div class="absolute inset-0 bg-slate-950/45 backdrop-blur-sm"></div>
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(99,102,241,0.18),transparent_55%)]"></div>
</div>
<div class="mx-auto container-max px-4 pb-16">
<header class="pt-6 pb-4 flex items-center justify-between gap-3">
<div>
<div class="text-xs uppercase tracking-widest text-slate-400">Волейбол</div>
<h1 class="text-2xl font-semibold">{% block header %}Учет посещаемости{% endblock %}</h1>
</div>
<nav class="text-sm text-slate-300">
{% block nav %}{% endblock %}
</nav>
</header>
{% block content %}{% endblock %}
</div>
<script src="/static/app.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>