✦ SiteForge

Визуальный конструктор сайтов в одном HTML-файле

Собирайте лендинги из готовых блоков — без кода, сервера и регистрации.
Открыли index.html → собрали сайт → скачали готовый HTML.

✨ Возможности · 🚀 Быстрый старт · 🗂 Шаблоны · ⌨️ Горячие клавиши · 📤 Экспорт

---

🆕 Что нового в v9 «Aurora»

Девятая версия — полная перезагрузка: весь конструктор теперь живёт в одном файле, а интерфейс стал заметно живее и дружелюбнее.

	Обновление	Что это даёт
📦	Один файл	Интерфейс, стили и логика внутри index.html. Без сборщика, сервера и зависимостей
🌌	Темы оформления	Aurora с живым переливающимся фоном, спокойная тёмная и светлая. Выбор запоминается
🧭	Пошаговый тур	Знакомство при первом запуске: 6 шагов с подсветкой нужных зон
⚡	Мягкий старт	Скелетон-загрузка и аварийный выход — экран больше не зависает
🪄	Умный drag-and-drop	Светящаяся линия показывает, куда именно встанет блок
↩️	Отмена из уведомления	Удалили блок? Кнопка «Отменить» прямо в тосте
⌨️	Ctrl + D	Мгновенное дублирование выбранного блока
🗂	8 премиум-шаблонов	Бизнес, портфолио, SaaS, событие, магазин, creator, ресторан, быстрый старт
🎯	SVG-иконки	Единый аккуратный набор вместо эмодзи — ровно на любом экране

---

✨ Возможности

🧱 14 типов блоков	Hero, текст, преимущества, карточки, цифры, галерея, отзывы, тарифы, FAQ, CTA, контакты, логотипы, разделитель, отступ
🖥 Живой предпросмотр	Сайт обновляется мгновенно; клик по секции прямо в холсте выбирает блок
📱 Три устройства	Desktop / Tablet / Mobile + масштаб 50–125 %
🎛 Полный контроль дизайна	Цвета, шрифты, скругления, тени, отступы, свой CSS — глобально и для каждого блока
⌘ Командный центр	Ctrl + K — одно поле поиска по всем действиям
✅ Встроенный аудит	SEO-проверка с баллом 0–100 и конкретными замечаниями
💾 Автосохранение	Проекты хранятся в браузере; JSON-экспорт и резервная копия всего
↶ Undo / Redo	До 80 состояний, работает и после удаления
📤 Экспорт в один клик	Готовый самостоятельный HTML-файл сайта
♿ Забота о деталях	Видимый фокус с клавиатуры, prefers-reduced-motion, мобильные抽屉-панели

💡 Совет: нажмите Ctrl + K и начните вводить «тема», «экспорт», «тур» или «проверка» — командный центр найдёт всё сам.

---

🚀 Быстрый старт

Вариант 1 — просто открыть:

Двойной клик по index.html → готово. Работает прямо из папки.

Вариант 2 — локальный сервер (удобнее для разработки):

python -m http.server 8080

и перейти на http://localhost:8080.

Вариант 3 — GitHub Pages: загрузите репозиторий и включите Pages — конструктор будет доступен по ссылке.

📦 Почему один файл — это удобно: его можно носить на флешке, отправить в мессенджере, открыть на любом компьютере и захостить где угодно. Ничего не нужно устанавливать.

---

🎨 Темы оформления

Переключатель — в верхней панели, выбор сохраняется между сессиями.

Тема	Настроение
🌌 Aurora	Живой переливающийся фон, стеклянные панели, мягкое свечение. По умолчанию
🌙 Тёмная	Спокойная, без анимации фона — для долгой сосредоточенной работы
☀️ Светлая	Дневная рабочая среда с теми же акцентами

---

🧱 Библиотека блоков

Каждый блок можно добавить, редактировать, дублировать, скрыть, удалить и переставить перетаскиванием.

Категория	Блоки
Основные	Hero · Призыв (CTA) · Контакты
Контент	Текст · Преимущества · Карточки · Цифры
Медиа	Галерея
Доверие	Отзывы · Тарифы · FAQ · Логотипы
Служебные	Разделитель · Отступ

Внутри блоков редактируются списки элементов: карточки, тарифы, вопросы, изображения, отзывы — с добавлением, удалением и перестановкой.

---

🗂 Готовые шаблоны

Восемь стартов с реальным контентом и собственными палитрами — применяются в один клик, отмена через Ctrl + Z.

#	Шаблон	Для кого	Характер
01	Бизнес Pro · NOVA	Студии и компании	Индиго → циан, кейсы и цифры
02	Портфолио · ALEX	Дизайнеры, разработчики, фотографы	Тёмный + оранжевый акцент
03	SaaS / App · ORBIT	Сервисы и стартапы	Глубокий бирюзовый, тарифы и FAQ
04	Событие · DIGITAL NIGHT	Конференции и ивенты	Магента-неон, билеты и программа
05	Быстрый старт · YOUR BRAND	Универсальная основа	Чистый градиент, минимум лишнего
06	Магазин · MELLOW	Товары и коллекции	Тёплый терракот, карточки товаров
07	Creator / Media · CAY MEDIA	Стримеры и авторы	Фиолетовый неон, контент и проекты
08	Ресторан / Кафе · SORA	Кафе и локальные бренды	Олива и крем, меню и бронь

---

🖥 Интерфейс

