Kezdőlap Felfedezés Súgó
Bejelentkezés
control
/
hometab
2
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

Added # and fixed all html tags position

eddy 3 éve
szülő
f629812a6f
commit
41015fef3c
6 módosított fájl, 317 hozzáadás és 302 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 100 76
      app/templates/base.html
  2. 54 58
      app/templates/create_bookmark.html
  3. 49 47
      app/templates/home.html
  4. 39 44
      app/templates/login.html
  5. 62 65
      app/templates/register.html
  6. 13 12
      app/templates/shared.html

+ 100 - 76
app/templates/base.html
Fájl Megtekintése 

@@ -1,89 +1,113 @@
 
 <!DOCTYPE html>
 
 <html>
 
-    <head>
 
-        <meta charset="utf-8">
 
-        <meta 
-            name="viewport" 
-            content="width=device-width, initial-scale=1"
 
-        >
 
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"/>
 
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous"/>
 
-        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 
-        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
-        
-        <title>{% block title %}Hometab{% endblock %}</title>
 
-        <link rel = "icon" href = 
-            "static/logo/hometag_logo.png" 
-             type = "image/x-icon">
 
-    </head>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <meta 
+        name="viewport" 
+        content="width=device-width, initial-scale=1"
 
+    >
 
+    <link 
+        rel="stylesheet" 
+        href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
+        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
+        crossorigin="anonymous"
 
+    />
 
+    <link
 
+        rel="stylesheet" 
+        href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
+        crossorigin="anonymous"
 
+    />
 
+    <script 
+        src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
+        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
+        crossorigin="anonymous">
 
+    </script>
 
+    <script 
+        src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" 
+        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
+        crossorigin="anonymous">
 
+    </script>
 
+    <script 
+        src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" 
+        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
+        crossorigin="anonymous">
 
+    </script>
 
+    
+    <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;
 
-        }
 
-        a {
 
-            font-size: 18px;
 
-        }
 
-        .navbar-nav > li{
 
-            padding-left:30px;
 
-        }
 
-        body {
 
-            font: 400 15px/1.8 "Lato", sans-serif;
 
-        }
 
-    </style>
 
+<style>
 
+.navbar-nav-right {
 
+    margin-left: auto;
 
+}
 
+a {
 
+    font-size: 18px;
 
+}
 
+.navbar-nav > li{
 
+    padding-left:30px;
 
+}
 
+body {
 
+    font: 400 15px/1.8 "Lato", sans-serif;
 
+}
 
+</style>
 
     
-    <body>
 
-        <nav class="navbar fixed-top 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">
 
+<body>
 
+    <nav class="navbar fixed-top 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></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="/">Home</a>
 
-              </li>
 
-              <li class="nav-item">
 
+            </li>
 
+            <li class="nav-item">
 
                 <a class="nav-link" href="/create">New Bookmark</a>
 
-              </li>
 
-              <li class="nav-item">
 
+            </li>
 
+            <li class="nav-item">
 
                 <a class="nav-link" href="/shared">Public Bookmarks</a>
 
-              </li>
 
-            </ul>
 
-            <ul class="navbar-nav-right">
 
-              <li class="nav-item">
 
+            </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="85"/></a></li>
 
-              </li>
 
-            </ul>
 
+            </li>
 
+        </ul>
 
+        {% else %}
 
+        {% endif %}
 
+        </ul>
 
+    </nav>
 
+    <!-- For Flash Errors to User -->
 
+    {% with messages = get_flashed_messages(with_categories=true) %}
 
+    {% if messages %}
 
+        {% for category, message in messages %}
 
+            {% if category == 'error' %}
 
+            <div class="alert alert-danger alter-dismissable fade show", role="alert" style="z-index:2;">
 
+                {{ message }}
 
+                <button type="button" class="close" data-dismiss="alert">
 
+                    <span aria-hidden="true">&times;</span> <!-- fancy button styling-->
 
+                </button>
 
+            </div>
 
             {% else %}
 
+            <div class="alert alert-success alter-dismissable fade show", role="alert" style="z-index:2;">
 
+                {{ message }}
 
+                <button type="button" class="close" data-dismiss="alert">
 
+                    <span aria-hidden="true">&times;</span> <!-- fancy button styling-->
 
