Updated login page

static/styles.css

@@ -21,3 +21,90 @@
     display: none;
     margin-top: 20px;
 }
+
+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+.login-page {
+    width: 360px;
+    padding: 8% 0 0;
+    margin: auto;
+}
+#login-form {
+    position: relative;
+    z-index: 1;
+    background: #ffffff;
+    max-width: 360px;
+    margin: 0 auto 100px;
+    padding: 45px;
+    text-align: center;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+#login-form input {
+    /* font-family: "Roboto", sans-serif; */
+    outline: 0;
+    background: #f2f2f2;
+    width: 100%;
+    border: 0;
+    margin: 0 0 15px;
+    padding: 15px;
+    box-sizing: border-box;
+    font-size: 14px;
+}
+#login-form button {
+    font-family: "Roboto", sans-serif;
+    text-transform: uppercase;
+    outline: 0;
+    width: 100%;
+    border: 0;
+    padding: 15px;
+    color: #ffffff;
+    font-size: 14px;
+    -webkit-transition: all 0.3 ease;
+    transition: all 0.3 ease;
+    cursor: pointer;
+}
+
+#about-button {
+    margin-top: 10px;
+    background: #3498db;
+}
+
+#submit-button {
+    background: #4caf50;
+}
+
+#about-button:hover {
+    background: #2980b9;
+}
+
+#submit-button:hover {
+    background: #43a047;
+}
+
+#login-form .message {
+    margin: 15px 0 0;
+    color: #b3b3b3;
+    font-size: 12px;
+}
+#login-form .message a {
+    color: #4caf50;
+    text-decoration: none;
+}
+#login-form .register-form {
+    display: none;
+}
+
+body {
+    background: #ffffff; /* fallback for old browsers */
+    background: -webkit-linear-gradient(right, #ffffff, #f1f2f6);
+    background: -moz-linear-gradient(right, #ffffff, #f1f2f6);
+    background: -o-linear-gradient(right, #ffffff, #f1f2f6);
+    background: linear-gradient(to left, #ffffff, #f1f2f6);
+    font-family: "Roboto", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.token-help {
+    margin-bottom: 200px;
+}

templates/connect.html.jinja

@@ -1,22 +1,19 @@
 {% extends "layout.html.jinja" %}
 
 {% block title %}
- - Connect
+- Connect
 {% endblock %}
 
 {% block main %}
-<form action="/connect" method="post">
-  <div class="form-group">
-    <label for="plex-url">Plex URL</label>
-    <input type="url" class="form-control" name="plex-url" id="plex-url" aria-describedby="url-help" placeholder="Plex URL">
-    <small id="url-help" class="form-text text-muted">Enter the full URL for the server.</small>
-  </div>
-  <div class="form-group">
-    <label for="plex-token">Plex Token</label>
-    <input type="text" class="form-control" id="plex-token" name="plex-token" aria-describedby="token-help" placeholder="Plex Token">
-    <small id="token-help" class="form-text text-muted"> <a  href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/"> How to find token.</a> </small>
-  </div>
-  <button type="submit" class="btn btn-primary">Connect</button>
-  <button type="button" onclick="location.href='/about'" class="btn btn-secondary">About PlexWeb</button>
-</form>
+<div class="login-page">
+    <div id="login-form" class="form">
+        <form class="login-form" action="/connect" method="post">
+            <input name="plex-url" id="plex-url" type="url" placeholder="Plex URL" />
+            <input type="text" id="plex-token" name="plex-token" placeholder="Token" />
+            <button type="submit" id="submit-button">login</button>
+            <button type="button" onclick="location.href='/about'" id="about-button"> about </button>
+        </form>
+    </div>
+</div>
+
 {% endblock %}