site: add RU/EN language toggle with full i18n on landing

2026-08-20 09:31:16 +00:00
parent aaecf7e395
commit 3755411954
3 changed files with 359 additions and 93 deletions
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -20,14 +20,20 @@
      <span>Zern</span>
    </a>
    <ul class="nav-links">
-      <li><a href="#server">Server</a></li>
-      <li><a href="#highlights">Highlights</a></li>
-      <li><a href="#theme">Season</a></li>
-      <li><a href="#features">Features</a></li>
-      <li><a href="#download">Download</a></li>
-      <li><a href="#news">News</a></li>
+      <li><a href="#server" data-i18n="nav.server">Сервер</a></li>
+      <li><a href="#highlights" data-i18n="nav.highlights">Хайлайты</a></li>
+      <li><a href="#theme" data-i18n="nav.season">Сезон</a></li>
+      <li><a href="#features" data-i18n="nav.features">Возможности</a></li>
+      <li><a href="#download" data-i18n="nav.download">Скачать</a></li>
+      <li><a href="#news" data-i18n="nav.news">Новости</a></li>
    </ul>
-    <a class="nav-cta" href="#download">Play now</a>
+    <div class="nav-right">
+      <button class="lang-toggle" id="langToggle" type="button" aria-label="Switch language">
+        <span class="lang-toggle-label" id="langToggleLabel">EN</span>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+      </button>
+      <a class="nav-cta" href="#download" data-i18n="nav.play">Играть сейчас</a>
+    </div>
  </div>
 </nav>

@@ -40,21 +46,21 @@
  <div class="hero-diamond hero-diamond--3" aria-hidden="true"></div>

  <div class="hero-inner" data-parallax="0.15">
-    <p class="hero-kicker">CUSTOM MINECRAFT LAUNCHER</p>
-    <h1 class="hero-title">Awaken from <br><span class="hero-title-accent">the cold.</span></h1>
-    <p class="hero-sub">Zern brings your favourite modpacks to life. One launcher, every loader, no hassle — built for the ZernMC server and beyond.</p>
+    <p class="hero-kicker" data-i18n="hero.kicker">КАСТОМНЫЙ MINECRAFT ЛАУНЧЕР</p>
+    <h1 class="hero-title" data-i18n-html="hero.title">Очнись от<br><span class="hero-title-accent">холода.</span></h1>
+    <p class="hero-sub" data-i18n="hero.sub">Zern оживляет твои любимые модпаки. Один лаунчер, любой загрузчик, без лишних хлопот — создан для сервера ZernMC и не только.</p>
    <div class="hero-actions">
      <a class="btn btn-primary" href="#download">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M4 21h16"/></svg>
-        Download launcher
+        <span data-i18n="hero.download">Скачать лаунчер</span>
      </a>
-      <a class="btn btn-ghost" href="#features">Explore</a>
+      <a class="btn btn-ghost" href="#features" data-i18n="hero.explore">Обзор</a>
    </div>
    <p class="hero-meta">v<span id="hero-version">—</span> · <span id="hero-size">—</span> · Windows</p>
  </div>

  <div class="scroll-hint" data-parallax="0.3">
-    <span>Scroll to explore</span>
+    <span data-i18n="hero.scroll">Листай вниз</span>
    <div class="scroll-hint-line"><i></i></div>
  </div>
 </header>
@@ -64,24 +70,24 @@
 <section class="section server" id="server">
  <div class="section-head">
    <span class="section-index">01 / 06</span>
-    <h2 class="section-title">The server is <span class="accent">alive.</span></h2>
-    <p class="section-sub">ZernMC is a custom Minecraft server with its own lore, hand-written plugins and a living community. This is what's happening right now.</p>
+    <h2 class="section-title" data-i18n-html="server.title">Сервер <span class="accent">жив.</span></h2>
+    <p class="section-sub" data-i18n="server.sub">ZernMC — это кастомный Minecraft-сервер со своим лором, самописными плагинами и живым комьюнити. Вот что происходит прямо сейчас.</p>
  </div>

  <div class="server-stats">
    <div class="server-card">
-      <div class="server-card-label">Status</div>
-      <div class="server-card-value" id="srv-status"><span class="status-dot status-dot--loading"></span> Checking…</div>
-      <div class="server-card-sub" id="srv-version">1.20.1 / OBТ</div>
+      <div class="server-card-label" data-i18n="server.status">Статус</div>
+      <div class="server-card-value" id="srv-status"><span class="status-dot status-dot--loading"></span> <span data-i18n="server.checking">Проверяем…</span></div>
+      <div class="server-card-sub" id="srv-version">1.20.1 / ОБТ</div>
    </div>
    <div class="server-card">
