fix js remoteControl

assets/css/gp-style-core.css

@@ -105,6 +105,7 @@
     --text-0: #000;
     --text-3: #333;
     --text-6: #666;
+    --text-9: #999;
 
     /* background */
     --background-white: #fff;
@@ -304,7 +305,7 @@ button{
 .main-menu__item:hover{
   opacity: .8;
 
-  background: #f2f2f2;
+  background: var(--background-grey);
   border-radius: 24px;
 }
 .header.white .main-menu__item:hover .main-menu__link{
@@ -402,10 +403,19 @@ button{
 .form__input::placeholder{
   color: var(--text-grey);
 }
+.form__input--grey{
+  border-color: var(--background-9);
+}
 .form__input--textarea{
   height: 96px;
   resize: none;
 }
+.form__input--textarea-72{
+  height: 72px;
+  resize: none;
+
+  overflow: hidden;
+}
 .form__input--center{
   text-align: center;
 }
@@ -786,6 +796,18 @@ button{
   line-height: 120%;
   color: var(--text-dark);
 }
+.form-input-radio__price{
+  margin-left: auto;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+}
+.form-input-radio__price::after{
+  content: ' ₽';
+}
 .form-input-radio__input{
   display: none;
 }
@@ -919,6 +941,31 @@ button{
   display: block;
 }
 /* .form-input-radio__ */
+
+.form-agreement{
+  display: flex;
+}
+.form-agreement__check{
+  display: flex;
+  align-items: center;
+}
+.form-agreement__square{
+  width: 18px;
+  aspect-ratio: 1;
+
+  border-radius: 4px;
+
+  border: 2px solid var(--background-black);
+}
+.form-agreement__label{
+  margin-left: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+}
 /* form */
 
 
@@ -1125,7 +1172,7 @@ button{
   border-radius: 48px;
 }
 .to-know{
-  width: 100%;
+  /* width: 100%; */
 
   padding: 12px 24px 7px 24px;
 
@@ -1538,7 +1585,7 @@ button{
 
   display: flex;
 
-  border-top: 1px solid #f2f2f2;
+  border-top: 1px solid var(--background-grey);
 
   position: relative;
 }
@@ -1783,6 +1830,18 @@ button{
 .modal-form-content-line__element{
   position: relative;
 }
+.modal-form-content-line__element--arrow::after{
+  content: '';
+
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+
+  width: 16px;
+  height: 16px;
+
+  background-image: url(../img/svg/main/arrow-right-input.svg);
+}
 .modal-form-content__line--two .modal-form-content-line__element{
   width: calc(50% - 12px);
 }
@@ -1847,6 +1906,9 @@ button{
 
   display: flex;
 }
+.modal-map__control--delivery{
+  margin-top: 12px;
+}
 .modal-map-control__item{
   margin: 12px;
 

assets/css/gp-style-order.css

@@ -0,0 +1,187 @@
+.order{
+    display: flex;
+}
+.order__title{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order__contacts{
+    width: calc(50% - 0.5px);
+
+    padding: 24px;
+
+    border-right: 1px solid #121212;
+}
+.order-contacts__header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-contacts__form{
+    margin-top: 24px;
+}
+.order-contacts__delivery{
+    margin-top: 47.5px;
+
+    padding-top: 48px;
+
+    border-top: 1px solid var(--background-grey);
+}
+
+.order-contacts-deliver__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date{
+    padding: 8px;
+
+    border-radius: 24px;
+
+    background: var(--background-grey);
+}
+.order-contacts-deliver__date .form-input-radio__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date .form-input-radio__item:first-child{
+    margin-top: 0;
+}
+.order__your{  
+    width: calc(50% - 0.5px);
+
+    padding: 24px 24px 24px 48px;
+
+    background: var(--background-grey);
+}
+.order-your__products{
+    margin-top: 48px;
+}
+.order-your-products__item{
+    margin-top: 16px;
+
+    display: flex;
+    justify-content: space-between;
+}
+.order-your-products__left{
+    display: flex;
+}
+.order-your-products__img{
+    width: 40px;
+    aspect-ratio: 1;
+
+    border-radius: 16px;
+}
+.order-your-products__content{
+    margin-left: 16px;
+}
+.order-your-products__name{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-black);
+}
+.order-your-products__description{
+    margin-top: 8px;
+
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-6);
+}
+.order-your-products__right{
+    display: flex;
+}
+.order-your-products__count{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-6);
+}
+.order-your-products__count::before{
+    content: 'x';
+}
+.order-your-products__price{
+    margin-left: 16px;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-products__price::after{
+    content: 'Р';
+}
+.order-your__calculation{
+    margin-top: 48px;
+}
+.order-your__promo{
+    display: flex;
+}
+.order-your-promo__button{
+    margin-left: 8px;
+}
+.order-your-calculation__item{
+    margin-top: 24px;
+
+    display: flex;
+    justify-content: space-between;
+}
+.order-your-calculation__title{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black);
+}
+.order-your-calculation__value{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 200%;
+    text-transform: uppercase;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-calculation__value--price::after{
+    content: ' ₽';
+}
+.order-your-calculation__value--discount{
+    background: var(--gradient-red);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.order-your-calculation__value--discount::before{
+    content: '- ';
+}
+.order-your-calculation__description{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-9);
+}
+.order-your-calculation__line{
+    margin-top: 23px;
+    border: 1px solid var(--background-9);
+}
+.order-your-calculation__result{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order-your-calculation__submit{
+    margin-top: 48px;
+}

assets/img/svg/main/arrow-right-input.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 8.24268H3" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8.24268L9.75736 12.4853" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8.24268L9.75736 4.00003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/js/gp-form.js

@@ -84,6 +84,10 @@ function inputTabs(main, button) {
 
         buttons.forEach(button => {
             button.onclick = function () {
+                if (button.classList.contains('active')) {
+                    return ;
+                }
+
                 main.querySelector('.active').classList.remove('active');
 
                 button.classList.add('active');
@@ -164,23 +168,24 @@ remoteControl('.modal-map__control', '.modal-map-control__item');
 function remoteControl(main, button) {
     let mains = document.querySelectorAll(main);
 
-    console.log(mains);
-    
-
     mains.forEach(main => {
         let subjectClass = main.dataset.content,
             subject  = document.querySelector(`.${subjectClass}`),
             buttons = Array.from(main.querySelectorAll(button));
 
+            console.log(main);
             
 
-        main.addEventListener('mousedown', function (eventMain) {
+        main.addEventListener('click', function (eventMain) {
             setTimeout(() => {
                 let indexActive = buttons.findIndex((button, index) => {
                     if (button.classList.contains('active')) {
                         return true;
                     }
                 });
+                if(subject.children[indexActive].classList.contains('active')){
+                    return ;
+                }
                 
                 subject.querySelector('.remote-control__item.active').classList.remove('active');
                 subject.children[indexActive].classList.add('active');
@@ -189,18 +194,18 @@ function remoteControl(main, button) {
     })
 }
 
-formCheck('.modal-form__content', 'input[type=submit]');
+// formCheck('.modal-form__content', 'input[type=submit]');
-formCheck('.modal-map__form', 'input[type=submit]');
+// formCheck('.modal-map__form', 'input[type=submit]');
 
-function formCheck(form, submit) {
+// function formCheck(form, submit) {
-    let forms = document.querySelectorAll(form);
+//     let forms = document.querySelectorAll(form);
 
-    forms.forEach(form => {
+//     forms.forEach(form => {
-        let thisSubmit = form.querySelector(submit);
+//         let thisSubmit = form.querySelector(submit);
 
-        thisSubmit.onclick = function () {
+//         thisSubmit.onclick = function () {
-            form.classList.add('check')
+//             form.classList.add('check')
-        }
+//         }
         
-    })
+//     })
-}
+// }

registration.html

@@ -11,6 +11,7 @@
         <!-- Базовые стили -->
         <link rel="stylesheet" href="assets/css/gp-style-core.css?v=1.0">
         <link rel="stylesheet" href="assets/css/gp-style-desktop.css?v=1.0">
+        <link rel="stylesheet" href="assets/css/gp-style-order.css?v=1.0">
         <!-- Адаптив -->
         <link rel="stylesheet" media="screen and (min-width: 1400px)" href="assets/css/gp-style-ultra.css?v=1.0">
         <link rel="stylesheet" media="screen and (max-width: 1200px)" href="assets/css/gp-style-tablet.css">
@@ -571,11 +572,11 @@
                         </div>
                     </div>
 
-                    <div class="cabinet-card__download">
+                    <!-- <div class="cabinet-card__download">
                         <button class="cabinet-card__button">
                             Показать ещё
                         </button>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </main>