sam/frm.so
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
metacryst
2026-01-04 07:58:23 -06:00
parent b50468eb5a
commit 6a435ac11a
122 changed files with 13995 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ui/public/components/Footer.js Normal file
View 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
View 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
View 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
View 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
View 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)

33
ui/public/index.html Normal file
View File

@@ -0,0 +1,33 @@
<!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">
<link
rel="preload"
href="/_/fonts/BonaNova/BonaNova-Regular.woff"
as="font"
type="font/woff2"
crossorigin
>
<link
rel="preload"
href="/_/fonts/BonaNova/BonaNova-Bold.woff"
as="font"
type="font/woff"
crossorigin
>
<style>
body {
background: #FEBA7D;
}
</style>
<script src="/_/code/quill.js"></script>
<script type="module" src="75820185/index.js"></script>
</head>
<body>
</body>
</html>

2
ui/public/index.js Normal file
View File

@@ -0,0 +1,2 @@
import "./pages/Home.js"
Home()

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

@@ -0,0 +1,325 @@
class Events extends Shadow {
events = [
{
date: `January 23, 2025`,
title: `Hyperia Winter Ball`,
description: `Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`,
location: `Austin, TX`
}
]
render() {
ZStack(() => {
VStack(() => {
h1("HYPERIA")
.marginBottom(0, em)
p("Public Events")
.fontSize(1.2, em)
.marginBottom(2, em)
const Stack = window.isMobile() ? VStack : HStack
Stack(() => {
VStack(() => {
p(`January 23, 2025`)
p(`Hyperia Winter Ball`)
.fontSize(1.2, em)
p(`Austin, TX`)
})
p(`Join us in Austin, Texas for a great dance, with free drinks and live music. <br><br>Admission: $35 for men, women are free.`)
.marginRight(4, em)
HStack(() => {
img("/_/icons/creditcards/visa.svg")
img("/_/icons/creditcards/mastercard.svg")
img("/_/icons/creditcards/discover.svg")
img("/_/icons/creditcards/amex.svg")
})
.alignSelf("flex-start")
.height(2, em)
.maxWidth(40, vw)
button("Buy Ticket")
.color("var(--darkbrown")
.border("1px solid #ab2f007d")
.background('var(--green)')
.marginLeft("auto")
.onClick(async function() {
this.innerText = "Loading..."
const res = await fetch("/create-checkout-session", { method: "POST" });
const data = await res.json();
window.location = data.url;
})
})
.gap(3, em)
.color("var(--darkbrown)")
.background(`var(--accent)`)
.padding(1, em)
.borderRadius(12, px)
.border("2px solid #ab2f007d")
})
.marginLeft(window.isMobile() ? 0 : 15, vmax)
.marginRight(window.isMobile() ? 0 : 15, vmax)
.marginTop(10, vmax)
HStack(() => {
p("Privacy Policy")
.onHover(function (hovering) {
if(hovering) {
this.style.color = "var(--darkbrown)"
} else {
this.style.color = ""
}
})
.onClick(() => {
this.$("#policyWindow").style.display = "flex"
})
p("Refund and Return Policy")
.onHover(function (hovering) {
if(hovering) {
this.style.color = "var(--darkbrown)"
} else {
this.style.color = ""
}
})
.onClick(() => {
this.$("#refundWindow").style.display = "flex"
})
p("Contact Us")
.onHover(function (hovering) {
if(hovering) {
this.style.color = "var(--darkbrown)"
} else {
this.style.color = ""
}
})
.onClick(() => {
this.$("#contactWindow").style.display = "flex"
})
})
.x(50, vw).yBottom(0, vh)
.center()
.gap(2, em)
.opacity(0.5)
.cursor("default")
})
VStack(() => {
p("Privacy Policy")
.fontSize(2, em)
.fontWeight(600)
.marginBottom(1, em)
p("We value your privacy. This Privacy Policy explains how we collect, use, store, and protect your information when you use our website or services.")
p("1. Information We Collect")
.fontWeight(600)
.marginTop(1, em)
p("• Personal information you provide, such as your name, email address, or other contact details.")
p("• Automatically collected data, including IP address, browser type, device information, and usage statistics.")
p("• Cookies or similar tracking technologies that help us improve the user experience.")
p("2. How We Use Your Information")
.fontWeight(600)
.marginTop(1, em)
p("• To operate and improve our website and services.")
p("• To communicate with you about updates, support requests, or account-related matters.")
p("• To maintain security, prevent fraud, and ensure proper functionality.")
p("3. How We Share Information")
.fontWeight(600)
.marginTop(1, em)
p("We do not sell your personal information. We may share data only with trusted service providers who help us operate the platform, or when required by law.")
p("4. Data Storage & Security")
.fontWeight(600)
.marginTop(1, em)
p("We use reasonable technical and administrative safeguards to protect your information. However, no system is completely secure, and we cannot guarantee absolute protection.")
p("5. Cookies")
.fontWeight(600)
.marginTop(1, em)
p("Our site may use cookies to remember preferences, analyze traffic, and enhance usability. You can disable cookies in your browser settings, but some features may stop working.")
p("6. Your Rights")
.fontWeight(600)
.marginTop(1, em)
p("Depending on your location, you may have rights to access, update, delete, or request a copy of your personal data. Contact us if you wish to exercise these rights.")
p("7. Third-Party Links")
.fontWeight(600)
.marginTop(1, em)
p("Our website may contain links to third-party sites. We are not responsible for their content or privacy practices.")
p("8. Changes to This Policy")
.fontWeight(600)
.marginTop(1, em)
p("We may update this Privacy Policy from time to time. Updated versions will be posted on this page with the effective date.")
p("9. Contact Us")
.fontWeight(600)
.marginTop(1, em)
p("If you have any questions about this Privacy Policy, feel free to contact us at info@hyperia.so.")
p("x")
.onClick(function (done) {
if(done) {
this.parentElement.style.display = "none"
}
})
.color("var(--red)")
.xRight(1, em).y(1, em)
.fontSize(2, em)
.cursor("pointer")
})
.x(50, vw).y(50, vh)
.width(70, vw).height(70, vh)
.center()
.backgroundColor("var(--accent)")
.display("none")
.overflow("scroll")
.padding(1, em)
.border("3px solid black")
.color("var(--darkbrown)")
.attr({ id: "policyWindow" })
VStack(() => {
p("Refund & Return Policy")
.fontSize(2, em)
.fontWeight(600)
.marginBottom(1, em)
p("1. Eligibility for Refunds")
.fontWeight(600)
.marginTop(1, em)
p("• Refund requests may be considered when submitted within 14 days of purchase.")
p("• To qualify, you must provide proof of purchase and a valid reason for the request.")
p("• Certain digital products or services may be non-refundable once accessed or downloaded.")
p("2. Non-Refundable Items")
.fontWeight(600)
.marginTop(1, em)
p("• Products or services that have already been delivered, downloaded, or accessed in full.")
p("• Custom work, personalized items, or one-time service fees.")
p("• Any promotional or discounted items, unless required by law.")
p("3. Returns (If Applicable)")
.fontWeight(600)
.marginTop(1, em)
p("• Physical items must be returned in their original condition.")
p("• You are responsible for return shipping costs unless the item was defective or incorrect.")
p("• Items damaged through misuse or neglect cannot be returned.")
p("4. Processing Refunds")
.fontWeight(600)
.marginTop(1, em)
p("• Approved refunds are issued to the original payment method.")
p("• Processing times may vary depending on your bank or payment provider.")
p("• We will notify you once your refund has been initiated.")
p("5. Cancellations")
.fontWeight(600)
.marginTop(1, em)
p("• Orders or subscriptions may be cancelled before fulfillment or renewal.")
p("• If Hyperia declare a cancellation of any product or event, a refund will be issued to all parties.")
p("6. Contact for Refund Requests")
.fontWeight(600)
.marginTop(1, em)
p("If you need to request a refund, return an item, or cancel an order, please contact us at info@hyperia.so. Include your order number and relevant details so we can assist you promptly.")
p("7. Policy Updates")
.fontWeight(600)
.marginTop(1, em)
p("We may update this Refund & Return Policy from time to time. Any changes will be posted on this page with the effective date.")
p("x")
.onClick(function (done) {
if(done) {
this.parentElement.style.display = "none"
}
})
.color("var(--red)")
.xRight(1, em).y(1, em)
.fontSize(2, em)
.cursor("pointer")
})
.x(50, vw).y(50, vh)
.width(70, vw).height(70, vh)
.center()
.backgroundColor("var(--accent)")
.display("none")
.overflow("scroll")
.padding(1, em)
.border("3px solid black")
.color("var(--darkbrown)")
.attr({ id: "refundWindow" })
VStack(() => {
p("Contact Us")
.fontSize(2, em)
.fontWeight(600)
.marginBottom(1, em)
p("Email: info@hyperia.so")
p("Phone: 813-373-9100")
p("Address: 2014 E 9th St, Unit A, Austin TX")
p("x")
.onClick(function (done) {
if(done) {
this.parentElement.style.display = "none"
}
})
.color("var(--red)")
.xRight(1, em).y(1, em)
.fontSize(2, em)
.cursor("pointer")
})
.gap(2, em)
.x(50, vw).y(50, vh)
.width(50, vw).height(50, vh)
.center()
.backgroundColor("var(--accent)")
.display("none")
.overflow("scroll")
.padding(1, em)
.border("3px solid black")
.color("var(--darkbrown)")
.attr({ id: "contactWindow" })
}
}
register(Events)

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

