# 💘 Valentine Experience для Миланы

Премиальный кинематографический интерактивный сайт-история на русском языке.

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

```
valentine/
├── index.html          # Главный HTML файл
├── css/
│   └── styles.css      # Все стили и анимации
├── js/
│   └── app.js          # Вся логика и CONFIG
└── assets/
    ├── images/         # Изображения для галереи
    └── audio/          # Аудио файлы (опционально)
```

## 🚀 Как запустить

### Локально
1. Просто откройте `index.html` в браузере (двойной клик)
2. Или запустите локальный сервер:
   - Python: `python -m http.server 8000`
   - Node.js: `npx http-server`
   - Затем откройте `http://localhost:8000/valentine/`

## ✏️ Как изменить тексты

Все тексты находятся в объекте `CONFIG` в начале файла `js/app.js`:

```javascript
const CONFIG = {
    girlName: "Милана",        // Имя девушки
    yourName: "Влад",           // Ваше имя
    telegram: {
        username: "YOUR_USERNAME",  // Ваш Telegram username (без @)
        messageYes: "...",          // Сообщение при ответе "ДА"
        messageShy: "..."           // Сообщение при ответе "ДА, но стесняюсь"
    },
    scenes: {
        // Тексты всех сцен
    },
    gallery: [
        // Изображения и подписи
    ]
}
```

## 🖼️ Как добавить изображения

1. Поместите изображения в папку `assets/images/`
2. Обновите пути в `CONFIG.gallery` в `js/app.js`:

```javascript
gallery: [
    {
        image: "assets/images/ваше-изображение1.jpg",
        caption: "Ваша подпись"
    },
    // ...
]
```

3. Для фонового изображения в финальной сцене:
   - Поместите изображение в `assets/images/`
   - Обновите `CONFIG.scenes.ending.backgroundImage`

## 📱 Telegram настройка

1. В `CONFIG.telegram.username` укажите ваш Telegram username (без символа @)
2. Измените сообщения `messageYes` и `messageShy` по желанию
3. Кнопка "Отправить ответ в Телеграм" откроет чат с предзаполненным сообщением

## 🎵 Аудио (опционально)

1. Поместите аудио файл в `assets/audio/`
2. В `CONFIG.audio`:
   - Установите `enabled: true`
   - Укажите `fileName: "assets/audio/ваш-файл.mp3"`
3. Пользователь может включить/выключить звук кнопкой в правом верхнем углу

## 🌐 Деплой на GitHub Pages

1. Создайте репозиторий на GitHub
2. Загрузите всю папку `valentine` в репозиторий
3. В настройках репозитория:
   - Settings → Pages
   - Source: Deploy from a branch
   - Branch: main/master, folder: /root
4. Ваш сайт будет доступен по адресу:
   `https://ваш-username.github.io/valentine/`

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

### Цвета
Цвета можно изменить через CSS переменные в `css/styles.css`:

```css
:root {
    --accent: #ff6b9d;      /* Основной цвет */
    --accent-light: #ff8fb3; /* Светлый акцент */
    --bg1: #0a0a0f;         /* Фон 1 */
    --bg2: #1a1a2e;         /* Фон 2 */
}
```

### Шрифты
Шрифты подключены через Google Fonts в `index.html`. Можно заменить на другие.

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

Сайт полностью адаптивен и работает на:
- Десктопах
- Планшетах
- Мобильных устройствах

## ♿ Доступность

- Поддержка `prefers-reduced-motion` для пользователей с ограниченными возможностями
- Клавиатурная навигация
- Хороший контраст цветов
- Крупные области нажатия для мобильных

## 🎮 Сцены

1. **Атмосфера / Вход** - Анимированный ввод с частицами
2. **Тайна** - Печатная машинка + интерактивная карточка
3. **Галерея** - Горизонтальная прокрутка фотографий
4. **Мини-игра** - Поймай сердечки (10 секунд)
5. **Нарастание эмоций** - Карточки с причинами
6. **Вопрос** - Кульминация с тремя вариантами ответа
7. **Финал** - Персонализированное сообщение

## 🐛 Отладка

В консоли браузера доступен объект `window.VALENTINE_APP`:
- `CONFIG` - текущая конфигурация
- `navigateToScene(num)` - перейти к сцене
- `currentScene()` - текущая сцена

## 📝 Лицензия

Создано с любовью для особенного человека 💘
