<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--Author : @arboshiki-->
<div id="invoice">
<div class="toolbar hidden-print">
<div class="text-right">
<button id="printInvoice" class="btn btn-info"><i class="fa fa-print"></i> Print</button>
<button class="btn btn-info"><i class="fa fa-file-pdf-o"></i> Export as PDF</button>
</div>
<hr>
</div>
<div class="invoice overflow-auto">
<div style="min-width: 600px">
<header>
<div class="row">
<div class="col-md-6">
<a target="_blank" href="https://lobianijs.com">
<img class="img-responsive" width="80" height="80"
src="https://work.rjana.in/data/uploads/webdata/logo-4.png" data-holder-rendered="true" />
</a>
</div>
<div class="col-md-6 company-details">
<h2 class="name">
<a target="_blank" href="https://lobianijs.com">
Rational Solver
</a>
</h2>
<div>Moderator: Rakesh Jana</div>
<div>rationalsolver@gmail.com</div>
<div>+919614735067</div>
</div>
</div>
</header>
<main>
<div class="row contacts">
<div class="col-md-4 invoice-to">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="text-center">Payment To<span class="glyphicon glyphicon-user pull-right"></span></h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<strong>Rakesh Jana</strong>
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item liitem"><strong>Position:</strong>
<span class="pull-right">Text Book Solution Expert</span>
</li>
<li class="list-group-item liitem"><strong>Email:</strong>
<span class="pull-right">jana.rakesh@math.com</span>
</li>
<li class="list-group-item liitem"><strong>Phone:</strong>
<span class="pull-right">+919614735067</span>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="text-center">Work Period<span class="glyphicon glyphicon-user pull-right"></span></h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<strong>November 2020</strong>
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item liitem"><strong>Start Date:</strong>
<span class="pull-right">2nd Nov, 2020</span>
</li>
<li class="list-group-item liitem"><strong>End Date:</strong>
<span class="pull-right">30th Nov, 2020</span>
</li>
<li class="list-group-item liitem"><strong>Mode of Work:</strong>
<span class="pull-right">Online</span>
</li>
</ul>
</div>
</div>
<div class="col-md-4 invoice-details">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="text-center">Payment Detials<span class="glyphicon glyphicon-user pull-right"></span></h4>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item liitem"><strong>Mode of Payment:</strong>
<span class="pull-right">UPI Transfer</span>
</li>
<li class="list-group-item liitem"><strong>Payment Date:</strong>
<span class="pull-right">30th Nov, 2020</span>
</li>
<li class="list-group-item liitem"><strong>Amount:</strong>
<span class="pull-right">Rs 3000.00</span>
</li>
</ul>
<div class="panel-footer">
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-4 col-lg-2">
</div>
<div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" id="qr1">
</div>
<div class="col-xs-6 col-sm-5 col-md-4 col-lg-6">
</div>
</div>
</div>
</div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>#</th>
<th class="text-left">DESCRIPTION</th>
<th class="text-right">HOUR PRICE</th>
<th class="text-right">HOURS</th>
<th class="text-right">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">04</td>
<td class="text-left"><h3>
<a target="_blank" href="https://www.youtube.com/channel/UC_UMEcP_kF0z4E6KbxCpV1w">
Youtube channel
</a>
</h3>
<a target="_blank" href="https://www.youtube.com/channel/UC_UMEcP_kF0z4E6KbxCpV1w">
Useful videos
</a>
to improve your Javascript skills. Subscribe and stay tuned :)
</td>
<td class="unit">$0.00</td>
<td class="qty">100</td>
<td class="total">$0.00</td>
</tr>
<tr>
<td class="no">01</td>
<td class="text-left"><h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="unit">$40.00</td>
<td class="qty">30</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="text-left"><h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="unit">$40.00</td>
<td class="qty">80</td>
<td class="total">$3,200.00</td>
</tr>
<tr>
<td class="no">03</td>
<td class="text-left"><h3>Search Engines Optimization</h3>Optimize the site for search engines (SEO)</td>
<td class="unit">$40.00</td>
<td class="qty">20</td>
<td class="total">$800.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
<div class="thanks">Thank you!</div>
<div class="notices">
<div>NOTICE:</div>
<div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
</div>
</main>
<footer>
Invoice was created on a computer and is valid without the signature and seal.
</footer>
</div>
<!--DO NOT DELETE THIS div. IT is responsible for showing footer always at the bottom-->
<div></div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/shieldui-all.min.css" />
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript">
initializeRatings();
initializeQR1();
initializeQR2();
initializeChart1();
function initializeChart1() {
var data1 = getRandomArray(20, 1, 50);
var data2 = getRandomArray(20, 20, 70);
$("#chart1").shieldChart({
theme: "light",
exportOptions: {
image: false,
print: false
},
primaryHeader: {
text: "Performance Data"
},
tooltipSettings: {
axisMarkers: {
enabled: true,
mode: 'x',
width: 2,
zIndex: 3,
drawColor: "white"
}
},
dataSeries: [
{
seriesType: 'bar',
collectionAlias: 'Achieved',
data: data1
},
{
seriesType: 'line',
collectionAlias: 'Target',
data: data2
}
]
});
}
function initializeQR1() {
$("#qr1").shieldQRcode({
mode: "byte",
size: 150,
value: "Mike Smith",
style: {
color: "#1E97E3"
}
});
}
function initializeQR1() {
$("#qr1").shieldQRcode({
mode: "byte",
size: 150,
value: "Mike Smith",
style: {
color: "#1E97E3"
}
});
}
function initializeQR2() {
$("#qr2").shieldQRcode({
mode: "byte",
size: 150,
value: "Avarage: 6.3",
style: {
color: "#1E97E3"
}
});
}
function initializeRatings() {
$('#rate1').shieldRating({
max: 7,
step: 0.1,
value: 6.3,
markPreset: false
});
$('#rate2').shieldRating({
max: 7,
step: 0.1,
value: 6,
markPreset: false
});
$('#rate3').shieldRating({
max: 7,
step: 0.1,
value: 4.5,
markPreset: false
});
$('#rate4').shieldRating({
max: 7,
step: 0.1,
value: 5,
markPreset: false
});
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomArray(length, min, max) {
var array = [];
for (var boudary = 0; boudary < length; boudary++) {
array.push(getRandomInt(min, max));
}
return array;
}
</script>
#invoice{
padding: 30px;
}
.invoice {
position: relative;
background-color: #FFF;
min-height: 680px;
padding: 15px
}
.invoice header {
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #3989c6
}
.invoice .company-details {
text-align: right
}
.invoice .company-details .name {
margin-top: 0;
margin-bottom: 0
}
.invoice .contacts {
margin-bottom: 20px
}
.invoice .invoice-to {
text-align: left
}
.invoice .invoice-to .to {
margin-top: 0;
margin-bottom: 0
}
.invoice .invoice-details {
text-align: left
}
.invoice .invoice-details .invoice-id {
margin-top: 0;
color: #3989c6
}
.invoice main {
padding-bottom: 50px
}
.invoice main .thanks {
margin-top: -100px;
font-size: 2em;
margin-bottom: 50px
}
.invoice main .notices {
padding-left: 6px;
border-left: 6px solid #3989c6
}
.invoice main .notices .notice {
font-size: 1.2em
}
.invoice table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px
}
.invoice table td,.invoice table th {
padding: 15px;
background: #eee;
border-bottom: 1px solid #fff
}
.invoice table th {
white-space: nowrap;
font-weight: 400;
font-size: 16px
}
.invoice table td h3 {
margin: 0;
font-weight: 400;
color: #3989c6;
font-size: 1.2em
}
.invoice table .qty,.invoice table .total,.invoice table .unit {
text-align: right;
font-size: 1.2em
}
.invoice table .no {
color: #fff;
font-size: 1.6em;
background: #3989c6
}
.invoice table .unit {
background: #ddd
}
.invoice table .total {
background: #3989c6;
color: #fff
}
.invoice table tbody tr:last-child td {
border: none
}
.invoice table tfoot td {
background: 0 0;
border-bottom: none;
white-space: nowrap;
text-align: right;
padding: 10px 20px;
font-size: 1.2em;
border-top: 1px solid #aaa
}
.invoice table tfoot tr:first-child td {
border-top: none
}
.invoice table tfoot tr:last-child td {
color: #3989c6;
font-size: 1.4em;
border-top: 1px solid #3989c6
}
.invoice table tfoot tr td:first-child {
border: none
}
.invoice footer {
width: 100%;
text-align: center;
color: #777;
border-top: 1px solid #aaa;
padding: 8px 0
}
@media print {
.invoice {
font-size: 11px!important;
overflow: hidden!important
}
.invoice footer {
position: absolute;
bottom: 10px;
page-break-after: always
}
.invoice>div:last-child {
page-break-before: always
}
}
$('#printInvoice').click(function(){
Popup($('.invoice')[0].outerHTML);
function Popup(data)
{
window.print();
return true;
}
});
