اسعار الذهب
<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 =
' ';
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>
' +
'
';
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 = '' +
'
' +
'سعر الذهب حسب البورصة العالمية
' + '' +
'
' +
'' +
'
' +
'-' +
'
-' +
'
' +
'
' +
'
' +
':' +
'
:' +
'
' +
'
' +
'
' +
'' +
'
' +
'
' +
'
' +
'' + 'اونصة ذهب' + '' + '$' + '
' + '' + '' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'24
ذهب عيار
/غ
22
ذهب عيار
/غ
21
ذهب عيار
/غ
20
ذهب عيار
/غ
18
ذهب عيار
/غ
14
ذهب عيار
/غ
' +
'
' +
'' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'غرام
فضة
/غ
كيلو غرام
فضة
/كغ
21
فضة عيار
/غ
20
فضة عيار
/غ
18
فضة عيار
/غ
14
فضة عيار
/غ
' +
'
' +
'
' +
'
' +
'' + 'اونصة فضة' + '' + '$' + '
' + '' + '