Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

fix открытие/закрытие form/notification

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 19cd9dfc68
commit c9611bf3d2
4 changed files with 508 additions and 6 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      assets/css/gp-style-core.css
  2. 26
      assets/js/_gp-function.js
  3. 4
      assets/js/gp-cabinet.js
  4. 474
      registration.html

10
assets/css/gp-style-core.css
Unescape View File

@ -1679,6 +1679,11 @@ button{
border-radius: 20px;
position: relative;
display: none;
}
.modal-form.active{
display: block;
}
.modal-form--white{
border: 1px solid var(--background-black);
@ -1827,11 +1832,14 @@ button{
width: 1105px;
display: flex;
display: none;
border-radius: 24px;
border: none;
}
.modal-map.active{
display: flex;
}
.modal-map__left{
width: 600px;

26
assets/js/_gp-function.js
Unescape View File

@ -60,6 +60,18 @@ export function modalClose(buttonElement) {
})
}
export function closeModalForm(close){
let buttons = document.querySelectorAll(close),
modal = document.querySelector('.modal');
buttons.forEach(button => {
button.onclick = function (buttonEvent) {
modal.classList.remove('active');
modal.querySelector('.active').classList.remove('active');
}
})
}
export function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
let elements = document.querySelectorAll(mainElement);
@ -122,4 +134,18 @@ export function toggleHeader(button, content, blockheight, removeBlock, removeCl
}
}
export function modalFormOpen(formOrNotification) {
let buttons = document.querySelectorAll(formOrNotification),
modal = document.querySelector('.modal');
buttons.forEach(button => {
button.onclick = function (eventButton) {
let classOpenForm = button.dataset.form,
form = modal.querySelector(`.${classOpenForm}`);
form.classList.add('active');
modal.classList.add('active');
}
})
}
// function

4
assets/js/gp-cabinet.js
Unescape View File

@ -5,7 +5,9 @@ import * as fun from './_gp-function.js';
let widthPhoneCabinet = 1200;
fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
fun.modalFormOpen('.form-open');
fun.closeModalForm('.modal-form__close');
controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);
@ -50,3 +52,5 @@ function controlCabinet(buttons, main, minWidth){
}
}

474
registration.html
Unescape View File

