site: add launcher showcase — auto-rotating non-interactive UI tour

server/site/index.html

@@ -24,6 +24,7 @@
       <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="#showcase" data-i18n="nav.showcase">Лаунчер</a></li>
       <li><a href="#download" data-i18n="nav.download">Скачать</a></li>
       <li><a href="#news" data-i18n="nav.news">Новости</a></li>
     </ul>
@@ -163,9 +164,170 @@
   </div>
 </section>
 
+<section class="section showcase" id="showcase">
+  <div class="section-head section-head--center">
+    <span class="section-index">04 / 07</span>
+    <h2 class="section-title" data-i18n-html="showcase.title">Показываем <span class="accent">лаунчер</span></h2>
+    <p class="section-sub" data-i18n="showcase.sub">Никаких статичных скриншотов — живой тур по интерфейсу. Нужно просто наблюдать: лаунчер сам открывает свои экраны.</p>
+  </div>
+
+  <div class="launcher-preview" id="launcherPreview" role="img" aria-label="ZernMC Launcher preview, auto-rotating screens" data-i18n-aria="preview.aria">
+    <div class="launcher-window">
+      <div class="launcher-titlebar">
+        <div class="win-dots" aria-hidden="true"><span></span><span></span><span></span></div>
+        <span class="launcher-titlebar-name">
+          <svg class="win-icon" viewBox="0 0 56 56" fill="none" aria-hidden="true"><rect width="56" height="56" rx="14" fill="#e94560"/><path d="M18 28 L28 18 L38 28 L28 38 Z" fill="#fff" opacity="0.9"/></svg>
+          ZernMC Launcher <span id="preview-version">—</span>
+        </span>
+      </div>
+      <div class="launcher-preview-body" id="launcherPreviewBody">
+
+        <div class="preview-scene scene-login is-active" data-key="login">
+          <div class="scene-login-inner">
+            <div class="pv-brand">
+              <svg width="40" height="40" viewBox="0 0 56 56" fill="none" aria-hidden="true"><rect width="56" height="56" rx="14" fill="#e94560"/><path d="M18 28 L28 18 L38 28 L28 38 Z" fill="#fff" opacity="0.9"/></svg>
+            </div>
+            <h3 class="pv-title" data-i18n="preview.signIn">Вход</h3>
+            <div class="pv-field"><label data-i18n="preview.username">Логин</label><div class="pv-input"></div></div>
+            <div class="pv-field"><label data-i18n="preview.password">Пароль</label><div class="pv-input"></div></div>
+            <div class="pv-btn" data-i18n="preview.signIn">Вход</div>
+          </div>
+        </div>
+
+        <div class="preview-scene scene-packs" data-key="packs">
+          <div class="pv-sidebar">
+            <div class="pv-sb-brand">
+              <svg width="24" height="24" viewBox="0 0 56 56" fill="none" aria-hidden="true"><rect width="56" height="56" rx="14" fill="#e94560"/><path d="M18 28 L28 18 L38 28 L28 38 Z" fill="#fff" opacity="0.9"/></svg>
+              <span>ZernMC<em>v<span class="pv-sb-ver">2.3.1</span></em></span>
+            </div>
+            <div class="pv-sb-nav">
+              <span class="pv-nav-item is-active" title="Packs">
+                <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"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+                <span data-i18n="preview.nav.packs">Сборки</span>
+              </span>
+              <span class="pv-nav-item" title="News">
+                <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"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9h4"/><path d="M18 14h-8"/><path d="M15 18h-5"/><path d="M10 6h8v4h-8V6Z"/></svg>
+                <span data-i18n="preview.nav.news">Новости</span>
+              </span>
+              <span class="pv-nav-item" title="Friends">
+                <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"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                <span data-i18n="preview.nav.friends">Друзья</span>
+              </span>
+            </div>
+            <div class="pv-sb-section">
+              <span class="pv-sb-section-title" data-i18n="preview.serverPacks">Серверные сборки</span>
+              <div class="pv-pack-item">
+                <span class="pv-pack-name">Zern-OBT</span>
+                <span class="pv-pack-meta">1.20.1 · forge</span>
+              </div>
+              <div class="pv-pack-item is-active">
+                <span class="pv-pack-name">Zern-Prologue</span>
+                <span class="pv-pack-meta">1.21.1 · neoforge</span>
+              </div>
+            </div>
+            <div class="pv-sb-section">
+              <span class="pv-sb-section-title" data-i18n="preview.localPacks">Локальные сборки</span>
+              <div class="pv-pack-item">
+                <span class="pv-pack-name">Vanilla</span>
+                <span class="pv-pack-meta">1.20.1</span>
+              </div>
+            </div>
+            <div class="pv-sb-user">
+              <span class="pv-avatar">Z</span>
+              <span class="pv-user-meta"><em>zernplayer</em><i class="pv-badge">FREE</i></span>
+              <svg class="pv-sb-action" width="14" height="14" 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="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+              <svg class="pv-sb-action" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+            </div>
+          </div>
+          <div class="pv-main">
+            <div class="pv-main-head">
+              <div>
+                <h3>Zern-Prologue</h3>
+                <div class="pv-tags"><span class="pv-tag pv-tag-mc">1.21.1</span><span class="pv-tag">neoforge</span></div>
+              </div>
+              <div class="pv-stats">
+                <span><b>47.4</b><i data-i18n="preview.stat.loader">Загрузчик</i></span>
+                <span><b>130</b><i data-i18n="preview.stat.files">Файлы</i></span>
+                <span><b>1.8 ГБ</b><i data-i18n="preview.stat.size">Размер</i></span>
+              </div>
+            </div>
+            <div class="pv-gallery" aria-hidden="true">
+              <span class="pv-gallery-item pv-gallery-item--1"></span>
+              <span class="pv-gallery-item pv-gallery-item--2"></span>
+              <span class="pv-gallery-item pv-gallery-item--3"></span>
+            </div>
+            <div class="pv-playbar">
+              <span>Zern-Prologue · <em data-i18n="preview.ready">Готов к запуску</em></span>
+              <span class="pv-play">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                <i data-i18n="preview.play">Играть</i>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="preview-scene scene-news" data-key="news">
+          <div class="pv-panel">
+            <h3 class="pv-view-title" data-i18n="preview.nav.news">Новости</h3>
+            <div class="pv-news-item">
+              <span class="pv-news-tag pv-tag-update" data-i18n="preview.news.update">Обновление</span>
+              <b data-i18n="preview.news1.title">Сезон Prologue запущен</b>
+              <p data-i18n="preview.news1.body">Небо принадлежит дирижаблям. Добро пожаловать в Prologue — 1.21.1 NeoForge, Create: Aeronautics.</p>
+            </div>
+            <div class="pv-news-item">
+              <span class="pv-news-tag pv-tag-event" data-i18n="preview.news.event">Событие</span>
+              <b data-i18n="preview.news2.title">Война в Заре</b>
+              <p data-i18n="preview.news2.body">«Феникс» атакует, «Ласточка» защищает. Жители выбирают сторону — или бунт.</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="preview-scene scene-settings" data-key="settings">
+          <div class="pv-panel">
+            <h3 class="pv-view-title" data-i18n="preview.nav.settings">Настройки</h3>
+            <div class="pv-setting-row">
+              <div class="pv-setting-label" data-i18n="preview.settings.ram">Выделено ОЗУ</div>
+              <div class="pv-setting-control">
+                <div class="pv-range" aria-hidden="true"><span class="pv-range-fill"></span><span class="pv-range-knob"></span></div>
+                <span class="pv-range-value">4 ГБ</span>
+              </div>
+            </div>
+            <div class="pv-setting-row">
+              <div class="pv-setting-label" data-i18n="preview.settings.resolution">Разрешение</div>
+              <div class="pv-setting-control"><span class="pv-chip">1280</span><span class="pv-times">×</span><span class="pv-chip">720</span></div>
+            </div>
+            <div class="pv-setting-row">
+              <div class="pv-setting-label" data-i18n="preview.settings.language">Язык</div>
+              <div class="pv-setting-control"><span class="pv-chip pv-chip--wide">Русский</span></div>
+            </div>
+            <div class="pv-setting-row">
+              <div class="pv-setting-label" data-i18n="preview.settings.server">Сервер</div>
+              <div class="pv-setting-control"><span class="pv-badge pv-badge-online"><i></i><span data-i18n="preview.online">Онлайн</span></span></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="preview-scene scene-install" data-key="install">
+          <div class="scene-install-inner">
+            <div class="pv-brand">
+              <svg width="40" height="40" viewBox="0 0 56 56" fill="none" aria-hidden="true"><rect width="56" height="56" rx="14" fill="#e94560"/><path d="M18 28 L28 18 L38 28 L28 38 Z" fill="#fff" opacity="0.9"/></svg>
+            </div>
+            <h3 class="pv-title" data-i18n="preview.install.title">Установка сборки…</h3>
+            <div class="pv-progress" aria-hidden="true"><span class="pv-progress-fill"></span></div>
+            <p class="pv-stage" data-i18n="preview.install.stage">Загрузка модов 130/130 · 1.8 ГБ</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="preview-dots" id="previewDots" aria-hidden="true"></div>
+    <p class="preview-caption" id="previewCaption" data-i18n="preview.login">Вход</p>
+  </div>
+</section>
+
 <section class="section theme" id="theme">
   <div class="section-head section-head--center">
-    <span class="section-index">04 / 06</span>
+    <span class="section-index">05 / 07</span>
     <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>
@@ -207,7 +369,7 @@
 <section class="section download" id="download">
   <div class="download-inner">
     <div class="section-head section-head--center">
-      <span class="section-index">05 / 06</span>
+      <span class="section-index">06 / 07</span>
       <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>
@@ -235,7 +397,7 @@
 
 <section class="section news" id="news">
   <div class="section-head">
-    <span class="section-index">06 / 06</span>
+    <span class="section-index">07 / 07</span>
     <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>