сделал кабинент зарегистрированного пользователя

assets/css/gp-style-core.css

@@ -111,6 +111,7 @@
     --background-black: #121212;
     --background-grey: #f2f2f2;
     --background-green: #2ED15D;
+    --background-green-white: #f4fff0;
     --background-9: #999;
 
 
@@ -636,6 +637,13 @@ button{
 
   position: relative;
 }
+.button--high-46{
+  padding: 12px 24px;
+
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+}
 .button--icon{
   padding-right: 56px;
 

assets/css/gp-style-desktop.css

@@ -1261,56 +1261,65 @@ main{
 /* gallery */
 
 
-/* registration */
+/* cabinet */
-.registration{
+.cabinet{
   padding: 24px;
 
   display: flex;
   justify-content: space-between;
 }
-.registration__orders{
+.cabinet__orders{
   width: calc((100% - 48px) / 3);
 }
-.registration__profile{
+.cabinet__profile{
   width: calc(((100% - 48px) / 3) * 2);
 }
 
-.registration-card{
+.cabinet-card{
   margin-top: 32px;
 
   padding: 1px;
 
   border-radius: 20px;
 }
-.registration-card:first-child{
+.cabinet-card:first-child{
   margin-top: 0;
 }
-.registration-card--green{
+.cabinet-card--green{
   background: var(--background-green);
 }
-.registration-card--red-blue{
+.cabinet-card--green-white{
+  background: var(--background-green-white);
+}
+.cabinet-card--green-white .cabinet-card__content{
+  background: none;
+}
+.cabinet-card--red-blue{
   background: var(--gradient-red);
 }
-.registration-card__content{
+.cabinet-card--grey{
+  background: var(--background-9);
+}
+.cabinet-card__content{
   padding: 23px;
 
   border-radius: 19px;
 
   background-color: var(--background-white);
 }
-.registration-card__element{
+.cabinet-card__element{
   margin-top: 24px;
 
   position: relative;
 }
-.registration-card__element--margin-top-32{
+.cabinet-card__element--margin-top-32{
   margin-top: 32px;
 }
-.registration-card__element:first-child,
+.cabinet-card__element:first-child,
-.registration-card__element--margin-top-32:first-child{
+.cabinet-card__element--margin-top-32:first-child{
   margin-top: 0
 }
-.registration-card__element-change{
+.cabinet-card__element-change{
   position: absolute;
   top: 14px;
   right: 0;
@@ -1324,21 +1333,32 @@ main{
 
   transition: opacity .2s ease-out;
 }
-.registration-card__element-change:hover{
+.cabinet-card__element-change:hover{
   opacity: .8;
 }
-.registration-card__text{
+.cabinet-card__title{
   font-family: var(--font-family);
-  font-weight: 500;
+  font-weight: 700;
+  font-size: 26px;
+  line-height: 123%;
+  text-transform: uppercase;
+  background: var(--gradient-blue);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.cabinet-card__text{
+  font-family: var(--font-family);
+  font-weight: 400;
   font-size: 20px;
   line-height: 120%;
 
   color: var(--text-black);
 }
-.registration-card__text--grey{
+.cabinet-card__text--grey{
   color: var(--text-grey);
 }
-.registration-card__label{
+.cabinet-card__label{
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 16px;
@@ -1346,7 +1366,7 @@ main{
 
   color: var(--text-3);
 }
-.registration-card__status{
+.cabinet-card__status{
   padding-left: 20px;
 
   font-family: var(--font-family);
@@ -1356,10 +1376,10 @@ main{
 
   position: relative;
 }
-.registration-card__status--chek{
+.cabinet-card__status--chek{
   color: var(--text-green);
 }
-.registration-card__status--chek::before{
+.cabinet-card__status--chek::before{
   content: '';
 
   position: absolute;
@@ -1372,10 +1392,10 @@ main{
   background-image: url(../img/svg/main/status-chek.svg);
   object-fit: contain;
 }
-.registration-card__status--cancelled{
+.cabinet-card__status--cancelled{
   color: var(--text-red);
 }
-.registration-card__status--cancelled::before{
+.cabinet-card__status--cancelled::before{
   content: '';
 
   position: absolute;
@@ -1388,10 +1408,10 @@ main{
   background-image: url(../img/svg/main/status-cancelled.svg);
   object-fit: contain;
 }
-.registration-card__block-accounts{
+.cabinet-card__block-accounts{
   display: flex;
 }
-.registration-card__account{
+.cabinet-card__account{
   margin-left: 16px;
 
   width: 40px;
@@ -1404,15 +1424,15 @@ main{
   background: var(--background-9);
   border-radius: 50%;
 }
-.registration-card__account:first-child{
+.cabinet-card__account:first-child{
   margin-left: 0;
 }
-.registration-card__block-buttons{
+.cabinet-card__block-buttons{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.registration-card__button{
+.cabinet-card__button{
   padding: 8px 8px 6px 0;
 
   font-family: var(--font-family);
@@ -1426,7 +1446,7 @@ main{
 
   position: relative;
 }
-.registration-card__button::before{
+.cabinet-card__button::before{
   content: '';
 
   position: absolute;
@@ -1439,16 +1459,16 @@ main{
 
   transition: opacity .2s ease-out;
 }
-.registration-card__button:hover{
+.cabinet-card__button:hover{
   opacity: .8;
 }
-.registration-card__text, .registration-card__label, .registration-card__status, .registration-card__block-accounts, .registration-card__block-buttons{
+.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
   margin-top: 8px;
 }
-.registration-card__text:first-child, .registration-card__label:first-child, .registration-card__status:first-child, .registration-card__block-accounts:first-child, .registration-card__block-buttons:first-child{
+.cabinet-card__text:first-child, .cabinet-card__label:first-child, .cabinet-card__status:first-child, .cabinet-card__block-accounts:first-child, .cabinet-card__block-buttons:first-child{
   margin-top: 0px;
 }
-.registration-card__block-add-pets{
+.cabinet-card__block-add-pets{
   width: 100%;
 
   display: flex;
@@ -1457,7 +1477,7 @@ main{
   background: none;
   border: none;
 }
-.registration-card-add-pets__circle{
+.cabinet-card-add-pets__circle{
   width: 48px;
   aspect-ratio: 1;
 
@@ -1468,7 +1488,7 @@ main{
   border: 1px solid var(--text-6);
   border-radius: 50%;
 }
-.registration-card-add-pets__text{
+.cabinet-card-add-pets__text{
   margin-left: 16px;
 
   font-family: var(--font-family);
@@ -1480,7 +1500,7 @@ main{
 
   position: relative;
 }
-.registration-card-add-pets__text::after{
+.cabinet-card-add-pets__text::after{
   content: '';
 
   position: absolute;
@@ -1492,7 +1512,218 @@ main{
 
   background: var(--text-6);
 }
-/* registration */
+.cabinet-card__discount{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-discount__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-discount__percent{
+  margin-left: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-discount__percent::after{
+  content: '%';
+}
+.cabinet-card-discount__arrow{
+  display: inline-block;
+
+  margin-left: 6px;
+
+  width: 20px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/arrow-breadcrumbs-black.svg);
+  background-position: center;
+}
+.cabinet-card__no-orders{
+  margin-top: 32px;
+
+  padding: 48px 24px;
+}
+.cabinet-card-no-orders__element{
+  margin-top: 26px;
+}
+.cabinet-card-no-orders__element:first-child{
+  margin-top: 0;
+}
+.cabinet-card-no-orders__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 133%;
+  text-align: center;
+  color: var(--text-black);
+}
+.cabinet-card__pet{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-pet__icon{
+  width: 48px;
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+  background: var(--gradient-blue);
+}
+.cabinet-card-pet-icon__content{
+  margin: 1px;
+  
+  width: calc(100% - 2px);
+  aspect-ratio: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 50%;
+  background: var(--background-white);
+}
+.cabinet-card-pet-icon__content img{
+  width: 32px;
+  aspect-ratio: 1;
+
+  object-fit: contain;
+}
+.cabinet-card-pet__name{
+  margin-left: 24px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card__order{
+
+}
+.cabinet-card-order__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.cabinet-card-order__main{}
+.cabinet-card-order-main__date{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-main__number{
+  margin-top: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-main__number::before{
+  content: '№';
+}
+.cabinet-card-order__payment{
+  display: flex;
+  align-items: flex-end;
+}
+.cabinet-card-order-payment__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-payment__price{
+  margin-left: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-order-payment__price::after{
+  margin-left: 5px;
+  content: '₽';
+}
+.cabinet-card-order__content{
+  margin-top: 24px;
+}
+.cabinet-card-order__content
+.cabinet-card-order__status{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-order-status__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);  
+}
+.cabinet-card-order-status__pointer{
+  margin-left: 12px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black); 
+}
+.cabinet-card-order-status__pointer--grey{
+  color: var(--text-6);
+}
+.cabinet-card-order-status__pointer--green{
+  color: var(--text-green);
+}
+.cabinet-card-order-status__pointer--red{
+  color: var(--text-red);
+}
+.cabinet-card-order__block-detail{}
+.cabinet-card-order__detail{}
+.cabinet-card-order__open-detail{
+  margin-top: 24px;
+
+  padding-right: 24px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  border: none;
+  background: none;
+
+  position: relative;
+}
+.cabinet-card-order__open-detail::after{
+  content: '';
+
+  position: absolute;
+  top: 4px;
+  right: 0;
+
+  width: 16px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/arrow-black.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+/* .cabinet-card-no-orders__ */
+/* cabinet */
 
 @media only screen and (max-width: 1600px) {
 

assets/img/svg/main/arrow-breadcrumbs-black.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94673 2.74797C9.26993 2.62677 9.63019 2.79052 9.75139 3.11373L12.2514 9.78039C12.3045 9.92188 12.3045 10.0778 12.2514 10.2193L9.75139 16.886C9.63019 17.2092 9.26993 17.3729 8.94673 17.2517C8.62353 17.1305 8.45978 16.7703 8.58098 16.4471L10.9987 9.99984L8.58098 3.55263C8.45978 3.22943 8.62353 2.86917 8.94673 2.74797Z" fill="#333333"/>
+</svg>

registration.html

@@ -225,48 +225,48 @@
         </header>
         
         <main class="wrapper">
-            <div class="registration">
+            <div class="cabinet">
-                <div class="registration__orders">
+                <div class="cabinet__orders">
-                    <div class="registration-card registration-card--green">
+                    <div class="cabinet-card cabinet-card--green">
-                        <div class="registration-card__content">
+                        <div class="cabinet-card__content">
-                            <div class="registration-card__element">
+                            <div class="cabinet-card__element">
-                                <p class="registration-card__text registration-card__text--grey">Имя и фамилия  не указано</p>
+                                <p class="cabinet-card__text cabinet-card__text--grey">Имя и фамилия  не указано</p>
                             </div>
 
-                            <div class="registration-card__element">
+                            <div class="cabinet-card__element">
-                                <p class="registration-card__label">Телефон:</p>
+                                <p class="cabinet-card__label">Телефон:</p>
-                                <p class="registration-card__text registration-card__text--grey">Не заполнено</p>
+                                <p class="cabinet-card__text cabinet-card__text--grey">Не заполнено</p>
                             </div>
 
-                            <div class="registration-card__element">
+                            <div class="cabinet-card__element">
-                                <p class="registration-card__label">Почта:</p>
+                                <p class="cabinet-card__label">Почта:</p>
-                                <p class="registration-card__text">example@example.com</p>
+                                <p class="cabinet-card__text">example@example.com</p>
-                                <p class="registration-card__status registration-card__status--chek">Почта подтверждена</p>
+                                <p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p>
-                                <!-- <p class="registration-card__status registration-card__status--cancelled">Почта не подтверждена</p> -->
+                                <!-- <p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p> -->
                             </div>
 
-                            <div class="registration-card__element">
+                            <div class="cabinet-card__element">
-                                <p class="registration-card__label">Связанные аккаунты:</p>
+                                <p class="cabinet-card__label">Связанные аккаунты:</p>
-                                <div class="registration-card__block-accounts">
+                                <div class="cabinet-card__block-accounts">
-                                    <div class="registration-card__account">
+                                    <div class="cabinet-card__account">
                                         <img src="assets/img/svg/main/google-white.svg" alt="">
                                     </div>
-                                    <div class="registration-card__account">
+                                    <div class="cabinet-card__account">
                                         <img src="assets/img/svg/main/vk-white.svg" alt="">
                                     </div>
-                                    <div class="registration-card__account">
+                                    <div class="cabinet-card__account">
                                         <img src="assets/img/svg/main/ya-white.svg" alt="">
                                     </div>
                                 </div>
                             </div>
 
-                            <div class="registration-card__element">
+                            <div class="cabinet-card__element">
-                                <div class="registration-card__block-buttons">
+                                <div class="cabinet-card__block-buttons">
-                                    <button class="registration-card__button">
+                                    <button class="cabinet-card__button">
                                         Изменить
                                     </button>
 
-                                    <button class="registration-card__button">
+                                    <button class="cabinet-card__button">
                                         Выйти
                                     </button>
                                 </div>
@@ -274,18 +274,18 @@
                         </div>
                     </div>
 
-                    <div class="registration-card registration-card--green">
+                    <div class="cabinet-card cabinet-card--green">
-                        <div class="registration-card__content">
+                        <div class="cabinet-card__content">
-                            <p class="registration-card__text">Мои адреса</p>
+                            <p class="cabinet-card__text">Мои адреса</p>
 
-                            <div class="registration-card__element registration-card__element--margin-top-32">
+                            <div class="cabinet-card__element cabinet-card__element--margin-top-32">
-                                <p class="registration-card__label">Курьер</p>
+                                <p class="cabinet-card__label">Курьер</p>
-                                <p class="registration-card__text registration-card__text--grey">Не заполнено</p>
+                                <p class="cabinet-card__text cabinet-card__text--grey">Не заполнено</p>
 
-                                <button class="registration-card__element-change"></button>
+                                <button class="cabinet-card__element-change"></button>
                             </div>
 
-                            <div class="registration-card__element registration-card__element--margin-top-32">
+                            <div class="cabinet-card__element cabinet-card__element--margin-top-32">
                                 <button class="button button--white button--100-perc">
                                     Добавить адрес
                                 </button>
@@ -293,22 +293,120 @@
                         </div>
                     </div>
 
-                    <div class="registration-card registration-card--green">
+                    <div class="cabinet-card cabinet-card--green">
-                        <div class="registration-card__content">
+                        <div class="cabinet-card__content">
-                            <button class="registration-card__block-add-pets">
+                            <div class="cabinet-card__pet">
-                                <div class="registration-card-add-pets__circle">
+                                 <div class="cabinet-card-pet__icon">
+                                    <div class="cabinet-card-pet-icon__content">
+                                        <img src="assets/img/pet/mini-dog.png" alt="">
+                                    </div>
+                                 </div>
+
+                                 <p class="cabinet-card-pet__name">Барон</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">
+                                <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>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="cabinet-card cabinet-card--green">
+                        <div class="cabinet-card__content">
+                            <button class="cabinet-card__block-add-pets">
+                                <div class="cabinet-card-add-pets__circle">
                                     <img src="assets/img/svg/main/plus-grey.svg" alt="">
                                 </div>
 
-                                <p class="registration-card-add-pets__text">
+                                <p class="cabinet-card-add-pets__text">
                                     Добавить питомца
                                 </p>
                             </button>
                         </div>
                     </div>
                 </div>
-                <div class="registration__profile">
+                <div class="cabinet__profile">
-                    s
+                    <div class="cabinet-card cabinet-card--green-white">
+                        <div class="cabinet-card__content">
+                            <p class="cabinet-card__title">
+                                Подписка на корм
+                            </p>
+                            <div class="cabinet-card__element">
+                                <p class="cabinet-card__text">Еженедельная доставка корма для вашего питомца</p>
+                            </div>
+
+                            <div class="cabinet-card__element">
+                                <button  class="button button--gradient button--high-46">
+                                    Узнать подробности
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="cabinet-card cabinet-card--red-blue">
+                        <div class="cabinet-card__content">
+                            <div class="cabinet-card__discount">
+                                <p class="cabinet-card-discount__title">МОЯ СКИДКА</p>
+                                <p class="cabinet-card-discount__percent">3</p>
+                                <div class="cabinet-card-discount__arrow"></div>
+                            </div>
+                        </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>
+
+                                    <button class="cabinet-card-order__open-detail">Детали заказа</button>
+                                </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>
+                        </div>
+                        <div class="cabinet-card-no-orders__element">
+                            <button class="to-know button--100-perc to-know--background-none">
+                                <p>Перейти в каталог</p>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </main>