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

TRI-283: end adaptive 1920 + start header

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-19 00:25:47 +03:00
parent da6f47f439
commit 4996d02f71
36 changed files with 2118 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/blocks/n_header.html Normal file
View File

@@ -0,0 +1,26 @@
{% load i18n %}
{% load base_tags_extra %}
{% load webpush_notifications %}
</div>
<header id="header_bg" class="header">
<div class="header__logo">
</div>
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a href="#benefits" class="header__link">Преимущества</a>
</li>
<li class="header__item">
<a href="#rewiews" class="header__link">Отзывы</a>
</li>
<li class="header__item">
<a href="#howtowork" class="header__link">Как это работает</a>
</li>
<li class="header__item">
<a href="#about" class="header__link">О сервисе</a>
</li>
</ul>
</nav>
</header>

337
templates/pages/p_mover_landing_page.html
View File

@@ -47,8 +47,8 @@
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/image1.webp" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Мария, хочет отправить<br class='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
{% translate "сервисов и она устала искать в<br class='br1'/> чатах тех, кто сможет перевезти<br class='br1'/> посылку." %}
{% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl'/> цена доставки почтовых<br class='br1'/>" %}
{% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl'/> посылку." %}
</p>
</div>
<div class="cards__item">
@@ -58,20 +58,20 @@
{% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
<a href="/">TripWB.com. </a>
{% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
{% translate "Регистрируется<br class='br--xxl'/> и очень быстро размещает<br class='br--xxl'/> объявление." %}
</p>
</div>
<div class="cards__item">
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Попутчик Егор увидел<br class='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
{% translate "Попутчик Егор увидел<br class='br--xxl'/> объявление Марии, нажал<br class='br--xxl'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br--xxl'/> удобным для него способом." %}
</p>
</div>
<div class="cards__item">
<img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
{% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br--xxl'/> чего Мария передала посылку<br class='br--xxl'/> Егору и он её доставил." %}
</p>
</div>
</div>
@@ -89,17 +89,18 @@
<div class="easy__item easy__item--fir">
<h2>{% translate "Один простой шаг" %}</h2>
<p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}</p>
<img src="{% static 'img/webp/sender-card1.webp' %}" alt="sender1">
<img src="{% static 'img/png/sender-card1.png' %}" alt="sender1">
</div>
<div class="easy__item easy__item--sec">
<div class="easy__arrow easy__arrow--fir"></div>
<div class="easy__arrow easy__arrow--sec"></div>
<p>{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
<img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
<img src="{% static 'img/png/sender-card2.png' %}" alt="sender1">
</div>
<div class="easy__item easy__item--thr">
<p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
<img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">
<p class="hide__xxl">{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
<p class="show__xxl">{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
<img src="{% static 'img/png/sender-card3.png' %}" alt="sender1">
</div>
</div>
@@ -118,119 +119,172 @@
<br/>
<a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
</section>
<section class="use use--diff">
<section class="diff">
<div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
<img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
<div class="diff__grid">
<div class="diff__coll left">
<div class="diff__coll-title h2">
Trip With Bonus
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Стоимость перевозки назначаете сами
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Возможность контакта с перевозчиком в режиме онлайн
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Встреча с перевозчиком в удобном для вас месте
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Без дополнительных платежей и комиссий за параметры посылки
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Вы сами выбираете оптимальный маршрут и время доставки
</div>
</div>
<div class="diff__coll right">
<div class="diff__coll-title h2">
Другие почтовые сервисы
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Стоимость перевозки назначает сервис
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Автоматический трекинг не всегда даёт актуальную информацию
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Нужно ехать только в пункт отправки посылки
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Дополнительная стоимость за разные параметры посылки
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Посылка может перевозиться долго и с большим количеством перегрузок
</div>
</div>
</div>
</section>
<section class="chatterbox">
<section class="chatterbox" >
<div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider">
{% for media_item in page.get_media_items %}
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
<video
data-src="{{ MEDIA_URL }}{{ media_item.video }}"
poster="{{ MEDIA_URL }}{{ media_item.picture }}"
controls
autoplay
></video>
</div>
</div>
{# {% for media_item in page.get_media_items %}#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">#}
{# <video#}
{# data-src="{{ MEDIA_URL }}{{ media_item.video }}"#}
{# poster="{{ MEDIA_URL }}{{ media_item.picture }}"#}
{# controls#}
{# autoplay#}
{# ></video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{##}
{# </div>#}
{# {% endfor %}#}
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/1.mp4"
poster="/media/media_items/image/ava1.jpg"
controls
autoplay
></video>
</div>
</div>
</div>
{% endfor %}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">#}
{# <video#}
{# data-src="/media/media_items/video/1.mp4"#}
{# poster="/media/media_items/image/ava1.jpg"#}
{# controls#}
{# autoplay#}
{# ></video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{##}
{# </div>#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">#}
{# <video#}
{# data-src="/media/media_items/video/2.mp4"#}
{# poster="/media/media_items/image/ava2.jpg"#}
{# controls#}
{# autoplay#}
{# ></video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">#}
{# <video#}
{# data-src="/media/media_items/video/3.mp4"#}
{# poster="/media/media_items/image/ava3.jpg"#}
{# controls#}
{# autoplay#}
{# >#}
{# </video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{##}
{# </div>#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">#}
{# <video#}
{# data-src="/media/media_items/video/4.mp4"#}
{# poster="/media/media_items/image/ava1.jpg"#}
{# controls#}
{# autoplay#}
{# >#}
{# </video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">#}
{# <video#}
{# data-src="/media/media_items/video/5.mp4"#}
{# poster="/media/media_items/image/ava2.jpg"#}
{# controls#}
{# autoplay#}
{# >#}
{# </video>#}
{# </div>#}
{# </div>#}
{##}
{##}
{# </div>#}
{# </div>#}
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/2.mp4"
poster="/media/media_items/image/ava2.jpg"
controls
autoplay
></video>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/3.mp4"
poster="/media/media_items/image/ava3.jpg"
controls
autoplay
>
</video>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/4.mp4"
poster="/media/media_items/image/ava1.jpg"
controls
autoplay
>
</video>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/5.mp4"
poster="/media/media_items/image/ava2.jpg"
controls
autoplay
>
</video>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
@@ -292,9 +346,12 @@
});
</script>
</section>
<section class="use use--lett">
<section class="use use--lett" id="rewiews">
<div class="title">{% translate "Что о нас пишут люди" %}</div>
<img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
<picture>
<source srcset="{% static "img/png/use-letters-1920.png" %}" media="(min-width: 1720px)"/>
<img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
</picture>
</section>
<section class="animate left">
<div class="title">
@@ -331,10 +388,14 @@
});
</script>
</section>
<section class="about">
<section class="about" id="about">
<div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
<div class="about__grid">
<img src="{% static "/img/png/about.png" %}" alt="" class="about__img">
<picture class="about__img">
<source srcset="{% static "img/png/about-1920.png" %}" media="(min-width: 1720px)"/>
<img src="{% static "/img/png/about.png" %}" alt="about">
</picture>
{# <img src="{% static "/img/png/about.png" %}" alt="about" class="about__img">#}
<div class="about__right">
<p>{% translate "TripWB&nbsp;- это сервис попутных посылок, который <b>соединяет отправителя посылки</b> того, кому нужно что-то передать в&nbsp;другой город или страну, и&nbsp;<b>перевозчика посылки</b>, а&nbsp;именно попутчика или путешественника, который следует по&nbsp;пути назначения." %}</p>
<p>{% translate "<b>Тебе не&nbsp;нужно больше бежать в&nbsp;чаты и&nbsp;группы</b> в&nbsp;социальных сетях и&nbsp;искать тех, кто сможет перевезти посылку, а&nbsp;достаточно просто зайти на&nbsp;сайт, разместить объявление в&nbsp;пару кликов и&nbsp;дождаться откликов от&nbsp;попутчиков." %}
@@ -344,7 +405,7 @@
</div>
{# </div>#}
</section>
<section class="benefits">
<section class="benefits" id="benefits">
<div class="title">{% translate "Преимущества сервиса" %}</div>
<div class="benefits__grid">
<div class="benefits__first">
@@ -362,7 +423,10 @@
</div>
</div>
<div class="benefits__second">
<img src="{% static "/img/png/benefits.png" %}" alt="benefits">
<picture>
<source srcset="{% static "img/png/benefits-1920.png" %}" media="(min-width: 1720px)"/>
<img src="{% static "/img/png/benefits.png" %}" alt="benefits">
</picture>
</div>
<div class="benefits__third">
<div class="benefits__item">
@@ -386,39 +450,39 @@
<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">
<p class="uses__desc">
{% translate "Когда нужно отправить документы партнеру или родственнику" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/box.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда необходимо отправить посылку в&nbsp;другую страну" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/present.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/books.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда нужно отправить не&nbsp;только маленькую посылку, но&nbsp;и&nbsp;крупногабаритный груз" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда нет прямого сообщения из&nbsp;пункта&nbsp;А в&nbsp;пункт&nbsp;Б обычными сервисами доставки" %}
</div>
</p>
</div>
</div>
</section>
@@ -438,7 +502,10 @@
<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">
<picture>
<source srcset="{% static "img/png/sore-1920.png" %}" media="(min-width: 1720px)"/>
<img src="{% static "/img/png/sore.png" %}" alt="sore image" class="sore__img">
</picture>
<div class="h3">
{% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
</div>