@@ -0,0 +1,89 @@
import "../components/NavBar.js"
import "../components/SignupForm.js"
import "./Why.js"
import "./Events.js"
import "./Join.js"
import "./SignIn.js"
import "./Success.js"
class Home extends Shadow {
render() {
ZStack(() => {
NavBar()
img("/_/icons/logo.svg", "2.5em")
.onClick((done) => {
if(!done) return
window.navigateTo("/")
})
.position("absolute")
.left(50, vw).top(4, em)
.center()
.transform(`translate(${window.isMobile() ? "-50%" : "-2em"}, -50%)`)
switch(window.location.pathname) {
case "/":
img("/_/images/knight.webp", "29vmax")
.position("absolute")
.left(50, vw).top(isMobile() ? 50 : 53, vh)
.center()
if(!isMobile()) {
p("H &nbsp; Y &nbsp; P &nbsp; E &nbsp; R &nbsp; I &nbsp; A &nbsp;")
.x(50, vw).y(53, vh)
.textAlign("center")
.center()
.color("var(--gold)")
.fontSize(5, vw)
.maxWidth(isMobile() ? 1000 : 100, em)
} else {
p("H &nbsp; Y &nbsp; P &nbsp; E &nbsp; R &nbsp; I &nbsp; A &nbsp;")
.x(46, vw).y(isMobile() ? 50 : 53, vh)
.textAlign("center")
.color("var(--gold)")
.fontSize(5, vw)
}
if(!isMobile()) {
let text = "A Classical Christian Network"
p(isMobile() ? text : text.toUpperCase())
.x(50, vw).yBottom(isMobile() ? 1 : 3, vh)
.center()
.letterSpacing(0.1, em)
.width(isMobile() ? 80 : 100, vw)
.fontSize(isMobile() ? 0.8 : 1, em)
.textAlign("center")
}
break;
case "/why":
Why()
break;
case "/events":
Events()
break;
case "/join":
Join()
break;
case "/success":
Success()
break;
default:
if(window.location.pathname.startsWith("/signup")) {
SignupForm()
} else if(window.location.pathname.startsWith("/signin")) {
SignIn()
}
}
})
.onNavigate(() => {
this.rerender()
})
}
}
register(Home)

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

