mirror of
https://github.com/AlecM33/Werewolf.git
synced 2025-12-26 15:57:50 +01:00
123 lines
5.2 KiB
HTML
123 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Werewolf</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel = "stylesheet" type = "text/css" href = "../static/styles.css" />
|
|
<link rel="shortcut icon" type="image/png" href="../assets/images/favicon.ico"/>
|
|
<script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="modal hidden" id="role-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="close" class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="roles"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal hidden" id="edit-custom-roles-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="close" class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="custom-roles"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal hidden" id="custom-card-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="close" class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h2>Add a Custom Role</h2>
|
|
<form id="custom-role-form">
|
|
<label for="custom-role-name">Name</label>
|
|
<input id="custom-role-name" type="text" autocomplete="off" required/>
|
|
<label for="custom-role-desc">Description</label>
|
|
<textarea rows="3" id="custom-role-desc" required></textarea>
|
|
<label for="custom-role-team">Team</label>
|
|
<select id="custom-role-team">
|
|
<option id="option-good" value="good">Good</option>
|
|
<option id="option-evil" value="evil">Evil</option>
|
|
</select>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="custom-role-wolf">
|
|
<label for="custom-role-wolf">Werewolf role (counts for parity)</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="custom-role-remember">
|
|
<label for="custom-role-remember">Remember this role for later (uses cookies)</label>
|
|
</div>
|
|
<br><br>
|
|
<input type="submit" class="app-btn" value="Add Role">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="app-content">
|
|
<div id="create-game-container">
|
|
<h2 class="app-header-secondary">Create A Game</h2>
|
|
<label>
|
|
Your Name
|
|
<span>
|
|
<input id="name" type="text" autocomplete="off"/>
|
|
<p id="name-error"></p>
|
|
</span>
|
|
</label>
|
|
<label>
|
|
Time (Minutes, Optional)
|
|
<input id="time" type="number" autocomplete="off"/>
|
|
</label>
|
|
<div id="card-select-header">
|
|
<span>
|
|
<button id="reset-btn" class="app-btn">Reset Deck</button>
|
|
<button id="role-btn" class="app-btn">View Role Info</button>
|
|
</span>
|
|
<span>
|
|
<div>
|
|
<h3 id="game-size">0 Players</h3>
|
|
<button id="edit-role-btn" class="app-btn-secondary">Manage Custom Roles
|
|
<img src="../assets/images/pencil.svg"/>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<div id="werewolf-key"></div>
|
|
<div> = Werewolf role (counts for <a href="/faq">parity</a>)</div>
|
|
</div>
|
|
</span>
|
|
<span id="role-view-changer">
|
|
<div id="role-view-changer-gallery" class="selected">
|
|
<p>Gallery View</p>
|
|
<img src="../assets/images/gallery.svg"/>
|
|
</div>
|
|
<div id="role-view-changer-list">
|
|
<p>Condensed View</p>
|
|
<img src="../assets/images/list.svg"/>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
<div id="card-select">
|
|
<h2>Good Roles</h2>
|
|
<div id="card-select-good"></div>
|
|
<h2>Evil Roles</h2>
|
|
<div id="card-select-evil"></div>
|
|
</div>
|
|
<div id="game-start">
|
|
<a href="/">
|
|
<button class="app-btn">Back</button>
|
|
</a>
|
|
<button id="create-btn" class="app-btn">Create</button>
|
|
</div>
|
|
<p id="some-error"></p>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/static/setup.js"></script>
|
|
</body>
|
|
</html>
|