АвтоВыбор НН — Бриф на подбор автомобиля

Интерактивная форма для сбора детальной информации о требованиях клиентов к подержанным автомобилям.

📋 Описание

Профессиональная веб-форма для автоподбора, разработанная для сервиса "АвтоВыбор НН". Форма позволяет клиентам детально описать свои требования к автомобилю, что обеспечивает точный и эффективный подбор подержанных авто.

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

🎯 Удобство использования

• Выпадающие списки — клиентам НЕ НУЖНО ничего писать вручную
• 200+ моделей автомобилей — база данных 23 популярных марок
• Интерактивный выбор — выбор марки автоматически загружает модели
• Предустановленные диапазоны — бюджет, пробег, объем двигателя
• Опции комфорта — 9 чекбоксов для популярных функций

🔧 Технические возможности

• Адаптивный дизайн — идеально работает на всех устройствах
• Валидация данных — проверка корректности введенной информации
• Красивый интерфейс — современный дизайн с анимациями
• Автоматическое форматирование — номер телефона форматируется автоматически
• Сохранение в файл — возможность сохранить бриф как текстовый файл
• Печать — подготовленный для печати формат
• Отправка на email — интеграция с Formspree для отправки данных

🏗️ Структура проекта

автовыбор-нн/
│
├── index.html          # Основная HTML-форма
└── README.md          # Документация проекта

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

Локальное тестирование

1. Склонируйте репозиторий:

git clone <URL_РЕПОЗИТОРИЯ>
cd автовыбор-нн

2. Запустите локальный веб-сервер:

# Python 3
python3 -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node.js (если установлен npx)
npx serve .

3. Откройте браузер и перейдите по адресу: http://localhost:8000

Развертывание

GitHub Pages

1. Загрузите код в GitHub репозиторий
2. Перейдите в Settings → Pages
3. Выберите источник: Deploy from branch → main
4. Ваш сайт будет доступен по адресу: https://ваш-username.github.io/название-репозитория/

Netlify

1. Перетащите папку проекта на netlify.com/drop
2. Или подключите GitHub репозиторий через Netlify Dashboard

Vercel

1. Установите Vercel CLI: npm i -g vercel
2. В папке проекта выполните: vercel
3. Следуйте инструкциям в терминале

⚙️ Настройка

Изменение endpoint для отправки форм

По умолчанию форма настроена на отправку через Formspree. Чтобы изменить endpoint:

1. Зарегистрируйтесь на formspree.io
2. Создайте новую форму
3. Замените action="https://formspree.io/f/xzzabjgw" в index.html на ваш endpoint

Customization

Основные параметры для настройки находятся в CSS-секции файла index.html:

• Цветовая схема: переменные в :root селекторе
• Шрифты: свойство font-family в body
• Анимации: @keyframes правила

📝 Функциональность формы

Обязательные поля

• Имя клиента
• Контактный телефон
• Бюджет (8 диапазонов: от 300к до 3млн+)
• Регион поиска (16 популярных городов)
• Год выпуска (от/до)
• Тип кузова (6 вариантов: седан, хэтчбек, универсал, внедорожник, купе)
• Тип КПП (автомат, механика, не важно)
• Тип двигателя (бензин, дизель, гибрид, электро)
• Максимальный пробег (8 диапазонов: от 50к до 300к+ км)

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

• Email
• Марка автомобиля (23 популярные марки + "другая")
• Модель (динамически загружается по выбранной марке, 200+ моделей)
• Объем двигателя (8 диапазонов: от 1.0л до 4.0л+)
• Цвет автомобиля (10 популярных цветов)
• Опции комфорта (9 чекбоксов):
  • Климат-контроль
  • Подогрев сидений
  • Кожаные сиденья
  • Навигация/GPS
  • Парктроник
  • Камера заднего вида
  • Круиз-контроль
  • Ксенон/LED фары
  • Люк в крыше
• Дополнительные пожелания (текстовое поле)

Автоматические функции

• Форматирование телефона: автоматически приводит номер к формату +7 (XXX) XXX-XX-XX
• Валидация годов: корректирует диапазон годов выпуска
• Генерация брифа: создает структурированный текстовый файл с данными клиента

🛠️ Технические требования

• Современный веб-браузер с поддержкой HTML5, CSS3, ES6+
• Подключение к интернету (для отправки форм через Formspree)

📱 Поддерживаемые устройства

• ✅ Десктопы (Windows, macOS, Linux)
• ✅ Планшеты (iOS, Android)
• ✅ Мобильные устройства (iOS, Android)
• ✅ Все современные браузеры (Chrome, Firefox, Safari, Edge)

🔧 Техническая поддержка

При возникновении проблем:

1. Убедитесь, что JavaScript включен в браузере
2. Проверьте подключение к интернету
3. Очистите кэш браузера
4. Попробуйте другой браузер

📄 Лицензия

Проект разработан для "АвтоВыбор НН". Все права защищены.

---

Разработчик: Команда разработки АвтоВыбор НН
Версия: 2.0 (UX Enhanced)
Дата: 2024

📈 История версий

v2.0 (UX Enhanced) - 2024

• ✨ Добавлены выпадающие списки вместо ручного ввода
• 🚗 База данных 200+ моделей автомобилей (23 марки)
• 💰 Предустановленные диапазоны бюджета
• 🎨 Выбор цвета автомобиля
• ⚙️ Чекбоксы для опций комфорта
• 🔧 Улучшенная генерация брифа

v1.0 (Initial) - 2024

• 📝 Базовая форма с текстовыми полями
• 🎨 Адаптивный дизайн
• 📧 Интеграция с Formspree
• 💾 Сохранение в файл