diff --git a/server/site/css/style.css b/server/site/css/style.css index 42df3df..ff1b44b 100644 --- a/server/site/css/style.css +++ b/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) { diff --git a/server/site/index.html b/server/site/index.html index 932a1b5..8867630 100644 --- a/server/site/index.html +++ b/server/site/index.html @@ -24,6 +24,7 @@
  • Хайлайты
  • Сезон
  • Возможности
    • +
  • Лаунчер
  • Скачать
  • Новости
    • @@ -163,9 +164,170 @@ +
    +
    + 04 / 07 +

    Показываем лаунчер

    +

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

    +
    + + +
    +
    - 04 / 06 + 05 / 07

    Что внутри сезона.

    Prologue — модовый сезон на базе Create: Aeronautics, война и выживание. ОБТ — полигон, где всё это обкатывается.

    @@ -207,7 +369,7 @@
    - 05 / 06 + 06 / 07

    Скачать Zern.

    Скачай лаунчер для Windows и заходи на сервер ZernMC.

    @@ -235,7 +397,7 @@
    - 06 / 06 + 07 / 07

    Что нового.

    Последние чейнджлоги и обновления команды Zern.

    diff --git a/server/site/js/main.js b/server/site/js/main.js index b1f4325..50a4cf5 100644 --- a/server/site/js/main.js +++ b/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': 'Показываем лаунчер', + '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': 'Что нового.', '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 launcher', + '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 new.', '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();