اسعار الذهب

<html> <style> /* Main Container Styles */ .livegold_pricesPage > div { width: 100%; margin: auto; align-content: center; align-items: center; text-align: center; font-size: clamp(14px, 3vw, 18px); overflow-x: hidden; /* Prevent horizontal scrolling */ } /* Title Styles */ .livegold_pricesPage div h1 { font-size: clamp(14px, 4vw, 35px); margin: 25px auto; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; gap: 10px; } .livegold_pricesPage div img { width: 100%; max-width: 100px; /* Ensure the image does not overflow */ } /* Time Display Styles */ .time { display: flex; flex-direction: row; gap: 10px; justify-content: center; align-items: center; } #TimeClock { font-family: Roboto; font-size: clamp(14px, 3vw, 16px); padding: 7px; display: flex; flex-direction: row-reverse; align-items: center; } .hours, .minutes, .seconds, .Day, .Month, .Year { margin: 5px; } #hours, #seconds, #minutes, #Day, #Month, #Year { box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); background: #f7f9f9; border-radius: 4px; color: #323232; padding: 7px; display: flex; justify-content: center; align-items: center; } #Date { font-family: Roboto; font-size: clamp(14px, 3vw, 16px); display: flex; flex-direction: row; align-items: center; } .title-gold { text-align: center; margin: 40px 0; } .livegold_pricesPage .prices-box { display: flex; /* width: 100%; */ border-radius: 20px; padding: 15px; max-width: 700px; margin-left: auto; margin-right: auto; } .livegold_pricesPage .prices-box.gold { background-color: #f9f6f1; margin-bottom: 20px; } .livegold_pricesPage .prices-box.silver { background-color: #f7f7f7; margin-top: 20px; } .livegold_pricesPage .prices-box .main-price-box { position: relative; border-radius: 20px; padding: 15px; align-self: start; } .livegold_pricesPage .prices-box .main-price-box.gold { background: linear-gradient( 90deg, rgba(255, 247, 234, 1) 0%, rgba(255, 238, 210, 1) 100% ); } .livegold_pricesPage .prices-box .main-price-box.silver { background: linear-gradient( 90deg, rgba(224, 224, 224, 1) 0%, rgba(237, 237, 237, 1) 100% ); } .livegold_pricesPage .prices-box .main-price-box img { min-width: 200px; } .livegold_pricesPage .prices-box .main-price-box.gold .arrow-icon { position: absolute; transform: scale(1.4); top: 20px; right: 20px; } .livegold_pricesPage .prices-box .main-price-box.silver .arrow-icon { position: absolute; transform: scale(1.4); top: 20px; left: 20px; } .livegold_pricesPage .prices-box.gold .sub-prices-box { width: 100%; padding-right: 30px; padding-left: 10px; } .livegold_pricesPage .prices-box.silver .sub-prices-box { width: 100%; padding-left: 30px; padding-right: 10px; } .livegold_pricesPage .prices-box .sub-price-box { display: flex; align-items: center; border-bottom: 2px dashed #d5d2cd; } .livegold_pricesPage .prices-box .sub-price-box:last-child { border: none; } .livegold_pricesPage .prices-box .sub-price-section { width: 100%; padding: 25px; color: #5a5957; } .livegold_pricesPage .prices-box .sub-price-section p { font-size: 17px; margin: 0px; } .livegold_pricesPage .prices-box .sub-price-section p.cerat { font-size: 26px; font-weight: 700; margin-bottom: 10px; } .livegold_pricesPage .prices-box .sub-price-section-1 { width: 100%; padding: 25px; color: #5a5957; } .livegold_pricesPage .prices-box .sub-price-section-1 p { margin: 0px; } .livegold_pricesPage .prices-box .sub-price-section-1 .price { font-size: 17px; margin-bottom: 10px; } .gold-text-price, .gold-currency { color: #eda22d; font-size: 21px; font-weight: 800; } .silver-text-price, .silver-currency { color: #686868; font-size: 21px; font-weight: 800; } /* Media Queries */ @media (max-width: 768px) { .prices-box { flex-direction: column; /* width: 100%; */ margin-left: 0px; margin-right: 0px; } .livegold_pricesPage .prices-box .main-price-box { align-self: center; width: 95%; margin-left: 15px; margin-right: 15px; } .livegold_pricesPage .prices-box .sub-prices-box { padding: 0px !important; } .livegold_pricesPage .prices-box.silver { flex-direction: column-reverse; } } </style> div.app-inner.flex.flex-col.min-h-full > div.container'); if (!container) { console.error('GTM Error: The target element with class "container" was not found.'); return; } container = ''; // --- DEFINE HTML CONTENT --- var htmlContent = '
' + '
' + '

سعر الذهب حسب البورصة العالمية

' + '
' + '
' + '
-' + '
-' + '
' + '
' + '
' + '
:' + '
:' + '
' + '
' + '
' + '
' + '
' + 'Gold Bars' + '

