From 0911744f6fd93a4569fa70dad27c5f5a1c89234e Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Fri, 25 Oct 2024 12:51:06 +0300 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20map?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-core.css | 140 ++++++++++++++ assets/css/gp-style-mobile.css | 16 ++ assets/css/gp-style-tablet.css | 24 +++ notification-map.html | 329 +++++++++++++++++++++++++++++++++ 4 files changed, 509 insertions(+) create mode 100644 notification-map.html diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index a20d7eb..73a78dc 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -1784,6 +1784,146 @@ button{ .modal-form__buttons--two input{ width: calc(50% - 20px); } +.modal-map{ + margin: auto; + + width: 1105px; + + display: flex; + + border-radius: 24px; + border: none; +} +.modal-map__left{ + width: 600px; + + padding: 24px; + + position: relative; +} +.modal-map__control{ + margin: 38px -12px -12px -12px; + + display: flex; +} +.modal-map-control__item{ + margin: 12px; + + padding: 2px; + + width: calc(50% - 24px); + + background: var(--background-9); + border-radius: 20px; + border: none; +} +.modal-map-control__item.active{ + background: var(--gradient-blue); +} +.modal-map-control__item.active .form-input-radio__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); +} +.modal-map-control-item__content{ + padding: 14px; + + border-radius: 18px; + + background: var(--background-white); +} +.modal-map-control-item__header{ + display: flex; + align-items: center; +} +.modal-map-control-item__circle{ + padding: 2px; + width: 20px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-9); + position: relative; +} +.modal-map-control-item-circle__content{ + width: 16px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-white); +} +.modal-map-control__item.active .modal-map-control-item__circle{ + background: var(--gradient-blue); +} +.modal-map-control__item.active .modal-map-control-item__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); +} +.modal-map-control-item__title{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); +} +.modal-map-control-item__description{ + margin-top: 16px; +} +.modal-map-control-item__time{ + font-family: var(--font-family); + font-weight: 500; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + text-align: start; +} +.modal-map-control-item__price{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-6); + + text-align: start; +} +.modal-map__form{ + margin-top: 24px; +} +.modal-map-form__hidden{ + +} +.modal-map-form__button{ + margin-top: 88px; +} +.modal-map-form__sub-button{ + display: none; +} +.modal-map__right{ + padding: 16px 0px 16px 16px; +} +.modal-map__map{ + border: 2px solid var(--background-9); + border-radius: 16px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.modal-map__map iframe{ + height: 650px; +} /* modal */ /* toggle */ diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css index 5917d4f..59d768c 100644 --- a/assets/css/gp-style-mobile.css +++ b/assets/css/gp-style-mobile.css @@ -68,6 +68,22 @@ .notification__title{ padding-right: 96px; } +.modal-form__buttons--two{ + flex-wrap: wrap; +} +.modal-form__buttons--two button, .modal-form__buttons--two input{ + margin-top: 24px; + width: 100%; +} +.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{ + margin-top: 0; +} +.modal-map__control{ + flex-wrap: wrap; +} +.modal-map-control__item{ + width: calc(100% - 24px); +} /* modal */ /* footer */ diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 40d49f4..9462f63 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -130,6 +130,30 @@ main{ .modal-form-content__line--two .modal-form-content-line__element:first-child{ margin-top: 0; } +.modal-map{ + width: 100%; + + flex-direction: column; + + border-radius: 0; +} +.modal-map__left, .modal-map__right{ + width: 100%; +} +.modal-map__map iframe { + width: 100%; + height: 528px; +} +.modal-map-form__button{ + display: none; +} +.modal-map-form__sub-button{ + margin-top: 64px; + + padding: 0 24px; + + display: flex; + } /* modal */ /* cabinet */ diff --git a/notification-map.html b/notification-map.html new file mode 100644 index 0000000..020619d --- /dev/null +++ b/notification-map.html @@ -0,0 +1,329 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+ +
+ + + + + + + + + \ No newline at end of file