feat(ui): redesign modern game dashboard and add 2k/4k full-screen fluid scaling
This commit is contained in:
+47
-22
@@ -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 • 25 УРОВНЕЙ • 5 БИОМОВ • 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 • 13 растений • 8 видов зомби • 5 биомов: День, Ночь, Бассейн, Туман, Крыша • 25 уровней</div>
|
||||
<div class="footer-info">
|
||||
pvz.qpid.pro • 16 видов растений • 8 видов зомби • 5 миров: День, Ночь, Бассейн, Туман, Крыша • 25 этапов
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user