Spaces:
Running
Running
Create a full fleged android app with nice visuals based on Indian income tax calculation with latest rules for both current and next fy rs - Initial Deployment
fa40e29 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Indian Income Tax Calculator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .tax-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .tax-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold">TaxCalc India</h1> | |
| <p class="text-indigo-100">Smart Income Tax Calculator</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition"> | |
| <i data-feather="info"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8 -mt-12"> | |
| <!-- Calculator Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden tax-card" data-aos="fade-up"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <h2 class="text-xl font-semibold">Income Tax Calculator</h2> | |
| <p class="text-indigo-100">FY 2023-24 (AY 2024-25) & FY 2024-25 (AY 2025-26)</p> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Input Form --> | |
| <form id="taxForm"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Financial Year</label> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button type="button" id="fy2024" class="py-3 px-4 rounded-lg border border-indigo-200 bg-indigo-50 text-indigo-700 font-medium active-fy"> | |
| 2023-24 | |
| </button> | |
| <button type="button" id="fy2025" class="py-3 px-4 rounded-lg border border-gray-200 bg-gray-50 text-gray-700 font-medium"> | |
| 2024-25 | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Tax Regime</label> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button type="button" id="newRegime" class="py-3 px-4 rounded-lg border border-indigo-200 bg-indigo-50 text-indigo-700 font-medium active-regime"> | |
| New Regime | |
| </button> | |
| <button type="button" id="oldRegime" class="py-3 px-4 rounded-lg border border-gray-200 bg-gray-50 text-gray-700 font-medium"> | |
| Old Regime | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="income" class="block text-gray-700 font-medium mb-2">Annual Income (₹)</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">₹</span> | |
| <input type="number" id="income" class="w-full pl-8 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter your annual income" required> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="ageGroup" class="block text-gray-700 font-medium mb-2">Age Group</label> | |
| <select id="ageGroup" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="below60">Below 60 years</option> | |
| <option value="60to80">60 to 80 years</option> | |
| <option value="above80">Above 80 years</option> | |
| </select> | |
| </div> | |
| <!-- Old Regime Deductions (Hidden by default) --> | |
| <div id="oldRegimeDeductions" class="hidden mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Deductions (Old Regime)</label> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="hra" class="block text-gray-600 text-sm mb-1">HRA Exemption (₹)</label> | |
| <input type="number" id="hra" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter HRA exemption"> | |
| </div> | |
| <div> | |
| <label for="section80c" class="block text-gray-600 text-sm mb-1">Section 80C (₹)</label> | |
| <input type="number" id="section80c" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Max ₹1,50,000" max="150000"> | |
| </div> | |
| <div> | |
| <label for="section80d" class="block text-gray-600 text-sm mb-1">Section 80D (₹)</label> | |
| <input type="number" id="section80d" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Health insurance premium"> | |
| </div> | |
| <div> | |
| <label for="otherDeductions" class="block text-gray-600 text-sm mb-1">Other Deductions (₹)</label> | |
| <input type="number" id="otherDeductions" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Other deductions"> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full gradient-bg text-white py-3 px-6 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center"> | |
| <i data-feather="calculator" class="mr-2"></i> Calculate Tax | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Results Section (Initially Hidden) --> | |
| <div id="resultsSection" class="hidden mt-8" data-aos="fade-up"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden tax-card"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <h2 class="text-xl font-semibold">Tax Calculation Results</h2> | |
| <p class="text-indigo-100" id="resultSubtitle">For FY 2023-24 (New Regime)</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-gray-500 text-sm">Annual Income</p> | |
| <p class="text-2xl font-bold" id="annualIncome">₹0</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-gray-500 text-sm">Taxable Income</p> | |
| <p class="text-2xl font-bold" id="taxableIncome">₹0</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Tax Breakdown</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Income Tax</span> | |
| <span class="font-medium" id="incomeTax">₹0</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Surcharge</span> | |
| <span class="font-medium" id="surcharge">₹0</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Health & Education Cess (4%)</span> | |
| <span class="font-medium" id="cess">₹0</span> | |
| </div> | |
| <div class="border-t border-gray-200 my-2"></div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600 font-semibold">Total Tax Liability</span> | |
| <span class="text-lg font-bold text-indigo-600" id="totalTax">₹0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Monthly Breakdown</h3> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <p class="text-xs text-indigo-600">Monthly Income</p> | |
| <p class="font-medium" id="monthlyIncome">₹0</p> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <p class="text-xs text-indigo-600">Monthly Tax</p> | |
| <p class="font-medium" id="monthlyTax">₹0</p> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <p class="text-xs text-indigo-600">Take Home</p> | |
| <p class="font-medium" id="takeHome">₹0</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="resetBtn" class="w-full border border-indigo-500 text-indigo-600 py-3 px-6 rounded-lg font-medium hover:bg-indigo-50 transition flex items-center justify-center"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> Calculate Again | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tax Slabs Information --> | |
| <div class="mt-8" data-aos="fade-up"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden tax-card"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <h2 class="text-xl font-semibold">Tax Slabs Information</h2> | |
| <p class="text-indigo-100">Current and Next Financial Year</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">New Tax Regime (FY 2023-24)</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Income Range</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Tax Rate</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Up to ₹3,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">0%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">₹3,00,001 - ₹6,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">5%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">₹6,00,001 - ₹9,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">10%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">₹9,00,001 - ₹12,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">₹12,00,001 - ₹15,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">20%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Above ₹15,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">30%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Old Tax Regime (FY 2023-24)</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Income Range</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Tax Rate</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Up to ₹2,50,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">0%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">₹2,50,001 - ₹5,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">5%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">₹5,00,001 - ₹10,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">20%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Above ₹10,00,000</td> | |
| <td class="px-4 py-2 whitespace-nowrap">30%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| <p><span class="font-medium">Note:</span> Rebate under Section 87A available up to ₹12,500 (₹25,000 for FY 2024-25) for income up to ₹5,00,000 in both regimes.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-50 mt-12"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="text-center text-gray-500 text-sm"> | |
| <p>© 2023 TaxCalc India. All rights reserved.</p> | |
| <p class="mt-2">Disclaimer: This calculator provides estimates only. Consult a tax professional for exact calculations.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize AOS and Feather Icons | |
| AOS.init(); | |
| feather.replace(); | |
| // DOM Elements | |
| const fy2024Btn = document.getElementById('fy2024'); | |
| const fy2025Btn = document.getElementById('fy2025'); | |
| const newRegimeBtn = document.getElementById('newRegime'); | |
| const oldRegimeBtn = document.getElementById('oldRegime'); | |
| const oldRegimeDeductions = document.getElementById('oldRegimeDeductions'); | |
| const taxForm = document.getElementById('taxForm'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const resetBtn = document.getElementById('resetBtn'); | |
| // Current selections | |
| let currentFY = '2024'; | |
| let currentRegime = 'new'; | |
| // Event Listeners | |
| fy2024Btn.addEventListener('click', () => { | |
| currentFY = '2024'; | |
| fy2024Btn.classList.add('border-indigo-200', 'bg-indigo-50', 'text-indigo-700'); | |
| fy2024Btn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-700'); | |
| fy2025Btn.classList.add('border-gray-200', 'bg-gray-50', 'text-gray-700'); | |
| fy2025Btn.classList.remove('border-indigo-200', 'bg-indigo-50', 'text-indigo-700'); | |
| }); | |
| fy2025Btn.addEventListener('click', () => { | |
| currentFY = '2025'; | |
| fy2025Btn.classList.add('border-indigo-200', 'bg-indigo-50', 'text-indigo-700'); | |
| fy2025Btn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-700'); | |
| fy2024Btn.classList.add('border-gray-200', 'bg-gray-50', 'text-gray-700'); | |
| fy2024Btn.classList.remove('border-indigo-200', 'bg-indigo-50', 'text-indigo-700'); | |
| }); | |
| newRegimeBtn.addEventListener('click', () => { | |
| currentRegime = 'new'; | |
| newRegimeBtn.classList.add('border-indigo-200', 'bg-indigo-50', 'text-indigo-700'); | |
| newRegimeBtn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-700'); | |
| oldRegimeBtn.classList.add('border-gray-200', 'bg-gray-50', 'text-gray-700'); | |
| oldRegimeBtn.classList.remove('border-indigo-200', 'bg-indigo-50', 'text-indigo-700'); | |
| oldRegimeDeductions.classList.add('hidden'); | |
| }); | |
| oldRegimeBtn.addEventListener('click', () => { | |
| currentRegime = 'old'; | |
| oldRegimeBtn.classList.add('border-indigo-200', 'bg-indigo-50', 'text-indigo-700'); | |
| oldRegimeBtn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-700'); | |
| newRegimeBtn.classList.add('border-gray-200', 'bg-gray-50', 'text-gray-700'); | |
| newRegimeBtn.classList.remove('border-indigo-200', 'bg-indigo-50', 'text-indigo-700'); | |
| oldRegimeDeductions.classList.remove('hidden'); | |
| }); | |
| taxForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| calculateTax(); | |
| }); | |
| resetBtn.addEventListener('click', () => { | |
| resultsSection.classList.add('hidden'); | |
| taxForm.reset(); | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Tax Calculation Function | |
| function calculateTax() { | |
| const income = parseFloat(document.getElementById('income').value); | |
| const ageGroup = document.getElementById('ageGroup').value; | |
| let taxableIncome = income; | |
| let deductions = 0; | |
| // Apply deductions for old regime | |
| if (currentRegime === 'old') { | |
| const hra = parseFloat(document.getElementById('hra').value) || 0; | |
| const section80c = Math.min(parseFloat(document.getElementById('section80c').value) || 0, 150000); | |
| const section80d = parseFloat(document.getElementById('section80d').value) || 0; | |
| const otherDeductions = parseFloat(document.getElementById('otherDeductions').value) || 0; | |
| deductions = hra + section80c + section80d + otherDeductions; | |
| taxableIncome = Math.max(0, income - deductions); | |
| } | |
| // Calculate tax based on regime and FY | |
| let tax = 0; | |
| let rebate = 0; | |
| if (currentRegime === 'new') { | |
| // New regime calculation for FY 2023-24 | |
| if (currentFY === '2024') { | |
| if (taxableIncome <= 300000) { | |
| tax = 0; | |
| } else if (taxableIncome <= 600000) { | |
| tax = (taxableIncome - 300000) * 0.05; | |
| } else if (taxableIncome <= 900000) { | |
| tax = 15000 + (taxableIncome - 600000) * 0.10; | |
| } else if (taxableIncome <= 1200000) { | |
| tax = 45000 + (taxableIncome - 900000) * 0.15; | |
| } else if (taxableIncome <= 1500000) { | |
| tax = 90000 + (taxableIncome - 1200000) * 0.20; | |
| } else { | |
| tax = 150000 + (taxableIncome - 1500000) * 0.30; | |
| } | |
| // Rebate under Section 87A for new regime | |
| if (taxableIncome <= 700000) { | |
| rebate = Math.min(tax, 25000); | |
| } | |
| } | |
| // New regime calculation for FY 2024-25 | |
| else { | |
| if (taxableIncome <= 300000) { | |
| tax = 0; | |
| } else if (taxableIncome <= 600000) { | |
| tax = (taxableIncome - 300000) * 0.05; | |
| } else if (taxableIncome <= 900000) { | |
| tax = 15000 + (taxableIncome - 600000) * 0.10; | |
| } else if (taxableIncome <= 1200000) { | |
| tax = 45000 + (taxableIncome - 900000) * 0.15; | |
| } else if (taxableIncome <= 1500000) { | |
| tax = 90000 + (taxableIncome - 1200000) * 0.20; | |
| } else { | |
| tax = 150000 + (taxableIncome - 1500000) * 0.30; | |
| } | |
| // Rebate under Section 87A for new regime | |
| if (taxableIncome <= 700000) { | |
| rebate = Math.min(tax, 25000); | |
| } | |
| } | |
| } | |
| // Old regime calculation | |
| else { | |
| let basicExemption = 250000; | |
| // Higher exemption for senior citizens | |
| if (ageGroup === '60to80') { | |
| basicExemption = 300000; | |
| } else if (ageGroup === 'above80') { | |
| basicExemption = 500000; | |
| } | |
| taxableIncome = Math.max(0, taxableIncome - basicExemption); | |
| if (taxableIncome <= 250000) { | |
| tax = 0; | |
| } else if (taxableIncome <= 500000) { | |
| tax = (taxableIncome - 250000) * 0.05; | |
| } else if (taxableIncome <= 1000000) { | |
| tax = 12500 + (taxableIncome - 500000) * 0.20; | |
| } else { | |
| tax = 112500 + (taxableIncome - 1000000) * 0.30; | |
| } | |
| // Rebate under Section 87A for old regime | |
| if (income <= 500000) { | |
| rebate = Math.min(tax, 12500); | |
| } | |
| } | |
| // Apply rebate | |
| tax = Math.max(0, tax - rebate); | |
| // Calculate surcharge | |
| let surcharge = 0; | |
| if (taxableIncome > 5000000 && taxableIncome <= 10000000) { | |
| surcharge = tax * 0.10; | |
| } else if (taxableIncome > 10000000 && taxableIncome <= 20000000) { | |
| surcharge = tax * 0.15; | |
| } else if (taxableIncome > 20000000 && taxableIncome <= 50000000) { | |
| surcharge = tax * 0.25; | |
| } else if (taxableIncome > 50000000) { | |
| surcharge = tax * 0.37; | |
| } | |
| // Calculate health and education cess (4%) | |
| const cess = (tax + surcharge) * 0.04; | |
| // Total tax liability | |
| const totalTax = tax + surcharge + cess; | |
| // Monthly calculations | |
| const monthlyIncome = income / 12; | |
| const monthlyTax = totalTax / 12; | |
| const takeHome = monthlyIncome - monthlyTax; | |
| // Update results | |
| document.getElementById('annualIncome').textContent = `₹${income.toLocaleString('en-IN')}`; | |
| document.getElementById('taxableIncome').textContent = `₹${taxableIncome.toLocaleString('en-IN')}`; | |
| document.getElementById('incomeTax').textContent = `₹${tax.toLocaleString('en-IN')}`; | |
| document.getElementById('surcharge').textContent = `₹${surcharge.toLocaleString('en-IN')}`; | |
| document.getElementById('cess').textContent = `₹${cess.toLocaleString('en-IN')}`; | |
| document.getElementById('totalTax').textContent = `₹${totalTax.toLocaleString('en-IN')}`; | |
| document.getElementById('monthlyIncome').textContent = `₹${monthlyIncome.toLocaleString('en-IN')}`; | |
| document.getElementById('monthlyTax').textContent = `₹${monthlyTax.toLocaleString('en-IN')}`; | |
| document.getElementById('takeHome').textContent = `₹${takeHome.toLocaleString('en-IN')}`; | |
| // Update result subtitle | |
| const fyText = currentFY === '2024' ? '2023-24' : '2024-25'; | |
| const regimeText = currentRegime === 'new' ? 'New Regime' : 'Old Regime'; | |
| document.getElementById('resultSubtitle').textContent = `For FY ${fyText} (${regimeText})`; | |
| // Show results | |
| resultsSection.classList.remove('hidden'); | |
| // Scroll to results | |
| setTimeout(() => { | |
| resultsSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 100); | |
| } | |
| </script> | |
| </body> | |
| </html> | |