-      <div class="server-card-label">Players online</div>
+      <div class="server-card-label" data-i18n="server.players">Игроков онлайн</div>
      <div class="server-card-value" id="srv-players">— / —</div>
      <div class="server-card-sub">mc.zernmc.ru</div>
    </div>
    <div class="server-card">
-      <div class="server-card-label">Mode</div>
-      <div class="server-card-value">Survival <span class="server-season">· Season Prologue</span></div>
+      <div class="server-card-label" data-i18n="server.mode">Режим</div>
+      <div class="server-card-value">Survival <span class="server-season">· <span data-i18n="server.season">Сезон Prologue</span></span></div>
      <div class="server-card-sub">1.21.1 NeoForge · Create: Aeronautics</div>
    </div>
  </div>
@@ -90,14 +96,14 @@
 <section class="section highlights" id="highlights">
  <div class="section-head">
    <span class="section-index">02 / 06</span>
-    <h2 class="section-title">Server <span class="accent">highlights.</span></h2>
-    <p class="section-sub">Moments captured on the ZernMC server — wars, builds and chaos.</p>
+    <h2 class="section-title" data-i18n-html="highlights.title">Хайлайты <span class="accent">сервера.</span></h2>
+    <p class="section-sub" data-i18n="highlights.sub">Моменты, запечатлённые на сервере ZernMC — войны, постройки и хаос.</p>
  </div>

  <div class="carousel">
    <div class="carousel-track" id="carousel"></div>
-    <button class="carousel-btn carousel-btn--prev" id="carouselPrev" aria-label="Previous">‹</button>
-    <button class="carousel-btn carousel-btn--next" id="carouselNext" aria-label="Next">›</button>
+    <button class="carousel-btn carousel-btn--prev" id="carouselPrev" data-i18n-aria="carousel.prev">‹</button>
+    <button class="carousel-btn carousel-btn--next" id="carouselNext" data-i18n-aria="carousel.next">›</button>
    <div class="carousel-dots" id="carouselDots"></div>
  </div>
 </section>
@@ -105,8 +111,8 @@
 <section class="section features" id="features">
  <div class="section-head">
    <span class="section-index">03 / 06</span>
-    <h2 class="section-title">Everything <span class="accent">you need.</span></h2>
-    <p class="section-sub">A launcher that does the heavy lifting, so you can just play.</p>
+    <h2 class="section-title" data-i18n-html="features.title">Всё, что <span class="accent">тебе нужно.</span></h2>
+    <p class="section-sub" data-i18n="features.sub">Лаунчер, который делает всю тяжёлую работу, чтобы ты просто играл.</p>
  </div>

  <div class="features-grid">
@@ -115,8 +121,8 @@
      <div class="feature-icon" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
      </div>
-      <h3>Forge, NeoForge, Fabric</h3>
-      <p>Every major mod loader handled automatically. Libraries are prefetched and verified, so installs just work — even on slow networks.</p>
+      <h3 data-i18n="features.forge.title">Forge, NeoForge, Fabric</h3>
+      <p data-i18n="features.forge.sub">Все основные модлоадеры подхватываются автоматически. Библиотеки предзагружаются и проверяются, так что установка работает — даже на медленном интернете.</p>
    </article>

    <article class="feature-card">
@@ -124,8 +130,8 @@
      <div class="feature-icon" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
      </div>
-      <h3>Dark, fast, native UI</h3>
-      <p>A lightweight JavaFX interface with a clean dark theme. Starts quick, responds instantly, and stays out of your way.</p>
+      <h3 data-i18n="features.ui.title">Тёмный, быстрый нативный UI</h3>
+      <p data-i18n="features.ui.sub">Лёгкий интерфейс на JavaFX с чистым тёмным оформлением. Быстро запускается, мгновенно реагирует и не мешает.</p>
    </article>

    <article class="feature-card">
@@ -133,8 +139,8 @@
      <div class="feature-icon" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 18H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M9 22v-4"/><path d="M15 22v-4"/></svg>
      </div>
