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

добавил js

Browse Source
This commit is contained in:
Kirill Pet
2025-05-02 16:56:48 +03:00
parent ec60360db1
commit f3eedee26f
4 changed files with 122 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
assets/js/_gp-function.js → assets/js/gp-function.js
View File

53
subscription-first.html
View File

@@ -49,7 +49,6 @@
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<div class="header__content wrapper"> <div class="header__content wrapper">
<button class="header__open-menu" id="phone-menu"> <button class="header__open-menu" id="phone-menu">
@@ -226,13 +225,33 @@
</header> </header>
<main class="wrapper"> <main class="wrapper">
<div class="cabinet__control"> <div class="cabinet__control cabinet__control--column">
<a href="#" class="to-know to-know--start button--100-perc to-know--background-none"> <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
<p>Отменить подписку</p> <p>Перейти в профиль</p>
</a> </a>
<div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
<a class="form-input-tabs__button active">
Заказы
</a>
<a class="form-input-tabs__button">
Подписки
</a>
</div>
</div> </div>
<div class="cabinet"> <div class="cabinet">
<div class="cabinet__profile cabinet-content"> <div class="cabinet__profile cabinet-content">
<div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
<a class="form-input-tabs__button active">
Заказы
</a>
<a class="form-input-tabs__button">
Подписки
</a>
</div>
<div class="cabinet-card cabinet-card--green"> <div class="cabinet-card cabinet-card--green">
<div class="cabinet-card__content"> <div class="cabinet-card__content">
<div class="cabinet-card__element"> <div class="cabinet-card__element">
@@ -484,7 +503,7 @@
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label> <label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш адрес" required=""> <input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span> <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div> </div>
</div> </div>
@@ -510,11 +529,6 @@
</a> </a>
</div> </div>
</div> </div>
<div class="cabinet-card-no-orders__element">
</div>
</div> </div>
</div> </div>
</main> </main>
@@ -660,13 +674,32 @@
</div> </div>
<script type="module"> <script type="module">
import * as fun from './assets/js/gp-function.js';
import TogglesCollection from './assets/js/toggle.js'; import TogglesCollection from './assets/js/toggle.js';
import TabsCollection from './assets/js/tabs.js' import TabsCollection from './assets/js/tabs.js'
new TogglesCollection(); new TogglesCollection();
new TabsCollection(); new TabsCollection();
</script>
fun.modalFormOpen('.form-open');
fun.closeModalForm('.modal-form__close');
fun.closeModalForm('.modal-form__button-close');
let modal = document.querySelector('.modal');
modal.onclick = function (eventModal) {
let thisTarget = eventModal.target;
if (thisTarget.classList.contains('modal')) {
thisTarget.classList.remove('active');
if (!thisTarget.querySelector('.modal-map.active')) {
thisTarget.querySelector('.modal-form.active').classList.remove('active');
}else{
thisTarget.querySelector('.modal-map.active').classList.remove('active');
}
}
}
</script>
<!-- <script type="module" src="assets/js/gp-cabinet.js"></script> --> <!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
<script src="assets/js/gp-form.js"></script> <script src="assets/js/gp-form.js"></script>

25
subscription-last.html
View File

@@ -537,7 +537,7 @@
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Пункт выдачи</label> <label for="firstname" class="label-name modal-form-content-line__element--arrow">Пункт выдачи</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить адрес" required=""> <input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span> <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div> </div>
</div> </div>
@@ -549,7 +549,7 @@
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label> <label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label>
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш адрес" required=""> <input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span> <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div> </div>
</div> </div>
@@ -727,13 +727,32 @@
</div> </div>
<script type="module"> <script type="module">
import * as fun from './assets/js/gp-function.js';
import TogglesCollection from './assets/js/toggle.js'; import TogglesCollection from './assets/js/toggle.js';
import TabsCollection from './assets/js/tabs.js' import TabsCollection from './assets/js/tabs.js'
new TogglesCollection(); new TogglesCollection();
new TabsCollection(); new TabsCollection();
fun.modalFormOpen('.form-open');
fun.closeModalForm('.modal-form__close');
fun.closeModalForm('.modal-form__button-close');
let modal = document.querySelector('.modal');
modal.onclick = function (eventModal) {
let thisTarget = eventModal.target;
if (thisTarget.classList.contains('modal')) {
thisTarget.classList.remove('active');
if (!thisTarget.querySelector('.modal-map.active')) {
thisTarget.querySelector('.modal-form.active').classList.remove('active');
}else{
thisTarget.querySelector('.modal-map.active').classList.remove('active');
}
}
}
</script> </script>
<script type="module" src="assets/js/gp-cabinet.js"></script>
<!-- <script type="module" src="assets/js/gp-cabinet.js"></script> --> <!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
<script src="assets/js/gp-form.js"></script> <script src="assets/js/gp-form.js"></script>

