diff --git a/.gitignore b/.gitignore index 448d1e6..50a0218 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ /tmp /out-tsc /bazel-out +/files # Node /node_modules diff --git a/files/changes.txt b/files/changes.txt new file mode 100644 index 0000000..8854db3 --- /dev/null +++ b/files/changes.txt @@ -0,0 +1,500 @@ +we ae going to redesing dexar. here are css from the figma. i will try to explain all. +pls do responsive and better! thank you + +you are free to do changes better and responsive ofc!! + +Header: +
+ +
+
Главная
+
О нас
+
Контакты
+
+
+
+
Искать...
+ +
+
+
+
+
RU
+
+
+
+
+ + .frame { + width: 1440px; + height: 84px; + display: flex; + background-color: #74787b1a; +} + +.frame .group { + margin-top: 18px; + width: 148px; + height: 48px; + position: relative; + margin-left: 56px; +} + +.frame .div { + display: inline-flex; + margin-top: 18px; + width: 569px; + height: 49px; + position: relative; + margin-left: 57px; + align-items: flex-start; +} + +.frame .div-wrapper { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 10px 48px; + position: relative; + flex: 0 0 auto; + background-color: #497671; + border-radius: 13px 0px 0px 13px; + border: 1px solid; + border-color: #d3dad9; + box-shadow: 0px 3px 4px #00000026; +} + +.frame .text-wrapper { + position: relative; + width: fit-content; + margin-top: -1.00px; + font-family: "DM Sans-SemiBold", Helvetica; + font-weight: 600; + color: #ffffff; + font-size: 22px; + text-align: center; + letter-spacing: 0; + line-height: normal; +} + +.frame .div-wrapper-2 { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 10px 63px; + position: relative; + flex: 0 0 auto; + background-color: #a1b4b5; + border: 1px solid; + border-color: #d3dad9; + box-shadow: 0px 3px 4px #00000026; +} + +.frame .div-wrapper-3 { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 10px 42px; + position: relative; + flex: 0 0 auto; + background-color: #ffffffbd; + border-radius: 0px 13px 13px 0px; + border: 1px solid; + border-color: #d3dad9; + box-shadow: 0px 3px 4px #00000026; +} + +.frame .text-wrapper-2 { + color: #1e3c38; + position: relative; + width: fit-content; + margin-top: -1.00px; + font-family: "DM Sans-SemiBold", Helvetica; + font-weight: 600; + font-size: 22px; + text-align: center; + letter-spacing: 0; + line-height: normal; +} + +.frame .frame-wrapper { + margin-top: 18px; + width: 234px; + height: 49px; + position: relative; + margin-left: 126px; + background-color: #ffffffbd; + border-radius: 22px; + border: 1px solid; + border-color: #d2dad9; + box-shadow: 0px 3px 4px #00000026; +} + +.frame .div-2 { + display: inline-flex; + align-items: center; + gap: 27px; + padding: 0px 20px; + position: relative; + top: 10px; + left: 50px; +} + +.frame .text-wrapper-3 { + color: #828e8d; + position: relative; + width: fit-content; + margin-top: -1.00px; + font-family: "DM Sans-SemiBold", Helvetica; + font-weight: 600; + font-size: 22px; + text-align: center; + letter-spacing: 0; + line-height: normal; +} + +.frame .icn { + position: absolute; + top: 1px; + left: -32px; + width: 28px; + height: 28px; +} + +.frame .korzina-frame { + margin-top: 26px; + width: 48px; + height: 32px; + position: relative; + margin-left: 57px; + background-color: #ffffff4c; + border-radius: 12px; + border: 1px solid; + border-color: #667a77; +} + +.frame .cart { + position: absolute; + top: calc(50.00% - 13px); + left: calc(50.00% - 14px); + width: 27px; + height: 27px; +} + +.frame .RU-frame { + display: flex; + margin-top: 26px; + width: 67px; + height: 32px; + position: relative; + margin-left: 4px; + align-items: center; + gap: 8px; + padding: 6px; + background-color: #ffffff4c; + border-radius: 12px; + border: 1px solid; + border-color: #667a77; +} + +.frame .text-wrapper-4 { + position: relative; + width: fit-content; + margin-top: -6.50px; + margin-bottom: -4.50px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + font-size: 24px; + letter-spacing: 0; + line-height: normal; +} + +.frame .group-2 { + position: relative; + width: 9.29px; + height: 14px; + transform: rotate(90.00deg); +} + +.frame .line { + top: -2px; + position: absolute; + left: 1px; + width: 9px; + height: 10px; + transform: rotate(-90.00deg); +} + +.frame .img { + top: 6px; + position: absolute; + left: 1px; + width: 9px; + height: 10px; + transform: rotate(-90.00deg); +} + +.frame .login-frame { + margin-top: 26px; + width: 48px; + height: 32px; + position: relative; + margin-left: 4px; + background-color: #ffffff4c; + border-radius: 12px; + border: 1px solid; + border-color: #667a77; +} + +.frame .icon { + position: absolute; + top: calc(50.00% - 12px); + left: calc(50.00% - 12px); + width: 24px; + height: 24px; +} + + + + +1. background: rgba(117, 121, 124, 0.1); + padding: 14px 0px; + width: 1440px; + height: 84px; +2. logo stays the + + + + + + + + + + + + + + + + + + + + + + +3. after logo 3 btns in same div and without gap + 3.1 "главная" + border: 1px solid #d3dad9; + border-radius: 13px 0 0 13px; + padding: 10px 48px; + width: 187px; + height: 49px; + 3.2 "о нас"border: + 1px solid #d3dad9; + padding: 10px 63px; + width: 188px; + height: 49px; + 3.3 "котакты"border: + 1px solid #d3dad9; + border-radius: 0 13px 13px 0; + padding: 10px 42px; + width: 194px; + height: 49px; + + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + background: rgba(255, 255, 255, 0.74); + hover: background: #a1b4b5; + active : background: #497671; + + +4. next search btn with place holder "искать..." and on the left fixed svg icon " + + +" + border: 1px solid #d3dad9; +border-radius: 22px; +padding: 6px 10px; +width: 234px; +height: 49px; +box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); +background: rgba(255, 255, 255, 0.74); + + +5. after 3 buttons to the right + 5.1 cart btn + border-radius: 12px; + fill: rgba(255, 255, 255, 0.3); + border: 1px solid #677b78; + + + + + + + + 5.2 lang selector btn style border: 1px solid #677b78; + border-radius: 12px; + padding: 6px; + width: 67px; + height: 32px; + + +HERO + we are goung to have a width wide hero, photos for dekstop and mobile you can see in the same folder + + on it text. here are codes from figma +
+
Здесь ты найдёшь всё
+

Тысячи товаров в одном месте

+
просто и удобно
+
+ + .frame { + display: flex; + flex-direction: column; + width: 639px; + align-items: flex-start; + gap: 18px; + position: relative; +} + +.frame .text-wrapper { + position: relative; + width: 659px; + margin-top: -1.00px; + margin-right: -20.00px; + font-size: 57px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + letter-spacing: 0; + line-height: normal; +} + +.frame .div { + position: absolute; + top: 87px; + left: 0; + width: 581px; + font-size: 34px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + letter-spacing: 0; + line-height: normal; +} + +.frame .text-wrapper-2 { + position: absolute; + top: 133px; + left: 0; + width: 281px; + font-size: 34px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + letter-spacing: 0; + line-height: normal; +} + + + +under the text we have btns.. hovers and actives for all web site are the same as from header + +first +
Перейти в каталог
+ .pereyti-v-katalog { + width: 337px; + height: 60px; + display: flex; + border-radius: 13px; + border: 1px solid; + border-color: #d3dad9; + background: linear-gradient( + 360deg, + rgba(73, 118, 113, 1) 0%, + rgba(167, 206, 202, 1) 100% + ); +} + +.pereyti-v-katalog .text-wrapper { + margin-top: 12px; + width: 269px; + height: 36px; + margin-left: 34px; + position: relative; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #ffffff; + font-size: 27px; + text-align: center; + letter-spacing: 1.08px; + line-height: normal; +} + + +second btn +
+
Найти товар
+
+
+ + .frame { + width: 264px; + height: 60px; + display: flex; + gap: 9.2px; + background-color: #f5f5f5; + border-radius: 13px; + border: 1px solid; + border-color: #d3dad9; +} + +.frame .text-wrapper { + margin-top: 12px; + width: 181px; + height: 36px; + position: relative; + margin-left: 36px; + font-family: "DM Sans-Medium", Helvetica; + font-weight: 500; + color: #1e3c38; + font-size: 27px; + text-align: center; + letter-spacing: 1.08px; + line-height: normal; +} + +.frame .group { + margin-top: 22.0px; + width: 10.62px; + height: 16px; + position: relative; +} + +.frame .line { + top: -1px; + width: 12px; + position: absolute; + left: 1px; + height: 10px; +} + +.frame .img { + top: 7px; + width: 11px; + position: absolute; + left: 1px; + height: 10px; +} \ No newline at end of file diff --git a/public/assets/images/dexar-logo-small.svg b/public/assets/images/dexar-logo-small.svg new file mode 100644 index 0000000..e2a68e3 --- /dev/null +++ b/public/assets/images/dexar-logo-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/dexar-logo.svg b/public/assets/images/dexar-logo.svg index 64f136a..93232d4 100644 --- a/public/assets/images/dexar-logo.svg +++ b/public/assets/images/dexar-logo.svg @@ -1 +1 @@ -DEXARMARKET \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/images/footer_bg.webp b/public/assets/images/footer_bg.webp new file mode 100644 index 0000000..6e88a8e Binary files /dev/null and b/public/assets/images/footer_bg.webp differ diff --git a/public/assets/images/footer_bg_mobile.webp b/public/assets/images/footer_bg_mobile.webp new file mode 100644 index 0000000..61240ee Binary files /dev/null and b/public/assets/images/footer_bg_mobile.webp differ diff --git a/public/assets/images/hero_background_desktop.webp b/public/assets/images/hero_background_desktop.webp new file mode 100644 index 0000000..d395b05 Binary files /dev/null and b/public/assets/images/hero_background_desktop.webp differ diff --git a/public/assets/images/hero_background_mobile.webp b/public/assets/images/hero_background_mobile.webp new file mode 100644 index 0000000..68dd8a7 Binary files /dev/null and b/public/assets/images/hero_background_mobile.webp differ diff --git a/public/favicon.svg b/public/favicon.svg index 6bf73e1..e2a68e3 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/icons/icon-128x128.png b/public/icons/icon-128x128.png deleted file mode 100644 index 5a9a2cc..0000000 Binary files a/public/icons/icon-128x128.png and /dev/null differ diff --git a/public/icons/icon-144x144.png b/public/icons/icon-144x144.png deleted file mode 100644 index 11702cd..0000000 Binary files a/public/icons/icon-144x144.png and /dev/null differ diff --git a/public/icons/icon-152x152.png b/public/icons/icon-152x152.png deleted file mode 100644 index ff4e06b..0000000 Binary files a/public/icons/icon-152x152.png and /dev/null differ diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png deleted file mode 100644 index afd36a4..0000000 Binary files a/public/icons/icon-192x192.png and /dev/null differ diff --git a/public/icons/icon-384x384.png b/public/icons/icon-384x384.png deleted file mode 100644 index 613ac79..0000000 Binary files a/public/icons/icon-384x384.png and /dev/null differ diff --git a/public/icons/icon-512x512.png b/public/icons/icon-512x512.png deleted file mode 100644 index 7574990..0000000 Binary files a/public/icons/icon-512x512.png and /dev/null differ diff --git a/public/icons/icon-72x72.png b/public/icons/icon-72x72.png deleted file mode 100644 index 033724e..0000000 Binary files a/public/icons/icon-72x72.png and /dev/null differ diff --git a/public/icons/icon-96x96.png b/public/icons/icon-96x96.png deleted file mode 100644 index 3090dc2..0000000 Binary files a/public/icons/icon-96x96.png and /dev/null differ diff --git a/src/app/app.html b/src/app/app.html index e8a2757..3b4e3f4 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -16,6 +16,9 @@ } @else { + @if (!isHomePage()) { + + }
diff --git a/src/app/app.ts b/src/app/app.ts index 48d8486..e5fdde7 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,19 +1,20 @@ import { Component, OnInit, OnDestroy, signal, ApplicationRef } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterOutlet } from '@angular/router'; +import { Router, RouterOutlet, NavigationEnd } from '@angular/router'; import { Title } from '@angular/platform-browser'; import { HeaderComponent } from './components/header/header.component'; import { FooterComponent } from './components/footer/footer.component'; +import { BackButtonComponent } from './components/back-button/back-button.component'; import { ApiService } from './services'; import { Subscription, interval, concat } from 'rxjs'; -import { first } from 'rxjs/operators'; +import { filter, first } from 'rxjs/operators'; import { environment } from '../environments/environment'; import { SwUpdate } from '@angular/service-worker'; @Component({ selector: 'app-root', - imports: [RouterOutlet, HeaderComponent, FooterComponent, CommonModule], + imports: [RouterOutlet, HeaderComponent, FooterComponent, BackButtonComponent, CommonModule], templateUrl: './app.html', styleUrl: './app.scss' }) @@ -21,14 +22,17 @@ export class App implements OnInit, OnDestroy { protected title = environment.brandName; serverAvailable = signal(true); checkingServer = signal(true); + isHomePage = signal(true); private pingSubscription?: Subscription; private updateSubscription?: Subscription; + private routerSubscription?: Subscription; constructor( private apiService: ApiService, private titleService: Title, private swUpdate: SwUpdate, - private appRef: ApplicationRef + private appRef: ApplicationRef, + private router: Router ) {} ngOnInit(): void { @@ -36,6 +40,14 @@ export class App implements OnInit, OnDestroy { this.titleService.setTitle(`${environment.brandFullName} - Маркетплейс товаров и услуг`); this.checkServerHealth(); this.setupAutoUpdates(); + + // Track route changes to show/hide back button + this.routerSubscription = this.router.events + .pipe(filter(event => event instanceof NavigationEnd)) + .subscribe((event) => { + const url = (event as NavigationEnd).urlAfterRedirects || (event as NavigationEnd).url; + this.isHomePage.set(url === '/' || url === '/home' || url === ''); + }); } checkServerHealth(): void { @@ -84,6 +96,7 @@ export class App implements OnInit, OnDestroy { ngOnDestroy(): void { this.pingSubscription?.unsubscribe(); this.updateSubscription?.unsubscribe(); + this.routerSubscription?.unsubscribe(); } retryConnection(): void { diff --git a/src/app/components/back-button/back-button.component.ts b/src/app/components/back-button/back-button.component.ts new file mode 100644 index 0000000..ba2dbb0 --- /dev/null +++ b/src/app/components/back-button/back-button.component.ts @@ -0,0 +1,69 @@ +import { Component } from '@angular/core'; +import { Location } from '@angular/common'; +import { environment } from '../../../environments/environment'; + +@Component({ + selector: 'app-back-button', + standalone: true, + template: ` + @if (!isnovo) { + + } + `, + styles: [` + .dexar-back-btn { + position: fixed; + top: 76px; + left: 20px; + z-index: 100; + background: none; + border: none; + cursor: pointer; + padding: 4px; + transition: transform 0.2s ease; + + svg path { + transition: fill 0.2s ease, fill-opacity 0.2s ease; + } + + &:hover { + transform: scale(1.08); + + svg path { + fill: #A1B4B5; + fill-opacity: 1; + } + } + + &:active { + transform: scale(0.95); + } + } + + @media (max-width: 768px) { + .dexar-back-btn { + top: 68px; + left: 12px; + + svg { + width: 30px; + height: 20px; + } + } + } + `] +}) +export class BackButtonComponent { + isnovo = environment.theme === 'novo'; + + constructor(private location: Location) {} + + goBack(): void { + this.location.back(); + } +} diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html index 82d59ad..955ae27 100644 --- a/src/app/components/footer/footer.component.html +++ b/src/app/components/footer/footer.component.html @@ -49,49 +49,60 @@ } @else { - -
-
-
-

Информация

-
    -
  • О компании
    • -
  • Контакты
    • -
  • Реквизиты организации
    • -
-
+ +
+
+
+
+
+ Dexar + Dexar +
+ +
+
+

Информация

+
    +
  • О компании
    • +
  • Контакты
    • +
  • Реквизиты
    • +
+
-
-

Документы

-
    -
  • Правила оплаты
    • -
  • Политика возврата
    • -
  • Публичная оферта
    • -
  • Политика конфиденциальности
    • -
-
+
+

Документы

+
    +
  • Правила оплаты
    • +
  • Политика возврата
    • +
  • Публичная оферта
    • +
  • Конфиденциальность
    • +
+
-
-

Помощь

-
    -
  • Часто задаваемые вопросы
    • -
  • Доставка
    • -
  • Гарантия
    • -
-
+
+

Помощь

+
    +
  • FAQ
    • +
  • Доставка
    • +
  • Гарантия
    • +
+
-
-

Способы оплаты

-
- МИР - Visa - Mastercard +
+

Оплата

+
+ МИР + Visa + Mastercard +
+
+
+
+ +
+

© {{ currentYear }} {{ brandName }}. Все права защищены.

- -
-

© {{ currentYear }} {{ brandName }}. Все права защищены.

-
} diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss index 0939477..30785d4 100644 --- a/src/app/components/footer/footer.component.scss +++ b/src/app/components/footer/footer.component.scss @@ -1,4 +1,9 @@ -.footer { +:host { + display: block; + width: 100%; +} + +.footer { background-color: #1a1a1a; color: #ffffff; margin-top: auto; @@ -217,3 +222,196 @@ text-align: center; } } + +// ========== DEXAR FOOTER STYLES ========== +.dexar-footer { + margin-top: auto; +} + +.dexar-footer-bg { + background-image: url('/assets/images/footer_bg.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: rgba(30, 60, 56, 0.85); + } +} + +.dexar-footer-container { + position: relative; + z-index: 1; + max-width: 1440px; + margin: 0 auto; + padding: 48px 40px 24px; +} + +.dexar-footer-top { + display: flex; + gap: 48px; + padding-bottom: 32px; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} + +.dexar-footer-logo { + flex-shrink: 0; + display: flex; + align-items: flex-start; + padding-top: 4px; + + .dexar-footer-logo-desktop { + display: block; + height: 40px; + width: auto; + filter: brightness(0) invert(1); + } + + .dexar-footer-logo-mobile { + display: none; + height: 32px; + width: auto; + filter: brightness(0) invert(1); + } +} + +.dexar-footer-columns { + flex: 1; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 32px; +} + +.dexar-footer-col { + h4 { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 15px; + font-weight: 600; + color: #ffffff; + margin: 0 0 16px 0; + } + + ul { + list-style: none; + padding: 0; + margin: 0; + + li { + margin-bottom: 10px; + + a { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 13px; + font-weight: 400; + color: rgba(255, 255, 255, 0.7); + text-decoration: none; + transition: color 0.2s ease; + + &:hover { + color: #ffffff; + } + } + } + } +} + +.dexar-payment-logos { + display: flex; + gap: 10px; + flex-wrap: wrap; + align-items: center; + + img { + height: 28px; + max-height: 28px; + width: auto; + max-width: 60px; + background: rgba(255, 255, 255, 0.9); + padding: 4px 8px; + border-radius: 4px; + transition: opacity 0.2s; + object-fit: contain; + + &:hover { + opacity: 0.85; + } + } +} + +.dexar-footer-bottom { + padding: 20px 0 0; + text-align: center; + + p { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 12px; + color: rgba(255, 255, 255, 0.5); + margin: 0; + } +} + +// Responsive +@media (max-width: 992px) { + .dexar-footer-container { + padding: 40px 32px 20px; + } + + .dexar-footer-top { + flex-direction: column; + gap: 32px; + } + + .dexar-footer-columns { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .dexar-footer-bg { + background-image: url('/assets/images/footer_bg_mobile.webp'); + } + + .dexar-footer-container { + padding: 32px 20px 16px; + } + + .dexar-footer-logo { + .dexar-footer-logo-desktop { + display: none; + } + + .dexar-footer-logo-mobile { + display: block; + } + } + + .dexar-footer-columns { + grid-template-columns: repeat(2, 1fr); + gap: 24px; + } + + .dexar-footer-col h4 { + font-size: 14px; + margin-bottom: 12px; + } + + .dexar-footer-col ul li a { + font-size: 12px; + } +} + +@media (max-width: 480px) { + .dexar-footer-container { + padding: 24px 16px 12px; + } + + .dexar-footer-columns { + grid-template-columns: repeat(2, 1fr); + gap: 16px; + } +} diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index daf4053..dd7fbcc 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -49,48 +49,131 @@
} @else { - -
-
- + +
+
+ + - -
- - 🏠 - Главная - - - 🔍 - Поиск - - - 🛒 - Корзина - @if (cartItemCount() > 0) { - {{ cartItemCount() }} - } - + +
+
+ + Главная + + + О нас + + + Контакты + +
- - 🛒 - @if (cartItemCount() > 0) { - {{ cartItemCount() }} - } - - -
- + +
+
+ + + + + +
- + + +
+ + + + + + + + @if (cartItemCount() > 0) { + {{ cartItemCount() }} + } + + + +
+ +
+ + + +
+ + + @if (menuOpen) { +
+ } + + +
+ + + + + Главная + + + + + + + + + + Каталог + + + + + + + + + + + + О нас + + + + + + + + + + Контакты + + + + + + +
+ +
+
} diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index abd4280..d90e12b 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -78,12 +78,12 @@ &:hover { color: var(--primary-hover); - background: rgba(85, 104, 211, 0.05); + background: rgba(73, 118, 113, 0.05); } &.active { color: var(--primary-hover); - background: rgba(85, 104, 211, 0.1); + background: rgba(73, 118, 113, 0.1); font-weight: 600; } } @@ -183,11 +183,11 @@ } &:hover { - background: rgba(85, 104, 211, 0.05); + background: rgba(73, 118, 113, 0.05); } &.active { - background: rgba(85, 104, 211, 0.1); + background: rgba(73, 118, 113, 0.1); } } @@ -449,3 +449,474 @@ font-size: 1.1rem; } } + +// ========== DEXAR REDESIGN 2026 STYLES ========== +.dexar-header { + background: rgba(117, 121, 124, 0.1); + padding: 8px 0; + position: sticky; + top: 0; + z-index: 1000; + backdrop-filter: blur(10px); + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; +} + +.dexar-header-container { + max-width: 1440px; + margin: 0 auto; + padding: 0 40px; + display: flex; + align-items: center; + gap: 32px; + height: 48px; +} + +.dexar-logo { + display: flex; + align-items: center; + text-decoration: none; + flex-shrink: 0; + + ::ng-deep .logo-img { + width: 120px; + height: 38px; + object-fit: contain; + } +} + +// Navigation Buttons Group +.dexar-nav { + display: flex; + flex-shrink: 0; +} + +.dexar-nav-group { + display: flex; + align-items: center; +} + +.dexar-nav-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 6px 32px; + height: 38px; + border: 1px solid #d3dad9; + background: rgba(255, 255, 255, 0.74); + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: 15px; + color: #1e3c38; + text-decoration: none; + cursor: pointer; + transition: background 0.3s ease; + white-space: nowrap; + + &:hover { + background: #a1b4b5; + color: #1e3c38; + } + + &.dexar-active { + background: #497671; + color: #ffffff; + } +} + +.dexar-nav-btn-left { + border-radius: 10px 0 0 10px; + padding: 6px 32px; +} + +.dexar-nav-btn-middle { + padding: 6px 40px; + border-left: none; +} + +.dexar-nav-btn-right { + border-radius: 0 10px 10px 0; + padding: 6px 28px; + border-left: none; +} + +// Search Box +.dexar-search-wrapper { + flex: 1; + max-width: 200px; + margin-left: auto; +} + +.dexar-search-box { + position: relative; + width: 100%; + height: 38px; + background: rgba(255, 255, 255, 0.74); + border: 1px solid #d2dad9; + border-radius: 19px; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12); + display: flex; + align-items: center; + padding: 0 14px; + gap: 8px; +} + +.dexar-search-icon { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.dexar-search-input { + flex: 1; + border: none; + background: transparent; + outline: none; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: 15px; + color: #828e8d; + cursor: pointer; + + &::placeholder { + color: #828e8d; + } +} + +// Actions +.dexar-actions { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.dexar-cart-btn { + position: relative; + width: 36px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + cursor: pointer; + transition: opacity 0.3s ease; + + svg { + width: 36px; + height: 28px; + } + + &:hover { + opacity: 0.85; + } + + &.dexar-cart-active { + opacity: 1; + } +} + +.dexar-cart-badge { + position: absolute; + top: -8px; + right: -10px; + background: #497671; + color: #ffffff; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 700; + font-size: 10px; + line-height: 1; + width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.dexar-lang-selector { + display: flex; + align-items: center; +} + +// Mobile Menu Backdrop +.dexar-menu-backdrop { + display: none; +} + +// Mobile Menu Panel +.dexar-mobile-menu { + display: none; +} + +// Mobile Menu Items +.dexar-mobile-item { + display: flex; + align-items: center; + gap: 14px; + width: 395px; + max-width: 100%; + height: 42px; + padding: 15px 26px; + background: #e9edf1; + border: 1px solid #d3dad9; + border-radius: 13px; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + font-family: 'DM Sans', sans-serif; + font-size: 16px; + font-weight: 500; + color: #1e3c38; + text-decoration: none; + cursor: pointer; + transition: background 0.2s ease, transform 0.15s ease; + box-sizing: border-box; + + &:hover { + background: #dce2e7; + transform: translateY(-1px); + } + + &:active { + transform: translateY(0); + } + + svg:first-child { + flex-shrink: 0; + width: 24px; + height: 24px; + } + + span { + flex: 1; + } + + .dexar-mobile-chevron { + flex-shrink: 0; + margin-left: auto; + } +} + +.dexar-mobile-lang { + display: flex; + align-items: center; + justify-content: center; + margin-top: 16px; +} + +.dexar-menu-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 8px; + + span { + width: 25px; + height: 3px; + background: #1e3c38; + border-radius: 2px; + transition: all 0.3s; + } + + &.active { + span:nth-child(1) { + transform: rotate(45deg) translate(7px, 4.5px); + } + + span:nth-child(2) { + opacity: 0; + } + + span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -4.5px); + } + } +} + +// Mobile Search Icon +.dexar-search-mobile { + display: none; + align-items: center; + justify-content: center; + background: none; + border: none; + cursor: pointer; + padding: 6px; + margin-left: auto; + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.7; + } +} + +// Responsive Design +@media (max-width: 1200px) { + .dexar-header-container { + padding: 0 32px; + gap: 32px; + } + + .dexar-nav-btn { + font-size: 18px; + padding: 8px 32px !important; + } + + .dexar-nav-btn-left { + padding: 8px 32px !important; + } + + .dexar-nav-btn-middle { + padding: 8px 40px !important; + } + + .dexar-nav-btn-right { + padding: 8px 28px !important; + } +} + +@media (max-width: 992px) { + .dexar-header-container { + padding: 0 20px; + gap: 20px; + } + + .dexar-logo ::ng-deep .logo-img { + width: 120px; + height: 40px; + } + + .dexar-nav-btn { + font-size: 16px; + padding: 8px 24px !important; + } + + .dexar-nav-btn-left { + padding: 8px 24px !important; + } + + .dexar-nav-btn-middle { + padding: 8px 28px !important; + } + + .dexar-nav-btn-right { + padding: 8px 20px !important; + } + + .dexar-search-box { + height: 42px; + } + + .dexar-search-input { + font-size: 18px; + } +} + +@media (max-width: 768px) { + .dexar-header-container { + gap: 12px; + padding: 0 16px; + } + + // Hide desktop nav + .dexar-nav { + display: none; + } + + // Hide desktop language selector + .dexar-lang-desktop { + display: none; + } + + .dexar-search-wrapper { + display: none; + } + + .dexar-search-mobile { + display: flex; + } + + .dexar-menu-toggle { + display: flex; + } + + .dexar-logo ::ng-deep .logo-img { + width: 100px; + height: 32px; + } + + // Mobile Menu Backdrop — full-screen, blurred, blocks interaction + .dexar-menu-backdrop { + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.35); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + z-index: 998; + animation: dexar-fade-in 0.25s ease; + } + + // Mobile Menu Panel + .dexar-mobile-menu { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + position: fixed; + top: 84px; + right: 0; + width: 485px; + max-width: 100vw; + padding: 28px 20px 32px; + background: rgba(245, 242, 249, 0.93); + border-radius: 0 0 13px 13px; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25); + z-index: 999; + box-sizing: border-box; + + // Hide by default, animate in + max-height: 0; + padding-top: 0; + padding-bottom: 0; + overflow: hidden; + opacity: 0; + transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease; + + &.dexar-mobile-menu-open { + max-height: 576px; + padding: 28px 20px 32px; + opacity: 1; + } + } + + .dexar-mobile-item { + width: 395px; + max-width: 100%; + } + + .dexar-mobile-lang { + margin-top: 16px; + } +} + +@media (max-width: 480px) { + .dexar-mobile-menu { + width: 100vw; + border-radius: 0 0 13px 13px; + } + + .dexar-mobile-item { + width: 100%; + } +} + +@keyframes dexar-fade-in { + from { opacity: 0; } + to { opacity: 1; } +} diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index f879bde..7ee0c93 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterLink, RouterLinkActive } from '@angular/router'; +import { Router, RouterLink, RouterLinkActive } from '@angular/router'; import { CartService } from '../../services'; import { environment } from '../../../environments/environment'; import { LogoComponent } from '../logo/logo.component'; @@ -20,15 +20,21 @@ export class HeaderComponent { logo = environment.logo; isnovo = environment.theme === 'novo'; - constructor(private cartService: CartService) { + constructor(private cartService: CartService, private router: Router) { this.cartItemCount = this.cartService.itemCount; } toggleMenu(): void { this.menuOpen = !this.menuOpen; + document.body.classList.toggle('dexar-menu-open', this.menuOpen); } closeMenu(): void { this.menuOpen = false; + document.body.classList.remove('dexar-menu-open'); + } + + navigateToSearch(): void { + this.router.navigate(['/search']); } } diff --git a/src/app/components/items-carousel/items-carousel.component.html b/src/app/components/items-carousel/items-carousel.component.html index e0964ff..534ee39 100644 --- a/src/app/components/items-carousel/items-carousel.component.html +++ b/src/app/components/items-carousel/items-carousel.component.html @@ -20,17 +20,22 @@
@if (product.discount > 0) { -
-{{ product.discount }}%
+ -{{ product.discount }}% }

