diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index 98577bf..23db932 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -107,7 +107,7 @@ import { DirectivesModule } from './directives/directives.module'; MatSnackBarModule, MatBottomSheetModule, MatProgressSpinnerModule, - DirectivesModule + DirectivesModule, ], providers: [ DialogService, @@ -118,4 +118,4 @@ import { DirectivesModule } from './directives/directives.module'; ], bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/angular/src/app/pipes/safe-html.pipe.ts b/angular/src/app/pipes/safe-html.pipe.ts new file mode 100644 index 0000000..22c69b8 --- /dev/null +++ b/angular/src/app/pipes/safe-html.pipe.ts @@ -0,0 +1,13 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; + +@Pipe({ + name: 'safeHtml', +}) +export class SafeHtmlPipe implements PipeTransform { + constructor(private sanitizer: DomSanitizer) {} + + transform(html: string) { + return this.sanitizer.bypassSecurityTrustHtml(html); + } +} diff --git a/angular/src/app/presentation-options/default-option/default-option.module.ts b/angular/src/app/presentation-options/default-option/default-option.module.ts index 58cbbf4..1e6c99d 100644 --- a/angular/src/app/presentation-options/default-option/default-option.module.ts +++ b/angular/src/app/presentation-options/default-option/default-option.module.ts @@ -22,7 +22,7 @@ import { DirectivesModule } from 'src/app/directives/directives.module'; import { LoyalityProgramComponent } from './pages/loyality-program/loyality-program.component'; import { MatButtonModule } from '@angular/material/button'; import { ToastModule } from 'primeng/toast'; - +import { SafeHtmlPipe } from 'src/app/pipes/safe-html.pipe'; @NgModule({ declarations: [ @@ -37,6 +37,7 @@ import { ToastModule } from 'primeng/toast'; LoginComponent, LoyalityProgramComponent, MenuItemComponent, + SafeHtmlPipe, ], imports: [ ToastModule, @@ -51,8 +52,8 @@ import { ToastModule } from 'primeng/toast'; ReactiveFormsModule, MatInputModule, DirectivesModule, - MatButtonModule + MatButtonModule, ], bootstrap: [IndexComponent], }) -export class DefaultOptionModule { } +export class DefaultOptionModule {} diff --git a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html index 97c9b26..0d1fe62 100644 --- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html +++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.html @@ -14,23 +14,26 @@

{{ authService.error ? '--' : Math.floor(authService.userInfo.walletBalances) }} - бонусов + бонусов

- + + + zoom_in + +
Покажи бариста
-

- {{getLevelDescription()}} -

+

