init
This commit is contained in:
metacryst
16
ui/public/components/Footer.js
Normal file
16
ui/public/components/Footer.js
Normal file
@@ -0,0 +1,16 @@
|
||||
css(`
|
||||
page-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
`)
|
||||
|
||||
export default class Footer extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML += /* html */`
|
||||
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("page-footer", Footer)
|
||||
55
ui/public/components/NavBar.js
Normal file
55
ui/public/components/NavBar.js
Normal file
@@ -0,0 +1,55 @@
|
||||
class NavBar extends Shadow {
|
||||
NavButton(text) {
|
||||
|
||||
function normalizeText(text) {
|
||||
return text.toLowerCase().replace(/[\s?]+/g, "");
|
||||
}
|
||||
|
||||
function isSelected(el) {
|
||||
return ("/" + normalizeText(el.innerText)) === window.location.pathname
|
||||
}
|
||||
|
||||
return p(text)
|
||||
.cursor("default")
|
||||
.textUnderlineOffset(0.5, em)
|
||||
.onAppear(function() {
|
||||
this.style.textDecoration = isSelected(this) ? "underline" : ""
|
||||
})
|
||||
.onHover(function (hovering) {
|
||||
if(hovering) {
|
||||
this.style.textDecoration = "underline"
|
||||
} else if(!isSelected(this)) {
|
||||
this.style.textDecoration = ""
|
||||
}
|
||||
})
|
||||
.onClick(function (done) {
|
||||
if(done) {
|
||||
if(!isSelected(this)) {
|
||||
window.navigateTo(normalizeText(this.innerText))
|
||||
} else {
|
||||
window.navigateTo("/")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
HStack(() => {
|
||||
this.NavButton("WHY?")
|
||||
this.NavButton("EVENTS")
|
||||
div().width(2.5, em).height(2.5, em)
|
||||
this.NavButton("JOIN")
|
||||
this.NavButton("SIGN IN")
|
||||
})
|
||||
.x(50, vw).y(4, em)
|
||||
.center()
|
||||
.fontSize(0.85, em)
|
||||
.justifyContent("center")
|
||||
.gap(3, em)
|
||||
.paddingRight(2, em)
|
||||
.width(50, vw)
|
||||
}
|
||||
}
|
||||
|
||||
register(NavBar)
|
||||
27
ui/public/components/NavMenu.js
Normal file
27
ui/public/components/NavMenu.js
Normal file
@@ -0,0 +1,27 @@
|
||||
css(`
|
||||
nav-menu {
|
||||
position: fixed;
|
||||
bottom: 6vh;
|
||||
right: 6vh;
|
||||
width: 20vw;
|
||||
height: 10vh;
|
||||
background: var(--green);
|
||||
color: var(--tan);
|
||||
border: 20px solid var(--tan);
|
||||
}
|
||||
`)
|
||||
|
||||
export default class NavMenu extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML += /* html */ `
|
||||
<span style="display: block; height: 2vh; background-color: var(--tan); border-radius: 2px;"></span>
|
||||
<span style="display: block; height: 2vh; background-color: var(--tan); border-radius: 2px;"></span>
|
||||
<span style="display: block; height: 2vh; background-color: var(--tan); border-radius: 2px;"></span>
|
||||
<p style="font-size: 3vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">Menu</p>
|
||||
`
|
||||
|
||||
document.addEventListener("")
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("nav-menu", NavMenu)
|
||||
46
ui/public/components/SideBar.js
Normal file
46
ui/public/components/SideBar.js
Normal file
@@ -0,0 +1,46 @@
|
||||
css(`
|
||||
side-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100vw;
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
background: var(--tan);
|
||||
border-left: 1px solid var(--green);
|
||||
transition: right 0.3s ease;
|
||||
z-index: 10;
|
||||
padding: 5vw;
|
||||
}
|
||||
|
||||
side-bar a {
|
||||
font-size: 8vw;
|
||||
color: var(--red)
|
||||
}
|
||||
|
||||
side-bar h2 {
|
||||
font-size: 6vw
|
||||
}
|
||||
`)
|
||||
|
||||
|
||||
export default class SideBar extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML += /* html */`
|
||||
<h2>Menu</h2>
|
||||
<ul style="list-style: none; padding: 0;">
|
||||
<li><a href="/join">Join</a></li>
|
||||
<li><a href="/locations">Locations</a></li>
|
||||
<li><a href="/donate">Donate</a></li>
|
||||
<li><a href="/events">Events</a></li>
|
||||
<li><a href="/login">Login</a></li>
|
||||
</ul>
|
||||
<img src="_/icons/x.svg" style="margin-top: 70vw; width: 10vw; height: 10vw" onclick="">
|
||||
`
|
||||
this.querySelector("img").addEventListener("click", () => {
|
||||
const sidebar = document.querySelector("side-bar");
|
||||
sidebar.style.right = "-100vw"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("side-bar", SideBar)
|
||||
138
ui/public/components/SignupForm.js
Normal file
138
ui/public/components/SignupForm.js
Normal file
@@ -0,0 +1,138 @@
|
||||
class SignupForm extends Shadow {
|
||||
|
||||
errorMessage = "Error signing up. Please try again later or email info@hyperia.so if the problem persists."
|
||||
successMessage = "Success! You may now log in."
|
||||
|
||||
inputStyles(el) {
|
||||
return el
|
||||
.border("1px solid var(--accent)")
|
||||
.color("var(--accent)")
|
||||
}
|
||||
|
||||
render() {
|
||||
ZStack(() => {
|
||||
form(() => {
|
||||
|
||||
VStack(() => {
|
||||
|
||||
p()
|
||||
.attr({id: "signupMessage"})
|
||||
.display("none")
|
||||
.padding(1, em)
|
||||
.color("var(--main)")
|
||||
.background("var(--accent)")
|
||||
|
||||
HStack(() => {
|
||||
|
||||
VStack(() => {
|
||||
input("First Name*")
|
||||
.attr({name: "firstName", type: "name", required: "true"})
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("Last Name*")
|
||||
.attr({name: "lastName", type: "name", required: "true"})
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("Email*")
|
||||
.attr({name: "email", type: "email", required: "true"})
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("Password*")
|
||||
.attr({name: "password", type: "password", required: "true"})
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("Confirm Password*")
|
||||
.attr({name: "password", type: "password", required: "true"})
|
||||
.styles(this.inputStyles)
|
||||
})
|
||||
.width(50, "%")
|
||||
.gap(1, em)
|
||||
|
||||
VStack(() => {
|
||||
input("Street Address*")
|
||||
.attr({ name: "address1", type: "text", autocomplete: "address-line1", required: "true" })
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("Apt, Suite, Unit (optional)")
|
||||
.attr({ name: "address2", type: "text", autocomplete: "address-line2" })
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("City*")
|
||||
.attr({ name: "city", type: "text", autocomplete: "address-level2", required: "true" })
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("State*")
|
||||
.attr({ name: "state", type: "text", autocomplete: "address-level1", required: "true" })
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("ZIP Code*")
|
||||
.attr({ name: "zip", type: "text", autocomplete: "postal-code", required: "true" })
|
||||
.styles(this.inputStyles)
|
||||
|
||||
input("Country*")
|
||||
.attr({ name: "country", type: "text", autocomplete: "country-name", required: "true" })
|
||||
.styles(this.inputStyles)
|
||||
})
|
||||
.width(50, "%")
|
||||
.gap(1, em)
|
||||
|
||||
})
|
||||
.gap(2, em)
|
||||
|
||||
button("Submit")
|
||||
})
|
||||
.gap(2, em)
|
||||
})
|
||||
.color("var(--accent)")
|
||||
.onSubmit(async (e) => {
|
||||
e.preventDefault()
|
||||
console.log("submitting")
|
||||
$("#signupMessage").style.display = "none"
|
||||
|
||||
const formData = new FormData(this.$("form"));
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
let newMember = {
|
||||
"email": data.email,
|
||||
"firstName": data.firstName,
|
||||
"lastName": data.lastName,
|
||||
"password": data.password
|
||||
}
|
||||
let address = {
|
||||
"address1": data.address1,
|
||||
"address2": data.address2,
|
||||
"zip": data.zip,
|
||||
"state": data.state,
|
||||
"city": data.city
|
||||
}
|
||||
newMember.address = address
|
||||
|
||||
try {
|
||||
const response = await fetch(window.location.pathname + window.location.search, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(newMember)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
$("#signupMessage").style.display = "block"
|
||||
$("#signupMessage").innerText = this.errorMessage
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
} else {
|
||||
$("#signupMessage").style.display = "block"
|
||||
$("#signupMessage").innerText = this.successMessage
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Fetch error:", err);
|
||||
}
|
||||
})
|
||||
.x(50, vw).y(53, vh)
|
||||
.width(60, vw)
|
||||
.center()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
register(SignupForm)
|
||||
Reference in New Issue
Block a user