tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add responsive layout for browse, items page, and misc UI fixes 

Browse component:
- Responsive filter drawer (lt-lg: 60% right overlay, lt-md: full-screen)
- Filter panel ng-template reused in desktop sidebar and drawer
- Filter toggle button with active count on lt-lg
- Responsive grid: 5/4 → 4/3 → 3/2 → 2/1 → 1 across breakpoints
- lt-lg: hide desktop filters/chips/count, show mobile count in sort row
- Responsive pagination (column layout centered on xs)
- Drawer: header with close, chips with dividers, autoFocus disabled
- Add $mat-lt-xxl constant (≤2447px)

Items page:
- Responsive hero image (flex on lt-xmd, hidden on lt-md)
- Responsive padding (24px lt-lg, 16px xs)
- Responsive title/description font sizes on lt-lg
- Title font size 36px, overflow hidden

Other:
- Creator profile page overflow hidden
- Refetch calculated fields hero SVG from design
- Add item dialog overflow-x hidden
- Filter drawer margin-bottom 0 in add mode
pull/15508/head
Igor Kulikov 3 months ago
parent
d88b46e81d
commit
9656a06143
7 changed files with 276 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss
  2. 30
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
  3. 124
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
  4. 1
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
  5. 71
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss
  6. 148
      ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg
  7. 1
      ui-ngx/src/scss/constants.scss

1
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss
View File

@ -20,6 +20,7 @@
.mat-mdc-dialog-content {
position: relative;
padding: 0;
overflow-x: hidden;
@media #{$mat-gt-md} {
width: 1000px;

30
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
View File

@ -104,16 +104,9 @@
<!-- Content: filters sidebar + card grid -->
<mat-drawer-container class="tb-iot-hub-content">
<!-- Left sidebar filters (visible on large screens) -->
<div class="tb-iot-hub-filters tb-iot-hub-filters-desktop">
<div class="tb-iot-hub-filters-wrapper">
<ng-container *ngTemplateOutlet="filterPanelContent"></ng-container>
</div>
</div>
<!-- Filter drawer (visible on small screens) -->
<mat-drawer #filterDrawer class="tb-iot-hub-filter-drawer" mode="over" position="end"
[(opened)]="filterDrawerOpened">
[autoFocus]="false" [(opened)]="filterDrawerOpened">
<div class="tb-iot-hub-filter-drawer-header">
<span>{{ 'iot-hub.filter' | translate }}</span>
<button mat-icon-button (click)="filterDrawerOpened = false">
@ -121,6 +114,7 @@
</button>
</div>
@if (hasActiveDropdownFilters()) {
<div class="tb-iot-hub-filter-divider" style="margin-bottom: 8px"></div>
<div class="tb-iot-hub-filter-drawer-chips">
<mat-chip-set>
@for (key of getActiveSubtypesArray(); track key) {
@ -147,13 +141,22 @@
</button>
</div>
}
<div class="tb-iot-hub-filter-divider"></div>
<div class="tb-iot-hub-filter-drawer-body">
<ng-container *ngTemplateOutlet="filterPanelContent"></ng-container>
</div>
</mat-drawer>
<!-- Right content area -->
<mat-drawer-content class="tb-iot-hub-results">
<mat-drawer-content class="tb-iot-hub-drawer-content">
<!-- Left sidebar filters (visible on large screens) -->
<div class="tb-iot-hub-filters tb-iot-hub-filters-desktop">
<div class="tb-iot-hub-filters-wrapper">
<ng-container *ngTemplateOutlet="filterPanelContent"></ng-container>
</div>
</div>
<!-- Right content area -->
<div class="tb-iot-hub-results">
<!-- Top bar: filter button (mobile) + results count + search + sort -->
<div class="tb-iot-hub-results-top">
<button mat-stroked-button color="primary" class="tb-iot-hub-filter-toggle-btn" (click)="filterDrawerOpened = true">
@ -179,7 +182,11 @@
<!-- Sort button -->
<div class="tb-iot-hub-sort-row">
<!-- Active filter chips -->
<!-- Results count (visible on small screens when filter chips are hidden) -->
<span class="tb-iot-hub-results-count-mobile">
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
</span>
<!-- Active filter chips (hidden on small screens) -->
@if (hasActiveDropdownFilters()) {
<mat-chip-set class="tb-iot-hub-active-filters">
@for (key of getActiveSubtypesArray(); track key) {
@ -296,6 +303,7 @@
</div>
</div>
}
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>

124
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
View File

@ -50,6 +50,16 @@
.tb-iot-hub-content {
display: flex;
flex: 1;
background: transparent;
overflow: visible;
.mat-drawer-backdrop {
bottom: -48px;
&.mat-drawer-shown {
background: transparent;
}
}
}
// Left sidebar filters — Design: 280px wide, right border, own scroll
@ -73,6 +83,13 @@
overflow-y: auto;
}
// Drawer content — holds desktop filters + results side by side
.tb-iot-hub-drawer-content {
display: flex;
flex: 1;
overflow: visible;
}
// Filter toggle button — hidden on large screens, shown on lt-lg
.tb-iot-hub-filter-toggle-btn {
display: none;
@ -84,16 +101,26 @@
width: 60%;
max-width: 550px;
min-width: 300px;
margin-bottom: -48px;
.add-mode & {
margin-bottom: 0;
}
}
.tb-iot-hub-filter-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 8px;
padding: 12px 12px 12px 24px;
font-size: 18px;
font-weight: 500;
color: rgba(0, 0, 0, 0.87);
.mat-mdc-icon-button {
--mat-icon-button-state-layer-size: 40px;
padding: 8px;
}
}
.tb-iot-hub-filter-drawer-chips {
@ -101,13 +128,25 @@
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 0 16px 8px;
padding: 4px 24px 12px;
}
.tb-iot-hub-filter-drawer-body {
overflow-y: auto;
flex: 1;
padding: 0 8px;
padding: 8px 0 0;
.tb-iot-hub-filters-inner {
padding: 12px 0;
}
.tb-iot-hub-filter-panel.mat-expansion-panel .mat-expansion-panel-header {
padding-left: 24px;
}
.tb-iot-hub-filter-panel.mat-expansion-panel mat-checkbox {
padding-left: 12px;
}
}
.tb-iot-hub-filters-inner {
@ -179,7 +218,8 @@
}
// Results count — Design: 14px Medium, rgba(0,0,0,0.76), tracking 0.25
.tb-iot-hub-results-count {
.tb-iot-hub-results-count,
.tb-iot-hub-results-count-mobile {
font-size: 14px;
font-weight: 500;
line-height: 20px;
@ -187,6 +227,10 @@
color: rgba(0, 0, 0, 0.76);
}
.tb-iot-hub-results-count-mobile {
display: none;
}
// Search field — Design: 320px, h-40, rounded-8, border rgba(0,0,0,0.12), white bg
.tb-iot-hub-search-field {
width: 320px;
@ -210,6 +254,7 @@
.tb-iot-hub-search-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
font-size: 14px;
@ -286,15 +331,15 @@
}
}
// Card grid — Design: 4 columns, gap 20px; compact: 3 columns
// Card grid — Design: 5 columns, gap 20px; compact: 4 columns
.tb-iot-hub-card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(5, 1fr);
gap: 20px;
padding: 8px 0 24px;
&.tb-iot-hub-card-grid-compact {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 1fr);
}
}
@ -417,12 +462,12 @@
// Responsive
@media #{$mat-gt-xxl} {
@media #{$mat-lt-xxl} {
.tb-iot-hub-card-grid {
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(4, 1fr);
&.tb-iot-hub-card-grid-compact {
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
}
}
}
@ -448,10 +493,6 @@
}
@media #{$mat-lt-lg} {
.tb-iot-hub-card-grid {
grid-template-columns: repeat(1, 1fr);
}
.tb-iot-hub-filters-desktop {
display: none;
}
@ -459,6 +500,31 @@
.tb-iot-hub-filter-toggle-btn {
display: inline-flex;
}
.tb-iot-hub-results-count {
display: none;
}
.tb-iot-hub-sort-row {
.tb-iot-hub-active-filters,
.tb-iot-hub-clear-btn {
display: none;
}
}
.tb-iot-hub-results-count-mobile {
display: inline;
}
.tb-iot-hub-results {
padding-left: 24px;
padding-right: 24px;
}
.tb-iot-hub-pagination-pages {
position: static;
transform: none;
}
}
@media #{$mat-lt-md} {
@ -466,6 +532,36 @@
width: 100%;
max-width: 100%;
}
.tb-iot-hub-search-field {
width: 200px;
}
}
@media #{$mat-xs} {
.tb-iot-hub-card-grid {
grid-template-columns: repeat(1, 1fr);
}
.tb-iot-hub-pagination {
flex-direction: column;
align-items: center;
gap: 24px;
}
.tb-iot-hub-pagination-pages {
position: static;
transform: none;
}
.tb-iot-hub-pagination-size {
margin-left: 0;
}
.tb-iot-hub-results {
padding-left: 16px;
padding-right: 16px;
}
}
// Add mode responsive overrides

