<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(
90 degrees,
rgba(255, 247, 234, 1) 0%,
rgba(255, 238, 210, 1) 100%
);
}
.livegold_pricesPage .prices-box .main-price-box.silver {
background: linear-gradient(
90 degrees,
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 class="livegold_pricesPage" dir="rtl">
<div>
<h1 class="title-gold">Gold price according to the global stock exchange</h1>
<div class="time">
<div id="Date">
<div class="Day"><span id="Day"></span></div>
-
<div class="Month"><span id="Month"></span></div>
-
<div class="Year"><span id="Year"></span></div>
</div>
<div id="TimeClock">
<div class="hours"><span id="hours"></span></div>
:
<div class="minutes"><span id="minutes"></span></div>
:
<div class="seconds"><span id="seconds"></span></div>
</div>
</div>
<div class="prices-box gold">
<div class="main-price-box gold">
<img
src="https://livegold-media.s3.us-east-1.amazonaws.com/media/6bd046ac-5e38-4a58-ac1c-7f9c13e47b19.png"
alt="Gold Bars"
/>
<p style="white-space: nowrap">
ounce of gold
<span class="gold-text-price gold"></span>
<span class="gold-currency">$</span>
</p>
<div class="arrow-icon gold"></div>
</div>
<div class="sub-prices-box">
<div class="sub-price-box gold-24k">
<div class="sub-price-section">
<p class="cerat">24</p>
100 karat gold
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="gold-text-price gold-24k"></span>
<span class="arrow-icon gold-24k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
<div class="sub-price-box gold-22k">
<div class="sub-price-section">
<p class="cerat">22</p>
100 karat gold
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="gold-text-price gold-22k"></span>
<span class="arrow-icon gold-22k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
<div class="sub-price-box gold-21k">
<div class="sub-price-section">
<p class="cerat">21</p>
100 karat gold
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="gold-text-price gold-21k"></span>
<span class="arrow-icon gold-21k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
<div class="sub-price-box gold-20k">
<div class="sub-price-section">
<p class="cerat">20</p>
100 karat gold
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="gold-text-price gold-20k"></span>
<span class="arrow-icon gold-20k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
<div class="sub-price-box gold-18k">
<div class="sub-price-section">
<p class="cerat">18</p>
100 karat gold
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="gold-text-price gold-18k"></span>
<span class="arrow-icon gold-18k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
</div>
</div>
<div class="prices-box silver">
<div class="sub-prices-box">
<div class="sub-price-box silver-24k">
<div class="sub-price-section">
<p class="cerat">gram</p>
Silver
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="silver-text-price silver-24k"></span>
<span class="arrow-icon silver-24k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
<div class="sub-price-box silver-22k">
<div class="sub-price-section">
<p class="cerat">kilogram</p>
Silver
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="silver-text-price silver-22k"></span>
<span class="arrow-icon silver-22k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/kg
</p>
</div>
</div>
<div class="sub-price-box silver-21k">
<div class="sub-price-section">
<p class="cerat">21</p>
100 carat silver
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="silver-text-price silver-21k"></span>
<span class="arrow-icon silver-21k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
<div class="sub-price-box silver-20k">
<div class="sub-price-section">
<p class="cerat">20</p>
100 carat silver
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="silver-text-price silver-20k"></span>
<span class="arrow-icon silver-20k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
<div class="sub-price-box silver-18k">
<div class="sub-price-section">
<p class="cerat">18</p>
100 carat silver
</div>
<div class="sub-price-section-1">
<p class="price">
<span class="silver-text-price silver-18k"></span>
<span class="arrow-icon silver-18k"></span>
</p>
<p class="currency">
<span class="riyal-currency"></span>
/غ
</p>
</div>
</div>
</div>
<div class="main-price-box silver">
<img
src="https://livegold-media.s3.us-east-1.amazonaws.com/media/61a89c6b-aca2-4f3d-b1c5-457765738b15.png"
alt="Silver Bars"
/>
<p style="white-space: nowrap">
silver ounce
<span class="silver-text-price silver"></span>
<span class="silver-currency">$</span>
</p>
<div class="arrow-icon silver"></div>
</div>
</div>
</div>
</div>
var priceTypes = [
"price",
"priceGram18k",
"priceGram20k",
"priceGram21k",
"priceGram22k",
"priceGram24k",
];
var colorsConfig = {
arrowUpColor: "",
arrowDownColor: "",
};
function updateConfig(config) {
function addDateTimeSvgs(){
// Calendar SVG for Date
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 = '<rect stroke-linecap="round"/><path d="M16 3V6" stroke="#858480" stroke-width="2" stroke-linecap="round"/>';
document.getElementById('Date')(calendarSvg);
// Clock SVG for Time (replacing existing one)
var timeClock = document. getElementById('TimeClock');
var clockSvg = timeClock. querySelector('svg');
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 = '<circle cx="12" cy="12" r="9" stroke="#858480" stroke-width="2"/><path d="M12 6V12L16 14" stroke="#858480" stroke-width="2" stroke-linecap="round"/>';
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"><defs><style>.cls-1 {fill: inherit;}</style></defs><path class="cls-1" d="M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51 -90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z"/><path class="cls-1" d="M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70. 33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.6 8,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,6 2.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53 -6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23 .27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z"/></svg>';
document
.querySelectorAll('.livegold_pricesPage .riyal-currency')
.forEach(function(e) { e = riyalCurrency; });
}
if (config) {
var pricePage = document. querySelector(".livegold_pricesPage");
priceTypes.forEach(function(type) {
if (!(config.goldItems && config.goldItems.includes(type))) {
var selector = "";
if (type === "price") {
selector = '.livegold_pricesPage .main-price-box.gold';
} else {
selector = '.livegold_pricesPage .sub-price-box.gold-' + type.slice(-3);
}
document.querySelector(selector).style.display = "none";
}
if (!(config.silverItems && config.silverItems.includes(type))) {
var selector = "";
if (type === "price") {
selector = '.livegold_pricesPage .main-price-box.silver';
} else {
selector = '.livegold_pricesPage .sub-price-box.silver-' + type.slice(-3);
}
document.querySelector(selector).style.display = "none";
}
});
if (config.goldItems && config.goldItems.length === 0) {
document.querySelector(
'.livegold_pricesPage .prices-box.gold'
).style.display = "none";
}
if (config.silverItems && config.silverItems.length === 0) {
document.querySelector(
'.livegold_pricesPage .prices-box.silver'
).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) {
document.querySelector(".livegold_pricesPage .time").style.display =
"none";
}
if (config.mode === "custom") {
document.querySelector(
'.livegold_pricesPage .prices-box.gold'
).style.backgroundColor = config.goldBackgroundColor || "#f9f6f1";
document.querySelector(
'.livegold_pricesPage .prices-box.silver'
).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"],
silverItems: ["price","priceGram22k","priceGram24k"],
viewType: "full",
mode: "light",
goldBackgroundColor: "#f9f6f1",
goldForegroundColor: "#5a5957",
silverBackgroundColor: "#f7f7f7",
silverForegroundColor: "#5a5957",
goldColor: "#eda22d",
silverColor: "#686868",
upColor: "#93C785",
downColor: "#E98587",
hideLiveTime: false,
};
updateConfig(designConfig);
}
// Fetch and update prices
function getPrices() {
var options = {
method: "GET",
headers: {
"Content-Type": "application/json;charset=utf-8",
"X-API-KEY": "loy4ukuzz3kc0ee4xw1a9zjupp236cqf",
},
};
// Replace this URL with your actual API endpoint
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]);
if (goldPrice)
updatePrice(
"gold",
type.slice(-3),
goldPrice,
type === "price"
);
if (silverPrice)
updatePrice(
"silver",
type.slice(-3),
silverPrice,
type === "price"
);
});
})
.catch(function(error) {
console.error(
"There has been a problem with your fetch operation:",
error
);
});
}
// Update price display with arrows
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;
document.querySelector(selector) = mainType === "silver" && type === "22k" ? ((price.value || 0) * 1000) : price.value;
var arrowContainer = document. querySelector(arrowSelector);
arrowContainer = "";
var upArrowSVG = '<svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9285 5.5H21.2142V11.7857" stroke="' + (colorsConfig.arrowUpColor || "#93C785") + '" stroke-width="1.57143" stroke-linecap="round" stroke-linejoin="round" /><path d="M21.2142 5.5L12.3356 14.3786C12.1888 14.5225 11.9913 14.6032 11.7856 14.6032C11.58 14.6032 11.3825 14.5225 11.2356 14.3786L7.62136 10.7643C7.47449 10.6203 7.27702 10.5397 7.07136 10.5397C6.8657 10.5397 6.66823 10.6203 6.52136 10.7643L0.785645 16.5" stroke="' + (colorsConfig.arrowUpColor || "#93C785") + '" stroke-width="1.57143" stroke-linecap="round" stroke-linejoin="round" /></svg>';
var downArrowSVG = '<svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9285 16.5001H21.2142V10.2144" stroke="' + (colorsConfig.arrowDownColor ||. "#E98587") + '" stroke-width="1.57143" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21.2142 16.5L12.3356 7.62143C12.1888 7.47746 11.9913 7.39683 11.7856 7.39683C11.58 7.39683 11.3825 7.47746 11.2356 7.62143L7.62136 11.2357C7.47449 11.3797 7.27702 11.4603 7.07136 11.4603C6.8657 11.4603 6.66823 11.3797 6.52136 11.2357L0.785645 5.5" stroke="' + (colorsConfig.arrowDownColor || "#E98587") + '" stroke-width="1.57143" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
if (price.status === "up") {
arrowContainer = upArrowSVG;
} else if (price.status === "down") {
arrowContainer = downArrowSVG;
}
}
// Update time display
function time() {
var hours = document. getElementById("hours");
var minutes = document. getElementById("minutes");
var seconds = document. getElementById("seconds");
var Day = document. getElementById("Day");
var Month = document. getElementById("Month");
var Year = document. getElementById("Year");
var d = new Date();
var day = d.getDate();
if (day < 10) {
day = "0" + day;
}
var month = d.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
var year = d.getFullYear();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
var ampm = h >= 12 ? "PM": "AM";
h = h % 12;
h = h ? h: 12; // If hour is 0, set it to 12
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);
}
getConfig();
getPrices();
setInterval(getPrices, 45000);
setInterval(time, 1000);
Aloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