+                </button>
 
+            </div>
 
             {% endif %}
 
-            </ul>
 
-          </nav>
 
-        <!-- For Flash Errors to User -->
 
-        {% with messages = get_flashed_messages(with_categories=true) %}
 
-        {% if messages %}
 
-            {% for category, message in messages %}
 
-                {% if category == 'error' %}
 
-                <div class="alert alert-danger alter-dismissable fade show", role="alert" style="z-index:2;">
 
-                    {{ message }}
 
-                    <button type="button" class="close" data-dismiss="alert">
 
-                        <span aria-hidden="true">&times;</span> <!-- fancy button styling-->
 
-                    </button>
 
-                </div>
 
-                {% else %}
 
-                <div class="alert alert-success alter-dismissable fade show", role="alert" style="z-index:2;">
 
-                    {{ message }}
 
-                    <button type="button" class="close" data-dismiss="alert">
 
-                        <span aria-hidden="true">&times;</span> <!-- fancy button styling-->
 
-                    </button>
 
-                </div>
 
-                {% endif %}
 
-            {% endfor %}
 
-        {% endif %}
 
-        {% endwith %}
 
-        <div class="container">
 
-            {% block content %}
 
-            {% endblock %}
 
-        </div>
 
-
 
-    </body>
 
+        {% endfor %}
 
+    {% endif %}
 
+    {% endwith %}
 
+    <div class="container">
 
+        {% block content %}
 
+        {% endblock %}
 
+    </div>
 
+</body>
 
 </html>

+ 54 - 58
app/templates/create_bookmark.html
Fájl Megtekintése 

@@ -1,68 +1,64 @@
 
 {% extends "base.html" %}
 
 
 {% block content %}
 
-    <div class="container py-3 h-100">
 
-      <div class="row d-flex justify-content-center align-items-center h-100">
 
-        <div class="col col-xl-10">
 
-          <div class="row g-0">
 
-            <!--------Bookmark Logo---------->
 
-            <div class="col-md-6 col-lg-5 d-none d-md-block">
 
-              <img
 
-                src="/static/logo/bookmark_logo.png"
 
-                alt="bookmark_logo"
 
-                style="width: 1000px;"
 
-              />
 
-            </div>
 
-            <!--------Create Bookmark form--------->
 
-            <div class="col-md-6 col-lg-7 d-flex align-items-center">
 
-              <div class="card-body p-4 p-lg-5 text-black">
 
-
 
-                  <form method="POST" enctype="multipart/form-data">
 
-
 
-                  <div class="d-flex align-items-center mb-3 pb-1">
 
-                    <span class="h1 fw-bold mb-0">Create your bookmark</span>
 
-                  </div>
 
-                  <!---------Input:Website Link--------->
 
-                  <div class="form-outline mb-4">
 
-                    <label class="form-label" for="web_link">Website Link</label>
 
-                    <input type="text" name="web_link" class="form-control form-control-lg" />
 
-                  </div>
 
-                  <!---------Input:Name--------->
 
-                  <div class="form-outline mb-4">
 
-                    <label class="form-label" for="web_name">Name  <b>(Up to 12 characters in length)</b></label>
 
-                    <input type="text" name="web_name" maxlength="12" class="form-control form-control-lg" />
 
-                  </div>
 
-                  <!---------Select Group or Input new Group--------->
 
-                  <div class="form-outline mb-4">
 
-                      <label class="form-label" for="web_group">Existing Groups  <b>(Up to 12 characters in length)</b></label><br>
 
-                      <select name="web_group" style="height:47px" required aria-invalid="false"> 
-                        <option value="cng-555">Create new group:</option>
 
-                        {% for bg in bgroups %}
 
-                        <option name="web_group" value="{{ bg.group }}">{{ bg.group }}</option>
 
-                        {% endfor %}
 
-                      </select>
 
-                      <input type="text" name="new_group" maxlength="12" style='position:relative; left:20px; padding-right: 0px; height:47px;' placeholder="Name new group here"/>
 
-                  </div>  
-                  <!---------Select Public Or Private Status--------->
 
-                  <div class="form-outline mb-4">
 
-                      <label class="form-label" for="share_public_private">Is this a Public or Private bookmark?</label><br>
 
-                      <input type="radio" id="share_public_private" name="share_public_private" value="public" checked="checked" style="transform:scale(2);" >
 
-                      <label for="Public">&nbspPublic</label><br>
 
-                      <input type="radio" id="share_public_private" name="share_public_private" value="private" style="transform:scale(2);">
 
-                      <label for="Private">&nbspPrivate</label><br>
 
-                  </div>  
-
 
-                  <div class="pt-1 mb-4">
 
-                    <button class="btn btn-dark btn-lg btn-block" type="submit">Create</button>
 
-                  </div>
 
-
 
-                </form>
 
+<div class="container py-3 h-100">
 
+  <div class="row d-flex justify-content-center align-items-center h-100">
 
+    <div class="col col-xl-10">
 
+      <div class="row g-0">
 
+        <!--------Bookmark Logo---------->
 
+        <div class="col-md-6 col-lg-5 d-none d-md-block">
 
+          <img
 
+            src="/static/logo/bookmark_logo.png"
 
+            alt="bookmark_logo"
 
+            style="width: 1000px;"
 
+          />
 
+        </div>
 
+        <!--------Create Bookmark form--------->
 
+        <div class="col-md-6 col-lg-7 d-flex align-items-center">
 
+          <div class="card-body p-4 p-lg-5 text-black">
 
+            <form method="POST" enctype="multipart/form-data">
 
+              <div class="d-flex align-items-center mb-3 pb-1">
 
+                <span class="h1 fw-bold mb-0">Create your bookmark</span>
 
               </div>
 
-            </div>
 
+              <!---------Input:Website Link--------->
 
+              <div class="form-outline mb-4">
 
+                <label class="form-label" for="web_link">Website Link</label>
 
+                <input type="text" name="web_link" class="form-control form-control-lg" />
 
+              </div>
 
+              <!---------Input:Name--------->
 
+              <div class="form-outline mb-4">
 
+                <label class="form-label" for="web_name">Name  <b>(Up to 12 characters in length)</b></label>
 
+                <input type="text" name="web_name" maxlength="12" class="form-control form-control-lg" />
 
+              </div>
 
+              <!---------Select Group or Input new Group--------->
 
+              <div class="form-outline mb-4">
 
+                  <label class="form-label" for="web_group">Existing Groups  <b>(Up to 12 characters in length)</b></label><br>
 
+                  <select name="web_group" style="height:47px" required aria-invalid="false"> 
+                    <option value="cng-555">Create new group:</option>
 
+                    {% for bg in bgroups %}
 
+                    <option name="web_group" value="{{ bg.group }}">{{ bg.group }}</option>
 
+                    {% endfor %}
 
+                  </select>
 
+                  <input type="text" name="new_group" maxlength="12" style='position:relative; left:20px; padding-right: 0px; height:47px;' placeholder="Name new group here"/>
 
+              </div>  
+              <!---------Select Public Or Private Status--------->
 
+              <div class="form-outline mb-4">
 
+                  <label class="form-label" for="share_public_private">Is this a Public or Private bookmark?</label><br>
 
+                  <input type="radio" id="share_public_private" name="share_public_private" value="public" checked="checked" style="transform:scale(2);" >
 
+                  <label for="Public">&nbspPublic</label><br>
 
+                  <input type="radio" id="share_public_private" name="share_public_private" value="private" style="transform:scale(2);">
 
+                  <label for="Private">&nbspPrivate</label><br>
 
+              </div>
 
+              <!---------Submit Button--------->
 
+              <div class="pt-1 mb-4">
 
+                <button class="btn btn-dark btn-lg btn-block" type="submit">Create</button>
 
+              </div>
 
+            </form>
 
           </div>
 
         </div>
 
       </div>
 
     </div>
 
-
 
+  </div>
 
+</div>
 
 {% endblock %}

+ 49 - 47
app/templates/home.html
Fájl Megtekintése 

