159 lines
3.2 KiB
HTML
159 lines
3.2 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: 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>
|