-      <h3>Smart mirrors & proxy</h3>
-      <p>Downloads route through fast mirrors with automatic failover. Blocked or throttled? The proxy takes over so you never stall at 80%.</p>
+      <h3 data-i18n="features.proxy.title">Умные зеркала и прокси</h3>
+      <p data-i18n="features.proxy.sub">Загрузки идут через быстрые зеркала с автоматическим фолбэком. Заблокировали или зарезали скорость? Прокси подхватит — ты больше не зависнешь на 80%.</p>
    </article>

    <article class="feature-card">
@@ -142,8 +148,8 @@
      <div class="feature-icon" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 0 0-9 14l2 5 5-2A10 10 0 1 0 12 2z"/><path d="M8.5 12h.01"/><path d="M12 12h.01"/><path d="M15.5 12h.01"/></svg>
      </div>
-      <h3>News & server status</h3>
-      <p>Changelogs, events and updates stream straight into the launcher. You always know what's new before you hit play.</p>
+      <h3 data-i18n="features.news.title">Новости и статус сервера</h3>
+      <p data-i18n="features.news.sub">Чейнджлоги, ивенты и обновления приходят прямо в лаунчер. Ты всегда знаешь, что нового, ещё до нажатия «Играть».</p>
    </article>

    <article class="feature-card">
@@ -151,8 +157,8 @@
      <div class="feature-icon" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      </div>
-      <h3>One-click pack install</h3>
-      <p>Pick a pack, hit install. Version manifests, vanilla assets and libraries are pulled and verified automatically. Simple.</p>
+      <h3 data-i18n="features.pack.title">Установка сборки в один клик</h3>
+      <p data-i18n="features.pack.sub">Выбери сборку и жми «Установить». Манифесты версий, ванильные ассеты и библиотеки подтягиваются и проверяются автоматически. Просто.</p>
    </article>
  </div>
 </section>
@@ -160,40 +166,40 @@
 <section class="section theme" id="theme">
  <div class="section-head section-head--center">
    <span class="section-index">04 / 06</span>
-    <h2 class="section-title">What's inside <span class="accent">the season.</span></h2>
-    <p class="section-sub">Prologue — a modded season built around Create: Aeronautics, war and survival. OBT is the testing ground for the whole idea.</p>
+    <h2 class="section-title" data-i18n-html="theme.title">Что внутри <span class="accent">сезона.</span></h2>
+    <p class="section-sub" data-i18n="theme.sub">Prologue — модовый сезон на базе Create: Aeronautics, война и выживание. ОБТ — полигон, где всё это обкатывается.</p>
  </div>

  <div class="theme-grid">
    <article class="theme-card">
-      <span class="theme-tag">OBT · 1.20.1 Forge</span>
-      <h3>War in Zarya</h3>
-      <p>Two-day event set in the city of Zarya: the Fenix group attacks, Lastochka defends, and civilians pick a side — or rise up. Military rules apply.</p>
+      <span class="theme-tag" data-i18n="theme.zarya.tag">ОБТ · 1.20.1 Forge</span>
+      <h3 data-i18n="theme.zarya.title">Война в Заре</h3>
+      <p data-i18n="theme.zarya.sub">Двухдневный ивент в городе Заря: группировка «Феникс» атакует, «Ласточка» обороняется, а жители выбирают сторону — или поднимают бунт. Военные правила.</p>
    </article>
    <article class="theme-card">
-      <span class="theme-tag">OBT · test stage</span>
-      <h3>Open beta server</h3>
-      <p>The beta is an event server: city battles, an atomic-reactor city-life scenario and rule sets that will shape the real season.</p>
+      <span class="theme-tag" data-i18n="theme.obt.tag">ОБТ · тестовая стадия</span>
+      <h3 data-i18n="theme.obt.title">Открытый бета-сервер</h3>
+      <p data-i18n="theme.obt.sub">Бета — это ивентовый сервер: городские бои, сценарий атомного реактора и правила, которые лягут в основу настоящего сезона.</p>
    </article>
    <article class="theme-card">
-      <span class="theme-tag">Season · 1.21.1 NeoForge</span>
-      <h3>Ships in the sky</h3>
-      <p>Create: Aeronautics gives you airships, submarines and flying contraptions. Trains, diesel engines, big cannons and a nuclear reactor to master.</p>
+      <span class="theme-tag" data-i18n="theme.air.tag">Сезон · 1.21.1 NeoForge</span>
+      <h3 data-i18n="theme.air.title">Корабли в небе</h3>
+      <p data-i18n="theme.air.sub">Create: Aeronautics даёт дирижабли, субмарины и летающие механизмы. Поезда, дизели, большие пушки и атомный реактор — осваивай.</p>
    </article>
    <article class="theme-card">