@@ -168,61 +168,63 @@ body{
 
                                     </div>
 
                                 </div>
 
                             </form>
 
+                        </div>
 
                     </div>
 
                 </div>
 
             </div>
 
-        </div>
 
-        <!------  List of bookmarks you have created ---------->
 
-        <div class="col">
 
-        <div class="card">
 
-            <div class="container">
 
-                <div class="col-md-12"></div>
 
-                    <h2 class="text-center" style="padding-left:75px; padding-right:75px;">List of bookmarks you have created </h2>
 
-                    <hr>
 
-                    <!------  Download bookmark button ---------->
 
-                    <form method="POST" target="_blank">
 
-                        <input name="dl_bookml"  value="dl_bookml" style="display:none;"/>
 
-                        <button type="submit" class="btn btn-info">Download Bookmarks for backup</button>
 
-                    </form>
 
-                    <br>
 
-                </div>
 
-                <!------  Bookmark list ---------->
 
-                <div class="row">
 
-                {% for bg, bml in bdic.items(): %}
 
-                    <div class="col-md-6">
 
-                        <div class="bookmark_box_background_color" style="border-style: inset;">
 
-                            <div>
 
-                                <h3 >{{ bg }}</h3>
 
-                                <hr>
 
-                                <!-- Code: Each Link in the Box-->
 
-                                <!-------- Icon ---------->
 
-                                {% for bm in bml: %}
 
-                                <div class="row">
 
-                                    <div class="col.md-4">
 
-                                        <ul class="list">
 
-                                        <li><img src="static/sitecons/{{bm.icon}}" height=25 width=25> {{ bm.name }}</li>
 
-                                    </div>
 
-                                    <!-------- Link/Delete/Status---------->
 
-                                    <div class="col.md-4">
 
-                                        <li class="href_link_button" style="position:absolute; right:125px;">
 
-                                        <a href="{{ bm.link }}" TARGET="_BLANK">
 
-                                        <img src="static/logo/link_logo.png"width="30" height="30">
 
-                                        </a>
 
-                                            <form method="POST">
 
-                                                <input name="web_delete" value="{{bm.id}}" style="display:none;"/>
 
-                                            <button type="submit" class="btn btn-danger" style="padding: 3px; font-size: 6px; border-width: 3px;position:absolute; left:35px; bottom:0px">Delete</button>
 
-                                            </form>
 
-                                        <b class="text_border btn-outline-secondary"><i>{{ bm.status }}</i></b>
 
-                                        </li>
 
-                                        </ul>
 
+            <!------  List of bookmarks you have created ---------->
 
+            <div class="col">
 
+                <div class="card">
 
+                    <div class="container">
 
+                        <div class="col-md-12"></div>
 
+                            <h2 class="text-center" style="padding-left:75px; padding-right:75px;">List of bookmarks you have created </h2>
 
+                            <hr>
 
+                            <!------  Download bookmark button ---------->
 
+                            <form method="POST" target="_blank">
 
+                                <input name="dl_bookml"  value="dl_bookml" style="display:none;"/>
 
+                                <button type="submit" class="btn btn-info">Download Bookmarks for backup</button>
 
+                            </form>
 
+                            <br>
 
+                        </div>
 
+                        <!------  Bookmark list ---------->
 
+                        <div class="row">
 
+                        {% for bg, bml in bdic.items(): %}
 
+                            <div class="col-md-6">
 
+                                <div class="bookmark_box_background_color" style="border-style: inset;">
 
+                                    <div>
 
+                                        <h3 >{{ bg }}</h3>
 
+                                        <hr>
 
+                                        <!-- Code: Each Link in the Box-->
 
+                                        <!-------- Icon ---------->
 
+                                        {% for bm in bml: %}
 
+                                        <div class="row">
 
+                                            <div class="col.md-4">
 
+                                                <ul class="list">
 
+                                                <li><img src="static/sitecons/{{bm.icon}}" height=25 width=25> {{ bm.name }}</li>
 
+                                            </div>
 
+                                            <!-------- Link/Delete/Status---------->
 
+                                            <div class="col.md-4">
 
+                                                <li class="href_link_button" style="position:absolute; right:125px;">
 
+                                                <a href="{{ bm.link }}" TARGET="_BLANK">
 
+                                                <img src="static/logo/link_logo.png"width="30" height="30">
 
+                                                </a>
 
+                                                    <form method="POST">
 
+                                                        <input name="web_delete" value="{{bm.id}}" style="display:none;"/>
 
+                                                    <button type="submit" class="btn btn-danger" style="padding: 3px; font-size: 6px; border-width: 3px;position:absolute; left:35px; bottom:0px">Delete</button>
 
+                                                    </form>
 
+                                                <b class="text_border btn-outline-secondary"><i>{{ bm.status }}</i></b>
 
+                                                </li>
 
+                                                </ul>
 
+                                            </div>
 
+                                        </div>
 
+                                        {% endfor %}
 
                                     </div>
 
                                 </div>
 
-                                {% endfor %}
 
+                                <br>
 
                             </div>
 
+                            {% endfor %}
 
                         </div>
 
-                        <br>
 
                     </div>
 
-                    {% endfor %}
 
                 </div>
 
             </div>
 
         </div>

+ 39 - 44
app/templates/login.html
Fájl Megtekintése 

@@ -9,54 +9,49 @@
 
 </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>
 
-      
+  <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>
 
+                <!--Input Email-->
 
+                <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>
 
+                <!--Input Password-->
 
+                <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: Login-->
 
+                <button class="btn btn-outline-light btn-lg px-5" type="submit">Login</button>
 
+              </div>
 
+              <!--Redirect to Sign up Page-->
 
+              <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>
 
-      </section>
 
+      </div>
 
+    </div>
 
+  </section>
 
 </form>
 
 {% endblock %}

+ 62 - 65
app/templates/register.html
Fájl Megtekintése 

@@ -10,75 +10,72 @@ body {
 
 </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">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>
 
-      
+  <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>
 
+                <!--Input: Email-->
 
+                <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>
 
+                <!--Input: Password-->
 
+                <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>
 
+                <!--Input: Password Confirm-->
 
+                <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>
 
+                <!--Input: Username-->
 
+                <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: Sign up-->
 
+                <button class="btn btn-outline-light btn-lg px-5" type="submit">Sign up</button>
 
+              </div>
 
+              <!--Redirect to Login Page-->
 
+              <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>
 
-      </section>
 
+      </div>
 
+    </div>
 
+  </section>
 
 </form>
 
 {% endblock %}

+ 13 - 12
app/templates/shared.html
Fájl Megtekintése 

@@ -58,20 +58,17 @@ ul {
 
     border: 4px solid gray;
 
     padding: 3px 0px 5px 0px;
 
 }
 
-
 
-
 
 </style>
 
 
-
 
 <div class="mx-auto text-center">
 
-<div class="container">
 
-    <div class="row">
 
-        <div class="col-md-12 col-sm-12">
 
-            <div class="section-title">
 
-                <h1 class="heading bold">List of bookmarks you have created</h1><br>
 
+    <div class="container">
 
+        <div class="row">
 
+            <div class="col-md-12 col-sm-12">
 
+                <div class="section-title">
 
+                    <h1 class="heading bold">List of bookmarks you have created</h1><br>
 
+                </div>
 
             </div>
 
-        </div>
 
-        {% for bg, bml in bdic.items(): %}
 
+            {% for bg, bml in bdic.items(): %}
 
             <div class="col-md-4">
 
                 <div class="bookmark_box_background_color" style="border-style: inset;">
 
                     <div>
 
@@ -82,12 +79,14 @@ ul {
 
                         <div class="row">
 
                             <div class="col.md-4">
 
                                 <ul class="list">
 
-                                    <li><img src="static/sitecons/{{bm.icon}}" height=25 width=25> {{ bm.name }}</li>
 
+                                <li>
 
+                                    <img src="static/sitecons/{{bm.icon}}" height=25 width=25> {{ bm.name }}
 
+                                </li>
 
                             </div>
 
                             <div class="col.md-4" style="position:absolute; right:17px;">
 
                                 <li class="href_link_button">
 
                                 <a href="{{ bm.link }}">
 
-                                <img src="static/logo/link_logo.png"width="30" height="30">
 
+                                    <img src="static/logo/link_logo.png"width="30" height="30">
 
                                 </a>
 
                                 </li>
 
                                 </ul>
 
@@ -101,4 +100,6 @@ ul {
 
             </div>
 
             {% endfor %}
 
         </div>
 
+    </div>
 
+</div>
 
 {% endblock %}