79
subscription-order.html
View File

@@ -49,7 +49,6 @@
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<div class="header__content wrapper"> <div class="header__content wrapper">
<button class="header__open-menu" id="phone-menu"> <button class="header__open-menu" id="phone-menu">
@@ -226,24 +225,31 @@
</header> </header>
<main class="wrapper"> <main class="wrapper">
<div class="cabinet__control"> <div class="cabinet__control cabinet__control--column">
<button class="cabinet-control__button active start" data-cabinet="orders">Заказы</button> <a href="#" class="to-know to-know--start button--100-perc to-know--background-none">
<button class="cabinet-control__button" data-cabinet="profile">Профиль</button> <p>Перейти в профиль</p>
</a>
<div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
<a class="form-input-tabs__button active">
Заказы
</a>
<a class="form-input-tabs__button">
Подписки
</a>
</div>
</div> </div>
<div class="cabinet"> <div class="cabinet">
<div class="cabinet__profile cabinet-content"> <div class="cabinet__profile cabinet-content">
<div> <div class="form-input__tabs form-input__tabs--control form-input__tabs--white">
<div class="form-input__tabs"> <a class="form-input-tabs__button active">
<label for="boy" class="form-input-tabs__button"> Заказы
Заказы </a>
<input type="radio" ed="" name="floor" id="boy" class="form-input-tabs__input">
</label>
<label for="girl" class="form-input-tabs__button active"> <a class="form-input-tabs__button">
Подписки Подписки
<input type="radio" name="floor" id="girl" class="form-input-tabs__input"> </a>
</label>
</div>
</div> </div>
<div class="cabinet-card cabinet-card--green"> <div class="cabinet-card cabinet-card--green">
@@ -298,18 +304,35 @@
<div class="cabinet-card cabinet-card--green"> <div class="cabinet-card cabinet-card--green">
<div class="cabinet-card__content"> <div class="cabinet-card__content">
<p class="cabinet-card__text">Мои адреса</p> <div class="cabinet-card__pet">
<div class="cabinet-card-pet__icon">
<div class="cabinet-card-pet-icon__content">
<img src="assets/img/pet/mini-dog.png" alt="">
</div>
</div>
<div class="cabinet-card__element cabinet-card__element--margin-top-32"> <p class="cabinet-card-pet__name">Барон</p>
<p class="cabinet-card__label">Курьер</p>
<p class="cabinet-card__text cabinet-card__text--grey">Не заполнено</p>
<button class="cabinet-card__element-change"></button>
</div> </div>
<div class="cabinet-card__element cabinet-card__element--margin-top-32"> <div class="cabinet-card__element">
<button class="button button--white button--100-perc form-open" data-form="modal-map"> <p class="cabinet-card__label">Порода:</p>
Добавить адрес <p class="cabinet-card__text">Немецкая овчарка</p>
</div>
<div class="cabinet-card__element">
<p class="cabinet-card__label">Вес:</p>
<p class="cabinet-card__text">от 25 до 40 кг</p>
</div>
<div class="cabinet-card__element">
<p class="cabinet-card__label">Возраст:</p>
<p class="cabinet-card__text">3 года</p>
</div>
<div class="cabinet-card__element">
<p class="cabinet-card__label">Активность:</p>
<p class="cabinet-card__text">Активный</p>
</div>
<div class="cabinet-card__element">
<button class="cabinet-card__button">
Изменить
</button> </button>
</div> </div>
</div> </div>
@@ -847,8 +870,16 @@
</div> </div>
</div> </div>
<script type="module">
import TogglesCollection from './assets/js/toggle.js';
import TabsCollection from './assets/js/tabs.js'
new TogglesCollection();
new TabsCollection();
</script>
<script type="module" src="assets/js/gp-cabinet.js"></script> <script type="module" src="assets/js/gp-cabinet.js"></script>
<!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
<script src="assets/js/gp-form.js"></script> <script src="assets/js/gp-form.js"></script>
</body> </body>
</html> </html>