<style>
:root {
--primary-green: #16A82B;
--dark-grey: #3C3C3C;
--light-bg: #f8f9fa;
--border-color: #e0e0e0;
--white: #ffffff;
--navy-blue: #2c3e50;
}
.zakat-box {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
max-width: 900px;
margin: 20px auto;
color: var(--dark-grey);
line-height: 1.6;
}
/* Nisab Header Cards */
.nisab-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 30px;
}
.nisab-card {
background: var(--light-bg);
padding: 15px;
border-radius: 8px;
border-left: 4px solid var(--primary-green);
text-align: center;
}
.nisab-card strong {
display: block;
font-size: 0.9rem;
text-transform: uppercase;
color: #666;
}
.nisab-card span {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-green);
}
/* Input Grid */
.zakat-fields {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.zakat-field {
display: flex;
flex-direction: column;
}
.zakat-field h5 {
margin: 0 0 8px 0;
font-size: 0.95rem;
font-weight: 600;
}
.zakat-item-inner {
display: flex;
align-items: center;
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 6px;
overflow: hidden;
}
.currancy-sign {
background: #f0f0f0;
padding: 12px 15px;
font-weight: bold;
border-right: 1px solid var(--border-color);
}
.zakat-item-inner input {
border: none;
padding: 12px;
width: 100%;
font-size: 1rem;
outline: none;
}
/* THE FIX: Result Section spacing */
.zakat-spacer {
height: 60px; /* This creates the physical space you requested */
width: 100%;
display: block;
clear: both;
}
.result-container {
background: var(--navy-blue);
color: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
margin: 0 !important; /* Removes the negative margin from previous versions */
}
.result-holder {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
text-align: center;
}
.result-col {
border-right: 1px solid rgba(255,255,255,0.1);
}
.result-col:last-child {
border-right: none;
}
.results-label {
display: block;
font-size: 0.8rem;
text-transform: uppercase;
opacity: 0.8;
margin-bottom: 5px;
}
.result-sign {
font-size: 1.5rem;
font-weight: bold;
}
.results {
background: transparent;
border: none;
color: white;
font-size: 1.5rem;
font-weight: bold;
width: 100%;
text-align: center;
outline: none;
}
.totalZakatDue .results, .totalZakatDue .result-sign {
color: var(--primary-green);
font-size: 2rem;
}
@media (max-width: 600px) {
.nisab-container, .zakat-fields { grid-template-columns: 1fr; }
.result-holder { grid-template-columns: 1fr; }
.result-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.zakat-spacer { height: 40px; }
}
</style>
<section class="zakat-box">
<div class="nisab-container">
<div class="nisab-card">
<strong>Gold Nisab</strong>
<span>$7,251 (87.48g)</span>
</div>
<div class="nisab-card">
<strong>Silver Nisab</strong>
<span>$557.25 (612.36g)</span>
</div>
</div>
<div class="zakat-fields">
<div class="zakat-field">
<h5>Cash at Home/Bank</h5>
<div class="zakat-item-inner">
<span class="currancy-sign">$</span>
<input type="number" placeholder="0.00" id="cash_value" onkeyup="AutoCalc()">
</div>
</div>
<div class="zakat-field">
<h5>Gold (Value) <small style="display:block; font-weight:normal; color:var(--primary-green)">$167.56 / gram</small></h5>
<div class="zakat-item-inner">
<span class="currancy-sign">$</span>
<input type="number" placeholder="0.00" id="gold_value" onkeyup="AutoCalc()">
</div>
</div>
<div class="zakat-field">
<h5>Silver (Value) <small style="display:block; font-weight:normal; color:var(--primary-green)">$0.91 / gram</small></h5>
<div class="zakat-item-inner">
<span class="currancy-sign">$</span>
<input type="number" placeholder="0.00" id="silver_value" onkeyup="AutoCalc()">
</div>
</div>
<div class="zakat-field">
<h5>Business Assets</h5>
<div class="zakat-item-inner">
<span class="currancy-sign">$</span>
<input type="number" placeholder="0.00" id="business_value" onkeyup="AutoCalc()">
</div>
</div>
<div class="zakat-field">
<h5>Shares & Investments</h5>
<div class="zakat-item-inner">
<span class="currancy-sign">$</span>
<input type="number" placeholder="0.00" id="share_assets_value" onkeyup="AutoCalc()">
</div>
</div>
<div class="zakat-field">
<h5>RRSP / Retirement</h5>
<div class="zakat-item-inner">
<span class="currancy-sign">$</span>
<input type="number" placeholder="0.00" id="RRSP_value" onkeyup="AutoCalc()">
</div>
</div>
<div class="zakat-field">
<h5>Liabilities (Debts you owe)</h5>
<div class="zakat-item-inner">
<span class="currancy-sign">$</span>
<input type="number" placeholder="0.00" id="liabilities_value" onkeyup="AutoCalc()" style="color: #e32226;">
</div>
</div>
<div class="zakat-field">
<h5>Other Zakatable Assets</h5>
<div class="zakat-item-inner">
<span class="currancy-sign">$</span>
<input type="number" placeholder="0.00" id="other_value" onkeyup="AutoCalc()">
</div>
</div>
</div>
<div class="zakat-spacer"></div>
<div class="result-container">
<div class="result-holder">
<div class="result-col">
<label class="results-label">Total Assets</label>
<span class="result-sign">$</span>
<input type="text" id="totalAssets" class="results" disabled placeholder="0">
</div>
<div class="result-col">
<label class="results-label">Liabilities</label>
<span class="result-sign">$</span>
<input type="text" id="totalLiabilities" class="results" disabled placeholder="0">
</div>
<div class="result-col totalZakatDue">
<label class="results-label" style="color:var(--primary-green)">Total Zakat Due</label>
<span class="result-sign">$</span>
<input type="text" id="totalZakatDue" class="results" disabled placeholder="0.00">
</div>
</div>
</div>
</section>
<script>
function AutoCalc() {
let totalAssets = 0;
let totalLiabilities = 0;
const inputs = document.querySelectorAll('.zakat-fields input[type="number"]');
inputs.forEach(input => {
let val = parseFloat(input.value) || 0;
if (val < 0) val = 0;
if (input.id === "liabilities_value") {
totalLiabilities += val;
} else {
totalAssets += val;
}
});
let netAssets = totalAssets - totalLiabilities;
if (netAssets < 0) netAssets = 0;
let zakatDue = netAssets * 0.025;
document.getElementById("totalAssets").value = totalAssets.toLocaleString(undefined, {maximumFractionDigits: 0});
document.getElementById("totalLiabilities").value = totalLiabilities.toLocaleString(undefined, {maximumFractionDigits: 0});
document.getElementById("totalZakatDue").value = zakatDue.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
}
</script>