1
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
View File

@ -25,6 +25,7 @@
background: white;
border-radius: 8px;
padding: 40px 40px 48px;
overflow: hidden;
}
// Back button

71
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss
View File

@ -25,6 +25,7 @@
background: white;
border-radius: 8px;
padding: 40px 40px 48px;
overflow: hidden;
}
// Hero section — flex row: left (back + text) and right (image), space-between
@ -45,7 +46,7 @@
}
.tb-iot-hub-items-title {
font-size: 40px;
font-size: 36px;
font-weight: 500;
line-height: 48px;
color: rgba(0, 0, 0, 0.87);
@ -121,3 +122,71 @@ tb-iot-hub-browse {
margin: 0 0 32px;
}
}
// Responsive
@media #{$mat-lt-lg} {
.tb-iot-hub-items-page {
padding-left: 24px;
padding-right: 24px;
}
.tb-iot-hub-items-divider {
margin-left: -24px;
margin-right: -24px;
}
tb-iot-hub-browse {
margin-left: -24px;
margin-right: -24px;
}
.tb-iot-hub-items-title {
font-size: 28px;
line-height: 36px;
}
.tb-iot-hub-items-desc {
font-size: 14px;
line-height: 20px;
}
}
@media #{$mat-lt-xmd} {
.tb-iot-hub-items-hero {
gap: 24px;
}
.tb-iot-hub-items-hero-image {
min-width: 0;
flex: 1;
img {
min-width: 0;
margin-left: auto;
margin-top: auto;
}
}
}
@media #{$mat-lt-md} {
.tb-iot-hub-items-hero-image {
display: none;
}
}
@media #{$mat-xs} {
.tb-iot-hub-items-page {
padding-left: 16px;
padding-right: 16px;
}
.tb-iot-hub-items-divider {
margin-left: -16px;
margin-right: -16px;
}
tb-iot-hub-browse {
margin-left: -16px;
margin-right: -16px;
}
}

148
ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg
View File

