Front-end_Improve_V3

app/static/css/style.css

@@ -9,6 +9,11 @@ body {
       padding-top: 0px;
     }
   }
+
+  #openPopup:focus {
+    outline: none;
+}
+
 /*--------------------------------------------------------------
 # Market.html Top photo
 --------------------------------------------------------------*/
@@ -63,6 +68,7 @@ body {
 .market_each_bid_image_size {
   width:250px;
   height:250px;
+  margin-left: -12px;
 }
   
 /*--------------------------------------------------------------
@@ -143,7 +149,7 @@ body {
     font-size: 15px;
   }
 /*--------------------------------------------------------------
-# detail_art_for_market.html bid table
+# detail_art.html bid table
 --------------------------------------------------------------*/
 .body-column {
     font-family: 'Roboto', sans-serif;
@@ -156,6 +162,29 @@ body {
     -webkit-appearance: none;
 }
 
+.alert-banner-row {
+	background-color: #6699CC;
+    background-image: linear-gradient(to bottom right, #b19cd9, #7d2ae8);
+	border-radius: 1rem;
+	color: #fff;
+	overflow: hidden;
+}
+
+.center {
+  text-align: center;
+}
+
+.body-column_banner {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  font-family: 'Roboto', sans-serif;
+  margin-left: 500px;
+  font-size: 38px;
+}
+
+.bidding_price_size {
+  max-width: 15rem
+}
 /*--------------------------------------------------------------
 # create_art.html 
 --------------------------------------------------------------*/
@@ -178,21 +207,12 @@ body {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    padding: 70px 50px 57px 118px;
-}
-
-.create_art-pic img {
-    width: 480px;
-    padding-top: 100px;
-}
-
-.contact100-form {
-    width: 390px;
+    padding: 70px 50px 57px 350px;
 }
 
 .create_art-form-title {
     display: block;
-    font-size: 24px;
+    font-size: 26px;
     color: #333333;
     line-height: 1.2;
     text-align: left;
@@ -213,14 +233,14 @@ input.create_art-input {
 
 .create_art-input-box {
     position: relative;
-    width: 100%;
+    width: 570px;
     z-index: 1;
     margin-bottom: 10px;
 }
 
 .create_art-input {
     display: block;
-    width: 100%;
+    width: 80%;
     background: #e6e6e6;
     font-family: Montserrat-Bold;
     font-size: 15px;
@@ -230,7 +250,7 @@ input.create_art-input {
 
 
 .create_art-form-btn {
-    width: 100%;
+    width: 80%;
     height: 50px;
     border-radius: 25px;
     background: #846add;
@@ -259,16 +279,18 @@ input.create_art-input {
 
 .upload_Create_art {
   position:transparent;
+  width:350px;
 }
 
 .upload_Create_art_position {
-  margin-left:100px;
+  margin-left:140px;
 }
 
 .hr_size{
   border: 2px solid rgb(177, 176, 176);
-  width:327px;
+  width:350px;
   border-radius: 5px;
+  margin-left:50px;
 }
 .Choose-Time-for-Auction-ends {
   height:47px; 
@@ -277,7 +299,7 @@ input.create_art-input {
 
 .Closing-date-input-size {
   height:47px; 
-  width:220px;
+  width:280px;
 }
 
 .tips_location {
@@ -287,6 +309,7 @@ input.create_art-input {
 .word_OR_location {
   margin-top: 10px;
   font-size: 20px;
+  margin-right:140px;
 }
 /*--------------------------------------------------------------
 # profile.html 
@@ -329,6 +352,7 @@ input.create_art-input {
 .image_bid_item_size {
   width:200px; 
   height:200px;
+  margin-left: -14px;
 }
 
 .user_profile_image_size {
@@ -337,7 +361,7 @@ input.create_art-input {
 
 .change_password_location {
   position:relative;
-  left:20px;
+  left:40px;
 }
 /*--------------------------------------------------------------
 # base.html
@@ -350,13 +374,6 @@ input.create_art-input {
   z-index: 2;
 }
 
-/*--------------------------------------------------------------
-# all detail_*.html
---------------------------------------------------------------*/
-.bidding_price_size {
-  max-width: 15rem
-}
-
 /*--------------------------------------------------------------
 # login & Register .html
 --------------------------------------------------------------*/

app/templates/base.html

@@ -35,6 +35,7 @@
             <li class="nav-item">
                 <a type="button" class="btn btn-light a-font" href="/">Market</a>
                 <a type="button" class="btn btn-light a-font" href="/create_art">Create Art</a>
+                <a type="button" class="btn btn-light a-font" href="/hash">Hash</a>
             </li>
         </ul>
         <ul class="navbar-nav-right">
@@ -46,6 +47,7 @@
         {% else %}
             <li class="nav-item">
                 <a type="button" class="btn btn-light a-font" class="nav-link" href="/">Market</a>
+                <a type="button" class="btn btn-light a-font" href="/hash">Hash</a>
             </li>
         </ul>
         <ul class="navbar-nav-right">

app/templates/create_art.html

@@ -3,9 +3,6 @@
 {% block content %}
 <div class="container-create_art">
   <div class="wrap-create_art">
-    <div class="create_art-pic" data-tilt>
-      <img src="static/templates/painting.jpg" alt="IMG">
-    </div>
     <form action="" method="POST" enctype="multipart/form-data" class="contact100-form">
       {{ form.hidden_tag() }}
       <span class="create_art-form-title">
@@ -34,8 +31,8 @@
           <label class="input-group-text">File upload</label>
             {{ form.upload(class="upload_Create_art input-group-text", accept="image/png, image/jpeg, image/jpg", required=False) }}
         </div>
-        <p class="upload_Create_art_position">**<b>PNGs</b> and <b>JPEGs</b> Only**</p>
       </div>
+      <p class="upload_Create_art_position">**<b>PNGs</b> and <b>JPEGs</b> Only**</p>
       <p class="body-column-create_art word_OR_location"><b>OR</b></p>
       <!-- Dropdown Menu-->
       <div class="row">

app/templates/detail_art.html

@@ -2,6 +2,11 @@
 
 {% block content %}
 <div class="container">
+  <div class="container mt-3">
+    <div class="row alert-banner-row">
+      <h3 class="center body-column_banner">Auction</h3>
+    </div>
+</div>
   <!-- Product section-->
   <section class="py-5">
     <div class="container px-4 px-lg-5 my-5">
@@ -26,17 +31,8 @@
             <div class="d-flex">
               <form method="POST">
                 {{ form.hidden_tag() }}
-                {{ form.price(placeholder="Your Starting Bid Price") }}
-                {{ form.submit() }}
-                <!--<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>-->
+                {{ form.price(placeholder="Your Starting Bid Price", class="form-control text-center me-3 bidding_price_size" ) }}
+                {{ form.submit(class="btn btn-dark flex-shrink-0 input-submit") }}
               </form>
             </div>
           </div>
@@ -48,7 +44,7 @@
   <div class="row">
     <div class="col body-column">
       <br>
-      <h3>Bid History(order by desc)</h3>
+      <h3>Bid History</h3>
     </div>
   </div>
   <!-- Bid Table-->

app/templates/hash.html

@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<div class="col">
+    <div class="card">
+        <div class="container">
+            <ul class="nav nav-pills mb-3 nav-tabs" id="pills-tab" role="tablist">
+                <li class="nav-item">
+                    <a class="nav-link active" id="block-hash-tab" data-toggle="tab" href="#block-hash" role="tab" aria-controls="block-hash" aria-selected="true">Block Hash</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" id="file-hash-tab" data-toggle="tab" href="#file-hash" role="tab" aria-controls="file-hash" aria-selected="false">File Hash</a>
+                </li>
+            </ul>
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade show active" id="block-hash" role="tabpanel" aria-labelledby="block-hash-tab">   
+                    <table class="table">
+                        <thead class="thead-colour">
+                            <tr>
+                            <th>Date Time</th>
+                            <th>Hash</th>
+                            </tr>
+                        </thead>
+                        <tr>
+                            <td>(Date Time)</td>
+                            <td>(Hash)</td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="tab-pane fade" id="file-hash" role="tabpanel" aria-labelledby="file-hash-tab">
+                    <table class="table">
+                        <thead class="thead-colour">
+                            <tr>
+                            <th>Date Time</th>
+                            <th>Hash</th>
+                            </tr>
+                        </thead>
+                        <tr>
+                            <td>(Date Time)</td>
+                            <td>(Hash)</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

app/templates/market.html

@@ -17,18 +17,18 @@
         <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[5]}}"></a>-->
             <form method="POST">
-            <button name="focus_but" type="submit" value="{{art[11]}}"><img class="market_each_bid_image_size" src="static/repository/{{art[5]}}"></button>
+            <button name="focus_but" type="submit" class="btn btn-link" value="{{art[11]}}"><img class="market_each_bid_image_size" src="static/repository/{{art[5]}}"></button>
             </form>
             <div class="row" id="market_item_name_left">
                 <b>{{art[0]}}</b>
             </div>
             <div class="row">
-                <p id="market_item_text_left">Current Bid {{art[12]}}</b>
-                <p id="market_item_text_right">(Price) <span class="price-span">USD</span></b>
+                <p id="market_item_text_left">Current Bid {{art[12]}}</p>
+                <p id="market_item_text_right">(Price) <span class="price-span">USD</span></p>
             </div>
             <div class="row">
-                <p id="market_item_text_left">Creator</b>
-            <p id="market_item_text_right"><img src="static/uploads/{{art[4]}}" height=25 width=25>{{art[3]}}</b>
+                <p id="market_item_text_left">Creator</p>
+            <p id="market_item_text_right"><img src="static/uploads/{{art[4]}}" height=25 width=25>{{art[3]}}</p>
             </div>
         </div>
         {% endfor %}

app/templates/profile.html

@@ -37,24 +37,24 @@
                                     <hr class="hr_size">
                                     <p><b>Change Password</b></p><br>
                                         <div class="row">
-                                            <div class="col-sm-3" class="change_password_location">
-                                                <h6 class="mb-0"><label for="password">Current Password</label></h6><br>
+                                            <div class="col-sm-3">
+                                                <h6 class="mb-0 change_password_location"><label for="password">Current Password</label></h6><br>
                                             </div>
                                             <div class="col-sm-9 text-secondary">
                                                 {{ form.cpasswd() }}
                                             </div>
                                         </div>
                                         <div class="row">
-                                            <div class="col-sm-3" class="change_password_location">
-                                                <h6 class="mb-0"><label for="password">New Password</label></h6><br>
+                                            <div class="col-sm-3">
+                                                <h6 class="mb-0 change_password_location" ><label for="password">New Password</label></h6><br>
                                             </div>
                                             <div class="col-sm-9 text-secondary">
                                                 {{ form.passwd_1() }}
                                             </div>
                                         </div>
                                     <div class="row">
-                                        <div class="col-sm-3" class="change_password_location">
-                                            <h6 class="mb-0"><label for="password_confirm">Password<br>(Confirm)</label></h6><br>
+                                        <div class="col-sm-3">
+                                            <h6 class="mb-0 change_password_location"><label for="password_confirm">Password<br>(Confirm)</label></h6><br>
                                         </div>
                                         <div class="col-sm-9 text-secondary">
                                             {{ form.passwd_2() }}
@@ -82,7 +82,7 @@
                     </div>
                 </div>
             </div>
-            <!------  List of bookmarks you have created ---------->
+            <!------  List Art By Me/ Own /Bidding Record ---------->
             <div class="col">
                 <div class="card">
                     <div class="container">
@@ -91,10 +91,10 @@
                                 <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>
+                                <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 I 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>
+                                <a class="nav-link" id="bidding_record-tab" data-toggle="tab" href="#bidding_record" role="tab" aria-controls="bidding_record" aria-selected="false">My Current Bids</a>
                             </li>
                         </ul>
                         <div class="tab-content" id="myTabContent">
@@ -104,7 +104,7 @@
                                     <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button">
                                         <form method="POST">
                                             <!--<a href="detail"></a>-->
-                                            <button name="focus_but" type="submit" value="{{art.filehash}}"><img class="image_bid_item_size" src="static/repository/{{art.dname}}"></button>
+                                            <button name="focus_but" type="submit" class="btn btn-link" value="{{art.filehash}}"><img class="image_bid_item_size" src="static/repository/{{art.dname}}"></button>
                                         </form>
                                             <div class="row" id="market_item_name_left">
                                             <b>{{art.name}}</b>
@@ -119,7 +119,7 @@
                                     <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button">
                                         <form method="POST">
                                             <!--<a href="detail"></a>-->
-                                            <button name="focus_but" type="submit" value="{{art.filehash}}"><img class="image_bid_item_size" src="static/repository/{{art.dname}}"></button>
+                                            <button name="focus_but" type="submit" class="btn btn-link" value="{{art.filehash}}"><img class="image_bid_item_size" src="static/repository/{{art.dname}}"></button>
                                         </form>
                                             <div class="row" id="market_item_name_left">
                                                 <b>{{art.name}}</b>