diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 8c06960..1e8a163 100644 --- a/assets/css/gp-style-core.css +++ b/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; diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index ba8a20a..bbd4ee9 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -1261,56 +1261,65 @@ main{ /* gallery */ -/* registration */ -.registration{ +/* cabinet */ +.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, -.registration-card__element--margin-top-32:first-child{ +.cabinet-card__element: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) { diff --git a/assets/img/pet/mini-dog.png b/assets/img/pet/mini-dog.png new file mode 100644 index 0000000..59a696d Binary files /dev/null and b/assets/img/pet/mini-dog.png differ diff --git a/assets/img/svg/main/arrow-breadcrumbs-black.svg b/assets/img/svg/main/arrow-breadcrumbs-black.svg new file mode 100644 index 0000000..88fd149 --- /dev/null +++ b/assets/img/svg/main/arrow-breadcrumbs-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/registration.html b/registration.html index a2aa9da..123d05f 100644 --- a/registration.html +++ b/registration.html @@ -225,48 +225,48 @@
-
-
-
-
-
-

Имя и фамилия не указано

+
+
+
+
+
+

Имя и фамилия не указано

-
-

Телефон:

-

Не заполнено

+
+

Телефон:

+

Не заполнено

-
-

Почта:

-

example@example.com

-

Почта подтверждена

- +
+

Почта:

+

example@example.com

+

Почта подтверждена

+
-
-

Связанные аккаунты:

-
-