more shit

5 files changed, 202 insertions, 5 deletions

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