templates/base.html.twig line 1

Open in your IDE?
  1. <!doctype html>
  2. <html lang="{{ app.request.locale }}">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     {% set companyObj = app.request.get('companyInner') %}
  9.     {% set isMobile = isMobile(companyObj) %}
  10.     {% set companyStyles = companyStyles(app.request.get('companyInner')) %}
  11.     {% if companyStyles.favicon is defined and companyStyles.favicon is not empty %}
  12.         <link rel="icon" type="{{ companyStyles.favicon.contentType }}" href="{{ sonata_path(companyStyles.favicon, 'reference') }}">
  13.     {% else %}
  14.         <link rel="icon" type="image/png" href="{{ app.request.getSchemeAndHttpHost() }}/build/images/favicon-96x96.png">
  15.     {% endif %}
  16.     {% if page is defined and page is not empty %}
  17.         {% set metaInfo = getMeta(page) %}
  18.     {% endif %}
  19.     {% if metaInfo is defined and metaInfo is not empty %}
  20.         {% block meta %}
  21.             {% include '/components/meta/meta.twig' %}
  22.         {% endblock %}
  23.     {% else %}
  24.         <title>{% block pageTitle %}Index Page{% endblock %}</title>
  25.     {% endif %}
  26.     {% set companyObj = app.request.get('companyInner') %}
  27.     {% if companyObj.slug is defined and companyObj.slug == 'e-sim' %}
  28.         <!-- Google Tag Manager -->
  29.         <script>(function (w, d, s, l, i) {
  30.             w[l] = w[l] || [];
  31.             w[l].push({
  32.               'gtm.start':
  33.                   new Date().getTime(), event: 'gtm.js'
  34.             });
  35.             var f = d.getElementsByTagName(s)[0],
  36.                 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
  37.             j.async = true;
  38.             j.src =
  39.                 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
  40.             f.parentNode.insertBefore(j, f);
  41.           })(window, document, 'script', 'dataLayer', 'GTM-MKLD3JHN');</script>
  42.         <!-- End Google Tag Manager -->
  43.     {% endif %}
  45.     {% if companyObj.slug is defined and companyObj.slug == 'pl' %}
  46.         <!-- Google Tag Manager -->
  48.         <script>(function (w, d, s, l, i) {
  49.             w[l] = w[l] || [];
  50.             w[l].push(
  51.                 {'gtm.start': new Date().getTime(), event: 'gtm.js'}
  52.             );
  53.             var f = d.getElementsByTagName(s)[0],
  54.                 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
  55.             j.async = true;
  56.             j.src =
  57.                 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
  58.             f.parentNode.insertBefore(j, f);
  59.           })(window, document, 'script', 'dataLayer', 'GTM-56R88XPR');</script>
  60.         <!-- End Google Tag Manager -->
  61.     {% endif %}
  62.     {% if companyObj.slug is defined and companyObj.slug == 'cz' %}
  63.         <!-- Google Tag Manager -->
  64.         <script>(function (w, d, s, l, i) {
  65.             w[l] = w[l] || [];
  66.             w[l].push(
  67.                 {'gtm.start': new Date().getTime(), event: 'gtm.js'}
  68.             );
  69.             var f = d.getElementsByTagName(s)[0],
  70.                 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
  71.             j.async = true;
  72.             j.src =
  73.                 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
  74.             f.parentNode.insertBefore(j, f);
  75.           })(window, document, 'script', 'dataLayer', 'GTM-N5JBGRSW');</script>
  76.         <!-- End Google Tag Manager -->
  77.     {% endif %}
  79.     {% if companyObj.slug is defined and companyObj.slug == 'buy' %}
  80.         <!-- Google Tag Manager -->
  81.         <script>(function (w, d, s, l, i) {
  82.             w[l] = w[l] || [];
  83.             w[l].push(
  84.                 {'gtm.start': new Date().getTime(), event: 'gtm.js'}
  85.             );
  86.             var f = d.getElementsByTagName(s)[0],
  87.                 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
  88.             j.async = true;
  89.             j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
  90.             f.parentNode.insertBefore(j, f);
  91.           })(window, document, 'script', 'dataLayer', 'GTM-M4P5JKNJ');</script>
  92.         <!-- End Google Tag Manager -->
  93.     {% endif %}
  95.     {% block stylesheets %}
  96.         {{ encore_entry_link_tags('app') }}
  97.     {% endblock %}
  102.     {% set referer = getReferer(app.request) %}
  103.     {#         {{dump(referer)}} #}
  104.     {#            {{ sonata_media(companyStyles.mainImage, 'reference') }} #}
  105.     {#            <input type="hidden" name="_token" value="{{ csrf_token('registration') }}"> #}
  106.     {#            <input type="hidden" name="_token" value="{{ csrf_token('email-verification') }}"> #}
  107.     {#            <input type="hidden" name="_token" value="{{ csrf_token('code-resend') }}"> #}
  108.     {#            <input type="hidden" name="_token" value="{{ csrf_token('password-reset') }}"> #}
  109.     {#    <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_key }}"></script> #}
  110.     {% if companyStyles.fonts is defined and companyStyles.fonts is not empty %}
  111.         {{ companyStyles.fonts|raw }}
  112.     {% endif %}
  113.     {% if companyStyles.fontFamily is defined and companyStyles.fontFamily is not empty %}
  114.         <style>
  115.             * {
  116.                 font-family: {{ companyStyles.fontFamily|raw }};
  117.             }
  118.         </style>
  119.     {% endif %}
  120.     {% if not isMobile %}
  121.         <style>
  123.             /* width */
  124.             ::-webkit-scrollbar {
  125.                 width: 4px;
  126.                 padding-left: 18px;
  127.             }
  129.             /* Track */
  130.             ::-webkit-scrollbar-track {
  131.                 box-shadow: inset 0 0 5px grey;
  132.                 border-radius: 500px;
  133.                 margin-right: 10px;
  134.             }
  136.             /* Handle */
  137.             ::-webkit-scrollbar-thumb {
  138.                 background: {{ companyStyles.buttonColor }};
  139.                 border-radius: 500px;
  140.             }
  142.             /* Handle on hover */
  143.             ::-webkit-scrollbar-thumb:hover {
  144.                 background: {{ companyStyles.buttonColor }};
  145.             }
  147.             .stepper-wrapper {
  148.                 margin-top: 50px;
  149.                 display: flex;
  150.                 justify-content: space-between;
  151.                 margin-bottom: 20px;
  152.                 gap: 5px;
  153.             }
  155.             .stepper-item {
  156.                 position: relative;
  157.                 display: flex;
  158.                 flex-direction: column;
  159.                 align-items: center;
  160.                 flex: 1;
  161.                 text-align: center;
  162.                 @media (max-width: 500px) {
  163.                     font-size: 10px;
  164.                 }
  166.                 @media (min-width: 501px) and (max-width: 768px) {
  167.                     font-size: 12px;
  168.                 }
  169.             }
  171.             .stepper-item::before {
  172.                 position: absolute;
  173.                 content: "";
  174.                 border-bottom: 2px solid #F7F7FA;
  175.                 width: 100%;
  176.                 top: 20px;
  177.                 left: -50%;
  178.                 z-index: 2;
  179.                 @media (max-width: 768px) {
  180.                     top: 15px;
  181.                 }
  182.             }
  184.             .stepper-item::after {
  185.                 position: absolute;
  186.                 content: "";
  187.                 border-bottom: 2px solid #F7F7FA;
  188.                 width: 100%;
  189.                 top: 20px;
  190.                 left: 50%;
  191.                 z-index: 2;
  192.                 @media (max-width: 768px) {
  193.                     top: 15px;
  194.                 }
  195.             }
  197.             .stepper-item .step-counter {
  198.                 position: relative;
  199.                 z-index: 5;
  200.                 display: flex;
  201.                 justify-content: center;
  202.                 align-items: center;
  203.                 width: 40px;
  204.                 height: 40px;
  205.                 border-radius: 50%;
  206.                 background: #F7F7FA;
  207.                 margin-bottom: 6px;
  208.                 border: 2px solid #E2E2E9;
  209.                 @media (max-width: 768px) {
  210.                     width: 30px;
  211.                     height: 30px;
  212.                 }
  213.             }
  215.             .stepper-item.active {
  216.                 font-weight: 500;
  217.             }
  219.             .stepper-item.active .step-counter {
  220.                 background-color: {{ companyStyles.buttonColor }};
  221.                 color: white;
  222.                 border-color: {{ companyStyles.buttonColor }};
  223.             }
  225.             .stepper-item.active .step-name {
  226.                 color: {{ companyStyles.buttonColor }};
  227.             }
  229.             .stepper-item.completed .step-counter {
  230.                 background-color: {{ companyStyles.buttonColor }};
  231.                 border-color: {{ companyStyles.buttonColor }};
  232.             }
  235.             .stepper-item.completed::after {
  236.                 position: absolute;
  237.                 content: "";
  238.                 border-bottom: 2px solid{{ companyStyles.buttonColor }};
  239.                 width: 100%;
  240.                 top: 20px;
  241.                 left: 50%;
  242.                 z-index: 3;
  243.             }
  245.             .stepper-item:first-child::before {
  246.                 content: none;
  247.             }
  249.             .stepper-item:last-child::after {
  250.                 content: none;
  251.             }
  253.             .rating {
  254.                 display: inline-flex;
  255.                 flex-direction: row; /* Естественный порядок слева направо */
  256.                 font-size: 24px;
  257.                 line-height: 1;
  258.             }
  260.             .rating input {
  261.                 display: none; /* Скрываем радиокнопки */
  262.             }
  264.             .rating label {
  265.                 cursor: default;
  266.                 color: #ccc; /* Цвет пустой звезды */
  267.                 padding: 0 2px;
  268.             }
  270.             /* Подсветка звезд в зависимости от data-rating */
  271.             .rating[data-rating="1"] label:nth-of-type(-n+1),
  272.             .rating[data-rating="2"] label:nth-of-type(-n+2),
  273.             .rating[data-rating="3"] label:nth-of-type(-n+3),
  274.             .rating[data-rating="4"] label:nth-of-type(-n+4),
  275.             .rating[data-rating="5"] label:nth-of-type(-n+5) {
  276.                 color: {{ companyStyles.buttonColor }}; /* Цвет заполненной звезды */
  277.             }
  279.             /* Убираем интерактивность */
  280.             .rating label:hover,
  281.             .rating label:hover ~ label {
  282.                 color: #ccc; /* Отключаем hover-эффект */
  283.             }
  285.             .splide__pagination {
  286.                 bottom: -24px;
  287.                 gap: 4px;
  288.             }
  290.             .splide__pagination__page.is-active {
  291.                 background-color: {{ companyStyles.buttonColor }};
  292.                 opacity: 1;
  293.                 width: 48px;
  294.                 border-radius: 500px;
  295.                 transform: none;
  296.             }
  298.             .splide__pagination__page {
  299.                 background-color: #F7F7FA;
  300.                 background: #F7F7FA;
  301.                 opacity: 1;
  302.                 width: 16px;
  303.                 height: 8px;
  304.                 border-radius: 500px;
  305.             }
  307.             .banner {
  308.                 @media (max-width: 768px) {
  309.                     background-image: none !important;
  310.                 }
  311.             }
  312.         </style>
  313.     {% endif %}
  314.     {% block additional_stylesheets %}
  315.     {% endblock %}
  316.     {% if companyStyles.linkTextColor is defined %}
  317.         <style>
  318.             .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  319.                 color: {{ companyStyles.linkTextColor }};
  320.             }
  321.             .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  322.                 color: {{ companyStyles.linkTextColor }};
  323.             }
  324.         </style>
  325.     {% endif %}
  326. </head>
  327. <body style="{% if isMobile %}{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::BODY_STYLES')) }}{% else %}#FFF{% endif %}"
  328.       {% if recaptcha_enabled %}data-recaptcha_key="{{ recaptcha_key }}"{% endif %}>
  329. {% if companyObj.slug is defined and companyObj.slug == 'e-sim' %}
  330.     <!-- Google Tag Manager (noscript) -->
  331.     <noscript>
  332.         <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MKLD3JHN"
  333.                 height="0" width="0" style="display:none;visibility:hidden">
  334.         </iframe>
  335.     </noscript>
  336.     <!-- End Google Tag Manager (noscript) -->
  337. {% endif %}
  339. {% if companyObj.slug is defined and companyObj.slug == 'pl' %}
  340.     <!-- Google Tag Manager (noscript) -->
  341.     <noscript>
  342.         <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-56R88XPR"
  343.                 height="0" width="0" style="display:none;visibility:hidden"></iframe>
  344.     </noscript>
  345.     <!-- End Google Tag Manager (noscript) -->
  346. {% endif %}
  347. {% if companyObj.slug is defined and companyObj.slug == 'cz' %}
  348.     <!-- Google Tag Manager (noscript) -->
  349.     <noscript>
  350.         <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N5JBGRSW"
  351.                 height="0" width="0" style="display:none;visibility:hidden"></iframe>
  352.     </noscript>
  353.     <!-- End Google Tag Manager (noscript) -->
  354. {% endif %}
  355. {% if companyObj.slug is defined and companyObj.slug == 'buy' %}
  356.     <!-- Google Tag Manager (noscript) -->
  357.     <noscript>
  358.         <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M4P5JKNJ"
  359.                 height="0" width="0" style="display:none;visibility:hidden"></iframe>
  360.     </noscript>
  361.     <!-- End Google Tag Manager (noscript) -->
  362. {% endif %}
  364. {% if page is defined and page is not empty %}
  365.     {% if operator is defined %}
  366.         {% set faqOperator = operator %}
  367.     {% else %}
  368.         {% set faqOperator = null %}
  369.     {% endif %}
  370.     {% set faqs = getFaq(app.request.get('companyInner'), page, faqOperator) %}
  371.     {% include '@App/shared/ui/modal/modalFaqs.html.twig' with {
  372.         faqItems: faqs
  373.     } %}
  374. {% endif %}
  375. <!-- break-words -->
  376. {#            #todo стилизовать и может по другому хотите выводить #}
  377. {% for message in app.flashes('error') %}
  378.     <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50" role="alert">
  379.         <span class="font-medium">{{ message }}</span>
  380.     </div>
  381. {% endfor %}
  382. {% block content %}
  383. {% endblock %}
  384. {% include '@App/shared/ui/loader/loader.html.twig' %}
  385. <div class="modal-window__backdrop hidden fixed top-0 left-0 w-full h-full bg-black opacity-60 z-[6]"
  386.      id="modal-backdrop"></div>
  387. {% block footer %}
  388.     {% if not isMobile and (companyObj.footerVisible is not defined or companyObj.footerVisible) %}
  389.         {% include '@App/shared/ui/footer/footer.html.twig' %}
  390.     {% endif %}
  391. {% endblock %}
  394. {% block javascripts %}
  395.     {{ encore_entry_script_tags('app') }}
  396. {% endblock %}
  397. <!--Start of Tawk.to Script-->
  398. <script type="text/javascript">
  399.   var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
  400.   (function () {
  401.     var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
  402.     s1.async = true;
  403.     s1.src = 'https://embed.tawk.to/65c0de458d261e1b5f5c87ac/1hlsm8gm2';
  404.     s1.charset = 'UTF-8';
  405.     s1.setAttribute('crossorigin', '*');
  406.     s0.parentNode.insertBefore(s1, s0);
  407.   })();
  408. </script>
  409. <!--End of Tawk.to Script-->
  411. {% if companyObj is not empty and companyObj.customScripts is not empty %}
  412.     {{ companyObj.customScripts | raw }}
  413. {% endif %}
  414. </body>
  415. </html>