Acasă Explorează Ajutor
Autentificare
control
/
artFi
2
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

Merge branch 'Improve_Front_End_V2' into 'master'

Improve_Front_End_V2

See merge request control/artfi!12
control 3 ani în urmă
părinte
9f664efe03 d8e8017f03
comite
b62de5dc84
19 a modificat fișierele cu 246 adăugiri și 48 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 5 0
      app/dashboards.py
  2. BIN
      app/database.db
  3. 72 12
      app/static/css/style.css
  4. BIN
      app/static/repository/pTXxc8nsR2HTQPQ1.jpg
  5. BIN
      app/static/templates/cross_logo.jpg
  6. BIN
      app/static/templates/defaultprofileimg.png
  7. BIN
      app/static/templates/market_top.gif
  8. BIN
      app/static/templates/market_top.png
  9. BIN
      app/static/templates/navbar_icon.png
  10. BIN
      app/static/templates/painting.jpg
  11. BIN
      app/static/templates/tick_logo.jpg
  12. BIN
      app/static/templates/web_icon.png
  13. 9 9
      app/templates/base.html
  14. 18 11
      app/templates/create_art.html
  15. 102 0
      app/templates/detail_art_for_search.html
  16. 1 1
      app/templates/login.html
  17. 7 13
      app/templates/profile.html
  18. 2 2
      app/templates/register.html
  19. 30 0
      app/templates/search.html

+ 5 - 0
app/dashboards.py
Vizualizați fișierul 

@@ -80,3 +80,8 @@ def modal_home():
 
 @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)

BIN
app/database.db
Vizualizați fișierul


+ 72 - 12
app/static/css/style.css
Vizualizați fișierul 

@@ -9,20 +9,19 @@ 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: url("../templates/market_top.gif") top left;
 
     background-size: cover;
 
     position: relative;
 
   }
 
   #market_top:before {
 
     content: "";
 
-    background: rgba(255, 255, 255, 0.7);
 
+    background: rgba(255, 255, 255, 0.408);
 
     position: absolute;
 
     bottom: 0;
 
     top: 0;
 
@@ -37,11 +36,17 @@ body {
 
     font-size: 48px;
 
     font-weight: 700;
 
     line-height: 56px;
 
-    color: #222222;
 
+    color: white;
 
     font-family: "Poppins", sans-serif;
 
   }
 
   #market_top h1 span {
 
     color: #7d2ae8;
 
+    -webkit-text-stroke: 0.3px white;
 
+    font-size: 60px;
 
+  }
 
+  #market_top h2{
 
+    color: white;
 
