Files
ai-qpid-pvz/game/index.html
T

605 lines
35 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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-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 -->
<div id="start-modal" class="overlay">
<div class="banner-card start-card">
<div class="start-header">
<h1>PLANTS vs. ZOMBIES</h1>
<p>Защитите газон от нашествия зомби! Выберите режим игры и начинайте сражение.</p>
</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>
</div>
<div id="start-record" class="start-record-line"></div>
<!-- Hero 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>
</div>
<!-- Secondary Activities Row -->
<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-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">ai.qpid.pro &bull; 13 растений &bull; 8 видов зомби &bull; 5 биомов: День, Ночь, Бассейн, Туман, Крыша &bull; 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>