From edc3417eb2ffc066dd4646f09690ad8e3588145a Mon Sep 17 00:00:00 2001
From: John Piaszynski <john-piaszynski@uiowa.edu>
Date: Sun, 24 Sep 2023 13:49:25 -0500
Subject: [PATCH] tickets page hard coded examples

---
 frontend/static/style.css       | 70 +++++++++++++++++++++++++++++
 frontend/templates/tickets.html | 79 +++++++++++++++++++++++++--------
 2 files changed, 131 insertions(+), 18 deletions(-)

diff --git a/frontend/static/style.css b/frontend/static/style.css
index 939bc8d..c319e78 100644
--- a/frontend/static/style.css
+++ b/frontend/static/style.css
@@ -695,6 +695,76 @@ input[type=checkbox]{
         border-top: none;
     }
 
+    .tickets-container {
+        display: flex;
+    }
+    .ticket {
+        width: 400px;
+        height: 400px;
+        border: 1px solid black;
+        border-radius:5%;
+        padding: 10px;
+        margin: 20px;
+    }
+    .ticket img {
+        max-width: 100%;
+        padding-top: 50px;
+    }
+    .ticket p {
+        text-align: center;
+    }
+    .ticket_title {
+        font-size: 20px;
+        font-weight: bold;
+    }
+    
+    .active-bids-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+    .active-bids-header {
+        border-bottom: 1px solid black;
+    }
+    .active-bids-header, .bids-row {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        padding: 5px 0;
+    }
+    .active-bids-header p {
+        font-weight: bold;
+        font-size: 20px;
+    }
+    .active-bids-header p, .bids-row p {
+        flex: 1;
+        text-align: center;
+        padding: 5px;
+    }
+    
+    .active-asks-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+    .active-asks-header {
+        border-bottom: 1px solid black;
+    }
+    .active-asks-header, .asks-row {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        padding: 5px 0;
+    }
+    .active-asks-header p {
+        font-weight: bold;
+        font-size: 20px;
+    }
+    .active-asks-header p, .asks-row p {
+        flex: 1;
+        text-align: center;
+        padding: 5px;
+    }
 
 
 
diff --git a/frontend/templates/tickets.html b/frontend/templates/tickets.html
index 0ef3074..b255058 100644
--- a/frontend/templates/tickets.html
+++ b/frontend/templates/tickets.html
@@ -36,24 +36,67 @@
             <button class="tablinks" onclick="openTab(event, 'History')">History</button>
           </div>
 
-         <div id="Tickets" class="tabcontent">
-             <h3>London</h3>
-             <p>London is the capital city of England.</p>
-         </div>
-
-         <div id="Active-Bids" class="tabcontent">
-            <h3>Paris</h3>
-            <p>Paris is the capital of France.</p> 
-         </div>
-
-         <div id="Active-Asks" class="tabcontent">
-             <h3>Tokyo</h3>
-             <p>Tokyo is the capital of Japan.</p>
-         </div>
-         <div id="History" class="tabcontent">
-            <h3>Tokyo</h3>
-            <p>Tokyo is the capital of Japan.</p>
-        </div>
+          <div id="Tickets" class="tabcontent">
+            <div class="tickets-container">
+              <div class="ticket">
+                <p class="ticket_title">Iowa vs Purdue</p>
+                <p class="ticket_date">September 30, 2023</p>
+                <p class="ticket_id">N65X-HTRM-675B-HT98</p>
+                <img class="ticket_img" src="../static/sample_barcode.gif">
+             </div>
+             <div class="ticket">
+              <p class="ticket_title">Iowa vs Minnesota</p>
+              <p class="ticket_date">October 7, 2023</p>
+              <p class="ticket_id">N65X-HTRM-675B-HT98</p>
+              <img class="ticket_img" src="../static/sample_barcode.gif">
+           </div>
+            </div>
+           </div>
+  
+           <div id="Active-Bids" class="tabcontent">
+            <div class="active-bids-container">
+              <div class="active-bids-header">
+                <p class="active-bids-header-user">User</p>
+                <p class="active-bids-header-offer">Offer</p>
+                <p class="active-bids-header-ticket">Ticket</p>
+              </div>
+              <div class="bids-row">
+                <p class="bids-row-user">Joe Doe</p>
+                <p class="bids-row-offer">$45</p>
+                <p class="bids-row-ticket">Iowa vs Minnesota</p>
+              </div>
+              <div class="bids-row">
+                <p class="bids-row-user">Jane Smith</p>
+                <p class="bids-row-offer">$50</p>
+                <p class="bids-row-ticket">Iowa vs Minnesota</p>
+              </div>
+              <div class="bids-row">
+                <p class="bids-row-user">Alex Smith</p>
+                <p class="bids-row-offer">$70</p>
+                <p class="bids-row-ticket">Iowa vs Purdue</p>
+              </div>
+            </div>
+           </div>
+  
+           <div id="Active-Asks" class="tabcontent">
+               <div class="active-asks-container">
+                <div class="active-asks-header">
+                  <p class="active-asks-header-user">Ticket</p>
+                  <p class="active-asks-header-offer">Ask</p>
+                </div>
+                <div class="asks-row">
+                  <p class="asks-row-ticket">Iowa vs Minnesota</p>
+                  <p class="asks-row-ask">$55</p>
+                </div>
+                <div class="asks-row">
+                  <p class="asks-row-ticket">Iowa vs Purdue</p>
+                  <p class="asks-row-ask">$50</p>
+                </div>
+               </div>
+           </div>
+           <div id="History" class="tabcontent">
+              <p>No previous transactions</p>
+          </div>