Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calculadora de Juros Simples e Composto</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💰</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| }, | |
| fontFamily: { | |
| 'sans': ['Inter', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .result-card { | |
| transition: all 0.3s ease; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .comparison-bar { | |
| transition: width 1s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Calculadora de Juros <span class="text-primary-600">Simples</span> e <span class="text-secondary-600">Composto</span></h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Compare o crescimento do seu investimento com diferentes tipos de juros e tome decisões financeiras mais inteligentes</p> | |
| </header> | |
| <!-- Calculator Section --> | |
| <div class="bg-white rounded-2xl shadow-xl p-6 mb-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Input Form --> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Parâmetros do Investimento</h2> | |
| <form id="calculatorForm" class="space-y-6"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="principal">Valor Inicial (R$)</label> | |
| <input type="number" id="principal" min="0" step="0.01" value="1000" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="rate">Taxa de Juros (% ao ano)</label> | |
| <input type="number" id="rate" min="0" step="0.01" value="10" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="time">Período (anos)</label> | |
| <input type="number" id="time" min="1" step="1" value="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="contribution">Aporte Mensal (R$)</label> | |
| <input type="number" id="contribution" min="0" step="0.01" value="100" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-primary-600 to-secondary-600 text-white font-bold py-3 px-4 rounded-lg hover:from-primary-700 hover:to-secondary-700 transition-all duration-300 transform hover:-translate-y-1 shadow-lg"> | |
| Calcular Comparação | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Results --> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Resultados da Comparação</h2> | |
| <div class="space-y-6"> | |
| <!-- Simple Interest Result --> | |
| <div id="simpleResult" class="result-card bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-500 p-2 rounded-lg mr-4"> | |
| <i data-feather="trending-up" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Juros Simples</h3> | |
| </div> | |
| <div class="space-y-3"> | |
| <p class="text-gray-700">Montante Final: <span id="simpleAmount" class="font-bold text-blue-700">R$ 0,00</span></p> | |
| <p class="text-gray-700">Total de Juros: <span id="simpleInterest" class="font-bold text-blue-700">R$ 0,00</span></p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4"> | |
| <div id="simpleBar" class="comparison-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Compound Interest Result --> | |
| <div id="compoundResult" class="result-card bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-500 p-2 rounded-lg mr-4"> | |
| <i data-feather="bar-chart-2" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Juros Compostos</h3> | |
| </div> | |
| <div class="space-y-3"> | |
| <p class="text-gray-700">Montante Final: <span id="compoundAmount" class="font-bold text-purple-700">R$ 0,00</span></p> | |
| <p class="text-gray-700">Total de Juros: <span id="compoundInterest" class="font-bold text-purple-700">R$ 0,00</span></p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4"> | |
| <div id="compoundBar" class="comparison-bar bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Difference --> | |
| <div id="differenceResult" class="result-card bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-500 p-2 rounded-lg mr-4"> | |
| <i data-feather="dollar-sign" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Diferença</h3> | |
| </div> | |
| <p class="text-gray-700">Juros compostos rendem <span id="differenceAmount" class="font-bold text-green-700">R$ 0,00</span> a mais que juros simples</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chart Section --> | |
| <div class="bg-white rounded-2xl shadow-xl p-6 mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Evolução do Investimento</h2> | |
| <canvas id="comparisonChart" height="100"></canvas> | |
| </div> | |
| <!-- Explanation Section --> | |
| <div class="bg-white rounded-2xl shadow-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Diferença entre Juros Simples e Compostos</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary-600 mb-3">Juros Simples</h3> | |
| <p class="text-gray-700 mb-4">Nos juros simples, a taxa de juros incide apenas sobre o capital inicial. O valor dos juros é constante ao longo do tempo.</p> | |
| <p class="text-gray-700">Fórmula: <span class="font-mono bg-gray-100 p-1 rounded">M = C × (1 + i × t)</span></p> | |
| <ul class="mt-4 space-y-2 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i> | |
| <span>Crescimento linear</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i> | |
| <span>Mais vantajoso para curto prazo</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i> | |
| <span>Fácil de calcular</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-secondary-600 mb-3">Juros Compostos</h3> | |
| <p class="text-gray-700 mb-4">Nos juros compostos, a taxa de juros incide sobre o capital inicial e também sobre os juros acumulados em períodos anteriores. É o chamado "juro sobre juro".</p> | |
| <p class="text-gray-700">Fórmula: <span class="font-mono bg-gray-100 p-1 rounded">M = C × (1 + i)<sup>t</sup></span></p> | |
| <ul class="mt-4 space-y-2 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i> | |
| <span>Crescimento exponencial</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i> | |
| <span>Mais vantajoso para longo prazo</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i> | |
| <span>Potencializa ganhos com o tempo</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="py-8 text-center text-gray-600"> | |
| <p>© 2023 Juros Comparados - Ferramenta para comparação de juros simples e compostos</p> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Get DOM elements | |
| const calculatorForm = document.getElementById('calculatorForm'); | |
| const simpleAmountEl = document.getElementById('simpleAmount'); | |
| const simpleInterestEl = document.getElementById('simpleInterest'); | |
| const compoundAmountEl = document.getElementById('compoundAmount'); | |
| const compoundInterestEl = document.getElementById('compoundInterest'); | |
| const differenceAmountEl = document.getElementById('differenceAmount'); | |
| const simpleBarEl = document.getElementById('simpleBar'); | |
| const compoundBarEl = document.getElementById('compoundBar'); | |
| // Chart initialization | |
| const ctx = document.getElementById('comparisonChart').getContext('2d'); | |
| let comparisonChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: [], | |
| datasets: [ | |
| { | |
| label: 'Juros Simples', | |
| data: [], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| borderWidth: 3, | |
| fill: true, | |
| tension: 0.4 | |
| }, | |
| { | |
| label: 'Juros Compostos', | |
| data: [], | |
| borderColor: '#8b5cf6', | |
| backgroundColor: 'rgba(139, 92, 246, 0.1)', | |
| borderWidth: 3, | |
| fill: true, | |
| tension: 0.4 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Calculate simple interest | |
| function calculateSimpleInterest(principal, rate, time, contribution) { | |
| // Convert rate from percentage to decimal | |
| rate = rate / 100; | |
| // Total contributions | |
| const totalContributions = contribution * 12 * time; | |
| // Simple interest calculation | |
| const interest = principal * rate * time; | |
| // Final amount | |
| const amount = principal + interest + totalContributions; | |
| return { | |
| amount: amount, | |
| interest: interest, | |
| contributions: totalContributions | |
| }; | |
| } | |
| // Calculate compound interest | |
| function calculateCompoundInterest(principal, rate, time, contribution) { | |
| // Convert rate from percentage to decimal | |
| rate = rate / 100; | |
| // Monthly rate | |
| const monthlyRate = rate / 12; | |
| // Future value of initial principal | |
| let futureValue = principal * Math.pow(1 + rate, time); | |
| // Future value of monthly contributions | |
| if (monthlyRate > 0) { | |
| const contributionFutureValue = contribution * | |
| (Math.pow(1 + monthlyRate, 12 * time) - 1) / monthlyRate; | |
| futureValue += contributionFutureValue; | |
| } else { | |
| futureValue += contribution * 12 * time; | |
| } | |
| // Total interest | |
| const totalContributions = contribution * 12 * time; | |
| const interest = futureValue - principal - totalContributions; | |
| return { | |
| amount: futureValue, | |
| interest: interest, | |
| contributions: totalContributions | |
| }; | |
| } | |
| // Format currency | |
| function formatCurrency(value) { | |
| return new Intl.NumberFormat('pt-BR', { | |
| style: 'currency', | |
| currency: 'BRL' | |
| }).format(value); | |
| } | |
| // Update chart data | |
| function updateChart(principal, rate, time, contribution) { | |
| // Convert rate from percentage to decimal | |
| rate = rate / 100; | |
| const monthlyRate = rate / 12; | |
| // Generate data for each year | |
| const labels = []; | |
| const simpleData = []; | |
| const compoundData = []; | |
| let simpleAmount = principal; | |
| let compoundAmount = principal; | |
| // Initial values | |
| labels.push(0); | |
| simpleData.push(principal); | |
| compoundData.push(principal); | |
| // Calculate for each year | |
| for (let year = 1; year <= time; year++) { | |
| labels.push(year); | |
| // Simple interest | |
| const simpleInterest = principal * rate * year; | |
| const simpleTotalContributions = contribution * 12 * year; | |
| simpleAmount = principal + simpleInterest + simpleTotalContributions; | |
| simpleData.push(simpleAmount); | |
| // Compound interest | |
| compoundAmount = principal * Math.pow(1 + rate, year); | |
| const contributionFutureValue = contribution * | |
| (Math.pow(1 + monthlyRate, 12 * year) - 1) / monthlyRate; | |
| compoundAmount += contributionFutureValue; | |
| compoundData.push(compoundAmount); | |
| } | |
| // Update chart | |
| comparisonChart.data.labels = labels; | |
| comparisonChart.data.datasets[0].data = simpleData; | |
| comparisonChart.data.datasets[1].data = compoundData; | |
| comparisonChart.update(); | |
| } | |
| // Handle form submission | |
| calculatorForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get input values | |
| const principal = parseFloat(document.getElementById('principal').value); | |
| const rate = parseFloat(document.getElementById('rate').value); | |
| const time = parseInt(document.getElementById('time').value); | |
| const contribution = parseFloat(document.getElementById('contribution').value); | |
| // Validate inputs | |
| if (isNaN(principal) || isNaN(rate) || isNaN(time) || isNaN(contribution) || | |
| principal < 0 || rate < 0 || time <= 0 || contribution < 0) { | |
| alert('Por favor, insira valores válidos em todos os campos.'); | |
| return; | |
| } | |
| // Calculate results | |
| const simpleResult = calculateSimpleInterest(principal, rate, time, contribution); | |
| const compoundResult = calculateCompoundInterest(principal, rate, time, contribution); | |
| const difference = compoundResult.amount - simpleResult.amount; | |
| // Update UI | |
| simpleAmountEl.textContent = formatCurrency(simpleResult.amount); | |
| simpleInterestEl.textContent = formatCurrency(simpleResult.interest); | |
| compoundAmountEl.textContent = formatCurrency(compoundResult.amount); | |
| compoundInterestEl.textContent = formatCurrency(compoundResult.interest); | |
| differenceAmountEl.textContent = formatCurrency(difference); | |
| // Update progress bars | |
| const maxAmount = Math.max(simpleResult.amount, compoundResult.amount); | |
| simpleBarEl.style.width = `${(simpleResult.amount / maxAmount) * 100}%`; | |
| compoundBarEl.style.width = `${(compoundResult.amount / maxAmount) * 100}%`; | |
| // Update chart | |
| updateChart(principal, rate, time, contribution); | |
| }); | |
| // Initialize with default values | |
| document.addEventListener('DOMContentLoaded', function() { | |
| calculatorForm.dispatchEvent(new Event('submit')); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |