UniqueSoft/Phantom

Fork 0

Files

NW b680c5aeca unified: Phantom Protocol 2025 complete archive integration

2026-05-18 17:28:53 +01:00

8.3 KiB

Raw Permalink Blame History

🚀 Быстрый старт - Phantom Protocol Landing

Краткое руководство по запуску и кастомизации лендинга.

📦 Минимальные требования

Любой современный браузер (Chrome 90+, Firefox 88+, Safari 14+)
Текстовый редактор (VS Code, Sublime Text, Atom)
Веб-сервер для локальной разработки (опционально)

🆕 Выбор версии

Проект содержит ДВЕ версии:

1. Классическая версия (index.html)

Bootstrap 5 дизайн
Адаптивный 2D лендинг
Полная SEO оптимизация
Быстрая загрузка
📄 Документация

⚡ Запуск за 30 секунд

Вариант 1: Прямое открытие

# Клонируйте репозиторий
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: Локальный сервер

# 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:

:root {
    --color-accent: #00f0ff;          /* Ваш цвет */
    --color-accent-secondary: #7a3eff; /* Ваш цвет */
    --color-success: #00ff9d;          /* Ваш цвет */
}

2. Изменить контент (10 минут)

Откройте index.html и найдите нужную секцию:

<!-- Hero Section -->
<h1 class="hero-title mb-4">
    Ваш заголовок
    <span class="gradient-text">С градиентом</span>
</h1>

3. Изменить метаданные (2 минуты)

В <head> секции index.html:

<title>Ваш заголовок</title>
<meta name="description" content="Ваше описание">
<meta property="og:title" content="Ваш OG заголовок">

4. Отключить секции (1 минута)

Закомментируйте ненужные секции:

<!-- 
<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:

// Программное переключение
setTheme('dark'); // или 'light'

Копирование команд

Работает автоматически для элементов с классом .copy-btn:

<button class="copy-btn" data-target="myCodeId">
    Копировать
</button>

Анимации при скролле

Добавьте атрибут data-aos к любому элементу:

<div data-aos="fade-up" data-aos-delay="100">
    Контент
</div>

🎯 Типичные задачи

Добавить новую секцию

Добавьте HTML в index.html:

<section id="my-section" class="section-padding">
    <div class="container">
        <h2 class="section-title">Мой заголовок</h2>
        <!-- Контент -->
    </div>
</section>

Добавьте ссылку в навигацию:

<li class="nav-item">
    <a class="nav-link" href="#my-section">Моя секция</a>
</li>

Изменить шрифты

В <head> замените Google Fonts URL:

<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap" rel="stylesheet">

В CSS замените переменные:

--font-primary: 'YourFont', sans-serif;

Добавить свои иконки

Используйте Font Awesome классы:

<i class="fas fa-your-icon"></i>

Полный список: https://fontawesome.com/icons

🐛 Решение проблем

Анимации не работают

Проверьте подключение AOS:

<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

# Установите инструменты
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

<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

git add .
git commit -m "Initial commit"
git push origin main

В Settings → Pages → Source: main branch

Netlify

# Установите Netlify CLI
npm install -g netlify-cli

# Деплой
netlify deploy --prod

Cloudflare Pages

Подключите GitHub репозиторий
Build command: (оставьте пустым)
Publish directory: /

📚 Дополнительные ресурсы

💡 Советы

Используйте DevTools - Inspect element (F12) для быстрой отладки
Тестируйте на мобильных - DevTools → Toggle device toolbar
Проверяйте в разных браузерах - Chrome, Firefox, Safari
Оптимизируйте изображения - Используйте WebP формат
Добавьте favicon - Создайте файл favicon.ico в корне

🆘 Поддержка

Если возникли проблемы:

Проверьте консоль браузера (F12)
Откройте issue на GitHub
Напишите в Discussions
- 200 символов вылетают волнами
- Цвета чередуются: green/cyan/purple
- Контент материализуется из символов
Проверьте цветовую палитру:
- Наведите на кнопки → градиент green→cyan→purple
- H1 заголовки → трехцветный градиент
- H2 заголовки → неоновый cyan
- Scrollbar → градиентный thumb

Готово! 🎉 Ваш сайт Phantom Protocol готов к работе и кастомизации.

8.3 KiB Raw Permalink Blame History Unescape Escape