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

TRI-283: edit images xs

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-23 09:00:55 +03:00
parent 800b7ba493
commit 3c5331c2d3
25 changed files with 179 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
templates/blocks/n_header.html
View File

@@ -5,9 +5,9 @@
<header class="header">
<div class="header__grid container">
<div class="header__logo">
<a href="{% url 'main' %}">
{# <a href="{% url 'main' %}">#}
<img class="svg" src="/static/img/png/finlogo.png">
</a>
{# </a>#}
</div>
@@ -17,7 +17,7 @@
<a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
</li>
<li class="header__item">
<a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a>
<a href="#chatterbox" class="header__link">{% trans "Отзывы" %}</a>
</li>
<li class="header__item">
<a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
@@ -36,15 +36,12 @@
<div class="dropdown show__md">
<img onclick="showMenu(this, event)" class="dropbtn" src="/static/img/svg/Menu.svg">
<div
onblur="hideMenu(event)"
class="dropdown-content"
>
<a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
<a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a>
<a href="#chatterbox" class="header__link">{% trans "Отзывы" %}</a>
<a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
<a href="#about" class="header__link">{% trans "О сервисе" %}</a>
</div>
</div>
</div>
@@ -71,4 +68,10 @@
$(document).ready(()=>{
initHeaderState();
})
$(document).off('click.hide-menu').on('click.hide-menu',(e)=>{
let el = e.target;
if (!el.closest('.dropdown')) {
$('.dropdown-content').removeClass('show');
}
})
</script>

87
templates/pages/p_customer_landing_page.html
View File

@@ -165,18 +165,21 @@
<div class="subtitle">
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
</div>
<a href="{% url "registration_page" %}" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}"
class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section>
<section class="use">
<div class="title">{% translate "Уже пользуются сайтом и находят посылки для перевозок" %}</div>
<picture class="img">
<source srcset="{% static "img/png/customer/use-1720.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/customer/use-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/customer/use-1120.png" %}" media="(min-width: 1280px)"/>
<source srcset="{% static "img/png/customer/use-640.png" %}" media="(min-width: 768px)"/>
<img src="{% static "img/png/customer/use-328.png" %}" alt="list users" class="use__img">
</picture>
<a href="{% url "registration_page" %}">
<picture >
<source srcset="{% static "img/png/customer/use-1720.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/customer/use-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/customer/use-1120.png" %}" media="(min-width: 1280px)"/>
<source srcset="{% static "img/png/customer/use-640.png" %}" media="(min-width: 768px)"/>
<img src="{% static "img/png/customer/use-328.png" %}" alt="list users" class="use__img">
</picture>
</a>
<div class="h3">
{% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %}
</div>
@@ -228,7 +231,7 @@
</div>
</section>
<section class="chatterbox">
<section class="chatterbox" id="chatterbox">
<div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider">
{% for media_item in page.get_media_items %}
@@ -307,15 +310,66 @@
</script>
</section>
<section class="use use--lett" id="rewiews">
<section class="use use--lett" id="rewiews">
<div class="title">{% translate "Что о нас пишут люди" %}</div>
<picture>
<picture class="hide__xs">
<source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
<source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/>
<img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters" class="use__img">
<img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters"
class="use__img">
</picture>
<div class="show__xs">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s1.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s2.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s3.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s4.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s5.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s6.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s7.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s8.png" %}" alt="list letters"
class="use__img">
</picture>
</div>
</section>
<section class="animate left">
@@ -325,7 +379,8 @@
<div class="subtitle">
{% translate "Зарегистрируйся на&nbsp;<a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и&nbsp;получи отклики от&nbsp;людей с&nbsp;посылками" %}
</div>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}"
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
const animate = document.querySelectorAll('.animate');
@@ -407,7 +462,8 @@
<div class="title">
{% translate "Размести свое объявление какую посылку ты можешь перевезти прямо сейчас " %}
</div>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}"
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section>
<section class="sore">
@@ -427,7 +483,8 @@
<div class="h3">
{% translate "Зарегистрируйся бесплатно прямо сейчас и начни размещать объявления о перевозки посылки" %}
</div>
<a href="{% url "registration_page" %}" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<a href="{% url "registration_page" %}"
class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<br/>
</div>
</section>

94
templates/pages/p_mover_landing_page.html
View File

@@ -45,7 +45,7 @@
<div class="cards__list">
<div class="cards__item">
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image1.webp" %}" alt="img1"/>
<img class="cards__img" src="{% static "img/png/mover/image1.png" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl br--sm'/> цена доставки почтовых<br class='br--sm'/>" %}
{% translate "сервисов и она устала искать в<br class='br--xxl br--sm'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
@@ -53,7 +53,7 @@
</div>
<div class="cards__item">
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image2.webp" %}" alt="img1"/>
<img class="cards__img" src="{% static "img/png/mover/image2.png" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Мария, узнаёт о нашем сервисе<br class='br--sm'/>" %}
@@ -63,13 +63,13 @@
</div>
<div class="cards__item">
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image3.webp" %}" alt="img1"/>
<img class="cards__img" src="{% static "img/png/mover/image3.png" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Попутчик Егор увидел<br class='br--xxl br--sm'/> объявление Марии, нажал<br class='br--xxl br--sm'/> откликнуться и получил<br class='br--sm'/> возможность связаться с ней,<br class='br--xxl br--sm'/> удобным для него способом." %}
</p>
</div>
<div class="cards__item">
<img class="cards__img" src="{% static "img/webp/mover/image4.webp" %}" alt="img1"/>
<img class="cards__img" src="{% static "img/png/mover/image4.png" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Мария и Егор обговорили детали<br class='br--sm'/> доставки и потом встретились в<br class='br--sm'/> удобном для всех месте. После<br class='br--xxl br--sm'/> чего Мария передала посылку<br class='br--xxl br--sm'/> Егору и он её доставил." %}
</p>
@@ -166,17 +166,21 @@
<div class="subtitle">
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
</div>
<a href="{% url "registration_page" %}" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}"
class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section>
<section class="use">
<div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
<picture class="img">
<source srcset="{% static "img/png/mover/use-1720.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/mover/use-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/mover/use-1120.png" %}" media="(min-width: 1280px)"/>
<source srcset="{% static "img/png/mover/use-640.png" %}" media="(min-width: 768px)"/>
<img src="{% static "img/png/mover/use-328.png" %}" alt="list users" class="use__img">
</picture>
<a href="{% url "registration_page" %}">
<picture>
<source srcset="{% static "img/png/mover/use-1720.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/mover/use-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/mover/use-1120.png" %}" media="(min-width: 1280px)"/>
<source srcset="{% static "img/png/mover/use-640.png" %}" media="(min-width: 768px)"/>
<img src="{% static "img/png/mover/use-328.png" %}" alt="list users" class="use__img">
</picture>
</a>
<div class="h3">
{% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
</div>
@@ -241,7 +245,7 @@
</div>
</div>
</section>
<section class="chatterbox">
<section class="chatterbox" id="chatterbox">
<div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider">
{% for media_item in page.get_media_items %}
@@ -321,13 +325,64 @@
</section>
<section class="use use--lett" id="rewiews">
<div class="title">{% translate "Что о нас пишут люди" %}</div>
<picture>
<picture class="hide__xs">
<source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
<source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/>
<img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters" class="use__img">
<img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters"
class="use__img">
</picture>
<div class="show__xs">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s1.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s2.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s3.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s4.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s5.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s6.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s7.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s8.png" %}" alt="list letters"
class="use__img">
</picture>
</div>
</section>
<section class="animate left">
<div class="title">
@@ -336,7 +391,8 @@
<div class="subtitle">
{% translate "Зарегистрируйся на <a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и получи запросы на перевозку твоей посылки" %}
</div>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}"
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<script>
document.addEventListener("DOMContentLoaded", () => {
const animate = document.querySelectorAll('.animate');
@@ -475,7 +531,8 @@
<div class="subtitle">
{% translate "Достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
</div>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<a href="{% url "registration_page" %}"
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section>
<section class="sore">
<div class="title">
@@ -494,7 +551,8 @@
<div class="h3">
{% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
</div>
<a href="{% url "registration_page" %}" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<a href="{% url "registration_page" %}"
class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<br/>
</div>
</section>