# 🚀 Быстрый старт - Phantom Protocol Landing
Краткое руководство по запуску и кастомизации лендинга.
## 📦 Минимальные требования
- Любой современный браузер (Chrome 90+, Firefox 88+, Safari 14+)
- Текстовый редактор (VS Code, Sublime Text, Atom)
- Веб-сервер для локальной разработки (опционально)
## 🆕 Выбор версии
**Проект содержит ДВЕ версии:**
### 1. Классическая версия (index.html)
- Bootstrap 5 дизайн
- Адаптивный 2D лендинг
- Полная SEO оптимизация
- Быстрая загрузка
- 📄 [Документация](README.md)
## ⚡ Запуск за 30 секунд
### Вариант 1: Прямое открытие
```bash
# Клонируйте репозиторий
git clone https://github.com/yourusername/phantom-protocol-landing.git
cd phantom-protocol-landing
# Откройте сайт
open index.html # macOS
xdg-open index.html # Linux
start index.html # Windows
```
### Вариант 2: Локальный сервер
```bash
# Python 3
python -m http.server 8000
# Node.js
npx http-server -p 8000
# PHP
php -S localhost:8000
```
Откройте `http://localhost:8000` в браузере.
## 🎨 Быстрая кастомизация
### 1. Изменить цвета (5 минут)
Откройте `css/style.css` и найдите `:root`:
```css
:root {
--color-accent: #00f0ff; /* Ваш цвет */
--color-accent-secondary: #7a3eff; /* Ваш цвет */
--color-success: #00ff9d; /* Ваш цвет */
}
```
### 2. Изменить контент (10 минут)
Откройте `index.html` и найдите нужную секцию:
```html
Ваш заголовок
С градиентом
```
### 3. Изменить метаданные (2 минуты)
В `` секции `index.html`:
```html
Ваш заголовок
```
### 4. Отключить секции (1 минута)
Закомментируйте ненужные секции:
```html
```
## 🛠 Структура файлов
```
phantom-protocol-landing/
│
├── index.html ← Главная страница
│
├── css/
│ ├── style.css ← Основные стили
│ └── responsive.css ← Адаптивность
│
├── js/
│ └── main.js ← Вся логика
│
├── robots.txt ← SEO
├── sitemap.xml ← SEO
└── README.md ← Документация
```
## 📝 Основные функции
### Переключение темы
Автоматически сохраняется в localStorage:
```javascript
// Программное переключение
setTheme('dark'); // или 'light'
```
### Копирование команд
Работает автоматически для элементов с классом `.copy-btn`:
```html
```
### Анимации при скролле
Добавьте атрибут `data-aos` к любому элементу:
```html
Контент
```
## 🎯 Типичные задачи
### Добавить новую секцию
1. Добавьте HTML в `index.html`:
```html
```
2. Добавьте ссылку в навигацию:
```html
Моя секция
```
### Изменить шрифты
В `` замените Google Fonts URL:
```html
```
В CSS замените переменные:
```css
--font-primary: 'YourFont', sans-serif;
```
### Добавить свои иконки
Используйте Font Awesome классы:
```html
```
Полный список: https://fontawesome.com/icons
## 🐛 Решение проблем
### Анимации не работают
Проверьте подключение AOS:
```html
```
### Canvas не отображается
Откройте консоль браузера (F12) и проверьте ошибки. Canvas требует правильного размера контейнера.
### Копирование не работает
Clipboard API требует HTTPS или localhost. Запустите локальный сервер.
## 📊 Оптимизация для production
### 1. Минификация CSS/JS
```bash
# Установите инструменты
npm install -g csso-cli terser
# Минифицируйте CSS
csso css/style.css -o css/style.min.css
csso css/responsive.css -o css/responsive.min.css
# Минифицируйте JS
terser js/main.js -o js/main.min.js -c -m
```
### 2. Обновите ссылки в HTML
```html
```
### 3. Добавьте изображения
Создайте папку `images/` и добавьте:
- `og-phantom.png` (1200x630px для Open Graph)
- `favicon.ico` (32x32px)
- `apple-touch-icon.png` (180x180px)
### 4. Проверьте производительность
Откройте Chrome DevTools → Lighthouse → Generate report
Целевые показатели:
- Performance: 90+
- Accessibility: 95+
- Best Practices: 95+
- SEO: 95+
## 🌐 Деплой
### GitHub Pages
```bash
git add .
git commit -m "Initial commit"
git push origin main
```
В Settings → Pages → Source: `main branch`
### Netlify
```bash
# Установите Netlify CLI
npm install -g netlify-cli
# Деплой
netlify deploy --prod
```
### Cloudflare Pages
1. Подключите GitHub репозиторий
2. Build command: (оставьте пустым)
3. Publish directory: `/`
## 📚 Дополнительные ресурсы
- [Bootstrap 5 Docs](https://getbootstrap.com/docs/5.3/)
- [Font Awesome Icons](https://fontawesome.com/icons)
- [AOS Documentation](https://michalsnik.github.io/aos/)
- [CSS Tricks](https://css-tricks.com/)
- [MDN Web Docs](https://developer.mozilla.org/)
## 💡 Советы
1. **Используйте DevTools** - Inspect element (F12) для быстрой отладки
2. **Тестируйте на мобильных** - DevTools → Toggle device toolbar
3. **Проверяйте в разных браузерах** - Chrome, Firefox, Safari
4. **Оптимизируйте изображения** - Используйте WebP формат
5. **Добавьте favicon** - Создайте файл `favicon.ico` в корне
## 🆘 Поддержка
Если возникли проблемы:
1. Проверьте консоль браузера (F12)
2. Откройте issue на GitHub
3. Напишите в Discussions
- 200 символов вылетают волнами
- Цвета чередуются: green/cyan/purple
- Контент материализуется из символов
4. **Проверьте цветовую палитру**:
- Наведите на кнопки → градиент green→cyan→purple
- H1 заголовки → трехцветный градиент
- H2 заголовки → неоновый cyan
- Scrollbar → градиентный thumb
---
**Готово! 🎉** Ваш сайт Phantom Protocol готов к работе и кастомизации.