ShopName (1.0.0) - HTML-шаблон интернет-магазина техники и гаджетов

Готовый шаблон интернет-магазина для продажи электроники, гаджетов и аксессуаров. Изначально задумывался как основа под WordPress-тему — вся структура, вёрстка и логика уже готовы к интеграции с любой CMS.

---

Что внутри — 16 готовых страниц

Основные:

· Главная — hero-блок, категории, хиты продаж, преимущества, блог
· Каталог — фильтры, сортировка, переключение сетка/список, пагинация
· Карточка товара — галерея, выбор цвета и размера, табы, отзывы, похожие товары
· Корзина — товары, промокод, расчёт итога, бесплатная доставка от 3000 руб.
· Оформление заказа — 4 шага: контакты, доставка, адрес, оплата
· Бренды — каталог всех брендов плюс страница отдельного бренда

Личный кабинет:

· Авторизация — вход и регистрация с полной валидацией
· Профиль — личные данные, редактирование, аватары, настройки
· Мои заказы — история с фильтрами, трекингом и модалкой деталей
· Избранное — сохранённые товары с быстрым удалением

Дополнительные:

· Поиск — товары и статьи с фильтрами
· Блог — список статей с сайдбаром
· Статья — текст, рейтинг, комментарии, похожие статьи
· Инфо-страница — доставка, оплата, гарантия, возврат
· 404 — страница ошибки

---

Что уже работает

· Корзина — добавление, удаление, счётчик, промокоды (SALE10, SALE20, WELCOME), расчёт итога
· Бесплатная доставка от 3000 руб. — автоматически применяется
· Избранное — сохранение через localStorage
· Фильтры каталога — категории, цена, бренд, наличие, скидка
· Сортировка — 5 вариантов: по цене, рейтингу, новизне, популярности
· Сетка/список — переключение вида каталога
· Быстрый просмотр (Quick View) — модалка с товаром прямо из каталога
· Галерея товара — превью с плавным переключением
· Маска телефона — единая для всех форм
· Валидация форм — подсветка ошибок, проверка email, пароля, телефона
· Тосты — всплывающие уведомления (success, error, info)
· Мобильное меню — бургер со свайпом
· Модалки — для адресов, профиля, деталей заказа
· Рейтинг статьи — 5 звёзд с подсветкой
· Комментарии — добавление через форму

---

SEO-оптимизация из коробки

На каждой странице:

· Оптимизированный title (60–70 символов)
· Мета-описание (150–160 символов)
· Мета-ключевые слова
· Canonical — защита от дублей
· Open Graph — корректное превью в ВКонтакте, Одноклассниках, Telegram
· vk:image — отдельная картинка для VK
· noindex на служебных страницах (корзина, чекаут, ЛК, 404) — чтобы не засорять поиск

---

Технические характеристики

· HTML5 — семантическая разметка, ARIA-атрибуты
· CSS3 — переменные, Flexbox, Grid, clamp(), плавные анимации
· jаvascript — нативный, без jQuery и без зависимостей
· Адаптивность — брейкпоинты 1024 / 768 / 480 px, полностью рабочий мобильный вид
· Шрифты — Google Fonts (Inter + Playfair Display) через CDN
· Иконки — inline SVG, без внешних библиотек
· Размер — около 500 КБ со всеми картинками

---

Что входит в покупку

· 16 HTML-файлов — все страницы шаблона
· CSS — один файл style.css (около 1500 строк)
· jаvascript — один файл main.js (около 900 строк)
· 15 изображений товаров — демо-картинки для примера
· README.md — подробная инструкция по установке и кастомизации
· LICENSE.txt — лицензия для одного проекта
· Поддержка 30 дней — помощь с установкой и базовыми вопросами

---

Установка — 3 минуты

1. Распакуйте архив
2. Загрузите файлы на любой хостинг (Beget, Timeweb, Reg.ru, Netlify)
3. Откройте index.html в браузере — всё работает

Никаких npm install. Никаких сборщиков. Никаких зависимостей.

Шаблон задумывался как основа для WordPress-темы — вся структура и вёрстка готовы к интеграции. Если вы планируете переносить его на WP, вам будет достаточно подключить functions.php, single-product.php и archive-product.php.

---

Кастомизация

Цвета — все в CSS-переменных. Поменяйте одну переменную — обновится весь шаблон:

```
:root {
    --primary: #c9a227;
    --accent: #d6336c;
    --success: #10b981;
}
```

Шрифты — подключены через Google Fonts. Замените на свои (Manrope, Unbounded и т.д.) — и поправьте font-family в CSS.

Тёмная тема — каркас уже готов. Добавьте класс dark на html и пропишите значения переменных.

Промокоды — в js/main.js, объект promoCodes. Можно добавить свои или убрать лишние.

Товары — карточки с data-атрибутами. Меняйте значения — карточка обновляется.

---

Кому подойдёт

· Фрилансерам — быстрый старт для клиентского проекта
· Малому бизнесу — интернет-магазин без сложной разработки
· Разработчикам — готовая вёрстка под прикручивание бэкенда
· Агентствам — база для адаптации под разные ниши
· Студентам и новичкам — пример качественного HTML/CSS/JS

---

Что НЕ входит

Это фронтенд-шаблон без бэкенда. Он не умеет:

· Реально принимать оплату
· Отправлять заказы на сервер
· Хранить пользователей в базе

Все действия — демонстрационные и работают через localStorage. Для запуска реального магазина нужно прикрутить бэкенд (Node.js, PHP, Python) и платёжную систему (ЮKassa, Тинькофф).

---

Демо

Демо-версия не предоставляется публично — это защита кода от копирования.

Все ключевые экраны показаны в скриншотах выше. Если нужно увидеть что-то дополнительно — напишите, пришлю видео-обзор или дополнительные снимки.

---

Цена

6 900 руб. — лицензия для одного проекта.

Почему столько:

· Готовая вёрстка 16 страниц — сэкономит 40+ часов работы
· Корзина, фильтры, избранное — сэкономит ещё 20+ часов JS-логики
· SEO-оптимизация — сэкономит 5+ часов
· Адаптив под мобильные — сэкономит 10+ часов

Итого: вы экономите 75+ часов разработки. При ставке фрилансера 500 руб./час это 37 500 руб. экономии.

---

Связь

· Email: iversis@yandex.ru
· Телефон: +7 (902) 813-67-21

Отвечаю в течение 24 часов. Помогу с установкой и отвечу на вопросы по кастомизации.