Steven/LuggageTrackerUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Steven:fd0211efceb29910d038f920eb28a2f096aadbd5
Branches Tags
Steven:master
...
compare: Steven:94c74120814fb240050f64ab1f912d3e4c6f12d6
Branches Tags
Steven:master

2 Commits
fd0211efce ... 94c7412081

Author SHA1 Message Date
Steven Tracey
94c7412081 Beta v2 2025-07-10 15:47:18 -04:00
Steven Tracey
356669fdfd V1 2025-07-10 09:04:16 -04:00
12 changed files with 316 additions and 71 deletions
Show Stats Expand all files Collapse all files

19
error.php Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT'].'/snippets/header.php' ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one">
<h1>Error</h1>
<p>Please report the following to Steven</p>
<p>{{ .error }}</p>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT'].'/snippets/footer.php' ?>
</body>
</html>

56
genqr.php Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one">
<h1>QR Code</h1>
<a id="qr-link" href="">
<div id="qr"></div>
</a>
</div>
<div class="section-two">
<div id="loading"></div>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
<script src="/static/qrcode.min.js"></script>
<script>
const path = window.location.pathname;
const parts = path.split("/");
const user = parts.pop();
let url = location.protocol + "//" + location.host + "/u/" + user;
const qrcode = new QRCode(document.getElementById('qr'), {
text: url,
width: 1024,
height: 1024,
colorDark : '#000',
colorLight : '#fff',
correctLevel : QRCode.CorrectLevel.L
});
let qrLink = document.getElementById("qr-link");
let qrImg = document.querySelector("#qr img");
console.log(qrImg.src);
qrLink.setAttribute("download", "qrcode-" + user + ".png");
const delay = ms => new Promise(res => setTimeout(res, ms));
const setHref = async () => {
while (!qrLink.href.startsWith("data:")) {
await delay(100);
qrLink.setAttribute("href", qrImg.src);
console.log("Refreshing...");
}
document.getElementById("loading").remove();
};
setHref();
</script>
</body>
</html>

6
home.php
View File

@ -1,10 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Luggage Tracker</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>

23
info.php Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one flex-vertical">
<h1>Owner Information</h1>
</div>
<div class="section-two flex-vertical align-left">
<p>Contact Name: {{ .contact_name }}</p>
<p>Phone Number: {{ .phone_number }}</p>
<p>Email Address: {{ .email_address }}</p>
<p>Address: {{ .address }}</p>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
</body>
</html>

23
register.php Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one">
<h1>Registration</h1>
</div>
<div class="section-two flex-vertical align-left">
<form> <!-- TODO Make these stack vertically -->
<label>Registration Code</label>
<label>Name</label>
</form>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
</body>
</html>

6
snippets/head.php Normal file
View File

@ -0,0 +1,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, internal-scale=1, viewport-fit=cover">
<title>My Luggage Info</title>
<link rel="stylesheet" href="/static/style.css?v=43">
</head>

2
snippets/header.php
View File

@ -2,6 +2,6 @@
<header class="header">
<img class="header-icon" src="/static/icon.png" alt="icon"/>
<h1 class="title">Luggage Tracker</h1>
<h1 class="title">My Luggage Info</h1>
<div class="spacer"></div>
</header>

1
static/qrcode.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

218
static/style.css
View File

@ -8,33 +8,144 @@
font-family: Verdana,sans-serif;
}
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
@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;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
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;
}
.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;
flex: 0 0 64px;
width: 15vw;
height: auto;
max-height: 80px;
.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 {
@ -43,13 +154,6 @@ body {
color: var(--light);
}
.footer {
background-color: var(--dark);
display: flex;
flex: 0 0 auto;
height: 80px;
}
.footer-text {
display: inherit;
align-content: center;
@ -96,13 +200,7 @@ body {
);
}
.content {
display: flex;
width: 90vw;
max-width: 800px;
padding: 1.5rem;
background: white;
border-radius: 5px;
.content h1 {
text-align: center;
}
@ -114,23 +212,6 @@ body {
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;
}
.content button:hover {
color: var(--light);
background-color: var(--dark);
@ -163,4 +244,33 @@ body {
#status {
margin-bottom: 0;
}
#qr-link {
display: inline-flex;
}
#qr {
display: flex;
justify-content: center;
}
#qr img {
width: auto;
height: 60vh;
}
#loading {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid var(--mid-light);
border-radius: 50%;
border-top-color: var(--mid-dark);
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}

9
static/verify.js
View File

@ -1,15 +1,12 @@
let baseUrl = "http://localhost:8000"
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();
const user = parts.pop();
const user = "tracey"
fetch(baseUrl + "/api/verify/" + user, {
fetch("/api/verify/" + user, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
@ -26,7 +23,7 @@ document.getElementById("submitBtn").addEventListener('click', function(e) {
} 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(baseUrl + "/u/" + user + "/info")
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;

18
unauthorized.php Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>
<div class="container">
<div class="content flex-vertical">
<div class="section-one">
<h1>Unauthorized</h1>
<p>Maybe you had the wrong code?</p>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
</body>
</html>

6
verify.php
View File

@ -1,10 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Luggage Tracker</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/head.php" ?>
<body>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/header.php" ?>