@ -235,7 +235,7 @@
</div>
<div class="cabinet-card__element">
<button class="button button--gradient button--high-46">
<button class="button button--gradient button--high-46 form-open" data-form="form-sub">
Узнать подробности
</button>
</div>
@ -285,7 +285,7 @@
<div class="cabinet-card__element">
<div class="cabinet-card__block-buttons">
<button class="cabinet-card__button">
<button class="cabinet-card__button form-open" data-form="form-data">
Изменить
</button>
@ -309,7 +309,7 @@
</div>
<div class="cabinet-card__element cabinet-card__element--margin-top-32">
<button class="button button--white button--100-perc">
<button class="button button--white button--100-perc form-open" data-form="modal-map">
Добавить адрес
</button>
</div>
@ -354,7 +354,7 @@
<div class="cabinet-card cabinet-card--green">
<div class="cabinet-card__content">
<button class="cabinet-card__block-add-pets">
<button class="cabinet-card__block-add-pets form-open" data-form="form-pet">
<div class="cabinet-card-add-pets__circle">
<img src="assets/img/svg/main/plus-grey.svg" alt="">
</div>
@ -377,7 +377,7 @@
</div>
<div class="cabinet-card__element">
<button class="button button--gradient button--high-46">
<button class="button button--gradient button--high-46 form-open" data-form="form-sub">
Узнать подробности
</button>
</div>
@ -673,6 +673,470 @@
</div>
</footer>
<div class="modal">
<div class="modal-form modal__notification modal-form--green-gradient modal-form--width-584 form-sub">
<button class="modal-form__close modal-form__close--white"></button>
<p class="modal-form__title modal-form__title--white">Подписка на корм</p>
<div class="modal-form__element modal-form__element--top-40">
<p class="modal-form__text modal-form__text--white">
Спасибо за интерес к нашему новому виду услуг, данная функция находится в разработке, если вы хотите узнать первыми о запуске подпишитесь на рассылку.
</p>
</div>
<div class="modal-form__element modal-form__element--top-40">
<button class="button form__button-pc button--white button--100-perc open-overlay button--high">
Хочу попробовать первым!
</button>
<button class="button form__button-mobile button--white button--100-perc open-overlay button--high">
Хочу быть первым!
</button>
</div>
</div>
<div class="modal-form modal__notification modal-form--white modal-form--width-584">
<button class="modal-form__close"></button>
<p class="modal-form__title modal-form__text--center-pc modal-form__title--green-gradient">Ваш заказ оформлен</p>
<div class="modal-form__element">
<p class="modal-form__text modal-form__text--weight-500 modal-form__text--center">
Подтвердите вашу почту
</p>
</div>
<div class="modal-form__element">
<img src="assets/img/modal/about_slider.png" alt="" class="modal-form__img">
</div>
<div class="modal-form__element modal-form__element--center">
<button class="button button--gradient button--high-46">
Подтвердить почту
</button>
</div>
</div>
<div class="modal-form form__full-mobile modal-form--white form-data">
<button class="modal-form__close"></button>
<p class="modal-form__title">Изменить мои данные</p>
<form class="modal-form__content check" method="post" action="/send-telegram.php">
<div class="modal-form-content__line modal-form-content__line--two">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Имя</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Ваше имя" required="">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
<div class="modal-form-content-line__element">
<label for="lastname" class="label-name">Фамилия</label>
<input id="lastname" class="form__input" type="text" name="name" placeholder="Ваша фамилия" required="">
<span class="form-input__error form-input__error--absolute">Фамилия введена неверно</span>
</div>
</div>
<div class="modal-form-content__line">
<label for="firstname" class="label-name">Телефон</label>
<div class="form-input__phone">
<div class="form-input-phone__icon" style="background-image: url(assets/img/svg/country/ru.svg);"></div>
<p class="form-input-phone__code">7</p>
<input type="text" placeholder="___ ___ ____" pattern="[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="12" maxlength="12" class="form-input-phone__input" required>
<div class="form-input__error form-input__error--absolute">Номер введён неверно</div>
<div class="form-input-phone__list">
<input type="text" placeholder="Поиск" class="form-input-phone-list__search">
<div class="form-input-phone-list__content">
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ru.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Россия</p>
<p class="form-input-phone-list-item__code">7</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
<button class="form-input-phone-list__item">
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
<p class="form-input-phone-list-item__name">Армения</p>
<p class="form-input-phone-list-item__code">374</p>
</button>
</div>
</div>
</div>
</div>
<div class="modal-form__buttons modal-form__buttons--two">
<input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
<input type="reset" class="button button--white open-overlay button--high" value="Отмена">
</div>
</form>
</div>
<div class="modal-form form__full-mobile modal-form--white form-pet">
<button class="modal-form__close"></button>
<p class="modal-form__title">Добавить питомца</p>
<form class="modal-form__content check" method="post" action="/send-telegram.php">
<div class="modal-form-content__line">
<label for="" class="label-name">Вид животного</label>
<div class="form-input__two">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
<button class="form-input-two__button">Кошка</button>
<button class="form-input-two__button ">Собака</button>
</div>
</div>
<div class="modal-form-content__line">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Имя</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Имя питомца" required="">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div>
<div class="modal-form-content__line">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Порода</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Порода вашего питомца" required="">
<span class="form-input__error form-input__error--absolute">Порода введено неверно</span>
</div>
</div>
<div class="modal-form-content__line">
<label for="" class="label-name">Пол вашего питомца</label>
<div class="form-input__two">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
<button class="form-input-two__button">Мальчик</button>
<button class="form-input-two__button ">Девочка</button>
</div>
</div>
<div class="modal-form-content__line modal-form-content__line--two">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Вид активности</label>
<div class="form-input__list">
<input type="text" placeholder="Выберите из списка" class="form-input-list__input" readonly="">
<div class="form-input-list__block-content">
<div class="form-input-list__content">
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая 2</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Вес</label>
<div class="form-input__list">
<input type="text" placeholder="Выберите из списка" class="form-input-list__input" readonly="">
<div class="form-input-list__block-content">
<div class="form-input-list__content">
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая 2</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Высокая</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-form-content__line">
<label for="" class="label-name">Возраст питомца</label>
<div class="form-input__two" data-content="modal__age">
<input type="radio" class="form-input-two__input">
<div class="form-input-two__oval"></div>
<button class="form-input-two__button">Примерный</button>
<button class="form-input-two__button ">Точный</button>
</div>
</div>
<div class="modal__age">
<div class="form-input__radio active">
<div class="form-input-radio__item active">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">Малыш <span>(от 0 до 1 года)</span></p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">Взрослый <span>(от 1 года до 7 лет)</span></p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">Пожилой <span>(от 7 до 12 лет)</span></p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">Стареющий <span>(от 12 лет и старше)</span></p>
</div>
<input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
</div>
<div class="modal-form-content__line modal-form-content__line--three modal-form-content__line--margin-top-16">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">День</label>
<input id="firstname" class="form__input form__input--center" pattern="[0-9]{2}" maxlength="2" type="text" name="name" placeholder="ДД" >
</div>
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Месяц</label>
<div class="form-input__list">
<input type="text" placeholder="Месяц" class="form-input-list__input" readonly="">
<div class="form-input-list__block-content">
<div class="form-input-list__content">
<button class="form-input-list__item">
<p class="form-input-list-item__text">Июнь</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Июль</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
<button class="form-input-list__item">
<p class="form-input-list-item__text">Август</p>
<div class="form-input-list-item__box">
<div class="form-input-list-item-box__content">
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
</div>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Год</label>
<input id="firstname" class="form__input form__input--center" pattern="[0-9]{4}" maxlength="4" type="text" name="name" placeholder="ГГГГ" >
</div>
</div>
</div>
<div class="modal-form__buttons">
<input class="button button--gradient button--high button--filter button--100-perc" type="submit" value="Добавить">
</div>
</form>
</div>
<div class="modal-map form__full-mobile modal-form--white">
<div class="modal-map__left">
<p class="modal-form__title">Добавить адрес</p>
<button class="modal-form__close"></button>
<div class="modal-map__control">
<button class="modal-map-control__item">
<div class="modal-map-control-item__content">
<div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
<p class="modal-map-control-item__title">
Пункт выдачи
</p>
</div>
<div class="modal-map-control-item__description">
<p class="modal-map-control-item__time">До 2-х дней</p>
<p class="modal-map-control-item__price">Бесплатно</p>
</div>
</div>
</button>
<button class="modal-map-control__item active">
<div class="modal-map-control-item__content">
<div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
<p class="modal-map-control-item__title">
Курьером
</p>
</div>
<div class="modal-map-control-item__description">
<p class="modal-map-control-item__time">До 3-х дней</p>
<p class="modal-map-control-item__price">От 159 рублей</p>
</div>
</div>
</button>
</div>
<form action="/send-telegram.php" method="post" class="modal-map__form">
<div class="modal-map-form__hidden">
<div class="modal-form-content__line">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Адрес</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш адрес" required="">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div>
<div class="modal-form-content__line modal-form-content__line--two">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Квартира</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Квартира" required="">
<span class="form-input__error">Имя введено неверно</span>
</div>
<div class="modal-form-content-line__element">
<label for="lastname" class="label-name">Этаж</label>
<input id="lastname" class="form__input" type="text" name="name" placeholder="Этаж" required="">
<span class="form-input__error">Фамилия введена неверно</span>
</div>
</div>
<div class="modal-form-content__line modal-form-content__line--two">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Подъезд</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Подъезд" required="">
<span class="form-input__error">Имя введено неверно</span>
</div>
<div class="modal-form-content-line__element">
<label for="lastname" class="label-name">Домофон</label>
<input id="lastname" class="form__input" type="text" name="name" placeholder="Код домофона" required="">
<span class="form-input__error">Фамилия введена неверно</span>
</div>
</div>
</div>
<div class="modal-form__buttons modal-form__buttons--two modal-map-form__button">
<input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
<input type="reset" class="button button--white open-overlay button--high" value="Отмена">
</div>
</form>
</div>
<div class="modal-map__right">
<div class="modal-map__map" style="position:relative;overflow:hidden;"><a href="https://yandex.ru/maps/213/moscow/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Москва</a><a href="https://yandex.ru/maps/213/moscow/?ll=37.710230%2C55.812249&mode=whatshere&utm_medium=mapframe&utm_source=maps&whatshere%5Bpoint%5D=37.622787%2C55.774846&whatshere%5Bzoom%5D=6.31&z=12.54" style="color:#eee;font-size:12px;position:absolute;top:14px;">Яндекс Карты — транспорт, навигация, поиск мест</a><iframe src="https://yandex.ru/map-widget/v1/?ll=37.710230%2C55.812249&mode=whatshere&whatshere%5Bpoint%5D=37.622787%2C55.774846&whatshere%5Bzoom%5D=6.31&z=12.54" width="560" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div>
</div>
<div class="modal-form__buttons modal-form__buttons--two modal-map-form__sub-button">
<input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
<input type="reset" class="button button--white open-overlay button--high" value="Отмена">
</div>
</div>
</div>
<script type="module" src="assets/js/gp-cabinet.js"></script>
</body>

Write Preview
Loading…
Cancel
Save