sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: end pade move

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-16 18:28:26 +03:00
parent 034d5faa0d
commit 3d28a1ee86
22 changed files with 518 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
templates/pages/p_mover_landing_page.html
View File

@@ -5,17 +5,11 @@
{% block meta %}
<link rel="stylesheet" href="{% static "css/moover.css" %}">
<link rel="stylesheet" href="{% static "css/slick.css" %}">
{# <link rel="stylesheet" href="{% static "css/slick-theme.css" %}">#}
<script src="{% static "js/slick.min.js" %}"></script>
<script src="{% static "js/push/lazyload.min.js" %}"></script>
{% endblock %}
{#{% block before_close %}#}
{# <script src="{% static "js/slick.min.js" %}"></script>#}
{# #}
{#{% endblock %}#}
{% block content %}
<section class="presentation">
<div class="presentation__top">
<h1 class="presentation__title title">
@@ -84,7 +78,6 @@
</div>
</div>
</section>
{############easy###############}
<section class="easy">
<div class="title">
{% translate "Один простой шаг, чтобы отправить посылку" %}
@@ -115,7 +108,6 @@
</div>
<a href="#form" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section>
{############use###############}
<section class="use">
<div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
<img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
@@ -133,7 +125,7 @@
<section class="chatterbox">
<div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider">
{# {% for media_item in page.get_video_items %}#}
{# {% for media_item in page.get_media_items %}#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
@@ -213,9 +205,7 @@
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
@@ -237,70 +227,70 @@
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
function handlerVideos() {
const vtns = $('.chatterbox__vbtn');
if (!vtns.length) return;
vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
const vtn = e.target;
vtn.nextElementSibling.querySelector('video');
window.d = vtn;
console.log($(vtn).siblings().find('video')[0]);
console.log(vtn, e.target)
LazyLoad.load($(vtn).siblings().find('video')[0], {
callback_loaded: (e) => callbackLoaded(e, vtn),
});
});
const callbackLoaded = function (elm, vtn) {
vtn.classList.add('hide');
const imgWrap = elm.closest('.chatterbox__slide');
imgWrap?.classList.add('loaded');
};
}
$(document).ready(function () {
function handlerVideos() {
const vtns = $('.chatterbox__vbtn');
if (!vtns.length) return;
vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
const vtn = e.target;
vtn.nextElementSibling.querySelector('video');
window.d = vtn;
{#console.log($(vtn).siblings().find('video')[0]);#}
{#console.log(vtn, e.target)#}
LazyLoad.load($(vtn).siblings().find('video')[0], {
callback_loaded: (e) => callbackLoaded(e, vtn),
});
});
const callbackLoaded = function (elm, vtn) {
vtn.classList.add('hide');
const imgWrap = elm.closest('.chatterbox__slide');
imgWrap?.classList.add('loaded');
};
}
handlerVideos();
$('.slick-slider')
.slick({
centerMode: true,
{#centerPadding: '160px',#}
slidesToShow: 3,
infinite: false,
initialSlide: 1,
{#lazyLoad: 'ondemand',#}
{#lazyLoad: 'progressive',#}
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
})
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
slick.$slides[currentSlide]?.querySelector('video')?.pause();
console.log('edge was hit', slick.$slides[currentSlide]);
});
});
handlerVideos();
$('.slick-slider')
.slick({
centerMode: true,
{#centerPadding: '160px',#}
slidesToShow: 3,
infinite: false,
initialSlide: 1,
{#lazyLoad: 'ondemand',#}
{#lazyLoad: 'progressive',#}
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
})
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
slick.$slides[currentSlide]?.querySelector('video')?.pause();
console.log('edge was hit', slick.$slides[currentSlide]);
});
});
</script>
</section>
<section class="use use--lett">
<div class="title">{% translate "Что о нас пишут люди" %}</div>
<img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
</section>
<section class="animate">
<section class="animate left">
<div class="title">
{% translate "Хочешь отправить посылку партнеру, родным или знакомым людям быстро и недорого?" %}
</div>
@@ -309,28 +299,30 @@
</div>
<a href="#form" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
const animate = document.querySelector('.animate');
const observer = new IntersectionObserver(
(entries, interserctionObserver) => {
entries.forEach(entry => {
console.log('or', entry)
if (entry.isIntersecting) {
const el = entry.target;
interserctionObserver.disconnect();
(() => {
el.style.opacity = 1;
el.style.transform = 'translateX(0)';
el.style.transition = 'opacity 1.3s ease, transform 1.5s ease';
})();
}
});
}, {root: null, rootMargin: '0px'},
);
observer.observe(animate);
}
)
;
document.addEventListener("DOMContentLoaded", () => {
const animate = document.querySelectorAll('.animate');
let counter = 0;
const observer = new IntersectionObserver(
(entries, interserctionObserver) => {
entries.forEach(entry => {
console.log('or', entry)
if (entry.isIntersecting) {
counter++;
const el = entry.target;
if (animate.length === counter) {
interserctionObserver.disconnect();
}
(() => {
el.style.opacity = 1;
el.style.transform = 'translateX(0)';
el.style.transition = 'opacity 1.3s ease, transform 1.5s ease';
})();
}
});
}, {root: null, rootMargin: '0px'},
);
animate.forEach(item => observer.observe(item));
});
</script>
</section>
<section class="about">
@@ -346,7 +338,6 @@
</div>
{# </div>#}
</section>
<section class="benefits">
<div class="title">{% translate "Преимущества сервиса" %}</div>
<div class="benefits__grid">
@@ -382,12 +373,71 @@
</div>
</div>
</div>
</section>
<section class="uses">
<div class="title">{% translate "Для каких целей можно использовать наш сервис" %}</div>
<div class="uses__grid">
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/files.svg" %}" alt="image icon">
<div class="uses__desc">
{% translate "Когда нужно отправить документы партнеру или родственнику" %}
</div>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/box.svg" %}" alt="image icon">
<div class="uses__desc">
{% translate "Когда необходимо отправить посылку в&nbsp;другую страну" %}
</div>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/present.svg" %}" alt="image icon">
<div class="uses__desc">
{% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %}
</div>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
<div class="uses__desc">
{% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %}
</div>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/books.svg" %}" alt="image icon">
<div class="uses__desc">
{% translate "Когда нужно отправить не&nbsp;только маленькую посылку, но&nbsp;и&nbsp;крупногабаритный груз" %}
</div>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
<div class="uses__desc">
{% translate "Когда нет прямого сообщения из&nbsp;пункта&nbsp;А в&nbsp;пункт&nbsp;Б обычными сервисами доставки" %}
</div>
</div>
</div>
</section>
<section class="animate right">
<div class="title">
{% translate "Размести свое объявление о необходимости перевозки посылки прямо сейчас" %}
</div>
<div class="subtitle">
{% translate "Достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
</div>
<a href="#form" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section>
<section class="sore">
<div class="title">
{% translate "О наболевшем..." %}
</div>
<div class="subtitle">
{% translate "Мы&nbsp;знаем, каково это без конца и&nbsp;края закидывать сообщения в&nbsp;чаты и&nbsp;группы в&nbsp;социальных сетях, в&nbsp;надежде найти человека, который едет или летит в&nbsp;нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и&nbsp;стоимость пересылки в&nbsp;обычных почтовых сервисах выше стоимости самой посылки." %}
</div>
<img src="{% static "img/png/sore2.png" %}" alt="sore image" class="sore__img">
<div class="h3">
{% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
</div>
<a href="#form" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<br/>
</div>
</section>
{% endblock %}