Finished edit buttom(Pop Up)

app/templates/base.html

@@ -6,18 +6,12 @@
             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"
-      />
+        <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" 
@@ -91,21 +85,5 @@
             {% endblock %}
         </div>
 
-
-        <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
-            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
-            crossorigin="anonymous">
-        </script>
-        <script
-            src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
-            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
-            crossorigin="anonymous">
-        </script>
     </body>
 </html>

app/templates/create_bookmark.html

@@ -44,10 +44,10 @@
                   
                   <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" >
-                      <label for="Public">Public</label><br>
-                      <input type="radio" id="share_public_private" name="share_public_private" value="private">
-                      <label for="Private">Private</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">

app/templates/edit_bookmark.html

@@ -1,67 +0,0 @@
-{% 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">
-            <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>
-            <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">Modify your bookmark</span>
-                  </div>
-
-                  <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>
-
-                  <div class="form-outline mb-4">
-                    <label class="form-label" for="web_name">Name</label>
-                    <input type="text" name="web_name" class="form-control form-control-lg" />
-                  </div>
-
-                  <div class="form-outline mb-4">
-                      <label class="form-label" for="web_group">Existing Groups</label><br>
-                      <select name="web_group" style="padding-right: 30px;"> 
-                        <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" style='position:relative; left:40px; padding-right: 0px;' placeholder="Name new group here"/>
-                  </div>  
-                  
-                  <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" >
-                      <label for="Public">Public</label><br>
-                      <input type="radio" id="share_public_private" name="share_public_private" value="private">
-                      <label for="Private">Private</label><br>
-                  </div>  
-
-                  <div class="pt-1 mb-4">
-                    <button class="btn btn-dark btn-lg btn-block" type="submit">Modify</button>
-                  </div>
-
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-{% endblock %}
-

app/templates/home.html

@@ -94,7 +94,6 @@ body{
 }
 
 </style>
-
 <div class="mx-auto text-center">
 <!------  Profile Information ---------->
 <div class="container">
@@ -212,7 +211,7 @@ body{
                                             <a href="{{ bm.link }}" TARGET="_BLANK">
                                             <img src="static/logo/link_logo.png"width="30" height="30">
                                             </a>
-                                            <button type="submit" class="btn btn-primary" style="padding: 3px; font-size: 6px; border-width: 3px;"><b>Edit</b></button>
+                                            <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#ModifyBookmark" style="padding: 3px; font-size: 6px; border-width: 3px;"><b>Edit</b></button>
                                             <b class="text_border"><i>{{ bm.status }}</i></b>
                                             </li>
                                             </ul>
@@ -232,5 +231,72 @@ body{
         </div>
     </div>
 </div>
+<!-- Modal Popup for Edit Button-->
+{% block modal %}
+<div class="modal" id="ModifyBookmark" tabindex="-1" role="dialog" aria-labelledby="ModifyBookmarkLabel" aria-hidden="true" >
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-body">
+            <div class="row d-flex justify-content-center align-items-center h-100">
+                <div class="row g-0">
+                  <div class="col-md-6 col-lg-5 d-none d-md-block">
+                    <img
+                      src="/static/logo/edit_logo.png"
+                      alt="bookmark_logo"
+                      style="width: 1000px;"
+                    />
+                  </div>
+                  <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-->
+                        <form method="POST" enctype="multipart/form-data">
+                            <div class="d-flex align-items-center mb-3 pb-1" style='position:relative; right:40px'>
+                              <span class="h1 fw-bold mb-0">Modify your bookmark</span>
+                            </div>
+          
+                            <div class="form-outline mb-4" style='position:relative; right:60px'>
+                              <label class="form-label" for="web_link">Website Link</label>
+                              <input type="text" name="web_link" class="form-control form-control-lg" style="width:400px" />
+                            </div>
+          
+                            <div class="form-outline mb-4" style='position:relative; right:60px'>
+                              <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" style="width:400px"/>
+                            </div>
+          
+                            <div class="form-outline mb-4" style='position:relative; right:60px'>
+                                <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; height:47px;' placeholder="Name new group here"/>
+                            </div>  
+                            
+                            <div class="form-outline mb-4" style='position:relative; right:60px'>
+                                <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" style='position:relative; right:60px'>
+                              <button class="btn btn-dark btn-lg btn-block" type="submit" style="width:400px; position:relative; top:-30px; padding-right: 0px;">Modify</button>
+                            </div>
+          
+                          </form>
+                          <!--(End) Form (End)-->
+                    </div>
+                  </div>
 
+              </div>
+            </div>
+          </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
 {% endblock %}

app/templates/modal.html

@@ -0,0 +1,52 @@
+<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>
+{% block modal %}
+<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
+      </div>
+      <div class="modal-body">
+        <form>
+          <div class="form-group">
+            <label for="recipient-name" class="col-form-label">Recipient:</label>
+            <input type="text" class="form-control" id="recipient-name">
+          </div>
+          <div class="form-group">
+            <label for="message-text" class="col-form-label">Message:</label>
+            <textarea class="form-control" id="message-text"></textarea>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <a href="{{url_for('logic.home')}}" class="btn btn-primary">Pop Up Mod</a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block script %}
+<script>
+$(document).ready(function(){
+    console.log("Windows is loaded")
+    $("#exampleModal").modal("show")
+})
+</script>
+{% endblock %}