Files
website-v2/templates/base.html
2023-07-26 08:54:35 -05:00

84 lines
3.4 KiB
HTML

{% load static %}
<!DOCTYPE html>
<html>
<head>
<!-- Google fonts for Cairo -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Cairo:200:latin', 'Cairo:300:latin', 'Cairo:400:latin', 'Cairo:500:latin', 'Cairo:600:latin', 'Cairo:700:latin', 'Cairo:800:latin']
}
});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1N51ZC252K"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1N51ZC252K');
</script>
<title>{% block title %}Boost{% endblock %}</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% block description %}{% endblock %}">
<meta name="keywords" content="{% block keywords %}{% endblock %}">
<meta name="author" content="{% block author %}{% endblock %}">
<link rel="shortcut icon" href="{% static 'img/Boost_Symbol_Transparent.svg' %}" type="image/x-icon">
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
<meta class="meta-theme" name="theme-color" content="#FAFAFA" data-dark="#18181B" data-light="#FAFAFA" />
<meta class="meta-theme" name="color-scheme" content="light" data-dark="dark" data-light="light" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.css" />
{% comment %}just testing out boxicons for quick animations on hover (add bx-tada-hover, bx-burst-hover, etc as classes){% endcomment %}
<link href="https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@2.x.x/dist/alpine-clipboard.js" defer></script>
<script src="//unpkg.com/alpinejs" defer></script>
<script src="https://unpkg.com/htmx.org@1.8.5" integrity="sha384-7aHh9lqPYGYZ7sTHvzP1t3BAfLhYSTy9ArHdP3Xsr9/3TlGurYgcPBoFmXX2TX/w" crossorigin="anonymous"></script>
<!-- TODO bring this local if we like it -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- detect dark or light mode -->
<script src="{% static 'js/DetectMode.js' %}"></script>
{% block extra_head %}{% endblock %}
</head>
<body x-init="() => {const m = localStorage.getItem('colorMode');
if (m !== 'dark' && m !== 'light') return;
mode = m;
document.head.querySelectorAll('.meta-theme').forEach((el) => {
el.setAttribute('content', el.getAttribute('data-' + m));
});
}"
class="h-screen bg-gray-200 dark:bg-black font-cairo" {% block body_id %}{% endblock %}>
<div class="px-6 mx-auto md:mt-14">
{% include "includes/_header.html" %}
<div class="w-full">
{% block messages %}{% include "partials/messages.html" %}{% endblock messages %}
</div>
<div class="md:px-3 min-vh-110">
{% block content_wrapper %}
{% block subnav %}{% endblock %}
{% block content %}{% endblock %}
{% endblock %}
</div>
{% include "includes/_footer.html" %}
</div>
{% block footer_js %}{% endblock %}
</body>
</html>