diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js
index 39ac364..0adc374 100644
--- a/ui/_/code/quill.js
+++ b/ui/_/code/quill.js
@@ -508,6 +508,18 @@ HTMLElement.prototype.marginHorizontal = StyleFunction(function(value, unit = "p
return this
})
+HTMLElement.prototype.borderVertical = StyleFunction(function(value) {
+ this.style.borderTop = value
+ this.style.borderBottom = value
+ return this
+})
+
+HTMLElement.prototype.borderHorizontal = StyleFunction(function(value) {
+ this.style.borderRight = value
+ this.style.borderLeft = value
+ return this
+})
+
HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
switch(value) {
@@ -643,10 +655,10 @@ HTMLElement.prototype.centerY = function () {
return this;
};
-HTMLElement.prototype.alignVertical = function (value) {
+HTMLElement.prototype.verticalAlign = function (value) {
const direction = getComputedStyle(this).flexDirection;
if(!direction) {
- throw new Error("alignVertical can be only be used on HStacks or VStacks!")
+ throw new Error("verticalAlign can be only be used on HStacks or VStacks!")
}
if (direction === "column" || direction === "column-reverse") {
@@ -657,10 +669,10 @@ HTMLElement.prototype.alignVertical = function (value) {
return this
}
-HTMLElement.prototype.alignHorizontal = function (value) {
+HTMLElement.prototype.horizontalAlign = function (value) {
const direction = getComputedStyle(this).flexDirection;
if(!direction) {
- throw new Error("alignHorizontal can be only be used on HStacks or VStacks!")
+ throw new Error("horizontalAlign can be only be used on HStacks or VStacks!")
}
if (direction === "column" || direction === "column-reverse") {
diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css
index fa0b3a9..c241044 100644
--- a/ui/_/code/shared.css
+++ b/ui/_/code/shared.css
@@ -2,11 +2,10 @@
--main: var(--brown);
--accent: var(--gold);
- --tan: #FFDFB4;
- --gold: #F2B36F;
+ --gold: #FEBA7D;
--divider: #bb7c36;
--green: #0857265c;
- --red: #BC1C02;
+ --red: #E84343;
--brown: #812A18;
--darkbrown: #3f0808;
@@ -29,17 +28,17 @@
}
@font-face {
- font-family: 'Bona Nova';
- src: url('/_/fonts/BonaNova/BonaNova-Regular.woff') format('truetype');
- font-weight: normal;
+ font-family: 'Nabla';
font-style: normal;
+ font-weight: normal;
+ src: local('Nabla'), url('/_/fonts/Nabla/Nabla-Regular.ttf') format('truetype');
}
@font-face {
- font-family: 'Bona Nova';
- src: url('/_/fonts/BonaNova/BonaNova-Bold.woff') format('truetype');
- font-weight: bold;
+ font-family: 'Nanum';
+ src: url('/_/fonts/Nanum/NanumGothicCoding-Regular.ttf') format('truetype');
font-style: normal;
+ font-weight: normal;
}
body {
diff --git a/ui/_/fonts/Nabla/Nabla-Regular.ttf b/ui/_/fonts/Nabla/Nabla-Regular.ttf
new file mode 100644
index 0000000..338f1cb
Binary files /dev/null and b/ui/_/fonts/Nabla/Nabla-Regular.ttf differ
diff --git a/ui/_/fonts/Nabla/Nabla.ttf b/ui/_/fonts/Nabla/Nabla.ttf
new file mode 100644
index 0000000..bad0e05
Binary files /dev/null and b/ui/_/fonts/Nabla/Nabla.ttf differ
diff --git a/ui/_/fonts/Nabla/Nabla.woff b/ui/_/fonts/Nabla/Nabla.woff
new file mode 100644
index 0000000..cfb87e0
Binary files /dev/null and b/ui/_/fonts/Nabla/Nabla.woff differ
diff --git a/ui/_/fonts/Nabla/style.css b/ui/_/fonts/Nabla/style.css
new file mode 100644
index 0000000..a8ff80f
--- /dev/null
+++ b/ui/_/fonts/Nabla/style.css
@@ -0,0 +1,8 @@
+/* #### Generated By: http://font.download #### */
+
+ @font-face {
+ font-family: 'Nabla Regular';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Nabla Regular'), url('Nabla[EDPT,EHLT].woff') format('woff');
+ }
\ No newline at end of file
diff --git a/ui/_/fonts/Nanum/NanumGothicCoding-Bold.ttf b/ui/_/fonts/Nanum/NanumGothicCoding-Bold.ttf
new file mode 100755
index 0000000..36bd220
Binary files /dev/null and b/ui/_/fonts/Nanum/NanumGothicCoding-Bold.ttf differ
diff --git a/ui/_/fonts/Nanum/NanumGothicCoding-Regular.ttf b/ui/_/fonts/Nanum/NanumGothicCoding-Regular.ttf
new file mode 100755
index 0000000..990066a
Binary files /dev/null and b/ui/_/fonts/Nanum/NanumGothicCoding-Regular.ttf differ
diff --git a/ui/_/fonts/Nanum/OFL.txt b/ui/_/fonts/Nanum/OFL.txt
new file mode 100755
index 0000000..abbf68d
--- /dev/null
+++ b/ui/_/fonts/Nanum/OFL.txt
@@ -0,0 +1,96 @@
+Copyright (c) 2010, NHN Corporation (http://www.nhncorp.com),
+with Reserved Font Name Nanum, Naver Nanum, NanumGothic, Naver
+NanumGothic, NanumMyeongjo, Naver NanumMyeongjo, NanumBrush, Naver
+NanumBrush, NanumPen, Naver NanumPen.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/ui/_/icons/logo.png b/ui/_/icons/logo.png
new file mode 100644
index 0000000..4f828a6
Binary files /dev/null and b/ui/_/icons/logo.png differ
diff --git a/ui/_/icons/logo.svg b/ui/_/icons/logo.svg
deleted file mode 100644
index 67b933e..0000000
--- a/ui/_/icons/logo.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
diff --git a/ui/_/icons/logo2.svg b/ui/_/icons/logo2.svg
deleted file mode 100644
index 317a745..0000000
--- a/ui/_/icons/logo2.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-
diff --git a/ui/_/icons/quill.svg b/ui/_/icons/quill.svg
new file mode 100644
index 0000000..065e6a5
--- /dev/null
+++ b/ui/_/icons/quill.svg
@@ -0,0 +1,5 @@
+
diff --git a/ui/_/images/castle-dark.svg b/ui/_/images/castle-dark.svg
deleted file mode 100644
index 98518f7..0000000
--- a/ui/_/images/castle-dark.svg
+++ /dev/null
@@ -1,576 +0,0 @@
-
diff --git a/ui/_/images/castle-dark2.svg b/ui/_/images/castle-dark2.svg
deleted file mode 100644
index 425085a..0000000
--- a/ui/_/images/castle-dark2.svg
+++ /dev/null
@@ -1,3094 +0,0 @@
-
diff --git a/ui/_/images/castle-dark3.svg b/ui/_/images/castle-dark3.svg
deleted file mode 100644
index 8a610e2..0000000
--- a/ui/_/images/castle-dark3.svg
+++ /dev/null
@@ -1,3094 +0,0 @@
-
diff --git a/ui/_/images/castle.svg b/ui/_/images/castle.svg
deleted file mode 100644
index b02ed5c..0000000
--- a/ui/_/images/castle.svg
+++ /dev/null
@@ -1,578 +0,0 @@
-
diff --git a/ui/_/images/divider.svg b/ui/_/images/divider.svg
deleted file mode 100644
index b47a650..0000000
--- a/ui/_/images/divider.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/ui/_/images/fabric.png b/ui/_/images/fabric.png
deleted file mode 100644
index c0dfbda..0000000
Binary files a/ui/_/images/fabric.png and /dev/null differ
diff --git a/ui/_/images/fabric.webp b/ui/_/images/fabric.webp
deleted file mode 100644
index 25e4343..0000000
Binary files a/ui/_/images/fabric.webp and /dev/null differ
diff --git a/ui/_/images/knight.png b/ui/_/images/knight.png
deleted file mode 100644
index 27dcf5e..0000000
Binary files a/ui/_/images/knight.png and /dev/null differ
diff --git a/ui/_/images/knight.webp b/ui/_/images/knight.webp
deleted file mode 100644
index 0472250..0000000
Binary files a/ui/_/images/knight.webp and /dev/null differ
diff --git a/ui/_/images/nodes.svg b/ui/_/images/nodes.svg
new file mode 100644
index 0000000..0596601
--- /dev/null
+++ b/ui/_/images/nodes.svg
@@ -0,0 +1,11 @@
+
diff --git a/ui/_/images/the_return.webp b/ui/_/images/the_return.webp
deleted file mode 100644
index 2485073..0000000
Binary files a/ui/_/images/the_return.webp and /dev/null differ
diff --git a/ui/desktop/index.html b/ui/desktop/index.html
index 24bd703..fe8fbe8 100644
--- a/ui/desktop/index.html
+++ b/ui/desktop/index.html
@@ -1,7 +1,7 @@
- Hyperia
+ Parchment
diff --git a/ui/public/index.html b/ui/public/index.html
index c8749db..31ed6d5 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -1,9 +1,9 @@
- Hyperia
+ Parchment
-
+
body {
- background: #FEBA7D;
+ background: black;
}
diff --git a/ui/public/pages/Home.js b/ui/public/pages/Home.js
index 7aebfea..f7a1b02 100644
--- a/ui/public/pages/Home.js
+++ b/ui/public/pages/Home.js
@@ -1,5 +1,5 @@
import "../components/NavBar.js"
-import "../components/SignupForm.js"
+import "./SignupForm.js"
import "./Why.js"
import "./Events.js"
import "./Join.js"
@@ -7,55 +7,119 @@ import "./SignIn.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(--accent)")
+ })
+ .marginBottom(1, rem)
+
+ HStack(() => {
+
+ VStack(() => {
+ HStack(() => {
+ span("The Network OS")
+ .fontFamily("Canterbury")
+ .color("var(--accent)")
+ .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) {
+ console.log("hover")
+ 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) {
+ console.log("hover")
+ 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)
+ .fontFamily("Nanum")
+ }
+
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")
- }
+ this.MainContent()
break;
case "/why":
Why()
@@ -73,7 +137,7 @@ class Home extends Shadow {
default:
if(window.location.pathname.startsWith("/signup")) {
SignupForm()
- } else if(window.location.pathname.startsWith("/signin")) {
+ } else if(window.location.pathname.startsWith("/login")) {
SignIn()
}
}
diff --git a/ui/public/components/SignupForm.js b/ui/public/pages/SignupForm.js
similarity index 69%
rename from ui/public/components/SignupForm.js
rename to ui/public/pages/SignupForm.js
index 47bbcdf..0e466b2 100644
--- a/ui/public/components/SignupForm.js
+++ b/ui/public/pages/SignupForm.js
@@ -45,39 +45,11 @@ class SignupForm extends Shadow {
.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)
-
+ .width(100, "%")
+ .gap(1, em)
})
.gap(2, em)
+ .width(100, pct)
button("Submit")
})
@@ -129,7 +101,7 @@ class SignupForm extends Shadow {
}
})
.x(50, vw).y(53, vh)
- .width(60, vw)
+ .width(30, vmax)
.center()
})
}