🌌 Neon Imperium · Портал игр

Neon Imperium - это веб-портал для игр: Starve Neon, Alpha 01, ГК Адвенчур и других проектов.
Сайт полностью интегрирован с GitHub API, поддерживает офлайн-режим и даёт сообществу полный набор инструментов для общения, фидбека и хранения закладок.

Important

Проект в активной разработке. Ты можешь не только играть, но и участвовать в жизни комьюнити - создавать посты, оставлять реакции, комментировать и сохранять контент в личное облачное хранилище.

📋 Содержание

🔥 Ключевые возможности

Для игроков

• Главная страница - карточки всех проектов с описанием и кнопкой «Подробнее».
• Отдельные страницы игр - трейлеры (YouTube-плейлисты), описание, системные требования, видео от сообщества.
• Скачивание - ссылки на GameJolt, Itch.io, Яндекс.Диск, Google Drive и GitHub Releases (автоматическая подгрузка версий для Windows/Android).
• Переключение языков - русский и английский, переводы хранятся в JSON и подгружаются на лету.
• Адаптивный дизайн - всё красиво и на телефоне, и на десктопе.
• 3D-эффекты - наклон карточек (tilt) и параллакс для шапок (только на десктопе).
• Ленивая загрузка видео-описаний - WebM-ролики в описании Starve Neon стартуют только в видимой области (на мобильных не грузятся вовсе).

Для сообщества (требуется GitHub-токен)

• Вход через GitHub - классический токен с правами repo и gist.
• Обратная связь - создание идей, багрепортов, отзывов прямо через GitHub Issues.
• Реакции - ❤️, 👀 и другие на постах и комментариях.
• Комментарии - редактирование, удаление, поддержка Markdown.
• Новости и обновления - публикуются через Issues с лейблами type:news и type:update.
• Опросы - встраиваются прямо в тело поста через специальный синтаксис.
• Хранилище закладок - каждый пользователь может сохранять посты и видео в свой приватный Gist (шифруется AES-GCM на устройстве).
• Админ-панель - добавление/редактирование/закрытие постов, кнопки «Добавить новость» и «Добавить обновление».

Технические фишки

• Service Worker - кеширует статику, открывает страницы офлайн.
• Background Sync - реакции и комментарии уходят в очередь и отправляются при восстановлении сети.
• Ленивая загрузка видео - YouTube-плееры подгружаются только когда видны.
• GIF/WebM-баннеры - фоновые анимации в карточках (загружаются через Intersection Observer).
• Живой предпросмотр - при создании поста Markdown рендерится в реальном времени.
• Кастомные теги - спойлеры, таблицы, прогресс-бары, цветной текст, иконки Font Awesome.
• XSS-защита - весь HTML из GitHub Issues проходит через DOMPurify.
• Шифрование кэша - все временные данные в браузере шифруются AES-GCM 256.
• Кастомные диалоги - вместо нативных prompt()/confirm() — стилизованные модалки с focus-trap.
• Доступность - :focus-visible, ARIA-атрибуты, поддержка клавиатуры и prefers-reduced-motion.

🛠 Технологический стек

Категория	Используемые технологии
Frontend	HTML5, CSS3 (Flexbox, Grid, CSS Variables), Vanilla JS (ES6+)
PWA	Service Worker, manifest.json, стратегия stale-while-revalidate
API	GitHub REST API (Issues, Comments, Reactions, Gists, Releases, User)
Аутентификация	Personal Access Token (classic) с правами repo и gist
Шифрование	AES-GCM 256 — для кэша браузера (CacheCrypto) и Gist-хранилища закладок
Безопасность	DOMPurify 3.0.9 (санитайз HTML из GitHub Issues), SRI для CDN-скриптов
Markdown	marked + кастомные расширения (спойлеры, опросы, прогресс)
Шрифты и иконки	Локальный Russo One (fonts/RussoOne.woff2), Font Awesome 6 (Free CDN)
Видео	YouTube Embed API (ленивая загрузка + IntersectionObserver)
Анимации	CSS transform, transition, requestAnimationFrame + throttle
Хранилище	sessionStorage, localStorage, IndexedDB (очередь синхронизации)
Доступность	:focus-visible, ARIA-labels, focus-trap, prefers-reduced-motion

📁 Структура проекта