┌──────────────────────────────────────────────────────────────┐
│ ✦ SiteForge   [Название проекта]    🎨  ↶ ↷  ⌘K  👁  ⬇ HTML │
├─────────────┬────────────────────────────────┬───────────────┤
│  Блоки      │                                │  Инспектор    │
│  Структура  │      Живой предпросмотр        │  · Контент    │
│  Шаблоны    │   Desktop / Tablet / Mobile    │  · Стиль      │
│             │          масштаб 50–125 %      │  · Ещё        │
├─────────────┴────────────────────────────────┴───────────────┤
│ ● SiteForge v9 · Desktop · 8 блоков   [Блок] [Проверка] [?]  │
└──────────────────────────────────────────────────────────────┘

• Слева — библиотека, структура с drag-and-drop, шаблоны и проекты.
• В центре — холст: клик по секции выбирает блок, наведение подсвечивает.
• Справа — инспектор: контент, стиль и настройки выбранного блока или всего сайта.
• Снизу — статус-панель с быстрыми действиями.

Режимы работы (запоминаются между сессиями):

Режим	Что делает
🎯 Фокус	Скрывает обе боковые панели
🖼 Презентационный	Убирает весь интерфейс вокруг холста
# Сетка холста	Направляющая сетка для аккуратной композиции
↔ Компактные панели	Уже боковые панели — больше места сайту

---

⌨️ Горячие клавиши

Клавиши	Действие
Ctrl/Cmd + K	Командный центр
Ctrl/Cmd + A	Библиотека блоков
Ctrl/Cmd + P	Полный предпросмотр
Ctrl/Cmd + Q	Проверка сайта
Ctrl/Cmd + F	Режим фокуса
Ctrl/Cmd + E	Скачать готовый HTML
Ctrl/Cmd + S	Сохранить проект локально
Ctrl/Cmd + D	Дублировать выбранный блок
Ctrl/Cmd + Z	Отменить
Ctrl/Cmd + Y / Ctrl/Cmd + Shift + Z	Повторить
Delete / Backspace	Удалить выбранный блок
Esc	Закрыть окна и панели

---

⌘ Командный центр

Одно поле поиска по всем действиям — Ctrl + K или кнопка «Команды».

Полный список команд

• Создание: добавить блок · структура страницы · готовые шаблоны
• Проект: настройки сайта · мои проекты · импорт JSON · экспорт JSON · резервная копия всего
• Просмотр: Desktop · Tablet · Mobile · полный предпросмотр · фокус · презентационный режим · сетка · компактные панели
• Экспорт: скачать HTML · скопировать HTML в буфер
• Проверка: аудит сайта
• Интерфейс: темы Aurora / Тёмная / Светлая
• Помощь: показать тур · горячие клавиши

---

✅ Проверка сайта

Локальный аудит перед публикацией — Ctrl + Q или кнопка «Проверка». Показывает балл 0–100 и конкретные замечания:

• длина title (15–65 символов);
• наличие и размер meta description (70–170);
• ровно один H1;
• alt у всех изображений;
• отсутствие пустых ссылок href="#";
• количество секций.

Это быстрый встроенный помощник, а не замена внешним SEO-сервисам.

---

💾 Проекты и сохранение

• ⚡ автосохранение в localStorage при каждом изменении;
• 🗂 несколько проектов на одном устройстве, окно «Мои проекты»;
• 📥 импорт и 📤 экспорт проекта в JSON;
• 🛡 «Резервная копия всего» — все проекты и настройки одним JSON;
• ↶ Undo / Redo до 80 состояний;
• 📄 экспорт готового сайта в один HTML и копирование кода в буфер.

🔄 Переезд с v8

v9 хранит данные в собственном пространстве (sf_*). Чтобы перенести работы:

v8 → «Экспорт проекта JSON»  →  v9 → «Импорт JSON»

---

🎛 Управление дизайном

Глобально (весь сайт)	Для каждого блока
Фон, текст, вторичный текст	Фон и цвет текста
Акцент, поверхности, границы	Вертикальные отступы
Шрифт текста и заголовков	Максимальная ширина контента
Насыщенность заголовков	Свои параметры: фон Hero, высота, выравнивание, колонки сеток
Ширина контейнера, скругления, тени
Пользовательский CSS

Шапка и навигация: меню собирается автоматически из блоков с опцией «Показывать в меню». Для каждого блока настраиваются имя, якорь, название пункта и видимость. Шапку можно закрепить сверху, задать логотип (текст или изображение) и CTA-кнопку.

---

📤 Экспортированный сайт

Кнопка «Скачать HTML» создаёт самостоятельный файл, в котором уже есть:

• ✅ адаптивная вёрстка и стили выбранной темы;
• ✅ мобильное меню и FAQ;
• ✅ вся структура и контент проекта;
• ✅ пользовательский CSS.

Интерфейс конструктора и инструменты v9 в экспортированный сайт не попадают — только чистый сайт.

---

📁 Структура репозитория

SiteForge/
├── index.html        # весь конструктор: интерфейс, стили, логика
├── README.md         # этот файл
└── CONTRIBUTING.md   # история версий

---

🌐 Совместимость

Актуальные версии Chrome, Edge, Firefox, Safari и Яндекс Браузера.
Интерфейс уважает prefers-reduced-motion, а на узких экранах боковые панели превращаются в выдвижные抽屉.

---

CayPlay / CayPlayProjects · 2026

Все права защищены · История версий

_{Сделано с ✦ и ванильным JavaScript}