-      <span class="theme-tag">Season · Prologue</span>
-      <h3>A year-long run</h3>
-      <p>Each season is a marathon, not a sprint. Start this chapter from day one and shape it with the community.</p>
+      <span class="theme-tag" data-i18n="theme.year.tag">Сезон · Prologue</span>
+      <h3 data-i18n="theme.year.title">Марафон на год</h3>
+      <p data-i18n="theme.year.sub">Сезон — это марафон, а не спринт. Начни эту главу с первого дня и строй её вместе с комьюнити.</p>
    </article>
    <article class="theme-card">
-      <span class="theme-tag">Server</span>
-      <h3>Own lore & plugins</h3>
-      <p>Hand-written plugins, events written for the server story, and systems the launcher integrates with out of the box.</p>
+      <span class="theme-tag" data-i18n="theme.lore.tag">Сервер</span>
+      <h3 data-i18n="theme.lore.title">Свой лор и плагины</h3>
+      <p data-i18n="theme.lore.sub">Самописные плагины, ивенты под историю сервера и системы, которые из коробки работают с лаунчером.</p>
    </article>
    <article class="theme-card">
-      <span class="theme-tag">Community</span>
-      <h3>Voice & friends</h3>
-      <p>Simple Voice Chat in-game, a friends system in the launcher and a Telegram community that runs the show — decisions are voted on by players.</p>
+      <span class="theme-tag" data-i18n="theme.community.tag">Комьюнити</span>
+      <h3 data-i18n="theme.community.title">Голос и друзья</h3>
+      <p data-i18n="theme.community.sub">Simple Voice Chat в игре, система друзей в лаунчере и Telegram-комьюнити, которое реально рулит — решения принимаются голосованием игроков.</p>
    </article>
  </div>
 </section>
@@ -202,8 +208,8 @@
  <div class="download-inner">
    <div class="section-head section-head--center">
      <span class="section-index">05 / 06</span>
-      <h2 class="section-title">Get <span class="accent">Zern.</span></h2>
-      <p class="section-sub">Download the launcher for Windows and join the ZernMC server.</p>
+      <h2 class="section-title" data-i18n-html="download.title">Скачать <span class="accent">Zern.</span></h2>
+      <p class="section-sub" data-i18n="download.sub">Скачай лаунчер для Windows и заходи на сервер ZernMC.</p>
    </div>

    <div class="download-card">
@@ -216,22 +222,22 @@
      </div>
      <a class="btn btn-primary btn-block" id="download-btn" href="/launcher/download/latest">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M4 21h16"/></svg>
-        Download latest
+        <span data-i18n="download.latest">Скачать актуальную версию</span>
      </a>
      <div class="download-mirrors" id="mirrors">
-        <span class="mirrors-label">Mirrors</span>
+        <span class="mirrors-label" data-i18n="download.mirrors">Зеркала</span>
      </div>
    </div>

-    <p class="download-note">No paywalls, no ads. Just a launcher. System requirements: Windows 10+, 4 GB RAM.</p>
+    <p class="download-note" data-i18n="download.note">Без платных подписок и рекламы. Просто лаунчер. Системные требования: Windows 10+, 4 ГБ ОЗУ.</p>
  </div>
 </section>

 <section class="section news" id="news">
  <div class="section-head">
    <span class="section-index">06 / 06</span>
-    <h2 class="section-title">What's <span class="accent">new.</span></h2>
-    <p class="section-sub">Latest changelogs and updates from the Zern team.</p>
+    <h2 class="section-title" data-i18n-html="news.title">Что <span class="accent">нового.</span></h2>
+    <p class="section-sub" data-i18n="news.sub">Последние чейнджлоги и обновления команды Zern.</p>
  </div>

  <div class="news-grid" id="news-grid">
@@ -249,7 +255,7 @@
      <img src="/img/zernmc.svg" alt="Zern" width="28" height="28">
      <span>ZernMC</span>
    </div>
-    <p class="footer-note">© <span id="year">2026</span> ZernMC. Not affiliated with Mojang or Microsoft. Minecraft is a trademark of Mojang AB.</p>
+    <p class="footer-note">© <span id="year">2026</span> ZernMC. <span data-i18n="footer.note">Не аффилирован с Mojang или Microsoft. Minecraft — торговая марка Mojang AB.</span></p>
  </div>
 </footer>