init
This commit is contained in:
metacryst
325
ui/public/pages/Events.js
Normal file
325
ui/public/pages/Events.js
Normal 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
89
ui/public/pages/Home.js
Normal 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 Y P E R I A ")
|
||||
.x(50, vw).y(53, vh)
|
||||
.textAlign("center")
|
||||
.center()
|
||||
.color("var(--gold)")
|
||||
.fontSize(5, vw)
|
||||
.maxWidth(isMobile() ? 1000 : 100, em)
|
||||
} else {
|
||||
p("H Y P E R I A ")
|
||||
.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
29
ui/public/pages/Join.js
Normal 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
36
ui/public/pages/SignIn.js
Normal 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
9
ui/public/pages/Success.js
Normal 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
21
ui/public/pages/Why.js
Normal 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)
|
||||
Reference in New Issue
Block a user