feat(easel): add bootstrap

This commit is contained in:
2026-04-22 21:42:39 +03:00
parent 94870a5c86
commit ecb574e286
27 changed files with 1627 additions and 240 deletions

View File

@@ -9,6 +9,10 @@
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet"
href="/static/main/gallery-static.css?v={{version}}">
<script type="module"
src="/static/main/gallery-static.js?v={{version}}"></script>
<link rel="stylesheet"
href="/static/common/style.css?v={{version}}">
<link rel="icon"
@@ -17,22 +21,83 @@
{% endblock %}
</head>
<body class="app-container">
<div class="app-menu">
<a class="app-link-home"
href="/">
<div></div>
</a>
</div>
<div class="app-content">
<h3 class="app-header">
{% block header %}{% endblock %}</span>
</h3>
{% block content %}{% endblock %}
<div class="app-footer">
{% block footer %}{% endblock %}
</div>
<body>
<div class="app col-lg-8 mx-auto p-3 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<a href="/"
class="d-flex align-items-center text-dark text-decoration-none">
<div class="icon me-2"
style="background-image: url(/static/common/gallery.png);"></div>
<span class="fs-4 text-body">API Gallery</span>
</a>
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
<li class="nav-item dropdown">
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<i class="bi me-2 opacity-50 theme-icon-active"></i>
<span class="d-lg-none ms-2"
id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end"
aria-labelledby="bd-theme-text">
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light"
aria-pressed="false">
<i class="bi bi-sun-fill me-2 opacity-50 theme-icon"></i>
Light
</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark"
aria-pressed="false">
<i class="bi bi-moon-stars-fill me-2 opacity-50 theme-icon"></i>
Dark
</button>
</li>
<li>
<button type="button"
class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="auto"
aria-pressed="true">
<i class="bi bi-circle-half me-2 opacity-50 theme-icon"></i>
Auto
</button>
</li>
</ul>
</li>
</ul>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer class="pt-5 my-5 text-muted border-top">
Created by shmyga &middot; &copy; 2026
</footer>
</div>
<script>
(function () {
document.toggleTheme = () => {
const current = document.documentElement.getAttribute('data-bs-theme');
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-bs-theme', next);
localStorage.setItem('theme', next);
};
const params = new URLSearchParams(window.location.search);
const widget = params.get('widget') || window.location.hostname.startsWith('weather');
if (widget) {
document.body.classList.add('widget');
}
}());
</script>
</body>
</html>