<!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: 42px auto;
}
.print .link {
font-size: 24px;
}
@media print {
.print h1 {
margin-top: 64px;
color: #000;
}
}
</style>
</head>
<body>
<main id="formView">
<h1>FTracker<br>Door Sign Genrator</h1>
<form id="roomform">
<label>
Room Nr/Name:<br>
<input type="text" name="room" id="room" placeholder="123" required>
</label>
<input type="submit" value="Print">
</form>
</main>
<main id="printA" 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/ftracker<br>
© 2020 Oskar / FaSTTUBe
</span>
</main>
<main id="printD" 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/ftracker<br>
© 2020 Oskar / FaSTTUBe
</span>
</main>
<script src="/qrcodejs/qrcode.min.js"></script>
<script>
var fv = document.getElementById('formView')
var pa = document.getElementById('printA')
var pd = document.getElementById('printD')
var rform = document.getElementById('roomform')
rform.onsubmit = function(e) {
e.preventDefault()
var room = e.srcElement[0].value
writePage(pa, room, 'arrival')
writePage(pd, room, 'departure')
printPage(pa, 'ftracker-arrival-'+room)
printPage(pd, 'ftracker-departure-'+room)
}
function writePage(el, room, type) {
var base = location.href.split('/').slice(0,3).join('/')
var url = base + '/?' + type + '=' + room
var title = el.querySelector('.title')
var qr = el.querySelector('.qr')
var link = el.querySelector('.link')
title.innerHTML =
'Scan here to log ' + type + '<br> in room ' + room
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>