mirror of
https://github.com/boostorg/website-v2.git
synced 2026-02-27 05:32:08 +00:00
393 lines
12 KiB
HTML
393 lines
12 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<!-- 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="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<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;
|
|
}
|
|
.portion {
|
|
height: 50vh; /* Set the height to 50% of the viewport height */
|
|
width: 100%; /* Set the width to 100% of the parent container */
|
|
border: groove;
|
|
overflow: auto;
|
|
padding: 10px;
|
|
}
|
|
.section-one-right{
|
|
display: inline-block;
|
|
width: 49%;
|
|
}
|
|
.section-one-left{
|
|
padding: 20px 100px 0px 20px;
|
|
display: inline-block;
|
|
width: 49%;
|
|
vertical-align: top;
|
|
}
|
|
.top-heading{
|
|
font-weight: 900;
|
|
}
|
|
.top-sub-heading{
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
margin: 0px 0px 20px 0px;
|
|
}
|
|
.top-select {
|
|
padding: 10px 15px;
|
|
font-size: 16px;
|
|
border: 1px solid orange;
|
|
border-radius: 4px;
|
|
width: 200px;
|
|
background-color: #172A34;
|
|
}
|
|
option {
|
|
background-color: #172A34;
|
|
color: orange;
|
|
}
|
|
option:hover {
|
|
background-color: orange !important;
|
|
color: #fff;
|
|
}
|
|
.download-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 200px;
|
|
padding: 10px 0px;
|
|
background-color: #172A34;
|
|
color: orange !important;
|
|
border: 1px solid orange;
|
|
border-radius: 6px;
|
|
margin: 10px 0px 10px 0px;
|
|
font-size: 16px;
|
|
}
|
|
.download-button i {
|
|
margin-right: 12px;
|
|
}
|
|
.bsl-button{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 200px;
|
|
padding: 10px 0px;
|
|
background-color: #172A34;
|
|
color: orange !important;
|
|
border: 1px solid orange;
|
|
border-radius: 6px;
|
|
margin: 0px 0px;
|
|
font-size: 16px;
|
|
}
|
|
.link-text{
|
|
margin: 0px 0px 0px 20px;
|
|
text-decoration: underline;
|
|
font-size: 18px;
|
|
}
|
|
.inline-select{
|
|
padding: 5px 15px;
|
|
font-size: 16px;
|
|
border: 1px solid orange;
|
|
border-radius: 4px;
|
|
width: 180px;
|
|
background-color: #172A34;
|
|
display: inline-block;
|
|
margin: 0px;
|
|
}
|
|
.sub-heading{
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
padding: 0px 80px 20px 0px;
|
|
}
|
|
.line-breaker{
|
|
width: 10%;
|
|
text-align: center;
|
|
border-color: orange;
|
|
margin: 50px auto;
|
|
}
|
|
.copy-icon{
|
|
border-radius: 4px;
|
|
border: 1px solid orange;
|
|
padding: 10px;
|
|
display: inline-block;
|
|
background-color: #172A34;
|
|
color: orange;
|
|
}
|
|
.copy-text{
|
|
display: inline-block;
|
|
border: 1px solid orange;
|
|
padding: 7px 30px;
|
|
border-radius: 4px;
|
|
margin: 5px 2px;
|
|
}
|
|
.circle {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: #172A34;
|
|
border: 1px solid orange;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 5px;
|
|
}
|
|
.circle-text {
|
|
font-size: 18px;
|
|
color: orange
|
|
}
|
|
.section-two-left{
|
|
width: 48%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 30px 0px 0px 0px;
|
|
}
|
|
.section-two-right{
|
|
width: 51%;
|
|
display: inline-block;
|
|
height: 63vh;
|
|
}
|
|
fieldset{
|
|
border: 1px solid orange;
|
|
border-top-color: orange;
|
|
padding: 10px 20px 10px 20px;
|
|
height: 100%;
|
|
}
|
|
legend{
|
|
padding: 0px 8px;
|
|
font-size: 18px;
|
|
color: orange;
|
|
border: none;
|
|
}
|
|
.compiler-block{
|
|
height: 100%;
|
|
margin: 0px !important;
|
|
width: 59%;
|
|
display: inline-block;
|
|
}
|
|
.compiler-output{
|
|
height: 43vh;
|
|
border: 1px solid #2D5266;
|
|
border-radius: 4px;
|
|
background-color: #172A34;
|
|
margin: 24px 0px 0px 0px;
|
|
width: 40%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.compiler-text-area{
|
|
height: 43vh;
|
|
width: 100% !important;
|
|
margin: 0px;
|
|
}
|
|
.run-btn{
|
|
padding: 5px 20px;
|
|
background-color: #172A34;
|
|
color: orange;
|
|
border: 1px solid orange;
|
|
border-radius: 6px;
|
|
margin: 5px 0px 10px 0px;
|
|
}
|
|
.no-scrollbar-scroll, .compiler-output, .compiler-text-area {
|
|
overflow-y: scroll;
|
|
}
|
|
.no-scrollbar-scroll::-webkit-scrollbar,
|
|
.compiler-output::-webkit-scrollbar,
|
|
.compiler-text-area::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar-scroll, .compiler-output, .compiler-text-area{
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.section-04{
|
|
height: 55vh;
|
|
overflow-y: scroll;
|
|
padding: 20px;
|
|
border: 1px solid lightgray;
|
|
border-radius: 8px;
|
|
}
|
|
.news-container{
|
|
border: 1px solid lightgray;
|
|
border-radius: 8px;
|
|
margin: 0px 0px 10px 0px;
|
|
padding: 20px 10px 10px 10px;
|
|
height: 100%;
|
|
width: 49.5% !important;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.news-text{
|
|
overflow-wrap: break-word;
|
|
padding: 5px 20px 5px 10px;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
width: 49.5%;
|
|
vertical-align: middle;
|
|
}
|
|
.news-image{
|
|
display: inline-block;
|
|
width: 49.5%;
|
|
vertical-align: top;
|
|
width: 270px;
|
|
height: 265px;
|
|
object-fit: cover;
|
|
}
|
|
.section-05{
|
|
min-height: 55vh;
|
|
padding: 20px;
|
|
border: 1px solid lightgray;
|
|
border-radius: 8px;
|
|
}
|
|
.activity-containers{
|
|
width: 32.8%;
|
|
display: inline-block;
|
|
height: 50vh;
|
|
vertical-align: top;
|
|
}
|
|
.activity-select{
|
|
padding: 5px 10px;
|
|
font-size: 16px;
|
|
border: 1px solid orange;
|
|
border-radius: 4px;
|
|
width: 90%;
|
|
margin: 0px;
|
|
background-color: #172A34;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body x-init="() => {const m = localStorage.getItem('colorMode');
|
|
if (m !== 'dark' && m !== 'light') return;
|
|
mode = 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>
|
|
|
|
{% comment %}body block is for use in forums{% endcomment %}
|
|
{% block forum_body %}{% endblock %}
|
|
|
|
<div class="md:px-3 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>
|
|
|
|
|
|
<script>
|
|
function copyToClipboard() {
|
|
var text = document.getElementById("myText").innerText;
|
|
|
|
// Create a temporary textarea element
|
|
var tempTextArea = document.createElement("textarea");
|
|
tempTextArea.value = text;
|
|
document.body.appendChild(tempTextArea);
|
|
|
|
// Select and copy the text
|
|
tempTextArea.select();
|
|
document.execCommand("copy");
|
|
|
|
// Remove the temporary textarea
|
|
document.body.removeChild(tempTextArea);
|
|
|
|
alert("Text copied to clipboard");
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|