141 lines
4.7 KiB
JavaScript
141 lines
4.7 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", "6em")
|
|
|
|
p("PARCHMENT")
|
|
.fontFamily("Nabla")
|
|
.fontSize(6.5, em)
|
|
.marginLeft(1, rem)
|
|
.color("var(--accent2)")
|
|
})
|
|
.marginBottom(1, rem)
|
|
|
|
HStack(() => {
|
|
|
|
VStack(() => {
|
|
HStack(() => {
|
|
span("The Network OS")
|
|
.fontFamily("Canterbury")
|
|
.color("var(--accent2)")
|
|
.fontSize(2.5, em)
|
|
.paddingBottom(1, rem)
|
|
})
|
|
.height(5, em)
|
|
.verticalAlign("center")
|
|
.horizontalAlign("center")
|
|
|
|
p("Parchment helps you connect to every group you are a part of.")
|
|
.color("var(--red)")
|
|
.borderTop("1px solid var(--red)")
|
|
.borderHorizontal("1px solid var(--red)")
|
|
.height(5, em)
|
|
.fontSize(1.2, em)
|
|
.paddingTop(2, rem)
|
|
.paddingHorizontal(2, rem)
|
|
})
|
|
|
|
VStack(() => {
|
|
|
|
HStack(() => {
|
|
p("Log In")
|
|
.color("var(--red)")
|
|
.paddingVertical(1.2, rem)
|
|
.paddingHorizontal(3, rem)
|
|
.fontSize(1.2, em)
|
|
.cursor("default")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--red)"
|
|
this.style.color = "black"
|
|
} else {
|
|
this.style.background = ""
|
|
this.style.color = "var(--red)"
|
|
}
|
|
})
|
|
.onClick(() => {
|
|
window.navigateTo("/login")
|
|
})
|
|
p("Sign Up")
|
|
.color("var(--red)")
|
|
.borderLeft("1px solid var(--red)")
|
|
.paddingVertical(1.2, rem)
|
|
.paddingHorizontal(3, rem)
|
|
.fontSize(1.2, em)
|
|
.cursor("default")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--red)"
|
|
this.style.color = "black"
|
|
} else {
|
|
this.style.background = ""
|
|
this.style.color = "var(--red)"
|
|
}
|
|
})
|
|
.onClick(() => {
|
|
window.navigateTo("/signup")
|
|
})
|
|
})
|
|
.height(5, em)
|
|
.border("1px solid var(--red)")
|
|
|
|
div()
|
|
.height(5, em)
|
|
})
|
|
|
|
})
|
|
|
|
ZStack(() => {
|
|
img("/_/images/nodes.svg", "20vw")
|
|
.marginHorizontal(50, pct)
|
|
.marginTop(13, em)
|
|
.center()
|
|
})
|
|
.width(100, pct)
|
|
.marginBottom(10, em)
|
|
.border("1px solid var(--red)")
|
|
})
|
|
.marginHorizontal(27, vw)
|
|
.width(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()
|
|
}
|
|
}
|
|
})
|
|
.fontFamily("Nanum")
|
|
.onNavigate(() => {
|
|
this.rerender()
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
register(Home) |