169 lines
6.0 KiB
HTML
169 lines
6.0 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Сапер мультиплеер</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<link rel="stylesheet" href="/static/small-screens.css">
|
||
<link rel="stylesheet" href="/static/colorpicker.min.css" />
|
||
<script src="/static/socket.io.js"></script>
|
||
<script src="/static/colorpicker.iife.min.js"></script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div id="content">
|
||
<div class="block" id="create-room" data-block="create-room">
|
||
<div>
|
||
<h3>Ваш никнейм</h3>
|
||
</div>
|
||
<div>
|
||
<input id="nickname" type="text" placeholder="Введите никнейм">
|
||
</div>
|
||
<div></div>
|
||
<div>
|
||
<div class="block">
|
||
<div>
|
||
<h3>Присоединиться</h3>
|
||
</div>
|
||
<div>
|
||
<input id="room-id" type="text" placeholder="Код">
|
||
</div>
|
||
<div>
|
||
<button onclick="join()">Присоединиться</button>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div>
|
||
<h3>Новая комната</h3>
|
||
</div>
|
||
<div class="no-wrap">
|
||
<input id="width" type="number" placeholder="25" min="5" max="25" value="25">
|
||
<b>X</b>
|
||
<input id="height" type="number" placeholder="15" min="5" max="15" value="15">
|
||
<div></div>
|
||
<b>Бомб:</b>
|
||
<input id="bombs" type="number" placeholder="15" min="5" max="150" value="100">
|
||
</div>
|
||
<div>
|
||
<button onclick="create()">Создать</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div></div>
|
||
<div></div>
|
||
<div>
|
||
<h3>Основные цвета</h3>
|
||
</div>
|
||
<div>
|
||
<button id="color-bg"></button>
|
||
<button id="color-bg-2"></button>
|
||
<button id="color-fg"></button>
|
||
</div>
|
||
<div></div>
|
||
<div>
|
||
<h3>Цвета чата</h3>
|
||
</div>
|
||
<div>
|
||
<div class="block">
|
||
<div>
|
||
<h3>Уведомления</h3>
|
||
</div>
|
||
<div>
|
||
<button id="color-bg-chat-service"></button>
|
||
<button id="color-fg-chat-service"></button>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
|
||
<div>
|
||
<h3>Исходящие</h3>
|
||
</div>
|
||
<div>
|
||
<button id="color-bg-chat-self"></button>
|
||
<button id="color-fg-chat-self"></button>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div>
|
||
<h3>Входящие</h3>
|
||
</div>
|
||
<div>
|
||
<button id="color-bg-chat-other"></button>
|
||
<button id="color-fg-chat-other"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div></div>
|
||
<div>
|
||
<h3>Цвета клеток</h3>
|
||
</div>
|
||
<div>
|
||
<div class="block">
|
||
<div>
|
||
<h3>Фон открытой</h3>
|
||
</div>
|
||
<div>
|
||
<button id="color-bg-cell-open"></button>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
|
||
<div>
|
||
<h3>Фон закрытой</h3>
|
||
</div>
|
||
<div>
|
||
<button id="color-bg-cell-closed"></button>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div>
|
||
<h3>Фон с бомбой</h3>
|
||
</div>
|
||
<div>
|
||
<button id="color-bg-cell-bomb"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3>Цвета цифер</h3>
|
||
</div>
|
||
<div>
|
||
<button id="color-fg-cell-1"></button>
|
||
<button id="color-fg-cell-2"></button>
|
||
<button id="color-fg-cell-3"></button>
|
||
<button id="color-fg-cell-4"></button>
|
||
<button id="color-fg-cell-5"></button>
|
||
<button id="color-fg-cell-6"></button>
|
||
<button id="color-fg-cell-7"></button>
|
||
<button id="color-fg-cell-8"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="game" data-block="game" style="display: none;">
|
||
<canvas id="game-canvas" width="800" height="600"></canvas>
|
||
<div id="game-tools">
|
||
<div id="chat-and-users">
|
||
<div id="chat"></div>
|
||
<div id="users"></div>
|
||
</div>
|
||
<div id="buttons">
|
||
<input id="chat-msg" placeholder="Сообщение..." type="text">
|
||
<button onclick="restart()">Перезапустить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
Сапер от <a href="https://t.me/fasterino" target="_blank">@fasterino</a> и <a
|
||
href="http://t.me/synthoria_what" target="_blank">@synthoria_what</a>
|
||
</footer>
|
||
|
||
<script src="/static/main.js"></script>
|
||
<script src="/static/game.js"></script>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |