294 lines
11 KiB
HTML
294 lines
11 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>
|
|
<iframe
|
|
src="/menu/test.html"
|
|
width="100%"
|
|
height="52px"
|
|
style="display: block; z-index: 1"
|
|
frameborder="0"
|
|
></iframe> -->
|
|
<!-- <script defer src="/menu/menu.js"></script> -->
|
|
<div id="navContainer"></div>
|
|
<script>
|
|
if ("serviceWorker" in navigator) {
|
|
window.addEventListener("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" class="is-justify-content-space-between">
|
|
<div class="buttons1">
|
|
<i class="fa-solid fa-arrow-up-from-bracket"></i>
|
|
</div>
|
|
<div onclick="removePlayer()" id="removePlayer" class="buttons1">
|
|
<i class="fas fa-minus-circle"></i>
|
|
</div>
|
|
<div onclick="reset()" id="reset" class="buttons1">
|
|
<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="buttons1">
|
|
<i class="fas fa-plus-circle"></i>
|
|
</div>
|
|
<div class="buttons1">
|
|
<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> -->
|
|
<div class="buttons1" id="buttonWrapper">
|
|
<i class="buttons1" class="fa-solid fa-arrow-up-from-bracket"></i>
|
|
<i class="buttons1" class="fas fa-minus-circle"></i>
|
|
<i class="buttons1" class="fas fa-undo-alt"></i><span class="buttonText"></span>
|
|
<i class="buttons1" class="fas fa-plus-circle"></i>
|
|
<img class="buttons1" id="d20" src="img/dice.webp" />
|
|
<div class="centered" id="center">1</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>
|