{{ product.name }}

-
- ⭐ {{ product.rating }} + @if (product.rating) { +
+ + + + {{ product.rating }} ({{ product.callbacks?.length || 0 }}) -
+
+ }
@@ -42,16 +47,15 @@ }
-
diff --git a/src/app/components/items-carousel/items-carousel.component.scss b/src/app/components/items-carousel/items-carousel.component.scss index 9c37b57..10e689e 100644 --- a/src/app/components/items-carousel/items-carousel.component.scss +++ b/src/app/components/items-carousel/items-carousel.component.scss @@ -3,6 +3,7 @@ padding: 2rem 0; max-width: 1400px; margin: 0 auto; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; ::ng-deep { // PrimeNG carousel wrapper @@ -21,8 +22,8 @@ height: 3rem; border-radius: 50%; background: white; - border: 2px solid #e5e7eb; - color: #374151; + border: 2px solid #d3dad9; + color: #1e3c38; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); align-self: center; @@ -31,13 +32,13 @@ &:hover { background: #f9fafb; - border-color: #d1d5db; + border-color: #d3dad9; transform: scale(1.05); } &:not(:disabled):hover { - background: var(--primary-color, #5568d3); - border-color: var(--primary-color, #5568d3); + background: var(--primary-color, #497671); + border-color: var(--primary-color, #497671); color: white; } } @@ -63,7 +64,7 @@ flex-shrink: 0; } - // Pagination dots - using actual PrimeNG rendered classes + // Pagination dots .p-carousel-indicator-list { display: flex !important; justify-content: center !important; @@ -79,20 +80,20 @@ width: 12px !important; height: 12px !important; border-radius: 50% !important; - background-color: #d1d5db !important; + background-color: #d3dad9 !important; border: 0 !important; padding: 0 !important; cursor: pointer !important; transition: all 0.3s ease !important; &:hover { - background-color: #9ca3af !important; + background-color: #a1b4b5 !important; transform: scale(1.2); } } &.p-carousel-indicator-active .p-carousel-indicator-button { - background-color: var(--primary-color, #5568d3) !important; + background-color: var(--primary-color, #497671) !important; width: 32px !important; border-radius: 6px !important; } @@ -106,14 +107,14 @@ .carousel-empty { text-align: center; padding: 3rem 1rem; - color: #666; + color: #697777; .spinner { width: 40px; height: 40px; margin: 0 auto 1rem; border: 4px solid #f3f3f3; - border-top: 4px solid var(--primary-color, #5568d3); + border-top: 4px solid var(--primary-color, #497671); border-radius: 50%; animation: spin 1s linear infinite; } @@ -124,13 +125,14 @@ 100% { transform: rotate(360deg); } } -// Item card styles matching your existing design +// Item card styles .item-card { - background: white; - border-radius: 12px; + background: #ffffff; + border-radius: 13px; + border: 1px solid #d3dad9; overflow: hidden; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); + transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative; height: 100%; display: flex; @@ -140,7 +142,7 @@ margin: 0 auto; &:hover { - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); + box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); transform: translateY(-4px); } } @@ -156,82 +158,86 @@ .item-image { position: relative; width: 100%; - height: 140px; + height: 170px; overflow: hidden; - background: #f5f5f5; - border-radius: 12px; + background: #f5f3f9; img { width: 100%; height: 100%; object-fit: contain; - background: white; - padding: 10px; - transition: transform 0.3s ease, filter 0.3s ease; - filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); + padding: 12px; + transition: transform 0.4s ease; + box-sizing: border-box; } - &:hover img { - transform: scale(1.08); - filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12)) brightness(1.05); + .item-card:hover & img { + transform: scale(1.06); } } .discount-badge { position: absolute; - top: 12px; - right: 12px; - background: #e74c3c; + top: 10px; + left: 10px; + background: #ef4444; color: white; - padding: 0.4rem 0.8rem; - border-radius: 6px; - font-size: 0.875rem; + padding: 4px 10px; + border-radius: 20px; + font-family: "DM Sans", sans-serif; + font-size: 0.75rem; font-weight: 700; - z-index: 10; + letter-spacing: 0.02em; + z-index: 2; + line-height: 1.3; } - - .item-details { - padding: 0.625rem; + padding: 12px 14px 14px; display: flex; flex-direction: column; - gap: 0.375rem; + gap: 6px; flex: 1; } .item-name { + font-family: "DM Sans", sans-serif; font-size: 0.8125rem; font-weight: 600; margin: 0; - line-height: 1.3; - min-height: 2.6em; + line-height: 1.35; + min-height: 2.2em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - color: #1a1a1a; + color: #1e3c38; transition: color 0.2s; - &:hover { - color: var(--primary-color, #5568d3); + .item-card:hover & { + color: #497671; } } .item-rating { display: flex; align-items: center; - gap: 0.25rem; + gap: 4px; + font-family: "DM Sans", sans-serif; font-size: 0.75rem; - .rating-stars { - color: #fbbf24; + svg { + flex-shrink: 0; + } + + .rating-value { font-weight: 600; + color: #1e3c38; } .rating-count { - color: #6b7280; + color: #697777; } } @@ -239,42 +245,47 @@ display: flex; align-items: center; justify-content: space-between; - gap: 0.5rem; + gap: 8px; + margin-top: auto; + padding-top: 4px; } .item-price { display: flex; align-items: baseline; - gap: 0.375rem; + gap: 6px; flex-wrap: wrap; flex: 1; + font-family: "DM Sans", sans-serif; .current-price, .discounted-price { font-size: 0.9375rem; font-weight: 700; - color: #1a1a1a; + color: #1e3c38; } .discounted-price { - color: #e74c3c; + color: #ef4444; } .original-price { - font-size: 0.8125rem; - color: #9ca3af; + font-size: 0.75rem; + color: #a1b4b5; text-decoration: line-through; } } .cart-icon-btn { - padding: 0.5rem; - background: var(--primary-color, #5568d3); + width: 36px; + height: 36px; + padding: 0; + background: #497671; color: white; border: none; - border-radius: 8px; + border-radius: 10px; cursor: pointer; - transition: all 0.3s ease; + transition: background 0.2s ease, transform 0.15s ease; display: flex; align-items: center; justify-content: center; @@ -282,11 +293,13 @@ svg { display: block; + width: 18px; + height: 18px; } &:hover { - background: var(--primary-hover, #4456b3); - transform: scale(1.05); + background: #3d635f; + transform: scale(1.08); } &:active { @@ -301,14 +314,14 @@ .p-carousel-prev, .p-carousel-next { &:not(:disabled):hover { - background: var(--primary-color, #5568d3); - border-color: var(--primary-color, #5568d3); + background: var(--primary-color, #497671); + border-color: var(--primary-color, #497671); } } .p-carousel-indicators { .p-carousel-indicator.p-highlight button { - background: var(--primary-color, #5568d3); + background: var(--primary-color, #497671); } } } @@ -319,10 +332,10 @@ } .cart-icon-btn { - background: var(--primary-color, #5568d3); + background: var(--primary-color, #497671); &:hover { - background: var(--primary-hover, #4456b3); + background: var(--primary-hover, #3d635f); } } } @@ -334,27 +347,27 @@ } .item-image { - height: 220px; + height: 160px; } } @media (max-width: 640px) { .item-image { - height: 200px; + height: 150px; } .item-details { - padding: 1rem; + padding: 10px 12px 12px; } .item-name { - font-size: 0.9rem; + font-size: 0.8125rem; } .item-price { .current-price, .discounted-price { - font-size: 1.125rem; + font-size: 1rem; } } } diff --git a/src/app/components/language-selector/language-selector.component.scss b/src/app/components/language-selector/language-selector.component.scss index b6e9120..baeb1e3 100644 --- a/src/app/components/language-selector/language-selector.component.scss +++ b/src/app/components/language-selector/language-selector.component.scss @@ -152,6 +152,74 @@ } } +// Dexar header specific styles +:host-context(.dexar-header), +:host-context(.dexar-mobile-menu) { + .language-selector { + width: 56px; + height: 28px; + } + + .language-button { + width: 100%; + height: 100%; + padding: 4px; + gap: 4px; + background: rgba(255, 255, 255, 0.3); + border: 1px solid #677b78; + border-radius: 8px; + color: #1e3c38; + justify-content: center; + + &:hover { + background: rgba(255, 255, 255, 0.5); + border-color: #677b78; + } + + .language-flag { + display: none; + } + + .language-code { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 15px; + color: #1e3c38; + letter-spacing: 0; + line-height: 1; + } + + .dropdown-arrow { + display: block; + width: 7px; + height: 10px; + opacity: 1; + + path { + stroke: #1e3c38; + } + } + } + + .language-dropdown { + background: #ffffff; + border-color: #d3dad9; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + } + + .language-option { + color: #1e3c38; + + &:hover:not(.disabled) { + background: rgba(161, 180, 181, 0.2); + } + + &.active { + background: rgba(73, 118, 113, 0.1); + } + } +} + // Mobile responsiveness @media (max-width: 768px) { .language-button { @@ -177,4 +245,16 @@ height: 20px; } } + + :host-context(.dexar-header), + :host-context(.dexar-mobile-menu) { + .language-selector { + width: 56px; + height: 28px; + } + + .language-button .language-code { + font-size: 18px; + } + } } diff --git a/src/app/components/logo/logo.component.ts b/src/app/components/logo/logo.component.ts index 17eb7b2..02ae181 100644 --- a/src/app/components/logo/logo.component.ts +++ b/src/app/components/logo/logo.component.ts @@ -4,11 +4,12 @@ import { environment } from '../../../environments/environment'; @Component({ selector: 'app-logo', standalone: true, - template: ``, + template: ``, styles: [` .logo-img { - height: 40px; - width: auto; + width: 100%; + height: 100%; + object-fit: contain; } `] }) diff --git a/src/app/models/category.model.ts b/src/app/models/category.model.ts index 764eca1..230096f 100644 --- a/src/app/models/category.model.ts +++ b/src/app/models/category.model.ts @@ -3,4 +3,5 @@ export interface Category { name: string; parentID: number; icon?: string; + wideBanner?: string; } diff --git a/src/app/pages/cart/cart.component.scss b/src/app/pages/cart/cart.component.scss index 9e57c5c..38040e2 100644 --- a/src/app/pages/cart/cart.component.scss +++ b/src/app/pages/cart/cart.component.scss @@ -2,8 +2,9 @@ .cart-container.dexar { max-width: 1200px; margin: 0 auto; - padding: 20px; + padding: 24px; min-height: calc(100vh - 200px); + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } // Novo theme - Modern green design @@ -16,38 +17,44 @@ } .cart-container.dexar .cart-header { - margin-bottom: 24px; + margin-bottom: 28px; display: flex; justify-content: space-between; align-items: center; h1 { - font-size: 1.75rem; - font-weight: 600; - color: #1a1a1a; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 2rem; + font-weight: 700; + color: #1e3c38; margin: 0; } .clear-cart-btn { - padding: 8px 16px; - background: #ef4444; - color: white; - border: none; - border-radius: 8px; + padding: 10px 20px; + background: transparent; + color: #697777; + border: 1px solid #d3dad9; + border-radius: 13px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.9rem; - font-weight: 500; + font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; - gap: 6px; + gap: 8px; svg { - display: none; + display: block; + width: 16px; + height: 16px; } &:hover { - background: #dc2626; + background: #fef2f2; + border-color: #ef4444; + color: #ef4444; transform: translateY(-1px); } @@ -114,41 +121,51 @@ justify-content: center; padding: 80px 20px; text-align: center; + background: #f5f3f9; + border-radius: 13px; + border: 1px solid #d3dad9; .empty-icon { - margin-bottom: 24px; + margin-bottom: 28px; svg { - width: 80px; - height: 80px; + width: 90px; + height: 90px; + opacity: 0.7; } } h2 { - font-size: 1.5rem; - font-weight: 600; - color: #1a1a1a; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1.6rem; + font-weight: 700; + color: #1e3c38; margin: 0 0 12px 0; } p { - font-size: 0.95rem; - color: #6b7280; - margin: 0 0 24px 0; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1rem; + color: #697777; + margin: 0 0 28px 0; } .shop-btn { - padding: 12px 24px; - background: #a855f7; + padding: 14px 32px; + background: #497671; color: white; text-decoration: none; - border-radius: 8px; - font-weight: 500; + border-radius: 13px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: 1rem; transition: all 0.2s; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); &:hover { - background: #9333ea; - transform: translateY(-1px); + background: #3a5f5b; + transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(73, 118, 113, 0.3); } } } @@ -256,26 +273,30 @@ // Dexar cart item .cart-container.dexar .cart-item { display: flex; - gap: 16px; + gap: 20px; background: white; - border: 1px solid #e5e7eb; - border-radius: 12px; - padding: 16px; - transition: all 0.3s ease; + border: 1px solid #d3dad9; + border-radius: 13px; + padding: 20px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); &:hover { - border-color: #d1d5db; + border-color: #a1b4b5; + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.1); + transform: translateY(-1px); } .item-image { flex-shrink: 0; - width: 80px; - height: 80px; - border-radius: 8px; + width: 100px; + height: 100px; + border-radius: 13px; overflow: hidden; - background: #f3f4f6; + background: #f5f3f9; + border: 1px solid #d3dad9; img { width: 100%; @@ -283,6 +304,12 @@ object-fit: contain; background: white; display: block; + padding: 6px; + transition: transform 0.3s ease; + } + + &:hover img { + transform: scale(1.05); } } @@ -302,25 +329,26 @@ } .item-name { - font-size: 1rem; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1.05rem; font-weight: 600; - color: #1a1a1a; + color: #1e3c38; text-decoration: none; transition: color 0.2s; &:hover { - color: #a855f7; + color: #497671; } } .remove-btn { flex-shrink: 0; - padding: 4px; + padding: 6px; background: transparent; border: none; - color: #9ca3af; + color: #a1b4b5; cursor: pointer; - border-radius: 6px; + border-radius: 8px; transition: all 0.2s; &:hover { @@ -330,8 +358,9 @@ } .item-description { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.875rem; - color: #6b7280; + color: #697777; line-height: 1.5; } @@ -462,9 +491,10 @@ } .current-price { - font-size: 1.1rem; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1.15rem; font-weight: 700; - color: #1a1a1a; + color: #497671; } } @@ -473,16 +503,17 @@ display: flex; align-items: center; gap: 12px; - background: #f3f4f6; - border-radius: 20px; - padding: 4px 8px; + background: #f5f3f9; + border-radius: 13px; + padding: 4px 10px; + border: 1px solid #d3dad9; .qty-btn { - width: 28px; - height: 28px; + width: 30px; + height: 30px; border: none; background: transparent; - color: #a855f7; + color: #497671; cursor: pointer; display: flex; align-items: center; @@ -491,7 +522,7 @@ transition: all 0.2s; &:hover:not(:disabled) { - background: #a855f7; + background: #497671; color: white; } @@ -502,10 +533,11 @@ } .qty-value { - font-size: 0.95rem; - font-weight: 600; - color: #1a1a1a; - min-width: 20px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1rem; + font-weight: 700; + color: #1e3c38; + min-width: 24px; text-align: center; } } @@ -582,19 +614,21 @@ // Dexar Cart Summary .cart-container.dexar .cart-summary { position: sticky; - top: 20px; - background: white; - border: 1px solid #e5e7eb; - border-radius: 16px; - padding: 24px; + top: 90px; + background: #f5f3f9; + border: 1px solid #d3dad9; + border-radius: 13px; + padding: 28px; display: flex; flex-direction: column; gap: 16px; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); .summary-header h3 { - font-size: 1.25rem; - font-weight: 600; - color: #1a1a1a; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1.4rem; + font-weight: 700; + color: #1e3c38; margin: 0 0 16px 0; } @@ -602,8 +636,9 @@ display: flex; justify-content: space-between; align-items: center; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.95rem; - color: #6b7280; + color: #697777; &.delivery { display: flex; @@ -611,35 +646,38 @@ &.total { padding-top: 16px; - border-top: 1px solid #e5e7eb; - font-size: 1.1rem; - font-weight: 600; - color: #1a1a1a; + border-top: 1px solid #d3dad9; + font-size: 1.15rem; + font-weight: 700; + color: #1e3c38; margin-top: 8px; .total-price { - font-size: 1.25rem; - color: #1a1a1a; + font-size: 1.35rem; + color: #497671; } } } .checkout-btn { width: 100%; - padding: 14px; - background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%); + padding: 16px; + background: #497671; color: white; border: none; - border-radius: 12px; - font-size: 1rem; - font-weight: 600; + border-radius: 13px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1.05rem; + font-weight: 700; cursor: pointer; transition: all 0.2s; margin-top: 8px; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); &:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 8px 16px rgba(168, 85, 247, 0.3); + background: #3a5f5b; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(73, 118, 113, 0.3); } &:active { @@ -790,7 +828,7 @@ line-height: 1.4; a { - color: #a855f7; + color: var(--primary-color); text-decoration: none; &:hover { @@ -804,13 +842,36 @@ // Dexar checkbox colors .cart-container.dexar .terms-agreement .checkbox-container { input[type="checkbox"]:checked ~ .checkmark { - background: #a855f7; - border-color: #a855f7; + background: #497671; + border-color: #497671; &::after { display: block; } } + + .checkmark { + border: 2px solid #d3dad9; + border-radius: 4px; + } + + .terms-text { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 0.85rem; + color: #697777; + line-height: 1.5; + + a { + color: #497671; + text-decoration: none; + font-weight: 600; + + &:hover { + text-decoration: underline; + color: #3a5f5b; + } + } + } } // Novo checkbox colors - green @@ -861,13 +922,15 @@ .payment-modal { background: white; - border-radius: 20px; + border-radius: 13px; max-width: 500px; width: 100%; padding: 40px; position: relative; max-height: 90vh; overflow-y: auto; + border: 1px solid #d3dad9; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } .close-modal-btn { position: absolute; @@ -980,8 +1043,8 @@ .spinner-small { width: 50px; height: 50px; - border: 4px solid #f3f3f3; - border-top: 4px solid #a855f7; + border: 4px solid #d3dad9; + border-top: 4px solid #497671; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; @@ -1032,9 +1095,9 @@ left: 16px; right: 16px; height: 2px; - background: linear-gradient(90deg, transparent, #a855f7, transparent); + background: linear-gradient(90deg, transparent, #497671, transparent); animation: scan 2s linear infinite; - box-shadow: 0 0 10px #a855f7; + box-shadow: 0 0 10px #497671; } @keyframes scan { @@ -1084,7 +1147,7 @@ .pulse-dot { width: 8px; height: 8px; - background: #a855f7; + background: #497671; border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; } @@ -1132,12 +1195,12 @@ display: flex; align-items: center; justify-content: center; - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25); + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.25); &:hover { background: var(--primary-hover); transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35); + box-shadow: 0 6px 16px rgba(73, 118, 113, 0.35); } &:active { @@ -1198,8 +1261,8 @@ transition: all 0.2s; &:focus { - border-color: #a855f7; - box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1); + border-color: #497671; + box-shadow: 0 0 0 3px rgba(73, 118, 113, 0.1); } &.valid { @@ -1225,12 +1288,13 @@ .submit-email-btn { padding: 14px; - background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%); + background: #497671; color: white; border: none; - border-radius: 8px; + border-radius: 13px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1rem; - font-weight: 600; + font-weight: 700; cursor: pointer; display: flex; align-items: center; @@ -1239,8 +1303,9 @@ transition: all 0.2s; &:hover:not(:disabled) { + background: #3a5f5b; transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); } &:disabled { diff --git a/src/app/pages/category/category.component.scss b/src/app/pages/category/category.component.scss index 6d15d1e..f810fe4 100644 --- a/src/app/pages/category/category.component.scss +++ b/src/app/pages/category/category.component.scss @@ -1,7 +1,8 @@ .category-container { max-width: 1200px; margin: 0 auto; - padding: 20px; + padding: 24px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .error, @@ -14,42 +15,54 @@ flex-direction: column; align-items: center; justify-content: center; + color: #697777; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .error button { margin-top: 20px; padding: 10px 24px; - background: var(--primary-color); + background: #497671; color: white; border: none; - border-radius: 6px; + border-radius: 8px; cursor: pointer; font-size: 1rem; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + transition: all 0.2s ease; &:hover { - background: var(--primary-hover); + background: #3a5f5b; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); } } .items-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 24px; + grid-template-columns: repeat(4, 1fr); + gap: 30px; margin-bottom: 40px; + width: 100%; } .item-card { - background: white; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - overflow: hidden; - transition: transform 0.2s, box-shadow 0.2s; + width: 100%; display: flex; flex-direction: column; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); &:hover { transform: translateY(-4px); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + + .item-image { + box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); + } + + .item-details { + box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); + } } } @@ -64,27 +77,27 @@ .item-image { position: relative; width: 100%; - padding-top: 75%; // 4:3 aspect ratio - background: #f5f5f5; + aspect-ratio: 4 / 3; + border: 1px solid #d3dad9; + border-radius: 13px 13px 0 0; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); overflow: hidden; - border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + background: #f5f5f5; img { - position: absolute; - top: 0; - left: 0; width: 100%; height: 100%; object-fit: contain; background: white; padding: 12px; - transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease; - filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06)); + transition: transform 0.3s ease; } &:hover img { - transform: scale(1.06) translateY(-2px); - filter: drop-shadow(0 12px 24px rgba(0,0,0,0.15)) brightness(1.03); + transform: scale(1.05); } } @@ -98,33 +111,47 @@ border-radius: 20px; font-weight: 600; font-size: 0.9rem; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + z-index: 1; } .item-details { - padding: 16px; + width: 100%; + border: 1px solid #d3dad9; + border-top: none; + border-radius: 0 0 13px 13px; + padding: 12px 16px; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + background: #f5f3f9; flex: 1; display: flex; flex-direction: column; - gap: 8px; + gap: 6px; + transition: background 0.3s ease; } .item-name { - font-size: 1.1rem; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: clamp(14px, 1.4vw, 18px); + color: #1e3c38; margin: 0; - color: #333; + line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; - line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + text-overflow: ellipsis; + min-height: calc(2 * 1.3em); } .item-rating { display: flex; align-items: center; - gap: 8px; - font-size: 0.9rem; - color: #333; + gap: 6px; + font-size: 0.85rem; + color: #697777; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; .rating-stars { color: #ffa502; @@ -142,15 +169,17 @@ .original-price { text-decoration: line-through; - color: #555; - font-size: 0.9rem; + color: #697777; + font-size: 0.85rem; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .discounted-price, .current-price { - font-size: 1.3rem; + font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; - color: var(--primary-color); + color: #497671; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .item-stock { @@ -162,16 +191,16 @@ .bar-segment { width: 20px; height: 6px; - background: #e0e0e0; + background: #d3dad9; border-radius: 3px; transition: background 0.2s; &.filled.high { - background: #2ed573; + background: #497671; } &.filled.medium { - background: #ffa502; + background: #a1b4b5; } &.filled.low { @@ -184,16 +213,19 @@ .add-to-cart-btn { width: 100%; padding: 12px; - background: var(--primary-color); + background: #497671; color: white; border: none; - font-size: 1rem; + border-radius: 0 0 13px 13px; + font-size: 0.95rem; font-weight: 600; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; - transition: background 0.2s; + transition: all 0.2s ease; + margin-top: -1px; &:hover { - background: var(--primary-hover); + background: #3a5f5b; } &:active { @@ -209,8 +241,8 @@ .spinner { width: 40px; height: 40px; - border: 4px solid #f3f3f3; - border-top: 4px solid var(--primary-color); + border: 4px solid #d3dad9; + border-top: 4px solid #497671; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 12px; @@ -222,22 +254,65 @@ } .no-more { - color: #555; + color: #697777; padding: 40px 20px; } +// Responsive +@media (max-width: 1200px) { + .items-grid { + grid-template-columns: repeat(3, 1fr); + gap: 24px; + } +} + +@media (max-width: 992px) { + .items-grid { + grid-template-columns: repeat(3, 1fr); + gap: 20px; + } +} + @media (max-width: 768px) { .items-grid { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + grid-template-columns: repeat(2, 1fr); gap: 16px; } .item-name { - font-size: 0.95rem; + font-size: clamp(12px, 3vw, 16px); } .discounted-price, .current-price { - font-size: 1.1rem; + font-size: clamp(14px, 3.5vw, 18px); + } + + .item-details { + padding: 10px 12px; + } +} + +@media (max-width: 480px) { + .category-container { + padding: 12px; + } + + .items-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .item-details { + padding: 8px 10px; + } + + .item-card:hover { + transform: translateY(-2px); + } + + .add-to-cart-btn { + padding: 10px; + font-size: 0.85rem; } } diff --git a/src/app/pages/category/subcategories.component.html b/src/app/pages/category/subcategories.component.html index 26d6142..6d6a359 100644 --- a/src/app/pages/category/subcategories.component.html +++ b/src/app/pages/category/subcategories.component.html @@ -20,18 +20,18 @@
@for (cat of subcategories(); track trackByCategoryId($index, cat)) { -
- -
- @if (cat.icon) { - - } @else { -
{{ cat.name }}
- } -
-

{{ cat.name }}

- -
+ +
+ @if (cat.icon) { + + } @else { +
{{ cat.name.charAt(0) }}
+ } +
+
+

{{ cat.name }}

+
+ }
} diff --git a/src/app/pages/category/subcategories.component.scss b/src/app/pages/category/subcategories.component.scss index d45901f..7d033bf 100644 --- a/src/app/pages/category/subcategories.component.scss +++ b/src/app/pages/category/subcategories.component.scss @@ -1,9 +1,9 @@ .subcategories-container { - max-width: 1100px; + max-width: 1200px; margin: 0 auto; padding: 24px; - // Loading состояние + // Loading state .loading { display: flex; flex-direction: column; @@ -15,20 +15,21 @@ .spinner { width: 48px; height: 48px; - border: 4px solid #f3f4f6; - border-top-color: #3b82f6; + border: 4px solid #d3dad9; + border-top-color: #497671; border-radius: 50%; animation: spin 0.8s linear infinite; } p { - color: #6b7280; + color: #697777; font-size: 1rem; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; } } - // Error состояние + // Error state .error { display: flex; flex-direction: column; @@ -41,25 +42,27 @@ p { color: #dc2626; font-size: 1rem; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: center; margin: 0; } button { padding: 10px 24px; - background: #3b82f6; + background: #497671; color: white; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 500; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; transition: all 0.2s ease; &:hover { - background: #2563eb; + background: #3a5f5b; transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); } &:active { @@ -69,144 +72,134 @@ } .sub-header { - margin-bottom: 24px; - position: relative; - padding-bottom: 12px; - - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 60px; - height: 3px; - background: linear-gradient(90deg, #3b82f6, #8b5cf6); - border-radius: 2px; - } + margin-bottom: 28px; h2 { - font-size: 1.75rem; - color: #1f2937; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 2rem; + color: #1e3c38; margin: 0; - font-weight: 600; + font-weight: 700; letter-spacing: -0.02em; } } .categories-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 20px; + grid-template-columns: repeat(4, 1fr); + gap: 30px; + width: 100%; } .category-card { - background: white; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0,0,0,0.06); - height: 100%; + width: 100%; display: flex; flex-direction: column; - overflow: hidden; - transition: all 0.3s ease; - animation: fadeInUp 0.5s ease backwards; - cursor: pointer; - - // Анимация появления с задержкой для каждой карточки - @for $i from 1 through 20 { - &:nth-child(#{$i}) { - animation-delay: #{$i * 0.05}s; - } - } + text-decoration: none; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); &:hover { transform: translateY(-4px); - box-shadow: 0 8px 20px rgba(0,0,0,0.12); - } - .category-link { - display: flex; - flex-direction: column; - flex: 1; - text-decoration: none; - color: inherit; - position: relative; - min-height: 200px; - - .category-media { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - background: linear-gradient(135deg, #f6f7fb 0%, #e9ecf5 100%); - transition: transform 0.3s ease; + .category-image { + box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); } - &:hover .category-media { - transform: scale(1.05); - } - - .category-media img { - width: 100%; - height: 100%; - object-fit: contain; - background: white; - transition: opacity 0.3s ease; - } - - .category-fallback { - text-align: center; - font-weight: 600; - font-size: 1.1rem; - padding: 20px; - color: #6b7280; - } - - h3 { - position: absolute; - bottom: 0; - left: 0; - right: 0; - text-align: center; - margin: 0; - font-size: 0.95rem; - color: white; - padding: 12px 14px; - background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 70%, transparent); - z-index: 1; - font-weight: 500; - transition: all 0.3s ease; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); - } - - &:hover h3 { - padding: 16px 14px; - background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 70%, transparent); + .category-info { + box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); } } } - // Keyframes для анимаций + .category-image { + width: 100%; + aspect-ratio: 4 / 3; + border: 1px solid #d3dad9; + border-radius: 13px 13px 0 0; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + background: #f5f5f5; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; + } + + &:hover img { + transform: scale(1.05); + } + } + + .category-fallback { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 5rem; + font-weight: 700; + color: #497671; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); + } + + .category-info { + width: 100%; + border: 1px solid #d3dad9; + border-top: none; + border-radius: 0 0 13px 13px; + padding: 12px 16px; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + background: #f5f3f9; + display: flex; + flex-direction: column; + justify-content: center; + gap: 2px; + transition: background 0.3s ease; + } + + .category-name { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: clamp(14px, 1.4vw, 18px); + color: #1e3c38; + margin: 0; + line-height: 1.3; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + min-height: calc(2 * 1.3em); + } + + // Keyframes @keyframes spin { to { transform: rotate(360deg); } } - @keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); + // Responsive + @media (max-width: 1200px) { + padding: 24px; + + .categories-grid { + grid-template-columns: repeat(3, 1fr); + gap: 24px; + } + } + + @media (max-width: 992px) { + .categories-grid { + grid-template-columns: repeat(3, 1fr); + gap: 20px; } } - // Мобильная версия @media (max-width: 768px) { padding: 16px; @@ -220,24 +213,14 @@ .categories-grid { grid-template-columns: repeat(2, 1fr); - gap: 12px; + gap: 16px; } - .category-card { - border-radius: 10px; - - .category-link { - min-height: 140px; - - h3 { - font-size: 0.85rem; - padding: 10px 8px; - } - } + .category-info { + padding: 10px 12px; } } - // Очень маленькие экраны @media (max-width: 480px) { padding: 12px; @@ -250,52 +233,16 @@ } .categories-grid { - gap: 10px; + grid-template-columns: repeat(2, 1fr); + gap: 12px; } - .category-card { - .category-link { - min-height: 120px; - - h3 { - font-size: 0.8rem; - padding: 8px 6px; - } - - .category-fallback { - font-size: 0.95rem; - padding: 12px; - } - } - } - } - - // Большие экраны - @media (min-width: 1200px) { - padding: 32px; - - .sub-header { - margin-bottom: 28px; - - h2 { - font-size: 2rem; - } + .category-info { + padding: 8px 10px; } - .categories-grid { - gap: 24px; - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - } - - .category-card { - .category-link { - min-height: 220px; - - h3 { - font-size: 1rem; - padding: 14px 16px; - } - } + .category-card:hover { + transform: translateY(-2px); } } } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 4ada73e..a47824a 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -72,55 +72,78 @@ } } @else { - -
-
-

{{ brandName }}

-

Ваш маркетплейс товаров и услуг

-
+ +
+ +
+
+
+

Здесь ты найдёшь всё

+

Тысячи товаров в одном месте

+

просто и удобно

+ +
+ + Перейти в каталог + + +
+
+
+
@if (loading()) { -
-
+
+

Загрузка категорий...

} @if (error()) { -
+

{{ error() }}

- +
} @if (!loading() && !error()) { -
-

Категории

+
+

Каталог товаров

@if (getTopLevelCategories().length === 0) { -
-
📦
+
+
📦

Категории пока отсутствуют

Скоро здесь появятся категории товаров

} @else { -
+
@for (category of getTopLevelCategories(); track category.categoryID) { -
- -
- @if (category.icon) { - - } @else { -
{{ category.name }}
- } -
-

{{ category.name }}

- + +
+ @if (isWideCategory(category.categoryID) && category.wideBanner) { + + } @else if (category.icon) { + + } @else { +
{{ category.name.charAt(0) }}
+ }
- } +
+

{{ category.name }}

+

{{ getItemCount(category.categoryID) }} товаров

+
+ + }
}
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index 0a23c1b..2c84d3b 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -701,3 +701,540 @@ transform: translateY(-4px); } } + +// ========== DEXAR REDESIGN 2026 STYLES ========== +.dexar-home { + width: 100%; + overflow-x: hidden; +} + +// Hero Section +.dexar-hero { + position: relative; + width: 100%; + height: 600px; + background-image: url('/assets/images/hero_background_desktop.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + overflow: hidden; + + // Mobile hero image + @media (max-width: 768px) { + background-image: url('/assets/images/hero_background_mobile.webp'); + } +} + +.dexar-hero-overlay { + position: relative; + width: 100%; + height: 100%; + background: linear-gradient( + to right, + rgba(255, 255, 255, 0.9) 0%, + rgba(255, 255, 255, 0.7) 50%, + rgba(255, 255, 255, 0.3) 100% + ); + display: flex; + align-items: center; + padding: 0 56px; +} + +.dexar-hero-content { + max-width: 600px; + display: flex; + flex-direction: column; + gap: 12px; + animation: fadeInUp 0.8s ease-out; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.dexar-hero-title { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 42px; + color: #1e3c38; + line-height: 1.2; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.1s both; +} + +.dexar-hero-subtitle { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 24px; + color: #1e3c38; + line-height: 1.3; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.2s both; +} + +.dexar-hero-tagline { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 24px; + color: #1e3c38; + line-height: 1.3; + margin: 0; + animation: fadeInUp 0.8s ease-out 0.3s both; +} + +.dexar-hero-actions { + display: flex; + gap: 16px; + margin-top: 12px; + animation: fadeInUp 0.8s ease-out 0.4s both; +} + +.dexar-btn-primary { + display: flex; + align-items: center; + justify-content: center; + width: 280px; + height: 48px; + background: linear-gradient(360deg, #497671 0%, #a7ceca 100%); + border: 1px solid #d3dad9; + border-radius: 13px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 20px; + color: #ffffff; + text-decoration: none; + letter-spacing: 1.08px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(73, 118, 113, 0.4); + } + + &:active { + transform: translateY(0px); + box-shadow: 0 2px 8px rgba(73, 118, 113, 0.3); + } +} + +.dexar-btn-secondary { + display: flex; + align-items: center; + justify-content: center; + gap: 9px; + width: 220px; + height: 48px; + background: #f5f5f5; + border: 1px solid #d3dad9; + border-radius: 13px; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 500; + font-size: 20px; + color: #1e3c38; + letter-spacing: 1.08px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + + svg { + width: 11px; + height: 16px; + transition: transform 0.3s ease; + } + + &:hover { + background: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); + + svg { + transform: translateX(3px); + } + } + + &:active { + transform: translateY(0px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } +} + +// Loading & Error States +.dexar-loading, +.dexar-error { + text-align: center; + padding: 60px 20px; + max-width: 1200px; + margin: 0 auto; +} + +.dexar-spinner { + width: 50px; + height: 50px; + border: 4px solid #f3f3f3; + border-top: 4px solid #497671; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 20px; +} + +.dexar-error { + button { + margin-top: 20px; + padding: 12px 28px; + background: #497671; + color: white; + border: none; + border-radius: 13px; + cursor: pointer; + font-size: 1.1rem; + font-weight: 500; + transition: all 0.3s ease; + + &:hover { + background: #3d635f; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); + } + } +} + +// Categories Section +.dexar-categories { + max-width: 1440px; + margin: 50px auto; + padding: 0 56px; +} + +.dexar-categories-title { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 2.5rem; + font-weight: 600; + margin-bottom: 40px; + color: #1e3c38; +} + +.dexar-empty-categories { + text-align: center; + padding: 80px 20px; + background: white; + border-radius: 16px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + + .dexar-empty-icon { + font-size: 4rem; + margin-bottom: 20px; + opacity: 0.5; + } + + h3 { + font-size: 1.8rem; + color: #1e3c38; + margin: 0 0 12px 0; + font-weight: 600; + } + + p { + color: #667a77; + font-size: 1.1rem; + margin: 0; + } +} + +.dexar-categories-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 30px; + animation: fadeIn 0.6s ease-in 0.3s both; + width: 100%; +} + +.dexar-category-card { + width: 100%; + display: flex; + flex-direction: column; + text-decoration: none; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + transform: translateY(-4px); + + .dexar-category-image { + box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); + } + + .dexar-category-info { + box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); + } + } +} + +.dexar-category-image { + width: 100%; + aspect-ratio: 4 / 3; + border: 1px solid #d3dad9; + border-radius: 13px 13px 0 0; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + background: #f5f5f5; + position: relative; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; + } + + &:hover img { + transform: scale(1.05); + } +} + +.dexar-category-fallback { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 5rem; + font-weight: 700; + color: #497671; + background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); +} + +.dexar-category-info { + width: 100%; + border: 1px solid #d3dad9; + border-top: none; + border-radius: 0 0 13px 13px; + padding: 12px 16px; + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); + background: #f5f3f9; + display: flex; + flex-direction: column; + justify-content: center; + gap: 2px; + transition: background 0.3s ease; +} + +.dexar-category-name { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: clamp(14px, 1.4vw, 18px); + color: #1e3c38; + margin: 0; + line-height: 1.3; + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + min-height: calc(2 * 1.3em); +} + +.dexar-category-count { + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 600; + font-size: clamp(11px, 1vw, 13px); + color: #697777; + margin: 0; + line-height: 1.2; +} + +// Wide category card (spans 2 columns) +.dexar-category-card--wide { + grid-column: span 2; + + .dexar-category-image { + aspect-ratio: 8 / 3; + + img { + object-fit: cover; + } + } +} + +// Responsive Design +@media (max-width: 1200px) { + .dexar-hero { + height: 380px; + } + + .dexar-hero-overlay { + padding: 0 40px; + } + + .dexar-hero-title { + font-size: 38px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 22px; + } + + .dexar-categories { + padding: 0 40px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(3, 1fr); + gap: 24px; + } +} + +@media (max-width: 992px) { + .dexar-hero { + height: 340px; + } + + .dexar-hero-overlay { + padding: 0 32px; + } + + .dexar-hero-title { + font-size: 34px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 20px; + } + + .dexar-btn-primary { + width: 240px; + height: 44px; + font-size: 18px; + } + + .dexar-btn-secondary { + width: 200px; + height: 44px; + font-size: 18px; + } + + .dexar-categories { + padding: 0 32px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(3, 1fr); + gap: 20px; + } +} + +@media (max-width: 768px) { + .dexar-hero { + height: 320px; + background-position: right center; + } + + .dexar-hero-overlay { + padding: 0 20px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 255, 255, 0.85) 100% + ); + } + + .dexar-hero-title { + font-size: 28px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 17px; + } + + .dexar-hero-actions { + flex-direction: row; + gap: 10px; + width: 100%; + } + + .dexar-btn-primary, + .dexar-btn-secondary { + flex: 1; + min-width: 0; + max-width: 180px; + height: 40px; + font-size: 14px; + letter-spacing: 0.5px; + } + + .dexar-categories { + margin: 40px auto; + padding: 0 20px; + } + + .dexar-categories-title { + font-size: 2rem; + margin-bottom: 30px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(2, 1fr); + gap: 16px; + } + + .dexar-category-info { + padding: 10px 12px; + } +} + +@media (max-width: 480px) { + .dexar-hero { + height: 280px; + } + + .dexar-hero-title { + font-size: 24px; + } + + .dexar-hero-subtitle, + .dexar-hero-tagline { + font-size: 15px; + } + + .dexar-hero-actions { + gap: 10px; + } + + .dexar-btn-primary, + .dexar-btn-secondary { + height: 38px; + font-size: 13px; + max-width: 160px; + } + + .dexar-categories { + padding: 0 16px; + } + + .dexar-categories-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .dexar-category-info { + padding: 8px 10px; + } + + .dexar-category-card:hover { + transform: translateY(-2px); + } +} diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index dad3f0f..5042ce6 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, signal, computed, ChangeDetectionStrategy } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterLink } from '@angular/router'; +import { Router, RouterLink } from '@angular/router'; +import { forkJoin } from 'rxjs'; import { ApiService } from '../../services'; import { Category } from '../../models'; import { environment } from '../../../environments/environment'; @@ -18,6 +19,8 @@ export class HomeComponent implements OnInit { brandName = environment.brandFullName; isnovo = environment.theme === 'novo'; categories = signal([]); + itemCounts = signal>(new Map()); + wideCategories = signal>(new Set()); loading = signal(true); error = signal(null); @@ -40,7 +43,7 @@ export class HomeComponent implements OnInit { return cache; }); - constructor(private apiService: ApiService) {} + constructor(private apiService: ApiService, private router: Router) {} ngOnInit(): void { this.loadCategories(); @@ -52,6 +55,8 @@ export class HomeComponent implements OnInit { next: (categories) => { this.categories.set(categories); this.loading.set(false); + this.loadItemCounts(); + this.detectWideImages(categories); }, error: (err) => { this.error.set('Failed to load categories'); @@ -61,6 +66,31 @@ export class HomeComponent implements OnInit { }); } + private loadItemCounts(): void { + const topLevel = this.topLevelCategories(); + if (topLevel.length === 0) return; + + const requests: Record> = {}; + topLevel.forEach(cat => { + requests[cat.categoryID.toString()] = this.apiService.getCategoryItems(cat.categoryID, 1000); + }); + + forkJoin(requests).subscribe({ + next: (results) => { + const counts = new Map(); + Object.entries(results).forEach(([id, items]) => { + counts.set(Number(id), items.length); + }); + this.itemCounts.set(counts); + }, + error: (err) => console.error('Error loading item counts:', err) + }); + } + + getItemCount(categoryID: number): number { + return this.itemCounts().get(categoryID) || 0; + } + getTopLevelCategories(): Category[] { return this.topLevelCategories(); } @@ -68,4 +98,56 @@ export class HomeComponent implements OnInit { getSubCategories(parentID: number): Category[] { return this.subcategoriesCache().get(parentID) || []; } + + isWideCategory(categoryID: number): boolean { + return this.wideCategories().has(categoryID); + } + + private detectWideImages(categories: Category[]): void { + const topLevel = categories.filter(c => c.parentID === 0); + topLevel.forEach(cat => { + const src = cat.wideBanner || null; + if (!src) return; + const img = new Image(); + img.onload = () => { + const ratio = img.naturalWidth / img.naturalHeight; + if (ratio > 2) { + this.wideCategories.update(set => { + const next = new Set(set); + next.add(cat.categoryID); + return next; + }); + } + }; + img.src = src; + }); + } + + navigateToSearch(): void { + this.router.navigate(['/search']); + } + + scrollToCatalog(): void { + const target = document.getElementById('catalog'); + if (!target) return; + + const targetY = target.getBoundingClientRect().top + window.scrollY; + const startY = window.scrollY; + const distance = targetY - startY; + const duration = 1200; + let start: number | null = null; + + const easeInOutCubic = (t: number) => + t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; + + const step = (timestamp: number) => { + if (!start) start = timestamp; + const elapsed = timestamp - start; + const progress = Math.min(elapsed / duration, 1); + window.scrollTo(0, startY + distance * easeInOutCubic(progress)); + if (progress < 1) requestAnimationFrame(step); + }; + + requestAnimationFrame(step); + } } diff --git a/src/app/pages/item-detail/item-detail.component.html b/src/app/pages/item-detail/item-detail.component.html index d725ca3..b170079 100644 --- a/src/app/pages/item-detail/item-detail.component.html +++ b/src/app/pages/item-detail/item-detail.component.html @@ -192,201 +192,240 @@ }
} @else { - -
+ +
@if (loading()) { -
-
+
+

Загрузка товара...

} @if (error()) { -
+

{{ error() }}

- Вернуться на главную + Вернуться на главную
} @if (item() && !loading()) { -
-
+
+ +
@if (item()?.photos && item()!.photos!.length > 0) { -
- @if (item()!.photos![selectedPhotoIndex()]?.video) { - - } @else { - - } -
- -
+
@for (photo of item()!.photos!; track $index) {
@if (photo.video) { -
▶
+
▶
} - +
}
- } @else { -
-
📦 Нет изображения
-
} -
- -
-

{{ item()!.name }}

- -
- {{ getRatingStars(item()!.rating) }} {{ item()!.rating }} - ({{ item()!.callbacks?.length || 0 }} отзывов) -
- -
- @if (item()!.discount > 0) { -
- {{ item()!.price }} {{ item()!.currency }} - -{{ item()!.discount }}% -
-
{{ getDiscountedPrice() | number:'1.2-2' }} {{ item()!.currency }}
+
+ @if (item()?.photos && item()!.photos!.length > 0) { + @if (item()!.photos![selectedPhotoIndex()]?.video) { + + } @else { + + } } @else { -
{{ item()!.price }} {{ item()!.currency }}
+
+ + + + + + Нет изображения +
}
+
-
-
- - - + +
+

{{ item()!.name }}

+ +
+
+ @for (star of [1, 2, 3, 4, 5]; track star) { + + + + } +
+ {{ item()!.rating }} + ({{ item()!.callbacks?.length || 0 }} отзывов) +
+ +
+ @if (item()!.discount > 0) { +
+ {{ item()!.price }} {{ item()!.currency }} + -{{ item()!.discount }}% +
+ } +
+ {{ item()!.discount > 0 ? (getDiscountedPrice() | number:'1.2-2') : item()!.price }} {{ item()!.currency }}
- -
+

Описание

-
+
-
+ +

Отзывы ({{ item()!.callbacks?.length || 0 }})

- -
+

Оставить отзыв

-
+
-
+
@for (star of [1, 2, 3, 4, 5]; track star) { - ⭐ + ★ }
-
-