- На сайте с
- 2024 года
Разработать интернет-магазин для продажи Apple-техники с уникальным дизайном в стиле macOS, адаптивный под все устройства, с удобной админ-панелью для управления товарами и категориями, а также со статистикой посещений.
Для посетителей:
· Адаптивный дизайн — корректно отображается на всех устройствах (iPhone, iPad, Android, Mac, Windows)
· Главный баннер — привлекательный блок с описанием концепции магазина
· Каталог товаров — карточки с фото, ценой, описанием, метками (Хит, Новинка, Премиум), статусом наличия
· Фильтрация по категориям — динамическая загрузка из localStorage
· Модальное окно товара — галерея изображений (свайп/кнопки), характеристики, описание, статус
· Плавные анимации — появление карточек (fade-in + slide-up), мягкие переходы
· Вертикальная лента товаров — нестандартное расположение для лучшего восприятия
· Минималистичный футер — информация о проекте
Для администратора:
· Авторизация — вход по паролю
· Управление категориями — добавление и удаление категорий (только без товаров)
· Управление товарами — добавление, редактирование, копирование, удаление
· Динамические характеристики — возможность добавлять любые поля для товаров
· Загрузка изображений — drag-and-drop, множественный выбор
· Поиск товаров — по названию
· Сортировка — по имени, цене, категории
· Экспорт/импорт — данных в JSON (резервное копирование)
· Статистика посещений — сегодня, вчера, всего
· Синхронизация между вкладками — изменения видны сразу
---
🎨 Дизайн
· Стиль: macOS — светлый, эстетичный, минималистичный
· Цветовая гамма: бежевый, терракотовый, коричневый (тёплые природные оттенки)
· Шрифт: -apple-system, SF Pro Display
· Иконки: SVG (Instagram, Telegram, Phone)
· Эффекты: матовые поверхности, чёткие границы, лёгкие тени, плавные анимации
· Особенности: вертикальная лента товаров вместо сетки, баннер с цитатой
---
💻 Технические детали
Параметр Значение
Фронтенд Чистый HTML5, CSS3, JavaScript (ES6+)
Хранение данных localStorage (без сервера, не требуется БД)
Адаптивность Mobile-first, под все устройства
Кроссплатформенность Работает на всех современных браузерах
Зависимости Отсутствуют (чистый код)
Иконки SVG
Анимации CSS-анимации, плавные переходы
Синхронизация Storage events
