Skip to content

Instantly share code, notes, and snippets.

@spcheema

spcheema/index.html

Last active May 31, 2025 00:07
Show Gist options
  • Save spcheema/c0ead757473492eb548e8a73806b8efa to your computer and use it in GitHub Desktop.
Save spcheema/c0ead757473492eb548e8a73806b8efa to your computer and use it in GitHub Desktop.
Download ZIP
Contracting benefits calculator
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background: #f8f9fa;
display: flex;
justify-content: center;
align-items: flex-start;
font-size: 14px;
}
strong {
font-weight: 600;
}
/* ...existing code... */
#input-container {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
align-items: center;
background: #f4f6fb;
border-radius: 8px;
padding: 18px 20px 10px 20px;
margin-bottom: 18px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
max-width: 760px;
}
#input-container label {
min-width: 120px;
font-weight: 500;
margin-right: 6px;
margin-bottom: 4px;
}
#input-container input[type="number"],
#input-container input[type="date"],
#input-container input[type="text"] {
padding: 6px 10px;
border: 1px solid #bbb;
border-radius: 4px;
font-size: 14px;
margin-right: 18px;
margin-bottom: 4px;
min-width: 140px;
background: #fff;
transition: border 0.2s;
}
#input-container input:focus {
border: 1.5px solid #1976d2;
outline: none;
}
#input-container button {
padding: 7px 18px;
background: #1976d2;
color: #fff;
border: none;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
transition: background 0.2s;
}
#input-container button:hover {
background: #125ea8;
}
.full-width-input {
flex-basis: 100%;
width: 100%;
min-width: 0;
margin-right: 0;
}
.invoice-container {
width: 800px;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
#h2 {
text-align: center;
margin: auto
}
@media print {
@page {
margin: 0;
size: A4;
}
body {
background: none;
margin: 0;
padding: 0;
}
#h2 {
text-align: center;
margin: 100px 0 20px
}
.invoice-container {
width: 100%;
box-shadow: none;
padding: 20px;
margin: 0;
}
#chechlist {
display: none;
}
}
.header-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.header-container,
.details,
.service-description {
padding: 15px;
;
border: 1px solid #ddd;
border-bottom: 0;
}
.company-details {
text-align: left;
}
.invoice-details {
text-align: right;
}
.invoice-details table {
width: 100%;
text-align: right;
border-collapse: collapse;
border: none;
}
.invoice-details td {
padding: 2px;
border: none;
}
.invoice-details td:nth-child(1) {
text-align: right;
font-size: 14px;
padding-right: 5px;
}
p {
font-size: 14px;
margin: 5px 0;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background: #f0f0f0;
}
.total {
text-align: right;
font-weight: bold;
}
.bank-details table,
.bank-details table td {
border: none;
}
.bank-details table td {
padding: 2px;
}
.bank-details table td:nth-child(1) {
width: 130px;
}
.bank-details h4 {
margin: 50px 0 0;
}
#chechlist {
font-weight: 600;
color: red;
font-size: 16px;
/* float: left; */
}
</style>
<script>
let serviceDate = new Date()
serviceDate.setMonth((new Date()).getMonth() - 1);
let month = serviceDate.toLocaleString('default', { month: 'short' });
let year = serviceDate.getFullYear();
window.addEventListener('DOMContentLoaded', function () {
document.getElementById('invoice-date-input').addEventListener('change', function () {
const invoiceDateInput = document.getElementById('invoice-date-input');
const dueDateInput = document.getElementById('invoice-due-date');
if (invoiceDateInput.valueAsDate) {
let dueDate = new Date(invoiceDateInput.valueAsDate);
dueDate.setDate(dueDate.getDate() + 10);
dueDateInput.valueAsDate = dueDate;
}
});
});
function resetInvoiceFields() {
onLoad();
}
function onLoad() {
document.getElementById("days-input").value = 7;
document.getElementById('invoice-date-input').valueAsDate = new Date();
var tomorrow = new Date();
tomorrow.setDate(document.getElementById('invoice-date-input').valueAsDate.getDate() + 10);
document.getElementById('invoice-due-date').valueAsDate = tomorrow
document.title = `Invoice-${month}-${year}`
document.getElementById('description').value = `Service fee of Surinder Pal Singh for the month of ${month} ${year}`;
let sequentialNumber = '001';
// document.getElementById("invoice-number").innerText = `${serviceDate.getFullYear()}-${String(serviceDate.getMonth() + 1).padStart(2, '0')}-${sequentialNumber}`;
document.getElementById('invoiceNumber').value = `${serviceDate.getFullYear()}-${String(serviceDate.getMonth() + 1).padStart(2, '0')}-${sequentialNumber}`;
}
function calculateTotals() {
let rate = 900;
let days = parseInt(document.getElementById("days-input").value);
let today = new Date()
var tomorrow = new Date();
let amount = rate * days;
let gst = amount * 0.10;
let total = amount + gst;
document.getElementById("days").innerText = days;
document.getElementById("amount").innerText = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(amount);
document.getElementById("subtotal").innerText = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(amount);
document.getElementById("gst").innerText = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(gst);
document.getElementById("total").innerText = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }).format(total);
let options = { timeZone: 'Australia/Sydney', year: 'numeric', month: '2-digit', day: '2-digit' };
// let invoiceDate = new Date().toLocaleDateString('en-AU', options).replace(/\//g, '-');
// document.getElementById("invoice-date").innerText = invoiceDate;
let invoiceDate = document.getElementById('invoice-date-input').valueAsDate.toLocaleDateString('en-AU', options).replace(/\//g, '-');
document.getElementById("invoice-date").innerText = invoiceDate;
document.getElementById("service-description").innerText = document.getElementById('description').value;
document.getElementById("service-description").style.display = "none !important";
dueDateString = document.getElementById('invoice-due-date').valueAsDate.toLocaleDateString('en-AU', options).replace(/\//g, '-');
document.getElementById("due-date").innerText = dueDateString;
document.getElementById("invoice-number").innerText = document.getElementById('invoiceNumber').value;
}
</script>
</head>
<body onload="onLoad()">
<div class="invoice-container">
<div id="chechlist">
<div id="input-container">
<label for="days-input">Number of Days:</label>
<input type="number" id="days-input" value="7" min="1">
<label for="days-input">Invoice date:</label>
<input type="date" id="invoice-date-input">
<label for="days-input">Due date:</label>
<input type="date" id="invoice-due-date">
<label for="invoiceNumber">Invoice number:</label>
<input type="text" id="invoiceNumber">
<label for="description">Service description:</label>
<input class="full-width-input" type="text" id="description">
<button onclick="calculateTotals()">Update Invoice</button>
<button type="button" onclick="resetInvoiceFields()">Reset</button>
</div>
<p>Checklist</p>
<ul>
<li>Invoice no.</li>
<li>Invoice date</li>
<li>Invoice due date</li>
<li>Description</li>
<li>No. of days</li>
<li>Total with GST</li>
<li>Most important bank account details</li>
</ul>
</div>
<h2 id="h2">TAX INVOICE</h2>
<br /><br /><br />
<div class="header-container">
<div class="company-details">
<p><strong>ESS PEE CONSULTING PTY LTD</strong></p>
<p>ABN: 16 683 630 971</p>
<p>ACN: 683 630 971</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="invoice-details">
<table>
<tr>
<td><strong>Invoice Number:</strong></td>
<td id="invoice-number"></td>
</tr>
<tr>
<td><strong>Invoice Date:</strong></td>
<td id="invoice-date"></td>
</tr>
<tr>
<td><strong>Due Date:</strong></td>
<td><span id="due-date"></span></td>
</tr>
</table>
</div>
</div>
<!-- <div class="service-description">
<p style="margin-right: 5px"><strong>Service Description:</strong></p>
<p>Technical Services</p>
</div> -->
<div class="details">
<p><strong>Bill To:</strong></p>
<p>Alois Australia Pty Ltd</p>
<p>Level 7, 88 Phillip Street, Sydney, NSW 2000, Australia</p>
<p>ABN: 24 647 056 693</p>
<p>ACN: 647 056 693</p>
</div>
<table>
<thead>
<tr>
<th>Description</th>
<th>Rate (AUD)</th>
<th>Days</th>
<th>Amount (AUD)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="service-description">Service fee of Surinder Pal Singh</td>
<td>$900</td>
<td id="days"></td>
<td id="amount"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="total">Subtotal</td>
<td id="subtotal"></td>
</tr>
<tr>
<td colspan="3" class="total">GST (10%)</td>
<td id="gst"></td>
</tr>
<tr>
<td colspan="3" class="total">Invoice Total (Inclusive of Taxes)</td>
<td id="total"></td>
</tr>
</tfoot>
</table>
<div class="bank-details">
<table>
<tr>
<td colspan="2">
<h4>Bank Account Details</h4>
</td>
</tr>
<tr>
<td><strong>Account Name:</strong></td>
<td>ESS PEE CONSULTING PTY LTD</td>
</tr>
<tr>
<td><strong>BSB Number:</strong></td>
<td>067-873</td>
</tr>
<tr>
<td><strong>Account Number:</strong></td>
<td>1538 1057</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Comments are disabled for this gist.