diff --git a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss index f1ede8e..b0b6e6c 100644 --- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss +++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.scss @@ -1,4 +1,4 @@ -:host { +:host { .guest-card { display: flex; flex-direction: column; @@ -39,46 +39,42 @@ border-radius: 6px; align-items: center; display: flex; - flex-direction: column; - // background-image: linear-gradient( - // #008251 33%, - // transparent 0px, - // transparent 67%, - // #008251 0px - // ), - // linear-gradient( - // 90deg, - // #008251 33%, - // transparent 0px, - // transparent 66%, - // #008251 0px - // ), - // linear-gradient(#008251 33%, transparent 0px, transparent 67%, #008251 0), - // linear-gradient(90deg, #008251 33%, transparent 0, transparent 66%, #008251 0); - // background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px; - // background-position: 0 0, 0 0, 100% 100%, 100% 100%; - // background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; + flex-direction: column; cursor: pointer; + + .qr-code-wrapper { + position: relative; + } + + .zoom { + position: absolute; + + bottom: 5px; + right: -35px; + + color: var(--button-color); + } } &__user-description { padding: 14px 24px; p { - width: 60%; + width: 80%; text-align: center; margin: 0 auto; font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px; - letter-spacing: -0.5px; - } + letter-spacing: -0.5px; - .price, - .percent { - font-weight: bold; - } + #price, + .percent { + font-weight: bold; + color: var(--button-color); + } + } } &__purchases-description { diff --git a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.ts b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.ts index 8c26c35..31d5ece 100644 --- a/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.ts +++ b/angular/src/app/presentation-options/default-option/pages/guest-card/guest-card.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { MatBottomSheet } from '@angular/material/bottom-sheet'; import { ExitComponent } from 'src/app/components/exit/exit.component'; import { CookiesService } from 'src/app/services/cookies.service'; @@ -9,28 +9,28 @@ import { format } from 'src/app/utils'; const levelDescriptionsTable = [ [ - 'Поднимай свой уровень! Купи еще на {0}₽ и твой кешбек будет 6% с {1}!', - 'А ты хорош! Купи еще на {0}₽ и получай кешбек 10% с {1}', - 'Ты крут! Купи еще на {0}₽ и получай максимальный кешбек 15% с {1}', - 'Ты сделал это! Купи на {0}₽ и сохраняй максимальный кешбек 15% с {1}', + 'Поднимай свой уровень! Купи еще на {0}₽ и твой кешбек будет 6% с {1}!', + 'А ты хорош! Купи еще на {0}₽ и получай кешбек 10% с {1}', + 'Ты крут! Купи еще на {0}₽ и получай максимальный кешбек 15% с {1}', + 'Ты сделал это! Купи на {0}₽ и сохраняй максимальный кешбек 15% с {1}', ], [ - 'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!', - 'Ты можешь стать круче! Купи еще на {0}₽ и получай кешбек 10% с {1}', - 'Ого! Ты уже здесь! Хочешь еще больше кешбека? Купи на {0}₽ и получай максимальный кешбек 15% с {1}', - 'Ты потрясающий! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}', + 'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!', + 'Ты можешь стать круче! Купи еще на {0}₽ и получай кешбек 10% с {1}', + 'Ого! Ты уже здесь! Хочешь еще больше кешбека? Купи на {0}₽ и получай максимальный кешбек 15% с {1}', + 'Ты потрясающий! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}', ], [ - 'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!', - 'Ты вернулся на 2 уровень. Купи еще на {0}₽ и получай кешбек 10% с {1}', - 'Ты почти на последнем уровне! Купи на {0}₽ и получай максимальный кешбек 15% с {1}', - 'Ты лучший! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}', + 'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!', + 'Ты вернулся на 2 уровень. Купи еще на {0}₽ и получай кешбек 10% с {1}', + 'Ты почти на последнем уровне! Купи на {0}₽ и получай максимальный кешбек 15% с {1}', + 'Ты лучший! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}', ], [ - 'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!', - 'Ты вернулся на 2 уровень. Купи еще на {0}₽ и получай кешбек 10% с {1}', - 'Оу! Ты оказался на 3 уровне. Купи на {0}₽ и возвращай себе максимальный кешбек 15% с {1}', - 'Ты наш герой! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}', + 'Oops! Ты оказался на 1 уровне. Купи еще на {0}₽ и твой кешбек будет 6% с {1}!', + 'Ты вернулся на 2 уровень. Купи еще на {0}₽ и получай кешбек 10% с {1}', + 'Оу! Ты оказался на 3 уровне. Купи на {0}₽ и возвращай себе максимальный кешбек 15% с {1}', + 'Ты наш герой! Покупай на {0}₽ и сохраняй максимальный кешбек 15% с {1}', ], ]; diff --git a/angular/src/assets/970х250_3.png b/angular/src/assets/970х250_3.png index f523104..b01fb0d 100644 Binary files a/angular/src/assets/970х250_3.png and b/angular/src/assets/970х250_3.png differ diff --git a/angular/src/styles.scss b/angular/src/styles.scss index 9cf58a6..a69e93a 100644 --- a/angular/src/styles.scss +++ b/angular/src/styles.scss @@ -120,19 +120,19 @@ body { --text-color: #000000; --text-color_1: #8d8d8d; - --button-color: #28AF49 ; + --button-color: #005C50; --button-color_disabled: rgb(40, 175, 73, 0.9); --button-text-color: #ffffff; --button-text-color_disabled: #cccccc; - --main-color_hover: rgba(40, 175, 73, 0.6); + --main-color_hover: rgba(0, 92, 80, 0.3); } .mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid, .mat-focused) .mdc-notched-outline__trailing { - border-color: var(--main-color_hover) !important; + border-color: var(--main-color_2) !important; } .mat-mdc-outlined-button:not(:disabled) { @@ -144,7 +144,7 @@ body { } .mdc-text-field:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-floating-label { - color: var(--main-color_hover); + color: var(--main-color_2); } .mdc-text-field span {