V1
This commit is contained in:
@@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Luggage Tracker</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<img class="header-icon" src="/static/icon.png" alt="icon"/>
|
||||
<h1 class="title">Luggage Tracker</h1>
|
||||
<div class="spacer"></div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<h3>Registration</h3>
|
||||
<p>Contact Steven Tracey
|
||||
<a class="contact-link" href="mailto:steven@nevets.tech?subject=QR%20Generator%20-%20(Your%20Name)&body=Name%3A%0APhone%20Number%3A%0AEmail%20Address%3A%0AMailing%20Address%3A%0AStreet%3A%0ACity%3A%0AZip%3A%0AState%3A%0ACountry%3A">via email</a>
|
||||
to get your QR code</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="footer-text">Made hastily by <a class="footer-text" href="https://www.linkedin.com/in/steven-tracey18/">Steven Tracey</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
213
static/style.css
213
static/style.css
@@ -1,5 +1,6 @@
|
||||
:root {
|
||||
--dark: #1f363dff;
|
||||
--dark-click: #152429;
|
||||
--mid-dark: #40798cff;
|
||||
--mid: #70a9a1ff;
|
||||
--mid-light: #9ec1a3ff;
|
||||
@@ -7,43 +8,152 @@
|
||||
font-family: Verdana,sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@media only screen and (min-width: 300px) {
|
||||
body {
|
||||
margin: 0;
|
||||
height: 92vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--mid-dark);
|
||||
padding: 0 1rem;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 0 0 72px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: block;
|
||||
flex: 0 0 72px;
|
||||
width: 20vw;
|
||||
height: auto;
|
||||
max-height: 85px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--dark);
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
width: 85vw;
|
||||
max-width: 800px;
|
||||
padding: 1.5rem;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.content button {
|
||||
color: var(--dark);
|
||||
background-color: var(--light);
|
||||
border-radius: 8px;
|
||||
border: 2px solid;
|
||||
border-color: var(--dark);
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
align-items: flex-start;
|
||||
margin-left: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center; /* vertical centering */
|
||||
justify-content: space-between; /* icon left, spacer right */
|
||||
background-color: var(--mid-dark);
|
||||
padding: 0 1rem;
|
||||
height: 80px;
|
||||
}
|
||||
@media only screen and (min-width: 700px) {
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 0 0 64px; /* or your icon’s width */
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--mid-dark);
|
||||
padding: 0 1rem;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: block; /* remove inline whitespace */
|
||||
flex: 0 0 64px; /* or your icon’s width */
|
||||
width: 15vw; /* fill the 64px container */
|
||||
height: auto; /* keep aspect ratio */
|
||||
max-height: 80px; /* never exceed 80px bar height */
|
||||
.spacer {
|
||||
flex: 0 0 64px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: block;
|
||||
flex: 0 0 64px;
|
||||
width: 15vw;
|
||||
height: auto;
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--dark);
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
width: 90vw;
|
||||
max-width: 800px;
|
||||
padding: 1.5rem;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.content button {
|
||||
color: var(--dark);
|
||||
background-color: var(--light);
|
||||
border-radius: 8px;
|
||||
border: 2px solid;
|
||||
border-color: var(--dark);
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
align-items: flex-start;
|
||||
margin-left: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1; /* take up all the space between */
|
||||
text-align: center; /* center text within that space */
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--dark);
|
||||
display: flex;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
display: inherit;
|
||||
align-content: center;
|
||||
@@ -78,7 +188,11 @@ body {
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20vh 0 calc(80vh - 303px) 0;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
background-image: linear-gradient(
|
||||
to bottom right,
|
||||
var(--mid-light),
|
||||
@@ -86,13 +200,8 @@ body {
|
||||
);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
width: 90vw; /* takes 90% of viewport (or container) width */
|
||||
max-width: 800px; /* but never wider than 800px */
|
||||
padding: 1.5rem; /* give it some breathing room inside */
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
.content h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
@@ -101,4 +210,38 @@ body {
|
||||
|
||||
.content p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content button:hover {
|
||||
color: var(--light);
|
||||
background-color: var(--dark);
|
||||
}
|
||||
|
||||
.content button:active {
|
||||
background-color: var(--dark-click);
|
||||
}
|
||||
|
||||
.flex-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-one {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.section-two {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#status {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
32
static/verify.js
Normal file
32
static/verify.js
Normal file
@@ -0,0 +1,32 @@
|
||||
document.getElementById("submitBtn").addEventListener('click', function(e) {
|
||||
let code = document.getElementById("code").value;
|
||||
console.log("Clicked: " + code);
|
||||
|
||||
const path = window.location.pathname;
|
||||
const parts = path.split("/");
|
||||
const user = parts.pop();
|
||||
|
||||
fetch("/api/verify/" + user, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': "Basic " + code,
|
||||
}
|
||||
}).then(response => response.json())
|
||||
.then(data => {
|
||||
let statusText = document.getElementById("status");
|
||||
console.log(data);
|
||||
statusText.classList.remove("hidden");
|
||||
if (data.status === 404) {
|
||||
// Not found
|
||||
statusText.innerText = "User with that code not found";
|
||||
} else if (data.status === 200) {
|
||||
// Display found and redirect to baseUrl/u/user/info with auth token
|
||||
statusText.innerText = "User found, redirecting...";
|
||||
window.location.replace("/u/" + user + "/info?token=" + data.token);
|
||||
} else {
|
||||
// Error
|
||||
statusText.innerText = "Error, please send this to Steven to be fixed. Error: " + data.error;
|
||||
}
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user