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

Build all basic html

Anyone 3 ani în urmă
părinte
4ba7126bb6
comite
1bbcafc327
10 a modificat fișierele cu 359 adăugiri și 30 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 13 0
      app/accounts.py
  2. BIN
      app/database.db
  3. 37 27
      app/templates/base.html
  4. 70 0
      app/templates/create_art.html
  5. 67 0
      app/templates/detail_art_for_home.html
  6. 66 0
      app/templates/detail_art_for_profile.html
  7. 11 0
      app/templates/home.html
  8. 2 1
      app/templates/login.html
  9. 79 0
      app/templates/profile.html
  10. 14 2
      app/templates/register.html

+ 13 - 0
app/accounts.py
Vizualizați fișierul 

@@ -74,3 +74,16 @@ def register():
 
                 else:
 
                     flash('Registration Failed', category='error')
 
     return render_template("register.html", user=current_user)
 
+
 
+@accounts.route('/modal_home')
 
+def modal_home():
 
+    return render_template("detail_art_for_home.html", user=current_user)
 
+
 
+@accounts.route('/modal_profile')
 
+def modal_profile():
 
+    return render_template("detail_art_for_profile.html", user=current_user)
 
+
 
+@accounts.route('/profile')
 
+@login_required
 
+def profile():
 
+    return render_template("profile.html", user=current_user)

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


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

@@ -6,33 +6,10 @@
 
         name="viewport" 
         content="width=device-width, initial-scale=1"
 
     >
 
-    <link 
-        rel="stylesheet" 
-        href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
-        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
-        crossorigin="anonymous"
 
-    />
 
-    <link
 
-        rel="stylesheet" 
-        href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
-        crossorigin="anonymous"
 
-    />
 
-    <script 
-        src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
-        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
-        crossorigin="anonymous">
 
-    </script>
 
-    <script 
-        src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" 
-        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
-        crossorigin="anonymous">
 
-    </script>
 
-    <script 
-        src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" 
-        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
-        crossorigin="anonymous">
 
-    </script>
 
-    
+    <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>
 
     <title>
 
         {% block title %}APP{% endblock %}
 
     </title>
 
@@ -51,6 +28,12 @@
 
     right: 0px;
 
     list-style-type: none;
 
 }
 
+.navbar-nav-middle {
 
+    position: absolute;
 
+    top: 5px;
 
+    right: 380px;
 
+    list-style-type: none;
 
+}
 
 a {
 
     font-size: 18px;
 
 }
 
@@ -65,20 +48,44 @@ body {
 
 <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>      
+        <!-- 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="/">Home</a>
 
+                <a class="nav-link" 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>
 
             </li>
 
         </ul>
 
         {% else %}
 
+            <li class="nav-item">
 
+                <a class="nav-link" href="/">Home</a>
 
+            </li>
 
+        </ul>
 
+        <ul class="navbar-nav-right">
 
+            <li class="nav-item">
 
+                <a href="/login">Login</a>
 
+                <a href="/register">Register</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>
 
+        </form>
 
     </nav>
 
     <!-- For Flash Errors to User -->
 
     {% with messages = get_flashed_messages(with_categories=true) %}
 
@@ -106,5 +113,8 @@ body {
 
         {% block content %}
 
         {% endblock %}
 
     </div>
 
+
 
+{% block modal %}{% endblock %}
 
+{% block script %}{% endblock %}
 
 </body>
 
 </html>

+ 70 - 0
app/templates/create_art.html
Vizualizați fișierul 

@@ -0,0 +1,70 @@
 
+{% extends "base.html" %}
 
+
 
+{% 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="starting_price" 
+                    class="form-control" 
+                    id="starting_price"
 
+                    name="starting_price"
 
+                    placeholder="Enter Starting Price "
 
+                    />
 
+                    <label for="starting_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">
 
+                <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="Auction_ends_time">Choose a time for your meeting:</label>
 
+                <input id="Auction_ends_time" type="datetime-local" name="Auction_ends_time">
 
+                <small>The maximum Auction time is 14 days</small>
 
+
 
+                <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>
 
+
 
+                <button type="submit">Create</button>
 
+
 
+</form>
 
+{% endblock %}

+ 67 - 0
app/templates/detail_art_for_home.html
Vizualizați fișierul 

@@ -0,0 +1,67 @@
 
+{% extends "home.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-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>
 
+            <tr>
 
+            <th>Bidder Name</th>
 
+            <th>Bidding Time</th>
 
+            <th>Bidding Price</th>
 
+            </tr>
 
+            <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>
 
+        <p>Who Created</p>
 
+        <p>Auction ends in time</p>
 
+        <p>Art Owner</p>
 
+        <hr>
 
+        <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.home')}}">Close</a>
 
+        </div>
 
+      </div>
 
+      <div class="modal-footer">
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>
 
+<script>
 
+    $(document).ready(function(){
 
+        console.log("Windows is loaded")
 
+        $("#exampleModal").modal("show")
 
+    })
 
+</script>
 
+{% endblock %}

+ 66 - 0
app/templates/detail_art_for_profile.html
Vizualizați fișierul 

@@ -0,0 +1,66 @@
 
+{% 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-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>
 
+            <tr>
 
+            <th>Bidder Name</th>
 
+            <th>Bidding Time</th>
 
+            <th>Bidding Price</th>
 
+            </tr>
 
+            <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>
 
+        <p>Who Created</p>
 
+        <p>Auction ends in time</p>
 
+        <p>Art Owner</p>
 
+        <hr>
 
+        <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('accounts.profile')}}">Close</a>
 
+        </div>
 
+      </div>
 
+      <div class="modal-footer">
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>
 
+<script>
 
+    $(document).ready(function(){
 
+        console.log("Windows is loaded")
 
+        $("#exampleModal").modal("show")
 
+    })
 
+</script>
 
+{% endblock %}

+ 11 - 0
app/templates/home.html
Vizualizați fișierul 

@@ -1,5 +1,16 @@
 
 {% extends "base.html" %}
 
 
 {% block content %}
 
+<br><br><br><br><br>
 
 <h1>Home</h1>
 
+
 
+<p>Auction for all Art</p>
 
+<p>1. Art Name</p>
 
+<p>2. Art Image (Click the photo will go to pop up detail art page)</p>
 
+<p>3. Art current bid price</p>
 
+
 
+<a href="{{url_for('accounts.modal_home')}}">Popup</a>
 
+
 
+{% block modal %}{% endblock %}
 
+{% block script %}{% endblock %}
 
 {% endblock %}

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

@@ -40,7 +40,8 @@
 
                   />
 
                   <label for="passwd_login"></label>
 
                 </div>
 
-                <!--Button: Login-->
 
+                <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>
 
               </div>
 
               <!--Redirect to Sign up Page-->

+ 79 - 0
app/templates/profile.html
Vizualizați fișierul 

@@ -0,0 +1,79 @@
 
+{% 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="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>
 
+    </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>email</p>
 
+<p>Nickname</p>
 
+<hr>
 
+<p>Art I Own</p>
 
+<p>1. Art Name</p>
 
+<p>2. Art Image(Click the photo will go to pop up detail art page)</p>
 
+<hr>
 
+<p>Art by Me</p>
 
+<p>1. Art Name</p>
 
+<p>2. Art Image(Click the photo will go to pop up detail art page)</p>
 
+<a href="{{url_for('accounts.modal_profile')}}">Popup</a>
 
+
 
+{% 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 %}

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

@@ -21,7 +21,7 @@ body {
 
                 <p class="text-white-50 mb-5">Create your Account</p>
 
                 <!--Input: Email-->
 
                 <div class="form-outline form-white mb-3">
 
-                  <label for="email"></label>
 
+                  <label for="email_2"></label>
 
                   <input 
                     type="email" 
                     class="form-control" 
@@ -30,6 +30,16 @@ body {
 
                     placeholder="Insert Email"
 
                   />
 
                 </div>
 
+                <div class="form-outline form-white mb-3">
 
+                  <label for="email_2"></label>
 
+                  <input 
+                    type="email" 
+                    class="form-control" 
+                    id="email_2"
 
+                    name="email_2"
 
+                    placeholder="Confirm Email"
 
+                  />
 
+                </div>
 
                 <!--Input: Password-->
 
                 <div class="form-outline form-white mb-3">
 
                   <label for="passwd_1"></label>
 
@@ -55,7 +65,7 @@ body {
 
                 </div>
 
                 <!--Input: Username-->
 
                 <div class="form-outline form-white mb-3">
 
-                  <label for="username"></label>
 
+                  <label for="Nickname"></label>
 
                   <input 
                     type="text" 
                     class="form-control" 
@@ -64,6 +74,8 @@ body {
 
                     placeholder="Insert User Name"
 
                   />
 
                 </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-->
 
                 <button class="btn btn-outline-light btn-lg px-5" type="submit">Sign up</button>
 
               </div>