Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ROI Calculator with Exchange Rates</title>
    <style>
        /* Previous styles remain the same */
        
        .exchange-rates {
            margin-top: 2rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .currency-card {
            padding: 1rem;
            background: #f8fafc;
            border-radius: 0.75rem;
            text-align: center;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .currency-icon {
            font-size: 1.5rem;
        }

        .currency-info {
            text-align: left;
        }

        .currency-amount {
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.25rem;
        }

        .currency-name {
            color: #6b7280;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>📈 ROI Calculator</h1>
        
        <div class="input-group">
            <label>💰 Initial Investment (USD)</label>
            <input type="number" id="investment" placeholder="Enter amount">
        </div>

        <div class="input-group">
            <label>📊 Net Profit (USD)</label>
            <input type="number" id="profit" placeholder="Enter amount">
        </div>

        <div class="result">
            <div class="roi-value">0%</div>
            <div class="status">ROI <span class="emoji">📉📈</span></div>
        </div>

        <div class="exchange-rates">
            <div class="currency-card">
                <span class="currency-icon">🇺🇸</span>
                <div class="currency-info">
                    <div class="currency-amount" id="usd-amount">$0.00</div>
                    <div class="currency-name">US Dollar</div>
                </div>
            </div>
            <div class="currency-card">
                <span class="currency-icon">🇪🇺</span>
                <div class="currency-info">
                    <div class="currency-amount" id="eur-amount">€0.00</div>
                    <div class="currency-name">Euro</div>
                </div>
            </div>
            <div class="currency-card">
                <span class="currency-icon">🇵🇭</span>
                <div class="currency-info">
                    <div class="currency-amount" id="php-amount">₱0.00</div>
                    <div class="currency-name">Philippine Peso</div>
                </div>
            </div>
            <div class="currency-card">
                <span class="currency-icon">₿</span>
                <div class="currency-info">
                    <div class="currency-amount" id="btc-amount">0 BTC</div>
                    <div class="currency-name">Bitcoin</div>
                </div>
            </div>
            <div class="currency-card">
                <span class="currency-icon">Ξ</span>
                <div class="currency-info">
                    <div class="currency-amount" id="eth-amount">0 ETH</div>
                    <div class="currency-name">Ethereum</div>
                </div>
            </div>
            <div class="currency-card">
                <span class="currency-icon">🪙</span>
                <div class="currency-info">
                    <div class="currency-amount" id="bnb-amount">0 BNB</div>
                    <div class="currency-name">Binance Coin</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Previous JavaScript remains the same

        // Exchange rates (example rates - update with real rates)
        const exchangeRates = {
            EUR: 0.93,
            PHP: 56.23,
            BTC: 0.000025,
            ETH: 0.00054,
            BNB: 0.0037
        };

        function updateCurrencyValues() {
            const initial = parseFloat(investment.value) || 0;
            const net = parseFloat(profit.value) || 0;
            const gain = net - initial;

            document.getElementById('usd-amount').textContent = 
                `${gain >= 0 ? '+' : '-'}$${Math.abs(gain).toFixed(2)}`;

            // Convert to other currencies
            document.getElementById('eur-amount').textContent = 
                `${(gain * exchangeRates.EUR).toFixed(2)} €`;
            document.getElementById('php-amount').textContent = 
                `₱${(gain * exchangeRates.PHP).toFixed(2)}`;
            document.getElementById('btc-amount').textContent = 
                `${(gain * exchangeRates.BTC).toFixed(8)} BTC`;
            document.getElementById('eth-amount').textContent = 
                `${(gain * exchangeRates.ETH).toFixed(6)} ETH`;
            document.getElementById('bnb-amount').textContent = 
                `${(gain * exchangeRates.BNB).toFixed(4)} BNB`;
        }

        function calculateROI() {
            const initial = parseFloat(investment.value);
            const net = parseFloat(profit.value);

            if (initial && net) {
                const roi = ((net - initial) / initial) * 100;
                roiValue.textContent = `${roi.toFixed(2)}%`;
                
                status.classList.toggle('negative', roi < 0);
                emoji.textContent = roi >= 0 ? '🚀📈' : '📉🔥';
                
                updateCurrencyValues();
            } else {
                roiValue.textContent = '0%';
                status.classList.remove('negative');
                emoji.textContent = '📉📈';
                
                // Reset currency values
                document.querySelectorAll('.currency-amount').forEach(el => {
                    el.textContent = el.id === 'usd-amount' ? '$0.00' : 
                                    el.id === 'eur-amount' ? '€0.00' :
                                    el.id === 'php-amount' ? '₱0.00' :
                                    el.id === 'btc-amount' ? '0 BTC' :
                                    el.id === 'eth-amount' ? '0 ETH' : '0 BNB';
                });
            }
        }

        investment.addEventListener('input', calculateROI);
        profit.addEventListener('input', calculateROI);
    </script>
</body>
</html>
Editor is loading...