Remove_modal_and_user_href_redirect

app/dashboards.py

@@ -94,18 +94,12 @@ def create():
 
     return render_template('create_art.html', user = current_user, form = form)
 	
-# Pop Ups
-@dashboards.route('/modal_home')
+@dashboards.route('/search')
 @login_required
-def modal_home():
-    return render_template('detail_art_for_market.html', user=current_user)
+def search():
+    return render_template('search.html', user=current_user)
 
-@dashboards.route('/modal_profile')
+@dashboards.route('/detail')
 @login_required
-def modal_profile():
-    return render_template('detail_art_for_profile.html', user=current_user)
-
-@dashboards.route('/modal_search')
-@login_required
-def modal_search():
-    return render_template('detail_art_for_search.html', user=current_user)
+def detail():
+    return render_template('detail_art.html', user=current_user)

app/static/css/style.css

@@ -293,8 +293,9 @@ input.create_art-input {
 --------------------------------------------------------------*/
 
 .input-UploadProfile-Browse {
-  width: 80px;
-  color:transparent;
+  background: #846add;
+  line-height: 1.5;
+  color: #fff;
 }
 
 .update_password-form-btn {

app/templates/base.html

@@ -13,6 +13,7 @@
     <script src="static/js/jquery-3.3.1.slim.min.js"></script>
     <script src="static/js/popper.min.js"></script>
     <script src="static/js/bootstrap.min.js"></script>
+    <script src="static/js/style.js"></script>
     
     <title>
         {% block title %}artFi{% endblock %}
@@ -55,13 +56,15 @@
         </ul>
         {% endif %}
         </ul>
-        <div class="input-group navbar-nav-middle flash_message_size">
-            <input type="text" class="form-control" placeholder="Search Art">
-            <div class="input-group-append">
-                <button class="btn btn-secondary" type="button">
-                <i class="fa fa-search">Search</i>
-            </button>
-            </div>
+        <div>
+            <form action="search" class="input-group navbar-nav-middle flash_message_size">
+                <input type="text" class="form-control" placeholder="Search Art">
+                <div class="input-group-append">
+                    <button class="btn btn-secondary" type="button">
+                        <i class="fa fa-search">Search</i>
+                    </button>
+                </div>
+            </form>
         </div>
     </nav>
     <!-- For Flash Errors to User -->

app/templates/create_art.html

@@ -1,41 +1,6 @@
 {% extends "base.html" %}
 
 {% block content %}
-
-<script>
-$(function(){
-  /* Set the Max date */
-  var dtToday = new Date();
-
-  var month = dtToday.getMonth() + 1;
-  var day = dtToday.getDate() + 14;
-  var year = dtToday.getFullYear();
-
-  if(month < 10)
-      month = '0' + month.toString();
-  if(day < 10)
-      day = '0' + day.toString();
-
-  var maxDate = year + '-' + month + '-' + day;    
-  /* Set the Min date */
-  var dtToday_min = new Date();
-  
-  var month_min = dtToday.getMonth() + 1;
-  var day_min = dtToday.getDate()+1;
-  var year_min = dtToday.getFullYear();
-  if(month_min < 10)
-      month_min = '0' + month_min.toString();
-  if(day_min < 10)
-      day_min = '0' + day_min.toString();
-  
-  var minDate = year_min + '-' + month_min + '-' + day_min;
-  
-  /* Run the codes */
-  $('#closing_date').attr('max', maxDate);
-  $('#closing_date').attr('min', minDate);
-});
-
-</script>
 <div class="container-create_art">
   <div class="wrap-create_art">
     <div class="create_art-pic" data-tilt>
@@ -48,57 +13,26 @@ $(function(){
       </span>
       <!--Input Art Name-->
       <div class="create_art-input-box">
-        <!--<input 
-        type="art_name" 
-        class="form-control create_art-input" 
-        id="art_name"
-        name="art_name"
-        placeholder="Enter Art Name"
-        />-->
-        {{ form.art_name(placeholder="Enter Art Name") }}
+        {{ form.art_name(placeholder="Enter Art Name", class="form-control create_art-input" ) }}
       </div>
       <!--Input Minimum Price-->
       <div class="create_art-input-box">
-        <!--<input 
-        type="number" 
-        class="form-control create_art-input" 
-        id="minimum_price"
-        name="minimum_price"
-        placeholder="Enter Minimum Price (USD)"
-        />-->
-        {{ form.min_price(placeholder="Enter Minimum Price (USD)") }}
+        {{ form.min_price(placeholder="Enter Minimum Price (USD)", class="form-control create_art-input") }}
       </div> 
       <!--Input Buyout Price-->
       <div class="create_art-input-box">
-        <!--<input 
-        type="number" 
-        class="form-control create_art-input" 
-        id="buyout_price"
-        name="buyout_price"
-        placeholder="Enter Buyout Price (USD)"
-        />-->
-        {{ form.buyout_price(placeholder="Enter Buyout Price (USD)") }}
+        {{ form.buyout_price(placeholder="Enter Buyout Price (USD)", class="form-control create_art-input") }}
       </div>
       <!--Input Description-->
       <div class="create_art-input-box">
-          <!--<textarea type="description" class="form-control create_art-input description_size" id="description" name="description" placeholder="     Enter Description"></textarea>-->
-          {{ form.art_desc(placeholder="Enter Description") }}
+        {{ form.art_desc(placeholder="Enter Description", class="form-control create_art-input description_size") }}
       </div>
       <!--Upload Art or choose what they bought before-->
       <hr class="hr_size">
       <div class="row">
         <div class="col input-group-prepend">
           <label class="input-group-text">File upload</label>
-            <!--<input
-              type="file" 
-              id="profile_image" 
-              name="profile_image" 
-              accept="image/png, image/jpeg" 
-              value="Upload"
-              src="http://example.com/path/to/image.png"
-              class="upload_Create_art input-group-text"
-              >-->
-            {{ form.upload() }}
+            {{ form.upload(class="upload_Create_art input-group-text", accept="image/png, image/jpeg") }}
         </div>
         <p class="upload_Create_art_position">**<b>PNG's</b>, <b>JPEG's</b> Only**</p>
       </div>
@@ -118,8 +52,7 @@ $(function(){
       <div class="row">
         <div class="col input-group-prepend">  
           <span class="input-group-text Choose-Time-for-Auction-ends">Auction End Date</span>
-          <!--<input type="date" id="closing_date" name="closing_date" class="body-column-create_art Closing-date-input-size">-->
-          {{ form.close_date() }}
+          {{ form.close_date(class="body-column-create_art Closing-date-input-size") }}
         </div>
       </div>
       <!-- Tips for the date to let user know-->
@@ -134,10 +67,7 @@ $(function(){
       </div>
       <!-- Button for create Auction-->
       <div class="container-create_art-form-btn">
-          {{ form.submit() }}
-        <!--<button class="create_art-form-btn">
-          <b>Create</b>
-        </button>-->
+          {{ form.submit(class="create_art-form-btn") }}
       </div>
     </form>
   </div>

app/templates/detail_art.html

@@ -0,0 +1,84 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container">
+  <!-- Product section-->
+  <section class="py-5">
+    <div class="container px-4 px-lg-5 my-5">
+      <div class="row gx-4 gx-lg-5 align-items-center">
+        <!-- Art Image-->
+        <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="static/repository/website_photo/navbar_icon.png" alt="..." /></div>
+          <div class="col-md-6">
+            <!-- AuctionEnd Time-->
+            <div class="small mb-1">
+              (Auction ends in time)
+            </div>
+            <!-- Art Name-->
+            <h1 class="display-5 fw-bolder">(Art Name)</h1>
+            <!-- Art Description-->
+            <p class="lead">(Description)</p>
+            <div class="fs-5 mb-5">
+              <!-- Price & Name-->
+              <span class="text-decoration-line-through">Current Bid Price: (Current Bid Price) USD</span><br>
+              <span class="text-decoration-line-through">Buyout Price: (Buyout Price) USD</span><br>
+              <span class="text-decoration-line-through">Minimum Price: (Minimum Price) USD</span><br>
+              <span class="text-decoration-line-through">Who Created: (Creator Name)</span><br>
+              <span class="text-decoration-line-through">Art Owner: (Owner Name)</span><br>
+            </div>
+            <!-- Bid button-->
+            <div class="d-flex">
+              <form method="POST">
+                <input 
+                  type="text" 
+                  class="form-control text-center me-3 bidding_price_size" 
+                  id="bidding_price"
+                  name="bidding_price"
+                  placeholder="Enter Bidding Price"
+                />
+                <label for="Bidding Price"></label>
+                <button class="btn btn-dark flex-shrink-0 input-submit" type="submit">Bid</button>
+                <p>(At the backend needs to record the bidder nickname and time. And the record will be showing at the bid history table)</p>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Bid History-->
+  <div class="row">
+    <div class="col body-column">
+      <br>
+      <h3>Bid History(order by desc)</h3>
+    </div>
+  </div>
+  <!-- Bid Table-->
+  <div class="container">
+    <table class="table">
+      <thead class="thead-dark">
+        <tr>
+        <th>Bidder Name</th>
+        <th>Bidding Time</th>
+        <th>Bidding Price</th>
+        </tr>
+      </thead>
+      <tr>
+        <td>Patrick Star</td>
+        <td>2022-4-3 15:30:00</td>
+        <td>150</td>
+      </tr>
+      <tr>
+        <td>SpongeBob SquarePants</td>
+        <td>2022-4-2 10:00:00</td>
+        <td>100</td>
+      </tr>
+    </table>
+
+    <hr>
+    <h3>(For the Bid button</h3>
+    <p>Only show the bid button if the user login. The bidding price needs higher than before.</p>
+    <p>If the user enters the buyout price, the auction will be ended.</p>
+    <p>Will not show the bid button for who created the auction.)</p>
+  </div>
+</div>
+{% endblock %}

app/templates/detail_art_for_market.html

@@ -1,101 +0,0 @@
-{% extends "market.html" %}
-
-{% block modal %}
-<div class="modal fade bd-example-modal-xl" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-xl" role="document">
-    <div class="modal-content">
-      <div class="modal-body">
-         <!-- Product section-->
-         <section class="py-5">
-          <div class="container px-4 px-lg-5 my-5">
-            <div class="row gx-4 gx-lg-5 align-items-center">
-              <!-- Art Image-->
-              <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="static/repository/website_photo/navbar_icon.png" alt="..." /></div>
-                <div class="col-md-6">
-                  <!-- AuctionEnd Time-->
-                  <div class="small mb-1">
-                    (Auction ends in time)
-                  </div>
-                  <!-- Art Name-->
-                  <h1 class="display-5 fw-bolder">(Art Name)</h1>
-                  <!-- Art Description-->
-                  <p class="lead">(Description)</p>
-                  <div class="fs-5 mb-5">
-                    <!-- Price & Name-->
-                    <span class="text-decoration-line-through">Current Bid Price: (Current Bid Price) USD</span><br>
-                    <span class="text-decoration-line-through">Buyout Price: (Buyout Price) USD</span><br>
-                    <span class="text-decoration-line-through">Minimum Price: (Minimum Price) USD</span><br>
-                    <span class="text-decoration-line-through">Who Created: (Creator Name)</span><br>
-                    <span class="text-decoration-line-through">Art Owner: (Owner Name)</span><br>
-                  </div>
-                  <!-- Bid button-->
-                  <div class="d-flex">
-                    <form method="POST">
-                      <input 
-                      type="text" 
-                      class="form-control text-center me-3 bidding_price_size" 
-                      id="bidding_price"
-                      name="bidding_price"
-                      placeholder="Enter Bidding Price"
-                      />
-                      <label for="Bidding Price"></label>
-                      <button class="btn btn-dark flex-shrink-0 input-submit" type="submit">Bid</button>
-                      <p>(At the backend needs to record the bidder nickname and time. And the record will be showing at the bid history table)</p>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-        <!-- Bid History-->
-        <div class="row">
-          <div class="col body-column">
-            <br>
-            <h3>Bid History(order by desc)</h3>
-          </div>
-        </div>
-        <!-- Bid Table-->
-        <table class="table">
-          <thead class="thead-dark">
-            <tr>
-            <th>Bidder Name</th>
-            <th>Bidding Time</th>
-            <th>Bidding Price</th>
-            </tr>
-          </thead>
-            <tr>
-              <td>Patrick Star</td>
-              <td>2022-4-3 15:30:00</td>
-              <td>150</td>
-            </tr>
-            <tr>
-              <td>SpongeBob SquarePants</td>
-              <td>2022-4-2 10:00:00</td>
-              <td>100</td>
-            </tr>
-          </table>
-
-        <hr>
-        <h3>(For the Bid button</h3>
-        <p>Only show the bid button if the user login. The bidding price needs higher than before.</p>
-        <p>If the user enters the buyout price, the auction will be ended.</p>
-        <p>Will not show the bid button for who created the auction.)</p>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Script for run Modal-->
-<script>
-    $(document).ready(function(){
-        console.log("Windows is loaded")
-        $("#exampleModal").modal("show")
-    })
-    $(document).ready(function(e) {
-      $('#exampleModal').on('hidden.bs.modal', function(e) {
-        window.location.href = '{{url_for('dashboards.market')}}'
-      });
-    });
-</script>
-{% endblock %}

app/templates/detail_art_for_profile.html

@@ -1,86 +0,0 @@
-{% extends "profile.html" %}
-
-{% block modal %}
-<div class="modal fade bd-example-modal-xl" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-xl" role="document">
-    <div class="modal-content">
-      <div class="modal-body">
-         <!-- Product section-->
-         <section class="py-5">
-          <div class="container px-4 px-lg-5 my-5">
-            <div class="row gx-4 gx-lg-5 align-items-center">
-              <!-- Art Image-->
-              <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="static/repository/website_photo/navbar_icon.png" alt="..." /></div>
-                <div class="col-md-6">
-                  <!-- AuctionEnd Time-->
-                  <div class="small mb-1">
-                    (Auction ends in time)
-                  </div>
-                  <!-- Art Name-->
-                  <h1 class="display-5 fw-bolder">(Art Name)</h1>
-                  <!-- Art Description-->
-                  <p class="lead">(Description)</p>
-                  <div class="fs-5 mb-5">
-                    <!-- Price & Name-->
-                    <span class="text-decoration-line-through">Current Bid Price: (Current Bid Price) USD</span><br>
-                    <span class="text-decoration-line-through">Buyout Price: (Buyout Price) USD</span><br>
-                    <span class="text-decoration-line-through">Minimum Price: (Minimum Price) USD</span><br>
-                    <span class="text-decoration-line-through">Who Created: (Creator Name)</span><br>
-                    <span class="text-decoration-line-through">Art Owner: (Owner Name)</span><br>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-        <!-- Bid History-->
-        <div class="row">
-          <div class="col body-column">
-            <br>
-            <h3>Bid History(order by desc)</h3>
-          </div>
-        </div>
-        <!-- Bid Table-->
-        <table class="table">
-          <thead class="thead-dark">
-            <tr>
-            <th>Bidder Name</th>
-            <th>Bidding Time</th>
-            <th>Bidding Price</th>
-            </tr>
-          </thead>
-            <tr>
-              <td>Patrick Star</td>
-              <td>2022-4-3 15:30:00</td>
-              <td>150</td>
-            </tr>
-            <tr>
-              <td>SpongeBob SquarePants</td>
-              <td>2022-4-2 10:00:00</td>
-              <td>100</td>
-            </tr>
-          </table>
-
-        <hr>
-        <h3>(For the Bid button</h3>
-        <p>Only show the bid button if the user login. The bidding price needs higher than before.</p>
-        <p>If the user enters the buyout price, the auction will be ended.</p>
-        <p>Will not show the bid button for who created the auction.)</p>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Script for run Modal-->
-<script>
-    $(document).ready(function(){
-        console.log("Windows is loaded")
-        $("#exampleModal").modal("show")
-    })
-    $(document).ready(function(e) {
-      $('#exampleModal').on('hidden.bs.modal', function(e) {
-        window.location.href = '{{url_for('dashboards.profile')}}'
-      });
-    });
-</script>
-{% endblock %}

app/templates/detail_art_for_search.html

@@ -1,101 +0,0 @@
-{% extends "search.html" %}
-
-{% block modal %}
-<div class="modal fade bd-example-modal-xl" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-xl" role="document">
-    <div class="modal-content">
-      <div class="modal-body">
-         <!-- Product section-->
-         <section class="py-5">
-          <div class="container px-4 px-lg-5 my-5">
-            <div class="row gx-4 gx-lg-5 align-items-center">
-              <!-- Art Image-->
-              <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="static/repository/website_photo/navbar_icon.png" alt="..." /></div>
-                <div class="col-md-6">
-                  <!-- AuctionEnd Time-->
-                  <div class="small mb-1">
-                    (Auction ends in time)
-                  </div>
-                  <!-- Art Name-->
-                  <h1 class="display-5 fw-bolder">(Art Name)</h1>
-                  <!-- Art Description-->
-                  <p class="lead">(Description)</p>
-                  <div class="fs-5 mb-5">
-                    <!-- Price & Name-->
-                    <span class="text-decoration-line-through">Current Bid Price: (Current Bid Price) USD</span><br>
-                    <span class="text-decoration-line-through">Buyout Price: (Buyout Price) USD</span><br>
-                    <span class="text-decoration-line-through">Minimum Price: (Minimum Price) USD</span><br>
-                    <span class="text-decoration-line-through">Who Created: (Creator Name)</span><br>
-                    <span class="text-decoration-line-through">Art Owner: (Owner Name)</span><br>
-                  </div>
-                  <!-- Bid button-->
-                  <div class="d-flex">
-                    <form method="POST">
-                      <input 
-                      type="text" 
-                      class="form-control text-center me-3 bidding_price_size" 
-                      id="bidding_price"
-                      name="bidding_price"
-                      placeholder="Enter Bidding Price"
-                      />
-                      <label for="Bidding Price"></label>
-                      <button class="btn btn-dark flex-shrink-0 input-submit" type="submit">Bid</button>
-                      <p>(At the backend needs to record the bidder nickname and time. And the record will be showing at the bid history table)</p>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-        <!-- Bid History-->
-        <div class="row">
-          <div class="col body-column">
-            <br>
-            <h3>Bid History(order by desc)</h3>
-          </div>
-        </div>
-        <!-- Bid Table-->
-        <table class="table">
-          <thead class="thead-dark">
-            <tr>
-            <th>Bidder Name</th>
-            <th>Bidding Time</th>
-            <th>Bidding Price</th>
-            </tr>
-          </thead>
-            <tr>
-              <td>Patrick Star</td>
-              <td>2022-4-3 15:30:00</td>
-              <td>150</td>
-            </tr>
-            <tr>
-              <td>SpongeBob SquarePants</td>
-              <td>2022-4-2 10:00:00</td>
-              <td>100</td>
-            </tr>
-          </table>
-
-        <hr>
-        <h3>(For the Bid button</h3>
-        <p>Only show the bid button if the user login. The bidding price needs higher than before.</p>
-        <p>If the user enters the buyout price, the auction will be ended.</p>
-        <p>Will not show the bid button for who created the auction.)</p>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Script for run Modal-->
-<script>
-    $(document).ready(function(){
-        console.log("Windows is loaded")
-        $("#exampleModal").modal("show")
-    })
-    $(document).ready(function(e) {
-      $('#exampleModal').on('hidden.bs.modal', function(e) {
-        window.location.href = '{{url_for('dashboards.search')}}'
-      });
-    });
-</script>
-{% endblock %}

app/templates/login.html

@@ -15,32 +15,15 @@
                 <p class="text-white-50 mb-5">Please enter your login and password!</p>
                 <!--Input Email-->
                 <div class="form-outline form-white mb-4">
-                  {{ form.email(placeholder="Email") }} 
-                  <!--<input 
-                  type="email" 
-                  class="form-control" 
-                  id="email"
-                  name="email"
-                  placeholder="Insert Email"
-                  />
-                  <label for="email"></label>-->
+                  {{ form.email(placeholder="Email", class="form-control") }} 
                 </div>
                 <!--Input Password-->
                 <div class="form-outline form-white mb-4">
-                  {{ form.passwd(placeholder="Password") }}
-                  <!--<input 
-                  type="password" 
-                  class="form-control" 
-                  id="passwd_login"
-                  name="passwd_login"
-                  placeholder="Enter Password"
-                  />
-                  <label for="passwd_login"></label>-->
+                  {{ form.passwd(placeholder="Password", class="form-control") }}
                 </div>
                 <p>***(reCAPTCHA): https://python.plainenglish.io/how-to-use-google-recaptcha-with-flask-dbd79d5ea193***</p>
                 <!--Button: Login-->
-                <!--<button class="btn btn-outline-light btn-lg px-5" type="submit">Login</button>-->
-                {{ form.submit() }}
+                {{ form.submit(class="btn btn-outline-light btn-lg px-5") }}
               </div>
               <!--Redirect to Sign up Page-->
               <div>

app/templates/market.html

@@ -14,8 +14,8 @@
 <div class="container">
     <div class="row row-cols-4">
         {% for art in listings %}
-        <div class="card col-md-3 grid-item shadow p-3 mb-5 bg-white rounded"  type="button" onclick="window.location.href='{{ url_for('dashboards.modal_home')}}'">
-            <img class="market_each_bid_image_size" src="static/repository/{{art[4]}}">
+        <div class="card col-md-3 grid-item shadow p-3 mb-5 bg-white rounded">
+            <a href="detail"><img class="market_each_bid_image_size" src="static/repository/{{art[4]}}"></a>
             <div class="row" id="market_item_name_left">
                 <b>{{art[0]}}</b>
             </div>
@@ -28,11 +28,7 @@
                 <p id="market_item_text_right"><img src="static/Creator_Icon/" height=25 width=25>(Creator Icon)(Creator Name)</b>
             </div>
         </div>
-      {% endfor %}
+        {% endfor %}
     </div>
-  </div>
-
-
-{% block modal %}{% endblock %}
-{% block script %}{% endblock %}
+</div>
 {% endblock %}

app/templates/profile.html

@@ -25,17 +25,7 @@
                                     {{ form2.hidden_tag() }}
                                     {{ form2.upload() }}
                                     <br />
-                                    {{ form2.submit() }}
-                                    <!--<input
-                                        class="input-UploadProfile-Browse"
-                                        type="file" 
-                                        id="profile_image" 
-                                        name="profile_image" 
-                                        accept="image/png, image/jpeg" 
-                                        onchange="form.submit()" 
-                                        value="Upload"
-                                        src="http://example.com/path/to/image.png"
-                                        >-->
+                                    {{ form2.submit(class="btn btn-grey input-UploadProfile-Browse", accept="image/png, image/jpeg" ) }}
                                     <p>**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
                                     </form>
                                 </div>
@@ -52,7 +42,6 @@
                                             </div>
                                             <div class="col-sm-9 text-secondary">
                                                 {{ form.cpasswd() }}
-                                                <!--<input type="text" id="password" name="password"><br>-->
                                             </div>
                                         </div>
                                         <div class="row">
@@ -61,7 +50,6 @@
                                             </div>
                                             <div class="col-sm-9 text-secondary">
                                                 {{ form.passwd_1() }}
-                                                <!--<input type="text" id="password" name="password"><br>-->
                                             </div>
                                         </div>
                                     <div class="row">
@@ -70,13 +58,11 @@
                                         </div>
                                         <div class="col-sm-9 text-secondary">
                                             {{ form.passwd_2() }}
-                                            <!--<input type="text" id="password_confirm" name="password_confirm">-->
                                         </div>
                                     </div>
                                     <div class="row">
                                         <div class="col-sm-12">
-                                            {{ form.submit() }}
-                                            <!--<input type="submit" value="Submit" class="btn btn-grey update_password-form-btn"></a>-->
+                                            {{ form.submit(class="btn btn-grey update_password-form-btn") }}
                                         </div>
                                     </div>
                                     <hr class="hr_size">
@@ -115,8 +101,8 @@
                             <div class="tab-pane fade show active" id="art_by_me" role="tabpanel" aria-labelledby="art_by_me-tab">   
                                 <div class="row row-cols-3">
                                 {%for art in my_art%}
-                                    <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button" onclick="window.location.href='{{ url_for('dashboards.modal_profile')}}'">
-                                        <img class="image_bid_item_size" src="static/repository/{{art.dname}}">
+                                    <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button">
+                                        <a href="detail"><img class="image_bid_item_size" src="static/repository/{{art.dname}}"></a>
                                             <div class="row" id="market_item_name_left">
                                             <b>{{art.name}}</b>
                                             </div>
@@ -127,8 +113,8 @@
                             <div class="tab-pane fade" id="art_by_own" role="tabpanel" aria-labelledby="art_by_own-tab">.
                                 <div class="row row-cols-3">
                                     {%for art in my_creation%}
-                                    <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button" onclick="window.location.href='{{ url_for('dashboards.modal_profile')}}'">
-                                        <img class="image_bid_item_size" src="static/repository/{{art.dname}}">
+                                    <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button">
+                                        <a href="detail"><img class="image_bid_item_size" src="static/repository/{{art.dname}}"></a>
                                             <div class="row" id="market_item_name_left">
                                                 <b>{{art.name}}</b>
                                             </div>
@@ -164,7 +150,4 @@
         </div>
     </div>
 </div>
-
-{% block modal %}{% endblock %}
-{% block script %}{% endblock %}
 {% endblock %}

app/templates/register.html

@@ -15,58 +15,24 @@
                 <p class="text-white-50 mb-5">Create your Account</p>
                 <!--Input: Email-->
                 <div class="form-outline form-white mb-3">
-                  {{ form.email(placeholder="Email") }}
-                  <!--<label for="email_2"></label>
-                  <input 
-                    type="email" 
-                    class="form-control" 
-                    id="email"
-                    name="email"
-                    placeholder="Insert Email"
-                    />-->
+                  {{ form.email(placeholder="Email", class="form-control") }}
                 </div>
                 <!--Input: Username-->
                 <div class="form-outline form-white mb-3">
-                  {{ form.username(placeholder="Username") }}
-                  <!--<label for="Nickname"></label>
-                  <input 
-                    type="text" 
-                    class="form-control" 
-                    id="username"
-                    name="username"
-                    placeholder="Insert User Name"
-                    />-->
+                  {{ form.username(placeholder="Username", class="form-control") }}
                 </div>
                 <!--Input: Password-->
                 <div class="form-outline form-white mb-3">
-                  {{ form.passwd_1(placeholder="Password") }}
-                  <!--<label for="passwd_1"></label>
-                  <input 
-                    type="password" 
-                    class="form-control" 
-                    id="passwd_1"
-                    name="passwd_1"
-                    placeholder="Enter Password"
-                    />-->
+                  {{ form.passwd_1(placeholder="Password", class="form-control") }}
                   <p class="tips_8characters">*Use 8 or more characters</p>
                 </div>
                 <!--Input: Password Confirm-->
                 <div class="form-outline form-white mb-3">
-                  {{ form.passwd_2(placeholder="Confirm Password") }}
-                  <!--<label for="passwd_2"></label>
-                    <input 
-                      type="password" 
-                      class="form-control" 
-                      id="passwd_2"
-                      name="passwd_2"
-                      placeholder="Confirm Password"
-                      />-->
+                  {{ form.passwd_2(placeholder="Confirm Password", class="form-control") }}
                 </div>
-                <p>***(After Register): 1.Required Email Confirmation https://realpython.com/handling-email-confirmation-in-flask/*** </p>
                 <p>2. 2FA (Google Authenticator): https://github.com/GitauHarrison/how-to-implement-time-based-two-factor-auth-in-flask</p>
                 <!--Button: Sign up-->
-                {{ form.submit() }}
-                <!--<button class="btn btn-outline-light btn-lg px-5" type="submit">Sign up</button>-->
+                {{ form.submit(class="btn btn-outline-light btn-lg px-5") }}
               </div>
               <!--Redirect to Login Page-->
               <div>

app/templates/search.html

@@ -6,8 +6,8 @@
 <div class="container">
     <div class="row row-cols-4">
 
-        <div class="card col-md-3 grid-item shadow p-3 mb-5 bg-white rounded"  type="button" onclick="window.location.href='{{ url_for('dashboards.modal_search')}}'">
-            <img class="market_each_bid_image_size" src="static/repository/">
+        <div class="card col-md-3 grid-item shadow p-3 mb-5 bg-white rounded"  type="button">
+            <a href="detail"><img class="market_each_bid_image_size" src="static/repository/"></a>
             <div class="row" id="market_item_name_left">
                 <b></b>
             </div>