Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Iraq Salary & Tax Calculator</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| :root { | |
| --primary: #1a3a6c; | |
| --secondary: #2c5282; | |
| --accent: #e74c3c; | |
| --light: #f0f7ff; | |
| --dark: #1a202c; | |
| --success: #38a169; | |
| --warning: #ecc94b; | |
| --gray: #718096; | |
| --info: #4299e1; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #1a3a6c, #2c5282); | |
| color: var(--dark); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 30px 0; | |
| color: white; | |
| } | |
| header h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 15px; | |
| } | |
| header p { | |
| font-size: 1.1rem; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| opacity: 0.9; | |
| line-height: 1.6; | |
| } | |
| .calculator-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 25px; | |
| margin-top: 20px; | |
| } | |
| .input-section { | |
| background: white; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| padding: 30px; | |
| flex: 1; | |
| min-width: 300px; | |
| } | |
| .result-section { | |
| background: white; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| padding: 30px; | |
| flex: 1; | |
| min-width: 300px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .section-title { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 25px; | |
| padding-bottom: 10px; | |
| border-bottom: 2px solid var(--primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .section-title i { | |
| background: var(--primary); | |
| color: white; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: var(--secondary); | |
| font-size: 0.95rem; | |
| } | |
| input, select { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid #e2e8f0; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: all 0.3s; | |
| } | |
| input:focus, select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(26, 58, 108, 0.2); | |
| } | |
| .region-toggle { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 25px; | |
| } | |
| .region-btn { | |
| flex: 1; | |
| padding: 14px; | |
| background: #edf2f7; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-align: center; | |
| } | |
| .region-btn.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .calculate-btn { | |
| width: 100%; | |
| padding: 15px; | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| margin-top: 10px; | |
| box-shadow: 0 4px 6px rgba(231, 76, 60, 0.3); | |
| } | |
| .calculate-btn:hover { | |
| background: #c0392b; | |
| transform: translateY(-2px); | |
| } | |
| .result-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 14px 0; | |
| border-bottom: 1px solid #e2e8f0; | |
| } | |
| .result-item:last-child { | |
| border-bottom: none; | |
| } | |
| .result-label { | |
| font-weight: 600; | |
| color: var(--secondary); | |
| font-size: 0.95rem; | |
| } | |
| .result-value { | |
| font-weight: 700; | |
| color: var(--primary); | |
| font-size: 1rem; | |
| } | |
| .highlight { | |
| background: var(--light); | |
| padding: 12px 15px; | |
| border-radius: 8px; | |
| margin: 5px 0; | |
| border-left: 4px solid var(--accent); | |
| } | |
| .net-salary { | |
| background: var(--success); | |
| color: white; | |
| padding: 22px; | |
| border-radius: 10px; | |
| margin-top: auto; | |
| text-align: center; | |
| } | |
| .net-salary .label { | |
| font-size: 1.2rem; | |
| margin-bottom: 10px; | |
| } | |
| .net-salary .value { | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| } | |
| .allowances-section { | |
| background: #f7fafc; | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin: 15px 0; | |
| border: 1px solid #e2e8f0; | |
| } | |
| .allowance-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .add-allowance-btn { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| padding: 7px 14px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| font-size: 0.9rem; | |
| } | |
| .add-allowance-btn:hover { | |
| background: var(--secondary); | |
| } | |
| .allowance-item { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| align-items: center; | |
| } | |
| .allowance-item input { | |
| flex: 1; | |
| } | |
| .allowance-item select { | |
| flex: 1.5; | |
| } | |
| .remove-allowance { | |
| background: #e53e3e; | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 28px; | |
| height: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 0.9rem; | |
| } | |
| .min-sos { | |
| font-size: 0.8rem; | |
| color: #e53e3e; | |
| margin-top: 3px; | |
| display: block; | |
| } | |
| .info-box { | |
| background: var(--light); | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-top: 30px; | |
| } | |
| .info-box h3 { | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.3rem; | |
| } | |
| .info-box ul { | |
| padding-left: 20px; | |
| } | |
| .info-box li { | |
| margin-bottom: 10px; | |
| line-height: 1.5; | |
| font-size: 0.95rem; | |
| } | |
| .note-box { | |
| background: #f0f7ff; | |
| border-left: 4px solid var(--primary); | |
| padding: 12px; | |
| border-radius: 4px; | |
| margin-top: 15px; | |
| font-size: 0.9rem; | |
| } | |
| @media (max-width: 768px) { | |
| .calculator-container { | |
| flex-direction: column; | |
| } | |
| header h1 { | |
| font-size: 2rem; | |
| } | |
| .allowance-item { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1><i class="fas fa-calculator"></i> Iraq Salary & Tax Calculator</h1> | |
| <p>Calculate your net salary after taxes and social security contributions for all regions of Iraq</p> | |
| </header> | |
| <div class="calculator-container"> | |
| <div class="input-section"> | |
| <h2 class="section-title"><i class="fas fa-edit"></i> Salary Information</h2> | |
| <div class="region-toggle"> | |
| <button class="region-btn active" data-region="iraq">South/Central Iraq</button> | |
| <button class="region-btn" data-region="kri">Kurdistan Region (KRI)</button> | |
| </div> | |
| <div class="form-group"> | |
| <label for="baseSalary">Total Base Salary (IQD)</label> | |
| <input type="number" id="baseSalary" placeholder="Enter monthly base salary" value="2500000"> | |
| </div> | |
| <div id="iraqInputs"> | |
| <div class="form-group"> | |
| <label for="maritalStatus">Marital Status</label> | |
| <select id="maritalStatus"> | |
| <option value="single">Single</option> | |
| <option value="married">Married</option> | |
| <option value="married1">Married + 1 Child</option> | |
| <option value="married2" selected>Married + 2 Children</option> | |
| <option value="married3">Married + 3 Children</option> | |
| <option value="married4">Married + 4 Children</option> | |
| <option value="divorced">Divorced/Widowed</option> | |
| <option value="divorced1">Divorced/Widowed + 1 Child</option> | |
| <option value="divorced2">Divorced/Widowed + 2 Children</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="allowances-section"> | |
| <div class="allowance-header"> | |
| <h3><i class="fas fa-plus-circle"></i> Monthly Allowances</h3> | |
| <button class="add-allowance-btn" id="addAllowanceBtn"> | |
| <i class="fas fa-plus"></i> Add | |
| </button> | |
| </div> | |
| <div id="allowancesContainer"> | |
| <div class="allowance-item"> | |
| <select class="allowance-type"> | |
| <option value="food">Food Allowance</option> | |
| <option value="transport">Transportation</option> | |
| <option value="housing">Housing</option> | |
| <option value="incentive">Incentive/Commissions</option> | |
| <option value="other">Other</option> | |
| </select> | |
| <input type="number" class="allowance-amount" placeholder="Amount" value="200000"> | |
| <button class="remove-allowance"><i class="fas fa-times"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="calculate-btn" id="calculateBtn"> | |
| <i class="fas fa-calculator"></i> Calculate Net Salary | |
| </button> | |
| </div> | |
| <div class="result-section"> | |
| <h2 class="section-title"><i class="fas fa-chart-bar"></i> Salary Summary</h2> | |
| <div class="result-item"> | |
| <span class="result-label">Base Salary</span> | |
| <span class="result-value" id="baseSalaryResult">2,500,000 IQD</span> | |
| </div> | |
| <div class="result-item"> | |
| <span class="result-label">Total Allowances</span> | |
| <span class="result-value" id="totalAllowances">200,000 IQD</span> | |
| </div> | |
| <div class="highlight"> | |
| <div class="result-item"> | |
| <span class="result-label">Total Income</span> | |
| <span class="result-value" id="totalIncome">2,700,000 IQD</span> | |
| </div> | |
| </div> | |
| <h3 style="margin: 20px 0 10px; color: var(--accent);">Deductions</h3> | |
| <div class="result-item"> | |
| <span class="result-label" id="sosLabel">Social Security (SOS)</span> | |
| <span class="result-value" id="sos">125,000 IQD</span> | |
| </div> | |
| <div class="min-sos" id="sosMinNote"></div> | |
| <div class="result-item"> | |
| <span class="result-label">Taxable Amount</span> | |
| <span class="result-value" id="taxableAmount">1,050,000 IQD</span> | |
| </div> | |
| <div class="result-item"> | |
| <span class="result-label">Income Tax</span> | |
| <span class="result-value" id="incomeTax">125,000 IQD</span> | |
| </div> | |
| <div class="highlight"> | |
| <div class="result-item"> | |
| <span class="result-label">Total Deductions</span> | |
| <span class="result-value" id="totalDeductions">250,000 IQD</span> | |
| </div> | |
| </div> | |
| <div class="net-salary"> | |
| <div class="label">Your Net Salary</div> | |
| <div class="value" id="netSalary">2,450,000 IQD</div> | |
| </div> | |
| <div class="note-box"> | |
| <i class="fas fa-info-circle"></i> Social Security minimums: | |
| <ul style="margin-top: 8px; padding-left: 20px;"> | |
| <li>South/Central Iraq: 350,000 IQD/year (29,167 IQD/month)</li> | |
| <li>Kurdistan Region: 450,000 IQD/year (37,500 IQD/month)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="info-box"> | |
| <h3><i class="fas fa-info-circle"></i> How It Works</h3> | |
| <ul> | |
| <li><strong>Total Base Salary</strong> is your core monthly salary before any allowances</li> | |
| <li><strong>Social Security (SOS)</strong> is calculated as: | |
| <ul> | |
| <li>5% of Total Base Salary for South/Central Iraq (min 29,167 IQD/month)</li> | |
| <li>5% of (Total Base Salary/1.3) for Kurdistan Region (min 37,500 IQD/month)</li> | |
| </ul> | |
| </li> | |
| <li><strong>Taxable Amount</strong> is calculated after deducting SOS and non-taxable portions</li> | |
| <li><strong>Income Tax</strong> uses progressive brackets (3%, 5%, 10%, 15%) for South/Central Iraq and a flat 5% for KRI</li> | |
| <li>All <strong>Monthly Allowances</strong> are added to your total income and are fully taxable</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const regionBtns = document.querySelectorAll('.region-btn'); | |
| const iraqInputs = document.getElementById('iraqInputs'); | |
| const calculateBtn = document.getElementById('calculateBtn'); | |
| const addAllowanceBtn = document.getElementById('addAllowanceBtn'); | |
| const allowancesContainer = document.getElementById('allowancesContainer'); | |
| const sosLabel = document.getElementById('sosLabel'); | |
| const sosMinNote = document.getElementById('sosMinNote'); | |
| // Set initial region | |
| sosLabel.textContent = 'Social Security (5% of base)'; | |
| // Region toggle functionality | |
| regionBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| regionBtns.forEach(b => b.classList.remove('active')); | |
| this.classList.add('active'); | |
| if (this.dataset.region === 'iraq') { | |
| iraqInputs.style.display = 'block'; | |
| sosLabel.textContent = 'Social Security (5% of base)'; | |
| } else { | |
| iraqInputs.style.display = 'none'; | |
| sosLabel.textContent = 'Social Security (5% of base/1.3)'; | |
| } | |
| calculateSalary(); | |
| }); | |
| }); | |
| // Add allowance functionality | |
| addAllowanceBtn.addEventListener('click', function() { | |
| const allowanceItem = document.createElement('div'); | |
| allowanceItem.className = 'allowance-item'; | |
| allowanceItem.innerHTML = ` | |
| <select class="allowance-type"> | |
| <option value="food">Food Allowance</option> | |
| <option value="transport">Transportation</option> | |
| <option value="housing">Housing</option> | |
| <option value="incentive">Incentive/Commissions</option> | |
| <option value="other">Other</option> | |
| </select> | |
| <input type="number" class="allowance-amount" placeholder="Amount"> | |
| <button class="remove-allowance"><i class="fas fa-times"></i></button> | |
| `; | |
| allowancesContainer.appendChild(allowanceItem); | |
| // Add event listener to the new remove button | |
| allowanceItem.querySelector('.remove-allowance').addEventListener('click', function() { | |
| allowanceItem.remove(); | |
| calculateSalary(); | |
| }); | |
| // Add event listener to the new inputs | |
| allowanceItem.querySelectorAll('input, select').forEach(input => { | |
| input.addEventListener('input', calculateSalary); | |
| }); | |
| }); | |
| // Add event listeners to existing remove buttons | |
| document.querySelectorAll('.remove-allowance').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| this.closest('.allowance-item').remove(); | |
| calculateSalary(); | |
| }); | |
| }); | |
| // Set up event listeners for inputs | |
| const inputs = document.querySelectorAll('input, select'); | |
| inputs.forEach(input => { | |
| input.addEventListener('input', calculateSalary); | |
| }); | |
| // Calculation function | |
| function calculateSalary() { | |
| const isIraq = document.querySelector('.region-btn.active').dataset.region === 'iraq'; | |
| const baseSalary = parseFloat(document.getElementById('baseSalary').value) || 0; | |
| // Calculate total allowances | |
| let totalAllowances = 0; | |
| document.querySelectorAll('.allowance-item').forEach(item => { | |
| const amount = parseFloat(item.querySelector('.allowance-amount').value) || 0; | |
| totalAllowances += amount; | |
| }); | |
| // Calculate total income | |
| const totalIncome = baseSalary + totalAllowances; | |
| if (isIraq) { | |
| calculateIraqSalary(baseSalary, totalAllowances, totalIncome); | |
| } else { | |
| calculateKriSalary(baseSalary, totalAllowances, totalIncome); | |
| } | |
| } | |
| function calculateIraqSalary(baseSalary, totalAllowances, totalIncome) { | |
| const maritalStatus = document.getElementById('maritalStatus').value; | |
| // Calculate SOS (5% of base, min 29,167 IQD/month) | |
| const calculatedSos = baseSalary * 0.05; | |
| const minSosIraq = 350000 / 12; // 29,167 IQD/month | |
| const sos = Math.max(calculatedSos, minSosIraq); | |
| // Non-taxable portion (30% of base) | |
| const nonTaxablePortion = baseSalary * 0.3; | |
| // Calculate taxable amount | |
| let taxableAmount = totalIncome - nonTaxablePortion - sos; | |
| // Apply marital status deductions | |
| const maritalDeductions = { | |
| single: 2500000 / 12, | |
| married: 4500000 / 12, | |
| married1: (4500000 + 200000) / 12, | |
| married2: (4500000 + 400000) / 12, | |
| married3: (4500000 + 600000) / 12, | |
| married4: (4500000 + 800000) / 12, | |
| divorced: 3200000 / 12, | |
| divorced1: (3200000 + 200000) / 12, | |
| divorced2: (3200000 + 400000) / 12 | |
| }; | |
| const maritalDeduction = maritalDeductions[maritalStatus] || 0; | |
| taxableAmount -= maritalDeduction; | |
| if (taxableAmount < 0) taxableAmount = 0; | |
| // Apply tax brackets | |
| let incomeTax = 0; | |
| // Tax brackets (monthly) | |
| const brackets = [ | |
| { limit: 250000 / 12, rate: 0.03 }, | |
| { limit: 500000 / 12, rate: 0.05 }, | |
| { limit: 1000000 / 12, rate: 0.10 }, | |
| { rate: 0.15 } // Above 1,000,000 IQD | |
| ]; | |
| let remaining = taxableAmount; | |
| let prevLimit = 0; | |
| for (let i = 0; i < brackets.length; i++) { | |
| if (remaining <= 0) break; | |
| const bracket = brackets[i]; | |
| let taxableInBracket = 0; | |
| if (bracket.limit) { | |
| if (remaining > (bracket.limit - prevLimit)) { | |
| taxableInBracket = bracket.limit - prevLimit; | |
| remaining -= taxableInBracket; | |
| } else { | |
| taxableInBracket = remaining; | |
| remaining = 0; | |
| } | |
| } else { | |
| // Last bracket (no upper limit) | |
| taxableInBracket = remaining; | |
| remaining = 0; | |
| } | |
| incomeTax += taxableInBracket * bracket.rate; | |
| prevLimit = bracket.limit || 0; | |
| } | |
| // Calculate net salary | |
| const totalDeductions = sos + incomeTax; | |
| const netSalary = totalIncome - totalDeductions; | |
| // Update UI | |
| updateResults(baseSalary, totalAllowances, totalIncome, sos, taxableAmount, | |
| incomeTax, totalDeductions, netSalary); | |
| // Update SOS note | |
| if (calculatedSos < minSosIraq) { | |
| sosMinNote.textContent = `Applied minimum: ${formatCurrency(minSosIraq)}/month`; | |
| sosMinNote.style.display = 'block'; | |
| } else { | |
| sosMinNote.style.display = 'none'; | |
| } | |
| } | |
| function calculateKriSalary(baseSalary, totalAllowances, totalIncome) { | |
| // Calculate base for KRI (gross/1.3) | |
| const kriBase = baseSalary / 1.3; | |
| // Calculate SOS (5% of kriBase, min 37,500 IQD/month) | |
| const calculatedSos = kriBase * 0.05; | |
| const minSosKri = 450000 / 12; // 37,500 IQD/month | |
| const sos = Math.max(calculatedSos, minSosKri); | |
| // Calculate taxable amount (base - 1,000,000 + allowances) | |
| let taxableAmount = Math.max(0, kriBase - 1000000) + totalAllowances; | |
| // Calculate income tax (5% of taxable amount) | |
| const incomeTax = taxableAmount * 0.05; | |
| // Calculate net salary | |
| const totalDeductions = sos + incomeTax; | |
| const netSalary = totalIncome - totalDeductions; | |
| // Update UI | |
| updateResults(baseSalary, totalAllowances, totalIncome, sos, taxableAmount, | |
| incomeTax, totalDeductions, netSalary); | |
| // Update SOS note | |
| if (calculatedSos < minSosKri) { | |
| sosMinNote.textContent = `Applied minimum: ${formatCurrency(minSosKri)}/month`; | |
| sosMinNote.style.display = 'block'; | |
| } else { | |
| sosMinNote.style.display = 'none'; | |
| } | |
| } | |
| function updateResults(baseSalary, totalAllowances, totalIncome, sos, | |
| taxableAmount, incomeTax, totalDeductions, netSalary) { | |
| document.getElementById('baseSalaryResult').textContent = formatCurrency(baseSalary); | |
| document.getElementById('totalAllowances').textContent = formatCurrency(totalAllowances); | |
| document.getElementById('totalIncome').textContent = formatCurrency(totalIncome); | |
| document.getElementById('sos').textContent = formatCurrency(sos); | |
| document.getElementById('taxableAmount').textContent = formatCurrency(taxableAmount); | |
| document.getElementById('incomeTax').textContent = formatCurrency(incomeTax); | |
| document.getElementById('totalDeductions').textContent = formatCurrency(totalDeductions); | |
| document.getElementById('netSalary').textContent = formatCurrency(netSalary); | |
| } | |
| function formatCurrency(amount) { | |
| return new Intl.NumberFormat('en-IQ', { | |
| style: 'currency', | |
| currency: 'IQD', | |
| maximumFractionDigits: 0 | |
| }).format(amount); | |
| } | |
| // Set up calculate button | |
| calculateBtn.addEventListener('click', calculateSalary); | |
| // Initial calculation | |
| calculateSalary(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |