FaSTTUBe
/
ftracker
50
1
Fork 0
Code Issues 2 Pull Requests Releases 1 Wiki Activity

Web: Add styling

This commit is contained in:
Oskar Winkels 2020-12-01 15:34:09 +01:00 committed by Oskar
parent 0703ec949a
commit 7d0ad23e1c
1 changed files with 75 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
web/index.html
View File

@ -2,6 +2,67 @@
<html> <html>
<head> <head>
<title>FTracker</title> <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;
}
label {
display: block;
font-size: 16px;
margin-bottom: 16px;
color: #444;
}
label#agreelabel {
height: 32px;
line-height: 32px;
}
label span {
width: calc(100% - 50px);
display: inline-block;
vertical-align: middle;
line-height: normal;
}
input {
border: none;
padding: 16px;
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%;
}
input[type=checkbox] {
transform: translateY(-3px);
float: left;
height: 32px;
width: 32px;
margin-right: 8px;
}
</style>
<script> <script>
var cbt = { var cbt = {
'arrival': 'I have read and will adhere to the <a href="/guidelines" target="_blank">protection guidelines</a>', 'arrival': 'I have read and will adhere to the <a href="/guidelines" target="_blank">protection guidelines</a>',
@ -28,22 +89,20 @@
</script> </script>
</head> </head>
<body> <body>
<main>
<h1><script> <h1><script>
document.write(qp.action + " " + qp.room) document.write(qp.action + "<br>Room " + qp.room)
</script></h1> </script></h1>
<form> <form>
<label> <label>
Full Name:<br> Full Name:<br>
<input type="text" name="name" id="name" required> <input type="text" name="name" id="name" placeholder="John Doe" required>
</label><br> </label>
<label> <label id="agreelabel">
<input type="checkbox" name="agree" id="agree" required> <input type="checkbox" name="agree" id="agree" required>
<script>document.write(cbt[qp.action])</script> <span><script>document.write(cbt[qp.action])</script></span>
</label><br> </label>
<input type="submit"> <input type="submit">
</form> </form>
</main>
<script> <script>
// Prefill the name field if it was successfully entered before // Prefill the name field if it was successfully entered before
var savedName = localStorage.getItem('name') var savedName = localStorage.getItem('name')