From be1f931f13f37e2d05c79f61cbf1a254c002aa20 Mon Sep 17 00:00:00 2001
From: rsiddharth <s@ricketyspace.net>
Date: Mon, 21 Oct 2019 22:01:55 -0400
Subject: nfsw/templates/register.html: Prettify.

Only Desktop view ready. Need to work on the Mobile view.
---
 nfsw/static/auth.css                 |  80 +++++++++++++++++++++++++++++++++++
 nfsw/static/fonts/roboto-regular.ttf | Bin 0 -> 171272 bytes
 nfsw/templates/register.html         |  53 ++++++++++++++---------
 3 files changed, 114 insertions(+), 19 deletions(-)
 create mode 100644 nfsw/static/auth.css
 create mode 100644 nfsw/static/fonts/roboto-regular.ttf

diff --git a/nfsw/static/auth.css b/nfsw/static/auth.css
new file mode 100644
index 0000000..834a3b7
--- /dev/null
+++ b/nfsw/static/auth.css
@@ -0,0 +1,80 @@
+@font-face {
+    font-family: roboto-black;
+    src: url('./fonts/roboto-black.ttf');
+}
+
+@font-face {
+    font-family: roboto-medium;
+    src: url('./fonts/roboto-medium.ttf');
+}
+
+@font-face {
+    font-family: roboto-regular;
+    src: url('./fonts/roboto-regular.ttf');
+}
+
+.auth-grid {
+    display: grid;
+    grid-template-rows: 29vh 225px 29vh;
+    grid-template-columns: auto 370px auto;
+}
+
+.auth-grid-item {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 2;
+    grid-row-end: 3;
+}
+
+header h1 {
+    font-family: roboto-black;
+    font-size: 35px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 10px;
+}
+
+.button-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+label {
+    font-family: roboto-medium;
+    font-size: 20px;
+    flex-basis: auto;
+}
+
+input[type="text"],
+input[type="password"] {
+    font-family: roboto-regular;
+    font-size: 20px;
+    border: 3px solid rgb(90,90,90);
+    flex-basis: auto;
+}
+
+input[type="text"],
+input[type="password"] {
+    font-family: roboto-regular;
+    font-size: 20px;
+    border: 3px solid rgb(90,90,90);
+    outline: none;
+    flex-basis: auto;
+}
+
+input[type="submit"] {
+    font-family: roboto-medium;
+    font-size: 20px;
+    border: 1px solid rgb(10, 10,10);
+    background-color: rgb(10,10,10);
+    color: rgb(240,240,240);
+    border-radius: 5px;
+    padding: 11px 13px 11px 13px;
+    cursor: pointer;
+
+}
diff --git a/nfsw/static/fonts/roboto-regular.ttf b/nfsw/static/fonts/roboto-regular.ttf
new file mode 100644
index 0000000..2b6392f
Binary files /dev/null and b/nfsw/static/fonts/roboto-regular.ttf differ
diff --git a/nfsw/templates/register.html b/nfsw/templates/register.html
index 1327512..3676591 100644
--- a/nfsw/templates/register.html
+++ b/nfsw/templates/register.html
@@ -4,27 +4,42 @@
 {% block title %}Register{% endblock %}
 
 {% block content %}
-<div class="msg-block">
-    <div class="content">
-        {% for m in get_flashed_messages() %}
-        <p>{{ m }}</p>
-        {% endfor %}
-    </div>
-</div>
 
-<form method="post">
-    <div class="form-group">
-        <label for="username">Username</label>
-        <input name="username" class="username" required>
-    </div>
+<div  class="auth-grid">
+    <div class="auth-grid-item">
+        <header>
+            <h1>NFSW - Register</h1>
+        </header>
 
-    <div class="form-group">
-        <label for="password">Password</label>
-        <input type="password" name="password" class="password" required>
-    </div>
+        <div class="msg-block">
+            <div class="content">
+                {% for m in get_flashed_messages() %}
+                <p>{{ m }}</p>
+                {% endfor %}
+            </div>
+        </div>
+
+        <form method="post">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username"
+                       name="username" class="username" required>
+            </div>
 
-    <div class="button-group">
-        <input type="submit" value="Register">
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password"
+                       name="password" class="password" required>
+            </div>
+
+            <div class="button-group">
+                <input type="submit" value="Register">
+            </div>
+        </form>
     </div>
-</form>
+</div>
+{% endblock %}
+
+{% block css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='auth.css') }}">
 {% endblock %}
-- 
cgit v1.2.3