templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="icon" type="image/png" href="/assets/images/candy.png">
  7.     <link rel="stylesheet" href="./fonts/fonts.css" />
  8.     <link rel="stylesheet" href="/assets/css/style.css?v={{ "now"|date("U") }}" />
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  10.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  11.     <!-- for toaster -->
  12.     <script src="/assets/butterup/butterup.min.js"></script>
  13.     <link rel="stylesheet" href="/assets/butterup/butterup.min.css?v={{ "now"|date("U") }}">
  14.     <meta name="csrf-token-mines" content="{{ csrf_token('mines_api') }}">
  15.     <meta name="csrf-token-nvuti" content="{{ csrf_token('nvuti') }}">
  16.     
  17.     <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  18.     
  19.     <title>{% block title %} Candy {% endblock %}</title>
  20.     {% block stylesheets %}{% endblock %}
  21. </head>
  22. <body>
  23.     <div data-barba="wrapper">
  24.         {% include 'components/header.html.twig' %}
  25.         {% include 'components/sidebar.html.twig' %}
  26.         {% include 'components/mobile.html.twig' %}
  27.         <main data-barba="container" data-barba-namespace="{{ app.request.attributes.get('_route') }}">
  28.             <!-- Тут мейн-контент -->
  29.             {% block body %}{% endblock %}
  30.         </main>
  31.         {% include 'components/footer.html.twig' %}
  32.         {% include 'components/modals.html.twig' %}
  33.     </div>
  34.     <div id="loader" class="loader">
  35.         <div class="loader-wrapper">
  36.             <object data="/assets/images/loader-icon.svg" type="image/svg+xml" class="loader-icon"></object>
  37.             <div class="loading-progress">
  38.                 <div class="loader-value"></div>
  39.             </div>
  40.         </div>
  41.     </div>
  42. </body>
  43. <script src="https://unpkg.com/@barba/core"></script>
  44. <script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
  45. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  46. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  47. <script type="module">
  48.     import {
  49.         initSwipers,
  50.         destroySwipers
  51.     } from '/assets/js/swipers.js?v={{ "now"|date("U") }}';
  52.     import {
  53.         initMines,
  54.         destroyMines
  55.     } from '/assets/js/mines.js?v={{ "now"|date("U") }}';
  56.     import {
  57.         initNvuti,
  58.     } from '/assets/js/nvuti.js?v={{ "now"|date("U") }}';
  59.     function updateSidebarActive() {
  60.         document
  61.             .querySelectorAll('.sidebar-nav-item')
  62.             .forEach(el => {
  63.                 const href = el.getAttribute('href');
  64.                 el.classList.toggle('active', window.location.pathname.startsWith(href));
  65.             });
  66.     }
  67.     barba.init({
  68.         sync: true,
  69.         
  70.         views: [{
  71.                 namespace: 'mines_page',
  72.                 afterEnter({
  73.                     next
  74.                 }) {
  75.                     initMines(next.container);
  76.                 },
  77.                 beforeLeave() {
  78.                     destroyMines();
  79.                 },
  80.             },
  81.             {
  82.                 namespace: 'nvuti_page',
  83.                 afterEnter({
  84.                     next
  85.                 }) {
  86.                     initNvuti(next.container);
  87.                 },
  88.             }
  89.         ],
  90.         transitions: [{
  91.             name: 'fade',
  92.             async leave({
  93.                 current
  94.             }) {
  95.                 await gsap.to(current.container, {
  96.                     opacity: 0,
  97.                     duration: 0.3
  98.                 });
  99.             },
  100.             enter({
  101.                 next
  102.             }) {
  103.                 gsap.from(next.container, {
  104.                     opacity: 0,
  105.                     duration: 0.3
  106.                 });
  107.                 initSwipers(next.container);
  108.             }
  109.         }]
  110.     });
  111.     barba.hooks.beforeEnter(() => {
  112.         document.querySelectorAll('img[src$=".svg"]').forEach(img => {
  113.             img.style.opacity = '0';
  114.             img.style.transition = 'opacity 0.3s';
  115.         });
  116.     });
  117.     barba.hooks.afterEnter(() => {
  118.         updateSidebarActive();
  119.         $('html, body').animate({
  120.             scrollTop: 0
  121.         }, 0);
  122.         document.querySelectorAll('img[src$=".svg"]').forEach(img => {
  123.             const oldSrc = img.getAttribute('src');
  124.             if (oldSrc) {
  125.                 img.setAttribute('src', oldSrc.split('?')[0] + '?reload=' + new Date().getTime());
  126.                 img.onload = () => {
  127.                     img.style.opacity = '1';
  128.                 };
  129.             }
  130.         });
  131.         initMyChart();
  132.     });
  133.     barba.hooks.afterLeave(() => {
  134.         destroySwipers();
  135.     });
  136.     updateSidebarActive();
  137.     document.addEventListener('DOMContentLoaded', () => {
  138.         initSwipers(document);
  139.     });
  140.     document.addEventListener('click', (e) => {
  141.         const link = e.target.closest('a[href]');
  142.         if (!link) return;
  143.         const href = link.getAttribute('href');
  144.         const currentPath = window.location.pathname;
  145.         const cleanHref = href.split('?')[0].split('#')[0];
  146.         const cleanCurrent = currentPath.split('?')[0].split('#')[0];
  147.         if (cleanHref === cleanCurrent) {
  148.             e.preventDefault();
  149.             e.stopPropagation();
  150.         }
  151.     });
  152.     {% if user %}
  153.         window.addEventListener('resize', () => {
  154.             initMyChart();
  155.         });
  156.         // Для рефки (яхз как по другому сделать, может когда нибудь поменяю)
  157.         let myChart = null;
  158.         function initMyChart() {
  159.             const canvas = document.getElementById("myChart");
  160.             if (!canvas) return;
  161.             const ctx = canvas.getContext("2d");
  162.             const lineWidth = window.innerWidth < 768 ? 2 : 4;
  163.             const pointRadius = window.innerWidth < 768 ? 3 : 7;
  164.             if (myChart) {
  165.                 myChart.destroy();
  166.             }
  167.             myChart = new Chart(ctx, {
  168.                 type: "line",
  169.                 data: {
  170.                     labels: [1, 2, 3, 4, 5, 6],
  171.                     datasets: [{
  172.                         label: "",
  173.                         data: [1, 2, 1.5, 4, 3.8, 5],
  174.                         borderColor: "rgb(127, 149, 252)",
  175.                         borderWidth: lineWidth,
  176.                         fill: false,
  177.                         tension: 0.45,
  178.                         pointRadius: pointRadius,
  179.                         pointBackgroundColor: "#7F95FC",
  180.                     }, ],
  181.                 },
  182.                 options: {
  183.                     responsive: true,
  184.                     maintainAspectRatio: false,
  185.                     scales: {
  186.                         y: {
  187.                             beginAtZero: false,
  188.                             ticks: {
  189.                                 stepSize: 1,
  190.                                 color: "#fff",
  191.                                 font: {
  192.                                     family: "Google Sans",
  193.                                     size: 18,
  194.                                     weight: "500",
  195.                                 },
  196.                                 padding: 19,
  197.                             },
  198.                             grid: {
  199.                                 color: "#1D1F2C",
  200.                                 lineWidth: 1,
  201.                             },
  202.                         },
  203.                         x: {
  204.                             type: "linear",
  205.                             offset: false,
  206.                             grid: {
  207.                                 offset: false,
  208.                             },
  209.                             ticks: {
  210.                                 color: "#4D4F59",
  211.                                 font: {
  212.                                     family: "Google Sans",
  213.                                     size: 18,
  214.                                     weight: "500",
  215.                                 },
  216.                                 padding: 28,
  217.                             },
  218.                         },
  219.                     },
  220.                     plugins: {
  221.                         legend: {
  222.                             display: false,
  223.                         },
  224.                     },
  225.                 },
  226.             });
  227.         }
  228.     {% endif %}
  229. </script>
  230. <script src="/assets/js/countup.js"></script>
  231. <script src="/assets/js/script.js?v={{ "now"|date("U") }}"></script>
  232. {% block javascripts %}{% endblock %}
  233. </html>