Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gold Price</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="spot-rate">
            <h2>LOTUS RA TRADING</h2>
            <div class="time-date">
                <span id="time">...</span>
                <span id="date">24 ...</span>
                <span id="day"></span>
            </div>    
            <div class="rates">
                <div class="rate-box">
                    <h3>GOLD</h3>
                    <p>
                        <span id="gold-bid" class="bid">...</span> BID <br> 
                        <span id="gold-ask" class="ask">...</span> ASK
                    </p>
                </div>
                
                <div class="rate-box">
                    <h3>SILVER OZ</h3>
                    <p>
                        <span id="silver-bid" class="bid">...</span> BID <br> 
                        <span id="silver-ask" class="ask">...</span> ASK
                    </p>
                </div>
            </div>
        </div>
        <div class="commodities">
            <h2>COMMODITY</h2>
            <table>
                <tr>
                    <th>COMMODITY</th>
                    <th>WEIGHT</th>
                    <th>PRICE (AED)</th>
                </tr>
                <tr>
                    <td>GOLD 9999</td>
                    <td>1 KG</td>
                    <td id="gold999-price">...</td>
                </tr>
                <tr>
                    <td>GOLD 995</td>
                    <td>1 KG</td>
                    <td id="gold995-price">...</td>
                </tr>
                <tr>
                    <td>GOLD 999</td>
                    <td>TTB</td>
                    <td id="gold-tt-price">...</td>
                </tr>
            </table>
        </div>
        <div class="footer">
            
            <div class="tradingview-widget-container">
                <div class="tradingview-widget-container__widget"></div>
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
                {
                "symbols": [
                  {
                    "description": "",
                    "proName": "OANDA:XAUUSD"
                  },
                  {
                    "description": "",
                    "proName": "SAXO:USDAED"
                  },
                  {
                    "description": "",
                    "proName": "FX:USDCAD"
                  },
                  {
                    "description": "",
                    "proName": "FX_IDC:EURAED"
                  },
                  {
                    "description": "",
                    "proName": "FX:EURUSD"
                  }
                ],
                "showSymbolLogo": true,
                "isTransparent": false,
                "displayMode": "adaptive",
                "colorTheme": "dark",
                "locale": "en"
              }
                </script>
            </div>
            
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dateElement = document.getElementById('date');
            const timeElement = document.getElementById('time');

            function updateDateTime() {
                const now = new Date();
                const dateString = now.toLocaleDateString('en-US', {
                    year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'
                });
                const timeString = now.toLocaleTimeString('en-US');
                dateElement.textContent = dateString;
                timeElement.textContent = timeString;
            }

            updateDateTime();
            setInterval(updateDateTime, 1000);

            var myHeaders = new Headers();
            myHeaders.append("x-access-token", "goldapi-3u800nrlkm9q1lr-io");
            myHeaders.append("Content-Type", "application/json");

            var requestOptions = {
                method: 'GET',
                headers: myHeaders,
                redirect: 'follow'
            };

            var elements = {
                gold: { bid: document.getElementById('gold-bid'), ask: document.getElementById('gold-ask') },
                silver: { bid: document.getElementById('silver-bid'), ask: document.getElementById('silver-ask') },
                gold999: document.getElementById('gold999-price'),
                gold995: document.getElementById('gold995-price'),
                goldTt: document.getElementById('gold-tt-price')
            };

            var previousValues = {
                gold: { bid: null, ask: null },
                silver: { bid: null, ask: null },
                gold999: null,
                gold995: null,
                goldTt: null
            };

            function updatePrices() {
                fetch("https://www.goldapi.io/api/XAU/AED", requestOptions)
                    .then(response => response.json())
                    .then(result => {
                        // Calculate and display GOLD 999, GOLD 995, and GOLD TT prices
                        const goldPriceOz = result.price;
                        const gold999Price = (goldPriceOz / 31.1035) / 0.995 * 1000;
                        const gold995Price = (goldPriceOz / 31.1035) / 0.9999 * 1000;
                        const goldTtPrice = (goldPriceOz / 31.1035) / 0.999 * 116.64;

                        updateElement(elements.gold999, gold999Price, previousValues.gold999);
                        updateElement(elements.gold995, gold995Price, previousValues.gold995);
                        updateElement(elements.goldTt, goldTtPrice, previousValues.goldTt);
                        previousValues.gold999 = gold999Price;
                        previousValues.gold995 = gold995Price;
                        previousValues.goldTt = goldTtPrice;
                    })
                    .catch(error => console.log('error', error));

                fetch("https://www.goldapi.io/api/XAU/USD", requestOptions)
                    .then(response => response.json())
                    .then(result => {
                        updateElement(elements.gold.bid, result.bid, previousValues.gold.bid);
                        updateElement(elements.gold.ask, result.ask, previousValues.gold.ask);
                        previousValues.gold.bid = result.bid;
                        previousValues.gold.ask = result.ask;
                    })
                    .catch(error => console.log('error', error));

                fetch("https://www.goldapi.io/api/XAG/USD", requestOptions)
                    .then(response => response.json())
                    .then(result => {
                        updateElement(elements.silver.bid, result.bid, previousValues.silver.bid);
                        updateElement(elements.silver.ask, result.ask, previousValues.silver.ask);
                        previousValues.silver.bid = result.bid;
                        previousValues.silver.ask = result.ask;
                    })
                    .catch(error => console.log('error', error));
            }

            function updateElement(element, newValue, oldValue) {
                if (newValue !== oldValue) {
                    element.innerText = newValue.toFixed(2);

                    if (oldValue !== undefined) {
                        if (newValue > oldValue) {
                            element.classList.add('green');
                            element.classList.remove('red');
                            element.closest('.rate-box, td').classList.add('box-green');
                            element.closest('.rate-box, td').classList.remove('box-red');
                        } else {
                            element.classList.add('red');
                            element.classList.remove('green');
                            element.closest('.rate-box, td').classList.add('box-red');
                            element.closest('.rate-box, td').classList.remove('box-green');
                        }
                    }
                } else {
                    element.classList.remove('green');
                    element.classList.remove('red');
                    element.closest('.rate-box, td').classList.remove('box-green');
                    element.closest('.rate-box, td').classList.remove('box-red');
                    element.style.fontWeight = 'normal';
                }
            }

            setInterval(updatePrices, 500); // Update every 0.5 seconds
            updatePrices();
        });
    </script>
