mirror of
https://github.com/boostorg/website-v2.git
synced 2026-02-27 05:32:08 +00:00
b386f1cc3a
A newly designed library detail view with placeholders for content to be hooked up. Other changes included for header and footer and new graphing library.
115 lines
3.7 KiB
HTML
115 lines
3.7 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>
|
|
<!-- 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 %}
|
|
|
|
<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="md:mx-auto lg:container">
|
|
{% 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 min-vh-110">
|
|
{% 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>
|