Есть такой тип проектов, за которые берёшься с мыслью «ну это просто несколько страниц» — и в итоге получаешь полноценный продукт с дизайн-системой, PWA, двуязычностью и геймификацией. KOL Studio именно такой случай.
Ниже — честный разбор: что именно сделано, как устроено под капотом и почему некоторые решения я принял именно так, а не иначе.
KOL Studio — платформа для авторов эксклюзивного контента и их аудитории. По механике напоминает OnlyFans или Boosty: автор заливает контент, устанавливает цену подписки, зарабатывает на чаевых, PPV-контенте и кастомных запросах. Фан платит, смотрит, взаимодействует.
Только здесь всё это реализовано как полноценный front-end прототип — не мокап в Figma, не набросок в CodePen, а рабочий код, который открывается в браузере, устанавливается как приложение на телефон и ведёт себя как настоящий продукт.
Итоговый масштаб:
- 62 страницы на русском + 62 на английском = 124 HTML-файла
- 8.8 MB кода, 0 npm-зависимостей, 0 фреймворков
- Полная дизайн-система с токенами, компонентами и паттернами
- Service Worker v8, кэширование 63 URL, push-уведомления
- SEO-разметка на всех 124 страницах
- Геймификация, реальная аналитика-заготовка, A/B флаги
Честно скажу: чистый HTML/CSS/JS в 2025-м выглядит немного контркультурно. Но у этого выбора была причина.
Когда делаешь прототип для демонстрации идеи или продажи инвестору — скорость важнее архитектуры. React с Vite поднимается за минуту, но потом ты тратишь часы на компоненты, роутинг, стейт-менеджмент и сборку. Здесь же каждая страница самодостаточна: открыл в браузере — работает. Дал ссылку клиенту — он видит ровно то же, что ты.
Плюс один неочевидный бонус: когда всё лежит в одном файле, ты не можешь схитрить. Нет «переиспользуемых компонентов» — только реальный дублированный CSS, который заставляет думать о консистентности. Именно это и привело к появлению нормальной дизайн-системы.
Вот полная карта того, что реализовано:
landing.html — первое касание с продуктом. Конвертационный лендинг с блоком социальных доказательств, тарифами, FAQ и CTA. Именно отсюда пользователь должен понять «зачем мне это» и нажать регистрацию.
index.html — главная для авторизованного пользователя. Агрегирует рекомендации, продолжение просмотра, новинки от подписок.
feed.html — сердце платформы. Бесконечная лента с постами, видео, сторис. Фильтрация по типу контента, real-time обновления (заглушка), проверка пустого стейта через checkFeedEmpty(). Именно здесь сосредоточен основной пользовательский трафик, поэтому breadcrumb тут намеренно убран — зачем объяснять, что лента это лента.
search.html — поиск с фильтрами по категориям, цене подписки, онлайн-статусу. Skeleton loader показывается пока «грузятся результаты».
leaderboard.html — топ авторов платформы. Три таба: по доходу, по подписчикам, по активности. Gamification-элемент, который мотивирует авторов конкурировать.
post.html — страница поста. Медиа-превью, описание, лайки, комментарии, кнопка репорта. Для платного контента — paywall-оверлей с кнопкой разблокировки.
video.html — видеоплеер. Кастомные контролы, качество, полный экран. Под видео — блок с похожим контентом и блок автора с кнопкой подписки.
stories.html — вертикальные сторис в стиле Instagram. Тапы влево-вправо, прогресс-бар сверху, ссылка на профиль автора.
live.html — страница прямого эфира. Чат сбоку, счётчик зрителей, кнопка чаевых прямо в стриме. Бейдж LIVE пульсирует — не шутка, это CSS animation: pulse-ring.
session.html — приватная сессия с автором (аналог приватного стрима). Таймер, статус соединения, эксклюзивный доступ.
collection.html — коллекции/альбомы. Сгруппированный контент автора по темам.
bookmarks.html — сохранённый контент пользователя.
auth.html — вход и регистрация в одном файле (таб-переключение). Полная валидация: minlength, pattern на username ([a-zA-Z0-9_]+), проверка совпадения паролей, анимация шейка на невалидных полях. Не просто required атрибуты — реальные проверки с визуальным фидбеком.
onboarding.html — онбординг после регистрации. Выбор интересов, загрузка аватара, настройка уведомлений.
2fa.html — двухфакторная аутентификация. Ввод кода, resend-таймер.
forgot-password.html и verify-email.html — стандартные флоу восстановления с состояниями «отправлено», «истекло», «подтверждено».
Это та часть, на которую я потратил больше всего времени, потому что именно здесь деньги:
pricing.html — тарифы. Три плана, annual-тогл (A/B флаг pricingAnnualToggle), FAQ, гарантия возврата. Визуально выделен средний план — классика конвертационного дизайна.
checkout.html — чекаут. Резюме заказа, выбор способа оплаты, поле промокода. Намеренно минималистичный — меньше отвлечений на шаге оплаты.
wallet.html — кошелёк пользователя. Баланс, история транзакций, топап.
gift.html — подарить подписку другому пользователю.
ppv-unlock.html — разблокировка PPV-контента (pay-per-view). Модалка с превью и ценой.
custom-request.html — кастомный запрос автору: описание, бюджет, дедлайн. Один из самых маржинальных форматов монетизации на таких платформах.
tip-history.html — история чаевых. Кому, сколько, когда.
subscription-manage.html — управление подписками. Активные, истёкшие, автоплатёж, пауза.
creator-dashboard.html — главный экран создателя. Revenue chart, статистика за период, топ-посты по доходу, динамика подписчиков. Именно здесь автор каждое утро открывает приложение и смотрит «как дела». Сделал акцент на положительных дельтах — ▲ +14.3% зелёным цветом поднимает настроение и удерживает авторов на платформе.
model-cabinet.html — личный кабинет автора. Настройки профиля, верификация, документы.
upload.html — загрузка контента. Drag-and-drop, превью, метаданные, выбор доступа (бесплатно / подписка / PPV), теги.
schedule.html — планировщик публикаций. Календарь, очередь постов, отложенный постинг.
analytics.html — детальная аналитика: источники трафика, конверсия в подписку, retention, доход по типам контента.
payouts.html — выплаты. История, статусы, минимальный порог, реквизиты.
promo.html — промоакции и скидки. Промокоды, триальные периоды.
referral.html — реферальная программа автора.
creator-apply.html — заявка на статус автора. Форма верификации.
creator-landing.html — лендинг для рекрутинга авторов. «Начни зарабатывать на своём контенте».
profile.html — профиль пользователя/автора. Медиагрид, статистика, кнопки подписки, блокировки, репорта.
messages.html — мессенджер. Список чатов, диалог, вложения, оплачиваемые сообщения (locked message).
notifications.html — центр уведомлений с группировкой по типу и фильтрацией.
user-cabinet.html — общие настройки пользователя.
account-security.html — безопасность: пароль, 2FA, активные сессии, история входов.
notifications-settings.html — управление уведомлениями. Четыре блока с CSS-only переключателями, настройки сохраняются в localStorage как kol_notif_prefs.
fan-club.html — клуб лояльности для фанатов. Три тира (Bronze / Silver / Gold), таблица привилегий, leaderboard лучших фанов, 8 значков за достижения. Это один из элементов удержания аудитории — люди не уходят, потому что терять прогресс обидно.
affiliate.html — партнёрская программа. Реферальные уровни, дашборд с комиссионными, форма подачи заявки.
press.html — пресс-кит. Скачиваемые медиаматериалы, упоминания в СМИ, гайдлайны бренда.
blog.html — список статей с категориями и поиском.
blog-post.html — шаблон статьи с TOC, related posts и CTA.
help.html — центр помощи. Аккордеон FAQ, поиск по базе знаний, кнопка обращения в поддержку.
report.html — форма жалобы. Шесть типов нарушений (незаконный контент, мошенничество, DMCA, спам, харассмент, другое), drag-and-drop прикрепление файлов, анонимный режим, автогенерация ticket ID в формате RPT-2025-XXXX.
api-docs.html — документация API. 11 разделов, REST эндпоинты с примерами запросов/ответов, OAuth2-схема, вебхуки, SDK для трёх платформ, changelog. 94KB чистого кода.
terms.html · privacy.html · cookie.html · dmca.html · 2257.html — правовая документация.
status.html — статус системы. Индикаторы uptime по компонентам, история инцидентов.
splash.html — экран загрузки приложения с логотипом и прогрессом.
age-gate.html — гейт подтверждения возраста (18+). Обязательный для платформы такого типа.
offline.html — страница без интернета. Авто-определение через navigator.onLine, кнопка повтора, список закэшированных страниц.
404.html · 500.html · maintenance.html — обработка ошибок.
sitemap.html — HTML-карта сайта для пользователей.
Это то, что выросло из необходимости, а не из плана.
Когда у тебя 62 страницы и ни одного фреймворка — либо всё разъезжается через неделю, либо ты садишься и выписываешь токены. Я выбрал второе.
design-system-landing.html — лендинг самой системы
design-system.html — полная живая документация
Платформа тёмная по умолчанию. Четыре слоя фона:
#07071A → body, самый тёмный
#111128 → карточки, модалки, sidebar
#181835 → инпуты, вложенные элементы
#22224A → все бордеры и разделители
Два акцента — #D42B6A (розовый/CTA) и #8B2BE2 (фиолетовый) — всегда работают в паре через linear-gradient(135deg, #D42B6A, #8B2BE2). Это решение принято один раз и не пересматривается. Зелёный #00E676 — только для позитивного (онлайн, успех, рост). Золотой #FFB300 — VIP, чаевые, предупреждения.
Light mode реализован через 73 CSS-селектора класса body.kol-light. Не CSS-переменные (их нет в старых браузерах), а прямые override'ы. Переключение через kolToggleTheme(), состояние в localStorage.
Один шрифт — Inter, Google Fonts. Девять весов. Fluid scaling через clamp() на заголовках. Code-блоки — Fira Code. Это всё. Никаких «заголовок тут 28px, а вот тут 29px потому что так красивее».
Base unit 4px. Все отступы кратны четырём. На 124 страницах это единственный способ не сойти с ума.
Кнопки четырёх вариантов (primary gradient, secondary outlined, ghost pink, иконочные), инпуты с тремя состояниями (default, error с shake-анимацией, success), бейджи четырёх цветов, карточки с hover-трансформом, тогглы (CSS-only, без JS), прогресс-бары, тосты, модалки с backdrop blur, skeleton loaders, empty states.
Каждый компонент задокументирован с живым примером и кодом прямо в design-system.html.
Отдельная боль любого проекта без фреймворка — z-index превращается в гонку вооружений. Здесь я выписал явную иерархию: от 100 (sticky header) до 10500 (панель горячих клавиш). Gamification-элементы (Turbo Tips 10200, Achievement toast 10150) всегда поверх модалок (10100), потому что пользователь должен увидеть, что получил значок.
63 URL в precache. Стратегия Network-first для HTML (чтобы пользователь всегда получал актуальный контент), Cache-first для статики (шрифты, стили). Push-уведомления с action-кнопками «Открыть»/«Закрыть». Background sync для лайков и чаевых — если пользователь нажал Like в оффлайне, действие синхронизируется при восстановлении соединения.
На всех 124 страницах: canonical-ссылки, hreflang для RU/EN/x-default, полные Open Graph теги (og:title, og:description, og:image, og:type), Schema.org JSON-LD (WebSite, WebPage, Product, BreadcrumbList). sitemap.xml с 61 URL, robots.txt.
Зачем это на прототипе? Потому что когда прототип превращается в продукт, SEO-долг — один из самых дорогих. Лучше заложить сразу.
Полный зеркальный EN-каталог в директории /en/. 62 страницы с адаптированными путями (href="../feed.html" вместо href="feed.html"), переведёнными текстами и собственными canonical/hreflang. Переключатель языка в футере на всех страницах.
Это не для галочки.
Turbo Tips — система чаевых с четырьмя тирами визуального фидбека:
- До 100 — 💰 золотая монетка с burst-анимацией
- 100–499 — 💎 зелёный вихрь
- 500–999 — 🔥 огненный взрыв
- 1000+ — 👑 полноэкранный popup со streak-анимацией
Вызов: window.kolFireTip(amount, x, y) — и анимация появляется в точке клика.
Achievement System — восемь значков: первая подписка, топ-фан, большой типпер, early bird, стрики на 7 и 30 дней, VIP-участник, коллекционер. Toast с spring-анимацией cubic-bezier(0.34, 1.56, 0.64, 1) появляется в правом нижнем углу.
Почему это важно? Потому что retention на контент-платформах строится не на контенте (его везде хватает), а на ощущении прогресса и причастности. Человек не уходит с платформы, на которой он «топ-фан» и потратил $500 на чаевые.
Floating Action Button в правом нижнем углу — три действия: загрузить контент, написать сообщение, поиск.
Десять клавишных шорткатов:
?— открыть панель шорткатов/— перейти на поискN— загрузить контентT— переключить темуShift+R— открыть форму репортаG+F/M/N/P/D— навигация: лента, сообщения, уведомления, профиль, дашборд
Это детали, которые замечают продвинутые пользователи и которые делают продукт ощущающимся «настоящим».
Баннер + модалка с раздельными тогглами по четырём категориям (необходимые, аналитика, маркетинг, персонализация). Состояние в localStorage['kol_consent_v2']. EN-версии ведут на ../cookie.html.
На всех 62 страницах (100%). Shimmer-анимация: три слоя — #181835 → #22224A → #181835 — пробегающие справа налево за 1.5 секунды. Скелетон скрывается по событию window.load. Нет никаких спиннеров.
window.KOL_FLAGS = {
newCheckout: false,
showFAB: true,
showShortcutHint: true,
newFeedAlgo: false,
creatorDashboardV2: true,
pricingAnnualToggle: true
}Заглушка для реальной системы флагов. Когда продукт запускается — подключаешь GrowthBook или LaunchDarkly и переключаешь флаги на стороне сервера без деплоя.
window.kolTrack('subscription_started', { plan: 'gold', amount: 12 })Каждое действие пользователя кладётся в localStorage['kol_analytics_queue']. При коннекте к серверу — синхронизируется. Это паттерн offline-first аналитики, который реально используется в production.
Skip-to-content ссылка на каждой странице. :focus-visible outline 2.5px solid #D42B6A — видно, но органично вписывается в палитру. aria-label на интерактивных элементах без текста. role="dialog" на модалках. loading="lazy" на изображениях. lang="ru" и lang="en" на HTML-элементах. Breadcrumbs с aria-label="breadcrumb" на 62/62 страницах.
Такие платформы — не просто «ещё один OnlyFans клон». Рынок creator economy в 2025-м огромен, но большинство западных платформ недоступны или неудобны для русскоязычной аудитории. Несколько точек отличия, которые я закладывал в архитектуру:
Локализация — не просто перевод интерфейса, а полноценный EN-каталог с отдельными SEO-метаданными. Это позволяет одновременно индексироваться в Google.ru и Google.com.
Retention через геймификацию — значки, стрики, leaderboard, fan-club с тирами. Пользователь не уходит, потому что ему жалко терять прогресс.
Мобильное приложение без App Store — PWA с Service Worker даёт иконку на рабочем столе, офлайн-режим и push-уведомления. Для adult content платформ это особенно критично — в App Store их просто нет.
Creator tools — не только загрузка контента, но и аналитика, планировщик, промоакции, кастомные запросы, реферальная программа. Автор должен чувствовать, что у него есть всё нужное в одном месте.
Правовая база — DMCA, 2257, terms, privacy, cookie — всё на месте. Для серьёзных инвесторов это важно с первого дня.
Это прототип, а не production. Честная оценка того, что осталось за рамками:
- Бэкенд: аутентификация, хранение контента, платёжный процессинг
- Реальный видеоплеер (HLS, DRM для PPV)
- Система поиска (Elasticsearch или Typesense)
- Реальная аналитика (вместо stub)
- Тестирование: E2E, unit, accessibility audit инструментами
- Полноценный trap focus в модалках,
aria-expandedна динамических элементах - CDN для медиа
Всё это — следующий этап, который начинается, когда есть финансирование или команда.
Проект сделан как front-end прототип для демонстрации продуктовой идеи и технических возможностей. Backend, платёжные интеграции и реальные медиа в объём работ не входили.