Build all front end v3

app/static/css/style.css

@@ -0,0 +1,236 @@
+/*--------------------------------------------------------------
+# Gobal for all pages
+--------------------------------------------------------------*/
+body {
+    padding-top: 100px;
+  }
+  @media (max-width: 979px) {
+    body {
+      padding-top: 0px;
+    }
+  }
+
+/*--------------------------------------------------------------
+# Market.html Top photo
+--------------------------------------------------------------*/
+#market_top {
+    width: 100%;
+    height: 80vh;
+    background: url("../repository/website_photo/market_top.png") top left;
+    background-size: cover;
+    position: relative;
+  }
+  #market_top:before {
+    content: "";
+    background: rgba(255, 255, 255, 0.7);
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  #market_top .container {
+    position: relative;
+  }
+  #market_top h1 {
+    margin: 0;
+    font-size: 48px;
+    font-weight: 700;
+    line-height: 56px;
+    color: #222222;
+    font-family: "Poppins", sans-serif;
+  }
+  #market_top h1 span {
+    color: #7d2ae8;
+  }
+
+  @media (min-width: 1024px) {
+    #market_top {
+      background-attachment: fixed;
+    }
+  }
+  @media (max-width: 768px) {
+    #market_top {
+      height: 100vh;
+    }
+  }
+
+  
+  
+/*--------------------------------------------------------------
+# Navbar
+--------------------------------------------------------------*/
+.navbar-nav-right {
+    top: 22px;
+    position: absolute;
+    right: 0px;
+    list-style-type: none;
+}
+.navbar-nav-middle {
+    position: absolute;
+    right: 400px;
+    list-style-type: none;
+}
+a {
+    font-size: 18px;
+}
+.navbar-nav > li{
+    padding-left:30px;
+}
+
+body {
+    font: 400 15px/1.8 "Lato", sans-serif;
+}
+.button-serach{
+    right: 100px;
+}
+/*--------------------------------------------------------------
+# Market.html Current bid & Creator & Gril System
+--------------------------------------------------------------*/
+#market_item_name_left {
+    font-size: 16px;
+    color: black;
+    left: 18px;
+    position: relative;
+}
+
+#market_item_text_left {
+    font-size: 14px;
+    color: grey;
+    left: 18px;
+    position: relative;
+}
+
+#market_item_text_right {
+    font-size: 14px;
+    color: grey;
+    position: absolute;
+    right: 18px;
+    list-style-type: none;
+}
+
+.grid-item {
+  margin-right: 95px;
+
+}
+
+.price-span {
+    color: #7d2ae8;
+    font-weight:bold;
+    font-size: 15px;
+  }
+/*--------------------------------------------------------------
+# detail_art_for_market.html bid table
+--------------------------------------------------------------*/
+.body-column {
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+}
+
+.input-submit {
+    margin-left: 236px;
+    margin-top:-69px;
+    -webkit-appearance: none;
+}
+
+/*--------------------------------------------------------------
+# create_art.html 
+--------------------------------------------------------------*/
+.container-create_art {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    padding: 15px;
+    background: #7d2ae8;
+}
+
+.wrap-create_art {
+    width: 1163px;
+    background: #fff;
+    border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 70px 50px 57px 118px;
+}
+
+.create_art-pic img {
+    max-width: 75%;
+    padding-top: 55px;
+}
+
+.contact100-form {
+    width: 390px;
+}
+
+.create_art-form-title {
+    display: block;
+    font-size: 24px;
+    color: #333333;
+    line-height: 1.2;
+    text-align: left;
+    padding-bottom: 36px;
+}
+
+input.create_art-input {
+    height: 50px;
+    border-radius: 25px;
+    padding: 0 30px 0 50px;
+}
+
+.description_size {
+    min-height: 150px;
+    border-radius: 25px;
+    padding: 14px 30px;
+}
+
+.create_art-input-box {
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    margin-bottom: 10px;
+}
+
+.create_art-input {
+    display: block;
+    width: 100%;
+    background: #e6e6e6;
+    font-family: Montserrat-Bold;
+    font-size: 15px;
+    line-height: 1.5;
+    color: #666666;
+}
+
+
+.create_art-form-btn {
+    width: 100%;
+    height: 50px;
+    border-radius: 25px;
+    background: #846add;
+    font-family: Montserrat-Bold;
+    font-size: 15px;
+    line-height: 1.5;
+    color: #fff;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 25px;
+
+    -webkit-transition: all 0.4s;
+    -o-transition: all 0.4s;
+    -moz-transition: all 0.4s;
+    transition: all 0.4s;
+}
+
+.body-column-create_art {
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+}