@@ -0,0 +1,29 @@
class Join extends Shadow {
render() {
VStack(() => {
p("Membership is invitation-only. Wait to meet one of us, or come to one of our events!")
// p("Membership is invitation-only. But sign up for our newsletter to hear about more events!")
// HStack(() => {
// input("Email", "40vmin")
// .attr({name: "email", type: "email"})
// button("Sign Up")
// .width(15, vmin)
// })
// .gap(1, em)
// .marginTop(1, em)
})
.alignItems("center")
.maxWidth(90, vw)
.x(50, vw).y(50, vh)
.center()
}
}
register(Join)

36
ui/public/pages/SignIn.js Normal file
View File

@@ -0,0 +1,36 @@
class SignIn extends Shadow {
inputStyles(el) {
return el
.color("var(--accent)")
.border("1px solid var(--accent)")
}
render() {
ZStack(() => {
if(window.location.search.includes("new")) {
p("Welcome to Hyperia! You may now log in.")
.x(50, vw).y(40, vh)
.center()
}
form(() => {
input("Email")
.attr({name: "email", type: "email"})
.margin(1, em)
.styles(this.inputStyles)
input("Password")
.attr({name: "password", type: "password"})
.margin(1, em)
.styles(this.inputStyles)
button("Submit")
.margin(1, em)
})
.attr({action: "/login", method: "POST"})
.x(50, vw).y(50, vh)
.center()
})
}
}
register(SignIn)

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

@@ -0,0 +1,9 @@
class Success extends Shadow {
render() {
p("Thanks for your purchase! You will receive a confirmation email shortly. <br><br> <b>Keep that email; it will be checked at the door.</b>")
.x(50, vw).y(50, vh)
.center()
}
}
register(Success)

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

@@ -0,0 +1,21 @@
class Why extends Shadow {
render() {
p(`I grew up going to Classical Christian schools all my life. Little did I know, this was a very unique experience - we got to learn all about our history, and everyone had a shared moral understanding.
<br><br>Only when I went out into the world did I realize that most Americans have no idea what this is like. They have never been a part of a shared culture, and the only value they know is multiculturalism.
<br><br>As adults, that is the world the we are all expected to live in.
<br><br>Classical Christian schools are great, but what if I want to live a Classical Christian life?
<br><br>That is what Hyperia is for. It is a Classical Christian space for adults.
<br><br> -- Sam Russell, Founder
`)
.marginTop(window.isMobile() ? 20 : 30, vh)
.marginHorizontal(window.isMobile() ? 10 : 20, vw)
.marginBottom(20, vh)
}
}
register(Why)