unified: Phantom Protocol 2025 complete archive integration
This commit is contained in:
319
website/QUICKSTART.md
Normal file
319
website/QUICKSTART.md
Normal file
@@ -0,0 +1,319 @@
|
||||
# 🚀 Быстрый старт - 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 готов к работе и кастомизации.
|
||||
Reference in New Issue
Block a user