</body>
<style>
body {
    font-family: Arial, sans-serif;
    background-image: url('back.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.container {
    padding: 20px;
    padding-bottom: 60px; /* Space for footer */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-date, .clock {
    text-align: center;
}

.logo {
    text-align: center;
}

.logo img {
    height: 200px; /* Adjusted for smaller screens */
}

.spot-rate, .commodities {
    margin-top: 20px;
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 10px;
}

.spot-rate h2, .commodities h2 {
    text-align: center;
    font-weight: bold;
    font-size:45px;
}

.rates {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Wrap elements for small screens */
    margin-top: 20px;
}

.rate-box {
    text-align: center;
    background-color: #2b2b2b;
    padding: 20px; /* Reduced padding for smaller screens */
    border-radius: 10px;
    margin: 10px; /* Add margin to space out boxes */
    flex: 1 1 200px; /* Flexible width */
}

.rate-box h3 {
    margin: 10px;
    font-size: 25px; /* Reduced size for smaller screens */
}

.rate-box p {
    font-size: 30px; /* Adjust font size as needed */
    margin: 20px 0; /* Increase margin to create space between lines */
    font-weight: bold;
    line-height: 1.5; /* Increase line height for better spacing */
}

.rate-box .bid {
    display: block;
    margin-bottom: 10px; /* Increase space below BID */
}

.rate-box .ask {
    display: block;
    margin-top: 10px; /* Increase space above ASK */
}

.price-change {
    display: block;
    color: #ff0000;
}

.commodities table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.commodities th, .commodities td {
    border: 1px solid #ffffff;
    padding: 10px; /* Reduced padding for smaller screens */
    text-align: center;
    font-weight: bold;
    font-size: 16px; /* Reduced size for smaller screens */
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #1e1e1e;
    padding: 10px;
    text-align: center;
}

/* Existing CSS for rate boxes */
.box-green {
    background-color: #4caf50;
    color: white;
}

.box-red {
    background-color: #f44336;
    color: white;
}

/* New styles for table cells */
td.box-green {
    background-color: #4caf50;
    color: white;
}

td.box-red {
    background-color: #f44336;
    color: white;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .spot-rate h2, .commodities h2 {
        font-size: 30px;
    }

    .rate-box h3 {
        font-size: 20px;
    }

    .rate-box p {
        font-size: 25px;
    }

    .commodities th, .commodities td {
        font-size: 14px;
    }

    .logo img {
        height: 150px;
    }
}

@media (max-width: 480px) {
    .spot-rate h2, .commodities h2 {
        font-size: 25px;
    }

    .rate-box h3 {
        font-size: 18px;
    }

    .rate-box p {
        font-size: 20px;
    }

    .commodities th, .commodities td {
        font-size: 12px;
        padding: 5px;
    }

    .logo img {
        height: 100px;
    }
}
</style>
</html>

Gold bars on black background with empty space. Financial concept. 3d rendering

COMMODITY	WEIGHT	PRICE (AED)
GOLD 9999	1 KG	...
GOLD 995	1 KG	...
GOLD 999	TTB	...