diff --git a/index.js b/index.js index 4344cdd..aa6aa12 100644 --- a/index.js +++ b/index.js @@ -9,6 +9,18 @@ app.get('/', (req, res) => { res.sendFile('login.html', { root: './public' }) }) +app.get('/home', (req, res) => { + res.sendFile('home.html', { root: './public' }) +}) + +app.get('/people', (req, res) => { + res.sendFile('people.html', { root: './public' }) +}) + +app.use((req, res, next) => { + res.status(404).sendFile('404.html', { root: './public' }) +}) + app.listen(port, () => { console.log(`App listening on port http://127.0.0.1:${port}`) }) \ No newline at end of file diff --git a/public/404.html b/public/404.html new file mode 100644 index 0000000..7aedb82 --- /dev/null +++ b/public/404.html @@ -0,0 +1,18 @@ + + + + + + + + XSSBook - Home + + + +
+ + Page not found. +
+ \ No newline at end of file diff --git a/public/css/404.css b/public/css/404.css new file mode 100644 index 0000000..38035a4 --- /dev/null +++ b/public/css/404.css @@ -0,0 +1,20 @@ +body { + background-color: #f0f2f5; +} + +.error { + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + height: 100vh; + flex-direction: column; +} + +.error .logo { + font-size: 100px; +} + +.desc { + font-size: 40px; +} \ No newline at end of file diff --git a/public/css/header.css b/public/css/header.css new file mode 100644 index 0000000..77f0d1e --- /dev/null +++ b/public/css/header.css @@ -0,0 +1,40 @@ +#header { + height: 3.5em; + background-color: white; + position: absolute; + width: 100vw; + box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05); + display: flex; + align-items: center; + justify-content: space-between; +} + +#header .logo { + position: absolute; + font-size: 2.5em; + padding-left: .5em; + padding-top: .2em; +} + +#header .buttons { + flex: 1; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +#header .buttons a { + padding: 0px 50px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: #606770; +} + +.selected { + color: #1778f2 !important; + border-bottom: 3px solid #1778f2; +} \ No newline at end of file diff --git a/public/css/home.css b/public/css/home.css new file mode 100644 index 0000000..70db81f --- /dev/null +++ b/public/css/home.css @@ -0,0 +1,3 @@ +body { + background-color: #f0f2f5; +} \ No newline at end of file diff --git a/public/css/login.css b/public/css/login.css index 6a08c8f..7e5cde7 100644 --- a/public/css/login.css +++ b/public/css/login.css @@ -9,11 +9,13 @@ .prompt { display: flex; + position: relative; flex-direction: column; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); border-radius: 8px; width: 396px; + padding: 10px } .show { @@ -25,7 +27,6 @@ .login-button { margin-bottom: 10px; font-size: 20px; - font-weight: 10000; } .newacc { @@ -33,6 +34,11 @@ margin-bottom: 20px; } +.signacc { + margin: 10px 70px; + margin-bottom: 0; +} + @media (max-aspect-ratio: 2/3) { .login { flex-direction: column; diff --git a/public/css/main.css b/public/css/main.css index c8fb85e..8fa4b85 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -18,6 +18,11 @@ body { src: url("../fonts/sfpro.otf") format("opentype"); } +@font-face { + font-family: sfprobold; + src: url("../fonts/sfprobold.otf") format("opentype"); +} + .logo { color: #1778f2; font-size: 3.5em; @@ -37,6 +42,23 @@ body { color: #1778f2 } +.gtext { + font-family: sfpro; + color: #606770 +} + +.label { + font-family: sfpro; + color: #606770; + font-size: 15px; + padding-top: 10px; + padding-left: 10px; +} + +.stext { + font-size: 10px; +} + .ctext { font-family: sfpro; text-align: center; @@ -64,11 +86,11 @@ footer { } input { - all: unset; + flex: 1; font-family: sfpro; background-color: white; padding: 10px; - margin: 20px; + margin: 10px; margin-bottom: 0; border-radius: 5px; border: 1px solid #dddfe2; @@ -76,6 +98,60 @@ input { font-size: 18px; } +.radiomenu { + display: flex; + flex-wrap: wrap; +} + +.radiomenu span { + display: inline-block; + position: relative; + font-family: sfpro; + background-color: white; + margin: 10px; + margin-bottom: 0; + border-radius: 5px; + border: 1px solid #dddfe2; + color: #1d2129; + font-size: 15px; + flex: 1 0 auto; +} + +.radiomenu span label { + padding: 10px; + display: block; + box-sizing: border-box; + width: auto; + color: #1d2129; +} + +[type="radio"] { + height: 40px; + margin: 0; + position: absolute; + right: 10px; + top: 0; + text-align: left; +} + +select { + all: unset; + flex: 1; + font-family: sfpro; + background-color: white; + padding: 10px; + margin: 10px; + margin-bottom: 0; + border-radius: 5px; + border: 1px solid #dddfe2; + color: #1d2129; + font-size: 15px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC"); + background-position: right 10px center; + background-repeat: no-repeat; + background-size: 15px; +} + input:focus { border: 1px solid #1778f2; } @@ -88,7 +164,7 @@ input:focus { padding: 10px; margin: 20px; border-radius: 5px; - font-weight: 1000; + padding-bottom: 15px; text-align: center; cursor: pointer; } @@ -99,7 +175,6 @@ input:focus { background-color: #42b72a; color: white; padding: 10px; - margin-bottom: 10px; margin-left: 10px; margin-right: 10px; border-radius: 5px; @@ -107,6 +182,10 @@ input:focus { cursor: pointer; } +.bold { + font-family: sfprobold; +} + .line { width: calc(100% - 40px); margin-left: 20px; @@ -116,6 +195,13 @@ input:focus { margin-top: 10px; } +.fullline { + width: calc(100%); + border-bottom: 1px solid #dadde1; + margin-bottom: 10px; + margin-top: 10px; +} + footer { text-align: center; font-family: sfpro; @@ -124,3 +210,45 @@ footer { font-size: 13px; color: #737373; } + +#popup { + position: absolute; + width: 100vw; + height: 100vh; + background-color: rgba(255, 255, 255, .8); + margin: 0; + padding: 0; + top: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.row input { + width: 50% +} + +.close { + position: absolute; + z-index: 2; + width: 20px; + height: 20px; + right: 12px; + top: 12px; + cursor: pointer; + background-size: 20px; + background-position: right; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVgZ3FHcExgZ3FgZ3Fd28LEAAAAA3RSTlOfAHBcPEovAAAASklEQVQIW2MIBQMG7FRmaGgmUG5PaKgdkNovGvIPSPkfDf4IpII/+h8FUiF/7EVB2u3/gE3x/4hMQQShSqAaoNqhhkGNhlqE2y0A1E85Y0JErBoAAAAASUVORK5CYII='); +} + +.hidden { + visibility: hidden; + pointer-events: none; +} \ No newline at end of file diff --git a/public/fonts/sfprobold.otf b/public/fonts/sfprobold.otf new file mode 100644 index 0000000..025b25c Binary files /dev/null and b/public/fonts/sfprobold.otf differ diff --git a/public/home.html b/public/home.html new file mode 100644 index 0000000..3fb3df9 --- /dev/null +++ b/public/home.html @@ -0,0 +1,29 @@ + + + + + + + + XSSBook - Home + + + +

+ b +

+ \ No newline at end of file diff --git a/public/login.html b/public/login.html index 9ce88ac..c33a3f9 100644 --- a/public/login.html +++ b/public/login.html @@ -15,10 +15,148 @@
- + Forgot Password?
- Create new account + +
+