TechStore - Интернет-магазин премиальной техники

Современный интернет-магазин техники с поддержкой 3D моделей, фотогалереей и системой онлайн заказов.

🌟 Возможности

• Современный дизайн - Красивый градиентный интерфейс с плавными анимациями
• Фотогалерея товаров - Просмотр множества фотографий каждого товара
• 3D модели FBX - Интерактивный просмотр 3D моделей с возможностью вращения
• Корзина покупок - Сохранение в localStorage, мгновенное обновление
• Оформление заказов - Удобная форма с валидацией
• Адаптивный дизайн - Отлично работает на всех устройствах
• Уведомления - Красивые всплывающие сообщения

📁 Структура проекта

proj/
├── index.html       # Главная страница
├── styles.css       # Стили
├── script.js        # JavaScript логика
├── README.md        # Документация
└── models/          # 3D модели FBX
    └── README.md    # Инструкция по 3D моделям

🚀 Быстрый старт

Локально:

1. Откройте index.html в браузере
2. Готово! Сайт полностью функционален

На GitHub Pages:

📖 Подробная инструкция: GITHUB_PAGES_GUIDE.md

Кратко:

1. Создайте репозиторий на GitHub
2. Загрузите все файлы
3. Settings → Pages → Branch: main
4. Сайт готов на https://ваш_ник.github.io/techstore/

🎨 3D Модели

Для добавления 3D моделей:

1. Поместите FBX файлы в папку models/
2. В файле script.js обновите путь model3D в массиве товаров

Пример:

{
    id: 1,
    name: "MacBook Pro 16\"",
    // ...
    has3D: true,
    model3D: "models/macbook.fbx"  // Путь к вашей модели
}

Формат 3D моделей

• Поддерживаемый формат: FBX
• Рекомендуемый размер: < 10 MB на модель
• Оптимизация: Используйте Blender для экспорта в FBX с оптимизацией

📦 Товары

Товары настраиваются в массиве products в файле script.js:

const products = [
    {
        id: 1,                              // Уникальный ID
        name: "MacBook Pro 16\"",           // Название
        description: "Описание...",         // Описание
        price: 199990,                      // Цена в рублях
        image: "url",                       // Главное фото
        images: ["url1", "url2"],           // Все фотографии
        specs: ["Характеристика 1", ...],   // Список характеристик
        has3D: true,                        // Есть ли 3D модель
        model3D: "models/macbook.fbx"      // Путь к 3D модели
    }
];

🛠 Технологии

• HTML5 - Семантическая разметка
• CSS3 - Современные стили, градиенты, анимации
• JavaScript ES6+ - Логика приложения
• Three.js - 3D графика и визуализация
• FBXLoader - Загрузка FBX моделей
• OrbitControls - Управление камерой 3D сцены
• LocalStorage - Сохранение корзины

💡 Особенности реализации

3D Viewer

• Интерактивное управление (вращение, масштабирование)
• Освещение и тени
• Каркасный режим
• Подставка для модели
• Автоматическое вращение

Корзина

• Сохранение в localStorage
• Работает при перезагрузке страницы
• Информативные уведомления
• Автоматический подсчет итоговой суммы

Адаптивность

• Mobile-first подход
• Адаптивная сетка товаров
• Полноэкранная корзина на мобильных
• Оптимизированные размеры шрифтов

🎯 Планы развития

• Backend интеграция для реальных заказов
• База данных товаров
• Система поиска и фильтров
• Личный кабинет пользователя
• История заказов
• Платежная система
• Админ панель
• Больше форматов 3D моделей (GLB, GLTF)

📝 Лицензия

Этот проект создан для демонстрации возможностей современного веб-разработки.

👨‍💻 Автор

Создано с ❤️ для продажи техники

---

Примечание: Для production использования необходимо добавить backend API для обработки заказов и реальных платежей.