diff --git a/files/Obuv.webp b/files/Obuv.webp deleted file mode 100644 index 2a0972a..0000000 Binary files a/files/Obuv.webp and /dev/null differ 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/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..ac96af0 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,192 @@ 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-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: 1fr; + gap: 20px; + } +} diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 556b586..4ae936d 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -88,8 +88,8 @@
- - + + diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index 9013192..5be41c2 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -453,7 +453,7 @@ // ========== DEXAR REDESIGN 2026 STYLES ========== .dexar-header { background: rgba(117, 121, 124, 0.1); - padding: 14px 0; + padding: 8px 0; position: sticky; top: 0; z-index: 1000; @@ -463,11 +463,11 @@ .dexar-header-container { max-width: 1440px; margin: 0 auto; - padding: 0 56px; + padding: 0 40px; display: flex; align-items: center; - gap: 57px; - height: 56px; + gap: 32px; + height: 48px; } .dexar-logo { @@ -477,8 +477,8 @@ flex-shrink: 0; ::ng-deep .logo-img { - width: 148px; - height: 48px; + width: 120px; + height: 38px; object-fit: contain; } } @@ -498,13 +498,13 @@ display: inline-flex; align-items: center; justify-content: center; - padding: 10px 48px; - height: 49px; + 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: 22px; + font-size: 15px; color: #1e3c38; text-decoration: none; cursor: pointer; @@ -523,45 +523,45 @@ } .dexar-nav-btn-left { - border-radius: 13px 0 0 13px; - padding: 10px 48px; + border-radius: 10px 0 0 10px; + padding: 6px 32px; } .dexar-nav-btn-middle { - padding: 10px 63px; + padding: 6px 40px; border-left: none; } .dexar-nav-btn-right { - border-radius: 0 13px 13px 0; - padding: 10px 42px; + border-radius: 0 10px 10px 0; + padding: 6px 28px; border-left: none; } // Search Box .dexar-search-wrapper { flex: 1; - max-width: 234px; + max-width: 200px; margin-left: auto; } .dexar-search-box { position: relative; width: 100%; - height: 49px; + height: 38px; background: rgba(255, 255, 255, 0.74); border: 1px solid #d2dad9; - border-radius: 22px; - box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15); + border-radius: 19px; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12); display: flex; align-items: center; - padding: 0 20px; - gap: 10px; + padding: 0 14px; + gap: 8px; } .dexar-search-icon { - width: 28px; - height: 28px; + width: 20px; + height: 20px; flex-shrink: 0; } @@ -572,7 +572,7 @@ outline: none; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; - font-size: 22px; + font-size: 15px; color: #828e8d; cursor: pointer; @@ -591,8 +591,8 @@ .dexar-cart-btn { position: relative; - width: 48px; - height: 32px; + width: 32px; + height: 24px; display: flex; align-items: center; justify-content: center; @@ -601,8 +601,8 @@ transition: opacity 0.3s ease; svg { - width: 48px; - height: 32px; + width: 32px; + height: 24px; } &:hover { diff --git a/src/app/components/language-selector/language-selector.component.scss b/src/app/components/language-selector/language-selector.component.scss index a2b8d13..0ea6443 100644 --- a/src/app/components/language-selector/language-selector.component.scss +++ b/src/app/components/language-selector/language-selector.component.scss @@ -155,18 +155,18 @@ // Dexar header specific styles :host-context(.dexar-header) { .language-selector { - width: 67px; - height: 32px; + width: 52px; + height: 26px; } .language-button { width: 100%; height: 100%; - padding: 6px; - gap: 8px; + padding: 4px; + gap: 4px; background: rgba(255, 255, 255, 0.3); border: 1px solid #677b78; - border-radius: 12px; + border-radius: 8px; color: #1e3c38; justify-content: center; @@ -182,7 +182,7 @@ .language-code { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 500; - font-size: 24px; + font-size: 15px; color: #1e3c38; letter-spacing: 0; line-height: 1; @@ -190,8 +190,8 @@ .dropdown-arrow { display: block; - width: 9px; - height: 14px; + width: 7px; + height: 10px; opacity: 1; path { diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index a14226b..a3db151 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -83,7 +83,7 @@

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

- + Перейти в каталог