| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Disha Wealth – MF Tool Cluster</title> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| </head> |
| <body class="bg-gray-50 text-gray-800 antialiased font-sans"> |
|
|
| |
| <header class="bg-[#1B4F72] text-white shadow-md py-6 px-8 text-center relative"> |
| <h1 class="text-3xl font-bold tracking-tight">🧭 Disha Wealth</h1> |
| <p class="text-blue-200 text-sm mt-1">Your Compass to Financial Freedom</p> |
| <div class="absolute bottom-2 right-4 text-xs text-blue-100 opacity-75">Advisor: Divya Shah | ARN-339305</div> |
| </header> |
|
|
| <main class="max-w-6xl mx-auto my-8 px-4"> |
| |
| <div class="flex border-b border-gray-200 mb-6 bg-white rounded-t-lg shadow-sm"> |
| <button id="tab-generator-btn" class="flex-1 py-4 px-6 text-center font-medium border-b-2 border-[#1B4F72] text-[#1B4F72] focus:outline-none transition-all"> |
| 🏠 Proposal Parameters |
| </button> |
| <button id="tab-nav-btn" class="flex-1 py-4 px-6 text-center font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 focus:outline-none transition-all"> |
| 🔍 NAV History Categories |
| </button> |
| </div> |
|
|
| |
| <section id="page-generator" class="space-y-6"> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
| <h3 class="text-lg font-bold text-[#1B4F72] mb-4 border-b pb-2">📋 Client Details & Assumptions</h3> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| <div> |
| <label class="block text-xs font-semibold uppercase text-gray-500 mb-1">Client Name</label> |
| <input type="text" id="client_name" value="Divya" class="w-full bg-gray-50 border border-gray-200 rounded p-2 focus:ring-1 focus:ring-[#1B4F72] outline-none"> |
| </div> |
| <div> |
| <label class="block text-xs font-semibold uppercase text-gray-500 mb-1">Monthly SIP (Rs.)</label> |
| <input type="number" id="monthly_sip" value="10000" step="5000" class="w-full bg-gray-50 border border-gray-200 rounded p-2 focus:ring-1 focus:ring-[#1B4F72] outline-none"> |
| </div> |
| <div> |
| <label class="block text-xs font-semibold uppercase text-gray-500 mb-1">Annual Top-Up (Rs.)</label> |
| <input type="number" id="annual_topup" value="1000" step="1000" class="w-full bg-gray-50 border border-gray-200 rounded p-2 focus:ring-1 focus:ring-[#1B4F72] outline-none"> |
| </div> |
| <div> |
| <label class="block text-xs font-semibold uppercase text-gray-500 mb-1">Horizon (Years)</label> |
| <input type="number" id="horizon_yrs" value="15" min="1" max="40" class="w-full bg-gray-50 border border-gray-200 rounded p-2 focus:ring-1 focus:ring-[#1B4F72] outline-none"> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <button onclick="calculateStaticProjection()" class="w-full bg-[#1B4F72] text-white font-semibold py-3 px-4 rounded shadow-md hover:bg-opacity-90 transition-all"> |
| 🚀 Run Wealth Compounding Model |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="projection-output-card" class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hidden"> |
| <h3 class="text-lg font-bold text-[#1B4F72] mb-4">📈 Compound Growth Estimates Table</h3> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-left text-sm border-collapse"> |
| <thead> |
| <tr class="bg-[#1B4F72] text-white font-medium text-xs uppercase"> |
| <th class="p-3 rounded-tl">Year Milestone</th> |
| <th class="p-3">Total Cumulative Principal (Rs.)</th> |
| <th class="p-3">Probable Maturity Balance (Rs.)</th> |
| <th class="p-3 rounded-tr">Wealth Multiple Factor</th> |
| </tr> |
| </thead> |
| <tbody id="projection-table-body" class="divide-y divide-gray-100"> |
| |
| </tbody> |
| </table> |
| </div> |
| <p class="text-xs text-gray-400 mt-3 italic">Calculations assume static target benchmark compounding vector matching profile inputs.</p> |
| </div> |
| </section> |
|
|
| |
| <section id="page-nav-history" class="space-y-6 hidden"> |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
| <h3 class="text-lg font-bold text-[#1B4F72] mb-4 border-b pb-2">🔍 Granular Classification Workspace</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Step 1: Select Specific Fund Category</label> |
| <select id="category-selector" class="w-full bg-gray-50 border border-gray-200 rounded p-3 text-gray-700 outline-none focus:ring-1 focus:ring-[#1B4F72]"> |
| <option>Equity Large</option> |
| <option>Equity Large and Mid</option> |
| <option>Equity Multicap</option> |
| <option>Equity Small</option> |
| <option>Equity Flexicap</option> |
| <option>Hybrid Conservative</option> |
| <option>Hybrid Balanced</option> |
| <option>Hybrid Aggressive</option> |
| <option>Debt</option> |
| </select> |
| </div> |
| <div> |
| <button onclick="simulateCategoryRegistryFetch()" class="w-full bg-[#1B4F72] text-white font-semibold py-3 px-4 rounded shadow-md hover:bg-opacity-90 transition-all"> |
| 📊 Load Matching Registry Schemes |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="category-table-container" class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hidden"> |
| <div class="flex items-center justify-between mb-4"> |
| <h4 id="category-table-title" class="text-base font-bold text-gray-800"></h4> |
| <span class="text-xs bg-green-100 text-green-800 font-semibold px-2 py-1 rounded">Live Client Mode</span> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-left text-xs border-collapse"> |
| <thead> |
| <tr class="bg-gray-100 text-gray-700 font-semibold uppercase tracking-wider border-b border-gray-200"> |
| <th class="p-3">Sample Matching Scheme Name</th> |
| <th class="p-3">Inferred Asset Cluster</th> |
| <th class="p-3">Historical 3Y CAGR</th> |
| <th class="p-3">Historical 5Y CAGR</th> |
| <th class="p-3">Max Drawdown Risk</th> |
| </tr> |
| </thead> |
| <tbody id="category-table-body" class="divide-y divide-gray-100 text-gray-600"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <script> |
| |
| const tabGenBtn = document.getElementById('tab-generator-btn'); |
| const tabNavBtn = document.getElementById('tab-nav-btn'); |
| const pageGen = document.getElementById('page-generator'); |
| const pageNav = document.getElementById('page-nav-history'); |
| |
| tabGenBtn.addEventListener('click', () => { |
| toggleTabs(tabGenBtn, tabNavBtn, pageGen, pageNav); |
| }); |
| |
| tabNavBtn.addEventListener('click', () => { |
| toggleTabs(tabNavBtn, tabGenBtn, pageNav, pageGen); |
| }); |
| |
| function toggleTabs(activeBtn, inactiveBtn, activePage, inactivePage) { |
| activeBtn.classList.remove('border-transparent', 'text-gray-500'); |
| activeBtn.classList.add('border-[#1B4F72]', 'text-[#1B4F72]'); |
| inactiveBtn.classList.remove('border-[#1B4F72]', 'text-[#1B4F72]'); |
| inactiveBtn.classList.add('border-transparent', 'text-gray-500'); |
| activePage.classList.remove('hidden'); |
| inactivePage.classList.add('hidden'); |
| } |
| |
| |
| function calculateStaticProjection() { |
| const principalInput = parseFloat(document.getElementById('monthly_sip').value) || 0; |
| const topupInput = parseFloat(document.getElementById('annual_topup').value) || 0; |
| const timelineYears = parseInt(document.getElementById('horizon_yrs').value) || 15; |
| const assumedRate = 0.12; |
| |
| const tbody = document.getElementById('projection-table-body'); |
| tbody.innerHTML = ''; |
| |
| const milestones = [3, 5, 8, 10, 15, 20]; |
| |
| milestones.forEach(years => { |
| if (years <= timelineYears || years === 20) { |
| |
| const months = years * 12; |
| const monthlyRate = assumedRate / 12; |
| |
| |
| let totalInvested = (principalInput * months) + (topupInput * years); |
| let probableValue = principalInput * (((Math.pow(1 + monthlyRate, months) - 1) / monthlyRate) * (1 + monthlyRate)); |
| |
| if(topupInput > 0) { |
| for(let i = 0; i < years; i++) { |
| let remainingMonths = (years - i) * 12; |
| probableValue += (topupInput / 12) * (((Math.pow(1 + monthlyRate, remainingMonths) - 1) / monthlyRate) * (1 + monthlyRate)); |
| } |
| } |
| |
| const multiple = (probableValue / totalInvested).toFixed(1); |
| |
| const row = ` |
| <tr class="hover:bg-gray-50 transition-colors"> |
| <td class="p-3 font-semibold text-gray-700">${years} Years</td> |
| <td class="p-3">Rs. ${Math.round(totalInvested).toLocaleString('en-IN')}</td> |
| <td class="p-3 font-bold text-emerald-700">Rs. ${Math.round(probableValue).toLocaleString('en-IN')}</td> |
| <td class="p-3"><span class="bg-blue-50 text-blue-700 font-semibold px-2 py-0.5 rounded text-xs">${multiple}x</span></td> |
| </tr> |
| `; |
| tbody.innerHTML += row; |
| } |
| }); |
| |
| document.getElementById('projection-output-card').classList.remove('hidden'); |
| } |
| |
| |
| function simulateCategoryRegistryFetch() { |
| const category = document.getElementById('category-selector').value; |
| const container = document.getElementById('category-table-container'); |
| const title = document.getElementById('category-table-title'); |
| const tbody = document.getElementById('category-table-body'); |
| |
| title.innerText = `Registry Audit Profiles — Target Segment: ${category}`; |
| tbody.innerHTML = ''; |
| |
| |
| const baseMockData = { |
| "Equity Large": [ |
| { name: "HDFC Top 100 Equal Weight Fund", asset: "Equity", cagr3: "18.4%", cagr5: "14.2%", dd: "-11.2%" }, |
| { name: "ICICI Prudential Bluechip Index Registry", asset: "Equity", cagr3: "19.1%", cagr5: "15.0%", dd: "-10.5%" } |
| ], |
| "Equity Large and Mid": [ |
| { name: "Mirae Asset Large & Midcap Capital Scale", asset: "Equity", cagr3: "22.3%", cagr5: "16.8%", dd: "-14.1%" } |
| ], |
| "Equity Small": [ |
| { name: "Nippon India Small Cap Alpha Multiplier", asset: "Equity", cagr3: "31.2%", cagr5: "24.5%", dd: "-19.8%" }, |
| { name: "Bandhan Micro Cap Long Opportunity", asset: "Equity", cagr3: "28.7%", cagr5: "21.1%", dd: "-22.4%" } |
| ], |
| "Hybrid Balanced": [ |
| { name: "HDFC Balanced Advantage Value Master", asset: "Hybrid", cagr3: "16.5%", cagr5: "13.1%", dd: "-8.4%" } |
| ], |
| "Debt": [ |
| { name: "ICICI Prudential Gilt Capital Lock-In", asset: "Debt", cagr3: "7.2%", cagr5: "6.9%", dd: "-2.1%" } |
| ] |
| }; |
| |
| const dataToRender = baseMockData[category] || [ |
| { name: `Sample Core ${category} Registry Strategy`, asset: "Mixed Class", cagr3: "14.5%", cagr5: "12.0%", dd: "-9.5%" } |
| ]; |
| |
| dataToRender.forEach(item => { |
| const row = ` |
| <tr class="hover:bg-gray-50 border-b border-gray-100 transition-colors"> |
| <td class="p-3 font-medium text-gray-800">${item.name}</td> |
| <td class="p-3">${item.asset}</td> |
| <td class="p-3 font-semibold text-emerald-600">${item.cagr3}</td> |
| <td class="p-3 text-emerald-600">${item.cagr5}</td> |
| <td class="p-3 text-rose-600 font-medium">${item.dd}</td> |
| </tr> |
| `; |
| tbody.innerHTML += row; |
| }); |
| |
| container.classList.remove('hidden'); |
| } |
| </script> |
| </body> |
| </html> |
