191 lines
14 KiB
HTML
191 lines
14 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="site.webmanifest">
|
|
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
|
|
<meta name="msapplication-TileColor" content="#4C633C">
|
|
<meta name="theme-color" content="#4C633C">
|
|
<title>MTG Life Counter</title>
|
|
|
|
<script defer data-domain="mtg.chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
|
|
|
|
<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">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<link rel="manifest" href="site.webmainfest" />
|
|
|
|
</head>
|
|
<body>
|
|
<script defer src="/menu/menu.js"></script>
|
|
<div id="navContainer"></div>
|
|
<script>
|
|
if('serviceWorker' in navigator) {
|
|
window.addEventListiner('load', () => {
|
|
navigator.serviceWorker.register('sw.js')
|
|
.then((registration) => {
|
|
console.log(`service worker registered succesfully ${registration}`)
|
|
})
|
|
.catch((err) => {
|
|
console.log(`Error registring ${err}`)
|
|
})
|
|
})
|
|
} else {
|
|
console.log(`Service worker is not supported in this browser.`)
|
|
}
|
|
</script>
|
|
|
|
<div id="buttonWrapper">
|
|
<div class="buttons"><i class="fa-solid fa-arrow-up-from-bracket"></i></div>
|
|
<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 class="buttons"><i id="roll" onclick="random()" class="fa-solid fa-dice-d20"></i></div> -->
|
|
<div class="container" id="centerDiv" onclick="random()">
|
|
<img id="d20" src="img/dice.webp" >
|
|
<div class="centered" id="center">1</div>
|
|
</div>
|
|
</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></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> |