# Product Card Component
Точная HTML/CSS реализация компонента Product Card из Figma дизайна с интерактивным таймером и адаптивным дизайном.
## Особенности
- ✅ **Pixel-perfect дизайн** - точное соответствие Figma макету
- ✅ **Интерактивный таймер** - обратный отсчёт времени в реальном времени
- ✅ **Адаптивный дизайн** - корректное отображение на мобильных устройствах
- ✅ **Семантическая HTML** - доступность и SEO-оптимизация
- ✅ **CSS переменные** - легкая кастомизация токенов дизайна
- ✅ **Модульная архитектура** - разделение стилей и функциональности
## Структура файлов
```
src/
├── product-card.html # Основной компонент
├── demo.html # Демонстрационная страница
├── styles/
│ ├── tokens.css # CSS переменные и токены дизайна
│ └── product-card.css # Стили компонента
├── scripts/
│ └── timer.js # JavaScript функциональность таймера
└── README.md # Документация
images/
├── product-card-bg-image.png # Фоновое изображение
├── circle-check-icon.svg # Иконка checkmark
└── product-card-full.png # Полный снимок компонента
```
## Использование
### Базовое использование
1. Подключите необходимые CSS файлы:
```html
<link rel="stylesheet" href="styles/tokens.css">
<link rel="stylesheet" href="styles/product-card.css">
```
2. Подключите JavaScript для таймера:
```html
<script src="scripts/timer.js" defer></script>
```
3. Вставьте HTML компонента на страницу:
```html
<article class="product-card">
<!-- См. product-card.html для полной структуры -->
</article>
```
### Кастомизация
#### Изменение цветов
Отредактируйте CSS переменные в `tokens.css`:
```css
:root {
--color-primary-bg: #24191d; /* Основной фон */
--color-badge-hot: #f55b5b; /* Цвет "горячего" бейджа */
--color-badge-save: #00a352; /* Цвет бейджа экономии */
}
```
#### Настройка таймера
```javascript
// Создание таймера с кастомным временем окончания
const endTime = new Date('2024-12-31T23:59:59');
const timer = new ProductCardTimer(timerElement, endTime);
// Обработка истечения времени
timerElement.addEventListener('timerExpired', (event) => {
console.log('Время вышло!');
});
```
## Компоненты
### Product Card Timer
Интерактивный таймер обратного отсчета:
- Автоматическое обновление каждую секунду
- Поддержка дней, часов, минут и секунд
- Состояние "истёкшего" таймера
- События для отслеживания окончания
### Badges
Система бейджей с цветовой кодировкой:
- **Hot offer** - красный бейдж для горячих предложений
- **Save up to 20%** - зелёный бейдж для скидок
### Features List
Список особенностей с иконками:
- SVG иконки checkmark
- Семантический список (`<ul>`, `<li>`)
- Доступность для screen readers
## Адаптивность
Компонент адаптируется под следующие breakpoints:
- **Desktop**: 640px+ (оригинальный размер)
- **Mobile**: <768px (вертикальная компоновка)
### Мобильные изменения
- Переключение на вертикальную компоновку колонок
- Полноширинный таймер
- Адаптация фонового изображения
## Браузерная поддержка
- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+
### Используемые современные CSS фичи
- CSS Grid и Flexbox
- CSS Custom Properties (переменные)
- CSS `object-fit` для изображений
## Производительность
- Минимальные перерисовки при обновлении таймера
- Оптимизированные SVG иконки
- Сжатые изображения
- Эффективные CSS селекторы
## Доступность
- Семантическая HTML разметка
- ARIA-совместимые элементы
- Поддержка клавиатурной навигации
- Контрастные цвета
## Разработка
### Добавление новых токенов
1. Добавьте переменную в `tokens.css`
2. Используйте `var(--your-token)` в компонентах
3. Документируйте изменения
### Расширение функциональности
1. Создайте новый модуль в `scripts/`
2. Подключите к HTML
3. Обновите документацию
## Источник дизайна
Компонент создан на основе Figma дизайна:
- **Node ID**: 3040:55734
- **Компонент**: "Size=Large, Interaction=Default, Type=Timer"
- **Канал**: 8x88ihqk
