MTG PWA
This commit is contained in:
parent
92496a85de
commit
5ffe99e150
@ -18,6 +18,7 @@
|
||||
<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">
|
||||
<link rel="manifest" href="mainfest.json" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@ -26,6 +27,22 @@
|
||||
<div id="nav_menu">
|
||||
</div>
|
||||
</nav>
|
||||
<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 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>
|
||||
|
||||
25
MTG/manifest.json
Normal file
25
MTG/manifest.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "MTG Life Counter",
|
||||
"name": "MTG Life Counter",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icons/favicon.ico",
|
||||
"sizes": "64x64",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "icons/android-chrome-192x192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "icons/android-chrome-512x512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@ -16,26 +16,30 @@ background: radial-gradient(circle, #792f22 0%, #4f644f 47%, rgb(108, 127, 131)
|
||||
height: 100vh
|
||||
|
||||
}
|
||||
html{
|
||||
height: 100vh;
|
||||
}
|
||||
#full{
|
||||
color:rgb(165, 162, 162);
|
||||
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
justify-content: space-evenly;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
|
||||
Verdana, sans-serif;
|
||||
flex-wrap: wrap;
|
||||
width: 100vw;
|
||||
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 3em;
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
margin: 0 0 20px;
|
||||
margin: 0 0 10px;
|
||||
padding: 10px 0;
|
||||
opacity: 0.9;
|
||||
background-color: #eee;
|
||||
@ -57,7 +61,7 @@ main {
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
background-color: #eee;
|
||||
width: auto;
|
||||
min-height: 75px;
|
||||
/* min-height: px; */
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
@ -83,13 +87,16 @@ main {
|
||||
/* padding: 10px 0; */
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* height:250px; */
|
||||
/* height:2rem; */
|
||||
height: calc(100%-35px);
|
||||
min-width: auto;
|
||||
font-size: 3em;
|
||||
user-select: none;
|
||||
height:fit-content
|
||||
/* margin-bottom: -50px; */
|
||||
|
||||
}
|
||||
|
||||
.life div {
|
||||
@ -102,6 +109,7 @@ main {
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
margin: min(1rem, 1rem);
|
||||
margin-bottom: -100px;
|
||||
/* max-width: max-content; */
|
||||
width: clamp(min-content, max-content, max-content+1rem);
|
||||
/* max-width: 25%; */
|
||||
|
||||
12
MTG/sw.js
Normal file
12
MTG/sw.js
Normal file
@ -0,0 +1,12 @@
|
||||
self.addEventListener('install', () => {
|
||||
console.log(`installing service worker`);
|
||||
})
|
||||
|
||||
self.addEventListener('activate', () => {
|
||||
console.log(`activating service worker`);
|
||||
})
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
console.log(`fetching...
|
||||
${event.request.url}`);
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user