Task:7199 | Верстка главной. Галерея, квиз, cosmopetx

pull/36/head
parent e11d03d512
commit 81845f1271
  1. 39
      wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php
  2. 405
      wp-content/themes/cosmopet/static/css/new-front-page.css
  3. 92
      wp-content/themes/cosmopet/static/js/new-front-page.js
  4. 4
      wp-content/themes/cosmopet/templates/_pages/new-front-page.twig
  5. 0
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx
  6. 25
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx.twig
  7. 42
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-gallery.twig
  8. 396
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-quiz.twig

@ -9,6 +9,33 @@ if (!class_exists('Timber')) {
return;
}
function enqueue_custom_gallery_assets() {
// Fancybox 5
wp_enqueue_style(
'fancybox-css',
'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.css',
[],
null
);
wp_enqueue_script(
'fancybox-js',
'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.js',
[],
null,
true
);
// Инициализация Fancybox
wp_add_inline_script('fancybox-js', "
document.addEventListener('DOMContentLoaded', function () {
Fancybox.bind('[data-fancybox=\"gallery\"]', {});
});
");
}
add_action('wp_enqueue_scripts', 'enqueue_custom_gallery_assets');
function theme_enqueue_scripts() {
wp_enqueue_style('gp-front-page-materialize-css', get_template_directory_uri() . '/static/css/libs/materialize.min.css');
// wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/front-page.css');
@ -19,6 +46,8 @@ function theme_enqueue_scripts() {
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
$context = Timber::context();
if (function_exists('get_field')) {
@ -42,6 +71,16 @@ if (function_exists('get_field')) {
// specialists
$context['main_specialists_title'] = get_field('main_specialists-title');
$context['main_specialists_items'] = get_field('main_specialists-items');
// cosmopetx
$context['other_post'] = Timber::get_post(383); // Загружаем пост с ID 383
//quiz
$context['q_title'] = get_field('q_title');
$context['reviews_title'] = get_field('reviews_title');
$context['q_1'] = get_field('q_1', 383);
$context['q_2'] = get_field('q_2', 383);
$context['q_3'] = get_field('q_3', 383);
$context['q_4'] = get_field('q_4', 383);
$context['q_5'] = get_field('q_5', 383);
}
try {

@ -1035,10 +1035,10 @@ main {
/* Main Smi */
.main-smi {
box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15);
background: #f4f1f0;
padding: 100px 20px;
border-radius: 0!important;
margin-top: -5%;
}
.smiSlider .slider-arrows {
position: absolute;
@ -1235,7 +1235,410 @@ font-size: 12px;
margin-bottom: 70px;
}
/* Main Cosmopet X */
.cosmopet-x {
background: #f4f1f0;
padding: 100px 20px;
margin-top: -5%;
overflow: hidden;
border-radius: 0px 0px 60px 60px;
}
.cosmopet-x .main-reviews_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.cosmopet-x__swiper,
.cosmopet-x__swiper .swiper-wrapper {
height: auto;
}
.cosmopet-x__title {
color: var(--creme-white, #F4F1F0);
font-family: "Craftwork Grotesk";
font-size: 82px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.cosmopet-x__swiper {
margin-top: 52px;
position: relative;
}
.cosmopet-x__item {
position: relative;
width: 100%;
height: 484px;
}
.cosmopet-x__item::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: 1;
width: 100%;
border-radius: 60px;
border: 2px solid var(--creme-white, #F4F1F0);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.83) 0%, rgba(255, 255, 255, 0.00) 25.17%, rgba(255, 255, 255, 0.00) 65%, rgba(255, 255, 255, 0.83) 80%);
}
.cosmopet-x__bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
border-radius: 60px;
}
.cosmopet-x__body {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
padding: 36px 35px;
}
.cosmopet-x__heading {
color: var(--grey-black, #121212);
font-family: "Craftwork Grotesk";
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.cosmopet-x__btn {
display: block;
max-width: max-content;
margin-top: 7px;
color: #000;
font-family: "Craftwork Grotesk";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 6px 15px 10px 15px;
border-radius: 28px;
border: 1px solid #000;
background: var(--wh, #FFF);
}
.cosmopet-x__top {
position: absolute;
height: auto;
width: 60%;
top: 43px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.cosmopet-x .slider-arrows {
top: 50%;
transform: translateY(-50%);
position: absolute;
width: 100%;
}
.cosmopet-x .slider-arrows .cosmopet-prev {
left: -30px;
}
.cosmopet-x .slider-arrows .cosmopet-next {
right: -30px;
}
.cosmopet-x .slider-arrow {
background-image: url('data:image/svg+xml,<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="56" height="56" rx="20" fill="white"/><path d="M37 28.364H20.5" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 28.364L30.636 34.728" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 28.364L30.636 22.0001" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')!important;
}
/* Main Gallery */
.main-gallery .mosaic-swiper {
padding: 40px 20px;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Две колонки */
gap: 20px; /* Максимальный gap 20px */
padding: 40px 20px;
max-height: 700px; /* Фиксированная высота контейнера (настройте под нужный размер) */
overflow: hidden;
}
.item {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.large {
grid-column: span 1; /* Занимает одну ячейку */
grid-row: span 2; /* Занимает две строки */
}
.small {
grid-column: span 1; /* Занимает одну ячейку */
grid-row: span 1; /* Занимает одну строку */
}
.full-height {
grid-column: span 2; /* Занимает обе колонки */
grid-row: span 2; /* Занимает две строки */
}
/* Main quiz */
.truth {
border-radius: 60px 60px 0px 0px;
background: var(--creme-white, #F4F1F0);
padding-bottom: 119px;
margin-top: -1px;
padding-top: 60px;
}
.truth .truth_top{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.truth .truth_title{
font-size: 82px;
font-weight: 700;
line-height: 98.4px;
text-align: end;
text-transform: uppercase;
width: 723px;
}
.truth .truth_title span{
color: #76CE75;
}
.truth_top .gift_img{
margin-left: -180px;
}
.truth_top .gift_line-img{
position: absolute;
display: none;
bottom: 150px;
right: 0;
width: 245px;
}
.truth_content {
position: relative;
display: none;
}
.truth_content::after{
content: '';
display: block;
position: absolute;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%);
border-radius: 60px;
top: -2px;
left: -2px;
z-index: 0;
}
.truth_content.active {
display: block;
}
.truth .truth_block{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
height: 480px;
overflow: hidden;
background: var(--creme-white, #F4F1F0);
border-radius: 60px;
box-shadow: 0px 3px 13.5px 0px #00000040;
padding: 25px 34px 0px 63px;
}
.truth .truth_success,
.truth .truth_error {
display: none;
}
.truth .truth_success.show,
.truth .truth_error.show {
display: flex;
}
.truth_block .truth_line{
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 24px;
}
.truth_block .truth_line span{
border: 1px solid var(--grey-black, #121212);
opacity: .6;
width: 73px;
border-radius: 10px;
}
.truth_block .truth_line span.active{
opacity: 1;
}
.truth_block .truth_block-title{
font-weight: 700;
font-size: 48px;
text-transform: uppercase;
color: #121212;
margin-bottom: 40px;
}
.truth_content-end .truth_block-title,
.truth_success .truth_block-title{
background: -webkit-radial-gradient(#0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.truth_error .truth_block-title{
background: -webkit-radial-gradient(#F21E6A 0%, #FF6543 112.38%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.truth_block .truth_block-text{
position: relative;
z-index: 1;
display: flex;
align-items: start;
gap: 26px;
}
.truth_block .truth_end-text{
display: flex;
flex-direction: column;
gap: 21px;
}
.truth_block .truth_block-text p{
font-size: 24px;
font-weight: 700;
line-height: 28.8px;
max-width: 559px;
}
.truth_block .truth_block-text p span{
font-weight: 500;
}
.truth_default .truth_block-text p{
text-transform: uppercase;
}
.truth_error .truth_block-text p,
.truth_success .truth_block-text p {
max-width: 592px;
font-size: 20px;
line-height: 24px;
font-weight: 500;
}
.truth_block .truth_info{
position: absolute;
width: 95%;
bottom: 0;
display: flex;
align-items: end;
justify-content: space-between;
margin-top: -100px;
z-index: 0;
}
.truth_content-end .truth_info{
display: flex;
align-items: center;
justify-content: end;
}
.truth_block .truth_links{
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 56px;
}
.truth_error .truth_links,
.truth_success .truth_links{
gap: 20px;
}
.truth_block .truth_result{
display: flex;
align-items: center;
gap: 23px;
}
.truth_block .truth_result img{
width: 100%;
}
.truth_block .truth_link{
width: 141px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 500;
line-height: 28.8px;
text-align: center;
color: var(--grey-black, #121212);
border: 2px solid var(--grey-black, #121212);
border-radius: 48px;
}
.truth_content-end .truth_info img{
margin-right: -34px;
}
.truth_content-end .truth_block .truth_link{
width: 221px;
}
.truth_content-end .truth_xn{
position: relative;
width: 270px;
height: 158px;
background-image: url(../img/xn-border.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.truth_points {
font-size: 450%;
font-weight: 700;
}
.truth_content-wrap {
z-index: 5;
min-width: 800px;
}
.truth_pictures_brain {
display: block;
position: absolute;
top: -25%;
right: -3%;
z-index: 11;
}
.truth_pictures_sale {
display: block;
position: absolute;
bottom: 5%;
z-index: 0;
left: 10%;
}
.truth_pictures_arrow {
display: block;
position: absolute;
top: 5%;
left: 28%;
}
.main-truth_title {
font-weight: 700;
font-size: 64px;
text-transform: uppercase;
color: #121212;
}
.main-truth_title span {
font-weight: 700;
font-size: 48px;
text-transform: uppercase;
color: #121212;
}

@ -218,6 +218,98 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
// cosmopet x slider
let cosmopetSwiper = new Swiper(".cosmopet-x__swiper", {
slidesPerView: 2.5,
spaceBetween: 43,
navigation: {
nextEl: '.cosmopet-next',
prevEl: '.cosmopet-prev'
},
breakpoints: {
300: {
slidesPerView: 1,
spaceBetween: 200,
},
776: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 2.4,
spaceBetween: '5%',
},
1400: {
slidesPerView: 3,
spaceBetween: 37,
},
}
});
// Gallery slider
new Swiper('.mosaic-swiper', {
slidesPerView: 'auto',
spaceBetween: 20,
freeMode: true,
grabCursor: true
});
// Quiz
const truthContents = document.querySelectorAll('.truth_content');
let currentIndex = 0;
let correctAnswers = 0;
truthContents.forEach(content => {
const successBtn = content.querySelector('.success_btn');
const errorBtn = content.querySelector('.error_btn');
const nextBtn = content.querySelectorAll(".next_btn");
const truthSuccess = content.querySelector('.truth_success');
const truthError = content.querySelector('.truth_error');
const truthDefault = content.querySelector('.truth_default');
if (successBtn) {
successBtn.addEventListener('click', function () {
truthDefault.style.display = 'none';
truthSuccess.classList.add('show');
correctAnswers++;
});
}
if (errorBtn) {
errorBtn.addEventListener('click', function () {
truthDefault.style.display = 'none';
truthError.classList.add('show');
});
}
if (nextBtn) {
nextBtn.forEach(btn => {
btn.addEventListener('click', function () {
truthSuccess.classList.contains('show') ? truthSuccess.classList.remove('show') : truthError.classList.remove('show');
content.classList.remove('active');
currentIndex++;
if (currentIndex < truthContents.length) {
truthContents[currentIndex].classList.add('active');
}
if (truthContents.length - currentIndex == 1) {
truthContents[currentIndex].querySelector(".truth_points-corrects").innerHTML = correctAnswers;
truthContents[currentIndex].querySelector(".truth_points-all").innerHTML = currentIndex ;
}
})
});
}
// Initial visibility
if (truthDefault) {
truthDefault.style.display = 'block';
}
});
});

@ -11,6 +11,10 @@
{% include '/templates/_pages/new-front-page/main-food.twig' %}
{% include '/templates/_pages/new-front-page/main-reviews.twig' %}
{% include '/templates/_pages/new-front-page/main-treats.twig' %}
{% include '/templates/_pages/new-front-page/main-blog.twig' %}
{% include '/templates/_pages/new-front-page/main-quiz.twig' %}
{% include '/templates/_pages/new-front-page/main-media.twig' %}
{% include '/templates/_pages/new-front-page/main-bot.twig' %}
{% include '/templates/_pages/new-front-page/main-cosmopetx.twig' %}
{# {% include '/templates/_pages/new-front-page/main-gallery.twig' %} #}
{% endblock %}

@ -0,0 +1,25 @@
<section class="main-cosmopetx cosmopet-x">
<div class="new-container">
<h2 class="main-reviews_title">{{ other_post.meta('cosmopet_x_blocktitle') }}</h2>
<div class="cosmopet-x__swiper">
<div class="swiper-wrapper">
{% for slide in other_post.meta('cosmopet_x_slider') %}
<div class="swiper-slide">
<div class="cosmopet-x__item">
<img class="cosmopet-x__bg" src="{{ slide.img_1 }}" alt="">
<img class="cosmopet-x__top" src="{{ slide.img_2 }}" alt="">
<div class="cosmopet-x__body">
<div class="cosmopet-x__heading">{{ slide.title }}</div>
<a href="{{ slide.url }}" class="cosmopet-x__btn">подробнее</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="slider-arrows">
<button class="slider-arrow slider-arrow-prev cosmopet-prev"></button>
<button class="slider-arrow slider-arrow-next cosmopet-next"></button>
</div>
</div>
</div>
</section>

@ -0,0 +1,42 @@
<section class="main-gallery">
<div class="new-container">
<h2 class="main-reviews_title">{{ other_post.meta('cosmopet_x_blocktitle') }}</h2>
<div class="swiper mosaic-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="gallery-container">
<div class="gallery-block block-1">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/1.png" alt="" class="large">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/2.png" alt="" class="small">
</div>
<div class="gallery-block block-2">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/3.png" alt="" class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/4.png" alt="" class="small">
</div>
<div class="gallery-block block-1">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/5.png" alt="" class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/6.png" alt="" class="large">
</div>
<div class="gallery-block block-3">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/9.png" alt="" class="full-height">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="gallery-grid">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/10.png" alt="">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/7.png" alt="">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/8.png" alt="">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/nz6_0121-kopiya-1.png" alt="">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/nz6_9955-1.png" alt="">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/11.png" alt="">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/dscf6363-copy-2-inst-1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>

@ -0,0 +1,396 @@
<section class="truth sec-bf">
<div class="new-container">
<h2 class="main-truth_title">проверьте свои знания<br><span>и получите</span></h2>
<div class="truth_top">
<div class="truth_pictures">
<img src="/wp-content/uploads/2025/07/layer-0-1.png" class="truth_pictures_present">
<img src="/wp-content/uploads/2025/07/arrow-4.png" class="truth_pictures_arrow">
<img src="/wp-content/uploads/2025/07/frame-1321316166.png" class="truth_pictures_sale">
<img src="/wp-content/uploads/2025/07/a_simple_icon_of_light_pink_brain_and_a_rockets_flame_at_bottom_icon_flying_background_is_uniform_da_b230abcd-ab16-4226-90a0-2818b496ae19.png" class="truth_pictures_brain">
</div>
<div class="truth_content-wrap">
<div class="truth_content truth_content1 active">
<div class="truth_block truth_default" style="display: block;">
<div class="truth_line">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title">{{ q_1.title }}</div>
<div class="truth_block-text">
<img src="{{ theme.link }}/static/img/truth_num.svg"
alt="">
<p>{{ q_1.text }}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Правда') }}</button>
<button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Миф') }}</button>
</div>
<img src="/wp-content/uploads/2025/07/freepik__the-style-is-3d-model-with-octane-render-volumetri__61883_upscayl_2x_realesrgan-x4plus-1.png" alt="{{ q_1.img.alt }}">
</div>
</div>
<div class="truth_success truth_block">
<div class="truth_line">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
<div class="truth_block-text">
<p>{{ q_1.text_true }}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
</div>
<img src="{{ theme.link }}/static/img/truth_succes-img.png"
alt="">
</div>
</div>
<div class="truth_error truth_block">
<div class="truth_line">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
<div class="truth_block-text">
<p><p>{{ q_1.text_true }}</p></p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
</div>
<img src="{{ theme.link }}/static/img/truth_error.png"
alt="">
</div>
</div>
</div>
<div class="truth_content truth_content2">
<div class="truth_block truth_default" style="display: block;">
<div class="truth_line">
<span></span>
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title"><p>{{ q_2.title }}</p></div>
<div class="truth_block-text">
<img src="{{ theme.link }}/static/img/truth_num2.svg"
alt="">
<p><p>{{ q_2.text }}</p></p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Правда') }}</button>
<button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Миф') }}</button>
</div>
<img src="{{ q_2.img.url }}"
alt="{{ q_2.img.alt }}">
</div>
</div>
<div class="truth_success truth_block">
<div class="truth_line">
<span></span>
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
<div class="truth_block-text">
<p>{{q_2.text_true}}
</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
</div>
<img src="{{ theme.link }}/static/img/truth_succes-img.png"
alt="">
</div>
</div>
<div class="truth_error truth_block">
<div class="truth_line">
<span></span>
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
<div class="truth_block-text">
<p>{{q_2.text_true}}
</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
</div>
<img src="{{ theme.link }}/static/img/truth_error.png"
alt="">
</div>
</div>
</div>
<div class="truth_content truth_content3">
<div class="truth_block truth_default" style="display: block;">
<div class="truth_line">
<span></span>
<span></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title">{{q_2.title}}</div>
<div class="truth_block-text">
<img src="{{ theme.link }}/static/img/truth_num3.svg"
alt="">
<p>{{q_3.text}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Правда') }}</button>
<button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Миф') }}</button>
</div>
<img src="{{ q_3.img.url }}" alt="">
</div>
</div>
<div class="truth_success truth_block">
<div class="truth_line">
<span></span>
<span></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это правда!') }}</div>
<div class="truth_block-text">
<p>{{q_3.text_true}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
<div class="truth_result">
{% for img in q3.img_list %}
<img src="{{ item.img.url }}"
alt="{{ item.img.alt }}">
{% endfor %}
</div>
</div>
<img src="{{ theme.link }}/static/img/truth_succes-img.png"
alt="">
</div>
</div>
<div class="truth_error truth_block">
<div class="truth_line">
<span></span>
<span></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это правда!') }}</div>
<div class="truth_block-text">
<p>{{q_3.text_true}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
<div class="truth_result">
{% for img in q3.img_list_err %}
<img src="{{ item.img.url }}"
alt="{{ item.img.alt }}">
{% endfor %}
</div>
</div>
<img src="{{ theme.link }}/static/img/truth_error.png"
alt="">
</div>
</div>
</div>
<div class="truth_content truth_content4">
<div class="truth_block truth_default" style="display: block;">
<div class="truth_line">
<span></span>
<span></span>
<span></span>
<span class="active"></span>
<span></span>
</div>
<div class="truth_block-title">{{q_4.text_title}}</div>
<div class="truth_block-text">
<img src="{{ theme.link }}/static/img/truth_num4.svg"
alt="">
<p>{{q_4.text}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Правда') }}</button>
<button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Миф') }}</button>
</div>
<img src="{{q_4.img.url}}"
alt="{{q_4.img.alt}}">
</div>
</div>
<div class="truth_success truth_block">
<div class="truth_line">
<span></span>
<span></span>
<span></span>
<span class="active"></span>
<span></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это правда!') }}</div>
<div class="truth_block-text">
<p>{{q_4.text_true}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
</div>
<img src="{{ theme.link }}/static/img/truth_succes-img.png"
alt="">
</div>
</div>
<div class="truth_error truth_block">
<div class="truth_line">
<span></span>
<span></span>
<span></span>
<span class="active"></span>
<span></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это правда!') }}</div>
<div class="truth_block-text">
<p>{{q_4.text_true}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
</div>
<img src="{{ theme.link }}/static/img/truth_error.png"
alt="">
</div>
</div>
</div>
<div class="truth_content truth_content5">
<div class="truth_block truth_default" style="display: block;">
<div class="truth_line">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="active"></span>
</div>
<div class="truth_block-title">{{q_5.title}}</div>
<div class="truth_block-text">
<img src="{{ theme.link }}/static/img/truth_num5.svg"
alt="">
<p>{{q_5.text}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover error_btn">{{ function('pll_e', 'Правда') }}</button>
<button class="truth_link btn--black-hover success_btn">{{ function('pll_e', 'Миф') }}</button>
</div>
<img class="img--desktop2"
src="{{q_5.img.url}}"
alt="{{q_5.img.alt}}">
<img class="img--mobile" src="{{ theme.link }}/static/img/quiz/birds_mobile.png" alt=""> </div>
</div>
<div class="truth_success truth_block">
<div class="truth_line">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="active"></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
<div class="truth_block-text">
<p>{{q_5.text_true}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
</div>
<img src="{{ theme.link }}/static/img/truth_succes-img.png"
alt="">
</div>
</div>
<div class="truth_error truth_block">
<div class="truth_line">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="active"></span>
</div>
<div class="truth_block-title">{{ function('pll_e', 'Это миф!') }}</div>
<div class="truth_block-text">
<p{{q_5.text_true}}</p>
</div>
<div class="truth_info">
<div class="truth_links">
<button class="truth_link btn--black-hover next_btn">{{ function('pll_e', 'Далее') }}</button>
</div>
<img src="{{ theme.link }}/static/img/truth_error.png"
alt="">
</div>
</div>
</div>
<div class="truth_content truth_content-end">
<div class="truth_block truth_default" style="display: block;">
<div class="truth_block-title">{{ function('pll_e', 'ваш результат') }}</div>
<div class="truth_block-text">
<div class="truth_xn">
<span class="truth_points truth_points-corrects"></span>
<span class="truth_points truth_points-slash">/</span>
<span class="truth_points truth_points-all"></span>
</div>
<div class="truth_end-text truth_end-text--before">
<p>{{promo_text}}
</p>
<div class="truth__end-promo">{{promo}}</div>
<div class="truth__end-btns">
<button class="truth__end-btn --copy --white"
data-copy="{{promo}}"><span>{{ function('pll_e', 'Скопировать') }}</span><span
class="copied">{{ function('pll_e', 'Скопировано') }}</span></button>
<a href="/shop/" class="truth__end-btn --black"><span>{{ function('pll_e', 'В магазин') }} </span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Loading…
Cancel
Save