very first commit
This commit is contained in:
129
src/app/pages/home/home.component.html
Normal file
129
src/app/pages/home/home.component.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!-- novo VERSION - Modern Grid Layout -->
|
||||
@if (isnovo) {
|
||||
<div class="novo-home">
|
||||
<section class="novo-hero novo-hero-compact">
|
||||
<div class="novo-hero-content">
|
||||
<h1 class="novo-hero-title">Добро пожаловать в {{ brandName }}</h1>
|
||||
<p class="novo-hero-subtitle">Найдите всё, что нужно, в одном месте</p>
|
||||
<a routerLink="/search" class="novo-hero-btn">
|
||||
Начать поиск
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Items Carousel -->
|
||||
<app-items-carousel />
|
||||
|
||||
@if (loading()) {
|
||||
<div class="novo-loading">
|
||||
<div class="novo-spinner"></div>
|
||||
<p>Загружаем категории...</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (error()) {
|
||||
<div class="novo-error">
|
||||
<div class="novo-error-icon">⚠️</div>
|
||||
<h3>Что-то пошло не так</h3>
|
||||
<p>{{ error() }}</p>
|
||||
<button (click)="loadCategories()" class="novo-retry-btn">Попробовать снова</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!loading() && !error()) {
|
||||
<section class="novo-categories">
|
||||
<div class="novo-section-header">
|
||||
<h2>Категории товаров</h2>
|
||||
<p>Выберите интересующую категорию</p>
|
||||
</div>
|
||||
|
||||
@if (getTopLevelCategories().length === 0) {
|
||||
<div class="novo-empty">
|
||||
<div class="novo-empty-icon">📦</div>
|
||||
<h3>Категории скоро появятся</h3>
|
||||
<p>Мы работаем над наполнением каталога</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="novo-categories-grid">
|
||||
@for (category of getTopLevelCategories(); track category.categoryID) {
|
||||
<a [routerLink]="['/category', category.categoryID]" class="novo-category-card">
|
||||
<div class="novo-category-image">
|
||||
@if (category.icon) {
|
||||
<img [src]="category.icon" [alt]="category.name" loading="lazy" />
|
||||
} @else {
|
||||
<div class="novo-category-placeholder">
|
||||
<span>{{ category.name.charAt(0) }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="novo-category-info">
|
||||
<h3>{{ category.name }}</h3>
|
||||
<span class="novo-category-arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<!-- DEXAR VERSION - Original -->
|
||||
<div class="home-container">
|
||||
<header class="hero hero-compact">
|
||||
<h1>{{ brandName }}</h1>
|
||||
<p>Ваш маркетплейс товаров и услуг</p>
|
||||
</header>
|
||||
|
||||
<!-- Items Carousel -->
|
||||
<app-items-carousel />
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Загрузка категорий...</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (error()) {
|
||||
<div class="error">
|
||||
<p>{{ error() }}</p>
|
||||
<button (click)="loadCategories()">Попробовать снова</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!loading() && !error()) {
|
||||
<section class="categories">
|
||||
<h2>Категории</h2>
|
||||
@if (getTopLevelCategories().length === 0) {
|
||||
<div class="empty-categories">
|
||||
<div class="empty-icon">📦</div>
|
||||
<h3>Категории пока отсутствуют</h3>
|
||||
<p>Скоро здесь появятся категории товаров</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="categories-grid">
|
||||
@for (category of getTopLevelCategories(); track category.categoryID) {
|
||||
<div class="category-card">
|
||||
<a [routerLink]="['/category', category.categoryID]" class="category-link">
|
||||
<div class="category-media">
|
||||
@if (category.icon) {
|
||||
<img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
|
||||
} @else {
|
||||
<div class="category-fallback">{{ category.name }}</div>
|
||||
}
|
||||
</div>
|
||||
<h3>{{ category.name }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user