319 lines
8.3 KiB
Markdown
319 lines
8.3 KiB
Markdown
# 🚀 Быстрый старт - 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
|
||
<!-- Hero Section -->
|
||
<h1 class="hero-title mb-4">
|
||
Ваш заголовок
|
||
<span class="gradient-text">С градиентом</span>
|
||
</h1>
|
||
```
|
||
|
||
### 3. Изменить метаданные (2 минуты)
|
||
|
||
В `<head>` секции `index.html`:
|
||
|
||
```html
|
||
<title>Ваш заголовок</title>
|
||
<meta name="description" content="Ваше описание">
|
||
<meta property="og:title" content="Ваш OG заголовок">
|
||
```
|
||
|
||
### 4. Отключить секции (1 минута)
|
||
|
||
Закомментируйте ненужные секции:
|
||
|
||
```html
|
||
<!--
|
||
<section id="demo">
|
||
...
|
||
</section>
|
||
-->
|
||
```
|
||
|
||
## 🛠 Структура файлов
|
||
|
||
```
|
||
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
|
||
<button class="copy-btn" data-target="myCodeId">
|
||
Копировать
|
||
</button>
|
||
```
|
||
|
||
### Анимации при скролле
|
||
|
||
Добавьте атрибут `data-aos` к любому элементу:
|
||
|
||
```html
|
||
<div data-aos="fade-up" data-aos-delay="100">
|
||
Контент
|
||
</div>
|
||
```
|
||
|
||
## 🎯 Типичные задачи
|
||
|
||
### Добавить новую секцию
|
||
|
||
1. Добавьте HTML в `index.html`:
|
||
```html
|
||
<section id="my-section" class="section-padding">
|
||
<div class="container">
|
||
<h2 class="section-title">Мой заголовок</h2>
|
||
<!-- Контент -->
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
2. Добавьте ссылку в навигацию:
|
||
```html
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#my-section">Моя секция</a>
|
||
</li>
|
||
```
|
||
|
||
### Изменить шрифты
|
||
|
||
В `<head>` замените Google Fonts URL:
|
||
|
||
```html
|
||
<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap" rel="stylesheet">
|
||
```
|
||
|
||
В CSS замените переменные:
|
||
|
||
```css
|
||
--font-primary: 'YourFont', sans-serif;
|
||
```
|
||
|
||
### Добавить свои иконки
|
||
|
||
Используйте Font Awesome классы:
|
||
|
||
```html
|
||
<i class="fas fa-your-icon"></i>
|
||
```
|
||
|
||
Полный список: https://fontawesome.com/icons
|
||
|
||
## 🐛 Решение проблем
|
||
|
||
### Анимации не работают
|
||
|
||
Проверьте подключение AOS:
|
||
```html
|
||
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
|
||
```
|
||
|
||
### 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
|
||
<link rel="stylesheet" href="css/style.min.css">
|
||
<link rel="stylesheet" href="css/responsive.min.css">
|
||
<script src="js/main.min.js" defer></script>
|
||
```
|
||
|
||
### 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 готов к работе и кастомизации. |