Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fon Getiri Hesaplayıcı</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%); | |
| } | |
| .result-card { | |
| box-shadow: 0 10px 30px rgba(0, 13, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| height: 8px; | |
| border-radius: 4px; | |
| background: #e0e0e0; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #4f46e5; | |
| cursor: pointer; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| .tab-active { | |
| position: relative; | |
| } | |
| .tab-active:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: #4f46e5; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-3">Fon Getiri Hesaplayıcı</h1> | |
| <p class="text-lg text-gray-600">Yatırımınızın potansiyel getirisini kolayca hesaplayın</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> | |
| <div class="flex border-b border-gray-200"> | |
| <button id="simple-tab" class="tab-active px-6 py-4 font-medium text-indigo-600 focus:outline-none">Basit Hesaplayıcı</button> | |
| <button id="advanced-tab" class="px-6 py-4 font-medium text-gray-500 hover:text-indigo-600 focus:outline-none">Gelişmiş Hesaplayıcı</button> | |
| </div> | |
| <div id="simple-calculator" class="p-8"> | |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> | |
| <div> | |
| <label for="initial-investment" class="block text-sm font-medium text-gray-700 mb-2">Başlangıç Yatırımı (₺)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-lira-sign text-gray-400"></i> | |
| </div> | |
| <input type="number" id="initial-investment" class="pl-8 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 border" value="10000" min="0"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="monthly-contribution" class="block text-sm font-medium text-gray-700 mb-2">Aylık Katkı (₺)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-lira-sign text-gray-400"></i> | |
| </div> | |
| <input type="number" id="monthly-contribution" class="pl-8 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 border" value="500" min="0"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="annual-return" class="block text-sm font-medium text-gray-700 mb-2">Beklenen Yıllık Getiri (%)</label> | |
| <div class="relative"> | |
| <input type="range" id="annual-return-slider" class="w-full" min="1" max="30" step="0.5" value="7"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">1%</span> | |
| <span id="annual-return-value" class="font-medium">7%</span> | |
| <span class="text-xs text-gray-500">30%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="investment-period" class="block text-sm font-medium text-gray-700 mb-2">Yatırım Süresi (Yıl)</label> | |
| <div class="relative"> | |
| <input type="range" id="investment-period-slider" class="w-full" min="1" max="40" step="1" value="10"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">1</span> | |
| <span id="investment-period-value" class="font-medium">10</span> | |
| <span class="text-xs text-gray-500">40</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="calculate-btn" class="gradient-bg text-white px-8 py-3 rounded-full font-medium hover:opacity-90 transition duration-300 shadow-lg flex items-center"> | |
| <i class="fas fa-calculator mr-2"></i> Getiriyi Hesapla | |
| </button> | |
| </div> | |
| </div> | |
| <div id="advanced-calculator" class="p-8 hidden"> | |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> | |
| <div> | |
| <label for="initial-investment-adv" class="block text-sm font-medium text-gray-700 mb-2">Başlangıç Yatırımı (₺)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-lira-sign text-gray-400"></i> | |
| </div> | |
| <input type="number" id="initial-investment-adv" class="pl-8 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 border" value="10000" min="0"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="contribution-frequency" class="block text-sm font-medium text-gray-700 mb-2">Katkı Sıklığı</label> | |
| <select id="contribution-frequency" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 border"> | |
| <option value="12">Aylık</option> | |
| <option value="4">Üç Aylık</option> | |
| <option value="2">Altı Aylık</option> | |
| <option value="1">Yıllık</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="contribution-amount" class="block text-sm font-medium text-gray-700 mb-2">Katkı Miktarı (₺)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-lira-sign text-gray-400"></i> | |
| </div> | |
| <input type="number" id="contribution-amount" class="pl-8 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 border" value="500" min="0"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="return-type" class="block text-sm font-medium text-gray-700 mb-2">Getiri Türü</label> | |
| <select id="return-type" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 border"> | |
| <option value="compound">Bileşik Getiri</option> | |
| <option value="simple">Basit Getiri</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="annual-return-adv" class="block text-sm font-medium text-gray-700 mb-2">Beklenen Yıllık Getiri (%)</label> | |
| <div class="relative"> | |
| <input type="range" id="annual-return-slider-adv" class="w-full" min="1" max="30" step="0.5" value="7"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">1%</span> | |
| <span id="annual-return-value-adv" class="font-medium">7%</span> | |
| <span class="text-xs text-gray-500">30%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="investment-period-adv" class="block text-sm font-medium text-gray-700 mb-2">Yatırım Süresi (Yıl)</label> | |
| <div class="relative"> | |
| <input type="range" id="investment-period-slider-adv" class="w-full" min="1" max="40" step="1" value="10"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">1</span> | |
| <span id="investment-period-value-adv" class="font-medium">10</span> | |
| <span class="text-xs text-gray-500">40</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="inflation-rate" class="block text-sm font-medium text-gray-700 mb-2">Enflasyon Oranı (%)</label> | |
| <div class="relative"> | |
| <input type="range" id="inflation-rate-slider" class="w-full" min="0" max="10" step="0.1" value="2.5"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">0%</span> | |
| <span id="inflation-rate-value" class="font-medium">2.5%</span> | |
| <span class="text-xs text-gray-500">10%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="management-fee" class="block text-sm font-medium text-gray-700 mb-2">Yönetim Ücreti (%)</label> | |
| <div class="relative"> | |
| <input type="range" id="management-fee-slider" class="w-full" min="0" max="5" step="0.1" value="1"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-xs text-gray-500">0%</span> | |
| <span id="management-fee-value" class="font-medium">1%</span> | |
| <span class="text-xs text-gray-500">5%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="calculate-btn-adv" class="gradient-bg text-white px-8 py-3 rounded-full font-medium hover:opacity-90 transition duration-300 shadow-lg flex items-center"> | |
| <i class="fas fa-calculator mr-2"></i> Gelişmiş Getiriyi Hesapla | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="result-section" class="hidden"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> | |
| <div class="p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Yatırım Sonuçları</h2> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="result-card bg-indigo-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4"> | |
| <i class="fas fa-coins text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Toplam Yatırım</h3> | |
| </div> | |
| <p id="total-invested" class="text-3xl font-bold text-indigo-600">₺0</p> | |
| </div> | |
| <div class="result-card bg-green-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Toplam Getiri</h3> | |
| </div> | |
| <p id="total-returns" class="text-3xl font-bold text-green-600">₺0</p> | |
| </div> | |
| <div class="result-card bg-purple-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-piggy-bank text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Gelecek Değer</h3> | |
| </div> | |
| <p id="future-value" class="text-3xl font-bold text-purple-600">₺0</p> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Yıllık Detaylar</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Yıl</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Yatırım</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Getiri</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Toplam Değer</th> | |
| </tr> | |
| </thead> | |
| <tbody id="yearly-breakdown" class="bg-white divide-y divide-gray-200"> | |
| <!-- Sonuçlar buraya eklenecek --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="reset-btn" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-full font-medium hover:bg-gray-300 transition duration-300 flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Hesaplayıcıyı Sıfırla | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Sekme geçişi | |
| const simpleTab = document.getElementById('simple-tab'); | |
| const advancedTab = document.getElementById('advanced-tab'); | |
| const simpleCalculator = document.getElementById('simple-calculator'); | |
| const advancedCalculator = document.getElementById('advanced-calculator'); | |
| simpleTab.addEventListener('click', function() { | |
| simpleTab.classList.add('tab-active'); | |
| simpleTab.classList.remove('text-gray-500'); | |
| simpleTab.classList.add('text-indigo-600'); | |
| advancedTab.classList.remove('tab-active'); | |
| advancedTab.classList.add('text-gray-500'); | |
| advancedTab.classList.remove('text-indigo-600'); | |
| simpleCalculator.classList.remove('hidden'); | |
| advancedCalculator.classList.add('hidden'); | |
| }); | |
| advancedTab.addEventListener('click', function() { | |
| advancedTab.classList.add('tab-active'); | |
| advancedTab.classList.remove('text-gray-500'); | |
| advancedTab.classList.add('text-indigo-600'); | |
| simpleTab.classList.remove('tab-active'); | |
| simpleTab.classList.add('text-gray-500'); | |
| simpleTab.classList.remove('text-indigo-600'); | |
| advancedCalculator.classList.remove('hidden'); | |
| simpleCalculator.classList.add('hidden'); | |
| }); | |
| // Kaydırıcı değer güncellemeleri | |
| const annualReturnSlider = document.getElementById('annual-return-slider'); | |
| const annualReturnValue = document.getElementById('annual-return-value'); | |
| const investmentPeriodSlider = document.getElementById('investment-period-slider'); | |
| const investmentPeriodValue = document.getElementById('investment-period-value'); | |
| annualReturnSlider.addEventListener('input', function() { | |
| annualReturnValue.textContent = this.value + '%'; | |
| }); | |
| investmentPeriodSlider.addEventListener('input', function() { | |
| investmentPeriodValue.textContent = this.value; | |
| }); | |
| // Gelişmiş kaydırıcı değer güncellemeleri | |
| const annualReturnSliderAdv = document.getElementById('annual-return-slider-adv'); | |
| const annualReturnValueAdv = document.getElementById('annual-return-value-adv'); | |
| const investmentPeriodSliderAdv = document.getElementById('investment-period-slider-adv'); | |
| const investmentPeriodValueAdv = document.getElementById('investment-period-value-adv'); | |
| const inflationRateSlider = document.getElementById('inflation-rate-slider'); | |
| const inflationRateValue = document.getElementById('inflation-rate-value'); | |
| const managementFeeSlider = document.getElementById('management-fee-slider'); | |
| const managementFeeValue = document.getElementById('management-fee-value'); | |
| annualReturnSliderAdv.addEventListener('input', function() { | |
| annualReturnValueAdv.textContent = this.value + '%'; | |
| }); | |
| investmentPeriodSliderAdv.addEventListener('input', function() { | |
| investmentPeriodValueAdv.textContent = this.value; | |
| }); | |
| inflationRateSlider.addEventListener('input', function() { | |
| inflationRateValue.textContent = this.value + '%'; | |
| }); | |
| managementFeeSlider.addEventListener('input', function() { | |
| managementFeeValue.textContent = this.value + '%'; | |
| }); | |
| // Hesaplama fonksiyonları | |
| function formatCurrency(amount) { | |
| return new Intl.NumberFormat('tr-TR', { style: 'currency', currency: 'TRY' }).format(amount); | |
| } | |
| function calculateSimpleReturns() { | |
| const initialInvestment = parseFloat(document.getElementById('initial-investment').value) || 0; | |
| const monthlyContribution = parseFloat(document.getElementById('monthly-contribution').value) || 0; | |
| const annualReturn = parseFloat(annualReturnSlider.value) / 100; | |
| const years = parseInt(investmentPeriodSlider.value); | |
| let totalInvested = initialInvestment; | |
| let totalValue = initialInvestment; | |
| const yearlyData = []; | |
| for (let year = 1; year <= years; year++) { | |
| // Yıllık katkıları ekle | |
| totalInvested += monthlyContribution * 12; | |
| // Yıllık getiriyi hesapla | |
| const yearlyReturn = totalValue * annualReturn; | |
| totalValue += yearlyReturn + (monthlyContribution * 12); | |
| yearlyData.push({ | |
| year: year, | |
| invested: totalInvested, | |
| returns: totalValue - totalInvested, | |
| totalValue: totalValue | |
| }); | |
| } | |
| return { | |
| totalInvested: totalInvested, | |
| totalReturns: totalValue - totalInvested, | |
| futureValue: totalValue, | |
| yearlyData: yearlyData | |
| }; | |
| } | |
| function calculateAdvancedReturns() { | |
| const initialInvestment = parseFloat(document.getElementById('initial-investment-adv').value) || 0; | |
| const contributionAmount = parseFloat(document.getElementById('contribution-amount').value) || 0; | |
| const contributionFrequency = parseInt(document.getElementById('contribution-frequency').value); | |
| const returnType = document.getElementById('return-type').value; | |
| const annualReturn = parseFloat(annualReturnSliderAdv.value) / 100; | |
| const years = parseInt(investmentPeriodSliderAdv.value); | |
| const inflationRate = parseFloat(inflationRateSlider.value) / 100; | |
| const managementFee = parseFloat(managementFeeSlider.value) / 100; | |
| let totalInvested = initialInvestment; | |
| let totalValue = initialInvestment; | |
| const yearlyData = []; | |
| const periodsPerYear = contributionFrequency; | |
| const periods = years * periodsPerYear; | |
| const periodReturn = Math.pow(1 + annualReturn, 1/periodsPerYear) - 1; | |
| const periodFee = managementFee / periodsPerYear; | |
| for (let period = 1; period <= periods; period++) { | |
| // Her dönem başında katkı ekle | |
| if (period > 1) { | |
| totalInvested += contributionAmount; | |
| totalValue += contributionAmount; | |
| } | |
| // Dönem getirisini hesapla | |
| if (returnType === 'compound') { | |
| totalValue = totalValue * (1 + periodReturn); | |
| } else { | |
| // Basit faiz - sadece başlangıç yatırımına | |
| if (period % periodsPerYear === 0) { | |
| totalValue += initialInvestment * annualReturn; | |
| } | |
| } | |
| // Yönetim ücretini uygula | |
| totalValue = totalValue * (1 - periodFee); | |
| // Yıllık verileri kaydet | |
| if (period % periodsPerYear === 0) { | |
| const year = period / periodsPerYear; | |
| yearlyData.push({ | |
| year: year, | |
| invested: totalInvested, | |
| returns: totalValue - totalInvested, | |
| totalValue: totalValue | |
| }); | |
| } | |
| } | |
| // Enflasyon için ayarla | |
| const inflationFactor = Math.pow(1 + inflationRate, years); | |
| const realFutureValue = totalValue / inflationFactor; | |
| return { | |
| totalInvested: totalInvested, | |
| totalReturns: totalValue - totalInvested, | |
| futureValue: totalValue, | |
| realFutureValue: realFutureValue, | |
| yearlyData: yearlyData | |
| }; | |
| } | |
| // Sonuçları göster | |
| function displayResults(results) { | |
| document.getElementById('total-invested').textContent = formatCurrency(results.totalInvested); | |
| document.getElementById('total-returns').textContent = formatCurrency(results.totalReturns); | |
| document.getElementById('future-value').textContent = formatCurrency(results.futureValue); | |
| const yearlyBreakdown = document.getElementById('yearly-breakdown'); | |
| yearlyBreakdown.innerHTML = ''; | |
| results.yearlyData.forEach(data => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${data.year}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(data.invested)}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(data.returns)}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(data.totalValue)}</td> | |
| `; | |
| yearlyBreakdown.appendChild(row); | |
| }); | |
| document.getElementById('result-section').classList.remove('hidden'); | |
| } | |
| // Hesapla butonları için event listener'lar | |
| document.getElementById('calculate-btn').addEventListener('click', function() { | |
| const results = calculateSimpleReturns(); | |
| displayResults(results); | |
| }); | |
| document.getElementById('calculate-btn-adv').addEventListener('click', function() { | |
| const results = calculateAdvancedReturns(); | |
| displayResults(results); | |
| }); | |
| // Sıfırla butonu | |
| document.getElementById('reset-btn').addEventListener('click', function() { | |
| document.getElementById('result-section').classList.add('hidden'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=crux2006/getiri-hesaplama" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |