You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
4.0 KiB
HTML
181 lines
4.0 KiB
HTML
{% load static %}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Invoice Details</title>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mainContainer {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.logoContainer {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.logoContainer img {
|
|
width: 200px;
|
|
}
|
|
|
|
.invoiceDetails {
|
|
width: 100%;
|
|
display: table;
|
|
}
|
|
|
|
.customerDetails {
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
|
|
|
|
.companyDetails {
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
|
|
.customerDetails h1 {
|
|
color: rgb(166, 166, 166);
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.customerDetails p {
|
|
color: #374a7a;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.companyDetails {
|
|
text-align: end;
|
|
}
|
|
|
|
.companyDetails h1 {
|
|
color: #20336b;
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.companyDetails p {
|
|
color: #374a7a;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.invoiceNumberBar {
|
|
width: 100%;
|
|
background-color: #374a7a;
|
|
padding: 10px 20px;
|
|
color: white;
|
|
font-weight: 600;
|
|
text-align: end;
|
|
font-size: 18px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.invoiceItemsBar {
|
|
width: 100%;
|
|
background-color: #374a7a;
|
|
padding: 10px 20px;
|
|
color: white;
|
|
font-weight: 600;
|
|
text-align: start;
|
|
font-size: 18px;
|
|
margin: 50px 0px;
|
|
}
|
|
|
|
.invoiceItemsContainer ul {
|
|
padding: 0px 20px;
|
|
list-style:circle;
|
|
color: #20336b;
|
|
}
|
|
|
|
.totalContainer {
|
|
width: 100%;
|
|
text-align: end;
|
|
margin-top: 20px;
|
|
color: #20336b;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.footer {
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="mainContainer">
|
|
<div class="logoContainer">
|
|
<img src="https://newosina.osinode.com/static/images/ositcom_logos/full-logo.png">
|
|
</div>
|
|
|
|
|
|
<div class="invoiceNumberBar">
|
|
<p>Invoice $024-1298</p>
|
|
</div>
|
|
|
|
|
|
<div class="invoiceDetails">
|
|
<div class="customerDetails">
|
|
<h1>Bill To:</h1>
|
|
|
|
<p>{{order.customer}}</p>
|
|
<p>Lb</p>
|
|
<p>+96103556600</p>
|
|
<p>info@winabig.com</p>
|
|
|
|
</div>
|
|
|
|
<div class="companyDetails">
|
|
<h1>Due Date: 2024-03-03</h1>
|
|
|
|
<p>OSITCOM ltd</p>
|
|
<p>CR. 2014057</p>
|
|
<p>Registration Number: 1808707</p>
|
|
<p>Jounieh, Lebanon </p>
|
|
<p> Facing Fouad Chehab Stadium,</p>
|
|
<p>Jounieh Highway,</p>
|
|
<p> 7th Floor, Doueihy Building</p>
|
|
<p>PO Box: 90-1246</p>
|
|
<p>Tel/Fax: +961 (9) 918718/9</p>
|
|
<p>Mobile: +961 (70) 918 718</p>
|
|
<p>billing@ositcom.net</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="invoiceItemsBar">
|
|
<p>Invoice Items</p>
|
|
</div>
|
|
|
|
|
|
<div class="invoiceItemsContainer">
|
|
<ul>
|
|
<li>USSD App integration via API</li>
|
|
<li>Promotion 1 for users when registering during a specific period of time</li>
|
|
<li>Promotion 2 for campaign tickets during a specific period of time</li>
|
|
</ul>
|
|
|
|
<div class="totalContainer">
|
|
<p>Total Cost: <span>$1200.00</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |