diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 8633ed6..481acef 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -488,7 +488,6 @@ button{ display: block; } - .form-input__error{ margin-top: 4px; @@ -500,11 +499,15 @@ button{ color: #f60909; display: none; + + position: relative; } .form-input__error--absolute{ position: absolute; - top: 50px; + bottom: -19.95px; left: 0; + + width: 100%; } .modal-form__content.check .form__input:invalid{ border-color: #f60909; @@ -515,6 +518,19 @@ button{ .modal-form__content.check .form-input-phone__input:invalid + .form-input__error{ display: block; } +.modal-form__content.check .form-input-phone__input:invalid + .form-input__error--absolute::before{ + content: ''; + + position: absolute; + top: -53px; + left: -1px; + + width: 100%; + height: 48px; + + border-radius: 20px; + border: 1px solid #f60909; +} .form-input__phone{ padding: 12px 16px 12px ; @@ -820,6 +836,8 @@ button{ overflow: hidden; transition: height .2s ease-out; + + z-index: 10; } .form-input-list__block-content.active{ border: 1px solid var(--background-black); @@ -1360,9 +1378,11 @@ button{ transition: opacity .2s ease-out; pointer-events: none; - display: flex; + /* display: flex; justify-content: center; - align-items: center; + align-items: center; */ + + overflow-y: auto; } .modal.active{ opacity: 1; @@ -1631,6 +1651,8 @@ button{ } .modal-form{ + margin: auto; + width: 600px; padding: 24px; @@ -1739,12 +1761,25 @@ button{ display: flex; justify-content: space-between; } +.modal-form-content-line__element{ + position: relative; +} .modal-form-content__line--two .modal-form-content-line__element{ width: calc(50% - 12px); } .modal-form__buttons{ margin-top: 32px; } +.modal-form__buttons--two{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-form__buttons--two button, +.modal-form__buttons--two input{ + width: calc(50% - 20px); +} /* modal */ /* toggle */ diff --git a/assets/js/gp-form.js b/assets/js/gp-form.js index 847c8bc..50a5af7 100644 --- a/assets/js/gp-form.js +++ b/assets/js/gp-form.js @@ -1,5 +1,6 @@ '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) { @@ -22,7 +23,8 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, let newIcon = e.querySelector(selectIcon), newCode = e.querySelector(selectCode); - e.onclick = function () { + e.onclick = function (event) { + event.preventDefault(); thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; thisMainCode.textContent = newCode.textContent; @@ -36,7 +38,9 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, }) } -checkPhone('.form-input-phone__input'); +if (document.querySelector('.form-input-phone__input')) { + checkPhone('.form-input-phone__input'); +} function checkPhone(input) { document.querySelector(input).addEventListener('input', function(event) { @@ -69,7 +73,9 @@ function inputTwo(inputTwo, button, oval, input) { thisMain = e; thisButtons.forEach(button => { - button.onclick = function () { + button.onclick = function (event) { + event.preventDefault(); + let newLeft = button.clientWidth; let newValue = button.textContent; @@ -99,7 +105,9 @@ function inputRadio(main ,item, textClass, input) { items.forEach(radio => { let thisText = radio.querySelector(textClass).textContent; - radio.onclick = function () { + radio.onclick = function (event) { + event.preventDefault(); + if (inputRadio.querySelector(`${item}.active`)) { inputRadio.querySelector(`${item}.active`).classList.remove('active'); } @@ -127,7 +135,8 @@ function listInputRadio(main ,item, textClass, input, content, block) { } items.forEach(item => { - item.onclick = function () { + item.onclick = function (event) { + event.preventDefault(); let newText = item.querySelector(textClass).textContent; thisInput.value = newText; @@ -143,4 +152,4 @@ function listInputRadio(main ,item, textClass, input, content, block) { } }) }) -} \ No newline at end of file +} diff --git a/notification-form-data.html b/notification-form-data.html new file mode 100644 index 0000000..262fabb --- /dev/null +++ b/notification-form-data.html @@ -0,0 +1,311 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ + +
+
+ +

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

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

7

+ +
Номер введён неверно
+
+ +
+ + + + + + + + + + + +
+
+
+
+ +
+ + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/notification-form-pet.html b/notification-form-pet.html new file mode 100644 index 0000000..883ae26 --- /dev/null +++ b/notification-form-pet.html @@ -0,0 +1,433 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ + +
+
+ +

Добавить питомца

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

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

+
+
+
+
+
+ +

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

+
+
+
+
+
+ +

Пожилой (от 7 до 12 лет)

+
+
+
+
+
+ +

Стареющий (от 12 лет и старше)

+
+ +
+ +
+ +
+
+
+
+ + + + + + \ No newline at end of file