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

server/site/css/style.css

@@ -819,6 +819,462 @@ ul { list-style: none; }
   transform: none;
 }
 
+/* ---------- Launcher showcase ---------- */
+
+.launcher-preview {
+  max-width: 920px;
+  margin: 0 auto;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+}
+
+.launcher-window {
+  position: relative;
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--bg-deep);
+  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(233, 69, 96, 0.06);
+}
+
+.launcher-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  background: var(--bg-elevated);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.win-dots { display: flex; gap: 7px; }
+.win-dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
+.win-dots span:first-child { background: #ff5f57; }
+.win-dots span:nth-child(2) { background: #febc2e; }
+.win-dots span:nth-child(3) { background: #28c840; }
+
+.launcher-titlebar-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.win-icon { width: 16px; height: 16px; border-radius: 4px; }
+
+.launcher-preview-body {
+  position: relative;
+  height: 430px;
+  background:
+    radial-gradient(700px 300px at 70% -20%, rgba(233, 69, 96, 0.08), transparent 60%),
+    var(--bg-deep);
+}
+
+.preview-scene {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transform: translateY(10px) scale(0.995);
+  transition: opacity .55s ease, transform .55s ease;
+  pointer-events: none;
+}
+
+.preview-scene.is-active {
+  opacity: 1;
+  transform: none;
+}
+
+/* --- login scene --- */
+
+.scene-login { display: flex; align-items: center; justify-content: center; }
+
+.scene-login-inner {
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 28px;
+  background: var(--bg-surface);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 12px;
+}
+
+.pv-brand { display: flex; justify-content: center; }
+
+.pv-title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 700;
+  margin: 4px 0 6px;
+}
+
+.pv-field { display: flex; flex-direction: column; gap: 6px; }
+.pv-field label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
+
+.pv-input {
+  height: 38px;
+  background: var(--bg-inset);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 6px;
+}
+
+.pv-btn {
+  margin-top: 6px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* --- packs scene --- */
+
+.scene-packs { display: flex; }
+
+.pv-sidebar {
+  width: 200px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 14px;
+  background: var(--bg-surface);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.pv-sb-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
+.pv-sb-brand svg { border-radius: 5px; }
+.pv-sb-brand em { display: block; font-style: normal; font-weight: 500; font-size: 10px; color: var(--text-muted); }
+
+.pv-sb-nav { display: flex; flex-direction: column; gap: 2px; }
+
+.pv-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 9px;
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  border: 1px solid transparent;
+}
+
+.pv-nav-item.is-active { color: var(--accent); background: var(--accent-soft); border-color: rgba(233, 69, 96, 0.2); }
+
+.pv-sb-section { display: flex; flex-direction: column; gap: 5px; }
+
+.pv-sb-section-title {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.pv-pack-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 7px 9px;
+  border-radius: 6px;
+  background: var(--bg-inset);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.pv-pack-item.is-active { border-color: rgba(233, 69, 96, 0.45); box-shadow: 0 0 0 1px rgba(233, 69, 96, 0.25) inset; }
+
+.pv-pack-name { font-size: 12px; font-weight: 600; }
+.pv-pack-meta { font-size: 10px; color: var(--text-muted); }
+
+.pv-sb-user {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.pv-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
+  color: #fff;
+}
+
+.pv-user-meta { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
+.pv-user-meta em { font-style: normal; font-size: 11px; font-weight: 600; }
+
+.pv-badge {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--accent);
+  color: #fff;
+  width: fit-content;
+}
+
+.pv-sb-action { color: var(--text-muted); flex-shrink: 0; }
+
+.pv-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 18px 20px;
+  gap: 16px;
+  min-width: 0;
+}
+
+.pv-main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.pv-main-head h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
+
+.pv-tags { display: flex; gap: 6px; }
+
+.pv-tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: var(--bg-card);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.pv-tag-mc { background: rgba(233, 69, 96, 0.12); border-color: rgba(233, 69, 96, 0.3); color: var(--accent); }
+
+.pv-stats { display: flex; gap: 18px; padding-top: 4px; }
+.pv-stats span { display: flex; flex-direction: column; gap: 2px; text-align: right; }
+.pv-stats b { font-size: 15px; font-weight: 700; }
+.pv-stats i { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
+
+.pv-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; }
+
+.pv-gallery-item {
+  border-radius: 8px;
+  background:
+    linear-gradient(160deg, rgba(233, 69, 96, 0.15), rgba(255, 255, 255, 0.03)),
+    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 10px, transparent 10px 20px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  min-height: 120px;
+}
+
+.pv-gallery-item--2 { background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.15)); }
+.pv-gallery-item--3 { background: linear-gradient(200deg, rgba(233, 69, 96, 0.22), rgba(233, 69, 96, 0.04)); }
+
+.pv-playbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: var(--bg-surface);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.pv-playbar em { font-style: normal; color: var(--text); }
+
+.pv-play {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 18px;
+  border-radius: 7px;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 700;
+  font-size: 12px;
+}
+.pv-play i { font-style: normal; }
+
+/* --- news scene --- */
+
+.scene-news { display: flex; align-items: center; justify-content: center; }
+
+.pv-panel {
+  width: 520px;
+  max-width: calc(100% - 40px);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background: var(--bg-surface);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 12px;
+}
+
+.pv-view-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
+
+.pv-news-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+  border-radius: 8px;
+  background: var(--bg-inset);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+.pv-news-item b { font-size: 13px; }
+.pv-news-item p { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
+
+.pv-news-tag {
+  width: fit-content;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.pv-tag-update { background: rgba(233, 69, 96, 0.14); color: var(--accent); }
+.pv-tag-event { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
+
+/* --- settings scene --- */
+
+.scene-settings { display: flex; align-items: center; justify-content: center; }
+
+.pv-setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+.pv-setting-row:last-of-type { border-bottom: none; }
+
+.pv-setting-label { font-size: 13px; font-weight: 600; }
+
+.pv-setting-control { display: flex; align-items: center; gap: 10px; }
+
+.pv-range {
+  position: relative;
+  width: 150px;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--bg-card);
+}
+
+.pv-range-fill {
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 30%;
+  border-radius: 999px;
+  background: var(--accent);
+}
+
+.pv-range-knob {
+  position: absolute;
+  top: 50%;
+  left: 30%;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #fff;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 8px rgba(233, 69, 96, 0.6);
+}
+
+.pv-range-value { font-size: 12px; font-weight: 600; min-width: 38px; }
+
+.pv-chip {
+  min-width: 54px;
+  padding: 6px 10px;
+  text-align: center;
+  border-radius: 6px;
+  background: var(--bg-inset);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.pv-chip--wide { min-width: 96px; }
+.pv-times { color: var(--text-muted); font-size: 11px; }
+
+.pv-badge-online {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 700;
+  font-size: 11px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: rgba(74, 222, 128, 0.12);
+  color: #4ade80;
+  border: 1px solid rgba(74, 222, 128, 0.3);
+}
+
+.pv-badge-online i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
+
+/* --- install scene --- */
+
+.scene-install { display: flex; align-items: center; justify-content: center; }
+
+.scene-install-inner {
+  width: 400px;
+  max-width: calc(100% - 40px);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 28px;
+  background: var(--bg-surface);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 12px;
+}
+
+.pv-progress { height: 8px; border-radius: 999px; background: var(--bg-card); overflow: hidden; }
+
+.pv-progress-fill {
+  display: block;
+  width: 68%;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
+  box-shadow: 0 0 14px rgba(233, 69, 96, 0.5);
+}
+
+.pv-stage { text-align: center; font-size: 12px; color: var(--text-secondary); }
+
+/* preview dots + caption */
+
+.preview-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
+
+.preview-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  transition: background .3s ease, width .3s ease;
+}
+
+.preview-dot.active { background: var(--accent); width: 22px; }
+
+.preview-caption {
+  margin-top: 14px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
 /* ---------- Responsive ---------- */
 
 @media (max-width: 1024px) {
@@ -836,6 +1292,16 @@ ul { list-style: none; }
   .hero-diamond--1 { right: -10%; }
   .download-card { padding: 26px; }
   .carousel-btn { width: 42px; height: 42px; font-size: 22px; }
+  .launcher-preview-body { height: 360px; }
+  .pv-sidebar { width: 58px; }
+  .pv-sidebar > .pv-sb-section,
+  .pv-sb-brand span,
+  .pv-nav-item span,
+  .pv-user-meta,
+  .pv-sb-action { display: none; }
+  .pv-sidebar { align-items: center; }
+  .pv-nav-item { justify-content: center; padding: 8px; }
+  .pv-sb-section { margin-top: 6px; }
 }
 
 @media (prefers-reduced-motion: reduce) {

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>

server/site/js/main.js

@@ -9,6 +9,7 @@
       'nav.highlights': 'Хайлайты',
       'nav.season': 'Сезон',
       'nav.features': 'Возможности',
+      'nav.showcase': 'Лаунчер',
       'nav.download': 'Скачать',
       'nav.news': 'Новости',
       'nav.play': 'Играть сейчас',
@@ -74,6 +75,41 @@
       'download.latest': 'Скачать актуальную версию',
       'download.mirrors': 'Зеркала',
       'download.note': 'Без платных подписок и рекламы. Просто лаунчер. Системные требования: Windows 10+, 4 ГБ ОЗУ.',
+      'showcase.title': 'Показываем <span class="accent">лаунчер</span>',
+      'showcase.sub': 'Никаких статичных скриншотов — живой тур по интерфейсу. Нужно просто наблюдать: лаунчер сам открывает свои экраны.',
+      'preview.aria': 'ZernMC Launcher preview, auto-rotating screens',
+      'preview.login': 'Вход',
+      'preview.packs': 'Сборки',
+      'preview.news': 'Новости',
+      'preview.settings': 'Настройки',
+      'preview.install': 'Установка',
+      'preview.signIn': 'Вход',
+      'preview.username': 'Логин',
+      'preview.password': 'Пароль',
+      'preview.nav.packs': 'Сборки',
+      'preview.nav.news': 'Новости',
+      'preview.nav.friends': 'Друзья',
+      'preview.nav.settings': 'Настройки',
+      'preview.serverPacks': 'Серверные сборки',
+      'preview.localPacks': 'Локальные сборки',
+      'preview.stat.loader': 'Загрузчик',
+      'preview.stat.files': 'Файлы',
+      'preview.stat.size': 'Размер',
+      'preview.ready': 'Готов к запуску',
+      'preview.play': 'Играть',
+      'preview.news.update': 'Обновление',
+      'preview.news.event': 'Событие',
+      'preview.news1.title': 'Сезон Prologue запущен',
+      'preview.news1.body': 'Небо принадлежит дирижаблям. Добро пожаловать в Prologue — 1.21.1 NeoForge, Create: Aeronautics.',
+      'preview.news2.title': 'Война в Заре',
+      'preview.news2.body': '«Феникс» атакует, «Ласточка» защищает. Жители выбирают сторону — или бунт.',
+      'preview.settings.ram': 'Выделено ОЗУ',
+      'preview.settings.resolution': 'Разрешение',
+      'preview.settings.language': 'Язык',
+      'preview.settings.server': 'Сервер',
+      'preview.online': 'Онлайн',
+      'preview.install.title': 'Установка сборки…',
+      'preview.install.stage': 'Загрузка модов 130/130 · 1.8 ГБ',
       'news.title': 'Что <span class="accent">нового.</span>',
       'news.sub': 'Последние чейнджлоги и обновления команды Zern.',
       'news.empty': 'Новостей пока нет.',
@@ -86,6 +122,7 @@
       'nav.highlights': 'Highlights',
       'nav.season': 'Season',
       'nav.features': 'Features',
+      'nav.showcase': 'Launcher',
       'nav.download': 'Download',
       'nav.news': 'News',
       'nav.play': 'Play now',
@@ -151,6 +188,41 @@
       'download.latest': 'Download latest',
       'download.mirrors': 'Mirrors',
       'download.note': 'No paywalls, no ads. Just a launcher. System requirements: Windows 10+, 4 GB RAM.',
+      'showcase.title': 'Meet the <span class="accent">launcher</span>',
+      'showcase.sub': 'No static screenshots — a live tour of the UI. Just watch: the launcher shows its screens on its own.',
+      'preview.aria': 'ZernMC Launcher preview, auto-rotating screens',
+      'preview.login': 'Sign in',
+      'preview.packs': 'Packs',
+      'preview.news': 'News',
+      'preview.settings': 'Settings',
+      'preview.install': 'Installing',
+      'preview.signIn': 'Sign In',
+      'preview.username': 'Username',
+      'preview.password': 'Password',
+      'preview.nav.packs': 'Packs',
+      'preview.nav.news': 'News',
+      'preview.nav.friends': 'Friends',
+      'preview.nav.settings': 'Settings',
+      'preview.serverPacks': 'Server Packs',
+      'preview.localPacks': 'Local Packs',
+      'preview.stat.loader': 'Loader',
+      'preview.stat.files': 'Files',
+      'preview.stat.size': 'Size',
+      'preview.ready': 'Ready to launch',
+      'preview.play': 'Play',
+      'preview.news.update': 'Update',
+      'preview.news.event': 'Event',
+      'preview.news1.title': 'Season Prologue has launched',
+      'preview.news1.body': 'The sky belongs to airships. Welcome to Prologue — 1.21.1 NeoForge, Create: Aeronautics.',
+      'preview.news2.title': 'War in Zarya',
+      'preview.news2.body': 'Fenix attacks, Lastochka defends. Citizens pick a side — or rise up.',
+      'preview.settings.ram': 'Allocated RAM',
+      'preview.settings.resolution': 'Resolution',
+      'preview.settings.language': 'Language',
+      'preview.settings.server': 'Server',
+      'preview.online': 'Online',
+      'preview.install.title': 'Installing pack…',
+      'preview.install.stage': 'Downloading mods 130/130 · 1.8 GB',
       'news.title': 'What\'s <span class="accent">new.</span>',
       'news.sub': 'Latest changelogs and updates from the Zern team.',
       'news.empty': 'No news yet.',
@@ -209,6 +281,11 @@
     if (statusValue && statusValue.dataset.state) {
       updateStatusUI(statusValue.dataset.state);
     }
+    const caption = document.getElementById('previewCaption');
+    if (caption && caption.dataset.screen) {
+      const scene = SCENES.find((s) => s.key === caption.dataset.screen);
+      caption.textContent = scene ? tr(scene.label) : '';
+    }
   }
 
   function toggleLang() {
@@ -238,9 +315,11 @@
       const dlVersion = document.getElementById('download-version');
       const dlSize = document.getElementById('download-size');
       const dlBtn = document.getElementById('download-btn');
+      const pvVersion = document.getElementById('preview-version');
 
       if (heroVersion) heroVersion.textContent = version;
       if (dlVersion) dlVersion.textContent = version;
+      if (pvVersion) pvVersion.textContent = 'v' + version;
 
       if (data.files && data.files.zips && data.files.zips.length) {
         const latest = data.files.zips[0];
@@ -497,8 +576,64 @@
     onScroll();
   }
 
+  const SCENES = [
+    { key: 'login', label: 'preview.login' },
+    { key: 'packs', label: 'preview.packs' },
+    { key: 'news', label: 'preview.news' },
+    { key: 'settings', label: 'preview.settings' },
+    { key: 'install', label: 'preview.install' },
+  ];
+
+  let sceneIndex = 0;
+  let sceneTimer = null;
+
+  function showScene(i) {
+    const body = document.getElementById('launcherPreviewBody');
+    const dots = document.getElementById('previewDots');
+    const caption = document.getElementById('previewCaption');
+    if (!body) return;
+
+    sceneIndex = (i + SCENES.length) % SCENES.length;
+    body.querySelectorAll('.preview-scene').forEach((el, k) => {
+      el.classList.toggle('is-active', k === sceneIndex);
+    });
+    if (dots) {
+      dots.querySelectorAll('.preview-dot').forEach((d, k) => {
+        d.classList.toggle('active', k === sceneIndex);
+      });
+    }
+    if (caption) {
+      caption.textContent = tr(SCENES[sceneIndex].label);
+      caption.dataset.screen = SCENES[sceneIndex].key;
+    }
+  }
+
+  function nextScene() { showScene(sceneIndex + 1); }
+
+  function startPreview() {
+    if (!document.getElementById('launcherPreviewBody')) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    if (sceneTimer) clearInterval(sceneTimer);
+    sceneTimer = setInterval(nextScene, 4200);
+    showScene(0);
+  }
+
+  function initPreview() {
+    const body = document.getElementById('launcherPreviewBody');
+    const dots = document.getElementById('previewDots');
+    if (!body || !dots) return;
+
+    SCENES.forEach((_, k) => {
+      const d = document.createElement('span');
+      d.className = 'preview-dot' + (k === 0 ? ' active' : '');
+      dots.appendChild(d);
+    });
+
+    startPreview();
+  }
+
   function initReveal() {
-    const els = document.querySelectorAll('.section-head, .feature-card, .download-card, .news-card, .server-card, .theme-card, .carousel');
+    const els = document.querySelectorAll('.section-head, .feature-card, .download-card, .news-card, .server-card, .theme-card, .carousel, .launcher-window');
     if (!('IntersectionObserver' in window)) {
       els.forEach((el) => el.classList.add('visible'));
       return;
@@ -531,6 +666,7 @@
     loadServerStatus();
     setInterval(loadServerStatus, 15000);
     initCarousel();
+    initPreview();
     initNav();
     initParallax();
     initReveal();