Свайп два файла верстка и стили

This commit is contained in:
svoboda200786 2025-05-19 08:11:34 +00:00
parent ec7bb820da
commit 88bd4d0eaa
2 changed files with 938 additions and 1830 deletions

View File

@ -1,236 +1,236 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Битва: Елена vs Балард (Сетевая Версия)</title>
<link rel="stylesheet" href="style_alt.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="auth-game-setup-wrapper"> <!-- Обертка для экранов до начала игры -->
<div id="status-container">
<div id="auth-message"></div>
<div id="game-status-message">Ожидание подключения к серверу...</div>
</div>
<div id="auth-section"> <!-- Секция Аутентификации -->
<h2>Вход / Регистрация</h2>
<form id="register-form">
<h3>Регистрация</h3>
<input type="text" id="register-username" placeholder="Имя пользователя" required autocomplete="username">
<input type="password" id="register-password" placeholder="Пароль (мин. 6 симв.)" required autocomplete="new-password">
<button type="submit">Зарегистрироваться</button>
</form>
<hr style="margin: 25px 0;">
<form id="login-form">
<h3>Вход</h3>
<input type="text" id="login-username" placeholder="Имя пользователя" required autocomplete="username">
<input type="password" id="login-password" placeholder="Пароль" required autocomplete="current-password">
<button type="submit">Войти</button>
</form>
</div>
<div id="user-info" style="display:none;"> <!-- Информация о пользователе и кнопка выхода -->
<p>Привет, <span id="logged-in-username"></span>!</p>
<button id="logout-button"><i class="fas fa-sign-out-alt"></i> Выход</button>
</div>
<div id="game-setup" style="display: none;"> <!-- Секция Настройки Игры (после логина) -->
<h2>Настройка Игры</h2>
<div>
<button id="create-ai-game">Играть против AI (Балард)</button>
</div>
<hr style="margin: 15px 0;">
<div>
<h3>PvP (Игрок против Игрока)</h3>
<!-- === Блок выбора персонажа === -->
<div class="character-selection">
<h4>Выберите персонажа для PvP:</h4>
<input type="radio" id="char-elena" name="pvp-character" value="elena" checked>
<label for="char-elena"><i class="fas fa-hat-wizard"></i> Елена</label>
<input type="radio" id="char-almagest" name="pvp-character" value="almagest">
<label for="char-almagest"><i class="fas fa-staff-aesculapius"></i> Альмагест</label>
</div>
<!-- === Конец блока выбора персонажа === -->
<button id="create-pvp-game">Создать PvP Игру</button>
<button id="find-random-pvp-game">Найти случайную PvP Игру</button>
<br><br>
<input type="text" id="game-id-input" placeholder="Введите ID игры для присоединения">
<button id="join-pvp-game">Присоединиться к PvP по ID</button>
</div>
<div id="available-games-list">
<h3>Доступные PvP игры:</h3>
<p>Загрузка списка...</p>
<!-- Список игр будет здесь -->
</div>
</div>
</div> <!-- Конец .auth-game-setup-wrapper -->
<div class="game-wrapper" style="display: none;"> <!-- Игровая арена, изначально скрыта -->
<header class="game-header">
<h1><span class="title-player">Игрок 1</span> <span class="separator"><i class="fas fa-fist-raised"></i></span> <span class="title-opponent">Игрок 2</span></h1>
</header>
<!-- === НОВЫЙ БЛОК: Контролы переключения панелей (для мобильных) === -->
<!-- CSS будет управлять видимостью этого блока (display: none по умолчанию, display: flex в медиа-запросе) -->
<div class="panel-switcher-controls" style="display: none;">
<button id="show-player-panel-btn" class="panel-switch-button active">
<i class="fas fa-user"></i> <span class="button-text">Игрок</span>
</button>
<button id="show-opponent-panel-btn" class="panel-switch-button">
<i class="fas fa-ghost"></i> <span class="button-text">Противник</span>
</button>
</div>
<!-- === КОНЕЦ НОВОГО БЛОКА === -->
<main class="battle-arena-container">
<!-- Колонка Игрока (Панель 1 в UI) -->
<div class="player-column">
<section id="player-panel" class="fighter-panel">
<div class="panel-header">
<div class="character-visual">
<img src="images/elena_avatar.webp" alt="Аватар игрока 1" class="avatar-image player-avatar">
</div>
<h2 id="player-name" class="fighter-name">
<i class="fas fa-hat-wizard icon-player"></i> Елена
</h2>
</div>
<div class="panel-content">
<div class="stat-bar-container health">
<div class="bar-icon"><i class="fas fa-heart"></i></div>
<div class="bar-wrapper">
<div class="bar health-bar" id="player-hp-bar">
<div id="player-hp-fill" class="bar-fill" style="width: 100%;"></div>
<span id="player-hp-text" class="bar-text">120 / 120</span>
</div>
</div>
</div>
<div class="stat-bar-container resource mana">
<div class="bar-icon"><i class="fas fa-flask"></i></div>
<div class="bar-wrapper">
<div class="bar resource-bar" id="player-resource-bar">
<div id="player-resource-fill" class="bar-fill" style="width: 100%;"></div>
<span id="player-resource-text" class="bar-text">150 / 150</span>
</div>
</div>
</div>
<div class="status-area" id="player-status-area">
<i class="fas fa-shield-alt icon-status"></i> <strong>Статус:</strong> <span id="player-status">Готов(а)</span>
</div>
<div class="effects-area" id="player-effects">
<div class="effect-category">
<i class="fas fa-shield-alt icon-effects-buff"></i>
<strong>Усиления:</strong>
<span class="effect-list player-buffs">Нет</span>
</div>
<div class="effect-category">
<i class="fas fa-skull-crossbones icon-effects-debuff"></i>
<strong>Ослабления:</strong>
<span class="effect-list player-debuffs">Нет</span>
</div>
</div>
</div>
</section>
<section id="controls-panel" class="controls-panel-new">
<h3 id="turn-indicator">Ход: Игрок 1</h3>
<div id="turn-timer-container" class="turn-timer-display">
<i class="fas fa-hourglass-half"></i> Время на ход: <span id="turn-timer">--</span>
</div>
<div class="controls-layout">
<div class="control-group basic-actions">
<button id="button-attack" class="action-button basic" data-action="BASIC_ATTACK" title="Базовая атака"><i class="fas fa-shoe-prints"></i> Атака</button>
<button id="button-block" class="action-button basic" data-action="BLOCK" title="Встать в защиту (Завершает ход!)" disabled><i class="fas fa-shield-alt"></i> Защита</button>
</div>
<div class="control-group ability-list">
<h4><i class="fas fa-book-sparkles"></i> Способности</h4>
<div id="abilities-grid" class="abilities-grid">
<p class="placeholder-text">Загрузка способностей...</p>
</div>
</div>
</div>
</section>
</div> <!-- Конец player-column -->
<!-- Колонка Противника (Панель 2 в UI) -->
<div class="opponent-column">
<section id="opponent-panel" class="fighter-panel">
<div class="panel-header">
<div class="character-visual">
<img src="images/balard_avatar.jpg" alt="Аватар игрока 2" class="avatar-image opponent-avatar">
</div>
<h2 id="opponent-name" class="fighter-name">
<i class="fas fa-khanda icon-opponent"></i> Балард
</h2>
</div>
<div class="panel-content">
<div class="stat-bar-container health">
<div class="bar-icon"><i class="fas fa-heart"></i></div>
<div class="bar-wrapper">
<div class="bar health-bar" id="opponent-hp-bar">
<div id="opponent-hp-fill" class="bar-fill" style="width: 100%;"></div>
<span id="opponent-hp-text" class="bar-text">140 / 140</span>
</div>
</div>
</div>
<div class="stat-bar-container resource stamina">
<div class="bar-icon"><i class="fas fa-fire-alt"></i></div>
<div class="bar-wrapper">
<div class="bar resource-bar" id="opponent-resource-bar">
<div id="opponent-resource-fill" class="bar-fill" style="width: 100%;"></div>
<span id="opponent-resource-text" class="bar-text">100 / 100</span>
</div>
</div>
</div>
<div class="status-area" id="opponent-status-area">
<i class="fas fa-shield-alt icon-status"></i> <strong>Статус:</strong> <span id="opponent-status">Готов(а)</span>
</div>
<div class="effects-area" id="opponent-effects">
<div class="effect-category">
<i class="fas fa-shield-alt icon-effects-buff"></i>
<strong>Усиления:</strong>
<span class="effect-list opponent-buffs">Нет</span>
</div>
<div class="effect-category">
<i class="fas fa-skull-crossbones icon-effects-debuff"></i>
<strong>Ослабления:</strong>
<span class="effect-list opponent-debuffs">Нет</span>
</div>
</div>
</div>
</section>
<section id="log-panel" class="battle-log-new">
<h3><i class="fas fa-scroll"></i> Лог Боя</h3>
<ul id="log-list">
<li class="log-system">Ожидание подключения к серверу...</li>
</ul>
</section>
</div> <!-- Конец opponent-column -->
</main> <!-- Конец .battle-arena-container -->
<!-- Модальное окно конца игры -->
<div id="game-over-screen" class="modal hidden">
<div class="modal-content">
<h2 id="result-message">Победа!</h2>
<button id="return-to-menu-button" class="modal-action-button">
<i class="fas fa-arrow-left"></i> В меню выбора игры
</button>
</div>
</div>
</div> <!-- Конец .game-wrapper -->
<script src="/socket.io/socket.io.js"></script>
<script src="./js/ui.js"></script>
<script src="./js/client.js"></script>
</body>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Битва: Елена vs Балард (Сетевая Версия)</title>
<link rel="stylesheet" href="style_alt.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="auth-game-setup-wrapper"> <!-- Обертка для экранов до начала игры -->
<div id="status-container">
<div id="auth-message"></div>
<div id="game-status-message">Ожидание подключения к серверу...</div>
</div>
<div id="auth-section"> <!-- Секция Аутентификации -->
<h2>Вход / Регистрация</h2>
<form id="register-form">
<h3>Регистрация</h3>
<input type="text" id="register-username" placeholder="Имя пользователя" required autocomplete="username">
<input type="password" id="register-password" placeholder="Пароль (мин. 6 симв.)" required autocomplete="new-password">
<button type="submit">Зарегистрироваться</button>
</form>
<hr style="margin: 25px 0;">
<form id="login-form">
<h3>Вход</h3>
<input type="text" id="login-username" placeholder="Имя пользователя" required autocomplete="username">
<input type="password" id="login-password" placeholder="Пароль" required autocomplete="current-password">
<button type="submit">Войти</button>
</form>
</div>
<div id="user-info" style="display:none;"> <!-- Информация о пользователе и кнопка выхода -->
<p>Привет, <span id="logged-in-username"></span>!</p>
<button id="logout-button"><i class="fas fa-sign-out-alt"></i> Выход</button>
</div>
<div id="game-setup" style="display: none;"> <!-- Секция Настройки Игры (после логина) -->
<h2>Настройка Игры</h2>
<div>
<button id="create-ai-game">Играть против AI (Балард)</button>
</div>
<hr style="margin: 15px 0;">
<div>
<h3>PvP (Игрок против Игрока)</h3>
<!-- === Блок выбора персонажа === -->
<div class="character-selection">
<h4>Выберите персонажа для PvP:</h4>
<input type="radio" id="char-elena" name="pvp-character" value="elena" checked>
<label for="char-elena"><i class="fas fa-hat-wizard"></i> Елена</label>
<input type="radio" id="char-almagest" name="pvp-character" value="almagest">
<label for="char-almagest"><i class="fas fa-staff-aesculapius"></i> Альмагест</label>
</div>
<!-- === Конец блока выбора персонажа === -->
<button id="create-pvp-game">Создать PvP Игру</button>
<button id="find-random-pvp-game">Найти случайную PvP Игру</button>
<br><br>
<input type="text" id="game-id-input" placeholder="Введите ID игры для присоединения">
<button id="join-pvp-game">Присоединиться к PvP по ID</button>
</div>
<div id="available-games-list">
<h3>Доступные PvP игры:</h3>
<p>Загрузка списка...</p>
<!-- Список игр будет здесь -->
</div>
</div>
</div> <!-- Конец .auth-game-setup-wrapper -->
<div class="game-wrapper" style="display: none;"> <!-- Игровая арена, изначально скрыта -->
<header class="game-header">
<h1><span class="title-player">Игрок 1</span> <span class="separator"><i class="fas fa-fist-raised"></i></span> <span class="title-opponent">Игрок 2</span></h1>
</header>
<!-- === БЛОК: Контролы переключения панелей (для мобильных) === -->
<!-- Инлайновый стиль style="display: none;" УДАЛЕН. CSS управляет видимостью. -->
<div class="panel-switcher-controls">
<button id="show-player-panel-btn" class="panel-switch-button active">
<i class="fas fa-user"></i> <span class="button-text">Игрок</span>
</button>
<button id="show-opponent-panel-btn" class="panel-switch-button">
<i class="fas fa-ghost"></i> <span class="button-text">Противник</span>
</button>
</div>
<!-- === КОНЕЦ БЛОКА === -->
<main class="battle-arena-container">
<!-- Колонка Игрока (Панель 1 в UI) -->
<div class="player-column">
<section id="player-panel" class="fighter-panel">
<div class="panel-header">
<div class="character-visual">
<img src="images/elena_avatar.webp" alt="Аватар игрока 1" class="avatar-image player-avatar">
</div>
<h2 id="player-name" class="fighter-name">
<i class="fas fa-hat-wizard icon-player"></i> Елена
</h2>
</div>
<div class="panel-content">
<div class="stat-bar-container health">
<div class="bar-icon"><i class="fas fa-heart"></i></div>
<div class="bar-wrapper">
<div class="bar health-bar" id="player-hp-bar">
<div id="player-hp-fill" class="bar-fill" style="width: 100%;"></div>
<span id="player-hp-text" class="bar-text">120 / 120</span>
</div>
</div>
</div>
<div class="stat-bar-container resource mana">
<div class="bar-icon"><i class="fas fa-flask"></i></div>
<div class="bar-wrapper">
<div class="bar resource-bar" id="player-resource-bar">
<div id="player-resource-fill" class="bar-fill" style="width: 100%;"></div>
<span id="player-resource-text" class="bar-text">150 / 150</span>
</div>
</div>
</div>
<div class="status-area" id="player-status-area">
<i class="fas fa-shield-alt icon-status"></i> <strong>Статус:</strong> <span id="player-status">Готов(а)</span>
</div>
<div class="effects-area" id="player-effects">
<div class="effect-category">
<i class="fas fa-shield-alt icon-effects-buff"></i>
<strong>Усиления:</strong>
<span class="effect-list player-buffs">Нет</span>
</div>
<div class="effect-category">
<i class="fas fa-skull-crossbones icon-effects-debuff"></i>
<strong>Ослабления:</strong>
<span class="effect-list player-debuffs">Нет</span>
</div>
</div>
</div>
</section>
<section id="controls-panel" class="controls-panel-new">
<h3 id="turn-indicator">Ход: Игрок 1</h3>
<div id="turn-timer-container" class="turn-timer-display">
<i class="fas fa-hourglass-half"></i> Время на ход: <span id="turn-timer">--</span>
</div>
<div class="controls-layout">
<div class="control-group basic-actions">
<button id="button-attack" class="action-button basic" data-action="BASIC_ATTACK" title="Базовая атака"><i class="fas fa-shoe-prints"></i> Атака</button>
<button id="button-block" class="action-button basic" data-action="BLOCK" title="Встать в защиту (Завершает ход!)" disabled><i class="fas fa-shield-alt"></i> Защита</button>
</div>
<div class="control-group ability-list">
<h4><i class="fas fa-book-sparkles"></i> Способности</h4>
<div id="abilities-grid" class="abilities-grid">
<p class="placeholder-text">Загрузка способностей...</p>
</div>
</div>
</div>
</section>
</div> <!-- Конец player-column -->
<!-- Колонка Противника (Панель 2 в UI) -->
<div class="opponent-column">
<section id="opponent-panel" class="fighter-panel">
<div class="panel-header">
<div class="character-visual">
<img src="images/balard_avatar.jpg" alt="Аватар игрока 2" class="avatar-image opponent-avatar">
</div>
<h2 id="opponent-name" class="fighter-name">
<i class="fas fa-khanda icon-opponent"></i> Балард
</h2>
</div>
<div class="panel-content">
<div class="stat-bar-container health">
<div class="bar-icon"><i class="fas fa-heart"></i></div>
<div class="bar-wrapper">
<div class="bar health-bar" id="opponent-hp-bar">
<div id="opponent-hp-fill" class="bar-fill" style="width: 100%;"></div>
<span id="opponent-hp-text" class="bar-text">140 / 140</span>
</div>
</div>
</div>
<div class="stat-bar-container resource stamina">
<div class="bar-icon"><i class="fas fa-fire-alt"></i></div>
<div class="bar-wrapper">
<div class="bar resource-bar" id="opponent-resource-bar">
<div id="opponent-resource-fill" class="bar-fill" style="width: 100%;"></div>
<span id="opponent-resource-text" class="bar-text">100 / 100</span>
</div>
</div>
</div>
<div class="status-area" id="opponent-status-area">
<i class="fas fa-shield-alt icon-status"></i> <strong>Статус:</strong> <span id="opponent-status">Готов(а)</span>
</div>
<div class="effects-area" id="opponent-effects">
<div class="effect-category">
<i class="fas fa-shield-alt icon-effects-buff"></i>
<strong>Усиления:</strong>
<span class="effect-list opponent-buffs">Нет</span>
</div>
<div class="effect-category">
<i class="fas fa-skull-crossbones icon-effects-debuff"></i>
<strong>Ослабления:</strong>
<span class="effect-list opponent-debuffs">Нет</span>
</div>
</div>
</div>
</section>
<section id="log-panel" class="battle-log-new">
<h3><i class="fas fa-scroll"></i> Лог Боя</h3>
<ul id="log-list">
<li class="log-system">Ожидание подключения к серверу...</li>
</ul>
</section>
</div> <!-- Конец opponent-column -->
</main> <!-- Конец .battle-arena-container -->
<!-- Модальное окно конца игры -->
<div id="game-over-screen" class="modal hidden">
<div class="modal-content">
<h2 id="result-message">Победа!</h2>
<button id="return-to-menu-button" class="modal-action-button">
<i class="fas fa-arrow-left"></i> В меню выбора игры
</button>
</div>
</div>
</div> <!-- Конец .game-wrapper -->
<script src="/socket.io/socket.io.js"></script>
<script src="./js/ui.js"></script>
<script src="./js/client.js"></script>
</body>
</html>

File diff suppressed because it is too large Load Diff