Home Explore Help
Sign In
control
/
hometab
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

'finished_login_register_navbar'

eddy 3 years ago
parent
8d8d3a4e48
commit
048353596b
9 changed files with 180 additions and 80 deletions
Split View Show Diff Stats
  1. BIN
      app/static/home_stamp/private_stamp.png
  2. BIN
      app/static/home_stamp/public_stamp.png
  3. BIN
      app/static/logo/hometag_full_logo.png
  4. BIN
      app/static/logo/hometag_logo.png
  5. BIN
      app/static/logo/login_logo.png
  6. BIN
      app/static/logo/logout_logo.gif
  7. 48 21
      app/templates/base.html
  8. 55 22
      app/templates/login.html
  9. 77 37
      app/templates/register.html

BIN
app/static/home_stamp/private_stamp.png
View File


BIN
app/static/home_stamp/public_stamp.png
View File


BIN
app/static/logo/hometag_full_logo.png
View File


BIN
app/static/logo/hometag_logo.png
View File


BIN
app/static/logo/login_logo.png
View File


BIN
app/static/logo/logout_logo.gif
View File


+ 48 - 21
app/templates/base.html
View File 

@@ -1,8 +1,24 @@
 
 <!DOCTYPE html>
 
 <html>
 
     <head>
 
-        <meta charset="utf-8" />
 
-        <meta name="viewport" content="width=device-width, initial-scale=1">
 
+        <meta charset="utf-8">
 
+        <meta 
+            name="viewport" 
+            content="width=device-width, initial-scale=1"
 
+        >
 
+
 
+        <link 
+            rel="stylesheet" 
+            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
 
+        >
 
+        <script 
+            src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
 
+        </script>
 
+        
+        <script 
+            src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
 
+        </script>
 
+        
         <link
 
             rel="stylesheet"
 
             href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
 
@@ -19,28 +35,39 @@
 
             href="static/css/custom.css"
 
         />
 
         <title>{% block title %}HOMETAB{% endblock %}</title>
 
+        <link rel = "icon" href = 
+            "static/logo/hometag_logo.png" 
+             type = "image/x-icon">
 
     </head>
 
 
+    <style>
 
+        .navbar-nav-right {
 
+            margin-left: auto;
 
+        }
 
+    </style>
 
+    
     <body>
 
-        <nav class="navbar navbar-expand-md">
 
-            <p class="navbar-text">HOMETAB</p>
 
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"> <!-- for mobile devices -->
 
-                <span class="navbar-toggler-icon"></span>
 
-            </button>
 
-            <div class="collapse navbar-collapse" id="navbar">
 
-                <div class="navbar-nav">
 
-                    {% if user.is_authenticated %} <!-- shows only if user is logged in -->
 
-                    <a class="nav-item nav-link" id="profile" href="/">My Hometab</a>
 
-                    <a class="nav-item nav-link" id="create" href="/create">Create a Bookmark</a>
 
-                    <a class="nav-item nav-link" id="shared" href="/shared">Shared Hometabs</a>
 
-                    <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
 
-                    {% else %}
 
-                    <a class="nav-item nav-link" id="login" href="/login">Login</a>
 
-                    <a class="nav-item nav-link" id="register" href="/register">Register</a>
 
-                    {% endif %}
 
-                </div>
 
-            </div>
 
-        </nav>
 
+        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 
+            <a class="navbar-brand" href="/"><img src="static/logo/hometag_logo.png" alt="hometag_logo" id="logo" width="40"/></a></li>
 
+        </a>      
+            <ul class="navbar-nav">
 
+            {% if user.is_authenticated %} <!-- shows only if user is logged in -->
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="/create">Create a Bookmark</a>
 
+              </li>
 
+              <li class="nav-item">
 
+                <a class="nav-link" href="/shared">Shared Hometabs</a>
 
+              </li>
 
+            </ul>
 
+            <ul class="navbar-nav-right">
 
+              <li class="nav-item">
 
+                <a class="navbar-brand" href="/logout"><img src="static/logo/logout_logo.gif" alt="logout_logo" id="logo" width="75"/></a></li>
 
+              </li>
 
+            </ul>
 
+            {% else %}
 
+            {% endif %}
 
+            </ul>
 
+          </nav>
 
         <!-- For Flash Errors to User -->
 
         {% with messages = get_flashed_messages(with_categories=true) %}
 
         {% if messages %}

+ 55 - 22
app/templates/login.html
View File 

@@ -1,28 +1,61 @@
 
 {% extends "base.html" %}
 
 
 {% block content %}
 
-<h1>Login Here!</h1>
 
-<form method="POST">
 
-<div class="form-group">
 
-    <label for="email"></label>
 
-    <input 
-        type="email" 
-        class="form-control" 
-        id="email"
 
-        name="email"
 
-        placeholder="Insert Email"
 
-    />
 
-    <label for="passwd_login"></label>
 
-    <input 
-        type="password" 
-        class="form-control" 
-        id="passwd_login"
 
-        name="passwd_login"
 
-        placeholder="Enter Password"
 
-    />
 
-    <br />
 
-    <button type="submit" class="btn btn-primary">Login</button>
 
-</div>
 
+<style>
 
+    body {
 
+      background: #e7f5fe;
 
+    }
 