+    font-family: "Poppins", sans-serif;
 
   }
 
 
   @media (min-width: 1024px) {
 
@@ -71,9 +76,20 @@ body {
 
     right: 400px;
 
     list-style-type: none;
 
 }
 
-a {
 
-    font-size: 18px;
 
+.a-font {
 
+    font-size: 20px;
 
+    font-weight:bold;
 
+    background-color: #846add;;
 
+    color: white;
 
+}
 
+
 
+.a-logout {
 
+  font-size: 20px;
 
+  font-weight:bold;
 
+  background-color: #856add54;;
 
+  color: white;
 
 }
 
+
 
 .navbar-nav > li{
 
     padding-left:30px;
 
 }
 
@@ -84,6 +100,7 @@ body {
 
 .button-serach{
 
     right: 100px;
 
 }
 
+
 
 /*--------------------------------------------------------------
 
 # Market.html Current bid & Creator & Gril System
 
 --------------------------------------------------------------*/
 
@@ -144,7 +161,7 @@ body {
 
     justify-content: center;
 
     align-items: center;
 
     padding: 15px;
 
-    background: #7d2ae8;
 
+    background: #7c2ae8b7;
 
 }
 
 
 .wrap-create_art {
 
@@ -159,8 +176,8 @@ body {
 
 }
 
 
 .create_art-pic img {
 
-    max-width: 75%;
 
-    padding-top: 55px;
 
+    width: 480px;
 
+    padding-top: 100px;
 
 }
 
 
 .contact100-form {
 
@@ -211,8 +228,7 @@ input.create_art-input {
 
     height: 50px;
 
     border-radius: 25px;
 
     background: #846add;
 
-    font-family: Montserrat-Bold;
 
-    font-size: 15px;
 
+    font-size: 20px;
 
     line-height: 1.5;
 
     color: #fff;
 
     display: -webkit-box;
 
@@ -233,4 +249,48 @@ input.create_art-input {
 
 .body-column-create_art {
 
     font-family: 'Roboto', sans-serif;
 
     text-align: center;
 
-}
 
+}
 
+
 
+.upload_Create_art {
 
+  position:transparent;
 
+}
 
+
 
+.upload_Create_art_position {
 
+  margin-left:100px;
 
+}
 
+/*--------------------------------------------------------------
 
+# profile.html 
+--------------------------------------------------------------*/
 
+
 
+.input-UploadProfile-Browse {
 
+  width: 80px;
 
+  color:transparent;
 
+}
 
+
 
+.update_password-form-btn {
 
+  background: #846add;
 
+  line-height: 1.5;
 
+  color: #fff;
 
+}
 
+
 
+.nav-tabs .nav-item .nav-link {
 
+  background-color: white;
 
+  color: #846add;
 
+  font-weight:bold;
 
+}
 
+
 
+.nav-tabs .nav-item .nav-link.active {
 
+  color: white;
 
+  background: #846add;
 
+}
 
+
 
+.tab-content {
 
+  border: 1px solid #dee2e6;
 
+  border-top: transparent;
 
+  padding: 15px;
 
+}
 
+
 
+.thead-colour {
 
+  color: white;
 
+  background: #846add;
 
+}

BIN
app/static/repository/pTXxc8nsR2HTQPQ1.jpg
Vizualizați fișierul


BIN
app/static/templates/cross_logo.jpg
Vizualizați fișierul


BIN
app/static/templates/defaultprofileimg.png
Vizualizați fișierul


BIN
app/static/templates/market_top.gif
Vizualizați fișierul


BIN
app/static/templates/market_top.png
Vizualizați fișierul


BIN
app/static/templates/navbar_icon.png
Vizualizați fișierul


BIN
app/static/templates/painting.jpg
Vizualizați fișierul


BIN
app/static/templates/tick_logo.jpg
Vizualizați fișierul


BIN
app/static/templates/web_icon.png
Vizualizați fișierul


+ 9 - 9
app/templates/base.html
Vizualizați fișierul 

@@ -20,37 +20,37 @@
 
 
     <link 
         rel = "icon" 
-        href = "static/repository/website_photo/web_icon.png" 
+        href = "static/templates/web_icon.png" 
         type = "image/x-icon"
 
     >
 
 </head>
 
     
 <body>
 
     <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>      
+    <a class="navbar-brand" href="/"><img src="static/templates/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 type="button" class="btn btn-light" href="/">Market</a>
 
-                <a type="button" class="btn btn-light" href="/create_art">Create Art</a>
 
+                <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>
 
             </li>
 
         </ul>
 
         <ul class="navbar-nav-right">
 
             <li class="nav-item">
 
-                <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>
 
+                <a type="button" class="btn btn-light a-font" href="/profile">Profile</a>
 
+                <a type="button" class="btn btn-light a-font" style="background-color: #8064a2bd" href="/logout">Logout</a>
 
             </li>
 
         </ul>
 
         {% else %}
 
             <li class="nav-item">
 
-                <a type="button" class="btn btn-light" class="nav-link" href="/">Market</a>
 
+                <a type="button" class="btn btn-light a-font" class="nav-link" href="/">Market</a>
 
             </li>
 
         </ul>
 
         <ul class="navbar-nav-right">
 
             <li class="nav-item">
 
-                <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>
 
+                <a type="button" class="btn btn-light a-font" style="background-color: #8064a2bd" href="/register">Register</a>
 
+                <a type="button" class="btn btn-light a-font" style="background-color: #8064a2bd" href="/login">Login</a>
 
             </li>
 
         </ul>
 
         {% endif %}

+ 18 - 11
app/templates/create_art.html
Vizualizați fișierul 

@@ -8,7 +8,7 @@ $(function(){
 
   var dtToday = new Date();
 
 
   var month = dtToday.getMonth() + 1;
 
-  var day = dtToday.getDate() + 7;
 
+  var day = dtToday.getDate() + 14;
 
   var year = dtToday.getFullYear();
 
 
   if(month < 10)
 
@@ -34,11 +34,12 @@ $(function(){
 
   $('#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">
 
+      <img src="static/templates/painting.jpg" alt="IMG">
 
     </div>
 
     <form action="" method="POST" enctype="multipart/form-data" class="contact100-form">
 
       <span class="create_art-form-title">
 
@@ -80,14 +81,20 @@ $(function(){
 
       </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 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"
 
+            >
 
+        </div>
 
+        <p class="upload_Create_art_position">**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
 
       </div>
 
       <p class="body-column-create_art" style="margin-top: 10px; font-size: 20px;"><b>OR</b></p>
 
       <!-- Dropdown Menu-->
 
@@ -121,7 +128,7 @@ $(function(){
 
       <!-- Button for create Auction-->
 
       <div class="container-create_art-form-btn">
 
         <button class="create_art-form-btn">
 
-          Create
 
+          <b>Create</b>
 
         </button>
 
       </div>
 
     </form>

+ 102 - 0
app/templates/detail_art_for_search.html
Vizualizați fișierul 

@@ -0,0 +1,102 @@
 
+{% 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" 
+                      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>
 
+            </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 %}

+ 1 - 1
app/templates/login.html
Vizualizați fișierul 

@@ -7,7 +7,7 @@
 
     <div class="container py-5 h-100">
 
       <div class="row d-flex justify-content-center align-items-center h-100">
 
         <div class="col-12 col-md-8 col-lg-6 col-xl-5">
 
-          <div class="card bg-dark text-white" style="border-radius: 1rem;">
 
+          <div class="card text-white" style="border-radius: 1rem; background: #846add;">
 
             <div class="card-body p-5 text-center">
 
               <div class="mb-md-5 mt-md-4 pb-5">
 
                 <h2 class="fw-bold mb-2 text-uppercase">Login</h2>

+ 7 - 13
app/templates/profile.html
Vizualizați fișierul 

@@ -12,7 +12,7 @@
 
                             {% 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">
 
+                            <img src="static/templates/defaultprofileimg.png" style="width:150px">
 
                             {% endif %}
 
                             <div class="mt-3">
 
                                 <h4>{{ user.username }}</h4>
 
@@ -59,22 +59,16 @@
 
                                     </div>
 
                                     <div class="row">
 
                                         <div class="col-sm-12">
 
-                                            <input type="submit" value="Submit" class="btn btn-info"></a>
 
+                                            <input type="submit" value="Submit" class="btn btn-grey update_password-form-btn"></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>
 
+                                    <p><b>Security(Show 2FA. 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"/>
 
+                                                <img src="static/templates/tick_logo.jpg" alt="enable_logo" id="logo" width="12"/>
 
+                                                <img src="static/templates/cross_logo.jpg" alt="disable_logo" id="logo" width="12"/>
 
                                                 <label for="2FA">Two-Factor Authentication (2FA)</label>
 
                                             </h6>
 
                                         </div>
 
@@ -89,7 +83,7 @@
 
             <div class="col">
 
                 <div class="card">
 
                     <div class="container">
 
-                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
 
+                        <ul class="nav nav-pills mb-3 nav-tabs" 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>
 
@@ -127,7 +121,7 @@
 
                             </div>
 
                             <div class="tab-pane fade" id="bidding_record" role="tabpanel" aria-labelledby="bidding_record-tab">
 
                                 <table class="table">
 
-                                    <thead class="thead-dark">
 
+                                    <thead class="thead-colour">
 
                                         <tr>
 
                                         <th>Bidding Art Item Name</th>
 
                                         <th>Bidding Time(Order by DESC)</th>

+ 2 - 2
app/templates/register.html
Vizualizați fișierul 

@@ -7,7 +7,7 @@
 
     <div class="container py-5 h-100">
 
       <div class="row d-flex justify-content-center align-items-center h-100">
 
         <div class="col-12 col-md-8 col-lg-6 col-xl-5">
 
-          <div class="card bg-dark text-white" style="border-radius: 1rem;">
 
+          <div class="card text-white" style="border-radius: 1rem; background: #846add;">
 
             <div class="card-body p-5 text-center">
 
               <div class="mb-md-5 mt-md-4 pb-5">
 
                 <h2 class="fw-bold mb-2 text-uppercase">Sign up</h2>
 
@@ -43,7 +43,7 @@
 
                     name="passwd_1"
 
                     placeholder="Enter Password"
 
                   />
 
-                  <p style="color:grey;">*Use 8 or more characters</p>
 
+                  <p style="color:white;">*Use 8 or more characters</p>
 
                 </div>
 
                 <!--Input: Password Confirm-->
 
                 <div class="form-outline form-white mb-3">

+ 30 - 0
app/templates/search.html
Vizualizați fișierul 

@@ -0,0 +1,30 @@
 
+{% extends "base.html" %}
 
+
 
+{% block content %}
 
+<p>Search Result</p>
 
+
 
+<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 style="width:250px; height:250px;" src="static/repository/">
 
+            <div class="row" id="market_item_name_left">
 
+                <b></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>
 
+
 
+    </div>
 
+  </div>
 
+
 
+
 
+{% block modal %}{% endblock %}
 
+{% block script %}{% endblock %}
 
+{% endblock %}