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

V2 ish

Browse Source
This commit is contained in:
Steven Tracey 2025-07-14 22:09:36 -04:00
parent 94c7412081
commit a08c4708e2
7 changed files with 126 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
error.php
View File

@ -1,19 +0,0 @@
<!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>

8
unauthorized.php → generic.php
View File

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

37
register.php
View File

@ -9,15 +9,44 @@
<div class="section-one"> <div class="section-one">
<h1>Registration</h1> <h1>Registration</h1>
</div> </div>
<div class="section-two flex-vertical align-left"> <div class="section-two">
<form> <!-- TODO Make these stack vertically --> <form id="reg-form" accept-charset="UTF-8" action="/api/register" method="post">
<label>Registration Code</label> <div class="inputs">
<label>Name</label> <div class="flex flex-vertical">
<label class="label-left" for="name">Name</label>
<input id="name" name="name" type="text" placeholder="John Doe">
<label class="label-left" for="user-id">User ID</label>
<input id="user-id" name="user-id" type="text" placeholder="jdoe">
<label class="label-left" for="email">Email Address</label>
<input id="email" name="email" type="text" placeholder="johndoe@example.com">
<label class="label-left" for="phone-number">Phone Number</label>
<input id="phone-number" name="phone-number" type="text" placeholder="+1(212)555-1234">
<label class="label-left" for="registration_code">Registration Code</label>
<input id="registration_code" name="registration_code" type="text" placeholder="xxxxxxxx">
<p id="msg-box"></p>
</div>
<div class="flex flex-vertical">
<label class="label-left" for="street1">Street Line 1</label>
<input id="street1" name="street1" type="text" placeholder="123 Main Street">
<label class="label-left" for="street2">Street Line 2</label>
<input id="street2" name="street2" type="text" placeholder="(Optional)">
<label class="label-left" for="city">City</label>
<input id="city" name="city" type="text" placeholder="Anytown">
<label class="label-left" for="state">State</label>
<input id="state" name="state" type="text" placeholder="New York">
<label class="label-left" for="postal-code">Postal Code</label>
<input id="postal-code" name="postal-code" type="text" placeholder="12345">
<label class="label-left" for="country">Country</label>
<input id="country" name="country" type="text" placeholder="United States">
</div>
</div>
<input class="btn" type="submit" value="Register">
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?> <?php include $_SERVER['DOCUMENT_ROOT']."/snippets/footer.php" ?>
<script src="/static/register.js"></script>
</body> </body>
</html> </html>

2
snippets/header.php
View File

@ -1,7 +1,9 @@
<?php ?> <?php ?>
<header class="header"> <header class="header">
<a class="icon-link" href="/">
<img class="header-icon" src="/static/icon.png" alt="icon"/> <img class="header-icon" src="/static/icon.png" alt="icon"/>
</a>
<h1 class="title">My Luggage Info</h1> <h1 class="title">My Luggage Info</h1>
<div class="spacer"></div> <div class="spacer"></div>
</header> </header>

29
static/register.js Normal file
View File

@ -0,0 +1,29 @@
const form = document.getElementById("reg-form"); // Replace #my-form with your form's ID
form.addEventListener("submit", async (event) => {
event.preventDefault();
let userId = document.getElementById("user-id").value;
let msgBox = document.getElementById("msg-box");
try {
const response = await fetch(`/api/checkname/${userId}`, {
method: "GET",
});
if (response.status === 409) {
msgBox.innerText = "Entry with id \"" + userId + "\" already in use";
return;
} else if (!response.ok) {
throw new Error(`Server Error: ${response.status}`);
}
const data = await response.json();
console.log("Fetch successful:", data);
form.submit();
} catch (error) {
console.error("Fetch failed:", error);
msgBox.innerText = "Internal Error: " + error;
}
});

64
static/style.css
View File

@ -33,9 +33,8 @@
.header-icon { .header-icon {
display: block; display: block;
flex: 0 0 72px; flex: 0 0 72px;
width: 20vw; width: 85px;
height: auto; height: 85px;
max-height: 85px;
} }
.footer { .footer {
@ -51,7 +50,7 @@
max-width: 800px; max-width: 800px;
padding: 1.5rem; padding: 1.5rem;
background: white; background: white;
border-radius: 5px; border-radius: 15px;
text-align: center; text-align: center;
} }
@ -59,7 +58,7 @@
font-size: 16px; font-size: 16px;
} }
.content button { .btn {
color: var(--dark); color: var(--dark);
background-color: var(--light); background-color: var(--light);
border-radius: 8px; border-radius: 8px;
@ -76,6 +75,20 @@
align-items: flex-start; align-items: flex-start;
margin-left: 5vw; margin-left: 5vw;
} }
.inputs {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.inputs div {
flex: 1 0 auto;
}
.inputs input {
margin-bottom: 10px;
}
} }
@media only screen and (min-width: 700px) { @media only screen and (min-width: 700px) {
@ -100,12 +113,15 @@
flex: 0 0 64px; flex: 0 0 64px;
} }
.icon-link {
display: flex;
}
.header-icon { .header-icon {
display: block; display: block;
flex: 0 0 64px; flex: 0 0 64px;
width: 15vw; width: 80px;
height: auto; height: 80px;
max-height: 80px;
} }
.footer { .footer {
@ -129,7 +145,7 @@
font-size: 16px; font-size: 16px;
} }
.content button { .btn {
color: var(--dark); color: var(--dark);
background-color: var(--light); background-color: var(--light);
border-radius: 8px; border-radius: 8px;
@ -146,6 +162,22 @@
align-items: flex-start; align-items: flex-start;
margin-left: 5vw; margin-left: 5vw;
} }
.inputs {
display: flex;
flex: 1 0 auto;
flex-direction: row;
justify-content: space-between;
column-gap: 5vw;
}
.inputs div {
flex: 1 0 auto;
}
.inputs input {
margin-bottom: 10px;
}
} }
.title { .title {
@ -221,11 +253,17 @@
background-color: var(--dark-click); background-color: var(--dark-click);
} }
.flex {
display: flex;
}
.flex-vertical { .flex-vertical {
/*display: flex;*/
flex-direction: column; flex-direction: column;
} }
.flex-horizontal { .flex-horizontal {
/*display: flex;*/
flex-direction: row; flex-direction: row;
} }
@ -242,6 +280,14 @@
flex: 1 0 auto; flex: 1 0 auto;
} }
.label-left {
text-align: left;
}
#reg-form {
flex: 1 0 auto;
}
#status { #status {
margin-bottom: 0; margin-bottom: 0;
} }

4
verify.php
View File

@ -9,10 +9,10 @@
<div class="section-one flex-horizontal"> <div class="section-one flex-horizontal">
<label for="code">Secret Code (SC):</label> <label for="code">Secret Code (SC):</label>
<input id="code" type="text"> <input id="code" type="text">
<button id="submitBtn">Submit</button> <button id="submitBtn" class="btn">Submit</button>
</div> </div>
<div class="section-two flex-vertical"> <div class="section-two flex-vertical">
<p id="status" class="hidden">Text</p> <p id="status" class="hidden"></p>
</div> </div>
</div> </div>
</div> </div>