KOL Studio — платформа для авторов эксклюзивного контента и их аудитории. По механике напоминает OnlyFans или Boosty: автор заливает контент, устанавливает цену подписки, зарабатывает на чаевых, PPV-контенте и кастомных запросах. Фан платит, смотрит, взаимодействует.

Только здесь всё это реализовано как полноценный front-end прототип — не мокап в Figma, не набросок в CodePen, а рабочий код, который открывается в браузере, устанавливается как приложение на телефон и ведёт себя как настоящий продукт.

Масштаб v1.1:

• 62 страницы на русском + 62 на английском = 124 HTML-файла
• 12 MB кода, 0 npm-зависимостей, 0 фреймворков
• Полная дизайн-система с токенами, 55+ компонентами и паттернами (v2.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 потому что так красивее».


Spacing

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 стек

Отдельная боль любого проекта без фреймворка — z-index превращается в гонку вооружений. Здесь я выписал явную иерархию: от 100 (sticky header) до 10500 (панель горячих клавиш). Gamification-элементы (Turbo Tips 10200, Achievement toast 10150) всегда поверх модалок (10100), потому что пользователь должен увидеть, что получил значок.

Service Worker v8

63 URL в precache. Стратегия Network-first для HTML (чтобы пользователь всегда получал актуальный контент), Cache-first для статики (шрифты, стили). Push-уведомления с action-кнопками «Открыть»/«Закрыть». Background sync для лайков и чаевых — если пользователь нажал Like в оффлайне, действие синхронизируется при восстановлении соединения.


SEO на 100%

На всех 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 на чаевые.


FAB + 10 горячих клавиш

Floating Action Button в правом нижнем углу — три действия: загрузить контент, написать сообщение, поиск.

Десять клавишных шорткатов:

• ? — открыть панель шорткатов
• / — перейти на поиск
• N — загрузить контент
• T — переключить тему
• Shift+R — открыть форму репорта
• G+F/M/N/P/D — навигация: лента, сообщения, уведомления, профиль, дашборд

Это детали, которые замечают продвинутые пользователи и которые делают продукт ощущающимся «настоящим».


GDPR Consent

Баннер + модалка с раздельными тогглами по четырём категориям (необходимые, аналитика, маркетинг, персонализация). Состояние в localStorage['kol_consent_v2']. EN-версии ведут на ../cookie.html.


Skeleton Loaders

На всех 62 страницах (100%). Shimmer-анимация: три слоя — #181835 → #22224A → #181835 — пробегающие справа налево за 1.5 секунды. Скелетон скрывается по событию window.load. Нет никаких спиннеров.


A/B флаги

window.KOL_FLAGS = {
newCheckout: false,
showFAB: true,
showShortcutHint: true,
newFeedAlgo: false,
creatorDashboardV2: true,
pricingAnnualToggle: true
}

Заглушка для реальной системы флагов. Когда продукт запускается — подключаешь GrowthBook или LaunchDarkly и переключаешь флаги на стороне сервера без деплоя.


Analytics stub

window.kolTrack('subscription_started', { plan: 'gold', amount: 12 })

Каждое действие пользователя кладётся в localStorage['kol_analytics_queue']. При коннекте к серверу — синхронизируется. Это паттерн offline-first аналитики, который реально используется в production.


Accessibility

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 для медиа

Всё это — следующий этап, который начинается, когда есть финансирование или команда.

Самая вирусная механика из Chaturbate. Создатель ставит цель (например, «Ночное Live-шоу — 1000 токенов»), пользователи видят прогресс-бар в реальном времени и нажимают «Поддержать».

Виджет реализован в трёх вариантах:

На карточке в поиске — микро-версия под фото модели. Всего 5px трек и два числа: собрано / максимум. Занимает минимум места, но сразу видно, что у модели активная цель — конверсионный сигнал.

В ленте (feed.html) — пост-формат с интерактивной кнопкой «Поддержать». Нажал — пришли токены, счётчик вырос прямо в DOM без перезагрузки. Когда цель достигнута — тост «🎉 Цель достигнута! Live скоро начнётся!».

На странице профиля (profile.html) — сайдбарный виджет с теми же данными и той же интерактивной кнопкой. Пользователь всегда видит прогресс, пока изучает профиль.

В кабинете создателя (creator-dashboard.html) — форма управления: создать цель, посмотреть текущую, завершить. Три кнопки: «Запустить», «Бустить уведомление», «Завершить».
Данные для всех вариантов идут из единого объекта MODEL_EXT — не дублируются, а расширяют существующий массив MODELSчерез Object.assign.

Аналог Kickstarter, но в реальном времени. Создатель запускает событие с целью и таймером (10 / 15 / 30 / 60 минут) — и оно появляется как баннер в ленте и поиске. Принцип «всё или ничего» создаёт срочность: пользователи торопятся, чтобы не упустить шоу.

Баннер пульсирует (⚡), таймер отсчитывает секунды, заполнение трека обновляется каждую секунду через setInterval. Закрывается крестиком с event.stopPropagation() — чтобы клик по баннеру не срабатывал как переход к профилю.

В кабинете создателя — форма с полями «Название», «Цель в токенах» и выбором длительности через таб-переключатель.

Фиксированный прайс-лист действий с кликабельными ценами. Нажал на «💃 Танец для тебя — 15 токенов» — открывается модалка оплаты с предзаполненной суммой. Это механика, которая снижает барьер для первого чаевого: не нужно думать сколько дать, просто выбираешь из списка.

На странице профиля Tip Menu рендерится через renderTipMenu() из массива m.tipMenu в данных модели. Каждый элемент — div.tip-menu-item с onclick="selectTip(this, price)".

В кабинете — конструктор с добавлением/удалением позиций.

Подписка на 1 / 3 / 12 месяцев с автоматическим расчётом скидок:


Популярный тариф выделен бейджем «ПОПУЛЯРНЫЙ». Предоплаченный год — гарантированный LTV для платформы.

Цены рассчитываются на лету в renderBundles() и подставляются в DOM — достаточно изменить базовую цену в данных модели, пересчёт происходит автоматически.

Полноценный чат-бот для автоматических ответов в личных сообщениях. Реализован в model-cabinet.html как отдельная секция «🤖 Автоответы».

Полноценный чат-бот для автоматических ответов в личных сообщениях. 9 типов триггеров:

• Новый подписчик
• Получен чаевой
• Продление подписки
• Ключевое слово (настраиваемое)
• Истекает подписка
• Разблокировка PPV
• Первое сообщение
• Пользователь не активен 7 дней
• Кастомный запрос

Каждое правило: превью текущего сообщения → раскрытие формы редактирования → textarea с переменными → сохранение. Переменные вставляются кликом на чип: {имя}, {сумма}, {дата}, {ник}, {план}, {ссылка}.

Статистика бота в шапке секции: 247 ответов, 94% покрытие, 1.2с скорость — именно те метрики, которые автор хочет видеть, чтобы понять «работает ли бот».

Создатель может заблокировать трансляцию и контент для выбранных стран. Чипы с флагами показывают заблокированные страны, кнопка × убирает страну из списка. Поиск позволяет быстро найти нужную страну из 15 предзаполненных вариантов.

Для пользователей из заблокированных стран в поиске появляется фильтр-пилюля «🔒 Геоблок (анонимно)» — обратная сторона той же функции. Фанаты могут находить создателей, которые не ограничивают их регион.

Прогрессивная система комиссий — чем больше зарабатываешь, тем меньше отдаёшь платформе:


Топ-авторы не уходят, когда им финансово выгодно оставаться.

Расписание выплат в кошельке: ежемесячно / еженедельно / ежедневно. Ежедневные выплаты разблокируются при достижении Gold-тира — стимул зарабатывать больше. Настройка минимального порога, дата следующей автовыплаты.

Два новых бейджа на карточках в поиске:

• 🟢 Lovense — зелёный бейдж «🎮 Lovense» для моделей с интерактивными игрушками. Самая популярная фича Chaturbate: аудитория платит чаевые — устройство реагирует физически.
• 🟣 VR — фиолетовый бейдж «🥽 VR» для создателей с VR-контентом.

Данные хранятся в MODEL_EXT (lovense: true/false, vr: true/false). Оба бейджа отображаются на карточке над именем модели.

В поиске появился отдельный блок «Новые создатели на платформе» с зелёной рамкой. Карточки авторов с флагом isNew: trueв MODEL_EXT попадают в этот раздел автоматически через renderSpotlight().

Логика: новые авторы получают органическое промо просто по факту регистрации — это снижает барьер входа и помогает набрать первых подписчиков.

Быстрые пилюли — теперь работают

16 кнопок-пилюль над поисковой выдачей (Онлайн, Verified, Live, VIP, Free, PPV, Топ, Cosplay, ASMR, BDSM и др.) раньше только меняли визуальный стейт. Теперь activeFilters подключён к filterModels() и реально фильтрует выдачу.

Маппинг фильтров:

• online → m.online === true
• verified → m.verified === true (новое поле в MODEL_EXT)
• vip → m.tier === 'vip'
• free → m.price === 0
• ppv → m.hasPPV === true
• live → m.online === true
• top → m.followersNum >= 20000
• cosplay, asmr, bdsm, couples → поиск по m.tags

Аккордеон «🎮 Функции»

Новая секция в фильтр-дровере с 6 чекбоксами: Lovense, VR, Геоблок, Tip Menu, Goal, Новые. Подключена к AF.special — тот же механизм, что используют остальные 8 секций фильтра.


Умный init

Страница поиска больше не прыгает сразу в режим результатов при открытии. init() проверяет URL-параметры (?q= / ?category=) и показывает hero-экран или выдачу в зависимости от контекста.

Семь новых задокументированных компонентов с живыми демо:

Прогрессивная система комиссий — чем больше зарабатываешь, тем меньше отдаёшь платформе:




🔴 КРИТИЧЕСКОЕ: lang=«ru" во всех файлах en/

Все 62 файла в папке en/ имели атрибут <html lang="ru"> вместо <html lang="en">. Это влияло сразу на три вещи:

• SEO — поисковики Google/Bing считали английские страницы русскоязычными и не показывали их в английской выдаче
• Скринридеры — NVDA, VoiceOver читали английский текст с русской фонетикой
• Автоперевод браузера — Chrome не предлагал перевод, считая страницу «уже на родном языке»

Исправление: массовая замена <html lang="ru"> → <html lang="en"> во всех 62 файлах. hreflang="ru" в SEO-мета не трогали — они корректны.


🔴 КРИТИЧЕСКОЕ: 200+ русских строк в en/версии

Более 200 строк на русском языке в файлах английской версии сайта. Проблема затрагивала 55+ файлов. Переведено всё:

Toast / JS сообщения




Русские месяцы в en/schedule.html

Массив MONTHS_RU с русскими названиями месяцев был переименован в MONTHS_EN и заполнен английскими значениями. Все три обращения к нему обновлены.

// Было:
const MONTHS_RU = ['Январь','Февраль','Март',...,'Декабрь'];
// Стало:
const MONTHS_EN = ['January','February','March',...,'December'];


Глобальные компоненты (cookie / PWA)

25 файлов в en/ содержали русские строки в глобальных обработчиках:

// Было:
kolShowToast('Настройки cookie сохранены ✓');
kolShowToast('Только необходимые cookie активированы');
kolShowToast('KOL Studio установлена! 🎉');

// Стало:
kolShowToast('Cookie settings saved ✓');
kolShowToast('Only necessary cookies activated');
kolShowToast('KOL Studio installed! 🎉');


Статический HTML

Переведены кнопки, плейсхолдеры, aria-label, title, мета-теги во всех затронутых файлах. В том числе:

• Хлебные крошки (breadcrumbs) с русскими словами
• Кнопки ‘Подписаться’ → 'Subscribe'
• Футерные ссылки ‘Помощь’ → 'Help'
• Все названия месяцев в компонентах дат и календарях

🟠 FAB-меню: ссылки и текст в en/

Плавающее меню быстрого доступа во всех файлах en/ содержало ссылки на корневые (русские) страницы:

<!-- Было: -->
<a href="../upload.html">📤 Загрузить</a>
<a href="../messages.html">💬 Написать</a>
<a href="../search.html">🔍 Поиск</a>

<!-- Стало: -->
<a href="upload.html">📤 Upload</a>
<a href="messages.html">💬 Message</a>
<a href="search.html">🔍 Search</a>

Также переведены описания клавиатурных сокращений в shortcuts-модалке (kol-sc-desc): Поиск→Search, Загрузить контент→Upload content, Уведомления→Notifications и ещё 9 ярлыков. Затронуто ~50 файлов.


🟠 Cookie-баннер на русском в 25 файлах

Глобальный cookie-баннер в 25 файлах en/ отображался на русском:

<!-- Было: -->
🍪 Мы используем файлы cookie для улучшения работы сайта и анализа трафика.
<a href="../cookie.html">Подробнее</a>

<!-- Стало: -->
🍪 We use cookies to improve your experience and analyze traffic.
<a href="cookie.html">Learn more</a>

Одновременно исправлена ссылка ../cookie.html → cookie.html
(указывала на русскую версию страницы).


🟠 Дублирующийся id в wallet.html

В обоих файлах (wallet.html и en/wallet.html) toast-элемент имел два атрибута id на одном теге:

<!-- Было: -->
<div id="toast" style="..." id="toastEl">

<!-- Стало: -->
<div style="..." id="toastEl">

По спецификации HTML браузер использует первый id, поэтому. getElementById('toastEl’) возвращал null — toast-уведомления в кошельке не работали совсем. Удалён лишний id="toast".


🟠 Service Worker: en/ страницы не кэшировались

Массив PRECACHE_URLS в sw.js содержал только 62 корневых страницы. Английская версия сайта не была доступна офлайн и не индексировалась PWA-кэшем.

Добавлены все 62 страницы /en/ в PRECACHE_URLS. PWA теперь полноценно работает для обеих языковых версий.


🟠 CSS Light Theme: отсутствующие переменны

Тёмная тема определяла:

:root {
--text-sub: #9090BB;
--text-muted: #505075;
}

Светлая тема не переопределяла эти переменные, поэтому при body.kol-light тёмные цвета (#9090BB, #505075) оставались на светлом фоне — текст был нечитаем.

Добавлены корректные значения в body.kol-light во всех 84 HTML-файлах:

body.kol-light {
/* было: */
--text2: #4A4A6A;
--text3: #8A8AAA;

/* стало: */
--text2: #4A4A6A;
--text3: #8A8AAA;
--text-sub: #6060A0; /* читаемый на светлом фоне */
--text-muted: #8080A8; /* читаемый на светлом фоне */
}


🟡 Service Worker: версия в логе

Кэш-имя в sw.js — kol-studio-v8, но console.log выводил v5. Исправлено и переведено:

// Было:
console.log('[SW] KOL Studio Service Worker загружен v5');
// Стало:
console.log('[SW] KOL Studio Service Worker loaded v8');

🔴 Критические исправления

Дублирование мета-тегов (6 файлов)

auth.html, splash.html, 404.html и их EN-версии содержали весь блок PWA/OG/Twitter-тегов дважды в <head>. Удалён дублирующий блок (17 строк) из каждого файла.



🟠 Серьёзные исправления

Локаль и SEO в EN-файлах

• og:locale="ru_RU" → en_US в 16 EN-файлах
• 89 переводов: og:title, og:description, twitter:title, twitter:description — всё было на русском в английской версии

Хлебные крошки (все 124 файла)

• .kol-breadcrumb .sep { font-size: 12px } → 13px — разделитель › был на 1px мельче, что давало вертикальное смещение несмотря на align-items: center
• Удалены дублирующиеся <div class="breadcrumb"> из blog-post.html, custom-request.html (RU + EN)
• creator-dashboard.html: заменён локальный .breadcrumb (.sep { opacity: .4 }) на стандартный <nav class="kol-breadcrumb">

Десктоп light-тема в creator-dashboard.html

• --muted не переопределялся в body.kol-light → тёмные цвета (#7878A0) на светлом фоне
• Добавлены --muted, --text, --card, --card2, --border в light-тему (RU + EN)

Переводы EN

• en/auth.html tagline: «Твой мир эксклюзивного контента» → «Your world of exclusive content»
• en/auth.html title: «Sign In / Регистрация» → «Sign In / Register»
• en/custom-request.html хлебные крошки переведены с русского

🗑️ Cleanup

• Удалены 3 неиспользуемых SVG-файла из mockups/ (не были referenced ни в одном HTML/MD)
• Удалён неотслеживаемый kol-studio-analysis.md (рабочие заметки разработчика)

🟠 BUG 1 — Битые навигационные ссылки (5 исправлений)


login.html никогда не существовал — страница называется auth.html. Директории /ru/ нет в репозитории. В en/sitemap.html все ссылки раздела «Английская версия» содержали лишний префикс en/, из-за чего вели на несуществующие /en/en/*.


🟠 BUG 2 — PWA Service Worker не регистрировался на EN-страницах (35 файлов)

28 файлов содержали register("sw.js") — относительный путь, который из /en/*.html резолвился в несуществующий /en/sw.js:
// было (broken) navigator.serviceWorker.register("sw.js") // стало (fixed) navigator.serviceWorker.register("/sw.js")

7 файлов (2257.html, bookmarks.html, cookie.html, dmca.html, forgot-password.html, verify-email.html, video.html) не имели регистрации SW вообще — добавлен стандартный сниппет перед </body>.

После фикса все 62 EN-страницы корректно регистрируют /sw.js.