app/templates/base.html

@@ -6,86 +6,63 @@
         name="viewport" 
         content="width=device-width, initial-scale=1"
     >
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+    <!-- Boostrap CSS Localbase -->
+    <link rel="stylesheet" href="static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="static/css/style.css">
+    <!-- Boostrap JS Localbase -->
+    <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>
+    
     <title>
-        {% block title %}APP{% endblock %}
+        {% block title %}artFi{% endblock %}
     </title>
 
     <link 
         rel = "icon" 
-        href = "static/logo/hometag_logo.png" 
+        href = "static/repository/website_photo/web_icon.png" 
         type = "image/x-icon"
     >
 </head>
-
-<style>
-.navbar-nav-right {
-    position: absolute;
-    top: 2px;
-    right: 0px;
-    list-style-type: none;
-}
-.navbar-nav-middle {
-    position: absolute;
-    top: 5px;
-    right: 380px;
-    list-style-type: none;
-}
-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></a>      
+    <nav class="navbar fixed-top navbar-expand-sm bg-white navbar-dark">
+    <a class="navbar-brand" href="/"><img src="static/repository/website_photo/navbar_icon.png" alt="web_icon" id="logo" width="60"/></a></a>      
         <!-- Search Function for search Art-->
         <ul class="navbar-nav">
             {% if user.is_authenticated %} <!-- shows only if user is logged in -->
             <li class="nav-item">
-                <a class="nav-link" href="/">Market</a>
-                <a class="nav-link" href="/create_art">Create Art</a>
+                <a type="button" class="btn btn-light" href="/">Market</a>
+                <a type="button" class="btn btn-light" href="/create_art">Create Art</a>
             </li>
         </ul>
         <ul class="navbar-nav-right">
             <li class="nav-item">
-                <a href="/profile">Profile</a>
-                <a href="/logout"><img src="static/logo/logout_logo.gif" alt="logout_logo" id="logo" width="86"/></a>
+                <a type="button" class="btn btn-light" href="/profile">Profile</a>
+                <a type="button" class="btn btn-light" style="background-color: #8064A2" href="/logout">Logout</a>
             </li>
         </ul>
         {% else %}
             <li class="nav-item">
-                <a class="nav-link" href="/">Market</a>
+                <a type="button" class="btn btn-light" class="nav-link" href="/">Market</a>
             </li>
         </ul>
         <ul class="navbar-nav-right">
             <li class="nav-item">
-                <a href="/login">Login</a>
-                <a href="/register">Register</a>
+                <a type="button" class="btn btn-light"href="/register">Register</a>
+                <a type="button" class="btn btn-light" style="background-color: #8064A2" href="/login">Login</a>
             </li>
         </ul>
         {% endif %}
         </ul>
-        <form action="" method="POST" class="navbar-nav-middle">
-            <input 
-            type="search_art" 
-            class="form-control" 
-            id="search_art"
-            name="search_art"
-            placeholder="Seach Art"
-            />
-            <label for="search_art"></label>
+        <div class="input-group navbar-nav-middle" style="width:300px">
+            <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 -->
     {% with messages = get_flashed_messages(with_categories=true) %}
