mirror of
https://github.com/boostorg/website-v2.git
synced 2026-02-27 17:42:08 +00:00
a7c4949811
* Broke out fragments to includes * Added Version List template with mobile and desktop layouts * Added Version Detail template with mobile and desktop layouts
94 lines
3.0 KiB
HTML
94 lines
3.0 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">
|
|
<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>
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@500;600&display=swap" rel="stylesheet">
|
|
{% 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 class="h-screen bg-black font-cairo">
|
|
<div class="container mx-auto">
|
|
{% include "includes/_header.html" %}
|
|
|
|
{% block content_wrapper %}
|
|
{% block content %}{% endblock %}
|
|
{% endblock %}
|
|
|
|
{% include "includes/_footer.html" %}
|
|
</div>
|
|
{% block footer_js %}{% endblock %}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
|
|
|
|
<script>
|
|
var params = {
|
|
// animationData: { /* ... */ },
|
|
container: document.getElementById('icon-container'), // required
|
|
path: '{% static "animations/4dots.json" %}', // required
|
|
renderer: 'svg', // required
|
|
loop: true, // optional
|
|
autoplay: true, // optional
|
|
name: "4 Dots", // optional
|
|
};
|
|
|
|
var mobileParams = {
|
|
// animationData: { /* ... */ },
|
|
container: document.getElementById('icon-container-mobile'), // required
|
|
path: '{% static "animations/4dots.json" %}', // required
|
|
renderer: 'svg', // required
|
|
loop: true, // optional
|
|
autoplay: true, // optional
|
|
name: "4 Dots", // optional
|
|
};
|
|
|
|
var scene1Params = {
|
|
// animationData: { /* ... */ },
|
|
container: document.getElementById('scene01'), // required
|
|
path: '{% static "animations/Scene01/data.json" %}', // required
|
|
renderer: 'svg', // required
|
|
loop: true, // optional
|
|
autoplay: true, // optional
|
|
name: "4 Dots", // optional
|
|
};
|
|
|
|
var scene3Params = {
|
|
// animationData: { /* ... */ },
|
|
container: document.getElementById('scene03'), // required
|
|
path: '{% static "animations/Scene03/data.json" %}', // required
|
|
renderer: 'svg', // required
|
|
loop: true, // optional
|
|
autoplay: true, // optional
|
|
name: "4 Dots", // optional
|
|
};
|
|
|
|
anim = lottie.loadAnimation(params);
|
|
mobileAnim = lottie.loadAnimation(mobileParams);
|
|
anim2 = lottie.loadAnimation(scene1Params);
|
|
anim3 = lottie.loadAnimation(scene3Params);
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|