@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #f9fafb; color: #333; } .card { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .input-group { transition: all 0.3s ease; } .input-group:focus-within { transform: translateY(-2px); } input:focus, select:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .tooltip { position: relative; display: inline-block; } .tooltip .tooltip-text { visibility: hidden; width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } .result-item { transition: all 0.3s ease; } .result-card { transition: transform 0.3s ease, opacity 0.3s ease; } .result-appear { animation: fadeIn 0.5s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .profit-positive { color: #10b981; } .profit-negative { color: #ef4444; } .btn-calculate { transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-calculate:hover { transform: translateY(-2px); } .btn-calculate:active { transform: translateY(1px); } .btn-calculate::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn-calculate:focus:not(:active)::after { animation: ripple 1s ease-out; } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(30, 30); opacity: 0; } } .chart-container { height: 100px; position: relative; margin-top: 10px; } .chart-bar { position: absolute; bottom: 0; width: 40%; transition: height 1s ease-out; border-top-left-radius: 4px; border-top-right-radius: 4px; } .initial-bar { left: 10%; background-color: #6366f1; } .current-bar { right: 10%; } .result-value { transition: all 0.5s ease; } /* Make sure content is optimized for PDF export */ @media print { body { width: 100%; margin: 0; padding: 0; background-color: white; } .page-container { page-break-inside: avoid; } }

document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('calculator-form'); const resultsContainer = document.getElementById('results-container'); const initialInvestmentInput = document.getElementById('initial-investment'); const purchasePriceInput = document.getElementById('purchase-price'); const currentPriceInput = document.getElementById('current-price'); // Output elements const coinsElement = document.getElementById('coins-purchased'); const currentValueElement = document.getElementById('current-value'); const profitAmountElement = document.getElementById('profit-amount'); const profitPercentageElement = document.getElementById('profit-percentage'); const currentValueBar = document.getElementById('current-value-bar'); const chartInitialValue = document.getElementById('chart-initial-value'); const chartCurrentValue = document.getElementById('chart-current-value'); form.addEventListener('submit', function(e) { e.preventDefault(); // Get input values const initialInvestment = parseFloat(initialInvestmentInput.value); const purchasePrice = parseFloat(purchasePriceInput.value); const currentPrice = parseFloat(currentPriceInput.value); // Validate inputs if (isNaN(initialInvestment) || isNaN(purchasePrice) || isNaN(currentPrice)) { alert('Please enter valid numbers for all fields'); return; } if (purchasePrice <= 0 || currentPrice = 0) { currentValueBar.style.backgroundColor = '#10b981'; // Green for profit profitAmountElement.className = 'text-3xl font-bold profit-positive result-value'; profitPercentageElement.className = 'text-3xl font-bold profit-positive result-value'; } else { currentValueBar.style.backgroundColor = '#ef4444'; // Red for loss profitAmountElement.className = 'text-3xl font-bold profit-negative result-value'; profitPercentageElement.className = 'text-3xl font-bold profit-negative result-value'; } // Update chart values chartInitialValue.textContent = formatCurrency(initialInvestment); chartCurrentValue.textContent = formatCurrency(currentValue); // Show results resultsContainer.classList.remove('hidden'); resultsContainer.classList.add('result-appear'); }); // Helper functions for formatting function formatCurrency(value) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value); } function formatPercentage(value) { return new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2, signDisplay: 'always' }).format(value / 100); } function formatNumber(value) { if (value < 0.01) { return value.toFixed(8); } else if (value < 1) { return value.toFixed(4); } else if (value < 1000) { return value.toFixed(2); } else { return new Intl.NumberFormat('en-US').format(parseFloat(value.toFixed(2))); } } });