<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/assets/images/candy.png">
<link rel="stylesheet" href="./fonts/fonts.css" />
<link rel="stylesheet" href="/assets/css/style.css?v={{ "now"|date("U") }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- for toaster -->
<script src="/assets/butterup/butterup.min.js"></script>
<link rel="stylesheet" href="/assets/butterup/butterup.min.css?v={{ "now"|date("U") }}">
<meta name="csrf-token-mines" content="{{ csrf_token('mines_api') }}">
<meta name="csrf-token-nvuti" content="{{ csrf_token('nvuti') }}">
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<title>{% block title %} Candy {% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
<div data-barba="wrapper">
{% include 'components/header.html.twig' %}
{% include 'components/sidebar.html.twig' %}
{% include 'components/mobile.html.twig' %}
<main data-barba="container" data-barba-namespace="{{ app.request.attributes.get('_route') }}">
<!-- Тут мейн-контент -->
{% block body %}{% endblock %}
</main>
{% include 'components/footer.html.twig' %}
{% include 'components/modals.html.twig' %}
</div>
<div id="loader" class="loader">
<div class="loader-wrapper">
<object data="/assets/images/loader-icon.svg" type="image/svg+xml" class="loader-icon"></object>
<div class="loading-progress">
<div class="loader-value"></div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script type="module">
import {
initSwipers,
destroySwipers
} from '/assets/js/swipers.js?v={{ "now"|date("U") }}';
import {
initMines,
destroyMines
} from '/assets/js/mines.js?v={{ "now"|date("U") }}';
import {
initNvuti,
} from '/assets/js/nvuti.js?v={{ "now"|date("U") }}';
function updateSidebarActive() {
document
.querySelectorAll('.sidebar-nav-item')
.forEach(el => {
const href = el.getAttribute('href');
el.classList.toggle('active', window.location.pathname.startsWith(href));
});
}
barba.init({
sync: true,
views: [{
namespace: 'mines_page',
afterEnter({
next
}) {
initMines(next.container);
},
beforeLeave() {
destroyMines();
},
},
{
namespace: 'nvuti_page',
afterEnter({
next
}) {
initNvuti(next.container);
},
}
],
transitions: [{
name: 'fade',
async leave({
current
}) {
await gsap.to(current.container, {
opacity: 0,
duration: 0.3
});
},
enter({
next
}) {
gsap.from(next.container, {
opacity: 0,
duration: 0.3
});
initSwipers(next.container);
}
}]
});
barba.hooks.beforeEnter(() => {
document.querySelectorAll('img[src$=".svg"]').forEach(img => {
img.style.opacity = '0';
img.style.transition = 'opacity 0.3s';
});
});
barba.hooks.afterEnter(() => {
updateSidebarActive();
$('html, body').animate({
scrollTop: 0
}, 0);
document.querySelectorAll('img[src$=".svg"]').forEach(img => {
const oldSrc = img.getAttribute('src');
if (oldSrc) {
img.setAttribute('src', oldSrc.split('?')[0] + '?reload=' + new Date().getTime());
img.onload = () => {
img.style.opacity = '1';
};
}
});
initMyChart();
});
barba.hooks.afterLeave(() => {
destroySwipers();
});
updateSidebarActive();
document.addEventListener('DOMContentLoaded', () => {
initSwipers(document);
});
document.addEventListener('click', (e) => {
const link = e.target.closest('a[href]');
if (!link) return;
const href = link.getAttribute('href');
const currentPath = window.location.pathname;
const cleanHref = href.split('?')[0].split('#')[0];
const cleanCurrent = currentPath.split('?')[0].split('#')[0];
if (cleanHref === cleanCurrent) {
e.preventDefault();
e.stopPropagation();
}
});
{% if user %}
window.addEventListener('resize', () => {
initMyChart();
});
// Для рефки (яхз как по другому сделать, может когда нибудь поменяю)
let myChart = null;
function initMyChart() {
const canvas = document.getElementById("myChart");
if (!canvas) return;
const ctx = canvas.getContext("2d");
const lineWidth = window.innerWidth < 768 ? 2 : 4;
const pointRadius = window.innerWidth < 768 ? 3 : 7;
if (myChart) {
myChart.destroy();
}
myChart = new Chart(ctx, {
type: "line",
data: {
labels: [1, 2, 3, 4, 5, 6],
datasets: [{
label: "",
data: [1, 2, 1.5, 4, 3.8, 5],
borderColor: "rgb(127, 149, 252)",
borderWidth: lineWidth,
fill: false,
tension: 0.45,
pointRadius: pointRadius,
pointBackgroundColor: "#7F95FC",
}, ],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: false,
ticks: {
stepSize: 1,
color: "#fff",
font: {
family: "Google Sans",
size: 18,
weight: "500",
},
padding: 19,
},
grid: {
color: "#1D1F2C",
lineWidth: 1,
},
},
x: {
type: "linear",
offset: false,
grid: {
offset: false,
},
ticks: {
color: "#4D4F59",
font: {
family: "Google Sans",
size: 18,
weight: "500",
},
padding: 28,
},
},
},
plugins: {
legend: {
display: false,
},
},
},
});
}
{% endif %}
</script>
<script src="/assets/js/countup.js"></script>
<script src="/assets/js/script.js?v={{ "now"|date("U") }}"></script>
{% block javascripts %}{% endblock %}
</html>