Adding checkout/billing UI

8 years ago · 2416259498
parent 684ad0ccab
commit 2416259498
1 changed files with 74 additions and 0 deletions
--- a/src/api/templates/bill.html
+++ b/src/api/templates/bill.html
@ -0,0 +1,74 @@
+<style>
+	body{ 
+			font-family:sans-serif;
+			font-size:14px;
+			font-weight:lighter;
+	}
+	.caption {
+		font-size:22px;
+	}
+	.left { float:left}
+	.small { font-family:verdana; font-size:11px;}
+	table { border:1px solid #CAD5E0; 
+		border-radius:8px;
+		-webkit-border-radius:8px;	
+		padding:4px;	
+		width:55%;
+		margin-top:10%;
+	}
+	.action {
+		cursor:pointer;
+		padding:4px;
+		padding-left:10px;
+		padding-right:10px;
+		border-radius:8px;
+
+	}
+	.action:hover { background-color:#4682b4; color:white}
+	tr {font-family:sans-serif; font-size:14px;}
+	td {padding:4px; font-weight:lighter}
+</style>
+<body>
+<div>
+</div>
+<br>
+<div id="grid">
+	<table align="center">
+		<tr>
+			<td colspan="2">
+				<div align="left" class="caption"> 
+					<img src="/static/img/logo.png" style="width:48px" class="left"> The Phi Technology LLC</div>
+				<div class="small" style="text-transform:capitalize">{{ app_name }}</div>
+				
+			</td>
+			<td class="small" valign="middle">
+				
+				<div>Call : 615-866-0454</div>
+				<div>Email: support@the-phi.com</div>
+			</td>
+		</tr>
+		<tr style="background-color:#f3f3f3">
+			<td>Service</td>
+			<td>Price /mo (USD)</td>
+			<td>Status</td>
+
+		</tr>
+		{% for item in plans %}
+		<tr class="" style="font-size:11px">
+			<td> {{item.statement_descriptor}} </td>
+			<td align="right"> {{item.amount/100}} </td>
+			<td style="text-transform:capitalize"> {{item.status}} </td>
+			
+		</tr>
+		{% endfor %}
+		<tr style="font-size:11px; ">
+			<td align="right"></td>
+			<td align="right" style="background-color:#f3f3f3;"> Amount Due <span style="font-weight:bold">$ {{ total_amount }}</span></td>
+			<td align="center">
+				<span class="action">Purchase</span>
+			</td>
+	</table>
+	<br>
+	
+</div>
+</body>