'Fontend_create_and_edit_bookmark_pages;

app/templates/create_bookmark.html

@@ -1,23 +1,73 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="mx-auto text-center">
-<h1>Create your bookmark</h1>
-<form method="POST" enctype="multipart/form-data">
-    <label for="web_link">Website Link</label><br>
-    <input type="text" id="web_link" name="web_link"><br>
-    <label for="web_name">Description</label><br>
-    <input type="text" id="web_name" name="web_name">
-    <label for="web_group">Group Name</label><br>
-    <input type="text" id="web_group" name="web_group">
-    <!-- Choose Public or Private-->
-    <p>Is this a Public or Private bookmark?</p>
-    <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>
-    <!---	Automatic Icon Usage (using links from external icon sites)-->
-    <button type="submit">Create</button>
-</form>
+
+    <div class="container py-5 h-100">
+      <div class="row d-flex justify-content-center align-items-center h-100">
+        <div class="col col-xl-10">
+          <div class="card" style="border-radius: 1rem;">
+            <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"
+                  class="img-fluid" style="border-radius: 1rem 0 0 1rem;"
+                />
+              </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">Create your bookmark</span>
+                    </div>
+ 
+                    <div class="form-outline mb-4">
+                      <label class="form-label" for="web_link">Website Link</label>
+                      <input type="text" id="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" id="web_name" class="form-control form-control-lg" />
+                    </div>
+
+                    <div class="form-outline mb-4">
+                        <label class="form-label" for="web_group">Group Name</label><br>
+                        <select name="web_group" id="web_group">
+                            <option value="Calculator">Calculator</option>
+                            <option value="Cipher_Encoder">Cipher Encoder</option> 
+                            <option value="Education">Education</option>     
+                            <option value="Online_food_ordering">Online food ordering</option>
+                            <option value="Restaurant">Restaurant</option> 
+                            <option value="Social_Media">Social Media</option> 
+                            <option value="Other">*Other</option>               
+                        </select>
+                    </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="button">Create</button>
+                    </div>
+  
+                
+                  </form>
+  
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
 {% endblock %}
-</div>
+

app/templates/edit_bookmark.html

@@ -1,21 +1,73 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="mx-auto text-center">
-<h1>Modify your bookmark</h1>
-<form method="POST" enctype="multipart/form-data">
-    <label for="website_link">Website Link</label><br>
-    <input type="text" id="website_link" name="website_link"><br>
-    <label for="Description">Description</label><br>
-    <input type="text" id="Description" name="Description">
-    <!-- Choose Public or Private-->
-    <p>Share the bookmark to anyone or Private?</p>
-    <input type="radio" id="share_public_private" name="share_public_private" value="Public">
-    <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>
-    <!---	Automatic Icon Usage (using links from external icon sites)-->
-    <button type="submit">Modify</button>
-</form>
-\{% endblock %}
-</div>
+
+    <div class="container py-5 h-100">
+      <div class="row d-flex justify-content-center align-items-center h-100">
+        <div class="col col-xl-10">
+          <div class="card" style="border-radius: 1rem;">
+            <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="edit_logo"
+                  class="img-fluid" style="border-radius: 1rem 0 0 1rem;"
+                />
+              </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">Create your bookmark</span>
+                    </div>
+ 
+                    <div class="form-outline mb-4">
+                      <label class="form-label" for="web_link">Website Link</label>
+                      <input type="text" id="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" id="web_name" class="form-control form-control-lg" />
+                    </div>
+
+                    <div class="form-outline mb-4">
+                        <label class="form-label" for="web_group">Group Name</label><br>
+                        <select name="web_group" id="web_group">
+                            <option value="Calculator">Calculator</option>
+                            <option value="Cipher_Encoder">Cipher Encoder</option> 
+                            <option value="Education">Education</option>     
+                            <option value="Online_food_ordering">Online food ordering</option>
+                            <option value="Restaurant">Restaurant</option> 
+                            <option value="Social_Media">Social Media</option> 
+                            <option value="Other">*Other</option>               
+                        </select>
+                    </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="button">Modify</button>
+                    </div>
+  
+                
+                  </form>
+  
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+{% endblock %}
+