165 lines
3.4 KiB
HTML
165 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>FTracker</title>
|
|
<meta name="theme-color" content="#c50e1f">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
background: #ddd;
|
|
font-family: sans-serif;
|
|
}
|
|
h1 {
|
|
margin: 0;
|
|
padding: 16px;
|
|
text-transform: uppercase;
|
|
color: #eee;
|
|
background: #c50e1f;
|
|
text-align: center;
|
|
}
|
|
form {
|
|
padding: 16px;
|
|
max-width: 512px;
|
|
margin: auto;
|
|
}
|
|
input {
|
|
border: none;
|
|
padding: 16px;
|
|
margin: 4px 0;
|
|
font-size: 16px;
|
|
}
|
|
input[type=text] {
|
|
color: #000;
|
|
width: calc(100% - 32px);
|
|
}
|
|
input[type=submit] {
|
|
background: #c50e1f;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
.print {
|
|
display: none;
|
|
text-align: center;
|
|
}
|
|
.print * {
|
|
display: inline-block;
|
|
margin: 16px auto;
|
|
}
|
|
.print .link {
|
|
font-size: 24px;
|
|
}
|
|
|
|
@media print {
|
|
.print h1 {
|
|
margin-top: 64px;
|
|
color: #000;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main id="formView">
|
|
<h1>Schnitzeljagd<br>Sign Generator</h1>
|
|
<form id="qrform">
|
|
<label>
|
|
Game Name:<br>
|
|
<input type="text" name="game" id="game" placeholder="schnitzeljagd" required>
|
|
</label>
|
|
<label>
|
|
Checkpoint Name:<br>
|
|
<input type="text" name="checkpoint" id="checkpoint" placeholder="123" required>
|
|
</label>
|
|
<label>
|
|
Ask for name entry at this checkpoint:<br>
|
|
<input type="checkbox" name="askname" id="askname">
|
|
</label>
|
|
<input type="submit" value="Print">
|
|
</form>
|
|
</main>
|
|
<main id="print" class="print">
|
|
<h1 class="title"></h1><br>
|
|
<div class="qr"></div><br>
|
|
<span class="link"></span><br>
|
|
<span>
|
|
Made with FTracker<br>
|
|
https://git.fasttube.de/FaSTTUBe/schnitzeljagd<br>
|
|
© 2025 Oskar / FaSTTUBe
|
|
</span>
|
|
</main>
|
|
<script src="/game/qrcodejs/qrcode.min.js"></script>
|
|
<script>
|
|
var fv = document.getElementById('formView')
|
|
var p = document.getElementById('print')
|
|
|
|
var rform = document.getElementById('qrform')
|
|
rform.onsubmit = function(e) {
|
|
|
|
e.preventDefault()
|
|
|
|
console.log(e)
|
|
|
|
var details = {}
|
|
details.game = e.srcElement[0].value
|
|
details.checkpoint = e.srcElement[1].value
|
|
details.askname = document.getElementById('askname').checked
|
|
|
|
writePage(p, details)
|
|
|
|
printPage(p, details.game+'-'+details.checkpoint)
|
|
|
|
}
|
|
|
|
function writePage(el, details) {
|
|
|
|
var base = location.href.split('/').slice(0,4).join('/')
|
|
|
|
var url = base
|
|
+ '?game=' + details.game
|
|
+ '&checkpoint=' + details.checkpoint
|
|
|
|
console.log(details.askname)
|
|
if (details.askname)
|
|
url += '&askname=true'
|
|
|
|
var title = el.querySelector('.title')
|
|
var qr = el.querySelector('.qr')
|
|
var link = el.querySelector('.link')
|
|
|
|
title.innerHTML =
|
|
'Hier scannen um am checkpoint<br>' + details.checkpoint + '<br> einzuchecken'
|
|
link.innerHTML = url
|
|
qr.innerHTML = ''
|
|
new QRCode(qr, {
|
|
text: url,
|
|
width: 320,
|
|
height: 320
|
|
})
|
|
|
|
}
|
|
|
|
function printPage(el, name) {
|
|
|
|
var t = document.title
|
|
document.title = name
|
|
|
|
fv.style.display = 'none'
|
|
el.style.display = 'block'
|
|
|
|
window.print()
|
|
|
|
el.style.display = 'none'
|
|
fv.style.display = 'block'
|
|
|
|
document.title = t
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|