+</style>
 
 
+<form method="POST">
 
+    <section class="vh-100 gradient-custom">
 
+        <div class="container py-5 h-100">
 
+          <div class="row d-flex justify-content-center align-items-center h-100">
 
+            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
 
+              <div class="card bg-dark text-white" style="border-radius: 1rem;">
 
+                <div class="card-body p-5 text-center">
 
+      
+                  <div class="mb-md-5 mt-md-4 pb-5">
 
+      
+                    <h2 class="fw-bold mb-2 text-uppercase">Login</h2>
 
+                    <p class="text-white-50 mb-5">Please enter your login and password!</p>
 
+      
+                    <div class="form-outline form-white mb-4">
 
+                        <input 
+                        type="email" 
+                        class="form-control" 
+                        id="email"
 
+                        name="email"
 
+                        placeholder="Insert Email"
 
+                    />
 
+                     <label for="email"></label>
 
+                    </div>
 
+      
+                    <div class="form-outline form-white mb-4">
 
+                        <input 
+                        type="password" 
+                        class="form-control" 
+                        id="passwd_login"
 
+                        name="passwd_login"
 
+                        placeholder="Enter Password"
 
+                    />
 
+                      <label for="passwd_login"></label>
 
+                    </div>
 
+      
+      
+                    <button class="btn btn-outline-light btn-lg px-5" type="submit">Login</button>
 
+      
+                  </div>
 
+      
+                  <div>
 
+                    <p class="mb-0">Don't have an account? <a href="register" class="text-white-50 fw-bold">Sign Up</a></p>
 
+                  </div>
 
+      
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </section>
 
 </form>
 
 {% endblock %}

+ 77 - 37
app/templates/register.html
View File 

@@ -1,43 +1,83 @@
 
 {% extends "base.html" %}
 
 
 {% block content %}
 
-<h1> Register Here! </h1>
 
+<style>
 
+body {
 
+  background: #e7f5fe;
 
+}
 
+
 
+</style>
 
+
 
 <form method="POST">
 
-    <div class="form-group">
 
-        <label for="email"></label>
 
-        <input 
-            type="email" 
-            class="form-control" 
-            id="email"
 
-            name="email"
 
-            placeholder="Insert Email"
 
-        />
 
-        <label for="passwd_1"></label>
 
-        <input 
-            type="password" 
-            class="form-control" 
-            id="passwd_1"
 
-            name="passwd_1"
 
-            placeholder="Enter Password"
 
-        />
 
-        <label for="passwd_2"></label>
 
-        <input 
-            type="password" 
-            class="form-control" 
-            id="passwd_2"
 
-            name="passwd_2"
 
-            placeholder="Confirm Password"
 
-        />
 
-        <label for="username"></label>
 
-        <input 
-            type="text" 
-            class="form-control" 
-            id="username"
 
-            name="username"
 
-            placeholder="Insert User Name"
 
-        />
 
-    </div>
 
-    <br />
 
-    <button type="submit" class="btn btn-primary">Submit</button>
 
+    <section class="vh-100 gradient-custom">
 
+        <div class="container py-5 h-100">
 
+          <div class="row d-flex justify-content-center align-items-center h-100">
 
+            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
 
+              <div class="card bg-dark text-white" style="border-radius: 1rem;">
 
+                <div class="card-body p-5 text-center">
 
+      
+                  <div class="mb-md-5 mt-md-4 pb-5">
 
+      
+                    <h2 class="fw-bold mb-2 text-uppercase">Sign up</h2>
 
+                    <p class="text-white-50 mb-5">Create your HomeTab Account</p>
 
+                    
+                    <div class="form-outline form-white mb-3">
 
+                        <label for="email"></label>
 
+                        <input 
+                            type="email" 
+                            class="form-control" 
+                            id="email"
 
+                            name="email"
 
+                            placeholder="Insert Email"
 
+                        />
 
+                    </div>
 
+                    
+                    <div class="form-outline form-white mb-3">
 
+                        <label for="passwd_1"></label>
 
+                        <input 
+                            type="password" 
+                            class="form-control" 
+                            id="passwd_1"
 
+                            name="passwd_1"
 
+                            placeholder="Enter Password"
 
+                        />
 
+                        <p style="color:grey;">*Use 8 or more characters</p>
 
+                    </div>
 
+                    <div class="form-outline form-white mb-3">
 
+                        <label for="passwd_2"></label>
 
+                        <input 
+                            type="password" 
+                            class="form-control" 
+                            id="passwd_2"
 
+                            name="passwd_2"
 
+                            placeholder="Confirm Password"
 
+                        />
 
+                    </div>
 
+
 
+                    <div class="form-outline form-white mb-3">
 
+                        <label for="username"></label>
 
+                        <input 
+                            type="text" 
+                            class="form-control" 
+                            id="username"
 
+                            name="username"
 
+                            placeholder="Insert User Name"
 
+                        />
 
+                    </div>
 
+
 
+                    <button class="btn btn-outline-light btn-lg px-5" type="submit">Sign up</button>
 
+      
+                  </div>
 
+      
+                  <div>
 
+                    <p class="mb-0">Already have an account? <a href="login" class="text-white-50 fw-bold">Login</a></p>
 
+                  </div>
 
+      
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </section>
 
 </form>
 
 {% endblock %}