<%# Ruby Calculator - Currency & Unit Converter %>
<%# Author: RSK World (Molla Samser, Founder | Rima Khatun, Designer & Tester) %>
<%# Contact: help@rskworld.in | +91 93305 39277 %>
<%# Website: https://rskworld.in %>
<%# Year: 2026 %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currency & Unit Converter - RSK World</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        :root {
            --theme-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --theme-secondary: #4a5568;
            --theme-accent: #ed8936;
            --theme-success: #48bb78;
            --theme-danger: #e53e3e;
            --theme-warning: #ecc94b;
            --theme-info: #4299e1;
            --theme-background: #f7fafc;
            --theme-text: #2d3748;
            --theme-display: #2d3748;
        }
        
        body {
            background: var(--theme-background);
            color: var(--theme-text);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            transition: all 0.3s ease;
        }
        
        .converter-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .converter-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        
        .converter-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
        
        .section-header {
            background: var(--theme-primary);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .result-display {
            background: var(--theme-display);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 1.2em;
            min-height: 60px;
            text-align: center;
        }
        
        .exchange-rate {
            background: #f8f9fa;
            border-left: 4px solid var(--theme-info);
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            font-size: 0.9em;
        }
        
        .footer-info {
            background: var(--theme-secondary);
            color: white;
            padding: 25px;
            border-radius: 15px;
            margin-top: 30px;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .converter-container {
                padding: 10px;
            }
            
            .converter-card {
                padding: 20px;
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid converter-container">
        <!-- Header -->
        <div class="text-center mb-4 animate__animated animate__fadeInDown">
            <h1 class="display-4">
                <i class="fas fa-exchange-alt text-info"></i> Currency & Unit Converter
            </h1>
            <p class="lead">Professional Currency Exchange & Unit Conversion Tools</p>
        </div>

        <!-- Currency Converter -->
        <div class="converter-card animate__animated animate__fadeIn">
            <div class="section-header">
                <h4><i class="fas fa-dollar-sign"></i> Currency Converter</h4>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Amount:</label>
                        <input type="number" class="form-control" id="currency-amount" placeholder="Enter amount" step="0.01" value="100">
                    </div>
                    
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label">From:</label>
                            <select class="form-select" id="from-currency">
                                <option value="USD" selected>USD - US Dollar</option>
                                <option value="EUR">EUR - Euro</option>
                                <option value="GBP">GBP - British Pound</option>
                                <option value="INR">INR - Indian Rupee</option>
                                <option value="JPY">JPY - Japanese Yen</option>
                                <option value="CNY">CNY - Chinese Yuan</option>
                                <option value="CAD">CAD - Canadian Dollar</option>
                                <option value="AUD">AUD - Australian Dollar</option>
                                <option value="CHF">CHF - Swiss Franc</option>
                                <option value="SGD">SGD - Singapore Dollar</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label">To:</label>
                            <select class="form-select" id="to-currency">
                                <option value="EUR" selected>EUR - Euro</option>
                                <option value="USD">USD - US Dollar</option>
                                <option value="GBP">GBP - British Pound</option>
                                <option value="INR">INR - Indian Rupee</option>
                                <option value="JPY">JPY - Japanese Yen</option>
                                <option value="CNY">CNY - Chinese Yuan</option>
                                <option value="CAD">CAD - Canadian Dollar</option>
                                <option value="AUD">AUD - Australian Dollar</option>
                                <option value="CHF">CHF - Swiss Franc</option>
                                <option value="SGD">SGD - Singapore Dollar</option>
                            </select>
                        </div>
                    </div>
                    
                    <button class="btn btn-primary btn-lg w-100" onclick="convertCurrency()">
                        <i class="fas fa-exchange-alt"></i> Convert Currency
                    </button>
                </div>
                
                <div class="col-md-6">
                    <div class="result-display" id="currency-result">
                        Enter amount and click "Convert Currency"
                    </div>
                    
                    <div class="exchange-rate">
                        <i class="fas fa-info-circle"></i> <strong>Exchange Rates:</strong><br>
                        Rates are updated regularly. For real-time rates, consider integrating with a live API service.
                    </div>
                </div>
            </div>
        </div>

        <!-- Unit Converter -->
        <div class="converter-card animate__animated animate__fadeInUp">
            <div class="section-header">
                <h4><i class="fas fa-ruler"></i> Unit Converter</h4>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Amount:</label>
                        <input type="number" class="form-control" id="unit-amount" placeholder="Enter amount" step="0.01" value="1">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Category:</label>
                        <select class="form-select" id="unit-category" onchange="loadUnits()">
                            <option value="length" selected>Length</option>
                            <option value="weight">Weight</option>
                            <option value="temperature">Temperature</option>
                            <option value="volume">Volume</option>
                            <option value="area">Area</option>
                            <option value="speed">Speed</option>
                            <option value="data">Data Storage</option>
                        </select>
                    </div>
                    
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label">From:</label>
                            <select class="form-select" id="from-unit"></select>
                        </div>
                        <div class="col-6">
                            <label class="form-label">To:</label>
                            <select class="form-select" id="to-unit"></select>
                        </div>
                    </div>
                    
                    <button class="btn btn-success btn-lg w-100" onclick="convertUnit()">
                        <i class="fas fa-exchange-alt"></i> Convert Unit
                    </button>
                </div>
                
                <div class="col-md-6">
                    <div class="result-display" id="unit-result">
                        Select category and click "Convert Unit"
                    </div>
                    
                    <div class="exchange-rate">
                        <i class="fas fa-info-circle"></i> <strong>Common Conversions:</strong><br>
                        • 1 inch = 2.54 cm<br>
                        • 1 kg = 2.20462 lbs<br>
                        • 1 mile = 1.60934 km
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Conversion Table -->
        <div class="converter-card animate__animated animate__fadeInUp">
            <div class="section-header">
                <h4><i class="fas fa-table"></i> Quick Reference</h4>
            </div>
            
            <div class="row">
                <div class="col-md-4">
                    <h6><i class="fas fa-ruler-horizontal"></i> Length</h6>
                    <table class="table table-sm">
                        <tr><td>1 inch</td><td>2.54 cm</td></tr>
                        <tr><td>1 foot</td><td>30.48 cm</td></tr>
                        <tr><td>1 yard</td><td>0.9144 m</td></tr>
                        <tr><td>1 mile</td><td>1.609 km</td></tr>
                    </table>
                </div>
                
                <div class="col-md-4">
                    <h6><i class="fas fa-weight"></i> Weight</h6>
                    <table class="table table-sm">
                        <tr><td>1 ounce</td><td>28.35 g</td></tr>
                        <tr><td>1 pound</td><td>0.454 kg</td></tr>
                        <tr><td>1 stone</td><td>6.35 kg</td></tr>
                        <tr><td>1 ton</td><td>907.18 kg</td></tr>
                    </table>
                </div>
                
                <div class="col-md-4">
                    <h6><i class="fas fa-thermometer-half"></i> Temperature</h6>
                    <table class="table table-sm">
                        <tr><td>0°C</td><td>32°F</td></tr>
                        <tr><td>100°C</td><td>212°F</td></tr>
                        <tr><td>-40°C</td><td>-40°F</td></tr>
                        <tr><td>37°C</td><td>98.6°F</td></tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer-info animate__animated animate__fadeInUp">
            <h6><i class="fas fa-gem text-danger"></i> Ruby Calculator Pro</h6>
            <p class="mb-1">Professional Currency & Unit Conversion Tools</p>
            <p class="mb-1">© 2026 <a href="https://rskworld.in" target="_blank" class="text-white">RSK World</a></p>
            <p class="mb-0">Developed by: Molla Samser (Founder) | Rima Khatun (Designer & Tester)</p>
            <p class="mb-0">Contact: <a href="mailto:help@rskworld.in" class="text-white">help@rskworld.in</a> | +91 93305 39277</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Currency Converter
        function convertCurrency() {
            const amount = parseFloat(document.getElementById('currency-amount').value);
            const from = document.getElementById('from-currency').value;
            const to = document.getElementById('to-currency').value;
            
            if (!amount || amount <= 0) {
                document.getElementById('currency-result').innerHTML = 'Please enter a valid amount';
                return;
            }
            
            fetch('/converter/convert_currency', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ amount, from_currency: from, to_currency: to })
            }).then(response => response.json())
              .then(data => {
                  if (data.result) {
                      document.getElementById('currency-result').innerHTML = 
                          `<strong>${amount} ${from}</strong> = <strong>${data.result} ${to}</strong><br>` +
                          `<small>Exchange rate: 1 ${from} = ${data.exchange_rate} ${to}</small>`;
                  } else {
                      document.getElementById('currency-result').innerHTML = 'Conversion failed. Please try again.';
                  }
              })
              .catch(error => {
                  document.getElementById('currency-result').innerHTML = 'Error: ' + error.message;
              });
        }

        // Unit Converter
        function convertUnit() {
            const amount = parseFloat(document.getElementById('unit-amount').value);
            const from = document.getElementById('from-unit').value;
            const to = document.getElementById('to-unit').value;
            const category = document.getElementById('unit-category').value;
            
            if (!amount || amount <= 0) {
                document.getElementById('unit-result').innerHTML = 'Please enter a valid amount';
                return;
            }
            
            fetch('/converter/convert_unit', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ amount, from_unit: from, to_unit: to, category })
            }).then(response => response.json())
              .then(data => {
                  if (data.result) {
                      document.getElementById('unit-result').innerHTML = 
                          `<strong>${amount} ${from}</strong> = <strong>${data.result} ${to}</strong><br>` +
                          `<small>Conversion factor: ${data.conversion_factor}</small>`;
                  } else {
                      document.getElementById('unit-result').innerHTML = 'Conversion failed. Please try again.';
                  }
              })
              .catch(error => {
                  document.getElementById('unit-result').innerHTML = 'Error: ' + error.message;
              });
        }

        function loadUnits() {
            const category = document.getElementById('unit-category').value;
            fetch(`/converter/get_units?category=${category}`)
                .then(response => response.json())
                .then(data => {
                    const fromSelect = document.getElementById('from-unit');
                    const toSelect = document.getElementById('to-unit');
                    
                    fromSelect.innerHTML = '';
                    toSelect.innerHTML = '';
                    
                    data.units.forEach((unit, index) => {
                        fromSelect.innerHTML += `<option value="${unit}" ${index === 0 ? 'selected' : ''}>${unit}</option>`;
                        toSelect.innerHTML += `<option value="${unit}" ${index === 1 ? 'selected' : ''}>${unit}</option>`;
                    });
                })
                .catch(error => {
                    console.error('Error loading units:', error);
                });
        }

        // Initialize units on page load
        window.addEventListener('load', function() {
            loadUnits();
        });

        // Add enter key support for inputs
        document.getElementById('currency-amount').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') convertCurrency();
        });

        document.getElementById('unit-amount').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') convertUnit();
        });
    </script>
</body>
</html>