@ -1,104 +1,104 @@
<svg width="560" height="276" viewBox="0 0 560 276" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_17199_45631)">
<g filter="url(#filter0_ddd_17199_45631)">
<rect x="167.227" y="15.6611" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="167.727" y="16.1611" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip1_17199_45631)">
<path opacity="0.16" d="M195.994 69.5043H216.646C217.82 69.5043 218.946 69.0381 219.776 68.2081C220.605 67.3782 221.072 66.2525 221.072 65.0788V44.4265C221.072 43.2528 220.605 42.1271 219.776 41.2972C218.946 40.4672 217.82 40.001 216.646 40.001H195.994C194.82 40.001 193.695 40.4672 192.865 41.2972C192.035 42.1271 191.568 43.2528 191.568 44.4265V65.0788C191.568 66.2525 192.035 67.3782 192.865 68.2081C193.695 69.0381 194.82 69.5043 195.994 69.5043Z" fill="#00695C"/>
<path d="M198.944 53.2773H213.696C214.087 53.2773 214.462 53.4328 214.739 53.7094C215.015 53.9861 215.171 54.3613 215.171 54.7525C215.171 55.1437 215.015 55.519 214.739 55.7956C214.462 56.0723 214.087 56.2277 213.696 56.2277H198.944C198.553 56.2277 198.177 56.0723 197.901 55.7956C197.624 55.519 197.469 55.1437 197.469 54.7525C197.469 54.3613 197.624 53.9861 197.901 53.7094C198.177 53.4328 198.553 53.2773 198.944 53.2773Z" fill="#00695C"/>
<path opacity="0.16" d="M252.051 40.001H231.398C230.224 40.001 229.099 40.4672 228.269 41.2972C227.439 42.1271 226.973 43.2528 226.973 44.4265V65.0788C226.973 66.2525 227.439 67.3782 228.269 68.2081C229.099 69.0381 230.224 69.5043 231.398 69.5043H252.051C253.224 69.5043 254.35 69.0381 255.18 68.2081C256.01 67.3782 256.476 66.2525 256.476 65.0788V44.4265C256.476 43.2528 256.01 42.1271 255.18 41.2972C254.35 40.4672 253.224 40.001 252.051 40.001Z" fill="#00695C"/>
<path d="M249.1 56.2275H243.199V62.1282C243.199 62.5194 243.044 62.8947 242.767 63.1713C242.491 63.448 242.115 63.6034 241.724 63.6034C241.333 63.6034 240.958 63.448 240.681 63.1713C240.404 62.8947 240.249 62.5194 240.249 62.1282V56.2275H234.348C233.957 56.2275 233.582 56.0721 233.305 55.7955C233.028 55.5188 232.873 55.1436 232.873 54.7524C232.873 54.3611 233.028 53.9859 233.305 53.7093C233.582 53.4326 233.957 53.2772 234.348 53.2772H240.249V47.3765C240.249 46.9853 240.404 46.6101 240.681 46.3334C240.958 46.0568 241.333 45.9014 241.724 45.9014C242.115 45.9014 242.491 46.0568 242.767 46.3334C243.044 46.6101 243.199 46.9853 243.199 47.3765V53.2772H249.1C249.491 53.2772 249.866 53.4326 250.143 53.7093C250.42 53.9859 250.575 54.3611 250.575 54.7524C250.575 55.1436 250.42 55.5188 250.143 55.7955C249.866 56.0721 249.491 56.2275 249.1 56.2275Z" fill="#00695C"/>
<path opacity="0.16" d="M216.646 104.909C217.82 104.909 218.946 104.442 219.776 103.612C220.605 102.782 221.072 101.657 221.072 100.483V79.8308C221.072 78.6571 220.605 77.5314 219.776 76.7015C218.946 75.8715 217.82 75.4053 216.646 75.4053H195.994C194.82 75.4053 193.695 75.8715 192.865 76.7015C192.035 77.5314 191.568 78.6571 191.568 79.8308V100.483C191.568 101.657 192.035 102.782 192.865 103.612C193.695 104.442 194.82 104.909 195.994 104.909H216.646Z" fill="#00695C"/>
<path d="M200.066 85.9816C199.824 85.6994 199.698 85.3364 199.712 84.9651C199.726 84.5938 199.88 84.2417 200.143 83.9789C200.406 83.7162 200.758 83.5623 201.129 83.548C201.5 83.5336 201.863 83.6599 202.146 83.9016L206.32 88.0763L210.495 83.9016C210.777 83.6599 211.14 83.5336 211.512 83.548C211.883 83.5623 212.235 83.7162 212.498 83.9789C212.76 84.2417 212.914 84.5938 212.929 84.9651C212.943 85.3364 212.817 85.6994 212.575 85.9816L208.4 90.1563L212.575 94.331C212.85 94.6074 213.004 94.9813 213.004 95.371C213.004 95.7607 212.85 96.1346 212.575 96.411C212.299 96.6858 211.925 96.84 211.535 96.84C211.145 96.84 210.772 96.6858 210.495 96.411L206.32 92.2363L202.146 96.411C201.869 96.6858 201.495 96.84 201.106 96.84C200.716 96.84 200.342 96.6858 200.066 96.411C199.791 96.1346 199.637 95.7607 199.637 95.371C199.637 94.9813 199.791 94.6074 200.066 94.331L204.24 90.1563L200.066 85.9816Z" fill="#00695C"/>
<path opacity="0.16" d="M252.051 75.4053H231.398C230.224 75.4053 229.099 75.8715 228.269 76.7015C227.439 77.5314 226.973 78.6571 226.973 79.8308V100.483C226.973 101.657 227.439 102.782 228.269 103.612C229.099 104.442 230.224 104.909 231.398 104.909H252.051C253.224 104.909 254.35 104.442 255.18 103.612C256.01 102.782 256.476 101.657 256.476 100.483V79.8308C256.476 78.6571 256.01 77.5314 255.18 76.7015C254.35 75.8715 253.224 75.4053 252.051 75.4053Z" fill="#00695C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M234.348 91.6323H249.1C249.491 91.6323 249.866 91.4768 250.143 91.2002C250.42 90.9235 250.575 90.5483 250.575 90.1571C250.575 89.7658 250.42 89.3906 250.143 89.114C249.866 88.8373 249.491 88.6819 249.1 88.6819H234.348C233.957 88.6819 233.582 88.8373 233.305 89.114C233.028 89.3906 232.873 89.7658 232.873 90.1571C232.873 90.5483 233.028 90.9235 233.305 91.2002C233.582 91.4768 233.957 91.6323 234.348 91.6323Z" fill="#00695C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M242.544 83.0299C242.301 82.8678 242.016 82.7812 241.724 82.7812C241.333 82.7812 240.958 82.9367 240.681 83.2133C240.404 83.49 240.249 83.8652 240.249 84.2564C240.249 84.5482 240.335 84.8334 240.497 85.076C240.66 85.3186 240.89 85.5076 241.16 85.6193C241.429 85.7309 241.726 85.7602 242.012 85.7032C242.298 85.6463 242.561 85.5058 242.767 85.2995C242.973 85.0932 243.114 84.8304 243.171 84.5442C243.228 84.2581 243.199 83.9614 243.087 83.6919C242.975 83.4223 242.786 83.192 242.544 83.0299Z" fill="#00695C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M240.681 97.1009C240.958 97.3775 241.333 97.5329 241.724 97.5329C242.115 97.5329 242.491 97.3775 242.767 97.1009C243.044 96.8242 243.199 96.449 243.199 96.0578C243.199 95.6665 243.044 95.2913 242.767 95.0147C242.491 94.738 242.115 94.5826 241.724 94.5826C241.333 94.5826 240.958 94.738 240.681 95.0147C240.404 95.2913 240.249 95.6665 240.249 96.0578C240.249 96.449 240.404 96.8242 240.681 97.1009Z" fill="#00695C"/>
<svg width="397" height="276" viewBox="0 0 397 276" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_17521_103112)">
<g filter="url(#filter0_ddd_17521_103112)">
<rect x="4.22656" y="15.6602" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="4.72656" y="16.1602" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip1_17521_103112)">
<path opacity="0.16" d="M32.9958 69.5033H53.6482C54.8219 69.5033 55.9475 69.0371 56.7775 68.2071C57.6074 67.3772 58.0737 66.2516 58.0737 65.0778V44.4255C58.0737 43.2518 57.6074 42.1261 56.7775 41.2962C55.9475 40.4663 54.8219 40 53.6482 40H32.9958C31.8221 40 30.6965 40.4663 29.8665 41.2962C29.0366 42.1261 28.5703 43.2518 28.5703 44.4255V65.0778C28.5703 66.2516 29.0366 67.3772 29.8665 68.2071C30.6965 69.0371 31.8221 69.5033 32.9958 69.5033Z" fill="#006D92"/>
<path d="M35.9478 53.2773H50.6995C51.0907 53.2773 51.466 53.4328 51.7426 53.7094C52.0192 53.9861 52.1747 54.3613 52.1747 54.7525C52.1747 55.1437 52.0192 55.519 51.7426 55.7956C51.466 56.0723 51.0907 56.2277 50.6995 56.2277H35.9478C35.5566 56.2277 35.1814 56.0723 34.9047 55.7956C34.6281 55.519 34.4727 55.1437 34.4727 54.7525C34.4727 54.3613 34.6281 53.9861 34.9047 53.7094C35.1814 53.4328 35.5566 53.2773 35.9478 53.2773Z" fill="#006D92"/>
<path opacity="0.16" d="M89.0505 40H68.3982C67.2244 40 66.0988 40.4663 65.2689 41.2962C64.4389 42.1261 63.9727 43.2518 63.9727 44.4255V65.0778C63.9727 66.2516 64.4389 67.3772 65.2689 68.2071C66.0988 69.0371 67.2244 69.5033 68.3982 69.5033H89.0505C90.2242 69.5033 91.3499 69.0371 92.1798 68.2071C93.0097 67.3772 93.476 66.2516 93.476 65.0778V44.4255C93.476 43.2518 93.0097 42.1261 92.1798 41.2962C91.3499 40.4663 90.2242 40 89.0505 40Z" fill="#006D92"/>
<path d="M86.1018 56.2266H80.2012V62.1272C80.2012 62.5185 80.0458 62.8937 79.7691 63.1703C79.4925 63.447 79.1172 63.6024 78.726 63.6024C78.3348 63.6024 77.9596 63.447 77.6829 63.1703C77.4063 62.8937 77.2508 62.5185 77.2508 62.1272V56.2266H71.3502C70.9589 56.2266 70.5837 56.0711 70.3071 55.7945C70.0304 55.5178 69.875 55.1426 69.875 54.7514C69.875 54.3602 70.0304 53.9849 70.3071 53.7083C70.5837 53.4316 70.9589 53.2762 71.3502 53.2762H77.2508V47.3756C77.2508 46.9843 77.4063 46.6091 77.6829 46.3325C77.9596 46.0558 78.3348 45.9004 78.726 45.9004C79.1172 45.9004 79.4925 46.0558 79.7691 46.3325C80.0458 46.6091 80.2012 46.9843 80.2012 47.3756V53.2762H86.1018C86.4931 53.2762 86.8683 53.4316 87.1449 53.7083C87.4216 53.9849 87.577 54.3602 87.577 54.7514C87.577 55.1426 87.4216 55.5178 87.1449 55.7945C86.8683 56.0711 86.4931 56.2266 86.1018 56.2266Z" fill="#006D92"/>
<path opacity="0.16" d="M53.6482 104.908C54.8219 104.908 55.9475 104.441 56.7775 103.611C57.6074 102.781 58.0737 101.656 58.0737 100.482V79.8298C58.0737 78.6561 57.6074 77.5304 56.7775 76.7005C55.9475 75.8706 54.8219 75.4043 53.6482 75.4043H32.9958C31.8221 75.4043 30.6965 75.8706 29.8665 76.7005C29.0366 77.5304 28.5703 78.6561 28.5703 79.8298V100.482C28.5703 101.656 29.0366 102.781 29.8665 103.611C30.6965 104.441 31.8221 104.908 32.9958 104.908H53.6482Z" fill="#006D92"/>
<path d="M37.0657 85.9816C36.824 85.6994 36.6977 85.3364 36.7121 84.9651C36.7264 84.5938 36.8803 84.2417 37.143 83.9789C37.4058 83.7162 37.7579 83.5623 38.1292 83.548C38.5005 83.5336 38.8635 83.6599 39.1457 83.9016L43.3204 88.0763L47.4951 83.9016C47.7773 83.6599 48.1403 83.5336 48.5116 83.548C48.8829 83.5623 49.235 83.7162 49.4978 83.9789C49.7605 84.2417 49.9144 84.5938 49.9287 84.9651C49.9431 85.3364 49.8168 85.6994 49.5751 85.9816L45.4004 90.1563L49.5751 94.331C49.8499 94.6074 50.0041 94.9813 50.0041 95.371C50.0041 95.7607 49.8499 96.1346 49.5751 96.411C49.2987 96.6858 48.9248 96.84 48.5351 96.84C48.1454 96.84 47.7715 96.6858 47.4951 96.411L43.3204 92.2363L39.1457 96.411C38.8693 96.6858 38.4954 96.84 38.1057 96.84C37.716 96.84 37.3421 96.6858 37.0657 96.411C36.7909 96.1346 36.6367 95.7607 36.6367 95.371C36.6367 94.9813 36.7909 94.6074 37.0657 94.331L41.2404 90.1563L37.0657 85.9816Z" fill="#006D92"/>
<path opacity="0.16" d="M89.0505 75.4043H68.3982C67.2244 75.4043 66.0988 75.8706 65.2689 76.7005C64.4389 77.5304 63.9727 78.6561 63.9727 79.8298V100.482C63.9727 101.656 64.4389 102.781 65.2689 103.611C66.0988 104.441 67.2244 104.908 68.3982 104.908H89.0505C90.2242 104.908 91.3499 104.441 92.1798 103.611C93.0097 102.781 93.476 101.656 93.476 100.482V79.8298C93.476 78.6561 93.0097 77.5304 92.1798 76.7005C91.3499 75.8706 90.2242 75.4043 89.0505 75.4043Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M71.3502 91.6303H86.1018C86.4931 91.6303 86.8683 91.4749 87.1449 91.1982C87.4216 90.9216 87.577 90.5464 87.577 90.1551C87.577 89.7639 87.4216 89.3887 87.1449 89.112C86.8683 88.8354 86.4931 88.68 86.1018 88.68H71.3502C70.9589 88.68 70.5837 88.8354 70.3071 89.112C70.0304 89.3887 69.875 89.7639 69.875 90.1551C69.875 90.5464 70.0304 90.9216 70.3071 91.1982C70.5837 91.4749 70.9589 91.6303 71.3502 91.6303Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.5456 83.0279C79.303 82.8658 79.0178 82.7793 78.726 82.7793C78.3348 82.7793 77.9596 82.9347 77.6829 83.2114C77.4063 83.488 77.2508 83.8632 77.2508 84.2545C77.2508 84.5462 77.3374 84.8314 77.4994 85.074C77.6615 85.3166 77.8919 85.5057 78.1615 85.6173C78.431 85.729 78.7276 85.7582 79.0138 85.7013C79.3 85.6444 79.5628 85.5039 79.7691 85.2976C79.9754 85.0913 80.1159 84.8284 80.1728 84.5423C80.2297 84.2561 80.2005 83.9595 80.0889 83.6899C79.9772 83.4204 79.7882 83.19 79.5456 83.0279Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M77.6829 97.0989C77.9596 97.3756 78.3348 97.531 78.726 97.531C79.1172 97.531 79.4925 97.3756 79.7691 97.0989C80.0458 96.8223 80.2012 96.447 80.2012 96.0558C80.2012 95.6646 80.0458 95.2894 79.7691 95.0127C79.4925 94.7361 79.1172 94.5806 78.726 94.5806C78.3348 94.5806 77.9596 94.7361 77.6829 95.0127C77.4063 95.2894 77.2508 95.6646 77.2508 96.0558C77.2508 96.447 77.4063 96.8223 77.6829 97.0989Z" fill="#006D92"/>
</g>
<rect x="304.729" y="15.6611" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="305.229" y="16.1611" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip2_17199_45631)">
<rect opacity="0.16" x="329.066" y="40.001" width="64.9074" height="64.9074" rx="32.4537" fill="#00695C"/>
<path d="M348.899 65.2432L341.688 72.4551L348.899 79.667" stroke="#00695C" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M374.141 65.2432L381.353 72.4551L374.141 79.667" stroke="#00695C" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M365.126 58.0312L357.914 86.879" stroke="#00695C" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="141.727" y="15.6602" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="142.227" y="16.1602" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip2_17521_103112)">
<rect opacity="0.16" x="166.062" y="40" width="64.9074" height="64.9074" rx="32.4537" fill="#006D92"/>
<path d="M185.896 65.2422L178.684 72.4541L185.896 79.6661" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M211.137 65.2422L218.349 72.4541L211.137 79.6661" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M202.122 58.0293L194.91 86.877" stroke="#006D92" stroke-width="3.60596" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<rect x="442.229" y="15.6611" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="442.729" y="16.1611" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<path opacity="0.16" d="M514.263 47.6641C514.127 48.1923 514.055 48.7461 514.055 49.3168C514.055 52.9679 517.014 55.9277 520.666 55.9277C521.236 55.9277 521.79 55.8555 522.318 55.7195V89.1906C521.79 89.0547 521.236 88.9824 520.666 88.9824C517.014 88.9824 514.055 91.9422 514.055 95.5933C514.055 96.164 514.127 96.7178 514.263 97.2461H480.792C480.928 96.7178 481 96.164 481 95.5933C481 91.9422 478.04 88.9824 474.389 88.9824C473.818 88.9824 473.265 89.0547 472.736 89.1906V55.7195C473.265 55.8555 473.818 55.9277 474.389 55.9277C478.04 55.9277 481 52.9679 481 49.3168C481 48.7461 480.928 48.1923 480.792 47.6641H514.263Z" fill="#00695C"/>
<path opacity="0.4" d="M514.108 94.767C514.074 95.0378 514.055 95.3134 514.055 95.5933C514.055 96.164 514.127 96.7178 514.263 97.2461H480.792C480.928 96.7178 481 96.164 481 95.5933C481 95.3134 480.981 95.0378 480.947 94.767H514.108ZM472.736 55.7195C473.265 55.8555 473.818 55.9277 474.389 55.9277C474.669 55.9277 474.945 55.9082 475.215 55.8745V89.0341C474.945 89.0003 474.669 88.9824 474.389 88.9824C473.818 88.9824 473.265 89.0547 472.736 89.1906V55.7195ZM522.318 89.1906C521.79 89.0547 521.236 88.9824 520.666 88.9824C520.386 88.9824 520.11 89.0003 519.839 89.0341V55.8745C520.11 55.9082 520.386 55.9277 520.666 55.9277C521.236 55.9277 521.79 55.8555 522.318 55.7195V89.1906ZM514.263 47.6641C514.127 48.1923 514.055 48.7461 514.055 49.3168C514.055 49.5967 514.074 49.8724 514.108 50.1432H480.947C480.981 49.8724 481 49.5967 481 49.3168C481 48.7461 480.928 48.1923 480.792 47.6641H514.263Z" fill="#00695C"/>
<path d="M525.623 49.3166C525.623 46.5783 523.404 44.3584 520.665 44.3584C517.927 44.3584 515.707 46.5783 515.707 49.3166C515.707 52.0549 517.927 54.2748 520.665 54.2748C523.404 54.2748 525.623 52.0549 525.623 49.3166Z" fill="#00695C"/>
<path d="M525.623 95.593C525.623 92.8546 523.404 90.6348 520.665 90.6348C517.927 90.6348 515.707 92.8546 515.707 95.593C515.707 98.3313 517.927 100.551 520.665 100.551C523.404 100.551 525.623 98.3313 525.623 95.593Z" fill="#00695C"/>
<path d="M479.346 95.593C479.346 92.8546 477.126 90.6348 474.388 90.6348C471.65 90.6348 469.43 92.8546 469.43 95.593C469.43 98.3313 471.65 100.551 474.388 100.551C477.126 100.551 479.346 98.3313 479.346 95.593Z" fill="#00695C"/>
<path d="M479.346 49.3166C479.346 46.5783 477.126 44.3584 474.388 44.3584C471.65 44.3584 469.43 46.5783 469.43 49.3166C469.43 52.0549 471.65 54.2748 474.388 54.2748C477.126 54.2748 479.346 52.0549 479.346 49.3166Z" fill="#00695C"/>
<rect x="442.002" y="147.185" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="442.502" y="147.685" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip3_17199_45631)">
<rect x="486.469" y="174.282" width="26.4437" height="19.8328" rx="1.65273" fill="#00695C"/>
<path opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M499.441 194.321C499.673 194.321 499.904 194.376 500.114 194.486C500.198 194.53 500.279 194.584 500.354 194.646C500.392 194.676 500.429 194.71 500.464 194.745L505.422 199.703C505.986 200.268 505.986 201.183 505.422 201.748C504.857 202.312 503.942 202.313 503.377 201.748L500.94 199.312C501.199 203.769 502.382 206.458 503.886 208.174C505.605 210.135 507.937 211.052 510.532 211.695C511.864 212.026 513.102 212.25 514.442 212.548C515.72 212.832 517.021 213.172 518.175 213.703C519.345 214.242 520.43 215.008 521.208 216.179C521.988 217.353 522.373 218.803 522.373 220.559C522.373 221.357 521.725 222.004 520.927 222.004C520.128 222.004 519.481 221.357 519.48 220.559C519.48 219.232 519.194 218.374 518.799 217.779C518.402 217.182 517.808 216.718 516.965 216.33C516.105 215.934 515.055 215.647 513.814 215.371C512.637 215.109 511.189 214.839 509.836 214.503C507.06 213.814 504.02 212.714 501.711 210.08C501.422 209.75 501.147 209.4 500.888 209.027V227.169C500.888 227.967 500.24 228.615 499.441 228.615C498.643 228.615 497.995 227.968 497.995 227.169V209.027C497.736 209.4 497.461 209.75 497.172 210.08C494.863 212.714 491.823 213.814 489.047 214.503C487.694 214.839 486.246 215.109 485.068 215.371C483.828 215.647 482.778 215.934 481.918 216.33C481.075 216.718 480.481 217.182 480.084 217.779C479.689 218.374 479.402 219.232 479.402 220.559C479.402 221.357 478.754 222.004 477.956 222.004C477.158 222.004 476.51 221.357 476.51 220.559C476.51 218.803 476.895 217.353 477.675 216.179C478.453 215.008 479.537 214.242 480.708 213.703C481.862 213.172 483.163 212.832 484.44 212.548C485.78 212.25 487.019 212.026 488.351 211.695C490.945 211.052 493.278 210.135 494.997 208.174C496.501 206.458 497.683 203.768 497.941 199.312L495.506 201.748C494.941 202.313 494.026 202.312 493.461 201.748C492.896 201.183 492.896 200.268 493.461 199.703L498.419 194.745C498.701 194.463 499.071 194.321 499.441 194.321Z" fill="#00695C"/>
<path d="M497.827 217.715C498.442 217.099 499.44 217.099 500.056 217.715L506.743 224.402C507.359 225.018 507.359 226.016 506.743 226.631L500.056 233.319C499.44 233.934 498.442 233.934 497.827 233.319L491.139 226.631C490.524 226.016 490.524 225.018 491.139 224.402L497.827 217.715Z" fill="#00695C"/>
<path d="M476.342 217.715C476.958 217.099 477.956 217.099 478.572 217.715L485.259 224.402C485.875 225.018 485.875 226.016 485.259 226.631L478.572 233.319C477.956 233.934 476.958 233.934 476.342 233.319L469.655 226.631C469.039 226.016 469.039 225.018 469.655 224.402L476.342 217.715Z" fill="#00695C"/>
<path d="M519.313 217.715C519.929 217.099 520.927 217.099 521.542 217.715L528.23 224.402C528.845 225.018 528.845 226.016 528.23 226.631L521.542 233.319C520.927 233.934 519.929 233.934 519.313 233.319L512.626 226.631C512.01 226.016 512.01 225.018 512.626 224.402L519.313 217.715Z" fill="#00695C"/>
<rect x="279.227" y="15.6602" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="279.727" y="16.1602" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<path opacity="0.16" d="M351.257 47.6641C351.121 48.1923 351.049 48.7461 351.049 49.3168C351.049 52.9679 354.009 55.9277 357.66 55.9277C358.23 55.9277 358.784 55.8555 359.312 55.7195V89.1906C358.784 89.0547 358.23 88.9824 357.66 88.9824C354.009 88.9824 351.049 91.9422 351.049 95.5933C351.049 96.164 351.121 96.7178 351.257 97.2461H317.786C317.922 96.7178 317.994 96.164 317.994 95.5933C317.994 91.9422 315.034 88.9824 311.383 88.9824C310.813 88.9824 310.259 89.0547 309.73 89.1906V55.7195C310.259 55.8555 310.813 55.9277 311.383 55.9277C315.034 55.9277 317.994 52.9679 317.994 49.3168C317.994 48.7461 317.922 48.1923 317.786 47.6641H351.257Z" fill="#006D92"/>
<path opacity="0.4" d="M351.102 94.767C351.068 95.0378 351.049 95.3134 351.049 95.5933C351.049 96.164 351.121 96.7178 351.257 97.2461H317.786C317.922 96.7178 317.994 96.164 317.994 95.5933C317.994 95.3134 317.975 95.0378 317.941 94.767H351.102ZM309.73 55.7195C310.259 55.8555 310.813 55.9277 311.383 55.9277C311.663 55.9277 311.939 55.9082 312.21 55.8745V89.0341C311.939 89.0003 311.663 88.9824 311.383 88.9824C310.813 88.9824 310.259 89.0547 309.73 89.1906V55.7195ZM359.312 89.1906C358.784 89.0547 358.23 88.9824 357.66 88.9824C357.38 88.9824 357.104 89.0003 356.833 89.0341V55.8745C357.104 55.9082 357.38 55.9277 357.66 55.9277C358.23 55.9277 358.784 55.8555 359.312 55.7195V89.1906ZM351.257 47.6641C351.121 48.1923 351.049 48.7461 351.049 49.3168C351.049 49.5967 351.068 49.8724 351.102 50.1432H317.941C317.975 49.8724 317.994 49.5967 317.994 49.3168C317.994 48.7461 317.922 48.1923 317.786 47.6641H351.257Z" fill="#006D92"/>
<path d="M362.62 49.3156C362.62 46.5773 360.4 44.3574 357.661 44.3574C354.923 44.3574 352.703 46.5773 352.703 49.3156C352.703 52.054 354.923 54.2738 357.661 54.2738C360.4 54.2738 362.62 52.054 362.62 49.3156Z" fill="#006D92"/>
<path d="M362.62 95.593C362.62 92.8546 360.4 90.6348 357.661 90.6348C354.923 90.6348 352.703 92.8546 352.703 95.593C352.703 98.3313 354.923 100.551 357.661 100.551C360.4 100.551 362.62 98.3313 362.62 95.593Z" fill="#006D92"/>
<path d="M316.342 95.593C316.342 92.8546 314.122 90.6348 311.384 90.6348C308.646 90.6348 306.426 92.8546 306.426 95.593C306.426 98.3313 308.646 100.551 311.384 100.551C314.122 100.551 316.342 98.3313 316.342 95.593Z" fill="#006D92"/>
<path d="M316.342 49.3156C316.342 46.5773 314.122 44.3574 311.384 44.3574C308.646 44.3574 306.426 46.5773 306.426 49.3156C306.426 52.054 308.646 54.2738 311.384 54.2738C314.122 54.2738 316.342 52.054 316.342 49.3156Z" fill="#006D92"/>
<rect x="279" y="147.184" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="279.5" y="147.684" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip3_17521_103112)">
<rect x="323.465" y="174.281" width="26.4437" height="19.8328" rx="1.65273" fill="#006D92"/>
<path opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M336.436 194.32C336.667 194.32 336.899 194.375 337.108 194.485C337.192 194.529 337.273 194.583 337.349 194.645C337.386 194.675 337.423 194.709 337.458 194.744L342.416 199.702C342.981 200.267 342.98 201.182 342.416 201.747C341.851 202.312 340.936 202.312 340.371 201.747L337.935 199.311C338.193 203.768 339.376 206.457 340.88 208.173C342.599 210.134 344.931 211.051 347.526 211.694C348.858 212.025 350.097 212.249 351.437 212.547C352.714 212.831 354.015 213.171 355.169 213.702C356.34 214.241 357.424 215.007 358.202 216.178C358.982 217.352 359.367 218.802 359.367 220.558C359.367 221.356 358.719 222.003 357.921 222.003C357.122 222.003 356.475 221.356 356.475 220.558C356.475 219.231 356.188 218.373 355.793 217.778C355.396 217.181 354.802 216.717 353.959 216.329C353.099 215.933 352.049 215.646 350.809 215.37C349.631 215.108 348.183 214.838 346.83 214.502C344.054 213.813 341.014 212.713 338.705 210.079C338.416 209.749 338.141 209.399 337.882 209.026V227.168C337.882 227.966 337.234 228.614 336.436 228.614C335.637 228.614 334.989 227.967 334.989 227.168V209.026C334.73 209.399 334.455 209.749 334.166 210.079C331.857 212.713 328.817 213.813 326.041 214.502C324.688 214.838 323.24 215.108 322.062 215.37C320.822 215.646 319.772 215.933 318.912 216.329C318.069 216.717 317.475 217.181 317.078 217.778C316.683 218.373 316.397 219.231 316.396 220.558C316.396 221.356 315.749 222.003 314.95 222.003C314.152 222.003 313.504 221.356 313.504 220.558C313.504 218.802 313.889 217.352 314.669 216.178C315.447 215.007 316.531 214.241 317.702 213.702C318.856 213.171 320.157 212.831 321.435 212.547C322.774 212.249 324.013 212.025 325.345 211.694C327.94 211.051 330.272 210.134 331.991 208.173C333.495 206.457 334.677 203.767 334.936 199.311L332.5 201.747C331.935 202.312 331.02 202.311 330.455 201.747C329.89 201.182 329.89 200.267 330.455 199.702L335.413 194.744C335.695 194.462 336.066 194.32 336.436 194.32Z" fill="#006D92"/>
<path d="M334.825 217.714C335.44 217.098 336.438 217.098 337.054 217.714L343.741 224.401C344.357 225.017 344.357 226.015 343.741 226.63L337.054 233.318C336.438 233.933 335.44 233.933 334.825 233.318L328.137 226.63C327.522 226.015 327.522 225.017 328.137 224.401L334.825 217.714Z" fill="#006D92"/>
<path d="M313.337 217.714C313.952 217.098 314.95 217.098 315.566 217.714L322.253 224.401C322.869 225.017 322.869 226.015 322.253 226.63L315.566 233.318C314.95 233.933 313.952 233.933 313.337 233.318L306.649 226.63C306.034 226.015 306.034 225.017 306.649 224.401L313.337 217.714Z" fill="#006D92"/>
<path d="M356.309 217.714C356.925 217.098 357.923 217.098 358.538 217.714L365.226 224.401C365.841 225.017 365.841 226.015 365.226 226.63L358.538 233.318C357.923 233.933 356.925 233.933 356.309 233.318L349.622 226.63C349.006 226.015 349.006 225.017 349.622 224.401L356.309 217.714Z" fill="#006D92"/>
</g>
<rect x="167" y="147.185" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="167.5" y="147.685" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip4_17199_45631)">
<path opacity="0.16" d="M220.102 184.742L203.662 201.183" stroke="#00695C" stroke-width="3.65341" stroke-linecap="round"/>
<path opacity="0.16" d="M227.409 184.742L243.85 201.183" stroke="#00695C" stroke-width="3.65341" stroke-linecap="round"/>
<path d="M199.015 196.212C199.695 195.532 200.798 195.532 201.479 196.212L208.87 203.604C209.55 204.284 209.55 205.387 208.87 206.068L201.479 213.459C200.798 214.139 199.695 214.139 199.015 213.459L191.624 206.068C190.943 205.387 190.943 204.284 191.624 203.604L199.015 196.212Z" fill="#00695C"/>
<path d="M246.509 196.212C247.189 195.532 248.292 195.532 248.973 196.212L256.364 203.604C257.045 204.284 257.045 205.387 256.364 206.068L248.973 213.459C248.292 214.139 247.189 214.139 246.509 213.459L239.118 206.068C238.437 205.387 238.437 204.284 239.118 203.604L246.509 196.212Z" fill="#00695C"/>
<path d="M222.763 172.465C223.443 171.785 224.546 171.785 225.227 172.465L232.618 179.857C233.298 180.537 233.298 181.64 232.618 182.321L225.227 189.712C224.546 190.392 223.443 190.392 222.763 189.712L215.372 182.321C214.691 181.64 214.691 180.537 215.372 179.857L222.763 172.465Z" fill="#00695C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M225.337 208.608C225.702 208.608 226.068 208.852 226.189 209.218L226.737 210.861C226.798 211.166 227.042 211.41 227.347 211.471C228.199 211.714 228.99 212.018 229.721 212.444C229.964 212.566 230.33 212.566 230.573 212.444L232.096 211.714C232.461 211.531 232.826 211.592 233.131 211.896L235.201 213.967C235.506 214.21 235.566 214.637 235.384 215.002L234.653 216.524C234.471 216.829 234.532 217.133 234.653 217.377C235.079 218.107 235.383 218.899 235.627 219.751C235.749 220.055 235.932 220.239 236.236 220.36L237.88 220.908C238.245 221.03 238.489 221.395 238.489 221.761V224.684C238.489 225.049 238.245 225.414 237.88 225.536L236.236 226.084C235.932 226.145 235.688 226.389 235.627 226.693C235.383 227.546 235.079 228.337 234.653 229.067C234.532 229.311 234.532 229.676 234.653 229.92L235.323 231.442C235.506 231.808 235.445 232.173 235.141 232.478L233.07 234.548C232.827 234.852 232.4 234.913 232.035 234.73L230.513 234C230.208 233.817 229.904 233.878 229.66 234C228.929 234.426 228.138 234.73 227.285 234.974C226.981 235.095 226.799 235.279 226.677 235.583L226.129 237.227C226.007 237.592 225.642 237.836 225.276 237.836H222.354C221.988 237.836 221.623 237.592 221.501 237.227L220.953 235.583C220.892 235.279 220.648 235.035 220.344 234.974C219.491 234.73 218.699 234.426 217.969 234C217.725 233.878 217.361 233.878 217.117 234L215.595 234.73C215.229 234.913 214.864 234.852 214.56 234.548L212.489 232.478C212.185 232.234 212.124 231.808 212.307 231.442L213.098 229.92C213.28 229.615 213.219 229.311 213.098 229.067C212.672 228.337 212.368 227.546 212.124 226.693C212.002 226.389 211.819 226.206 211.515 226.084L209.871 225.536C209.506 225.414 209.262 225.049 209.262 224.684V221.761C209.262 221.395 209.506 221.03 209.871 220.908L211.515 220.36C211.819 220.299 212.063 220.055 212.124 219.751C212.368 218.899 212.672 218.107 213.098 217.377C213.219 217.133 213.219 216.768 213.098 216.524L212.307 215.002C212.185 214.637 212.246 214.211 212.489 213.906L214.56 211.836C214.864 211.592 215.29 211.532 215.655 211.653L217.178 212.444C217.482 212.627 217.787 212.566 218.03 212.444C218.761 212.018 219.552 211.714 220.404 211.471C220.709 211.349 220.892 211.166 221.014 210.861L221.562 209.218C221.683 208.852 222.049 208.608 222.414 208.608H225.337ZM227.274 231.306H227.275H227.274ZM223.876 215.915C219.841 215.915 216.568 219.187 216.568 223.223C216.569 227.258 219.841 230.529 223.876 230.529C227.911 230.529 231.182 227.258 231.183 223.223C231.183 219.187 227.911 215.915 223.876 215.915Z" fill="#00695C"/>
<rect x="4" y="147.184" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="4.5" y="147.684" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip4_17521_103112)">
<path opacity="0.16" d="M57.1005 184.74L40.6602 201.181" stroke="#006D92" stroke-width="3.65341" stroke-linecap="round"/>
<path opacity="0.16" d="M64.4073 184.74L80.8477 201.181" stroke="#006D92" stroke-width="3.65341" stroke-linecap="round"/>
<path d="M36.0149 196.211C36.6953 195.531 37.7983 195.531 38.4787 196.211L45.8701 203.603C46.5504 204.283 46.5504 205.386 45.8701 206.067L38.4787 213.458C37.7983 214.138 36.6953 214.138 36.0149 213.458L28.6235 206.067C27.9432 205.386 27.9432 204.283 28.6235 203.603L36.0149 196.211Z" fill="#006D92"/>
<path d="M83.511 196.211C84.1914 195.531 85.2944 195.531 85.9748 196.211L93.3662 203.603C94.0465 204.283 94.0465 205.386 93.3662 206.067L85.9748 213.458C85.2944 214.138 84.1914 214.138 83.511 213.458L76.1196 206.067C75.4393 205.386 75.4393 204.283 76.1196 203.603L83.511 196.211Z" fill="#006D92"/>
<path d="M59.761 172.463C60.4414 171.783 61.5444 171.783 62.2248 172.463L69.6162 179.855C70.2965 180.535 70.2965 181.638 69.6162 182.319L62.2248 189.71C61.5444 190.39 60.4414 190.39 59.761 189.71L52.3696 182.319C51.6893 181.638 51.6893 180.535 52.3696 179.855L59.761 172.463Z" fill="#006D92"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M62.3369 208.605C62.7022 208.605 63.0677 208.85 63.1895 209.215L63.7373 210.858C63.7982 211.163 64.0422 211.407 64.3467 211.468C65.1988 211.711 65.9902 212.015 66.7207 212.441C66.9643 212.563 67.3297 212.563 67.5732 212.441L69.0957 211.711C69.461 211.528 69.8264 211.589 70.1309 211.894L72.2012 213.964C72.5056 214.207 72.5664 214.634 72.3838 214.999L71.6533 216.521C71.4706 216.826 71.5315 217.13 71.6533 217.374C72.0794 218.104 72.3834 218.896 72.627 219.748C72.7487 220.052 72.9319 220.236 73.2363 220.357L74.8799 220.905C75.2452 221.027 75.4892 221.393 75.4893 221.758V224.681C75.4892 225.046 75.2452 225.411 74.8799 225.533L73.2363 226.081C72.9319 226.142 72.6878 226.386 72.627 226.69C72.3835 227.543 72.0794 228.334 71.6533 229.064C71.5315 229.308 71.5316 229.673 71.6533 229.917L72.3232 231.439C72.5058 231.805 72.4449 232.17 72.1406 232.475L70.0703 234.545C69.8268 234.849 69.4004 234.91 69.0352 234.728L67.5127 233.997C67.2082 233.814 66.9037 233.875 66.6602 233.997C65.9295 234.423 65.1376 234.727 64.2852 234.971C63.9807 235.092 63.7985 235.276 63.6768 235.58L63.1289 237.224C63.0072 237.589 62.6416 237.833 62.2764 237.833H59.3535C58.9882 237.833 58.6228 237.589 58.501 237.224L57.9531 235.58C57.8922 235.276 57.6482 235.032 57.3438 234.971C56.4914 234.727 55.6994 234.423 54.9688 233.997C54.7253 233.875 54.3607 233.875 54.1172 233.997L52.5947 234.728C52.2294 234.91 51.864 234.849 51.5596 234.545L49.4893 232.475C49.1848 232.231 49.124 231.805 49.3066 231.439L50.0977 229.917C50.2803 229.613 50.2194 229.308 50.0977 229.064C49.6716 228.334 49.3675 227.543 49.124 226.69C49.0022 226.386 48.8191 226.203 48.5146 226.081L46.8711 225.533C46.5058 225.411 46.2617 225.046 46.2617 224.681V221.758C46.2618 221.393 46.5058 221.027 46.8711 220.905L48.5146 220.357C48.8191 220.297 49.0631 220.052 49.124 219.748C49.3675 218.896 49.6716 218.104 50.0977 217.374C50.2194 217.13 50.2194 216.765 50.0977 216.521L49.3066 214.999C49.1849 214.634 49.2457 214.208 49.4893 213.903L51.5596 211.833C51.864 211.589 52.29 211.529 52.6553 211.65L54.1777 212.441C54.4822 212.624 54.7867 212.563 55.0303 212.441C55.7607 212.015 56.5521 211.711 57.4043 211.468C57.7087 211.346 57.8919 211.163 58.0137 210.858L58.5615 209.215C58.6833 208.85 59.0488 208.606 59.4141 208.605H62.3369ZM64.2744 231.303H64.2754H64.2744ZM60.876 215.912C56.8405 215.912 53.5684 219.184 53.5684 223.22C53.5686 227.255 56.8407 230.526 60.876 230.526C64.9111 230.526 68.1824 227.255 68.1826 223.22C68.1826 219.184 64.9112 215.912 60.876 215.912Z" fill="#006D92"/>
</g>
<rect x="304.5" y="147.185" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="305" y="147.685" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip5_17199_45631)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M362.251 189.759C362.616 189.759 362.982 190.003 363.104 190.368L363.651 192.012C363.712 192.316 363.956 192.56 364.261 192.621C365.113 192.865 365.904 193.169 366.635 193.595C366.878 193.716 367.244 193.716 367.487 193.595L369.01 192.864C369.375 192.682 369.74 192.742 370.045 193.047L372.115 195.117C372.42 195.361 372.481 195.787 372.298 196.152L371.567 197.675C371.385 197.979 371.446 198.284 371.567 198.527C371.993 199.258 372.298 200.049 372.541 200.901C372.663 201.206 372.846 201.389 373.15 201.511L374.794 202.059C375.159 202.18 375.403 202.546 375.403 202.911V205.834C375.403 206.199 375.159 206.565 374.794 206.687L373.15 207.234C372.846 207.295 372.602 207.538 372.541 207.843C372.297 208.695 371.994 209.487 371.567 210.218C371.446 210.461 371.446 210.827 371.567 211.07L372.237 212.593C372.42 212.958 372.359 213.324 372.055 213.628L369.984 215.698C369.741 216.003 369.314 216.063 368.949 215.881L367.427 215.15C367.122 214.968 366.818 215.029 366.574 215.15C365.844 215.577 365.052 215.88 364.199 216.124C363.895 216.246 363.713 216.429 363.591 216.733L363.043 218.377C362.921 218.742 362.556 218.986 362.19 218.986H359.268C358.902 218.986 358.537 218.742 358.415 218.377L357.867 216.733C357.806 216.429 357.562 216.185 357.258 216.124C356.405 215.88 355.613 215.577 354.883 215.15C354.639 215.029 354.275 215.029 354.031 215.15L352.509 215.881C352.144 216.063 351.778 216.002 351.474 215.698L349.403 213.628C349.099 213.384 349.038 212.958 349.221 212.593L350.012 211.07C350.194 210.766 350.133 210.461 350.012 210.218C349.586 209.487 349.282 208.695 349.038 207.843C348.916 207.538 348.733 207.356 348.429 207.234L346.785 206.687C346.42 206.565 346.176 206.199 346.176 205.834V202.911C346.176 202.546 346.42 202.18 346.785 202.059L348.429 201.511C348.733 201.45 348.977 201.206 349.038 200.901C349.282 200.049 349.586 199.258 350.012 198.527C350.133 198.284 350.133 197.918 350.012 197.675L349.221 196.152C349.099 195.787 349.16 195.361 349.403 195.057L351.474 192.986C351.778 192.743 352.204 192.682 352.569 192.804L354.092 193.595C354.396 193.777 354.701 193.717 354.944 193.595C355.675 193.169 356.466 192.865 357.318 192.621C357.623 192.499 357.806 192.316 357.928 192.012L358.476 190.368C358.597 190.003 358.963 189.759 359.328 189.759H362.251ZM360.79 197.065C356.755 197.065 353.483 200.337 353.482 204.372C353.482 208.408 356.755 211.68 360.79 211.68C364.825 211.679 368.097 208.407 368.097 204.372C368.096 200.337 364.825 197.066 360.79 197.065Z" fill="#00695C"/>
<circle opacity="0.16" cx="360.67" cy="204.253" r="27.4006" stroke="#00695C" stroke-width="3.65341"/>
<circle cx="360.67" cy="176.852" r="5.48012" fill="#00695C"/>
<circle cx="333.269" cy="204.253" r="5.48012" fill="#00695C"/>
<circle cx="360.67" cy="231.653" r="5.48012" fill="#00695C"/>
<circle cx="388.07" cy="204.253" r="5.48012" fill="#00695C"/>
<rect x="141.5" y="147.184" width="113.588" height="113.588" rx="10" fill="white"/>
<rect x="142" y="147.684" width="112.588" height="112.588" rx="9.5" stroke="black" stroke-opacity="0.05"/>
<g clip-path="url(#clip5_17521_103112)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M199.251 189.758C199.616 189.758 199.982 190.002 200.104 190.367L200.651 192.011C200.712 192.315 200.956 192.559 201.261 192.62C202.113 192.864 202.904 193.168 203.635 193.594C203.878 193.716 204.244 193.715 204.487 193.594L206.01 192.863C206.375 192.681 206.74 192.741 207.045 193.046L209.115 195.116C209.42 195.36 209.481 195.786 209.298 196.151L208.567 197.674C208.385 197.978 208.446 198.283 208.567 198.526C208.993 199.257 209.298 200.048 209.541 200.9C209.663 201.205 209.846 201.388 210.15 201.51L211.794 202.058C212.159 202.179 212.403 202.545 212.403 202.91V205.833C212.403 206.198 212.159 206.564 211.794 206.686L210.15 207.233C209.846 207.294 209.602 207.537 209.541 207.842C209.297 208.694 208.994 209.486 208.567 210.217C208.446 210.46 208.446 210.826 208.567 211.069L209.237 212.592C209.42 212.957 209.359 213.323 209.055 213.627L206.984 215.697C206.741 216.002 206.314 216.062 205.949 215.88L204.427 215.149C204.122 214.967 203.818 215.028 203.574 215.149C202.844 215.576 202.052 215.879 201.199 216.123C200.895 216.245 200.713 216.428 200.591 216.732L200.043 218.376C199.921 218.741 199.556 218.985 199.19 218.985H196.268C195.902 218.985 195.537 218.741 195.415 218.376L194.867 216.732C194.806 216.428 194.562 216.184 194.258 216.123C193.405 215.879 192.613 215.576 191.883 215.149C191.639 215.028 191.275 215.028 191.031 215.149L189.509 215.88C189.144 216.063 188.778 216.002 188.474 215.697L186.403 213.627C186.099 213.383 186.038 212.957 186.221 212.592L187.012 211.069C187.194 210.765 187.133 210.46 187.012 210.217C186.586 209.486 186.282 208.694 186.038 207.842C185.916 207.537 185.733 207.355 185.429 207.233L183.785 206.686C183.42 206.564 183.176 206.198 183.176 205.833V202.91C183.176 202.545 183.42 202.179 183.785 202.058L185.429 201.51C185.733 201.449 185.977 201.205 186.038 200.9C186.282 200.048 186.586 199.257 187.012 198.526C187.133 198.283 187.133 197.917 187.012 197.674L186.221 196.151C186.099 195.786 186.16 195.36 186.403 195.056L188.474 192.985C188.778 192.742 189.204 192.681 189.569 192.803L191.092 193.594C191.396 193.776 191.701 193.716 191.944 193.594C192.675 193.168 193.466 192.864 194.318 192.62C194.623 192.498 194.806 192.315 194.928 192.011L195.476 190.367C195.597 190.002 195.963 189.758 196.328 189.758H199.251ZM197.79 197.064C193.755 197.064 190.483 200.336 190.482 204.371C190.482 208.407 193.755 211.679 197.79 211.679C201.825 211.678 205.097 208.406 205.097 204.371C205.096 200.336 201.825 197.065 197.79 197.064Z" fill="#006D92"/>
<circle opacity="0.16" cx="197.67" cy="204.252" r="27.4006" stroke="#006D92" stroke-width="3.65341"/>
<circle cx="197.672" cy="176.851" r="5.48012" fill="#006D92"/>
<circle cx="170.269" cy="204.252" r="5.48012" fill="#006D92"/>
<circle cx="197.672" cy="231.652" r="5.48012" fill="#006D92"/>
<circle cx="225.07" cy="204.252" r="5.48012" fill="#006D92"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_ddd_17199_45631" x="160" y="13.6611" width="402.816" height="266.111" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_ddd_17521_103112" x="-3" y="13.6602" width="402.812" height="266.111" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17199_45631"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17521_103112"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5"/>
<feGaussianBlur stdDeviation="2.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_17199_45631" result="effect2_dropShadow_17199_45631"/>
<feBlend mode="normal" in2="effect1_dropShadow_17521_103112" result="effect2_dropShadow_17521_103112"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="12"/>
<feGaussianBlur stdDeviation="3.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_17199_45631" result="effect3_dropShadow_17199_45631"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_17199_45631" result="shape"/>
<feBlend mode="normal" in2="effect2_dropShadow_17521_103112" result="effect3_dropShadow_17521_103112"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_17521_103112" result="shape"/>
</filter>
<clipPath id="clip0_17199_45631">
<rect width="560" height="276" fill="white"/>
<clipPath id="clip0_17521_103112">
<rect width="397" height="276" fill="white"/>
</clipPath>
<clipPath id="clip1_17199_45631">
<rect width="64.9074" height="64.9074" fill="white" transform="translate(191.568 40.001)"/>
<clipPath id="clip1_17521_103112">
<rect width="64.9074" height="64.9074" fill="white" transform="translate(28.5703 40)"/>
</clipPath>
<clipPath id="clip2_17199_45631">
<rect width="64.9074" height="64.9074" fill="white" transform="translate(329.066 40.001)"/>
<clipPath id="clip2_17521_103112">
<rect width="64.9074" height="64.9074" fill="white" transform="translate(166.062 40)"/>
</clipPath>
<clipPath id="clip3_17199_45631">
<rect width="59.4984" height="59.4984" fill="white" transform="translate(469.691 174.282)"/>
<clipPath id="clip3_17521_103112">
<rect width="59.4984" height="59.4984" fill="white" transform="translate(306.688 174.281)"/>
</clipPath>
<clipPath id="clip4_17199_45631">
<rect width="65.7614" height="65.7614" fill="white" transform="translate(190.875 171.955)"/>
<clipPath id="clip4_17521_103112">
<rect width="65.7614" height="65.7614" fill="white" transform="translate(27.875 171.953)"/>
</clipPath>
<clipPath id="clip5_17199_45631">
<rect width="65.7614" height="65.7614" fill="white" transform="translate(327.789 171.372)"/>
<clipPath id="clip5_17521_103112">
<rect width="65.7614" height="65.7614" fill="white" transform="translate(164.789 171.371)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

1
ui-ngx/src/scss/constants.scss
View File

@ -27,6 +27,7 @@ $mat-gt-sm: "screen and (min-width: 960px)";
$mat-gt-md: "screen and (min-width: 1280px)";
$mat-lt-xmd: "screen and (max-width: 1599px)";
$mat-gt-xmd: "screen and (min-width: 1600px)";
$mat-lt-xxl: "screen and (max-width: 2447px)";
$mat-gt-xxl: "screen and (min-width: 2448px)";
$mat-gt-xl: "screen and (min-width: 1920px)";
$mat-md-lg: "screen and (min-width: 960px) and (max-width: 1819px)";

Write Preview
Loading…
Cancel
Save