feat: improve API error handling & add exchange rate updates

- Switched to using cURL for fetching data from CoinGecko API, with added error handling for failed requests. This reduces the chances of runtime errors and ensures fallback to previous data.
- Implemented periodic updates to exchange rates every 5 seconds in `main.js` to keep the rates current.
- Added OpenGraph meta tags on `index.php` for better social media integration.
- Minor CSS adjustments for better table rendering.
- Moved `import` statements for Bootstrap CSS and JS to the top in `main.js`.

src/css/custom.css

@@ -34,6 +34,7 @@ a.fiat-tooltip {
 table.table {
     max-width: 472px;
     margin: auto;
+    --bs-table-bg: transparent;
 }
 
 .input-group-text {

src/js/main.js

@@ -1,3 +1,8 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+
+import '../css/custom.css';
+
 import Tooltip from "bootstrap/js/dist/tooltip";
 var tooltipTriggerList = [].slice.call(
   document.querySelectorAll('[data-toggle="tooltip"]')
@@ -7,8 +12,54 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 });
 console.log(tooltipList);
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-import '../css/custom.css';
+let lastModifiedField = 'xmr';
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Add event listeners to track the last modified input field
+  document.getElementById("xmrInput").addEventListener('input', function () {
+    lastModifiedField = 'xmr';
+  });
+
+  document.getElementById("fiatInput").addEventListener('input', function () {
+    lastModifiedField = 'fiat';
+  });
+
+  // Fetch updated exchange rates every 5 seconds
+  setInterval(fetchUpdatedExchangeRates, 5000);
+});
+
+function fetchUpdatedExchangeRates() {
+  fetch('/coingecko.php')
+    .then(response => response.json())
+    .then(data => {
+      // Update the exchangeRates object with the new values
+      for (const [currency, value] of Object.entries(data)) {
+        exchangeRates[currency.toUpperCase()] = value.lastValue;
+      }
+
+      updateTimeElement(data.time);
+
+      // Re-execute the appropriate conversion function
+      if (lastModifiedField === 'xmr') {
+        xmrConvert();
+      } else {
+        fiatConvert();
+      }
+    })
+    .catch(error => console.error('Error fetching exchange rates:', error));
+}
+
+function updateTimeElement(unixTimestamp) {
+  const date = new Date(unixTimestamp * 1000);
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  const formattedTime = `${hours}:${minutes}:${seconds}`;
+
+  const u = document.querySelector('u');
+  u.textContent = formattedTime;
+  u.parentElement.innerHTML = u.parentElement.innerHTML.replace('Europe/Berlin', Intl.DateTimeFormat().resolvedOptions().timeZone);
+}
 
 function copyToClipBoardXMR() {
   var content = document.getElementById('xmrInput');
@@ -23,14 +74,14 @@ function copyToClipBoardFiat() {
 }
 
 function fiatConvert(value) {
-    let fiatAmount = document.getElementById("fiatInput").value;
-    let xmrValue = document.getElementById("xmrInput");
-    let selectBox = document.getElementById("selectBox").value;
+  let fiatAmount = document.getElementById("fiatInput").value;
+  let xmrValue = document.getElementById("xmrInput");
+  let selectBox = document.getElementById("selectBox").value;
 
-    if (exchangeRates[selectBox]) {
-        let value = fiatAmount / exchangeRates[selectBox];
-        xmrValue.value = value.toFixed(selectBox == 'BTC' || selectBox == 'LTC' || selectBox == 'ETH' || selectBox == 'XAG' || selectBox == 'XAU' ? 8 : 2);
-    }
+  if (exchangeRates[selectBox]) {
+    let value = fiatAmount / exchangeRates[selectBox];
+    xmrValue.value = value.toFixed(selectBox == 'BTC' || selectBox == 'LTC' || selectBox == 'ETH' || selectBox == 'XAG' || selectBox == 'XAU' ? 8 : 2);
+  }
 }
 
 function xmrConvert(value) {
@@ -39,8 +90,8 @@ function xmrConvert(value) {
   let selectBox = document.getElementById("selectBox").value;
 
   if (exchangeRates[selectBox]) {
-      let value = xmrAmount * exchangeRates[selectBox];
-      fiatValue.value = value.toFixed(selectBox == 'BTC' || selectBox == 'LTC' || selectBox == 'ETH' || selectBox == 'XAG' || selectBox == 'XAU' ? 8 : 2);
+    let value = xmrAmount * exchangeRates[selectBox];
+    fiatValue.value = value.toFixed(selectBox == 'BTC' || selectBox == 'LTC' || selectBox == 'ETH' || selectBox == 'XAG' || selectBox == 'XAU' ? 8 : 2);
   }
 }