Login page modified.

gayu-thri · Mar 8, 2020 · 6ee5f3e · 6ee5f3e
1 parent 8a1c48e
commit 6ee5f3e
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 63 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/app.py b/app.py
@@ -43,4 +43,4 @@ def logout():
 
 if __name__ == "__main__":
     app.secret_key = os.urandom(12)
-    app.run(debug=True,host='127.0.0.1', port=3800)
+    app.run(debug=True)
diff --git a/static/css/main.css b/static/css/main.css
@@ -1,16 +1,47 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Aladin&display=swap');
-body,html{
-  height: 100%;
-  margin: 20px;
+body{
+    background-image: url('../images/background_image_hogwarts3.jpg');
+    background-repeat: no-repeat;
+    background-size: contain;
+    overflow-x:hidden;
+}
+input {
+    padding: 8px;
+    height: 36px;
+    width: 260px;
+    margin-top: 20px;
+    font-size: 18px;
+}
+button {
+    height: 30px;
+    width: 160px;
+    margin-top: 45px;
+    background-color: 0088ce;
+    color: #ffffff;
+    padding: 6px 10px;
+    font-size: 14px;
+    line-height: 1.3333333;
+    border-radius: 1px;
+    border: 1px solid transparent;
+}
+button:hover{
+    background-color: #057dbb;
+    background-image: none;
+    border-color: #00659c;
+    color: #fff;
 }
-.bg{
-background-image: url('../images/background_image_hogwarts3.jpg');
-min-height: 380px;
 
-  /* Center and scale the image nicely */
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
+nav{
+    height: 40px;
+    background: #ffffff;
+}
+.block{
+    padding-top: 16px;
+    margin-top: 80px;
+    height: 320px;
+    width: 320px;
+    background: #ffffff;
+    margin-left: 40%;
+}
+.register{
+    margin-top: 7px;
 }
diff --git a/templates/login.html b/templates/login.html
@@ -4,32 +4,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
     <link rel="stylesheet" type= "text/css" href="{{ url_for('static', filename='css/main.css') }}">
-    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     <title>Login</title>
 </head>
 <body>
-<div class = "bg"></div>
-<form action="/login" method="POST">
-<div class="has-text-centered " style="margin:auto; top: 50%; left: 50%;">
-<h1>Login</h1>
-    <div class="field">
-                                <div class="control">
-    <input type="text" class = "input is-large"value="" placeholder="username" name="username">
-                                </div>
+<nav>
+    <p class="has-text-centered">Navbar here</p>
+</nav>
+<div class="has-text-centered block">
+<form action="http://127.0.0.1:5000/login" method="POST">
+    <h2 class="is-size-2">LOGIN</h2>
+    <input type="email" placeholder="Email Id" required>
+    <input type="password" placeholder="Password" required>
+    <div ></div>
+    <button type="submit">LOGIN</button>
+    <div class="register">
+        <p>Need an account? <a href="#">Sign up</a></p>
     </div>
-
-    <div class="field">
-                                <div class="control">
-    <input type="password" class="input is-large" value="" placeholder="password" name="password">
-                                </div>
-    </div>
-<div style="padding-left: 100px;">
-                <input type="radio" name="choice" value="user" checked>User<br><br>
-                <input type="radio" name="choice" value="admin">Admin
-            </div>
-<input type="submit" value="Log in" class="button is-dark is-block is-info is-large is-centered">
-</div>
 </form>
-
+</div>
 </body>
 </html>