Spaces:

buosam
/

SalaryCalculation

Running

App Files Files Community

buosam commited on Aug 11, 2025

Commit

20cc475

verified ·

1 Parent(s): b7597f0

Update index.html

Browse files

Files changed (1) hide show

index.html +736 -19

index.html CHANGED Viewed

@@ -1,19 +1,736 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>