From 48eb6bf72dce0c6d7fb9bbe8e9aecd1b350fcc52 Mon Sep 17 00:00:00 2001 From: videogame hacker Date: Thu, 29 Jul 2021 23:49:38 +0100 Subject: [PATCH] Create a login page --- panel/css/forms.css | 107 +++++++++++++++++++++++++++++++++++++++++ panel/css/styles.css | 8 ++- panel/index.html | 1 - panel/login/index.html | 60 +++++++++++++++++++++++ 4 files changed, 174 insertions(+), 2 deletions(-) create mode 100644 panel/css/forms.css create mode 100644 panel/login/index.html diff --git a/panel/css/forms.css b/panel/css/forms.css new file mode 100644 index 0000000..23b2d58 --- /dev/null +++ b/panel/css/forms.css @@ -0,0 +1,107 @@ +form { + display: flex; + flex-direction: column; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group { + margin: 0.66em 0; +} + +.form-group:first-child { + margin-top: 0; +} + +.form-group:last-child { + margin-bottom: 0; +} + +.form-and-details { + display: flex; +} + +.form-and-details > * { + max-width: 50%; + width: 100%; +} + +.form-and-details > *:first-child { + margin-right: 1em; +} + +.form-and-details > *:last-child { + margin-left: 1em; +} + +label { + font-weight: 500; +} + +input + label, +input + input { + margin-top: 2em; +} + +input[type="password"], +input[type="text"] { + background: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 6px; + color: rgba(0, 0, 0, 0.8); + display: block; + + margin: 0.5em 0.25em; + padding: 0.5em 1em; + line-height: 1.5; + + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + font-family: sans-serif; +} + +input[type="password"]:focus, +input[type="text"]:focus { + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +input[type="password"]:focus:invalid, +input[type="text"]:focus:invalid { + background-color: #fff; + border-color: #ff8080; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(255, 0, 13, 0.25); +} + +input[type="submit"] { + background-color: rgb(21, 124, 214); + border: rgb(2, 97, 180); + border-radius: 6px; + color: #fff; + padding: 0.25em 0.5em; + display: inline-block; + font-weight: 400; + text-align: center; + white-space: nowrap; + vertical-align: middle; + + user-select: none; + border: 1px solid rgba(0, 0, 0, 0); + font-size: 1rem; + line-height: 1.5; + + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +input[type="submit"]:active { + background-color: rgb(47, 123, 190); + border-color: rgb(23, 78, 126); + color: #ffffff; +} diff --git a/panel/css/styles.css b/panel/css/styles.css index ffa51e7..f34336f 100644 --- a/panel/css/styles.css +++ b/panel/css/styles.css @@ -23,8 +23,14 @@ main { flex: 1; } +nav { + padding: 1em 0; +} + nav ul { - display: block; + display: flex; + justify-content: space-between; + margin: 0; padding: 0; } diff --git a/panel/index.html b/panel/index.html index 5075a0c..6883160 100644 --- a/panel/index.html +++ b/panel/index.html @@ -14,7 +14,6 @@ diff --git a/panel/login/index.html b/panel/login/index.html new file mode 100644 index 0000000..3b74cce --- /dev/null +++ b/panel/login/index.html @@ -0,0 +1,60 @@ + + + + + + Chat + + + + + + + + +
+

Log in

+ +
+
+
+ + +
+ +
+ + +
+ + +
+ + +
+ +

Don't have an account? Register!

+
+ + + +