258 lines
9.0 KiB
HTML
258 lines
9.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>MTG Life Counter</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="menu/menu.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
|
|
/>
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
</head>
|
|
<body>
|
|
<script defer src="script.js"></script>
|
|
|
|
<div id="navContainer"></div>
|
|
<div class="buttons1" id="buttonWrapper">
|
|
<span class="icons" onclick="removePlayer()">
|
|
<i class="fa-solid fa-circle-minus"></i>
|
|
</span>
|
|
<span class="icons" onclick="reset()">
|
|
<i class="fa-solid fa-rotate-left"></i>
|
|
</span>
|
|
<span class="icons" onclick="addPlayer()">
|
|
<i class="fa-solid fa-circle-plus"></i>
|
|
</span>
|
|
<span class="icons" onclick="commander()">
|
|
<i class="fa-solid fa-crown"></i>
|
|
</span>
|
|
<!-- <span class="icons" onclick="flip()">
|
|
<i class="fa-solid fa-wand-sparkles"></i>
|
|
</span> -->
|
|
<span class="icons" onclick="fullscreen()">
|
|
<i class="fa-solid fa-expand"></i>
|
|
</span>
|
|
<span class="dice">
|
|
<img id="d20" src="img/dice.webp" onclick="random()" />
|
|
<div id="d20-face">1</div>
|
|
</span>
|
|
</div>
|
|
|
|
<main>
|
|
<div id="player1" class="player">
|
|
<div class="name" id="name1" contenteditable="true">Player 1</div>
|
|
<div class="life">
|
|
<span class="vert">
|
|
<div onclick="lifeIncrease5(1)" class="lifeUp" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-up"></i>
|
|
</span>
|
|
</div>
|
|
<div onclick="lifeIncrease(1)" class="lifeUp">
|
|
|
|
<i class="fas fa-chevron-circle-up"></i>
|
|
|
|
</div>
|
|
</span>
|
|
<div id="lifeCount1">20</div>
|
|
<span class="vert">
|
|
<div onclick="lifeDecrease5(1)" class="lifeDown" class="fiveLife">
|
|
|
|
<i class="fas fa-arrow-circle-down"></i>
|
|
|
|
</div>
|
|
<div onclick="lifeDecrease(1)" class="lifeDown">
|
|
|
|
<i class="fas fa-chevron-circle-down"></i>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="player2" class="player">
|
|
<div class="name" id="name2" contenteditable="true">Player 2</div>
|
|
<div class="life">
|
|
<span class="vert">
|
|
<div onclick="lifeIncrease5(2)" class="lifeUp" class="fiveLife">
|
|
|
|
<i class="fas fa-arrow-circle-up"></i>
|
|
|
|
</div>
|
|
<div onclick="lifeIncrease(2)" class="lifeUp">
|
|
|
|
<i class="fas fa-chevron-circle-up"></i>
|
|
|
|
</div>
|
|
</span>
|
|
<div id="lifeCount2">20</div>
|
|
<span class="vert">
|
|
<div onclick="lifeDecrease5(2)" class="lifeDown" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-down"></i>
|
|
</div>
|
|
<div onclick="lifeDecrease(2)" class="lifeDown">
|
|
|
|
<i class="fas fa-chevron-circle-down"></i>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="player3" class="player">
|
|
<div class="name" id="name3" contenteditable="true">Player 3</div>
|
|
<div class="life">
|
|
<span class="vert">
|
|
<div onclick="lifeIncrease5(3)" class="lifeUp" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-up"></i>
|
|
</div>
|
|
<div onclick="lifeIncrease(3)" class="lifeUp">
|
|
<i class="fas fa-chevron-circle-up"></i>
|
|
</div>
|
|
</span>
|
|
<div id="lifeCount3">20</div>
|
|
<span class="vert">
|
|
<div onclick="lifeDecrease5(3)" class="lifeDown" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-down"></i>
|
|
</div>
|
|
<div onclick="lifeDecrease(3)" class="lifeDown">
|
|
|
|
<i class="fas fa-chevron-circle-down"></i>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="player4" class="player">
|
|
<div class="name" id="name4" contenteditable="true">Player 4</div>
|
|
<div class="life">
|
|
<span class="vert">
|
|
<div onclick="lifeIncrease5(4)" class="lifeUp" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-up"></i>
|
|
</div>
|
|
<div onclick="lifeIncrease(4)" class="lifeUp">
|
|
<i class="fas fa-chevron-circle-up"></i>
|
|
</div>
|
|
</span>
|
|
<div id="lifeCount4">20</div>
|
|
<span class="vert">
|
|
<div onclick="lifeDecrease5(4)" class="lifeDown" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-down"></i>
|
|
</div>
|
|
<div onclick="lifeDecrease(4)" class="lifeDown">
|
|
|
|
<i class="fas fa-chevron-circle-down"></i>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="player5" class="player">
|
|
<div class="name" id="name5" contenteditable="true">Player 5</div>
|
|
<div class="life">
|
|
<span class="vert">
|
|
<div onclick="lifeIncrease5(5)" class="lifeUp" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-up"></i>
|
|
</div>
|
|
<div onclick="lifeIncrease(5)" class="lifeUp">
|
|
<i class="fas fa-chevron-circle-up"></i>
|
|
</div>
|
|
</span>
|
|
<div id="lifeCount5">20</div>
|
|
<span class="vert">
|
|
<div onclick="lifeDecrease5(5)" class="lifeDown" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-down"></i>
|
|
</div>
|
|
<div onclick="lifeDecrease(5)" class="lifeDown">
|
|
|
|
<i class="fas fa-chevron-circle-down"></i>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="player6" class="player">
|
|
<div class="name" id="name6" contenteditable="true">Player 6</div>
|
|
<div class="life">
|
|
<span class="vert">
|
|
<div onclick="lifeIncrease5(6)" class="lifeUp" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-up"></i>
|
|
</div>
|
|
<div onclick="lifeIncrease(6)" class="lifeUp">
|
|
<i class="fas fa-chevron-circle-up"></i>
|
|
</div>
|
|
</span>
|
|
<div id="lifeCount6">20</div>
|
|
<span class="vert">
|
|
<div onclick="lifeDecrease5(6)" class="lifeDown" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-down"></i>
|
|
</div>
|
|
<div onclick="lifeDecrease(6)" class="lifeDown">
|
|
|
|
<i class="fas fa-chevron-circle-down"></i>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="player7" class="player">
|
|
<div class="name" id="name7" contenteditable="true">Player 7</div>
|
|
<div class="life">
|
|
<span class="vert">
|
|
<div onclick="lifeIncrease5(7)" class="lifeUp" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-up"></i>
|
|
</div>
|
|
<div onclick="lifeIncrease(7)" class="lifeUp">
|
|
<i class="fas fa-chevron-circle-up"></i>
|
|
</div>
|
|
</span>
|
|
<div id="lifeCount7">20</div>
|
|
<span class="vert">
|
|
<div onclick="lifeDecrease5(7)" class="lifeDown" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-down"></i>
|
|
</div>
|
|
<div onclick="lifeDecrease(7)" class="lifeDown">
|
|
|
|
<i class="fas fa-chevron-circle-down"></i>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="player8" class="player">
|
|
<div class="name" id="name8" contenteditable="true">Player 8</div>
|
|
<div class="life">
|
|
<span class="vert">
|
|
<div onclick="lifeIncrease5(8)" class="lifeUp" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-up"></i>
|
|
</div>
|
|
<div onclick="lifeIncrease(8)" class="lifeUp">
|
|
<i class="fas fa-chevron-circle-up"></i>
|
|
</div>
|
|
</span>
|
|
<div id="lifeCount8">20</div>
|
|
<span class="vert">
|
|
<div onclick="lifeDecrease5(8)" class="lifeDown" class="fiveLife">
|
|
<i class="fas fa-arrow-circle-down"></i>
|
|
</div>
|
|
<div onclick="lifeDecrease(8)" class="lifeDown">
|
|
|
|
<i class="fas fa-chevron-circle-down"></i>
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script defer src="menu/menu.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script
|
|
src="https://kit.fontawesome.com/17513d4ff3.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
</body>
|
|
</html>
|