sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic Navigation

Browse Source
This commit is contained in:
metacryst
2025-11-18 04:51:40 -06:00
parent ff28d68988
commit 7f85dbe493
12 changed files with 143 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ui/public/pages/Events.js Normal file
View File

@@ -0,0 +1,7 @@
class Events extends Shadow {
render() {
}
}
register(Events)

55
ui/public/pages/Home.js Normal file
View File

@@ -0,0 +1,55 @@
import "../components/NavBar.js"
import "./Why.js"
import "./Events.js"
import "./Join.js"
import "./SignIn.js"
class Home extends Shadow {
render() {
ZStack(() => {
NavBar()
switch(window.location.pathname) {
case "/":
img("_/images/knight.png", "29vw")
.position("absolute")
.left(50, vw).top(50, vh)
.center()
p("H   Y   P   E   R   I   A")
.x(50, vw).y(50, vh)
.center()
.color("var(--gold)")
.fontSize(5, vw)
p("A CLASSICAL CHRISTIAN ASSOCIATION")
.x(50, vw).y(94, vh)
.center()
.letterSpacing(0.3, em)
break;
case "/why":
Why()
break;
case "/events":
Events()
break;
case "/join":
Join()
break;
case "/signin":
SignIn()
break;
}
})
.onNavigate(() => {
this.rerender()
})
}
}
register(Home)

9
ui/public/pages/Join.js Normal file
View File

@@ -0,0 +1,9 @@
class Join extends Shadow {
render() {
p("Membership is invitation-only. Look out for us in person, or come to an event!")
.x(50, vw).y(50, vh)
.center()
}
}
register(Join)

7
ui/public/pages/SIgnIn.js Normal file
View File

@@ -0,0 +1,7 @@
class SignIn extends Shadow {
render() {
}
}
register(SignIn)

7
ui/public/pages/Why.js Normal file
View File

@@ -0,0 +1,7 @@
class Why extends Shadow {
render() {
}
}
register(Why)

86
ui/public/pages/about.html
View File

@@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<style>
#items {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
}
@media (max-width: 600px) {
input {
width: 50vw
}
}
</style>
<script src="_/code/quill.js"></script>
<script type="module">
import PageFooter from "./components/Footer.js"
import NavBar from "./components/NavBar.js"
import SideBar from "./components/SideBar.js"
</script>
</head>
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<div id="items">
<form id="signup-form">
<input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
<br>
<p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0; margin-bottom: 1em"></p>
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
</form>
<script>
document.getElementById('signup-form').addEventListener('submit', async (e) => {
e.preventDefault(); // prevent page reload
const email = document.getElementById('email').value;
const messageEl = document.getElementById('applicant-message');
try {
const res = await fetch('/api/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({ email }),
});
if (res.ok) {
const data = await res.json();
messageEl.style.color = 'green';
messageEl.textContent = data.message;
} else {
const error = await res.text();
messageEl.style.color = 'red';
messageEl.textContent = 'Error: ' + error;
}
} catch (err) {
messageEl.style.color = 'red';
messageEl.textContent = 'Error submitting form.';
console.error(err);
}
});
</script>
</div>
</body>
</html>

118
ui/public/pages/join.html
View File

@@ -1,118 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<style>
#items {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
}
input {
background-color: transparent;
border: none;
border-radius: 5px;
border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
height: 2em;
width: 15vw;
padding: 0.2em;
transition: border .2s, padding .2s;
color: var(--accent)
}
input::placeholder {
color: var(--accent);
}
input:focus {
outline: none;
padding: 0.4em;
border-top: 2px solid var(--red);
border-bottom: 2px solid var(--red);
}
input:focus::placeholder {
color: var(--red)
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: #c7a67b !important;
}
@media (max-width: 600px) {
input {
width: 50vw
}
}
</style>
<script src="_/code/quill.js"></script>
<script type="module">
import PageFooter from "./components/Footer.js"
import NavBar from "./components/NavBar.js"
import SideBar from "./components/SideBar.js"
</script>
</head>
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<div id="items">
<form id="signup-form">
<input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
<br>
<p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0; margin-bottom: 1em"></p>
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
</form>
<script>
document.getElementById('signup-form').addEventListener('submit', async (e) => {
e.preventDefault(); // prevent page reload
const email = document.getElementById('email').value;
const messageEl = document.getElementById('applicant-message');
try {
const res = await fetch('/api/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({ email }),
});
if (res.ok) {
const data = await res.json();
messageEl.style.color = 'green';
messageEl.textContent = data.message;
} else {
const error = await res.text();
messageEl.style.color = 'red';
messageEl.textContent = 'Error: ' + error;
}
} catch (err) {
messageEl.style.color = 'red';
messageEl.textContent = 'Error submitting form.';
console.error(err);
}
});
</script>
</div>
</body>
</html>

86
ui/public/pages/signin.html
View File

@@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<style>
#items {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
}
input {
background-color: transparent;
border: none;
border-radius: 5px;
border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
height: 2em;
width: 15vw;
padding: 0.2em;
transition: border .2s, padding .2s;
color: var(--accent)
}
input::placeholder {
color: var(--accent);
}
input:focus {
outline: none;
padding: 0.4em;
border-top: 2px solid var(--red);
border-bottom: 2px solid var(--red);
}
input:focus::placeholder {
color: var(--red)
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: #c7a67b !important;
}
@media (max-width: 600px) {
input {
width: 50vw
}
}
</style>
<script src="_/code/quill.js"></script>
<script type="module">
import PageFooter from "./components/Footer.js"
import NavBar from "./components/NavBar.js"
import SideBar from "./components/SideBar.js"
</script>
</head>
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<div id="items">
<form id="login-form" action="/login" method="POST">
<input name="email" placeholder="email" style="margin-bottom: 15px;" required>
<br>
<input name="password" type="password" placeholder="password" required>
<br>
<p id="applicant-message" style="color: green; margin-left: 10px; display: inline-block; margin: 0px; margin-left: 20px; font-size: 1em"></p>
<br>
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign In</button>
</form>
</div>
</body>
</html>