📜 Развернуть структуру

NeonImperium/
├── index.html              # Главная (каталог, новостная лента)
├── starve-neon.html        # Страница Starve Neon
├── alpha-01.html           # Страница Alpha 01
├── gc-adven.html           # Страница ГК Адвенчур
├── license.html            # Лицензионное соглашение
├── 404.html                # Страница не найдена (noindex)
├── manifest.json           # PWA манифест
├── sw.js                   # Service Worker (кеш, фоновая синхронизация)
├── robots.txt              # SEO: правила для краулеров
├── sitemap.xml             # SEO: карта сайта
├── style.css               # Глобальные стили (без @import)
├── css/                    # Модульные стили
│   ├── variables.css       # CSS-переменные
│   ├── base.css            # Сброс, база, focus-visible
│   ├── typography.css      # Шрифты (@font-face RussoOne), заголовки
│   ├── buttons.css         # Кнопки
│   ├── navigation.css      # Навбар, профиль
│   ├── cards.css           # Карточки
│   ├── layout.css          # Сетки
│   ├── responsive.css      # Адаптивность
│   ├── feedback.css        # Обратная связь и модалки
│   └── animations.css      # Анимации появления
├── fonts/                  # Локальные шрифты
│   └── RussoOne.woff2
├── images/                 # Статика: логотипы, аватарки, баннеры, WebM
├── locales/                # Переводы
│   ├── ru.json             # Русский
│   └── en.json             # Английский
├── js/                     # Вся логика
│   ├── config.js           # window.NeonConfig + isMobile (загружается первым)
│   ├── utils.js            # Утилиты + async cacheGet/Set + sanitizeHtml
│   ├── lang.js             # Ядро локализации
│   ├── effects.js          # 3D tilt и параллакс
│   ├── platform.js         # GitHub Releases + выбор платформы
│   ├── common-init.js      # Инициализация, ленивая загрузка
│   ├── github-client.js    # Класс GitHubClient (issues/reactions/comments)
│   ├── dust-particles.js   # Фоновые частицы (откл. на мобильных)
│   ├── core/               # Ядро
│   │   ├── cache-crypto.js # AES-GCM шифрование кэша
│   │   ├── github-core.js  # Общие утилиты + CONFIG из NeonConfig
│   │   ├── github-api.js   # Обёртка над GitHubClient
│   │   └── github-auth.js  # Вход и управление токеном
│   ├── features/           # UI-компоненты
│   │   ├── dialog.js       # Кастомные модалки (prompt/confirm/alert)
│   │   ├── ui-utils.js     # Тосты, модалки, черновики
│   │   ├── ui-feedback.js  # Рендер постов, реакций, комментариев
│   │   ├── editor.js       # Тулбар редактора Markdown
│   │   ├── rate-limits.js  # Лимиты + очередь действий (IndexedDB)
│   │   ├── youtube-loader.js # Ленивая загрузка YouTube
│   │   ├── background-gifs.js # Ленивые GIF/WebM баннеры
│   │   └── storage/        # Хранилище закладок на Gist
│   │       ├── core.js     # Шифрование, работа с Gist
│   │       ├── metadata.js # Метаданные ссылок
│   │       ├── preview.js  # Превью видео
│   │       ├── download.js # Загрузка видео
│   │       ├── manager.js  # Управление состоянием
│   │       ├── ui.js       # Модалка хранилища
│   │       └── index.js    # Ленивый загрузчик
│   └── pages/              # Скрипты для конкретных страниц
│       ├── news-feed.js    # Лента новостей (YouTube + посты)
│       ├── feedback.js     # Обратная связь
│       └── game-updates.js # Обновления игр
└── README.md               # Этот файл

🔌 Интеграция с GitHub

Сайт не требует своего бэкенда – все данные хранятся в GitHub:

Что	Где хранится
Игры и обновления	Issues с лейблами type:update + game:...
Новости	Issues с лейблом type:news
Обратная связь	Issues с лейблами type:idea, type:bug, type:review + game:...
Комментарии	Комментарии к Issue
Реакции	Реакции GitHub (+1, heart и т.д.)
Закладки	Персональный Gist пользователя (private)

Требуемые scopes

Scope	Необходимо для
repo	Создание/редактирование Issue, комментариев, реакций, закрытие Issue, опросы
gist	Хранилище закладок (сохранение постов и видео)

