| Server IP : 127.0.0.1 / Your IP : 216.73.216.48 Web Server : Apache/2.4.58 (Win64) OpenSSL/3.1.3 PHP/8.2.12 System : Windows NT DESKTOP-3H4FHQJ 10.0 build 19045 (Windows 10) AMD64 User : win 10 ( 0) PHP Version : 8.2.12 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : D:/xampp/htdocs-coblaa/CB_converter/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Money Converter</title>
<link rel="icon" type="image/png" href="https://coblaa.com/coblaa/main_icon/coblaa_log.png" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="IdVsOf5B8COvGCwQNq8yUoovQ4LsqWGPB20AqjBVScY" />
<meta name="description" content="Saudi Riyal to Ugandan Shilling money converter, United Arab Emirates Dirham to Ugandan Shilling money converter, Qatari Riyal to Ugandan Shilling money converter, <?php echo $curr_year = date("Y"); ?>">
<link rel="stylesheet" type="text/css" href="main_css/index.css?v5" />
<meta name="google-adsense-account" content="ca-pub-4728417548940171"><!--gog ads -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4728417548940171"crossorigin="anonymous"></script><!-- ad unit -->
<!--script type='text/javascript' src='//pl27277714.profitableratecpm.com/16/3d/62/163d624f45b8acf1547adc806a1d99b3.js'></script><!-- Adsterra -->
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom styles for Inter font and general body styling */
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(to right bottom, #60a5fa, #3b82f6); /* Blue gradient background */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
overflow:auto;
/* Removed overflow: hidden; to allow page scrolling if content is too long */
}
/* Style for the loading indicator */
.loading-spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #3b82f6;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Animation for the main container */
.container-animation {
animation: fadeInScale 0.7s ease-out forwards;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Custom select arrow styling */
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem 1rem;
padding-right: 2.5rem; /* Make space for the custom arrow */
}
</style>
</head>
<body>
<div class="container-animation container mx-auto p-8 bg-white shadow-2xl rounded-2xl max-w-md w-full border border-blue-100" style="width:96%;">
<h1 class="text-2xl font-extrabold text-center text-gray-800 mb-8 drop-shadow-sm">
CB Currency Converter
</h1>
<div class="space-y-6">
<!-- API Key Input -->
<div style="display:none;"> <!-- Removed display:none; to make the input visible -->
<label for="apiKey" class="block text-sm font-medium text-gray-700 mb-2">
ExchangeRate-API Key (get from exchangerate-api.com):
</label>
<input
type="text"
id="apiKey"
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-base transition duration-150 ease-in-out"
placeholder="Enter your API Key"
value="b827846b7df041f48d60e8c9" <!-- Removed hardcoded value -->
oninput="saveApiKey()"
/>
</div>
<!-- Amount Input -->
<div>
<label for="amount" class="block text-base font-medium text-gray-700 mb-2">
Amount:
</label>
<input
type="number"
id="amount"
value="1"
min="0"
class="mt-1 block w-full px-5 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-lg transition duration-200 ease-in-out transform hover:scale-[1.01] focus:scale-[1.01]"
placeholder="Enter amount"
oninput="convertCurrency()"
/>
</div>
<!-- From Currency Selector -->
<div>
<label for="fromCurrency" class="block text-base font-medium text-gray-700 mb-2">
From:
</label>
<select
id="fromCurrency"
class="mt-1 block w-full px-5 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-lg transition duration-200 ease-in-out bg-white appearance-none hover:scale-[1.01] focus:scale-[1.01]"
onchange="convertCurrency()"
>
<option value="USD">🇺🇸 USD - United States Dollar</option>
<option value="EUR">🇪🇺 EUR - Euro</option>
<option value="GBP">🇬🇧 GBP - British Pound</option>
<option value="UGX" selected>🇺🇬 UGX - Ugandan Shilling</option>
<option value="JPY">🇯🇵 JPY - Japanese Yen</option>
<option value="CAD">🇨🇦 CAD - Canadian Dollar</option>
<option value="AUD">🇦🇺 AUD - Australian Dollar</option>
<option value="CHF">🇨🇠CHF - Swiss Franc</option>
<option value="CNY">🇨🇳 CNY - Chinese Yuan</option>
<option value="INR">🇮🇳 INR - Indian Rupee</option>
<option value="BHD">🇧🇠BHD - Bahraini Dinar</option>
<option value="EGP">🇪🇬 EGP - Egyptian Pound</option>
<option value="IRR">🇮🇷 IRR - Iranian Rial</option>
<option value="IQD">🇮🇶 IQD - Iraqi Dinar</option>
<option value="ILS">🇮🇱 ILS - Israeli New Shekel</option>
<option value="JOD">🇯🇴 JOD - Jordanian Dinar</option>
<option value="KWD">🇰🇼 KWD - Kuwaiti Dinar</option>
<option value="LBP">🇱🇧 LBP - Lebanese Pound</option>
<option value="OMR">🇴🇲 OMR - Omani Rial</option>
<option value="PEP">🇵🇸 PEP - Palestinian Pound (Note: ILS/JOD commonly used)</option>
<option value="QAR">🇶🇦 QAR - Qatari Riyal</option>
<option value="SAR">🇸🇦 SAR - Saudi Riyal</option>
<option value="SYP">🇸🇾 SYP - Syrian Pound</option>
<option value="TRY">🇹🇷 TRY - Turkish Lira</option>
<option value="AED">🇦🇪 AED - United Arab Emirates Dirham</option>
<option value="YER">🇾🇪 YER - Yemeni Rial</option>
</select>
</div>
<!-- Swap Button -->
<div class="flex justify-center">
<button
onclick="swapCurrencies()"
class="p-4 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-3 focus:ring-blue-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-110 active:scale-95"
aria-label="Swap currencies"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
</svg>
</button>
</div>
<!-- To Currency Selector -->
<div>
<label for="toCurrency" class="block text-base font-medium text-gray-700 mb-2">
To:
</label>
<select
id="toCurrency"
class="mt-1 block w-full px-5 py-3 border border-gray-300 rounded-xl shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-lg transition duration-200 ease-in-out bg-white appearance-none hover:scale-[1.01] focus:scale-[1.01]"
onchange="convertCurrency()"
>
<option value="USD" selected>🇺🇸 USD - United States Dollar</option>
<option value="EUR">🇪🇺 EUR - Euro</option>
<option value="GBP">🇬🇧 GBP - British Pound</option>
<option value="UGX">🇺🇬 UGX - Ugandan Shilling</option>
<option value="JPY">🇯🇵 JPY - Japanese Yen</option>
<option value="CAD">🇨🇦 CAD - Canadian Dollar</option>
<option value="AUD">�🇺 AUD - Australian Dollar</option>
<option value="CHF">🇨🇠CHF - Swiss Franc</option>
<option value="CNY">🇨🇳 CNY - Chinese Yuan</option>
<option value="INR">🇮🇳 INR - Indian Rupee</option>
<option value="BHD">🇧🇠BHD - Bahraini Dinar</option>
<option value="EGP">🇪🇬 EGP - Egyptian Pound</option>
<option value="IRR">🇮🇷 IRR - Iranian Rial</option>
<option value="IQD">🇮🇶 IQD - Iraqi Dinar</option>
<option value="ILS">🇮🇱 ILS - Israeli New Shekel</option>
<option value="JOD">🇯🇴 JOD - Jordanian Dinar</option>
<option value="KWD">🇰🇼 KWD - Kuwaiti Dinar</option>
<option value="LBP">🇱🇧 LBP - Lebanese Pound</option>
<option value="OMR">🇴🇲 OMR - Omani Rial</option>
<option value="PEP">🇵🇸 PEP - Palestinian Pound (Note: ILS/JOD commonly used)</option>
<option value="QAR">🇶🇦 QAR - Qatari Riyal</option>
<option value="SAR">🇸🇦 SAR - Saudi Riyal</option>
<option value="SYP">🇸🇾 SYP - Syrian Pound</option>
<option value="TRY">🇹🇷 TRY - Turkish Lira</option>
<option value="AED">🇦🇪 AED - United Arab Emirates Dirham</option>
<option value="YER">🇾🇪 YER - Yemeni Rial</option>
</select>
</div>
<!-- Status Message Area -->
<div id="statusMessage" class="text-center text-sm text-gray-600 mt-4">
<!-- API status messages will appear here -->
</div>
<!-- Converted Result -->
<div class="text-center mt-9">
<p class="text-xl text-gray-600">Converted Amount:</p>
<p id="result" class="text-2xl font-extrabold text-blue-800 mt-3 drop-shadow-md">
0.00 USD
</p>
</div>
<!-- Gemini API Integration: Currency Insights -->
<div class="mt-9 text-center" style="display:none;" >
<div id="insightsResult" class="mt-5 p-5 bg-blue-50 rounded-lg text-left text-gray-800 hidden border border-blue-200 shadow-inner max-h-60 overflow-y-auto">
<!-- Insights will be displayed here -->
</div>
</div>
<!-- New Gemini API Integration: Currency Comparison -->
<div class="mt-6 text-center">
<button
onclick="convertCurrency()"
class="px-7 py-3 bg-purple-600 text-white font-semibold rounded-xl shadow-lg hover:bg-purple-700 focus:outline-none focus:ring-3 focus:ring-purple-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105 active:scale-95"
>
Convert now
</button>
<div id="comparisonResult" class="mt-5 p-5 bg-purple-50 rounded-lg text-left text-gray-800 hidden border border-purple-200 shadow-inner max-h-60 overflow-y-auto">
<!-- Comparison results will be displayed here -->
</div>
</div>
</div>
</div>
<script>
// Store exchange rates fetched from the API
let exchangeRatesCache = {};
let currentBaseCurrency = '';
const EXCHANGE_RATE_API_KEY_STORAGE_KEY = 'exchangeRateApiKey';
// Mapping of currency codes to full names for LLM prompt
const currencyNames = {
"USD": "United States Dollar",
"EUR": "Euro",
"GBP": "British Pound",
"UGX": "Ugandan Shilling",
"JPY": "Japanese Yen",
"CAD": "Canadian Dollar",
"AUD": "Australian Dollar",
"CHF": "Swiss Franc",
"CNY": "Chinese Yuan",
"INR": "Indian Rupee",
"BHD": "Bahraini Dinar",
"EGP": "Egyptian Pound",
"IRR": "Iranian Rial",
"IQD": "Iraqi Dinar",
"ILS": "Israeli New Shekel",
"JOD": "Jordanian Dinar",
"KWD": "Kuwaiti Dinar",
"LBP": "Lebanese Pound",
"OMR": "Omani Rial",
"PEP": "Palestinian Pound", // Note: ILS/JOD commonly used for transactions
"QAR": "Qatari Riyal",
"SAR": "Saudi Riyal",
"SYP": "Syrian Pound",
"TRY": "Turkish Lira",
"AED": "United Arab Emirates Dirham",
"YER": "Yemeni Rial"
};
/**
* Saves the API key to local storage.
*/
function saveApiKey() {
const apiKeyInput = document.getElementById('apiKey');
localStorage.setItem(EXCHANGE_RATE_API_KEY_STORAGE_KEY, apiKeyInput.value);
// Trigger a conversion attempt to use the new key immediately
convertCurrency();
}
/**
* Displays a status message to the user.
* @param {string} message The message to display.
* @param {string} type The type of message (e.g., 'info', 'error').
*/
function setStatusMessage(message, type = 'info') {
const statusElement = document.getElementById('statusMessage');
statusElement.textContent = message;
statusElement.className = 'text-center text-sm mt-4'; // Reset classes
if (type === 'error') {
statusElement.classList.add('text-red-600');
} else if (type === 'success') {
statusElement.classList.add('text-green-600');
} else {
statusElement.classList.add('text-gray-600');
}
}
/**
* Fetches exchange rates from the ExchangeRate-API.
* Rates are cached to avoid excessive API calls.
* @param {string} baseCurrency The currency to use as the base for conversion.
* @returns {Promise<boolean>} True if rates were successfully fetched/available, false otherwise.
*/
async function fetchExchangeRates(baseCurrency) {
const apiKey = document.getElementById('apiKey').value;
if (!apiKey) {
setStatusMessage("Please enter your ExchangeRate-API Key.", 'error');
return false;
}
setStatusMessage(`Fetching live rates for ${baseCurrency}...`, 'info');
const apiUrl = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${baseCurrency}`;
console.log("Fetching from API URL:", apiUrl); // Log the API URL for debugging
try {
const response = await fetch(apiUrl);
// Check if the response is OK (status 200)
if (!response.ok) {
const errorData = await response.json();
setStatusMessage(`Error: ${response.status} - ${errorData['error-type'] || response.statusText}`, 'error');
console.error("ExchangeRate-API Error Response:", errorData);
return false;
}
const data = await response.json();
if (data.result === 'success') {
exchangeRatesCache[baseCurrency] = data.conversion_rates;
currentBaseCurrency = baseCurrency;
setStatusMessage(`Live rates updated for ${baseCurrency}.`, 'success');
return true;
} else {
setStatusMessage(`Error fetching rates: ${data['error-type'] || 'Unknown error'}`, 'error');
console.error("ExchangeRate-API Error:", data);
return false;
}
} catch (error) {
setStatusMessage("Network error or invalid API key. Could not fetch rates. Check console for details.", 'error');
console.error("Error fetching exchange rates:", error);
return false;
}
}
/**
* Converts the currency based on the input amount and selected currencies.
*/
async function convertCurrency() {
const amountInput = document.getElementById('amount');
const fromCurrency = document.getElementById('fromCurrency').value;
const toCurrency = document.getElementById('toCurrency').value;
const resultElement = document.getElementById('result');
// Clear previous insights and comparison when currency selection changes
document.getElementById('insightsResult').classList.add('hidden');
document.getElementById('insightsResult').innerHTML = '';
document.getElementById('comparisonResult').classList.add('hidden');
document.getElementById('comparisonResult').innerHTML = '';
// Get the amount, default to 0 if invalid
let amount = parseFloat(amountInput.value);
if (isNaN(amount) || amount < 0) {
// amount = 0;
//amountInput.value = 0; // Reset input to 0 if invalid
}
// Fetch rates if the base currency has changed or not yet fetched
if (fromCurrency !== currentBaseCurrency || !exchangeRatesCache[fromCurrency]) {
const ratesFetched = await fetchExchangeRates(fromCurrency);
if (!ratesFetched) {
resultElement.textContent = "N/A";
return; // Stop if rates couldn't be fetched
}
}
const rates = exchangeRatesCache[fromCurrency];
const toRate = rates[toCurrency];
if (toRate) {
const convertedAmount = amount * toRate;
resultElement.textContent = `${convertedAmount.toFixed(2)} ${toCurrency}`;
} else {
resultElement.textContent = "Error: Conversion rate not available.";
}
}
/**
* Swaps the 'From' and 'To' currencies and triggers a new conversion.
*/
function swapCurrencies() {
const fromCurrencySelect = document.getElementById('fromCurrency');
const toCurrencySelect = document.getElementById('toCurrency');
// Store current values
const currentFrom = fromCurrencySelect.value;
const currentTo = toCurrencySelect.value;
// Swap values
fromCurrencySelect.value = currentTo;
toCurrencySelect.value = currentFrom;
// Trigger conversion with the new swapped values
convertCurrency();
}
// Initial setup when the page loads
window.onload = function() {
// Load API key from local storage if available
const storedApiKey = localStorage.getItem(EXCHANGE_RATE_API_KEY_STORAGE_KEY);
if (storedApiKey) {
document.getElementById('apiKey').value = storedApiKey;
}
convertCurrency(); // Perform initial conversion with fetched rates
};
</script>
</body>
</html>