From 7ca7790b8f50e4501e2b9e4a2fb8e9542ec2c422 Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Fri, 25 Oct 2024 04:17:25 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B7=D0=B0=D0=BA=D0=BE=D0=BD=D1=87=D0=B8?= =?UTF-8?q?=D0=BB=20inputs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-core.css | 477 +++++++++++++++++- assets/img/svg/country/ar.svg | 13 + assets/img/svg/country/ru.svg | 13 + assets/img/svg/main/triangle-grey.svg | 3 + assets/js/_gp-function.js | 1 + assets/js/gp-form.js | 146 ++++++ notification-decorated.html | 16 +- ...n copy.html => notification-form-test.html | 156 +++++- notification-sub.html | 12 +- 9 files changed, 803 insertions(+), 34 deletions(-) create mode 100644 assets/img/svg/country/ar.svg create mode 100644 assets/img/svg/country/ru.svg create mode 100644 assets/img/svg/main/triangle-grey.svg create mode 100644 assets/js/gp-form.js rename notification copy.html => notification-form-test.html (71%) diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 8587d6e..8633ed6 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -476,6 +476,424 @@ button{ opacity: 1; pointer-events: auto; } + +.label-name{ + margin-bottom: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + display: block; +} + +.form-input__error{ + margin-top: 4px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + + color: #f60909; + + display: none; +} +.form-input__error--absolute{ + position: absolute; + top: 50px; + left: 0; +} +.modal-form__content.check .form__input:invalid{ + border-color: #f60909; +} +.modal-form__content.check .form__input:invalid + .form-input__error{ + display: block; +} +.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{ + display: block; +} +.form-input__phone{ + padding: 12px 16px 12px ; + + display: flex; + align-items: center; + + border-radius: 20px; + border: 1px solid var(--text-black); + + cursor: pointer; + + position: relative; +} +.form-input__phone.focus{ + outline: 1px solid var(--text-black); +} +.form-input-phone__icon{ + height: 16px; + width: 28px; + + background-size: 16px; + background-repeat: no-repeat; + background-position: left; + + position: relative; +} +.form-input-phone__icon::after{ + content: ''; + + position: absolute; + top: 4px; + right: 0; + + width: 8px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/triangle-grey.svg); +} +.form-input-phone__code{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-phone__code::before{ + content: '+'; +} +.form-input-phone__input{ + margin-left: 6px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border: none; + outline: none; +} +.form-input-phone__list{ + position: absolute; + top: 52px; + left: 8px; + + width: 280px; + + z-index: 10; + + transition: opacity .2s ease-out; + + opacity: 0; + pointer-events: none; + + border-radius: 20px; + + overflow: hidden; +} +.form-input-phone__list.active{ + opacity: 1; + pointer-events: auto; +} +.form-input-phone-list__search{ + width: 100%; + + padding: 12px 16px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-left: 1px solid var(--background-black); + border-right: 1px solid var(--background-black); + border-top: 1px solid var(--background-black); + border-radius: 20px 20px 0 0; + + background: var(--background-white); +} +.form-input-phone-list__search::placeholder{ + color: var(--text-6); +} +.form-input-phone-list__content{ + width: 100%; + max-height: 224px; + + padding: 24px 16px; + + border: 1px solid var(--background-black); + border-top: none; + border-radius: 0 0 20px 20px; + + background: var(--background-white); + + overflow-y: auto; +} +.form-input-phone-list__item{ + margin-top: 14px; + + display: flex; + align-items: center; + + background: none; + border: none; + + cursor: pointer; +} +.form-input-phone-list__item:first-child{ + margin-top: 0; +} +.form-input-phone-list-item__icon{ + width: 16px; + aspect-ratio: 1; +} +.form-input-phone-list-item__name{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-phone-list-item__code{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-phone-list-item__code::before{ + content: '+'; +} +.form-input__two{ + padding: 2px; + + display: flex; + + border-radius: 20px; + background: var(--gradient-turquoise); + + position: relative; +} +.form-input-two__oval{ + position: absolute; + top: 2px; + left: 2px; + + width: 50%; + height: calc(100% - 4px); + + border-radius: 18px; + + background: var(--background-white); + transition: left .2s ease-out; +} +.form-input-two__button{ + width: 50%; + + padding: 10px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + background: none; + border: none; + + z-index: 2; +} +.form-input-two__input{ + display: none; +} +.form-input__radio{ + padding: 16px; +} +.form-input-radio__item{ + margin-top: 14px; + + display: flex; + align-items: center; +} +.form-input-radio__item:first-child{ + margin-top: 0; +} +.form-input-radio__circle{ + padding: 2px; + + width: 20px; + aspect-ratio: 1; + + border-radius: 50%; + + background: var(--gradient-blue); + + position: relative; +} +.form-input-radio__item.active .form-input-radio__circle::before{ + content: ''; + + position: absolute; + top: 4px; + left: 4px; + + width: 12px; + aspect-ratio: 1; + + border-radius: 50%; + + background: var(--gradient-blue); +} +.form-input-radio-circle__content{ + width: 16px; + aspect-ratio: 1; + + border-radius: 50%; + + background: var(--background-white); +} +.form-input-radio__title{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); +} +.form-input-radio__input{ + display: none; +} +.form-input__list{ + position: relative; +} +.form-input__list::before{ + content: ''; + position: absolute; + top: 21.5px; + right: 19.5px; + width: 13px; + height: 8px; + background-image: url(../img/svg/main/arrow-black.svg); + background-repeat: no-repeat; + background-size: contain; + pointer-events: none; +} +.form-input-list__input{ + width: 100%; + + border-radius: 20px; + padding: 12px 16px; + padding-right: 40px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border: 1px solid var(--text-black); +} + +.form-input-list__input::placeholder{ + color: var(--text-grey); +} +.form-input-list__block-content{ + position: absolute; + top: 50px; + left: 0; + + width: 100%; + max-height: 192px; + height: 0; + + border-radius: 20px; + background-color: var(--background-white); + + overflow: hidden; + + transition: height .2s ease-out; +} +.form-input-list__block-content.active{ + border: 1px solid var(--background-black); +} +.form-input-list__content{ + margin: 8px 16px; + + max-height: 176px; + + padding-right: 16px; + + overflow-y: auto; +} +.form-input-list__content::-webkit-scrollbar{ + border-radius: 8px; + width: 4px; + background: rgba(204, 204, 204, 0.2); +} +.form-input-list__content::-webkit-scrollbar-thumb{ + border-radius: 8px; + background: var(--background-9); +} +.form-input-list__content +.form-input-list__item{ + margin-top: 16px; + + width: 100%; + + display: flex; + justify-content: space-between; + align-items: center; + + border-radius: 8px; + padding: 4px; + + background: none; + border: none; +} +.form-input-list__item:first-child{ + margin-top: 0; +} +.form-input-list__item.active{ + background: rgba(204, 204, 204, 0.2); +} +.form-input-list-item__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-list-item__box{ + width: 20px; + aspect-ratio: 1; + + padding: 2px; + + border-radius: 4px; + + background: var(--gradient-blue); +} +.form-input-list-item-box__content{ + width: 16px; + aspect-ratio: 1; + + border-radius: 2px; + + background: var(--background-white); +} +.form-input-list__item.active .form-input-list-item-box__content{ + background: var(--gradient-blue); +} + +/* .form-input-radio__ */ /* form */ @@ -1212,24 +1630,26 @@ button{ border-radius: 2px; } -.notification{ +.modal-form{ + width: 600px; + padding: 24px; border-radius: 20px; position: relative; } -.notification--white{ +.modal-form--white{ border: 1px solid var(--background-black); background: var(--background-white); } -.notification--green-gradient{ +.modal-form--green-gradient{ background: var(--gradient-blue); } -.notification--width-584{ +.modal-form--width-584{ width: 584px; } -.notification__close{ +.modal-form__close{ position: absolute; top: 24px; right: 24px; @@ -1246,13 +1666,13 @@ button{ transition: opacity .2s ease-out; } -.notification__close--white{ +.modal-form__close--white{ background-image: url(../img/svg/main/white-x.svg); } -.notification__close:hover{ +.modal-form__close:hover{ opacity: .8; } -.notification__title{ +.modal-form__title{ padding-right: 50px; font-family: var(--font-family); @@ -1262,50 +1682,69 @@ button{ text-transform: uppercase; color: var(--text-dark); } -.notification__text--center{ +.modal-form__text--center{ text-align: center; } -.notification__text--center-pc{ +.modal-form__text--center-pc{ text-align: center; } -.notification__title--green-gradient{ +.modal-form__title--green-gradient{ background: var(--gradient-blue); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } -.notification__title--white{ +.modal-form__title--white{ color: var(--text-white); } -.notification__element{ +.modal-form__element{ margin-top: 24px; } -.notification__element--center{ +.modal-form__element--center{ display: flex; justify-content: center; } -.notification__element--top-40{ +.modal-form__element--top-40{ margin-top: 40px; } -.notification__text{ +.modal-form__text{ font-family: var(--font-family); font-weight: 400; font-size: 20px; line-height: 120%; color: var(--text-black); } -.notification__text--weight-500{ +.modal-form__text--weight-500{ font-weight: 500; } -.notification__text--white{ +.modal-form__text--white{ color: var(--text-white); } -.notification__img{ +.modal-form__img{ width: 100%; height: 360px; object-fit: contain; } +.modal-form__content{ + margin-top: 40px; +} +.modal-form-content__line{ + margin-top: 24px; +} +.modal-form-content__line:first-child{ + margin-top: 0; +} +.modal-form-content__line--two{ + display: flex; + justify-content: space-between; +} +.modal-form-content__line--two .modal-form-content-line__element{ + width: calc(50% - 12px); +} +.modal-form__buttons{ + margin-top: 32px; +} /* modal */ /* toggle */ diff --git a/assets/img/svg/country/ar.svg b/assets/img/svg/country/ar.svg new file mode 100644 index 0000000..4e3a7b3 --- /dev/null +++ b/assets/img/svg/country/ar.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/img/svg/country/ru.svg b/assets/img/svg/country/ru.svg new file mode 100644 index 0000000..fc991dd --- /dev/null +++ b/assets/img/svg/country/ru.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/img/svg/main/triangle-grey.svg b/assets/img/svg/main/triangle-grey.svg new file mode 100644 index 0000000..23ede66 --- /dev/null +++ b/assets/img/svg/main/triangle-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/js/_gp-function.js b/assets/js/_gp-function.js index 71b5d86..ec182a6 100644 --- a/assets/js/_gp-function.js +++ b/assets/js/_gp-function.js @@ -121,4 +121,5 @@ export function toggleHeader(button, content, blockheight, removeBlock, removeCl } } } + // function \ No newline at end of file diff --git a/assets/js/gp-form.js b/assets/js/gp-form.js new file mode 100644 index 0000000..847c8bc --- /dev/null +++ b/assets/js/gp-form.js @@ -0,0 +1,146 @@ +'use strict'; + +inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code'); + +function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) { + let inputs = document.querySelectorAll(main); + + inputs.forEach(e => { + let thisMainFlag = e.querySelector(mainFlag), + thisMainCode = e.querySelector(mainCode), + thisInput = e.querySelector(input), + thisList = e.querySelector(list), + thisSelects = e.querySelectorAll(selects); + + e.onclick = function (event) { + thisInput.focus(); + + thisList.classList.add('active'); + } + + thisSelects.forEach(e => { + let newIcon = e.querySelector(selectIcon), + newCode = e.querySelector(selectCode); + + e.onclick = function () { + thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; + thisMainCode.textContent = newCode.textContent; + + + setTimeout(() => { + thisList.classList.remove('active'); + }, 0); + } + + }) + }) +} + +checkPhone('.form-input-phone__input'); + +function checkPhone(input) { + document.querySelector(input).addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (!(/^\d+$/.test(text.replaceAll(' ', '')))) { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 4 || length == 8) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + }) +} + +inputTwo('.form-input__two', '.form-input-two__button', '.form-input-two__oval', '.form-input-two__input') + +function inputTwo(inputTwo, button, oval, input) { + let inputTwos = document.querySelectorAll(inputTwo); + + inputTwos.forEach(e => { + let thisButtons = e.querySelectorAll(button), + thisOval = e.querySelector(oval), + thisInput = e.querySelector(input), + thisMain = e; + + thisButtons.forEach(button => { + button.onclick = function () { + let newLeft = button.clientWidth; + let newValue = button.textContent; + + if (button.classList.contains('alternative')) { + thisMain.classList.add('alternative'); + thisInput.value = newValue; + thisOval.style.left = `${newLeft}px`; + }else{ + thisMain.classList.remove('alternative'); + thisInput.value = newValue; + thisOval.style.left = `2px`; + } + } + }) + }) +} + +inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') + +function inputRadio(main ,item, textClass, input) { + let inputRadios = document.querySelectorAll(main); + + inputRadios.forEach(inputRadio => { + let items = inputRadio.querySelectorAll(item), + thisInput = inputRadio.querySelector(input); + + items.forEach(radio => { + let thisText = radio.querySelector(textClass).textContent; + + radio.onclick = function () { + if (inputRadio.querySelector(`${item}.active`)) { + inputRadio.querySelector(`${item}.active`).classList.remove('active'); + } + thisInput.value = thisText; + radio.classList.add('active'); + } + }) + }) +} + +listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content'); + +function listInputRadio(main ,item, textClass, input, content, block) { + let listInputRadios = document.querySelectorAll(main); + + listInputRadios.forEach(listInputRadio => { + let thisInput = listInputRadio.querySelector(input), + items = listInputRadio.querySelectorAll(item), + thisContent = listInputRadio.querySelector(content), + thisBlock = listInputRadio.querySelector(block); + + thisInput.onclick = function () { + thisBlock.classList.add('active'); + thisBlock.style.height = '192px'; + } + + items.forEach(item => { + item.onclick = function () { + let newText = item.querySelector(textClass).textContent; + + thisInput.value = newText; + + if (thisContent.querySelector('.active')) { + thisContent.querySelector('.active').classList.remove('active'); + } + + item.classList.add('active'); + + thisBlock.classList.remove('active'); + thisBlock.style.height = '0px'; + } + }) + }) +} \ No newline at end of file diff --git a/notification-decorated.html b/notification-decorated.html index 7d75ce4..183469b 100644 --- a/notification-decorated.html +++ b/notification-decorated.html @@ -225,22 +225,22 @@
-
- +
+ -

Ваш заказ оформлен

+

Ваш заказ оформлен

-
-

+

+

Подтвердите вашу почту

-
- +
+
-
+
diff --git a/notification copy.html b/notification-form-test.html similarity index 71% rename from notification copy.html rename to notification-form-test.html index 523567f..ec00fe4 100644 --- a/notification copy.html +++ b/notification-form-test.html @@ -226,9 +226,163 @@
+
+ +

Изменить мои данные

+ +
+
+
+ + + Имя введено неверно +
+ +
+ + + Фамилия введена неверно +
+
+ +
+
+
+

7

+ + Имя введено неверно +
+ +
+ + + + + + + + + + + +
+
+
+
+ +
+
+
+ + + + + +
+
+ +
+
+
+
+
+ +

Малыш (от 0 до 1 года)

+
+
+
+
+
+ +

Взрослый (от 1 года до 7 лет)

+
+ +
+ +
+ +
+ +
+
+ + + + + +
+
+
+
+ +
+ +
+
+
- + + \ No newline at end of file diff --git a/notification-sub.html b/notification-sub.html index 51a4016..a08c8bb 100644 --- a/notification-sub.html +++ b/notification-sub.html @@ -225,18 +225,18 @@
-
- +
+ -

Подписка на корм

+

Подписка на корм

-
-

+

+

Спасибо за интерес к нашему новому виду услуг, данная функция находится в разработке, если вы хотите узнать первыми о запуске подпишитесь на рассылку.

-
+