' + 'اونصة ذهب' + '' + '$' + '

' + '
' + '
' + '
' + '

24

ذهب عيار

' + '

22

ذهب عيار

' + '

21

ذهب عيار

' + '

20

ذهب عيار

' + '

18

ذهب عيار

' + '

14

ذهب عيار

' + '
' + '
' + '
' + '
' + '

غرام

فضة

' + '

كيلو غرام

فضة

/كغ

' + '

21

فضة عيار

' + '

20

فضة عيار

' + '

18

فضة عيار

' + '

14

فضة عيار

' + '
' + '
' + 'Silver Bars' + '

' + 'اونصة فضة' + '' + '$' + '

' + '
' + '
' + '
' + '
' + '
'; container = htmlContent; // --- DEFINE AND EXECUTE JAVASCRIPT LOGIC --- var priceTypes = ["price", "priceGram14k", "priceGram18k", "priceGram20k", "priceGram21k", "priceGram22k", "priceGram24k"]; var colorsConfig = { arrowUpColor: "", arrowDownColor: "" }; function updateConfig(config) { function addDateTimeSvgs() { var calendarSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); calendarSvg.setAttribute('style', 'margin-right: 5px'); calendarSvg.setAttribute('width', '1.3em'); calendarSvg.setAttribute('height', '1.3em'); calendarSvg.setAttribute('viewBox', '0 0 24 24'); calendarSvg.setAttribute('fill', 'none'); calendarSvg = ''; document.getElementById('Date')(calendarSvg); var timeClock = document.getElementById('TimeClock'); var newClockSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); newClockSvg.setAttribute('style', 'margin-right: 5px'); newClockSvg.setAttribute('width', '1.3em'); newClockSvg.setAttribute('height', '1.3em'); newClockSvg.setAttribute('viewBox', '0 0 24 24'); newClockSvg.setAttribute('fill', 'none'); newClockSvg = ''; timeClock.insertBefore(newClockSvg, timeClock.firstChild); } addDateTimeSvgs(); function updateLastChildBorder(mainType) { var subPriceBoxes = document.querySelectorAll('.livegold_pricesPage .prices-box.' + mainType + ' .sub-price-box:not([style*="display: none"])'); subPriceBoxes.forEach(function(box) { box.style.borderBottom = "2px dashed #d5d2cd"; }); if (subPriceBoxes.length > 0) { subPriceBoxes[subPriceBoxes.length - 1].style.borderBottom = "none"; } } function updateRiyalCurrency() { var riyalCurrency = '<svg width="1em" height="1em" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1124.14 1256.39"><style>.cls-1 {fill: inherit;}</style></svg>'; document.querySelectorAll('.livegold_pricesPage .riyal-currency').forEach(function(e) { e = riyalCurrency; }); } if (config) { priceTypes.forEach(function(type) { if (!(config.goldItems && config.goldItems.includes(type))) { var selector = (type === "price") ? '.livegold_pricesPage .main-price-box.gold' : '.livegold_pricesPage .sub-price-box.gold-' + type.slice(-3); var element = document.querySelector(selector); if (element) element.style.display = "none"; } if (!(config.silverItems && config.silverItems.includes(type))) { var selector = (type === "price") ? '.livegold_pricesPage .main-price-box.silver' : '.livegold_pricesPage .sub-price-box.silver-' + type.slice(-3); var element = document.querySelector(selector); if (element) element.style.display = "none"; } }); if (config.goldItems && config.goldItems.length === 0) { var goldBox = document.querySelector('.livegold_pricesPage .prices-box.gold'); if (goldBox) goldBox.style.display = "none"; } if (config.silverItems && config.silverItems.length === 0) { var silverBox = document.querySelector('.livegold_pricesPage .prices-box.silver'); if (silverBox) silverBox.style.display = "none"; } updateLastChildBorder("gold"); updateLastChildBorder("silver"); if (config.viewType !== "full") { if (config.viewType === "onlyDigitsArrows" || config.viewType === "onlyDigits") { document.querySelectorAll(".livegold_pricesPage .currency").forEach(function(e) { e.style.display = "none"; }); document.querySelectorAll(".livegold_pricesPage .gold-currency").forEach(function(e) { e.style.display = "none"; }); document.querySelectorAll(".livegold_pricesPage .silver-currency").forEach(function(e) { e.style.display = "none"; }); } if (config.viewType === "onlyDigitsCurrency" || config.viewType === "onlyDigits") { document.querySelectorAll(".livegold_pricesPage .arrow-icon").forEach(function(e) { e.style.display = "none"; }); } } if (config.hideLiveTime) { var timeElement = document.querySelector(".livegold_pricesPage .time"); if (timeElement) timeElement.style.display = "none"; } if (config.mode === "custom") { var goldBox = document.querySelector('.livegold_pricesPage .prices-box.gold'); if (goldBox) goldBox.style.backgroundColor = config.goldBackgroundColor || "#f9f6f1"; var silverBox = document.querySelector('.livegold_pricesPage .prices-box.silver'); if (silverBox) silverBox.style.backgroundColor = config.silverBackgroundColor || "#f7f7f7"; document.querySelectorAll(".livegold_pricesPage .prices-box.gold .sub-price-section").forEach(function(e) { e.style.color = config.goldForegroundColor || "#5a5957"; }); document.querySelectorAll(".livegold_pricesPage .prices-box.gold .sub-price-section-1").forEach(function(e) { e.style.color = config.goldForegroundColor || "#5a5957"; }); document.querySelectorAll(".livegold_pricesPage .prices-box.silver .sub-price-section").forEach(function(e) { e.style.color = config.silverForegroundColor || "#5a5957"; }); document.querySelectorAll(".livegold_pricesPage .prices-box.silver .sub-price-section-1").forEach(function(e) { e.style.color = config.silverForegroundColor || "#5a5957"; }); document.querySelectorAll(".livegold_pricesPage .gold-text-price").forEach(function(e) { e.style.color = config.goldColor || "#eda22d"; }); document.querySelectorAll(".livegold_pricesPage .gold-currency").forEach(function(e) { e.style.color = config.goldColor || "#eda22d"; }); document.querySelectorAll(".livegold_pricesPage .silver-text-price").forEach(function(e) { e.style.color = config.silverColor || "#686868"; }); document.querySelectorAll(".livegold_pricesPage .silver-currency").forEach(function(e) { e.style.color = config.silverColor || "#686868"; }); colorsConfig.arrowUpColor = config.upColor; colorsConfig.arrowDownColor = config.downColor; } updateRiyalCurrency(); } } function getConfig() { var designConfig = { template: "basic", goldItems: ["priceGram18k","priceGram21k","price","priceGram24k"], silverItems: ["priceGram22k"], viewType: "full", mode: "custom", goldBackgroundColor: "#FDF9F9", goldForegroundColor: "#020202", silverBackgroundColor: "#EFEBEB", silverForegroundColor: "#090000", goldColor: "#C8C13B", silverColor: "#6C6565", upColor: "#22850A", downColor: "#B10404", hideLiveTime: false, }; updateConfig(designConfig); } function getPrices() { var options = { method: "GET", headers: { "Content-Type": "application/json;charset=utf-8", "X-API-KEY": "wzq8k32poepyi2oxs6d3ak0ji4d8cb83" }, }; var apiUrl = "https://live-gold-development-1ce6929338ed.herokuapp.com/api/metals"; fetch(apiUrl, options) .then(function(res) { if (!res.ok) { throw new Error("Network response was not ok " + res.statusText); } return res.json(); }) .then(function(prices) { priceTypes.forEach(function(type) { var goldPrice = prices.gold && prices.gold[type]; var silverPrice = type === "priceGram22k" ? (prices.silver && prices.silver["priceGram24k"]) : (prices.silver && prices.silver[type]); var isMain = (type === "price"); var karat = isMain ? "" : type.slice(-3); if (goldPrice) { updatePrice("gold", karat, goldPrice, isMain); } if (silverPrice) { updatePrice("silver", karat, silverPrice, isMain); } }); }) .catch(function(error) { console.error("There has been a problem with your fetch operation:", error); }); } function updatePrice(mainType, type, price, isMain) { if (isMain === undefined) isMain = false; var selectorType = isMain ? mainType : mainType + '-' + type; var selector = '.livegold_pricesPage .' + mainType + '-text-price.' + selectorType; var arrowSelector = '.livegold_pricesPage .arrow-icon.' + selectorType; var priceElement = document.querySelector(selector); var arrowContainer = document.querySelector(arrowSelector); if (priceElement && arrowContainer) { priceElement = mainType === "silver" && type === "22k" ? ((price.value || 0) * 1000) : price.value; arrowContainer = ""; var upArrowSVG = '<svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>'; var downArrowSVG = '<svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>'; if (price.status === "up") { arrowContainer = upArrowSVG; } else if (price.status === "down") { arrowContainer = downArrowSVG; } } } function time() { var hours = document.getElementById("hours"), minutes = document.getElementById("minutes"), seconds = document.getElementById("seconds"), Day = document.getElementById("Day"), Month = document.getElementById("Month"), Year = document.getElementById("Year"), d = new Date(), day = d.getDate(), month = d.getMonth() + 1, year = d.getFullYear(), s = d.getSeconds(), m = d.getMinutes(), h = d.getHours(); Day = ("0" + day).substr(-2); Month = ("0" + month).substr(-2); Year = year; hours = ("0" + h).substr(-2); minutes = ("0" + m).substr(-2); seconds = ("0" + s).substr(-2); } // Initial function calls getConfig(); getPrices(); setInterval(getPrices, 45000); setInterval(time, 1000); })(); </html>