mirror of
https://github.com/boostorg/website-v2.git
synced 2026-02-26 17:22:09 +00:00
113 lines
3.6 KiB
HTML
113 lines
3.6 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>{% block title %}{% 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 href="{% static 'css/styles.css' %}" rel="stylesheet">
|
|
<!-- Google fonts for Cairo Medium and SemiBold -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
|
|
<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>
|
|
<!-- detect dark or light mode -->
|
|
<script src="{% static 'js/DetectMode.js' %}"></script>
|
|
{% block extra_head %}{% endblock %}
|
|
|
|
<style>
|
|
#lottie{
|
|
width:100%;
|
|
height:100%;
|
|
display:block;
|
|
overflow: hidden;
|
|
transform: translate3d(0,0,0);
|
|
text-align: center;
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body x-init="() => {const m = localStorage.getItem('colorMode');
|
|
if (m !== 'dark' && m !== 'light') return;
|
|
mode = m;
|
|
}"
|
|
class="h-screen dark:bg-black bg-stone/60 font-cairo" {% block body_id %}{% endblock %}>
|
|
<div class="container mx-auto">
|
|
{% include "includes/_header.html" %}
|
|
|
|
|
|
<div class="w-full">
|
|
{% block messages %}{% include "partials/messages.html" %}{% endblock messages %}
|
|
</div>
|
|
|
|
{% comment %}body block is for use in forums{% endcomment %}
|
|
{% block forum_body %}{% endblock %}
|
|
|
|
<div class="md:px-11">
|
|
{% block content_wrapper %}
|
|
{% block subnav %}{% endblock %}
|
|
{% block content %}{% endblock %}
|
|
{% endblock %}
|
|
</div>
|
|
|
|
{% include "includes/_footer.html" %}
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
|
|
|
|
{% block footer_js %}{% endblock %}
|
|
|
|
<script>
|
|
var params = {
|
|
container: document.getElementById('icon-container'),
|
|
path: '{% static "animations/4dots.json" %}',
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
name: "4 Dots",
|
|
};
|
|
|
|
var mobileParams = {
|
|
container: document.getElementById('icon-container-mobile'),
|
|
path: '{% static "animations/4dots.json" %}',
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
name: "4 Dots",
|
|
};
|
|
|
|
var scene1Params = {
|
|
container: document.getElementById('scene01'),
|
|
path: '{% static "animations/Scene01/data.json" %}',
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
name: "4 Dots",
|
|
};
|
|
|
|
var scene3Params = {
|
|
container: document.getElementById('scene03'),
|
|
path: '{% static "animations/Scene03/data.json" %}',
|
|
renderer: 'svg',
|
|
loop: true,
|
|
autoplay: true,
|
|
name: "4 Dots",
|
|
};
|
|
|
|
anim = lottie.loadAnimation(params);
|
|
mobileAnim = lottie.loadAnimation(mobileParams);
|
|
anim2 = lottie.loadAnimation(scene1Params);
|
|
anim3 = lottie.loadAnimation(scene3Params);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|