<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>
</div>
<hr>
</div>
<div class="invoice overflow-auto">
<div style="min-width: 600px">
<header>
<div class="row">
<div class="col-md-6 col-xs-6">
<a target="_blank" href="https://rjana.in">
<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 col-xs-6 company-details">
<h2 class="name">
<span class="text-primary">
Rational Solver Group
</span>
</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 col-xs-4">
<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">
Rakesh Jana
</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 col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="text-center">Work Period<span class="glyphicon glyphicon-calendar pull-right"></span></h4>
</div>
<div class="panel-body text-center">
<p class="lead">
November 2020
</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 col-xs-4 invoice-details">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="text-center">Payment Detials<span class="glyphicon glyphicon-check pull-right"></span></h4>
</div>
<div class="panel-body text-center">
<p class="lead text-success">
<strong>Paid</strong>
</p>
</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>Date of Payment:</strong>
<span class="pull-right">30th Nov, 2020</span>
</li>
<li class="list-group-item liitem"><strong>Amount:</strong>
<span class="pull-right"> <strong>₹</strong> 3000.00</span>
</li>
</ul>
</div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="text-center"><b>Day</b></th>
<th class="text-left"><b>Work Details</b></th>
<th class="text-center"><b>Time (in hr)</b></th>
<th class="text-center"><b>Hour Rate</b></th>
<th class="text-center"><b>Amount</b></th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">04</td>
<td class="text-left"><h3>
<a target="_blank" href="#">
ISBN: 9783125669
</a>
</h3>
Total #23 || 532(13, T1-T2), 594(1-6), 6(1), 682(2,4,6-8, T1, T3), 672(1, 2, 4-6, T2)
Total #23 || 532(13, T1-T2), 594(1-6), 6(1), 682(2,4,6-8, T1, T3), 672(1, 2, 4-6, T2)
</td>
<td class="unit"><span class="glyphicon glyphicon-time pull-left"></span>
5.25
</td>
<td class="qty"><span class="glyphicon glyphicon-usd pull-left"></span>
70
</td>
<td class="total"><span class="glyphicon glyphicon-usd pull-left"></span>
120.10
</td>
</tr>
<tr>
<td class="no">04</td>
<td class="text-left"><h3>
<a target="_blank" href="#">
ISBN: 9783125669
</a>
</h3>
Total #23 || 532(13, T1-T2), 594(1-6), 6(1), 682(2,4,6-8, T1, T3), 672(1, 2, 4-6, T2)
</td>
<td class="unit"><span class="glyphicon glyphicon-time pull-left"></span>
5.25
</td>
<td class="qty"><span class="glyphicon glyphicon-usd pull-left"></span>
70
</td>
<td class="total"><span class="glyphicon glyphicon-usd pull-left"></span>
120.10
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">Subtotal</td>
<td><span class="glyphicon glyphicon-usd pull-left"></span>
200.00
</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">Dollar Rate</td>
<td><span class="pull-left"><strong>₹</strong></span>
1,300.00
</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">Bonus</td>
<td><span class="pull-left"><strong>₹</strong></span>
1,300.00
</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">Total Payable</td>
<td><span class="pull-left"><strong>₹</strong></span>
1,300.00
</td>
</tr>
</tfoot>
</table>
<div class="thanks">Thank you!</div>
<div class="notices">
<div>NOTICE:</div>
<div class="notice">Please mail to <a href="#">jana.rakesh.math@gmail.com</a> if you did not recived any payment within next two days.</div>
</div>
</main>
<footer>
This is computer generated payslip does not require any seal and signature for validation.
</footer>
</div>
<!--DO NOT DELETE THIS div. IT is responsible for showing footer always at the bottom-->
</div>
</div>
#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 {
text-align: center;
font-size: 1.8em;
background: #ddd
}
.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 {
@page {
size: A4;
margin: 10mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
line-height: 1em;
word-spacing:1px;
letter-spacing:0.2px;
font: 14px "Times New Roman", Times, serif;
background:white;
color:black;
width: 100%;
float: none;
}
/* avoid page-breaks inside a listingContainer*/
.listingContainer{
page-break-inside: avoid;
}
h1 {
font: 28px "Times New Roman", Times, serif;
}
h2 {
font: 24px "Times New Roman", Times, serif;
}
h3 {
font: 20px "Times New Roman", Times, serif;
}
/* Improve colour contrast of links */
a:link, a:visited {
color: #781351
}
/* URL */
a:link, a:visited {
background: transparent;
color:#333;
text-decoration:none;
}
a[href]:after {
content: "" !important;
}
a[href^="http://"] {
color:#000;
}
#header {
height:75px;
font-size: 24pt;
color:black
}
.invoice {
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;
}
});
