allen/hackathon-Seatstock
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tickets page hard coded examples

Browse Source
This commit is contained in:
John Piaszynski
2023-09-24 13:49:25 -05:00
parent d14bcae5bf
commit edc3417eb2
2 changed files with 131 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/static/style.css
View File

@ -695,6 +695,76 @@ input[type=checkbox]{
border-top: none; 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;
}

59
frontend/templates/tickets.html
View File

@ -37,22 +37,65 @@
</div> </div>
<div id="Tickets" class="tabcontent"> <div id="Tickets" class="tabcontent">
<h3>London</h3> <div class="tickets-container">
<p>London is the capital city of England.</p> <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>
<div id="Active-Bids" class="tabcontent"> <div id="Active-Bids" class="tabcontent">
<h3>Paris</h3> <div class="active-bids-container">
<p>Paris is the capital of France.</p> <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>
<div id="Active-Asks" class="tabcontent"> <div id="Active-Asks" class="tabcontent">
<h3>Tokyo</h3> <div class="active-asks-container">
<p>Tokyo is the capital of Japan.</p> <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>
<div id="History" class="tabcontent"> <div id="History" class="tabcontent">
<h3>Tokyo</h3> <p>No previous transactions</p>
<p>Tokyo is the capital of Japan.</p>
</div> </div>