diff --git a/.gitignore b/.gitignore index 3c4017b..bf3bc16 100644 --- a/.gitignore +++ b/.gitignore @@ -415,3 +415,7 @@ fabric.properties # Android studio 3.1+ serialized cache file .idea/caches/build_file_checksums.ser +# packages for node +package.json +package-lock.json + diff --git a/BillingApp/migrations/0006_alter_subscribeorder_currency.py b/BillingApp/migrations/0006_alter_subscribeorder_currency.py new file mode 100644 index 0000000..9745853 --- /dev/null +++ b/BillingApp/migrations/0006_alter_subscribeorder_currency.py @@ -0,0 +1,18 @@ +# Generated by Django 4.2.2 on 2024-11-16 11:33 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('BillingApp', '0005_subscribeorder_last_operation_status'), + ] + + operations = [ + migrations.AlterField( + model_name='subscribeorder', + name='currency', + field=models.CharField(default='KZT', max_length=3, verbose_name='Валюта'), + ), + ] diff --git a/static/css/moover.css b/static/css/moover.css index d75a341..8f8e67c 100644 --- a/static/css/moover.css +++ b/static/css/moover.css @@ -1,11 +1,590 @@ -@import url('./moover/root.css'); -@import url('./moover/presentation.css'); -@import url('./moover/cards.css'); -@import url('./moover/easy.css'); -@import url('./moover/use.css'); -@import url('./moover/chatterbox.css'); -@import url('./moover/animate.css'); -@import url('./moover/about.css'); -@import url('./moover/benefits.css'); +.container { + margin: 0 auto; + max-width: 1280px; + position: relative; + min-height: 695px; +} +/*@media (max-width: 1339.98px) {*/ +/* .container {*/ +/* width: 992px*/ +/* }*/ +/*}*/ +/*@media (max-width: 1019.98px) {*/ +/* .container {*/ +/* width: 720px*/ +/* }*/ +/*}*/ +/*@media (max-width: 767.98px) {*/ +/* .container {*/ +/* margin: 0 15px;*/ +/* width: auto*/ +/* }*/ +/*}*/ +:root { + --color-primary: #FF613A; + --color-white: #FFFFFF; + --color-black: #000000; + --color-black2: #272424; + --color-grey: #F1F1F1; + --color-grey2: #7A7979; + --color-orange: #FF613A; + --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), + 0 -1px 10px 0 rgba(198, 199, 203, 0.20); + text-align: center; + color: var(--color-black2); +} +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + font-weight: 700; +} + +h1, .title { + font-size: 44px; + line-height: 52px; +} + +h2, .h2 { + font-size: 24px; + line-height: 36px; + margin-bottom: 10px; +} + +h3, .h3 { + font-size: 20px; + line-height: 28px; + margin-bottom: 12px; +} + +h4, .h4 { + font-size: 18px; + line-height: 26px; + margin-bottom: 20px; +} + +p { + line-height: 22px; + margin-bottom: 20px; +} + +b { + font-weight: 500; +} + +.btn { + display: inline-flex; + text-decoration: none; + color: black; + line-height: 22px; + border-radius: 10px; + padding: 20px 76px 18px; + justify-content: center; + align-items: center; + margin: 0 3px; + letter-spacing: 0.2px; + font-size: 18px; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.title { + font-size: 44px; + font-weight: 700; + line-height: 52px; + margin-bottom: 13px; + margin-left: auto; + margin-right: auto; +} + +.subtitle { + margin-bottom: 81px; + line-height: 22px; +} + +.hide { + display: none; +} + +.presentation { + margin: 20px -65px 140px; +} + +.presentation__top { + position: relative; + min-height: 270px; + margin: 0 auto 116px; + padding: 29px 0 40px; + background-image: url(/static/img/webp/Box9.webp), url(/static/img/webp/Box10.webp), url(/static/img/webp/Box11.webp), url(/static/img/webp/Box12.webp); + background-position: top -5px left 44px, top -30px right -15px, bottom 70px left 276px, bottom 67px right 274px; + background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; +} + +.presentation__title { + margin-bottom: 23px; +} + +.presentation__subtitle { + margin-bottom: 41px; + font-weight: 600; +} + +.presentation__btn { + margin-bottom: 40px; +} + +.presentation__next { + font-weight: 500; + line-height: 22px; + padding-right: 5px; +} + +.presentation__arrows { + padding-top: 2px; + animation: jump 2s ease-in-out infinite; +} + +@keyframes jump { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(-5px); + } + 60% { + transform: translateY(20px); + } + 70% { + transform: translateY(0px); + } + 80% { + transform: translateY(20px); + } + 100% { + transform: translateY(0px); + } +} + +.presentation__bottom .presentation__title { + margin-bottom: 13px; +} + +.presentation__cards { + max-width: 1300px; + margin: 0 auto; +} + +.cards__list { + display: grid; + grid-template-columns: repeat(4, 1fr); +} + +.cards__item { + position: relative; +} + +.cards__img:hover { + scale: 1.05; + transition: scale 0.15s linear; +} + +.cards__img { + margin-bottom: 5px; +} + +.cards__desc { + font-weight: 500; + line-height: 22px; +} + +.cards__arrow { + width: 62px; + height: 20px; + position: absolute; + right: -30px; + top: -21px; + background-image: url("/static/img/svg/Arrow23.svg"); +} + +.easy { + margin-bottom: 162px; +} + +.easy .title { + max-width: 55%; + margin-bottom: 21px; +} + +.easy .subtitle { + margin-bottom: 41px; +} + +.easy__grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(2, minmax(186px, auto)); + grid-template-areas: 'a b' 'a c'; + grid-column-gap: 20px; + grid-row-gap: 80px; + margin-bottom: 46px; +} + +.easy__item { + border-radius: 30px; + background-color: var(--color-grey); + /*background-color: #a72525;*/ + text-align: left; + padding: 21px; + box-shadow: var(--box-shadow-primary); +} + +.easy__item--fir { + grid-area: a; + margin-right: 60px; + padding-bottom: 0; +} + +.easy__item--fir p { + width: 93%; + margin-bottom: 29px; +} + +.easy__item--sec img { + margin-bottom: -10px; + margin-right: -5px; +} + +.easy__item--thr img { + margin-bottom: -10px; + margin-right: 24px; +} + +.easy__item--sec { + grid-area: b; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; +} + +.easy__item--sec p, +.easy__item--thr p, +.easy__item--sec, +.easy__item--thr { + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +.easy__item--thr { + grid-area: c; + display: flex; + align-items: center; + justify-content: space-between; +} + +.easy__item--thr p { + max-width: 50%; +} + +.easy__arrow { + width: 68px; + height: 18px; + background-image: url("/static/img/svg/Arrow08.svg"); + position: absolute; + z-index: 1; +} + +.easy__arrow--fir { + top: 46%; + right: 101%; +} + +.easy__arrow--sec { + top: 117%; + left: 30%; + transform: rotate(90deg); +} + +.easy__btn { + margin-top: -21px; +} + +.chatterbox { + margin-bottom: 160px; +} + +.chatterbox__slider { + max-width: 1200px; + margin: 0 auto; +} + +.chatterbox__slide { + width: 335px; + height: 615px; + background: url("/static/img/webp/phone-border.webp") center no-repeat; + transition: scale 0.2s ease-in-out; + margin: auto; + position: relative; +} + +.chatterbox__slide.loaded video { + opacity: 1; +} + +.chatterbox__slide.loaded img { + z-index: -10; +} + +.chatterbox__slide video { + max-width: 100%; + opacity: 0; + transition: opacity 0.2s ease-in-out; + pointer-events: none; +} + +.chatterbox__slide img { + position: absolute; + scale: 1.32; + top: 11%; +} + +.chatterbox__wrap { + position: absolute; + left: 8px; + right: 8px; + top: 8px; + bottom: 8px; + border-radius: 25px; + background-color: grey; + overflow: hidden; +} + +.chatterbox__vbtn { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0; + transition: opacity 0.2s ease-in-out; + pointer-events: none; +} + +.loaded .chatterbox__vbtn { + display: none; +} + +.chatterbox__vbtn::before { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border: 0; + border-radius: 50%; + transition: opacity 100ms linear; +} + +.chatterbox__vbtn::before, .chatterbox__vbtn::after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + cursor: pointer; +} + +.chatterbox__vbtn::after { + border-color: transparent transparent transparent #ffffff; + border-style: solid; + border-width: 15px 0 15px 25px; + display: inline-block; + margin-left: 2px; +} + +.chatterbox__vbox { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: calc(100% - 16px); +} + +.chatterbox .title { + margin-bottom: 60px; +} + +.chatterbox .slick-next { + right: -40px; +} + +.chatterbox .slick-prev { + left: -40px; +} + +.slick-slide:not(.slick-center) .chatterbox__slide { + scale: 0.72; +} + +.slick-center .chatterbox__vbtn { + opacity: 1; + pointer-events: initial; + z-index: 1; +} + +.slick-center .chatterbox__vbox video { + pointer-events: initial; + cursor: pointer; +} + +.use { + margin-bottom: 123px; +} + +.use .title { + max-width: 80%; + margin-bottom: 49px; +} + +.use__img { + width: 67.5%; + margin-left: 16px; + margin-bottom: 31px; +} + +.use__btn { + margin-bottom: 11px; +} + +.use__link { + font-size: 18px; + font-weight: 600; + line-height: 26px; + color: var(--color-grey2); +} + +.use.use--diff .title { + width: 60%; + margin-bottom: 60px; +} + +.use.use--diff .use__img { + width: 100%; + margin-left: 0; + margin-bottom: 17px; +} + +.use.use--lett { + margin-bottom: 120px; +} + +.use.use--lett .title { + margin-bottom: 51px; +} + +.use.use--lett .use__img { + margin-left: -5px; + margin-right: -5px; + max-width: 110%; + width: 1290px; +} + +.animate { + padding: 60px 40px 49px; + opacity: 0; + transform: translateX(-180px); + background-color: var(--color-black2); + border-radius: 30px; + color: white; + margin-bottom: 160px; +} + +.animate .title { + margin-bottom: 25px; + max-width: 87%; + /*width: 90%;*/ +} + +.animate .subtitle { + width: 47%; + margin: 0 auto 23px; +} + +.animate__link { + color: var(--color-orange); + text-decoration: underline !important; +} + +.about { + margin-bottom: 168px; +} + +.about .title { + margin-bottom: 60px; +} + +.about__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +.about__img { + box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, inset -18.19px -1.21px 18.19px 0 #4052801A, 48.5px 36.38px 36.38px 0 #6B7F9933; + border-radius: 31px; + margin-left: 8px; + margin-top: 8px; +} + +.about__right { + text-align: left; + padding-top: 43px; + padding-left: 50px; +} + +.about__half { + max-width: 50%; + float: left; +} + +.about__half:last-child { + padding-left: 16px; + max-width: 47%; +} + +.about b { + letter-spacing: 0.4px; +} + +.benefits { + margin-bottom: 50px; +} + +.benefits__grid { + text-align: left; + display: grid; + grid-template-columns: 1.5fr 3fr 1.5fr; +} + +.benefits__item { + min-height: 122px; + padding-right: 7px; + margin-bottom: 22px; +} + +.benefits__third { + padding-left: 16px; +} + +.benefits .title { + margin-bottom: 76px; +} + +.benefits img { + position: relative; + top: 14px; + right: -11px; +} diff --git a/static/css/moover/benefits.css b/static/css/moover/benefits.css index 260f10e..25a1d6b 100644 --- a/static/css/moover/benefits.css +++ b/static/css/moover/benefits.css @@ -1,10 +1,5 @@ .benefits { - /*padding: 0 50px;*/ - -} - -.benefits .title { - margin-bottom: 76px; + margin-bottom: 50px; } .benefits__grid { @@ -13,13 +8,18 @@ grid-template-columns: 1.5fr 3fr 1.5fr; } -.benefits__col { - +.benefits__item { + min-height: 122px; + padding-right: 7px; + margin-bottom: 22px; } -.benefits__item { - margin-bottom: 54px; - padding-right: 5px; +.benefits__third { + padding-left: 16px; +} + +.benefits .title { + margin-bottom: 76px; } .benefits img { @@ -27,11 +27,3 @@ top: 14px; right: -11px; } - -.benefits__third { - padding-left: 16px; -} - -.benefits__third .benefits__item { - margin-bottom: 22px; -} \ No newline at end of file diff --git a/static/css/moover/chatterbox.css b/static/css/moover/chatterbox.css index ccd1229..8d46c7c 100644 --- a/static/css/moover/chatterbox.css +++ b/static/css/moover/chatterbox.css @@ -2,27 +2,11 @@ margin-bottom: 160px; } -.chatterbox .title { - margin-bottom: 60px; -} - .chatterbox__slider { max-width: 1200px; margin: 0 auto; } -.slick-slide { - /*padding: 50px;*/ -} - -.chatterbox .slick-next { - right: -40px; -} - -.chatterbox .slick-prev { - left: -40px; -} - .chatterbox__slide { width: 335px; height: 615px; @@ -32,31 +16,36 @@ position: relative; } -.chatterbox__wrap { - position: absolute; - /* z-index: -1; */ - left: 8px; - right: 8px; - top: 8px; - bottom: 8px; - border-radius: 25px; - background-color: grey; - overflow: hidden; -} - -.slick-slide:not(.slick-center) .chatterbox__slide { - scale: 0.72; -} - -.slick-center .chatterbox__vbtn { +.chatterbox__slide.loaded video { opacity: 1; - pointer-events: initial; - z-index: 1; } -.slick-center .chatterbox__vbox video { - pointer-events: initial; - cursor: pointer; +.chatterbox__slide.loaded img { + z-index: -10; +} + +.chatterbox__slide video { + max-width: 100%; + opacity: 0; + transition: opacity 0.2s ease-in-out; + pointer-events: none; +} + +.chatterbox__slide img { + position: absolute; + scale: 1.32; + top: 11%; +} + +.chatterbox__wrap { + position: absolute; + left: 8px; + right: 8px; + top: 8px; + bottom: 8px; + border-radius: 25px; + background-color: grey; + overflow: hidden; } .chatterbox__vbtn { @@ -70,9 +59,13 @@ pointer-events: none; } +.loaded .chatterbox__vbtn { + display: none; +} + .chatterbox__vbtn::before { - width: 20px; - height: 20px; + width: 80px; + height: 80px; display: flex; align-items: center; justify-content: center; @@ -82,11 +75,6 @@ transition: opacity 100ms linear; } -.chatterbox__vbtn::before { - width: 80px; - height: 80px; -} - .chatterbox__vbtn::before, .chatterbox__vbtn::after { content: ""; position: absolute; @@ -106,27 +94,35 @@ .chatterbox__vbox { position: relative; - /*z-index: -1;*/ - padding: 8px; display: flex; justify-content: center; align-items: center; height: calc(100% - 16px); } -.chatterbox video { - max-width: 100%; - opacity: 0; - transition: opacity 0.2s ease-in-out; - pointer-events: none; - +.chatterbox .title { + margin-bottom: 60px; } -.loaded .chatterbox__vbtn { - display: none; +.chatterbox .slick-next { + right: -40px; } -.loaded video { +.chatterbox .slick-prev { + left: -40px; +} + +.slick-slide:not(.slick-center) .chatterbox__slide { + scale: 0.72; +} + +.slick-center .chatterbox__vbtn { opacity: 1; + pointer-events: initial; + z-index: 1; } +.slick-center .chatterbox__vbox video { + pointer-events: initial; + cursor: pointer; +} diff --git a/styles/moover.scss b/styles/moover.scss new file mode 100644 index 0000000..c7945b5 --- /dev/null +++ b/styles/moover.scss @@ -0,0 +1,9 @@ +@import "./moover/root"; +@import "./moover/presentation"; +@import "./moover/cards"; +@import "./moover/easy"; +@import "./moover/chatterbox"; +@import "./moover/use"; +@import "./moover/animate"; +@import "./moover/about"; +@import "./moover/benefits"; \ No newline at end of file diff --git a/static/css/moover/about.css b/styles/moover/about.scss similarity index 100% rename from static/css/moover/about.css rename to styles/moover/about.scss diff --git a/static/css/moover/animate.css b/styles/moover/animate.scss similarity index 100% rename from static/css/moover/animate.css rename to styles/moover/animate.scss diff --git a/styles/moover/benefits.scss b/styles/moover/benefits.scss new file mode 100644 index 0000000..7beb626 --- /dev/null +++ b/styles/moover/benefits.scss @@ -0,0 +1,29 @@ +.benefits { + margin-bottom: 50px; + + &__grid { + text-align: left; + display: grid; + grid-template-columns: 1.5fr 3fr 1.5fr; + } + + &__item { + min-height: 122px; + padding-right: 7px; + margin-bottom: 22px; + } + + &__third { + padding-left: 16px; + } + + .title { + margin-bottom: 76px; + } + + img { + position: relative; + top: 14px; + right: -11px; + } +} \ No newline at end of file diff --git a/static/css/moover/cards.css b/styles/moover/cards.scss similarity index 100% rename from static/css/moover/cards.css rename to styles/moover/cards.scss diff --git a/styles/moover/chatterbox.scss b/styles/moover/chatterbox.scss new file mode 100644 index 0000000..bf3e341 --- /dev/null +++ b/styles/moover/chatterbox.scss @@ -0,0 +1,131 @@ +.chatterbox { + margin-bottom: 160px; + + &__slider { + max-width: 1200px; + margin: 0 auto; + } + + &__slide { + width: 335px; + height: 615px; + background: url("/static/img/webp/phone-border.webp") center no-repeat; + transition: scale 0.2s ease-in-out; + margin: auto; + position: relative; + + &.loaded { + video { + opacity: 1; + } + + img { + z-index: -10; + } + } + + video { + max-width: 100%; + opacity: 0; + transition: opacity 0.2s ease-in-out; + pointer-events: none; + } + + img { + position: absolute; + scale: 1.32; + top: 11%; + } + } + + &__wrap { + position: absolute; + left: 8px; + right: 8px; + top: 8px; + bottom: 8px; + border-radius: 25px; + background-color: grey; + overflow: hidden; + } + + &__vbtn { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0; + transition: opacity 0.2s ease-in-out; + pointer-events: none; + + .loaded & { + display: none; + } + + &::before { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border: 0; + border-radius: 50%; + transition: opacity 100ms linear; + } + + &::before, + &::after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + cursor: pointer; + } + + &::after { + border-color: transparent transparent transparent #ffffff; + border-style: solid; + border-width: 15px 0 15px 25px; + display: inline-block; + margin-left: 2px; + } + } + + &__vbox { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: calc(100% - 16px); + } + + .title { + margin-bottom: 60px; + } + + .slick-next { + right: -40px; + } + + .slick-prev { + left: -40px; + } +} + +.slick-slide:not(.slick-center) .chatterbox__slide { + scale: 0.72; +} + +.slick-center .chatterbox__vbtn { + opacity: 1; + pointer-events: initial; + z-index: 1; +} + +.slick-center .chatterbox__vbox video { + pointer-events: initial; + cursor: pointer; +} diff --git a/static/css/moover/easy.css b/styles/moover/easy.scss similarity index 100% rename from static/css/moover/easy.css rename to styles/moover/easy.scss diff --git a/static/css/moover/presentation.css b/styles/moover/presentation.scss similarity index 100% rename from static/css/moover/presentation.css rename to styles/moover/presentation.scss diff --git a/static/css/moover/root.css b/styles/moover/root.scss similarity index 100% rename from static/css/moover/root.css rename to styles/moover/root.scss diff --git a/static/css/moover/use.css b/styles/moover/use.scss similarity index 100% rename from static/css/moover/use.css rename to styles/moover/use.scss diff --git a/templates/pages/p_mover_landing_page.html b/templates/pages/p_mover_landing_page.html index e62c456..854d3f4 100644 --- a/templates/pages/p_mover_landing_page.html +++ b/templates/pages/p_mover_landing_page.html @@ -133,60 +133,86 @@
{% translate "Что о нас говорят люди" %}
- {% for media_item in page.get_media_items %} -
-
-
+ {# {% for media_item in page.get_video_items %}#} + {#
#} + {#
#} + {#
#} + {#
#} + {#
#} + {##} + {# #} + {#
#} + {#
#} + {#
#} + {#
#} + {# {% endfor %}#} +
+
+
+ user + +
+
+
- -
+
+
+
+
+
+
+ user + +
- {% endfor %} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# #} -{#
#} -{#
#} -{#
#} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# #} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# #} -{#
#} -{#
#} -{#
#} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# #} -{#
#} -{#
#} -{#
#} +
+
+
+
+
+ user + +
+
+
+ +
+
+
+
+
+
+ user + +
+
+
@@ -195,7 +221,13 @@
-
@@ -312,13 +344,13 @@

{% translate "Если не хочешь размещать объявление и ждать, то можешь самостоятельно на нашем сайте найти перевозчика через удобную систему поиска" %}

-{#
#} + {# #}
{% translate "Преимущества сервиса" %}
-
+

{% translate "Прямой контакт" %}

{% translate "Общаешься напрямую с перевозчиком, никаких посредников" %}

@@ -335,7 +367,7 @@
benefits
-
+

{% translate "Уведомления" %}

{% translate "Можешь самостоятельно найти перевозчиков или разместить объявление на сайте." %}