сделал адаптив для регистрации, осталось сделать переключение заказы/профиль

assets/css/gp-style-core.css

@@ -929,6 +929,8 @@ button{
   top: 0;
   left: 0;
 
+  padding: 20px;
+
   width: 100%;
   height: 100%;
 
@@ -939,6 +941,10 @@ button{
   opacity: 0;
   transition: opacity .2s ease-out;
   pointer-events: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .modal.active{
   opacity: 1;
@@ -1205,6 +1211,101 @@ button{
   background-color: var(--background-black);
   border-radius: 2px;
 }
+
+.notification{
+  padding: 24px;
+
+  border-radius: 20px;
+
+  position: relative;
+}
+.notification--white{
+  border: 1px solid var(--background-black);
+  background: var(--background-white);
+}
+.notification--green-gradient{
+  background: var(--gradient-blue);
+}
+.notification--width-584{
+  width: 584px;
+}
+.notification__close{
+  position: absolute;
+  top: 24px;
+  right: 24px;
+
+  width: 24px;
+  aspect-ratio: 1;
+
+  border: none;
+  background: none;
+  background-image: url(../img/svg/main/black-x.svg);
+  background-repeat: no-repeat;
+  background-size: 24px;
+  background-position: center;
+
+  transition: opacity .2s ease-out;
+}
+.notification__close--white{
+  background-image: url(../img/svg/main/white-x.svg);
+}
+.notification__close:hover{
+  opacity: .8;
+}
+.notification__title{
+  padding-right: 50px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 26px;
+  line-height: 123%;
+  text-transform: uppercase;
+  color: var(--text-dark);
+}
+.notification__text--center{
+  text-align: center;
+}
+.notification__text--center-pc{
+  text-align: center;
+}
+.notification__title--green-gradient{
+  background: var(--gradient-blue);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.notification__title--white{
+  color: var(--text-white);
+}
+.notification__element{
+  margin-top: 24px;
+}
+.notification__element--center{
+  display: flex;
+  justify-content: center;
+}
+.notification__element--top-40{
+  margin-top: 40px;
+}
+.notification__text{
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+}
+.notification__text--weight-500{
+  font-weight: 500;
+}
+.notification__text--white{
+  color: var(--text-white);
+}
+.notification__img{
+  width: 100%;
+  height: 360px;
+
+  object-fit: contain;
+}
 /* modal */
 
 /* toggle */

assets/css/gp-style-desktop.css

@@ -1268,11 +1268,41 @@ main{
   display: flex;
   justify-content: space-between;
 }
+.cabinet__control{
+  margin: 24px;
+  margin-bottom: 0;
+
+  display: none;
+}
+.cabinet-control__button{
+  margin-left: 8px;
+
+  padding: 12px 16px;
+  
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  background: var(--background-white);
+  border: 2px solid var(--text-black);
+  border-radius: 48px;
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-control__button.active{
+  background: var(--background-black);
+  color: var(--text-white);
+}
+.cabinet-control__button:hover{
+  opacity: .8;
+}
 .cabinet__orders{
-  width: calc((100% - 48px) / 3);
+  width: calc(((100% - 48px) / 3) * 2);
 }
 .cabinet__profile{
-  width: calc(((100% - 48px) / 3) * 2);
+  width: calc((100% - 48px) / 3);
 }
 
 .cabinet-card{
@@ -1464,6 +1494,27 @@ main{
 .cabinet-card__button:hover{
   opacity: .8;
 }
+.cabinet-card__confirm{
+  margin-top: 16px;
+
+  border-radius: 20px;
+  padding: 4px 24px;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+
+
+  background: var(--background-black);
+  color: var(--text-white);
+  border: none;
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-card__confirm:hover{
+  opacity: .8;
+}
 .cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
   margin-top: 8px;
 }
@@ -1637,6 +1688,8 @@ main{
 .cabinet-card-order__payment{
   display: flex;
   align-items: flex-end;
+
+  transition: margin .2s ease-out;
 }
 .cabinet-card-order-payment__title{
   font-family: var(--font-family);
@@ -1691,7 +1744,12 @@ main{
 .cabinet-card-order-status__pointer--red{
   color: var(--text-red);
 }
-.cabinet-card-order__block-detail{}
+.cabinet-card-order__block-detail{
+  height: 0;
+  overflow: hidden;
+
+  transition: height .2s ease-out;
+}
 .cabinet-card-order__detail{
   padding-top: 24px;
 }
@@ -1822,6 +1880,8 @@ main{
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
+
+  transition: transform .2s;
   /* transform: rotate(180deg); */
 }
 .cabinet-card-order__detail-short{
@@ -1831,12 +1891,23 @@ main{
 
   display: flex;
   align-items: center;
+
+  transition: opacity .2s .1s ease-out;
 }
 .cabinet-card-order-detail-short__item{
   border-radius: 16px;
   width: 106px;
   height: 96px;
 }
+.cabinet-card__download{
+  margin-top: 32px;
+}
+.cabinet-card__order.active .cabinet-card-order__detail-short{
+  opacity: 0;
+}
+.cabinet-card__order.active .cabinet-card-order__open-detail::after{
+  transform: rotate(180deg);
+}
 /* .cabinet-card-no-orders__ */
 /* cabinet */
 

assets/css/gp-style-mobile.css

@@ -53,6 +53,21 @@
 .modal-basket__item--return .modal-basket-item__title{
     margin-right: auto;
 }
+.notification--width-584{
+    width: 100%;
+}
+.notification__title{
+    font-size: 20px;
+}
+.notification__text--center-pc{
+    text-align: start;
+}
+.notification__img{
+    height: 360px;
+}
+.notification__title{
+    padding-right: 96px;
+}
 /* modal */
 
 /* footer */
@@ -98,6 +113,61 @@
     width: 31%;
 }
 /* detail */
+
+/* cabinet */
+.cabinet-card__title{
+    font-size: 20px;
+}
+.cabinet-card__no-orders{
+    margin-top: 16px;
+}
+.cabinet-card-order__header{
+    flex-direction: column;
+}
+.cabinet-card-order__payment{
+    margin-top: 16px;
+}
+.cabinet-card-order-detail__main{
+    flex-direction: column;
+}
+.cabinet-card-order-detail-main__links{
+    margin-top: 24px;
+
+    align-items: start;
+}
+.cabinet-card-order-detail-main-product__img{
+    width: 70px;
+    height: 70px;
+}
+.cabinet-card-order-detail-main__product{
+    margin-top: 16px;
+
+    align-items: start;
+}
+.cabinet-card-order-detail-main-product__content{
+    margin-left: 16px;
+
+    flex-wrap: wrap;
+
+    position: relative;
+}
+.cabinet-card-order-detail-main-product__description{
+    width: 100%;
+}
+.cabinet-card-order-detail-main-product__count{
+    position: absolute;
+    left: 116px;
+    bottom: 0;
+}
+.cabinet-card-order-detail-main-product__price{
+    position: absolute;
+    left: 153px;
+    bottom: 0;
+}
+
+/* .cabinet-card__order.active */
+/* .cabinet-card__order.active */
+/* cabinet */
 }
 
 @media only screen and (max-width: 576px) {
@@ -126,4 +196,26 @@
 .detail-block-form__submit{
     min-width: 100%;
 }
+/* detail */
+
+/* cabinet */
+
+.cabinet-card-order-detail-main-product__img{
+    width: 40px;
+    height: 40px;
+}
+
+.cabinet-card-order-detail-main-product__count{
+    left: auto;
+    right: 71px;
+}
+.cabinet-card-order-detail-main-product__price{
+    left: auto;
+    right: 0;
+}
+.cabinet-card-order__detail-short{
+    transition-delay: 0;
+    transition-duration: 0;
+}
+/* cabinet */
 }

assets/css/gp-style-tablet.css

@@ -106,6 +106,20 @@ main{
     padding-right: 0;
 }
 /* modal */
+
+/* cabinet */
+.cabinet{
+    flex-direction: column;
+}
+.cabinet__control{
+    display: flex;
+    align-items: center;
+}
+.cabinet__orders, .cabinet__profile{
+    width: 100%;
+}
+
+/* cabinet */
 }
 
 @media only screen and (max-width: 980px) {
@@ -213,4 +227,26 @@ main{
     height: auto;
 }
 /* detail */
+}
+
+@media only screen and (max-width: 750px) {
+/* cabinet */
+.cabinet-card-order__open-detail{
+    margin-top: 144px;
+}
+.cabinet-card-order__detail-short{
+    right: auto;
+    left: 0;
+    bottom: 48px;
+}
+.cabinet-card-order-detail-short__item{
+    margin-left: -27px;
+}
+.cabinet-card-order-detail-short__item:first-child{
+    margin-left: 0;
+}
+.cabinet-card__order.active .cabinet-card-order__open-detail{
+    margin-top: 24px;
+}
+/* cabinet */
 }

assets/img/svg/main/white-x.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.62404 2.77566C3.38807 2.54301 3.00683 2.54436 2.77252 2.77867C2.53821 3.01299 2.53954 3.39154 2.77551 3.62419L6.90259 7.6933L2.77551 11.7624C2.53954 11.9951 2.53821 12.3736 2.77252 12.6079C3.00684 12.8422 3.38807 12.8436 3.62404 12.6109L7.75716 8.53587L11.8903 12.6109C12.1262 12.8436 12.5075 12.8422 12.7418 12.6079C12.9761 12.3736 12.9748 11.995 12.7388 11.7624L8.61173 7.6933L12.7388 3.62421C12.9748 3.39156 12.9761 3.01301 12.7418 2.77869C12.5075 2.54438 12.1262 2.54303 11.8903 2.77568L7.75716 6.85073L3.62404 2.77566Z" fill="white"/>
+</svg>

assets/js/_gp-function.js

@@ -0,0 +1,124 @@
+'use strict';
+
+// function
+export function modalOpen(buttonElement, contentElement){
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        elements = document.querySelectorAll(buttonElement),
+        device = window.screen.width;
+
+    elements.forEach(e => {
+        let thisContentElement = document.querySelector(contentElement);
+
+        e.onclick = function () {
+            modal.classList.add('active');
+            thisContentElement.classList.add('active');
+            
+            let width = thisContentElement.clientWidth;
+
+            setTimeout(() => {
+                if (device <= 720) {
+                    aside.style.width = `${device}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }else{
+                    aside.style.width = `${width}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }
+            }, 10);
+        }
+    })
+}
+
+export function modalClose(buttonElement) {
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        asideItems = document.querySelectorAll('.modal__item'),
+        elements = document.querySelectorAll(buttonElement);
+
+    elements.forEach(e => {
+        e.onclick = function () {            
+            aside.style.width = '0px';
+            
+            asideItems.forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.style.filter  = 'blur(10px)';
+                }
+            });
+
+            setTimeout(() => {
+                asideItems.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                    }
+                });
+
+                modal.classList.remove('active');
+            }, 300);
+        }
+    })
+}
+
+export function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
+    let elements = document.querySelectorAll(mainElement);
+
+    elements.forEach(e => {
+        let thisMainElement = e,
+            thisButtonElement = e.querySelector(buttonElement),
+            thisHeightElement = e.querySelector(heightElement),
+            thisContentElement = e.querySelector(contentElement);        
+
+        thisButtonElement.onclick = function (e) {
+            let height = thisHeightElement.clientHeight;
+
+            if (close == true && !thisMainElement.classList.contains('active')) {
+                elements.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                        e.querySelector(contentElement).style.height = null
+                    }                    
+                })
+            }
+
+            if (!thisMainElement.classList.contains('active')) {
+                thisContentElement.style.height = `${height}px`;
+                thisMainElement.classList.add('active');
+            }else{
+                thisContentElement.style.height = null;
+                thisMainElement.classList.remove('active');
+            }
+        }
+        
+    });
+}
+
+export function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
+    let thisButton = document.querySelector(button), 
+        thisContent = document.querySelector(content),
+        thisRemoveBlock = document.querySelector(removeBlock) || '',
+        thisBlockheight = document.querySelector(blockheight);
+
+    thisButton.onclick = function () {
+        let height = thisBlockheight.clientHeight;
+
+        if (!thisContent.classList .contains('open')) {
+            thisContent.style.height = `${height}px`;
+            thisContent.classList .add('open');
+
+            if (removeBlock) {
+                thisRemoveBlock.classList.remove(removeClass);
+            }
+        }else{
+            thisContent.style.height = null;
+            thisContent.classList .remove('open');
+
+            if (removeBlock) {
+                if (window.scrollY <= 25) {
+                    thisRemoveBlock.classList.add(removeClass);
+                }
+            }
+        }
+    }
+}
+// function

assets/js/gp-cabinet.js

@@ -0,0 +1,5 @@
+'use strict';
+
+import * as fun from './_gp-function.js';
+
+fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');

assets/js/gp-main.js

@@ -296,7 +296,7 @@ function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
         }
     }
 }
-
+// function
 
 // resize
 window.addEventListener('resize', (e) => {

registration.html

@@ -225,8 +225,12 @@
         </header>
         
         <main class="wrapper">
+            <div class="cabinet__control">
+                <button class="cabinet-control__button active">Заказы</button>
+                <button class="cabinet-control__button">Профиль</button>
+            </div>
             <div class="cabinet">
-                <div class="cabinet__orders">
+                <div class="cabinet__profile">
                     <div class="cabinet-card cabinet-card--green">
                         <div class="cabinet-card__content">
                             <div class="cabinet-card__element">
@@ -241,8 +245,11 @@
                             <div class="cabinet-card__element">
                                 <p class="cabinet-card__label">Почта:</p>
                                 <p class="cabinet-card__text">example@example.com</p>
-                                <p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p>
-                                <!-- <p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p> -->
+                                <!-- <p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p> -->
+                                <p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p>
+                                <button class="cabinet-card__confirm">
+                                    Подтвердить
+                                </button>
                             </div>
 
                             <div class="cabinet-card__element">
@@ -343,7 +350,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="cabinet__profile">
+                <div class="cabinet__orders">
                     <div class="cabinet-card cabinet-card--green-white">
                         <div class="cabinet-card__content">
                             <p class="cabinet-card__title">
@@ -454,6 +461,89 @@
                         </div>
                     </div>
 
+                    <div class="cabinet-card cabinet-card--grey">
+                        <div class="cabinet-card__content">
+                            <div class="cabinet-card__order">
+                                <div class="cabinet-card-order__header">
+                                    <div class="cabinet-card-order__main">
+                                        <p class="cabinet-card-order-main__date">Заказ от 06.09.2024</p>
+                                        <p class="cabinet-card-order-main__number">763276427364</p>
+                                    </div>
+                                    <div class="cabinet-card-order__payment">
+                                        <p class="cabinet-card-order-payment__title">Оплачено:</p>
+                                        <p class="cabinet-card-order-payment__price">8960</p>
+                                    </div>
+                                </div>
+
+                                <div class="cabinet-card-order__content">
+                                    <div class="cabinet-card-order__status">
+                                        <p class="cabinet-card-order-status__title">Статус:</p>
+                                        <p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
+                                    </div>
+
+                                    <div class="cabinet-card-order__block-detail">
+                                        <div class="cabinet-card-order__detail">
+                                            <div class="cabinet-card-order-detail__address">
+                                                <p class="cabinet-card-order-detail-address__title">Адрес доставки: </p>
+                                                <p class="cabinet-card-order-detail-address__text">Постомат: г.Москва, Каланчевская набережная, д.16</p>
+                                            </div>
+
+                                            <div class="cabinet-card-order-detail__main">
+                                                <div class="cabinet-card-order-detail-main__products">
+                                                    <div class="cabinet-card-order-detail-main__product">
+                                                        <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
+
+                                                        <div class="cabinet-card-order-detail-main-product__content">
+                                                            <div class="cabinet-card-order-detail-main-product__description">
+                                                                <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
+                                                                <p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
+                                                            </div>
+    
+                                                            <p class="cabinet-card-order-detail-main-product__count">3</p>
+    
+                                                            <p class="cabinet-card-order-detail-main-product__price">10280</p>
+                                                        </div>
+                                                    </div>
+                                                    <div class="cabinet-card-order-detail-main__product">
+                                                        <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
+
+                                                        <div class="cabinet-card-order-detail-main-product__content">
+                                                            <div class="cabinet-card-order-detail-main-product__description">
+                                                                <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
+                                                                <p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
+                                                            </div>
+    
+                                                            <p class="cabinet-card-order-detail-main-product__count">3</p>
+    
+                                                            <p class="cabinet-card-order-detail-main-product__price">10280</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div class="cabinet-card-order-detail-main__links">
+                                                    <a href="#" class="cabinet-card__button cabinet-card-order-detail-main__link">
+                                                        Электронный чек
+                                                    </a>
+                                                    <button class="cabinet-card__button cabinet-card-order-detail-main__link">
+                                                        Отследить заказ
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <button class="cabinet-card-order__open-detail">Детали заказа</button>
+                                </div>
+
+                                <div class="cabinet-card-order__detail-short">
+                                    <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
+                                    <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
+                                    <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="cabinet-card__no-orders">
                         <div class="cabinet-card-no-orders__element">
                             <p class="cabinet-card-no-orders__title">Пока нет заказов</p>
@@ -464,6 +554,12 @@
                             </button>
                         </div>
                     </div>
+
+                    <div class="cabinet-card__download">
+                        <button class="cabinet-card__button">
+                            Показать ещё
+                        </button>
+                    </div>
                 </div>
             </div>
         </main>
@@ -562,6 +658,6 @@
         </footer>
 
 
-        <!-- <script src="assets/js/gp-main.js"></script> -->
+        <script type="module" src="assets/js/gp-cabinet.js"></script>
     </body>
 </html>