From da67b17fffb139d870b205ed14e6d3a12111ef9c Mon Sep 17 00:00:00 2001 From: ArtemB Date: Mon, 10 Jul 2023 13:05:48 +0300 Subject: [PATCH] 0.0.6 registration page update, added separate footer and header files --- static/css/styles.css | 810 +++++++++++++++++++++-- static/js/{header.js => registration.js} | 2 +- templates/blocks/b_footer.html | 139 +++- templates/blocks/b_header.html | 40 +- templates/forms/f_registration.html | 125 +++- templates/inter/meta.html | 2 +- templates/pages/p_registration.html | 4 +- 7 files changed, 987 insertions(+), 135 deletions(-) rename static/js/{header.js => registration.js} (87%) diff --git a/static/css/styles.css b/static/css/styles.css index 11eee07..fb973b5 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); + /* Reset and base styles */ * { @@ -6,17 +8,12 @@ border: none; } -*, -*::before, -*::after { - box-sizing: border-box; -} /* Links */ a, a:link, a:visited { text-decoration: none; - color: black; + } a:hover { @@ -57,7 +54,7 @@ input, textarea, button, select { font-family: inherit; font-size: inherit; color: inherit; - background-color: transparent; + } input::-ms-clear { @@ -94,71 +91,772 @@ html, body{ height: 100%; } -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); -.header { - display: flex; - justify-content: space-between; - padding: 10px; - background: #F8F8F8; - font-family: Inter; - font-weight: 500; - font-size: 16px; - line-height: 22px; - color: black; + + + +/*Стилизация radio button */ + +.form_radio_btn { + display: inline-block; + margin-right: 10px; +} +.form_radio_btn input[type=radio] { + display: none; +} +.form_radio_btn label { + display: inline-block; + cursor: pointer; + padding: 0px 15px; + line-height: 34px; + border: 1px solid #999; + border-radius: 6px; + user-select: none; } -.header__section{ +/* Checked */ +.form_radio_btn input[type=radio]:checked + label { + background: #ffe0a6; +} + +/* Hover */ +.form_radio_btn label:hover { + color: #666; +} + +/* Disabled */ +.form_radio_btn input[type=radio]:disabled + label { + background: #efefef; + color: #666; +} + +/*_________________________________________________________*/ + + +body { + margin: 0; + padding: 0; + background: #F8F8F8; +} + +header { + max-width: 1400px; + margin: auto; + margin-top: 40px; + margin-bottom: 60px; + padding: 0px 40px; + display: flex; + justify-content: space-between; +} + +footer { + height: 318px; + background: #272424; + margin-top: 50px; +} + +section.register>h1 { + color: #272424; + text-align: center; + font-family: Inter; + font-size: 44px; + font-style: normal; + font-weight: 700; + line-height: 52px; + padding-bottom: 35px; +} + +.first-column>div:nth-child(2)>div:last-child>input { + width: 276px; + padding: 19px 0 19px 10px; + border-radius: 10px; + border: 1px solid black; +} + +.first-column>div:nth-child(2)>div:last-child { + display: flex; +} + +.first-column>div:nth-child(2)>div:last-child>input::placeholder { + color: rgba(39, 36, 36, 0.60); + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; +} + + +.first-column>div:nth-child(2)>div:first-child { + color: #FFF; + /* Body text 3 */ + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + margin-bottom: 10px; +} + +footer>div { + max-width: 1400px; + margin: auto; + padding: 40px; + display: flex; + justify-content: space-between; +} + +.first-column>div:nth-child(1) { + margin-bottom: 40px; +} + +.first-column>div:nth-child(2) { + margin-bottom: 19px; +} + +.first-column { + max-width: 358px; +} + +.second-footer>div { + display: flex; + max-width: 1400px; + margin: auto; + height: 60px; + align-items: center; + justify-content: space-between; + width: 100%; +} + +.second-footer>div>div:last-child { + display: flex; + width: clamp(400px, 55%, 60%); + justify-content: space-between; +} + +.second-footer { + padding: 0; + height: 60px; + max-width: unset; + background: white; + margin-top: -15px; +} + +.second-column>div:first-child { + margin-bottom: 45px; + color: #FFF; + /* Heading 4 */ + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 28px; +} + +.third-column>div:first-child { + margin-bottom: 45px; + color: #FFF; + /* Heading 4 */ + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 28px; +} + +.third-column>div:last-child>div { + color: #FFF; + /* Body text 2 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + margin-bottom: 8px; +} + +.second-column>div:last-child { + display: flex; + min-width: 400px; +} + +.second-column>div:last-child>div { + flex-basis: 50%; +} + +.second-column>div:last-child>div>div { + margin-bottom: 8px; +} + +.second-column>div:last-child>div>div>a { + color: #FFF; + /* Body text 2 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + text-decoration: none; +} + +.four-column>a { + display: block; + border-radius: 10px; + background: #FF613A; + padding: 10px 20px; + color: #FFF; + /* Body text 1 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; + text-decoration: none; + text-align: center; +} + +.four-column>a:first-child { + margin-bottom: 10px; +} + +.first-column>div:nth-child(2)>div:last-child>div { + display: flex; + width: 60px; + height: 60px; + justify-content: center; + align-items: center; + gap: 4px; + flex-shrink: 0; + border-radius: 10px; + background: #FF613A; + margin-left: -30px; +} + +header>div:first-child { + display: flex; + align-items: center; + justify-content: space-between; + width: clamp(400px, 50%, 500px); +} + +header>div>a { + color: #F8F8F8; + /* Body text 1 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; + display: flex; + width: 152px; + height: 44px; + justify-content: center; + align-items: center; + gap: 8px; + flex-shrink: 0; + border-radius: 10px; + background: #FF613A; + text-decoration: none; +} + +header>div>div>a { + text-decoration: none; + color: #272424; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; +} + +header>div:last-child { + display: flex; + align-items: center; + justify-content: space-between; + width: clamp(400px, 50%, 600px); +} + +header>div:last-child>div:nth-child(2) { display: flex; align-items: center; } -.header__item{ - padding: 10px 15px; - margin-left: 5px; - color: black; + +header>div:last-child>div:nth-child(2)>svg { + margin-right: 5px; } -.footer{ - display: flex; - justify-content: space-between; +.second-footer>div>div:last-child>div>a { + color: #272424; + /* Body text 2 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + text-decoration: none; } -.content{ - flex: 1 1 auto; +.second-footer>div>div:first-child { + color: #272424; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; } -.wrapper{ -min-height: 100vh; +.first-column>div:nth-child(2)>div:last-child>input:focus-visible { + outline: unset; +} + +section.register { + max-width: 1400px; + margin: auto; +} + +section.register>form { display: flex; flex-direction: column; -} -.reg_inputs{ - column-count: 2; - justify-content: center; - width: 630px; - height: 100px; - left: 405px; - top: 330px; - + align-items: center; + margin: auto; + width: clamp(400px, 50%, 600px); + margin-bottom: 120px; } -.reg_inputs label{ - display: block; - border: 1px solid #FF613A; - border-radius: 10px; - width: 305px; - height: 30px; -} - -.reg_button{ +.inputs { display: flex; -flex-direction: row; -justify-content: center; -align-items: center; -padding: 20px 76px; -gap: 10px; - background: #FF613A; - border-radius: 10px; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); + justify-content: space-between; + width: 100%; + margin-bottom: 20px; } + +.inputs>div>input { + border-radius: 10px; + border: 1px solid #FF613A; + width: 100%; + height: 60px; + padding-left: 10px; +} + +.inputs>div { + flex-basis: 50%; +} + +.inputs>div:first-child { + margin-right: 30px; + width: clamp(300px, 300px, 90%); + height: 60px; +} + +.inputs>div>input::placeholder { + color: rgba(39, 36, 36, 0.60); + /* Body text 1 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; + + +} + +.agree { + display: flex; + margin-bottom: 40px; + align-items: end; +} + +.agree>div:first-child { + width: 50px; +} + +.agree>div:last-child { + color: rgba(39, 36, 36, 0.60); + /* Body text 3 */ + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; +} + +.button_register>button { + display: block; + + /* Body text 3 */ + height: 60px; + width: 100%; + background: #FF613A; + color: #FFF; + /* Heading 5 */ + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 600; + text-decoration: none; + line-height: 26px; + border-radius: 10px; + text-align: center; + + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); +} + +.button_register { + width: 100%; +} + +.switch { + width: 375px; + border-radius: 14px; + background: #FFF; + display: flex; + height: 70px; + align-items: center; + margin-bottom: 40px; +} + + + +a.active { + text-decoration: none; + color: #FFF; + /* Body text 1 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; + border-radius: 10px; + background: #FF613A; + display: flex; + width: 169px; + height: 44px; + padding: 8px 16px; + justify-content: center; + align-items: center; + gap: 8px; + flex-shrink: 0; + margin: 0px 3px; +} + +a.deadctive { + text-decoration: none; + display: flex; + width: 100%; + height: 44px; + padding: 8px 16px; + justify-content: center; + align-items: center; + gap: 8px; + flex-shrink: 0; + color: rgba(39, 36, 36, 0.60); + /* Body text 1 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; +} + +.custom-checkbox { + position: absolute; + z-index: -1; + opacity: 0; +} + +.custom-checkbox+label { + display: inline-flex; + align-items: center; + user-select: none; +} + +.custom-checkbox+label::before { + content: ''; + display: inline-block; + width: 2em; + height: 2em; + flex-shrink: 0; + flex-grow: 0; + border: 1px solid #FF613A; + border-radius: 0.25em; + margin-right: 0.5em; + background-repeat: no-repeat; + background-position: center center; + background-size: 50% 50%; +} + +.custom-checkbox:not(:disabled):not(:checked)+label:hover::before { + border-color: #FF613A; +} + +.custom-checkbox:not(:disabled):active+label::before { + background-color: #FF613A; + border-color: #b3d7ff; +} + +.custom-checkbox:focus+label::before { + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +.custom-checkbox:focus:not(:checked)+label::before { + border-color: #80bdff; +} + +.custom-checkbox:checked+label::before { + border-color: #0b76ef; + background-color: #0b76ef; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); +} + +.custom-checkbox:disabled+label::before { + background-color: #e9ecef; +} + +section.login { + max-width: 1400px; + margin: auto; + margin-bottom: 120px; +} + +section.login>h1 { + color: #272424; + text-align: center; + /* Heading 1 */ + font-family: Inter; + font-size: 44px; + font-style: normal; + font-weight: 700; + line-height: 52px; + margin-bottom: 40px; +} + +section.login>div { + width: 420px; + margin: auto; + text-align: center; +} + +.inputs_l { + width: clamp(300px, 400px, 400px); + height: 60px; + margin-bottom: 20px; +} + +.inputs_l>input { + border-radius: 10px; + border: 1px solid #FF613A; + width: 100%; + height: 60px; + padding-left: 10px; +} + +section.login>div>div:nth-child(4) { + color: rgba(39, 36, 36, 0.60); + text-align: center; + /* Body text 3 */ + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + margin-top: 20px; +} + +section.login>div>div:nth-child(5) { + color: #272424; + text-align: center; + /* Heading 5 */ + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 26px; + margin: 20px 0px; +} + +.google { + display: flex; + height: 44px; + padding: 8px 16px; + justify-content: center; + align-items: center; + gap: 8px; + flex-shrink: 0; + border-radius: 10px; + background: #FFF; + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + margin-bottom: 20px; +} + +section.login>div>div:nth-child(7) { + color: rgba(39, 36, 36, 0.60); + /* Body text 1 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; +} + +section.login>div>div:nth-child(7)>a { + text-decoration: none; + color: rgba(39, 36, 36, 0.60); +} + +section.profile { + max-width: 1400px; + margin: auto; + padding: 0px 40px; + margin-bottom: 120px; +} + +section.profile { + display: flex; +} + +.menu_profile { + width: clamp(200px, 400px, 400px); + margin-right: 40px; +} + +.menu_profile>div { + border-radius: 10px; + background:#FFF; + /* Shadow 1 */ + box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20); + margin-bottom: 10px; + padding: 10px; + display: flex; +} + +.menu_profile>div>a { + color: rgba(39, 36, 36, 0.60); + /* Body text 1 */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; + text-decoration: none; + display: block; + width: 100%; + text-align: center; +} + +.menu_profile>div>svg { + flex-basis: 35px; +} + +.info_profile>h1 { + color: #272424; + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 36px; +} + +.info_profile>h1>span:first-child { + color: #FF613A; + text-decoration: underline; +} + +.info_profile>h1>span:last-child { + color: #27242499; + font-size: 20px; +} + +.profile_prof { + display: flex; + width: 300px; +} + +.info_profile>div:nth-child(3) { + color: rgba(39, 36, 36, 0.60); + /* Body text 3 */ + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + width: 350px; + margin-top: 10px; + margin-bottom: 40px; +} + +.info_profile>div:nth-child(4) { + color: #272424; + font-family: Inter; + font-size: 16px; + font-style: normal; + margin-bottom: 40px; + font-weight: 400; + line-height: 22px; +} + +.info_profile>div:nth-child(5) { + color: #272424; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + margin-bottom: 40px; +} + +.info_profile>div:nth-child(6) { + color: #272424; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; +} + +.info_profile>div:nth-child(4)>a { + color: #FF613A; +} + +.info_profile>div:nth-child(5)>a { + color: #FF613A; +} + +.info_profile>div:nth-child(6)>a { + color: #FF613A; +} + +.profile_prof>img { + margin-right: 20px; +} + +.profile_prof>div>div:first-child { + color: #272424; + /* Heading 5 */ + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 26px; +} + +select { + display: block; + height: 60px; + width: 200px; + border-radius: 15px; + border: 1px solid #E6E6E6; + padding: 10px; + color: #272424; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + appearance: none; + background: url("./img/icon-arrow.png") no-repeat calc(100% - 15px) center; +} + +.inputs>span{ + color:red; +} \ No newline at end of file diff --git a/static/js/header.js b/static/js/registration.js similarity index 87% rename from static/js/header.js rename to static/js/registration.js index 464c028..7367229 100644 --- a/static/js/header.js +++ b/static/js/registration.js @@ -18,7 +18,7 @@ function SendRegistrationForm(el){ // location.href = '/' }, error: function (data, exception){ - document.querySelector(".registration").innerHTML = data.responseJSON.html + document.querySelector(".register").innerHTML = data.responseJSON.html } }); } diff --git a/templates/blocks/b_footer.html b/templates/blocks/b_footer.html index 852d23d..7d25ded 100644 --- a/templates/blocks/b_footer.html +++ b/templates/blocks/b_footer.html @@ -1,35 +1,110 @@ {% load i18n %} -
-
- -
{% trans 'Подпишись и будь в курсе всех событий, а также получай подарки и бонусы от' %}Trip With Bonus
-
-
- + \ No newline at end of file diff --git a/templates/blocks/b_header.html b/templates/blocks/b_header.html index d8b0b3f..662f3e9 100644 --- a/templates/blocks/b_header.html +++ b/templates/blocks/b_header.html @@ -1,15 +1,31 @@ {% load i18n %} -
-
- -
{% trans 'Перевезти посылку' %}
-
{% trans 'Отправить посылку' %}
+
+ -
-
-
{% trans 'Служба поддержки' %}
-
{% trans 'Регистрация' %}
-
{% trans 'Войти' %}
+ - -
\ No newline at end of file +
\ No newline at end of file diff --git a/templates/forms/f_registration.html b/templates/forms/f_registration.html index 652f8a1..a362cc9 100644 --- a/templates/forms/f_registration.html +++ b/templates/forms/f_registration.html @@ -1,47 +1,108 @@ -
-

Регистрация

- -
- - -
+
+

Регистрация

{% csrf_token %} -
- - {% if form.errors and form.errors.firstname %} + +
+ + +
+ +
+
+ {% if form.errors and form.errors.firstname %} {{ form.errors.firstname }} {% endif %} - - {% if form.errors and form.errors.email %} - {{ form.errors.email }} - {% endif %} - - {% if form.errors and form.errors.password %} - {{ form.errors.password }} - {% endif %} - - {% if form.errors and form.errors.lastname %} +
+ {% if form.errors and form.errors.lastname %} {{ form.errors.lastname }} {% endif %} - - {% if form.errors and form.errors.tel %} +
+
+
+ {% if form.errors and form.errors.email %} + {{ form.errors.email }} + {% endif %} +
+ {% if form.errors and form.errors.tel %} {{ form.errors.tel }} {% endif %} - - {% if form.errors and form.errors.confirm_password %} +
+
+
+ {% if form.errors and form.errors.password %} + {{ form.errors.password }} + {% endif %} +
+ {% if form.errors and form.errors.confirm_password %} {{ form.errors.confirm_password }} {% endif %} -
- -

Регистрируясь, я соглашаюсь с Лицензионным соглашениеми и Политикой конфиденциальности

- -
- -
+
+
+ + +
Регистрируясь, я соглашаюсь с Лицензионным соглашениеми и Политикой конфиденциальности
+
+ +
+
-
\ No newline at end of file +{##} +{##} +{#
#} +{#

Регистрация

#} +{##} +{#
#} +{##} +{# #} +{# #} +{##} +{#
#} +{#
#} +{# #} +{# #} +{#
#} +{##} +{#
#} +{# {% csrf_token %}#} +{#
#} +{# #} +{# {% if form.errors and form.errors.firstname %}#} +{# {{ form.errors.firstname }}#} +{# {% endif %}#} +{# #} +{# {% if form.errors and form.errors.email %}#} +{# {{ form.errors.email }}#} +{# {% endif %}#} +{# #} +{# {% if form.errors and form.errors.password %}#} +{# {{ form.errors.password }}#} +{# {% endif %}#} +{# #} +{# {% if form.errors and form.errors.lastname %}#} +{# {{ form.errors.lastname }}#} +{# {% endif %}#} +{# #} +{# {% if form.errors and form.errors.tel %}#} +{# {{ form.errors.tel }}#} +{# {% endif %}#} +{# #} +{# {% if form.errors and form.errors.confirm_password %}#} +{# {{ form.errors.confirm_password }}#} +{# {% endif %}#} +{#
#} +{##} +{#

Регистрируясь, я соглашаюсь с Лицензионным соглашениеми и Политикой конфиденциальности

#} +{##} +{#
#} +{# #} +{#
#} +{#
#} +{##} +{##} +{##} +{#
#} \ No newline at end of file diff --git a/templates/inter/meta.html b/templates/inter/meta.html index 60e5ebd..ae83d63 100644 --- a/templates/inter/meta.html +++ b/templates/inter/meta.html @@ -1,4 +1,4 @@ {% load static %} - + \ No newline at end of file diff --git a/templates/pages/p_registration.html b/templates/pages/p_registration.html index 2c41e20..76f153b 100644 --- a/templates/pages/p_registration.html +++ b/templates/pages/p_registration.html @@ -1,3 +1,5 @@ {% include 'inter/meta.html' %} -{% include 'forms/f_registration.html' %} \ No newline at end of file +{% include 'blocks/b_header.html' %} +{% include 'forms/f_registration.html' %} +{% include 'blocks/b_footer.html' %} \ No newline at end of file