@@ -109,12 +86,8 @@ body {
         {% endfor %}
     {% endif %}
     {% endwith %}
-    <div class="container" style="position:relative; top:200px;"> <!-- added the style here for backend testing! -->
-        {% block content %}
-        {% endblock %}
-    </div>
-
-{% block modal %}{% endblock %}
-{% block script %}{% endblock %}
+    
+    {% block content %}
+    {% endblock %}
 </body>
 </html>

app/templates/create_art.html

@@ -2,70 +2,129 @@
 
 {% block content %}
 
-<form action="" method="POST" enctype="multipart/form-data">
-                <!--Input Art Name-->
-                <div>
-                  <input 
-                  type="art_name" 
-                  class="form-control" 
-                  id="art_name"
-                  name="art_name"
-                  placeholder="Enter art_name"
-                  />
-                  <label for="art_name"></label>
-                </div>
-                <!--Input Description-->
-                <div>
-                  <input 
-                  type="description" 
-                  class="form-control" 
-                  id="description"
-                  name="description"
-                  placeholder="Enter Description "
-                  />
-                  <label for="description"></label>
-                </div>
-                <!--Input Starting Price-->
-                <div>
-                    <input 
-                    type="minimum_price" 
-                    class="form-control" 
-                    id="minimum_price"
-                    name="minimum_price"
-                    placeholder="Enter Minimum Price "
-                    />
-                    <label for="minimum_price"></label>
-                </div> 
-                <!--Input Buyout Price-->
-                <div>
-                    <input 
-                    type="buyout_price" 
-                    class="form-control" 
-                    id="buyout_price"
-                    name="buyout_price"
-                    placeholder="Enter Buyout Price "
-                    />
-                    <label for="buyout_price"></label>
-                </div>
-                <!--Upload Art or choose what they bought before-->     
-                <input type="file" id="art_img" name="art_img" accept="image/jpg, image/png">
-                <select name="web_group" style="height:47px" required aria-invalid="false"> 
-                    <option value="cng-555">Select your own Art in our platform</option>
-                    <option name="web_group" value="bought_art">bought_Art</option>
-                </select>
-                <br>
-                <!--Choose Time for Auction ends (I will check how I can limit the user 14days)-->
-                <label for="closing_date">Auction end date:</label>
-                <input id="closing_date" type="date" name="closing_date">
-                <small>The maximum Auction time is 14 days</small>
-                <small>The exact time of closing is 0000 hrs of that date</small>
+<script>
+$(function(){
+  /* Set the Max date */
+  var dtToday = new Date();
 
-                <br>
-                <p>***Backend also save 1.Creator name, 2.creater the item date and time for showing on detail art page</p>
-                <p>*** For 1. Creator Name: If the user *Upload* Art = Creator and Owner will store the user nickname.</p>
-                <p>*** For 1. Creator Name: If the user *Select* Art = Creator will store the user nickname, Owner will grep in the database.</p>
+  var month = dtToday.getMonth() + 1;
+  var day = dtToday.getDate() + 7;
+  var year = dtToday.getFullYear();
 
-                <button type="submit">Create</button>
+  if(month < 10)
+      month = '0' + month.toString();
+  if(day < 10)
+      day = '0' + day.toString();
 
-</form>
+  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>
+      <img src="static/repository/website_photo/painting.jpg" alt="IMG">
+    </div>
+    <form action="" method="POST" enctype="multipart/form-data" class="contact100-form">
+      <span class="create_art-form-title">
+        <b>Create Art Auction</b>
+      </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"
+        />
+      </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)"
+        />
+      </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)"
+        />
+      </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>
+      </div>
+      <!--Upload Art or choose what they bought before-->
+      <hr style="border: 2px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
+      <div class="input-group">  
+        <div class="input-group-prepend">  
+          <span class="input-group-text"> File Upload </span>  
+        </div>  
+        <div class="custom-file">  
+          <input type="file" id="art_img" name="art_img" accept="image/jpg, image/png">  
+          <label class="custom-file-label"> Choose file </label>  
+        </div>  
+      </div>
+      <p class="body-column-create_art" style="margin-top: 10px; font-size: 20px;"><b>OR</b></p>
+      <!-- Dropdown Menu-->
+      <div class="row">
+        <div class="col input-group-prepend">  
+          <span class="input-group-text">Select Art in Platform</span>  
+          <select class="btn btn-secondary dropdown-toggle" name="web_group" style="height:47px; width:220px" required aria-invalid="false"> 
+            <option value="cng-555">Select here</option>
+            <option name="web_group" value="bought_art">bought_Art</option>
+          </select>
+        </div>
+      </div>
+      <hr style="border: 2px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
+      <!--Choose Time for Auction ends (I will check how I can limit the user 14days)-->
+      <div class="row">
+        <div class="col input-group-prepend">  
+          <span class="input-group-text" style="height:47px; width:175px">Auction End Date</span>
+          <input type="date" id="closing_date" name="closing_date" class="body-column-create_art" style="height:47px; width:220px">
+        </div>
+      </div>
+      <!-- Tips for the date to let user know-->
+      <div class="row" style="margin-left:2px">
+        <small>Tips:</small>
+      </div>
+      <div class="row" style="margin-left:25px">
+        <small>- The maximum Auction time is 14 days</small>
+      </div>
+      <div class="row" style="margin-left:25px">
+        <small>- The exact time of closing is 0000 hrs of that date</small>
+      </div>
+      <!-- Button for create Auction-->
+      <div class="container-create_art-form-btn">
+        <button class="create_art-form-btn">
+          Create
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
 {% endblock %}

app/templates/detail_art_for_market.html

@@ -1,67 +1,102 @@
 {% extends "market.html" %}
 
 {% 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 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-header">
-        <h5 class="modal-title" id="exampleModalLabel">Detail Art</h5>
-      </div>
-      <div class="modal-body">       
-        <p>Art Name</p>
-        <p>Art Image</p>
-        <p>Description</p>
-        <p>Current Bid Price</p>
-        <p>Buyout Price</p>
-        <p>Starting Bid Price</p>
-        <p>Bid History: Bidder Name and time(order by desc)</p>
-        <table>
+      <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" 
+                      id="bidding_price"
+                      name="bidding_price"
+                      placeholder="Enter Bidding Price"
+                      style="max-width: 15rem"
+                      />
+                      <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>
+              <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>
+              <td>SpongeBob SquarePants</td>
+              <td>2022-4-2 10:00:00</td>
+              <td>100</td>
             </tr>
-        </table>
-        <p>Who Created</p>
-        <p>Auction ends in time</p>
-        <p>Art Owner</p>
+          </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>
-        <form method="POST">
-            <input 
-            type="bidding_price" 
-            class="form-control" 
-            id="bidding_price"
-            name="bidding_price"
-            placeholder="Enter Bidding Price"
-            />
-            <label for="Bidding Price"></label>
-            <p>At the backend needs to record the bidder nickname and time. And the record will be showing at the bid history table</p>
-            <button type="button" class="btn btn-primary">Bid</button>
-            <a href="{{url_for('dashboards.market')}}">Close</a>
-        </div>
-      </div>
-      <div class="modal-footer">
+        <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,66 +1,86 @@
 {% extends "profile.html" %}
 
 {% 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 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-header">
-        <h5 class="modal-title" id="exampleModalLabel">Detail Art</h5>
-      </div>
-      <div class="modal-body">       
-        <p>Art Name</p>
-        <p>Art Image</p>
-        <p>Description</p>
-        <p>Current Bid Price</p>
-        <p>Buyout Price</p>
-        <p>Starting Bid Price</p>
-        <p>Bid History: Bidder Name and time(order by desc)</p>
-        <table>
+      <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>
+              <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>
+              <td>SpongeBob SquarePants</td>
+              <td>2022-4-2 10:00:00</td>
+              <td>100</td>
             </tr>
-        </table>
-        <p>Who Created</p>
-        <p>Auction ends in time</p>
-        <p>Art Owner</p>
+          </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>
-        <form method="POST">
-            <input 
-            type="bidding_price" 
-            class="form-control" 
-            id="bidding_price"
-            name="bidding_price"
-            placeholder="Enter Bidding Price"
-            />
-            <label for="Bidding Price"></label>
-            <p>At the backend needs to record the bidder nickname and time. And the record will be showing at the bid history table</p>
-            <a href="{{url_for('dashboards.profile')}}">Close</a>
-        </div>
-      </div>
-      <div class="modal-footer">
+        <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/login.html

@@ -1,12 +1,6 @@
 {% extends "base.html" %}
 
 {% block content %}
-<style>
-    body {
-      background: #e7f5fe;
-      padding-top: 0px;
-    }
-</style>
 
 <form method="POST">
   <section class="vh-100 gradient-custom">
@@ -41,7 +35,7 @@
                   <label for="passwd_login"></label>
                 </div>
                 <p>***(reCAPTCHA): https://python.plainenglish.io/how-to-use-google-recaptcha-with-flask-dbd79d5ea193***</p>
-            <!--Button: Login-->
+                <!--Button: Login-->
                 <button class="btn btn-outline-light btn-lg px-5" type="submit">Login</button>
               </div>
               <!--Redirect to Sign up Page-->

app/templates/market.html

@@ -1,18 +1,37 @@
 {% extends "base.html" %}
 
 {% block content %}
-<br><br><br><br><br>
-<h1>Art Market</h1>
 
-<p>Auction for all Art</p>
-{% for art in listings %}
-<p>{{art[0]}}</p>
-<img src="static/repository/{{art[4]}}">
-<p>2. Art Image (Click the photo will go to pop up detail art page)</p>
-<p>3. Art current bid price</p>
-{% endfor %}
+<section id="market_top" class="d-flex align-items-center">
+<div class="container" data-aos="zoom-out" data-aos-delay="100">
+    <h1>Welcome to <span>artFi</span></h1>
+    <h2> You can bid anything you like here! </h2>
+    <h2> If you like it. Just Click It! </h2>
+</div>
+</section>
+
+<br>
+<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 style="width:250px; height:250px;" src="static/repository/{{art[4]}}">
+            <div class="row" id="market_item_name_left">
+                <b>{{art[0]}}</b>
+            </div>
+            <div class="row">
+                <p id="market_item_text_left">Current Bid</b>
+                <p id="market_item_text_right">(Price) <span class="price-span">USD</span></b>
+            </div>
+            <div class="row">
+                <p id="market_item_text_left">Creator</b>
+                <p id="market_item_text_right"><img src="static/Creator_Icon/" height=25 width=25>(Creator Icon)(Creator Name)</b>
+            </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
 
-<a href="{{url_for('dashboards.modal_home')}}">Popup</a>
 
 {% block modal %}{% endblock %}
 {% block script %}{% endblock %}

app/templates/profile.html

@@ -1,93 +1,159 @@
 {% extends "base.html" %}
 
 {% block content %}
-<style>
-table, th, td {
-    border: 1px solid black;
-}
-</style>
-
-<!--Change Password-->
-<form method="POST">
-    <div class="card-body">
-        <p><b>Change Password</b></p><br>
-    <hr style="border: 1px solid rgb(177, 176, 176);"/>
-        <div class="row">
-            <div class="col-sm-3" style='position:relative; left:20px'>
-            <h6 class="mb-0"><label for="current_password">Current Password</label></h6><br>
-            </div>
-            <div class="col-sm-9 text-secondary">
-                <input type="password" id="current_password" name="current_password"><br>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-3" style='position:relative; left:20px'>
-            <h6 class="mb-0"><label for="password">Password</label></h6><br>
-            </div>
-            <div class="col-sm-9 text-secondary">
-                <input type="password" id="password" name="password"><br>
-            </div>
-        </div>
+<div class="mx-auto text-center">
+    <!------  Profile Information ---------->
+    <div class="container">
         <div class="row">
-            <div class="col-sm-3" style='position:relative; left:20px'>
-            <h6 class="mb-0"><label for="password_confirm">Password<br>(Confirm)</label></h6><br>
+            <div class="col-md-4">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="d-flex flex-column align-items-center text-center">
+                            {% if user.profile_image %}
+                            <img src="static/uploads/{{ user.profile_image }}" style="width:150px">
+                            {% else %}
+                            <img src="static/repository/website_photo/defaultprofileimg.png" style="width:150px">
+                            {% endif %}
+                            <div class="mt-3">
+                                <h4>{{ user.username }}</h4>
+                                <p class="text-secondary mb-1">{{ user.email }}</p>
+                                <hr>
+                            <!------  Upload Profile Image ---------->
+                                <div class="mt-3">
+                                    <p><b>Upload Profile Image</b></p> 
+                                    <form action="" method="POST" enctype="multipart/form-data">
+                                    <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"
+                                    >
+                                    <p>**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
+                                    </form>
+                                </div>
+                            </div>
+                            <!------  Change Password ---------->
+                            <form method="POST">
+                                <div class="card-body">
+                                    <hr style="border: 3px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
+                                    <p><b>Change Password</b></p><br>
+                                        <div class="row">
+                                            <div class="col-sm-3" style='position:relative; left:20px'>
+                                                <h6 class="mb-0"><label for="password">Password</label></h6><br>
+                                            </div>
+                                            <div class="col-sm-9 text-secondary">
+                                                <input type="text" id="password" name="password"><br>
+                                            </div>
+                                        </div>
+                                    <div class="row">
+                                        <div class="col-sm-3" style='position:relative; left:20px'>
+                                            <h6 class="mb-0"><label for="password_confirm">Password<br>(Confirm)</label></h6><br>
+                                        </div>
+                                        <div class="col-sm-9 text-secondary">
+                                            <input type="text" id="password_confirm" name="password_confirm">
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-12">
+                                            <input type="submit" value="Submit" class="btn btn-info"></a>
+                                        </div>
+                                    </div>
+                                    <hr style="border: 3px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
+                                    <p><b>Security(Show 2FA and Email Confirmation. If the user turns on it, it will show a green tick. If not, it will show a red tick.)</b></p><br>
+                                    <div class="row">
+                                        <div class="col">
+                                            <h6 class="mb-0">
+                                                <img src="static/repository/website_photo/tick_logo.jpg" alt="enable_logo" id="logo" width="12"/>
+                                                <img src="static/repository/website_photo/cross_logo.jpg" alt="disable_logo" id="logo" width="12"/>
+                                                <label for="Email_Verification">Email Address Verification</label>
+                                            </h6>
+                                            <br>
+                                            <h6 class="mb-0">
+                                                <img src="static/repository/website_photo/tick_logo.jpg" alt="enable_logo" id="logo" width="12"/>
+                                                <img src="static/repository/website_photo/cross_logo.jpg" alt="disable_logo" id="logo" width="12"/>
+                                                <label for="2FA">Two-Factor Authentication (2FA)</label>
+                                            </h6>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="col-sm-9 text-secondary">
-                <input type="password" id="password_confirm" name="password_confirm">
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-12">
-                <input type="submit" value="Submit" class="btn btn-info"></a>
+            <!------  List of bookmarks you have created ---------->
+            <div class="col">
+                <div class="card">
+                    <div class="container">
+                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" id="art_by_me-tab" data-toggle="tab" href="#art_by_me" role="tab" aria-controls="art_by_me" aria-selected="true">Art By Me</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" id="art_by_own-tab" data-toggle="tab" href="#art_by_own" role="tab" aria-controls="art_by_own" aria-selected="false">Art By Own</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" id="bidding_record-tab" data-toggle="tab" href="#bidding_record" role="tab" aria-controls="bidding_record" aria-selected="false">Bidding Record</a>
+                            </li>
+                        </ul>
+                        <div class="tab-content" id="myTabContent">
+                            <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 style="width:200px; height:200px;" src="static/repository/{{art.dname}}">
+                                            <div class="row" id="market_item_name_left">
+                                            <b>{{art.name}}</b>
+                                            </div>
+                                    </div>
+                                {% endfor %}
+                                </div>
+                            </div>
+                            <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 style="width:200px; height:200px;" src="static/repository/{{art.dname}}">
+                                            <div class="row" id="market_item_name_left">
+                                                <b>{{art.name}}</b>
+                                            </div>
+                                    </div>
+                                  {% endfor %}
+                                </div>
+                            </div>
+                            <div class="tab-pane fade" id="bidding_record" role="tabpanel" aria-labelledby="bidding_record-tab">
+                                <table class="table">
+                                    <thead class="thead-dark">
+                                        <tr>
+                                        <th>Bidding Art Item Name</th>
+                                        <th>Bidding Time(Order by DESC)</th>
+                                        <th>Bidding Price</th>
+                                        </tr>
+                                    </thead>
+                                    <tr>
+                                        <td>The Krusty Krab</td>
+                                        <td>2022-4-3 15:30:00</td>
+                                        <td>150</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Chum Bucket</td>
+                                        <td>2022-4-2 10:00:00</td>
+                                        <td>100</td>
+                                    </tr>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-</form>
-
-<h1>Show 2FA and Email Confirmation. If the user turns on it, it will show a green tick. If not, it will show a red tick.</h1>
-<p>At here, you may just use 1 to show green tick, 2 to show red tick. I will styling after building front-end</p>
-<p>2FA: 1 </p>
-<p>Email Confirmation: 1 </p>
-
-<hr>
-<h1>Show user information</h1>
-<p>{{user.email}}</p>
-<p>{{user.username}}</p>
-<hr>
-<p>Art I Own</p>
-{%for art in my_art%}
-<p>{{art.name}}</p>
-<img src="static/repository/{{art.dname}}">
-<p>2. Art Image(Click the photo will go to pop up detail art page)</p>
-{%endfor%}
-<hr>
-{%for art in my_creation%}
-<p>Art by Me</p>
-<p>{{art.name}}</p>
-<img src="static/repository/{{art.dname}}">
-<p>2. Art Image(Click the photo will go to pop up detail art page)</p>
-{%endfor%}
-<a href="{{url_for('dashboards.modal_profile')}}">Popup</a>
+</div>
 
 {% block modal %}{% endblock %}
 {% block script %}{% endblock %}
-<hr>
-<p>Show the user bidding record</p>
-<table>
-    <tr>
-      <th>Bidding Art Item Name</th>
-      <th>Bidding Time(Order by DESC)</th>
-      <th>Bidding Price</th>
-    </tr>
-    <tr>
-        <td>The Krusty Krab</td>
-        <td>2022-4-3 15:30:00</td>
-        <td>150</td>
-    </tr>
-    <tr>
-        <td>Chum Bucket</td>
-        <td>2022-4-2 10:00:00</td>
-        <td>100</td>
-     </tr>
-  </table>
 {% endblock %}

app/templates/register.html

@@ -1,13 +1,6 @@
 {% extends "base.html" %}
 
 {% block content %}
-<style>
-body {
-  background: #e7f5fe;
-  padding-top: 0px;
-}
-
-</style>
 
 <form method="POST">
   <section class="vh-100 gradient-custom">