main_web/MTG/index.html.bk

294 lines
11 KiB
Plaintext
Executable File

<!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="https://chrisedwards.tech/MTG/script.js"></script>
</body>
</html>