feat(ui): redesign modern game dashboard and add 2k/4k full-screen fluid scaling

This commit is contained in:
2026-09-17 12:59:30 +00:00
parent 84c28addfe
commit 258b1a9cb1
4 changed files with 357 additions and 34 deletions
+47 -22
View File
@@ -27,6 +27,7 @@
</div>
</div>
<div class="nav-right">
<button id="btn-fullscreen" class="nav-btn btn-icon-nav" title="Полноэкранный режим (F11 / F)">⛶ Экран</button>
<button id="btn-speed" class="nav-btn btn-icon-nav" title="Скорость игры (1x / 2x)">⚡ 1x</button>
<button id="btn-pause" class="nav-btn btn-pause btn-icon-nav" title="Пауза / Продолжить (Пробел)">⏸️ Пауза</button>
<button id="btn-mute" class="nav-btn btn-icon-nav" title="Включить / выключить звук">🔊 Звук</button>
@@ -76,47 +77,71 @@
<!-- Main Game Canvas -->
<canvas id="gameCanvas" width="900" height="600"></canvas>
<!-- Start Screen Overlay -->
<!-- Start Screen Overlay / Modern Game Dashboard -->
<div id="start-modal" class="overlay">
<div class="banner-card start-card">
<div class="start-header">
<h1>PLANTS vs. ZOMBIES</h1>
<p>Защитите газон от нашествия зомби! Выберите режим игры и начинайте сражение.</p>
<div class="banner-card start-card modern-dashboard">
<!-- 1. Top Hero Brand Bar with Player Status Widget -->
<div class="start-header modern-header">
<div class="brand-title-wrap">
<h1 class="game-logo-text"><span class="logo-plant">🌱 PLANTS</span> <span class="logo-vs">vs.</span> <span class="logo-zombie">ZOMBIES 🧟</span></h1>
<div class="game-version-badge">2K/4K HD EDITION &bull; 25 УРОВНЕЙ &bull; 5 БИОМОВ &bull; 16 РАСТЕНИЙ</div>
</div>
<!-- Integrated Quick Profile Pill -->
<div id="start-hero-profile" class="start-hero-profile" title="Нажмите для входа или просмотра профиля">
<div class="hero-avatar">🌻</div>
<div class="hero-profile-data">
<div class="hero-user-line">
<span id="hero-profile-name" class="hero-username">Гость</span>
<span id="hero-cloud-badge" class="badge-offline">Локально</span>
</div>
<div class="hero-stats-line">
<span title="Монеты">💰 <strong id="hero-stat-coins">150</strong></span>
<span title="Уровень кампании">🗺️ <strong id="hero-stat-level">Ур. 1</strong></span>
<span title="Рекорд очков">🏆 <strong id="hero-stat-score">0</strong></span>
</div>
</div>
</div>
</div>
<!-- Mode Selectors -->
<div class="mode-selector">
<button id="btn-mode-adv" class="mode-btn active">🌿 Приключение</button>
<button id="btn-mode-surv" class="mode-btn">⚔️ Выживание</button>
<button id="btn-mode-bowl" class="mode-btn">🎳 Боулинг</button>
<button id="btn-mode-izombie" class="mode-btn">🧠 Я, Зомби</button>
<button id="btn-mode-rogue" class="mode-btn">🎲 Рогалик</button>
<button id="btn-mode-boss" class="mode-btn">👑 Зомбосс</button>
<button id="btn-mode-bossrush" class="mode-btn">⚡ Boss Rush</button>
<!-- 2. Game Mode Selector Chips -->
<div class="mode-selector-wrapper">
<div class="mode-selector-title">ВЫБЕРИТЕ РЕЖИМ ИГРЫ:</div>
<div class="mode-selector">
<button id="btn-mode-adv" class="mode-btn active" title="25 уровней с прогрессией через 5 миров">🌿 Приключение</button>
<button id="btn-mode-surv" class="mode-btn" title="Бесконечный наплыв усиливающихся волн зомби">⚔️ Выживание</button>
<button id="btn-mode-bowl" class="mode-btn" title="Сбивайте зомби катящимися орехами-шарами">🎳 Боулинг</button>
<button id="btn-mode-izombie" class="mode-btn" title="Играйте за зомби и поедайте мозги">🧠 Я, Зомби</button>
<button id="btn-mode-rogue" class="mode-btn" title="Рогалик со случайными реликвиями на каждом этаже">🎲 Рогалик</button>
<button id="btn-mode-boss" class="mode-btn" title="Эпическая битва против гигантского Зомбота 6000 HP">👑 Зомбосс</button>
<button id="btn-mode-bossrush" class="mode-btn" title="Испытание на выносливость против 3 волн боссов">⚡ Boss Rush</button>
</div>
</div>
<div id="start-record" class="start-record-line"></div>
<!-- Hero Action Row -->
<!-- 3. Primary Action Row -->
<div class="start-hero-row">
<button id="btn-start" class="btn btn-hero">▶ ИГРАТЬ</button>
<button id="btn-campaign-select" class="btn btn-campaign btn-hero">🗺️ КАРТА КАМПАНИИ (25 УРОВНЕЙ)</button>
<button id="btn-start" class="btn btn-hero btn-play-main">▶ ИГРАТЬ СЕЙЧАС</button>
<button id="btn-campaign-select" class="btn btn-campaign btn-hero">🗺️ КАРТА КАМПАНИИ</button>
<button id="btn-inventory-start" class="btn btn-inventory btn-hero">🎒 ВЫБОР КОЛОДЫ</button>
</div>
<!-- Secondary Activities Row -->
<!-- 4. Modern Activities Grid Hub -->
<div class="start-activities-grid">
<button id="btn-inventory-start" class="btn btn-inventory btn-act">🎒 Выбор растений (Колода)</button>
<button id="btn-shop" class="btn btn-shop btn-act">🏪 Магазин Дэйва</button>
<button id="btn-workshop-start" class="btn btn-workshop btn-act">🧪 Сад-Мастерская</button>
<button id="btn-workshop-start" class="btn btn-workshop btn-act">🧪 Мастерская</button>
<button id="btn-zengarden-start" class="btn btn-zengarden btn-act">🪴 Дзен-Сад</button>
<button id="btn-almanac-start" class="btn btn-almanac btn-act">📖 Альманах</button>
<button id="btn-achievements-start" class="btn btn-achievements btn-act">🏆 Достижения</button>
<button id="btn-tree-start" class="btn btn-tree btn-act">🌳 Древо Мудрости</button>
<button id="btn-leaderboard-start" class="btn btn-leaderboard btn-act">🏅 Рекорды</button>
<button id="btn-bugreport-start" class="btn btn-bugreport btn-act">🐛 Баг-репорт / Чат</button>
<button id="btn-bugreport-start" class="btn btn-bugreport btn-act">🐛 Чат / Баги</button>
</div>
<div class="footer-info">ai.qpid.pro &bull; 13 растений &bull; 8 видов зомби &bull; 5 биомов: День, Ночь, Бассейн, Туман, Крыша &bull; 25 уровней</div>
<div class="footer-info">
pvz.qpid.pro &bull; 16 видов растений &bull; 8 видов зомби &bull; 5 миров: День, Ночь, Бассейн, Туман, Крыша &bull; 25 этапов
</div>
</div>
</div>