main_web/MTG/index.html
2021-12-31 09:43:47 -05:00

167 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>MTG Life Counter</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="/menu/menu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<nav>
<div id="nav_menu">
</div>
</nav>
<div id="buttonWrapper">
<div onclick="removePlayer()" id="removePlayer" class="buttons"><i class="fas fa-minus-circle"></i></div>
<div onclick="reset()" id="reset" class="buttons"><i class="fas fa-undo-alt"></i><span class="buttonText"></span></div>
<!-- <div onclick="resetName()" id="reset" class="buttons">↻<span class="buttonText">reset name</span></div> -->
<div onclick="addPlayer()" id="addPlayer" class="buttons"><i class="fas fa-plus-circle"></i></div>
<div class="buttons"><i id="full" onclick="fullscreen()" class="fas fa-expand"></i></div>
</div>
</div>
<script src="/menu/menu.js"></script>
<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></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 src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="script.js"></script>
</body>
</html>