630 lines
37 KiB
HTML
630 lines
37 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<title>Plants vs. Zombies — Игра онлайн на ai.qpid.pro</title>
|
||
<meta name="description" content="Полный клон Plants vs. Zombies на Canvas: день, ночь, бассейн, туман, крыша, боулинг, магазин Дэйва, Зомбосс.">
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
<meta name="theme-color" content="#2e7d32">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="PvZ Web">
|
||
<link rel="apple-touch-icon" href="icon-192.png">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div id="game-wrapper">
|
||
<!-- Minimalist Clean Top Navigation Bar -->
|
||
<header class="top-nav-bar">
|
||
<div class="nav-left">
|
||
<button id="btn-main-menu-drawer" class="nav-btn btn-menu-main" title="Открыть меню разделов">☰ Меню</button>
|
||
<div id="user-profile-badge" class="profile-badge cursor-pointer" title="Управление профилем">
|
||
<span id="badge-user-name">👤 Гость</span>
|
||
<button id="btn-auth-open" class="btn-mini" title="Профиль / Авторизация">Войти</button>
|
||
<button id="btn-auth-logout-nav" class="btn-mini btn-logout-mini hidden" title="Выйти из аккаунта">Выйти</button>
|
||
</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>
|
||
</div>
|
||
|
||
<!-- Hidden trigger targets for backwards compatibility & tests -->
|
||
<div style="display: none;">
|
||
<button id="btn-menu"></button>
|
||
<button id="btn-campaign-open"></button>
|
||
<button id="btn-workshop"></button>
|
||
<button id="btn-zengarden"></button>
|
||
<button id="btn-almanac"></button>
|
||
<button id="btn-achievements"></button>
|
||
<button id="btn-tree"></button>
|
||
<button id="btn-leaderboard"></button>
|
||
<button id="btn-bugreport"></button>
|
||
<button id="btn-theme"></button>
|
||
<button id="btn-music"></button>
|
||
<button id="btn-mobile-drawer"></button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Slide-out Drawer Menu with All Game Activities -->
|
||
<div id="drawer-backdrop" class="drawer-backdrop hidden"></div>
|
||
<aside id="mobile-drawer" class="mobile-drawer hidden">
|
||
<div class="drawer-header">
|
||
<h2>🌻 Меню игры</h2>
|
||
<button id="btn-drawer-close" class="btn-drawer-close" title="Закрыть меню">✕</button>
|
||
</div>
|
||
<div class="drawer-body">
|
||
<button id="btn-drawer-main-screen" class="drawer-item">🏠 Главный экран (Режимы)</button>
|
||
<button id="btn-drawer-inventory" class="drawer-item">🎒 Выбор растений / Инвентарь</button>
|
||
<button id="btn-drawer-campaign" class="drawer-item">🗺️ Карта Кампании (25 уровней)</button>
|
||
<button id="btn-drawer-workshop" class="drawer-item">🧪 Сад-Мастерская (Крафт и перки)</button>
|
||
<button id="btn-drawer-zengarden" class="drawer-item">🪴 Дзен-Сад (Пассивный доход)</button>
|
||
<button id="btn-drawer-almanac" class="drawer-item">📖 Пригородный Альманах</button>
|
||
<button id="btn-drawer-achievements" class="drawer-item">🏆 Зал Достижений и Трофеев</button>
|
||
<button id="btn-drawer-tree" class="drawer-item">🌳 Древо Мудрости и Чит-коды</button>
|
||
<button id="btn-drawer-leaderboard" class="drawer-item">🏅 Доска Рекордов</button>
|
||
<button id="btn-drawer-theme" class="drawer-item">🎨 Тема оформления: <span id="drawer-theme-label" style="color: #81d4fa; margin-left: auto;">Классика</span></button>
|
||
<button id="btn-drawer-music" class="drawer-item">🎵 Фоновая музыка: <span id="drawer-music-label" style="color: #a5d6a7; margin-left: auto;">Вкл</span></button>
|
||
<button id="btn-drawer-bugreport" class="drawer-item btn-drawer-bug">🐛 Баг-репорты и Чат</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<div id="game-container">
|
||
<!-- Main Game Canvas -->
|
||
<canvas id="gameCanvas" width="900" height="600"></canvas>
|
||
|
||
<!-- Start Screen Overlay / Modern Game Dashboard -->
|
||
<div id="start-modal" class="overlay">
|
||
<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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 3. Primary Action Row -->
|
||
<div class="start-hero-row">
|
||
<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>
|
||
|
||
<!-- 4. Modern Activities Grid Hub -->
|
||
<div class="start-activities-grid">
|
||
<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-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>
|
||
</div>
|
||
|
||
<div class="footer-info">
|
||
pvz.qpid.pro • 16 видов растений • 8 видов зомби • 5 миров: День, Ночь, Бассейн, Туман, Крыша • 25 этапов
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Crazy Dave's Shop Modal -->
|
||
<div id="shop-modal" class="overlay hidden">
|
||
<div class="banner-card shop-card">
|
||
<h1 style="color: #ffa000; font-size: 24px; margin-bottom: 4px;">МАГАЗИН БЕЗУМНОГО ДЭЙВА</h1>
|
||
<div id="shop-coins" style="font-size: 18px; color: #ffd54f; font-weight: bold; margin-bottom: 12px;">💰 Монеты: 0</div>
|
||
|
||
<!-- Shop Category Tabs -->
|
||
<div class="shop-tabs">
|
||
<button type="button" id="tab-shop-plants" class="shop-tab active">🌱 Растения</button>
|
||
<button type="button" id="tab-shop-upgrades" class="shop-tab">🛠️ Улучшения сада</button>
|
||
</div>
|
||
|
||
<!-- Tab 1: Plants Nursery Grid -->
|
||
<div id="shop-plants-panel" class="shop-tab-panel">
|
||
<div id="shop-plants-grid" class="shop-plants-grid">
|
||
<!-- Dynamically populated from PLANT_CATALOGUE -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 2: Garden Upgrades (Slots, Rake) -->
|
||
<div id="shop-upgrades-panel" class="shop-tab-panel hidden">
|
||
<div class="shop-items">
|
||
<div class="shop-item">
|
||
<div class="shop-item-info">
|
||
<h3>+1 Слот под семена</h3>
|
||
<p>Разблокирует 6-й слот для пакета растений в колоде.</p>
|
||
</div>
|
||
<button id="btn-buy-slot" class="btn-buy">Купить (500 💰)</button>
|
||
</div>
|
||
|
||
<div class="shop-item">
|
||
<div class="shop-item-info">
|
||
<h3>Садовые грабли</h3>
|
||
<p>Автоматически уничтожают первого зомби на газоне в каждом раунде.</p>
|
||
</div>
|
||
<button id="btn-buy-rake" class="btn-buy">Купить (150 💰)</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button id="btn-close-shop" class="btn" style="margin-top: 16px;">НАЗАД</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pre-Battle Seed Selection & Inventory Modal -->
|
||
<div id="seed-select-modal" class="overlay hidden">
|
||
<div class="banner-card seed-select-card">
|
||
<h1 style="color: #69f0ae; font-size: 24px; margin-bottom: 4px;">🌱 ВЫБОР РАСТЕНИЙ ДЛЯ БОЯ</h1>
|
||
<p style="font-size: 13px; color: #cfd8dc; margin-bottom: 12px;">
|
||
Соберите свою колоду для защиты газона. Нажмите на растение для добавления или удаления из слота.
|
||
</p>
|
||
|
||
<!-- Active Deck Bar -->
|
||
<div class="seed-select-section-title">
|
||
<span>ВЫБРАННАЯ КОЛОДА (<span id="seed-deck-count">0</span> / <span id="seed-deck-max">5</span>)</span>
|
||
<button type="button" id="btn-seed-auto-fill" class="btn btn-secondary btn-sm" style="font-size: 11px; padding: 4px 10px;">⚡ Быстрый выбор</button>
|
||
</div>
|
||
<div id="seed-active-deck" class="seed-deck-bar">
|
||
<!-- Dynamically populated -->
|
||
</div>
|
||
|
||
<!-- Inventory Grid -->
|
||
<div class="seed-select-section-title" style="margin-top: 10px;">
|
||
<span>ИНВЕНТАРЬ РАСТЕНИЙ</span>
|
||
<button type="button" id="btn-seed-open-shop" class="btn btn-shop btn-sm" style="font-size: 11px; padding: 4px 10px;">🏪 Купить семена в магазине</button>
|
||
</div>
|
||
<div id="seed-inventory-grid" class="seed-inventory-grid">
|
||
<!-- Dynamically populated -->
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="seed-select-actions">
|
||
<button type="button" id="btn-seed-start-battle" class="btn btn-hero" style="background: linear-gradient(135deg, #2e7d32, #43a047); font-size: 16px; padding: 10px 28px;">⚔️ В БОЙ!</button>
|
||
<button type="button" id="btn-seed-cancel" class="btn btn-secondary">Отмена</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Workshop & Laboratory Modal -->
|
||
<div id="workshop-modal" class="overlay hidden">
|
||
<div class="banner-card workshop-card">
|
||
<div class="workshop-header">
|
||
<h1 style="color: #69f0ae; font-size: 26px; margin: 0;">🧪 САД-МАСТЕРСКАЯ</h1>
|
||
<p style="font-size: 13px; color: #b0bec5; margin: 4px 0 10px 0;">
|
||
Крафтите постоянные улучшения растений (до 3★) и развивайте пассивные перки Садовода!
|
||
</p>
|
||
|
||
<!-- Materials Inventory Bar -->
|
||
<div id="workshop-materials" class="materials-bar">
|
||
<div class="mat-item" title="Биогумус (падает с базовых зомби)"><span class="mat-icon">🧪</span> <span id="mat-bio">0</span> биогумус</div>
|
||
<div class="mat-item" title="Детали и шестерни (падают с бронированных зомби)"><span class="mat-icon">⚙️</span> <span id="mat-scrap">0</span> детали</div>
|
||
<div class="mat-item" title="Солнечная эссенция (накапливается при сборе солнц)"><span class="mat-icon">☀️</span> <span id="mat-sun">0</span> эссенция</div>
|
||
<div class="mat-item" title="Кристаллы (падают с элитных зомби и флагоносцев)"><span class="mat-icon">💎</span> <span id="mat-crystal">0</span> кристаллы</div>
|
||
<div class="mat-item mat-coins" title="Монеты игрока"><span class="mat-icon">💰</span> <span id="mat-coins">0</span> монет</div>
|
||
</div>
|
||
|
||
<!-- Workshop Tabs -->
|
||
<div class="workshop-tabs">
|
||
<button id="tab-plants" class="ws-tab active">🌿 Прокачка Растений</button>
|
||
<button id="tab-perks" class="ws-tab">✨ Перки Садовода</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 1: Plants Upgrade Grid -->
|
||
<div id="ws-content-plants" class="ws-content">
|
||
<div id="plants-upgrade-list" class="upgrade-grid"></div>
|
||
</div>
|
||
|
||
<!-- Tab 2: Passive Perks Tree -->
|
||
<div id="ws-content-perks" class="ws-content hidden">
|
||
<div id="perks-upgrade-list" class="upgrade-grid"></div>
|
||
</div>
|
||
|
||
<div style="margin-top: 12px; text-align: center;">
|
||
<button id="btn-close-workshop" class="btn" style="padding: 8px 32px;">НАЗАД</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Zen Garden Modal -->
|
||
<div id="zengarden-modal" class="overlay hidden">
|
||
<div class="banner-card zengarden-card">
|
||
<div class="zengarden-header">
|
||
<h1 style="color: #aed581; font-size: 24px; margin: 0;">🪴 ДЗЕН-САД</h1>
|
||
<p style="font-size: 13px; color: #dcedc8; margin: 3px 0 6px 0;">
|
||
Выращивайте растения в горшках, ухаживайте за саженцами и собирайте пассивный доход!
|
||
</p>
|
||
<div id="zen-status-bar" class="zen-tools-bar">
|
||
<button id="zen-tool-water" class="btn-zen-tool active" title="Полить жаждущее растение (клик по горшку)">💧 Лейка</button>
|
||
<button id="zen-tool-fert" class="btn-zen-tool" title="Подкормить удобрением для роста">🧪 Удобрение (<span id="zen-fert-count">5</span>)</button>
|
||
<button id="zen-tool-music" class="btn-zen-tool" title="Включить граммофон для хорошего настроения">🎵 Музыка</button>
|
||
<button id="zen-feed-snail" class="btn-zen-tool" title="Покормить улитку Стинки шоколадом для ускорения сбора монет">🍫 Шоколад (<span id="zen-choc-count">3</span>)</button>
|
||
<button id="zen-plant-sprout" class="btn-zen-tool" title="Посадить новый росток в свободный горшок">🌱 +Росток (100 💰)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zen-canvas-wrap">
|
||
<canvas id="zenCanvas" width="720" height="330"></canvas>
|
||
</div>
|
||
|
||
<div class="zen-footer" style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px;">
|
||
<div id="zen-offline-alert" style="font-size: 13px; color: #ffd54f; font-weight: bold;"></div>
|
||
<button id="btn-close-zengarden" class="btn" style="padding: 6px 28px;">НАЗАД</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Suburban Almanac Modal -->
|
||
<div id="almanac-modal" class="overlay hidden">
|
||
<div class="banner-card almanac-card">
|
||
<div class="almanac-header">
|
||
<h1 style="color: #ffb74d; font-size: 24px; margin: 0;">📖 ПРИГОРОДНЫЙ АЛЬМАНАХ</h1>
|
||
<div class="almanac-tabs">
|
||
<button id="tab-almanac-plants" class="almanac-tab active">🌿 Растения</button>
|
||
<button id="tab-almanac-zombies" class="almanac-tab">🧟 Зомби</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="almanac-body">
|
||
<!-- Left: Grid of thumbnails -->
|
||
<div id="almanac-list" class="almanac-grid"></div>
|
||
|
||
<!-- Right: Detailed card of selected item -->
|
||
<div id="almanac-details" class="almanac-detail-card"></div>
|
||
</div>
|
||
|
||
<div style="margin-top: 8px; text-align: center;">
|
||
<button id="btn-close-almanac" class="btn" style="padding: 6px 28px;">ЗАКРЫТЬ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Achievements & Trophy Modal -->
|
||
<div id="achievements-modal" class="overlay hidden">
|
||
<div class="banner-card achievements-card">
|
||
<div class="achievements-header">
|
||
<h1 style="color: #ffd54f; font-size: 24px; margin: 0;">🏆 ЗАЛ ДОСТИЖЕНИЙ</h1>
|
||
<p style="font-size: 13px; color: #ffe082; margin: 3px 0 8px 0;">
|
||
Выполняйте испытания, открывайте награды и забирайте монеты и кристаллы!
|
||
</p>
|
||
</div>
|
||
|
||
<div id="achievements-list" class="achievements-grid"></div>
|
||
|
||
<div style="margin-top: 10px; text-align: center;">
|
||
<button id="btn-close-achievements" class="btn" style="padding: 6px 28px;">ЗАКРЫТЬ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Roguelike Draft Choices Modal -->
|
||
<div id="draft-modal" class="overlay hidden">
|
||
<div class="banner-card draft-card">
|
||
<h1 style="color: #64ffda; font-size: 24px; margin: 0 0 6px 0;">🎲 ВЫБЕРИТЕ НАГРАДУ ЭТАПА</h1>
|
||
<p style="font-size: 13px; color: #b2dfdb; margin-bottom: 14px;">
|
||
Волна зачищена! Выберите новое семя в колоду или мощную реликвию:
|
||
</p>
|
||
|
||
<div id="draft-choices-list" class="draft-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tree of Wisdom Modal -->
|
||
<div id="tree-modal" class="overlay hidden">
|
||
<div class="banner-card tree-card">
|
||
<div class="tree-header">
|
||
<h1 style="color: #81c784; font-size: 24px; margin: 0;">🌳 ДРЕВО МУДРОСТИ</h1>
|
||
<div id="tree-height-display" style="font-size: 14px; color: #ffeb3b; font-weight: bold; margin: 4px 0 10px 0;">
|
||
Высота: 0 футов
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tree Art Illustration & Speech Bubble -->
|
||
<div class="tree-display-box">
|
||
<div class="tree-visual-wrapper">
|
||
<div id="tree-art" class="tree-art-stem">🌳</div>
|
||
</div>
|
||
<div class="tree-wisdom-bubble">
|
||
<div id="tree-wisdom-title" class="tree-wisdom-title">Первый росток</div>
|
||
<div id="tree-wisdom-quote" class="tree-wisdom-quote">
|
||
«Корми меня древесным удобрением, и я открою тебе сокровенные тайны газона и секретные чит-коды игры!»
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cheats Console & Toggles -->
|
||
<div class="tree-cheats-section">
|
||
<div style="font-size: 13px; color: #ffd54f; font-weight: bold; margin-bottom: 6px;">
|
||
РАЗБЛОКИРОВАННЫЕ ЧИТ-КОДЫ:
|
||
</div>
|
||
<div id="tree-cheats-list" class="tree-cheats-grid"></div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap;">
|
||
<button id="btn-tree-feed" class="btn" style="background: #4caf50;">Подкормить Древо (150 💰)</button>
|
||
<button id="btn-tree-close" class="btn btn-secondary">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Leaderboards Modal -->
|
||
<div id="leaderboard-modal" class="overlay hidden">
|
||
<div class="banner-card leaderboard-card">
|
||
<h1 style="color: #ffd54f; font-size: 24px; margin: 0 0 6px 0;">🏅 ДОСКА ПОЧЁТА И РЕКОРДЫ</h1>
|
||
<p style="font-size: 13px; color: #ffe082; margin-bottom: 12px;">
|
||
Лучшие результаты защитников газона по всем режимам!
|
||
</p>
|
||
|
||
<div class="leaderboard-tabs">
|
||
<button id="tab-lb-survival" class="lb-tab active">⚔️ Выживание</button>
|
||
<button id="tab-lb-rogue" class="lb-tab">🎲 Рогалик</button>
|
||
<button id="tab-lb-adv" class="lb-tab">🌿 Приключение</button>
|
||
<button id="tab-lb-izombie" class="lb-tab">🧠 Я, Зомби</button>
|
||
<button id="tab-lb-bowl" class="lb-tab">🎳 Боулинг</button>
|
||
<button id="tab-lb-boss" class="lb-tab">👑 Зомбосс</button>
|
||
<button id="tab-lb-bossrush" class="lb-tab">⚡ Boss Rush</button>
|
||
</div>
|
||
|
||
<div id="leaderboard-content" class="leaderboard-table-wrapper"></div>
|
||
|
||
<div style="margin-top: 12px; text-align: center;">
|
||
<button id="btn-leaderboard-close" class="btn" style="padding: 6px 26px;">ЗАКРЫТЬ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Authentication & Profile Modal -->
|
||
<div id="auth-modal" class="overlay hidden">
|
||
<div class="banner-card auth-card">
|
||
<!-- 1. Logged-in User Profile View (ТОЛЬКО кнопка Выйти) -->
|
||
<div id="auth-logged-in-view" class="auth-view hidden">
|
||
<h1 style="color: #81c784; font-size: 24px; margin-bottom: 6px;">👤 ЛИЧНЫЙ ПРОФИЛЬ</h1>
|
||
<div class="profile-header-card">
|
||
<div class="profile-avatar-icon">🌻</div>
|
||
<div class="profile-info-text">
|
||
<div id="profile-user-title" class="profile-username">kopri</div>
|
||
<div class="profile-status-badge">🟢 Облачные сохранения активны</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Profile Game Stats -->
|
||
<div class="profile-stats-grid">
|
||
<div class="profile-stat-box">
|
||
<span class="stat-label">💰 Монеты</span>
|
||
<span id="profile-stat-coins" class="stat-value">5,000</span>
|
||
</div>
|
||
<div class="profile-stat-box">
|
||
<span class="stat-label">🗺️ Кампания</span>
|
||
<span id="profile-stat-level" class="stat-value">Уровень 15</span>
|
||
</div>
|
||
<div class="profile-stat-box">
|
||
<span class="stat-label">🏆 Рекорд очков</span>
|
||
<span id="profile-stat-score" class="stat-value">12,500</span>
|
||
</div>
|
||
<div class="profile-stat-box">
|
||
<span class="stat-label">🧪 Материалы</span>
|
||
<span id="profile-stat-materials" class="stat-value">265 шт.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 10px; justify-content: center; margin-top: 14px;">
|
||
<button type="button" id="btn-auth-logout" class="btn btn-danger">🚪 Выйти из аккаунта</button>
|
||
<button type="button" id="btn-auth-close-profile" class="btn btn-secondary">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. Login View (Логин, Пароль, Войти, Регистрация, Остаться гостем) -->
|
||
<div id="auth-login-view" class="auth-view">
|
||
<h1 style="color: #ffeb3b; font-size: 24px; margin-bottom: 4px;">🔑 ВХОД В АККАУНТ</h1>
|
||
<p style="font-size: 13px; margin-bottom: 12px; color: #d7ccc8;">
|
||
Войдите под своим логином для синхронизации сохранений с сервером.
|
||
</p>
|
||
|
||
<form id="auth-login-form" onsubmit="return false;" style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;">
|
||
<input type="text" id="auth-username" class="auth-input" placeholder="Логин (имя пользователя)" maxlength="20" autocomplete="username">
|
||
<input type="password" id="auth-password" class="auth-input" placeholder="Пароль" maxlength="30" autocomplete="current-password">
|
||
<div id="auth-error" class="auth-error hidden"></div>
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 8px; margin-top: 4px;">
|
||
<button type="button" id="btn-auth-submit" class="btn btn-auth-submit" style="font-size: 15px; font-weight: bold; padding: 10px;">🔑 Войти</button>
|
||
<div style="display: flex; gap: 8px; justify-content: center;">
|
||
<button type="button" id="btn-auth-to-register" class="btn btn-secondary" style="flex: 1; font-size: 13px; padding: 8px;">📝 Регистрация</button>
|
||
<button type="button" id="btn-auth-guest" class="btn btn-secondary" style="flex: 1; font-size: 13px; padding: 8px;">👤 Остаться гостем</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<button id="btn-auth-close" class="btn btn-secondary" style="font-size: 13px; padding: 6px 20px;">Закрыть</button>
|
||
</div>
|
||
|
||
<!-- 3. Register View (Логин, Пароль, Зарегистрироваться, Назад к входу) -->
|
||
<div id="auth-register-view" class="auth-view hidden">
|
||
<h1 style="color: #69f0ae; font-size: 24px; margin-bottom: 4px;">📝 РЕГИСТРАЦИЯ</h1>
|
||
<p style="font-size: 13px; margin-bottom: 12px; color: #d7ccc8;">
|
||
Создайте профиль игрока для сохранения монет, крафта и кампании.
|
||
</p>
|
||
|
||
<form id="auth-register-form" onsubmit="return false;" style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;">
|
||
<input type="text" id="auth-reg-username" class="auth-input" placeholder="Придумайте логин (от 3 символов)" maxlength="20" autocomplete="username">
|
||
<input type="password" id="auth-reg-password" class="auth-input" placeholder="Придумайте пароль (от 4 символов)" maxlength="30" autocomplete="new-password">
|
||
<div id="auth-reg-error" class="auth-error hidden"></div>
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 8px; margin-top: 4px;">
|
||
<button type="button" id="btn-auth-do-register" class="btn btn-hero" style="background: linear-gradient(135deg, #2e7d32, #43a047); font-size: 15px; font-weight: bold; padding: 10px;">✨ Зарегистрироваться</button>
|
||
<button type="button" id="btn-auth-to-login" class="btn btn-secondary" style="font-size: 13px; padding: 8px;">◀ Уже есть аккаунт? Войти</button>
|
||
</div>
|
||
</form>
|
||
|
||
<button id="btn-auth-close-reg" class="btn btn-secondary" style="font-size: 13px; padding: 6px 20px;">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Game Over Overlay -->
|
||
<div id="game-over-modal" class="overlay hidden">
|
||
<div class="banner-card">
|
||
<h1 style="color: #f44336;">ЗОМБИ СЪЕЛИ ВАШИ МОЗГИ!</h1>
|
||
<p id="game-over-desc">Зомби прорвали оборону газона. Попробуйте снова!</p>
|
||
<div id="game-over-stats" style="font-size: 15px; color: #fff; margin-bottom: 16px;"></div>
|
||
<div style="display: flex; gap: 12px; justify-content: center;">
|
||
<button id="btn-restart-lose" class="btn">НАЧАТЬ ЗАНОВО</button>
|
||
<button id="btn-menu-lose" class="btn btn-secondary">В МЕНЮ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Adventure Campaign Level Select Modal -->
|
||
<div id="campaign-modal" class="overlay hidden">
|
||
<div class="banner-card campaign-card">
|
||
<div class="campaign-header">
|
||
<h1 style="color: #81c784; font-size: 24px; margin: 0 0 4px 0;">🗺️ КАРТА КАМПАНИИ</h1>
|
||
<p style="font-size: 13px; color: #cfd8dc; margin: 0 0 10px 0;">
|
||
25 уникальных уровней в 5 мирах: День, Ночь, Бассейн, Туман и Крыша с роботом Зомбоссом!
|
||
</p>
|
||
|
||
<!-- World Tabs -->
|
||
<div class="campaign-tabs">
|
||
<button id="tab-world-1" class="campaign-tab active" data-world="1">☀️ 1. День</button>
|
||
<button id="tab-world-2" class="campaign-tab" data-world="2">🌙 2. Ночь</button>
|
||
<button id="tab-world-3" class="campaign-tab" data-world="3">🏊 3. Бассейн</button>
|
||
<button id="tab-world-4" class="campaign-tab" data-world="4">🌫️ 4. Туман</button>
|
||
<button id="tab-world-5" class="campaign-tab" data-world="5">🏠 5. Крыша</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Levels Grid for Active World -->
|
||
<div id="campaign-levels-grid" class="campaign-levels-grid"></div>
|
||
|
||
<div style="margin-top: 14px; text-align: center;">
|
||
<button id="btn-campaign-close" class="btn btn-secondary" style="padding: 8px 32px;">ЗАКРЫТЬ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bug Reporting & Community Feedback Modal -->
|
||
<div id="bugreport-modal" class="overlay hidden">
|
||
<div class="banner-card bugreport-card">
|
||
<div class="bug-header">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; gap: 8px;">
|
||
<h1 style="color: #4fc3f7; font-size: 22px; margin: 0;">🐛 ЧАТ БАГ-РЕПОРТОВ И ОТЗЫВОВ</h1>
|
||
<span id="bug-count-badge" class="bug-count-badge">3 репорта</span>
|
||
</div>
|
||
<p style="font-size: 12px; color: #b0bec5; margin: 4px 0 8px 0;">
|
||
Нашли баг или хотите предложить улучшение? Напишите сюда — сообщения сохраняются на сервере и исправляются разработчиком!
|
||
</p>
|
||
|
||
<!-- Filter Tabs -->
|
||
<div class="bug-filter-tabs">
|
||
<button id="tab-bug-all" class="bug-tab active" data-filter="all">Все</button>
|
||
<button id="tab-bug-bugs" class="bug-tab" data-filter="bug">🔴 Баги</button>
|
||
<button id="tab-bug-ideas" class="bug-tab" data-filter="feature">💡 Идеи</button>
|
||
<button id="tab-bug-visual" class="bug-tab" data-filter="visual">🎨 Графика/UI</button>
|
||
<button id="tab-bug-fixed" class="bug-tab" data-filter="resolved">✅ Исправлено</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bug Feed List -->
|
||
<div id="bugreport-feed" class="bugreport-feed"></div>
|
||
|
||
<!-- Submission Form -->
|
||
<form id="bugreport-form" class="bugreport-form" onsubmit="return false;">
|
||
<div class="bug-form-row">
|
||
<input type="text" id="bug-input-name" class="bug-input" placeholder="Ваше имя (или никнейм)" maxlength="30">
|
||
<select id="bug-input-category" class="bug-select">
|
||
<option value="bug">🔴 Баг / Ошибка</option>
|
||
<option value="feature">💡 Предложение / Идея</option>
|
||
<option value="visual">🎨 Графика / Интерфейс</option>
|
||
<option value="balance">⚖️ Баланс сложности</option>
|
||
</select>
|
||
</div>
|
||
<div class="bug-form-row" style="margin-top: 6px;">
|
||
<textarea id="bug-input-text" class="bug-textarea" placeholder="Опишите баг подробно: какой уровень, что произошло, как повторить..." maxlength="1000" rows="2"></textarea>
|
||
<button type="button" id="btn-bug-submit" class="btn-bug-send">Отправить 🚀</button>
|
||
</div>
|
||
<div id="bug-form-status" class="bug-status-msg hidden"></div>
|
||
</form>
|
||
|
||
<div style="margin-top: 8px; text-align: center;">
|
||
<button id="btn-bug-close" class="btn btn-secondary" style="padding: 6px 26px; font-size: 13px;">ЗАКРЫТЬ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Victory Overlay -->
|
||
<div id="victory-modal" class="overlay hidden">
|
||
<div class="banner-card">
|
||
<h1 style="color: #4caf50;">ПОБЕДА!</h1>
|
||
<div id="victory-stats" style="font-size: 15px; color: #ffeb3b; margin-bottom: 16px;"></div>
|
||
<div style="display: flex; gap: 12px; justify-content: center;">
|
||
<button id="btn-restart-win" class="btn">СЛЕДУЮЩИЙ ЭТАП</button>
|
||
<button id="btn-menu-win" class="btn btn-secondary">В МЕНЮ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scripts loaded in dependency order -->
|
||
<script src="js/utils/assets.js"></script>
|
||
<script src="js/utils/test_api.js"></script>
|
||
<script src="js/systems/auth.js"></script>
|
||
<script src="js/entities/projectile.js"></script>
|
||
<script src="js/entities/plant.js"></script>
|
||
<script src="js/entities/zombie.js"></script>
|
||
<script src="js/systems/grid.js"></script>
|
||
<script src="js/systems/economy.js"></script>
|
||
<script src="js/systems/combat.js"></script>
|
||
<script src="js/systems/workshop.js"></script>
|
||
<script src="js/systems/zengarden.js"></script>
|
||
<script src="js/systems/almanac.js"></script>
|
||
<script src="js/systems/achievements.js"></script>
|
||
<script src="js/systems/roguelike.js"></script>
|
||
<script src="js/systems/tree.js"></script>
|
||
<script src="js/systems/boss.js"></script>
|
||
<script src="js/systems/leaderboard.js"></script>
|
||
<script src="js/systems/campaign.js"></script>
|
||
<script src="js/systems/feedback.js"></script>
|
||
<script src="js/systems/wave.js"></script>
|
||
<script src="js/game.js"></script>
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|