145 lines
5.0 KiB
JavaScript
145 lines
5.0 KiB
JavaScript
import "./SignUp.js"
|
|
import "./SignIn.js"
|
|
import "./SignupForm.js"
|
|
import "./Success.js"
|
|
|
|
class Home extends Shadow {
|
|
|
|
MainContent() {
|
|
return VStack(() => {
|
|
HStack(() => {
|
|
img("/_/icons/quill.svg", "6vmax")
|
|
|
|
p("PARCHMENT")
|
|
.fontFamily("Nabla")
|
|
.fontSize(6, vmax)
|
|
.marginLeft(1, rem)
|
|
.color("var(--accent)")
|
|
})
|
|
.marginBottom(1, rem)
|
|
|
|
HStack(() => {
|
|
|
|
VStack(() => {
|
|
HStack(() => {
|
|
span("The Community App")
|
|
.fontFamily("Canterbury")
|
|
.color("var(--accent)")
|
|
.fontSize(2.2, vmax)
|
|
.paddingBottom(1, rem)
|
|
})
|
|
.height(5, em)
|
|
.verticalAlign("center")
|
|
.horizontalAlign("center")
|
|
|
|
p("Parchment is a platform for small to medium-sized communities.")
|
|
.color("var(--quillred)")
|
|
.borderTop("1px solid var(--quillred)")
|
|
.verticalAlign("center")
|
|
.borderHorizontal("1px solid var(--quillred)")
|
|
.height(5, em)
|
|
.fontSize(window.isMobile() ? 2 : 1.2, vmax)
|
|
.paddingTop(2, vmax)
|
|
.paddingBottom(window.isMobile() ? 1 : 0, em)
|
|
.paddingHorizontal(2, vmax)
|
|
})
|
|
|
|
VStack(() => {
|
|
|
|
HStack(() => {
|
|
p("Log In")
|
|
.color("var(--quillred)")
|
|
.paddingVertical(1.2, rem)
|
|
.paddingHorizontal(3, vmax)
|
|
.fontSize(1.2, em)
|
|
.cursor("default")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--quillred)"
|
|
this.style.color = "black"
|
|
} else {
|
|
this.style.background = ""
|
|
this.style.color = "var(--quillred)"
|
|
}
|
|
})
|
|
.onClick(() => {
|
|
window.navigateTo("/login")
|
|
})
|
|
p("Sign Up")
|
|
.color("var(--quillred)")
|
|
.borderLeft("1px solid var(--quillred)")
|
|
.paddingVertical(1.2, rem)
|
|
.paddingHorizontal(3, vmax)
|
|
.fontSize(1.2, em)
|
|
.cursor("default")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--quillred)"
|
|
this.style.color = "black"
|
|
} else {
|
|
this.style.background = ""
|
|
this.style.color = "var(--quillred)"
|
|
}
|
|
})
|
|
.onClick(() => {
|
|
window.navigateTo("/signup")
|
|
})
|
|
})
|
|
.height(5, em)
|
|
.border("1px solid var(--quillred)")
|
|
|
|
div()
|
|
.height(5, em)
|
|
})
|
|
|
|
})
|
|
|
|
ZStack(() => {
|
|
img("/_/images/nodes.svg", window.isMobile() ? "30vmax" : "20vmax")
|
|
.marginHorizontal(50, pct)
|
|
.marginTop(13, em)
|
|
.center()
|
|
})
|
|
.width(100, pct)
|
|
.marginBottom(10, em)
|
|
.border("1px solid var(--quillred)")
|
|
})
|
|
.marginHorizontal(window.isMobile() ? 6 : 27, vw)
|
|
.width(window.isMobile() ? 88 : 46, vw)
|
|
.marginTop(10, vh)
|
|
}
|
|
|
|
render() {
|
|
|
|
ZStack(() => {
|
|
|
|
switch(window.location.pathname) {
|
|
case "/":
|
|
this.MainContent()
|
|
break;
|
|
case "/signup":
|
|
SignUp()
|
|
break;
|
|
case "/success":
|
|
Success()
|
|
break;
|
|
|
|
default:
|
|
if(window.location.pathname.startsWith("/free")) {
|
|
SignupForm()
|
|
} else if(window.location.pathname.startsWith("/login")) {
|
|
SignIn()
|
|
} else {
|
|
SignIn()
|
|
}
|
|
}
|
|
})
|
|
.fontFamily("Nanum")
|
|
.onNavigate(() => {
|
|
this.rerender()
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
register(Home) |