diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 5be41c2..af8877c 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);
}
}
@@ -458,6 +458,7 @@
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
+ font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dexar-header-container {
@@ -585,14 +586,14 @@
.dexar-actions {
display: flex;
align-items: center;
- gap: 4px;
+ gap: 8px;
flex-shrink: 0;
}
.dexar-cart-btn {
position: relative;
- width: 32px;
- height: 24px;
+ width: 36px;
+ height: 28px;
display: flex;
align-items: center;
justify-content: center;
@@ -601,8 +602,8 @@
transition: opacity 0.3s ease;
svg {
- width: 32px;
- height: 24px;
+ width: 36px;
+ height: 28px;
}
&:hover {
@@ -616,18 +617,21 @@
.dexar-cart-badge {
position: absolute;
- top: -6px;
- right: -6px;
- background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
- color: white;
+ 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: 0.75rem;
- padding: 2px 6px;
- border-radius: 10px;
- min-width: 18px;
- text-align: center;
- box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
- border: 2px solid white;
+ 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 {
@@ -667,6 +671,23 @@
}
}
+// 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 {
@@ -777,22 +798,11 @@
}
.dexar-search-wrapper {
- flex: 1;
- max-width: none;
- margin-left: 0;
+ display: none;
}
- .dexar-search-box {
- height: 40px;
- }
-
- .dexar-search-icon {
- width: 20px;
- height: 20px;
- }
-
- .dexar-search-input {
- font-size: 16px;
+ .dexar-search-mobile {
+ display: flex;
}
.dexar-menu-toggle {
diff --git a/src/app/components/items-carousel/items-carousel.component.scss b/src/app/components/items-carousel/items-carousel.component.scss
index 9c37b57..cbf67fe 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,12 +125,13 @@
100% { transform: rotate(360deg); }
}
-// Item card styles matching your existing design
+// Item card styles
.item-card {
background: white;
- border-radius: 12px;
+ border-radius: 13px;
+ border: 1px solid #d3dad9;
overflow: hidden;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
height: 100%;
@@ -140,7 +142,7 @@
margin: 0 auto;
&:hover {
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
}
@@ -159,7 +161,7 @@
height: 140px;
overflow: hidden;
background: #f5f5f5;
- border-radius: 12px;
+ border-radius: 13px;
img {
width: 100%;
@@ -181,10 +183,10 @@
position: absolute;
top: 12px;
right: 12px;
- background: #e74c3c;
+ background: #ef4444;
color: white;
padding: 0.4rem 0.8rem;
- border-radius: 6px;
+ border-radius: 20px;
font-size: 0.875rem;
font-weight: 700;
z-index: 10;
@@ -211,11 +213,11 @@
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
- color: #1a1a1a;
+ color: #1e3c38;
transition: color 0.2s;
&:hover {
- color: var(--primary-color, #5568d3);
+ color: var(--primary-color, #497671);
}
}
@@ -226,12 +228,12 @@
font-size: 0.75rem;
.rating-stars {
- color: #fbbf24;
+ color: #497671;
font-weight: 600;
}
.rating-count {
- color: #6b7280;
+ color: #697777;
}
}
@@ -253,26 +255,26 @@
.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;
+ color: #697777;
text-decoration: line-through;
}
}
.cart-icon-btn {
padding: 0.5rem;
- background: var(--primary-color, #5568d3);
+ background: var(--primary-color, #497671);
color: white;
border: none;
- border-radius: 8px;
+ border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
@@ -285,7 +287,7 @@
}
&:hover {
- background: var(--primary-hover, #4456b3);
+ background: var(--primary-hover, #3d635f);
transform: scale(1.05);
}
@@ -301,14 +303,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 +321,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);
}
}
}
diff --git a/src/app/components/language-selector/language-selector.component.scss b/src/app/components/language-selector/language-selector.component.scss
index 0ea6443..35b280c 100644
--- a/src/app/components/language-selector/language-selector.component.scss
+++ b/src/app/components/language-selector/language-selector.component.scss
@@ -155,8 +155,8 @@
// Dexar header specific styles
:host-context(.dexar-header) {
.language-selector {
- width: 52px;
- height: 26px;
+ width: 56px;
+ height: 28px;
}
.language-button {
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 @@
}
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 a3db151..a47824a 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -126,9 +126,13 @@
} @else {
@for (category of getTopLevelCategories(); track category.categoryID) {
-
+
- @if (category.icon) {
+ @if (isWideCategory(category.categoryID) && category.wideBanner) {
+
![]()
+ } @else if (category.icon) {
![]()
} @else {
{{ category.name.charAt(0) }}
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
index 5fa6663..f0fbedf 100644
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -741,10 +741,10 @@
}
.dexar-hero-content {
- max-width: 660px;
+ max-width: 600px;
display: flex;
flex-direction: column;
- gap: 18px;
+ gap: 12px;
animation: fadeInUp 0.8s ease-out;
}
@@ -762,7 +762,7 @@
.dexar-hero-title {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
- font-size: 57px;
+ font-size: 42px;
color: #1e3c38;
line-height: 1.2;
margin: 0;
@@ -772,7 +772,7 @@
.dexar-hero-subtitle {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
- font-size: 34px;
+ font-size: 24px;
color: #1e3c38;
line-height: 1.3;
margin: 0;
@@ -782,7 +782,7 @@
.dexar-hero-tagline {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
- font-size: 34px;
+ font-size: 24px;
color: #1e3c38;
line-height: 1.3;
margin: 0;
@@ -791,8 +791,8 @@
.dexar-hero-actions {
display: flex;
- gap: 20px;
- margin-top: 20px;
+ gap: 16px;
+ margin-top: 12px;
animation: fadeInUp 0.8s ease-out 0.4s both;
}
@@ -800,14 +800,14 @@
display: flex;
align-items: center;
justify-content: center;
- width: 337px;
- height: 60px;
+ 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: 27px;
+ font-size: 20px;
color: #ffffff;
text-decoration: none;
letter-spacing: 1.08px;
@@ -831,14 +831,14 @@
align-items: center;
justify-content: center;
gap: 9px;
- width: 264px;
- height: 60px;
+ 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: 27px;
+ font-size: 20px;
color: #1e3c38;
letter-spacing: 1.08px;
cursor: pointer;
@@ -1037,6 +1037,7 @@
margin: 0;
line-height: 1.3;
display: -webkit-box;
+ line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
@@ -1053,10 +1054,23 @@
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: 500px;
+ height: 380px;
}
.dexar-hero-overlay {
@@ -1064,12 +1078,12 @@
}
.dexar-hero-title {
- font-size: 48px;
+ font-size: 38px;
}
.dexar-hero-subtitle,
.dexar-hero-tagline {
- font-size: 28px;
+ font-size: 22px;
}
.dexar-categories {
@@ -1084,7 +1098,7 @@
@media (max-width: 992px) {
.dexar-hero {
- height: 450px;
+ height: 340px;
}
.dexar-hero-overlay {
@@ -1092,24 +1106,24 @@
}
.dexar-hero-title {
- font-size: 42px;
+ font-size: 34px;
}
.dexar-hero-subtitle,
.dexar-hero-tagline {
- font-size: 24px;
+ font-size: 20px;
}
.dexar-btn-primary {
- width: 280px;
- height: 54px;
- font-size: 22px;
+ width: 240px;
+ height: 44px;
+ font-size: 18px;
}
.dexar-btn-secondary {
- width: 220px;
- height: 54px;
- font-size: 22px;
+ width: 200px;
+ height: 44px;
+ font-size: 18px;
}
.dexar-categories {
@@ -1124,7 +1138,7 @@
@media (max-width: 768px) {
.dexar-hero {
- height: 400px;
+ height: 320px;
background-position: right center;
}
@@ -1138,26 +1152,26 @@
}
.dexar-hero-title {
- font-size: 36px;
+ font-size: 28px;
}
.dexar-hero-subtitle,
.dexar-hero-tagline {
- font-size: 20px;
+ font-size: 17px;
}
.dexar-hero-actions {
flex-direction: column;
- gap: 16px;
+ gap: 12px;
width: 100%;
}
.dexar-btn-primary,
.dexar-btn-secondary {
width: 100%;
- max-width: 320px;
- height: 50px;
- font-size: 20px;
+ max-width: 280px;
+ height: 42px;
+ font-size: 17px;
}
.dexar-categories {
@@ -1182,26 +1196,26 @@
@media (max-width: 480px) {
.dexar-hero {
- height: 350px;
+ height: 280px;
}
.dexar-hero-title {
- font-size: 28px;
+ font-size: 24px;
}
.dexar-hero-subtitle,
.dexar-hero-tagline {
- font-size: 18px;
+ font-size: 15px;
}
.dexar-hero-actions {
- gap: 12px;
+ gap: 10px;
}
.dexar-btn-primary,
.dexar-btn-secondary {
- height: 46px;
- font-size: 18px;
+ height: 40px;
+ font-size: 16px;
}
.dexar-categories {
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 25c009d..5042ce6 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -20,6 +20,7 @@ export class HomeComponent implements OnInit {
isnovo = environment.theme === 'novo';
categories = signal
([]);
itemCounts = signal>(new Map());
+ wideCategories = signal>(new Set());
loading = signal(true);
error = signal(null);
@@ -55,6 +56,7 @@ export class HomeComponent implements OnInit {
this.categories.set(categories);
this.loading.set(false);
this.loadItemCounts();
+ this.detectWideImages(categories);
},
error: (err) => {
this.error.set('Failed to load categories');
@@ -97,6 +99,30 @@ export class HomeComponent implements OnInit {
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']);
}
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 @@
}
+
+
@if (loading()) {
-
-
+
}
@if (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 }})
-
-