Администраторы

Пользователи из списка ALLOWED_AUTHORS в github-core.js (по умолчанию NeonShadowYT, GoldenCreeper567) получают дополнительные кнопки:

• «Добавить новость» в ленте
• «Добавить обновление» на странице игры
• Возможность редактировать и закрывать любые Issue

💬 Возможности сообщества

Обратная связь

• Каждая игра имеет свой раздел (фильтр по лейблу game:...)
• Пользователи могут создавать идеи, багрепорты и отзывы
• Форма создания поддерживает Markdown с визуальным редактором и живым превью
• У постов есть реакции и комментарии (с поддержкой Markdown и редактированием)

Опросы (polls)

• В теле Issue вставляется <!-- poll: {"question":"...","options":["..."]} -->
• При рендере создаётся интерактивный блок
• Пользователи голосуют через комментарий !vote <индекс>
• Результаты отображаются в процентах

Хранилище закладок

• Требует авторизации с scope gist
• Позволяет сохранять посты и YouTube‑видео в личный Gist
• Закладки синхронизируются между устройствами (через Gist)
• Поддерживает офлайн‑режим и фоновую синхронизацию
• В модальном окне можно сортировать, фильтровать по типу, удалять, редактировать название

Редактор Markdown

• Полноценная тулбар: жирный, курсив, заголовки, списки, ссылки, изображения, YouTube‑вставка, код, спойлеры, таблицы, опросы, прогресс‑бары, карточки, иконки, цвет текста/фона
• Кнопка «Хостинги» – быстрый доступ к Catbox, ImageBam, Postimages, ImgBB
• Разделение на вкладку ввода и живой предпросмотр
• Автоматическое сохранение черновиков в sessionStorage
• Все диалоги (вставка ссылки, изображения и т.д.) — кастомные модалки

Безопасность и приватность

• XSS-защита: весь HTML из GitHub Issues санитайзится через DOMPurify
• Шифрование кэша: все временные данные (API-ответы, превью, парсинг) в браузере шифруются AES-GCM 256. Ключ уникален для сессии и хранится в sessionStorage
• SRI-хэши для всех CDN-скриптов (DOMPurify, marked)
• Никаких внешних трекеров: Google Fonts удалены, шрифт Russo One отдаётся локально

📴 Офлайн и фоновая синхронизация

• Service Worker кеширует все статические ресурсы (HTML, CSS, JS, изображения, шрифты)
• Страницы игр и главная доступны даже без интернета (stale‑while‑revalidate)
• При повторном посещении обновлённые файлы загружаются из сети и заменяют кеш
• Background Sync:   - Если пользователь оставил реакцию или комментарий при потере сети, запрос сохраняется в IndexedDB   - При восстановлении соединения регистрируется синхронизация, и все накопленные мутации отправляются на GitHub   - Токен также сохраняется в IndexedDB, чтобы SW мог выполнять запросы

Уведомление об обновлении

• При обнаружении нового Service Worker (новая версия сайта) появляется плавающая кнопка «Обновить»
• Уведомление показывается только один раз за сессию (хранится в sessionStorage)

🤝 Участие в разработке

Мы приветствуем любые вклады!

Как помочь:

• Сообщить об ошибке или предложить идею через Issues
• Сделать форк, внести изменения и отправить Pull Request
• Улучшить переводы (добавить новый язык или поправить существующие)
• Помочь с оптимизацией производительности или доступности

Требования к PR:

• Код должен быть ванильным JavaScript (без фреймворков)
• Стили пишутся в соответствующих CSS‑модулях (не в style.css)
• Сохранять обратную совместимость с современными браузерами (Chrome, Firefox, Edge, Safari)
• Проверить, что сайт работает в офлайн‑режиме и с отключённым JavaScript (базовая навигация)

📄 Лицензия

Исходный код сайта распространяется под лицензией MIT.

Контент игр (тексты, изображения, логотипы, исполняемые файлы) является интеллектуальной собственностью Neon Imperium.

Подробные условия использования самих игр описаны на странице Лицензионное соглашение.

📸 Присоединяйся к сообществу

⭐ Если тебе нравится проект, поставьте звезду на GitHub - это помогает продолжать разработку!