<style>
body {
margin-top: 50px;
}
.store-notify {
margin-top: 50px !important;
}
#mainnav > div.inner.bg-inherit {
top: 56px !important;
}
.sticky {
top: 46px;
}
.livegold_pricesBar {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
background-color: #000;
color: #fff;
padding: 2px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
z-index: 1000;
}
.livegold_pricesBar.light {
background-color: #fff;
color: #000;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.livegold_pricesBar ul {
display: flex;
justify-content: space-around;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
direction: ltr;
}
.livegold_pricesBar ul li {
text-align: center;
font-size: 14px;
position: relative;
padding: 0 20px;
flex: 1;
}
.livegold_pricesBar_loading {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 10px 0;
}
.livegold_pricesBar_loading span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #debc5b;
margin: 0 4px;
animation: bounce 1.4s infinite ease-in-out both;
}
.livegold_pricesBar_loading span:nth-child(1) {
animation-delay: -0.32s;
}
.livegold_pricesBar_loading span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes bounce {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.livegold_pricesBar ul li .label {
display: block;
font-size: 14px;
margin-bottom: 0px;
}
.livegold_pricesBar ul li .livegold_pricesBar_priceContainer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.livegold_pricesBar ul li .price {
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}
.livegold_pricesBar_silverItem .price,
.livegold_pricesBar_silverItem .currency {
color: #a9b0b4;
}
.livegold_pricesBar_silverItem::after {
background-color: #a9b0b4;
}
.livegold_pricesBar_goldItem .price,
.livegold_pricesBar_goldItem .currency {
color: #debc5b;
}
.livegold_pricesBar_goldItem::after {
background-color: #debc5b;
}
.livegold_pricesBar ul li .currency {
font-size: 12px;
margin-right: 5px;
}
.livegold_pricesBar ul li .arrow-icon {
width: 22px;
height: 22px;
}
.livegold_pricesBar ul li .label,
.livegold_pricesBar ul li .price {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.livegold_pricesBar ul li::after {
content: "";
height: 100%;
width: 0.25px;
position: absolute;
right: 0;
top: 0;
}
.livegold_pricesBar ul li:last-child::after {
display: none;
}
@media (max-width: 768px) {
#mainnav > div.inner.bg-inherit {
top: 78px !important;
}
.livegold_pricesBar ul li {
margin-top: 0;
}
.livegold_pricesBar ul li .divi {
display: flex !important;
font-size: 16px;
margin-top: 0;
position: relative;
justify-content: space-around !important;
flex-direction: row-reverse !important;
}
.livegold_pricesBar ul {
flex-direction: column;
align-items: center;
}
.livegold_pricesBar ul li {
display: none;
width: 100%;
margin-bottom: 10px;
}
.livegold_pricesBar ul li.gold-24k-item {
display: block;
font-size: 16px;
margin-top: 0;
position: relative;
}
.livegold_pricesBar ul li.gold-24k-item::before {
content: "▼";
position: absolute;
left: 35px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #debc5b;
transition: transform 0.3s ease;
}
.livegold_pricesBar ul li.show {
display: block;
}
body {
margin-top: 40px;
}
.store-notify {
margin-top: 40px !important;
}
.sticky {
top: 40px;
}
.livegold_pricesBar ul li.gold-24k-item.expanded::before {
transform: translateY(-50%) rotate(180deg);
}
}
</style>
<div class="livegold_pricesBar">
<div class="livegold_pricesBar_loading">
<span></span>
<span></span>
<span></span>
</div>
<ul style="display: none">
<li class="livegold_pricesBar_silverItem price">
<div class="divi">
<span class="label">فضة أونصة</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">دولار</span>
<span class="price silver"></span>
<div class="arrow-icon silver-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_silverItem priceGram24k">
<div class="divi">
<span class="label">فضة غرام</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price silver-24k"></span>
<div class="arrow-icon silver-24k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_silverItem priceGram22k">
<div class="divi">
<span class="label">فضة عيار 22</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price silver-22k"></span>
<div class="arrow-icon silver-22k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_silverItem priceGram21k">
<div class="divi">
<span class="label">فضة عيار 21</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price silver-21k"></span>
<div class="arrow-icon silver-21k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_silverItem priceGram20k">
<div class="divi">
<span class="label">فضة عيار 20</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price silver-20k"></span>
<div class="arrow-icon silver-20k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_silverItem priceGram18k">
<div class="divi">
<span class="label">فضة عيار 18</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price silver-18k"></span>
<div class="arrow-icon silver-18k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_silverItem priceGram14k">
<div class="divi">
<span class="label">فضة عيار 14</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price silver-14k"></span>
<div class="arrow-icon silver-14k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_goldItem price">
<div class="divi">
<span class="label">ذهب أونصة</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">دولار</span>
<span class="price gold"></span>
<div class="arrow-icon gold-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_goldItem gold-24k-item priceGram24k">
<div class="divi">
<span class="label">24 ذهب عيار</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price gold-24k"></span>
<div class="arrow-icon gold-24k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_goldItem priceGram22k">
<div class="divi">
<span class="label">22 ذهب عيار</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price gold-22k"></span>
<div class="arrow-icon gold-22k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_goldItem priceGram21k">
<div class="divi">
<span class="label">21 ذهب عيار</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price gold-21k"></span>
<div class="arrow-icon gold-21k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_goldItem priceGram20k">
<div class="divi">
<span class="label">20 ذهب عيار</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price gold-20k"></span>
<div class="arrow-icon gold-20k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_goldItem priceGram18k">
<div class="divi">
<span class="label">18 ذهب عيار</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price gold-18k"></span>
<div class="arrow-icon gold-18k-arrow"></div>
</div>
</div>
</li>
<li class="livegold_pricesBar_goldItem priceGram14k">
<div class="divi">
<span class="label">14 ذهب عيار</span>
<div class="livegold_pricesBar_priceContainer">
<span class="currency">ريال</span>
<span class="price gold-14k"></span>
<div class="arrow-icon gold-14k-arrow"></div>
</div>
</div>
</li>
</ul>
</div>
<script>
var priceTypes = [
"price",
"priceGram14k",
"priceGram18k",
"priceGram20k",
"priceGram21k",
"priceGram22k",
"priceGram24k",
];
var colorsConfig = {
arrowUpColor: "",
arrowDownColor: "",
};
function updateConfig(config) {
if (config) {
var priceBar = document.querySelector(".livegold_pricesBar");
priceTypes.forEach(function(type) {
if (!(config.goldItems && config.goldItems.includes(type))) {
document.querySelector(
'.livegold_pricesBar_goldItem.' + type
).style.display = "none";
}
if (!(config.silverItems && config.silverItems.includes(type))) {
document.querySelector(
'.livegold_pricesBar_silverItem.' + type
).style.display = "none";
}
});
if (config.viewType !== "full") {
if (
config.viewType === "onlyDigitsArrows" ||
config.viewType === "onlyDigits"
) {
document
.querySelectorAll(".livegold_pricesBar_goldItem .currency")
.forEach(function(e) { e.style.display = "none"; });
document
.querySelectorAll(".livegold_pricesBar_silverItem .currency")
.forEach(function(e) { e.style.display = "none"; });
}
if (
config.viewType === "onlyDigitsCurrency" ||
config.viewType === "onlyDigits"
) {
document
.querySelectorAll(".livegold_pricesBar_goldItem .arrow-icon")
.forEach(function(e) { e.style.display = "none"; });
document
.querySelectorAll(".livegold_pricesBar_silverItem .arrow-icon")
.forEach(function(e) { e.style.display = "none"; });
}
}
if (config.mode === "light") priceBar.classList.add("light");
if (config.mode === "custom") {
priceBar.style.backgroundColor = config.backgroundColor || "#000";
priceBar.style.color = config.foregroundColor || "#fff";
document
.querySelectorAll(".livegold_pricesBar_goldItem .price")
.forEach(function(e) { e.style.color = config.goldColor || "#debc5b"; });
document
.querySelectorAll(".livegold_pricesBar_goldItem .currency")
.forEach(function(e) { e.style.color = config.goldColor || "#debc5b"; });
document
.querySelectorAll(".livegold_pricesBar_silverItem .price")
.forEach(function(e) { e.style.color = config.silverColor || "#a9b0b4"; });
document
.querySelectorAll(".livegold_pricesBar_silverItem .currency")
.forEach(function(e) { e.style.color = config.silverColor || "#a9b0b4"; });
var style = document.createElement("style");
style.innerHTML = '.livegold_pricesBar_goldItem::after {' +
'background-color: ' + (config.goldColor || "#debc5b") + ' !important;' +
'}' +
'.livegold_pricesBar_silverItem::after {' +
'background-color: ' + (config.silverColor || "#a9b0b4") + ' !important;' +
'}';
document.head.appendChild(style);
colorsConfig.arrowUpColor = config.upColor;
colorsConfig.arrowDownColor = config.downColor;
}
// Hide loading and show prices
document.querySelector(".livegold_pricesBar_loading").style.display =
"none";
document.querySelector(".livegold_pricesBar ul").style.display = "flex";
}
}
function getConfig() {
var designConfig = {
template: "basic",
goldItems: ["priceGram18k","priceGram21k","priceGram22k","priceGram24k","price"],
silverItems: ["price"],
viewType: "full",
mode: "dark",
backgroundColor: "#000000",
foregroundColor: "#ffffff",
goldColor: "#debc5b",
silverColor: "#a9b0b4",
upColor: "#627E77",
downColor: "#C86868",
};
updateConfig(designConfig);
}
function getPrices() {
var options = {
method: "GET",
headers: {
"Content-Type": "application/json;charset=utf-8",
"X-API-KEY": "24wz74mgjt01p03mlb31xzvfk8a8jb2t",
},
};
// 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 = prices.silver && prices.silver[type];
if (goldPrice) updatePrice("gold", type, goldPrice);
if (silverPrice) updatePrice("silver", type, silverPrice);
});
})
.catch(function(error) {
console.error(
"There has been a problem with your fetch operation:",
error
);
});
}
function updatePrice(mainType, type, price) {
var mainSelector = '.livegold_pricesBar_' + mainType + 'Item.' + type;
document.querySelector(mainSelector + ' .price').innerHTML = price.value;
var arrowContainer = document.querySelector(mainSelector + ' .arrow-icon');
arrowContainer.innerHTML = "";
var upArrowSVG = '<svg width="22" height="22" 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 || "#627E77") + '" 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 || "#627E77") + '" stroke-width="1.57143" stroke-linecap="round" stroke-linejoin="round" /></svg>';
var downArrowSVG = '<svg width="22" height="22" 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 || "#C86868") + '" 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 || "#C86868") + '" stroke-width="1.57143" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
var balancedArrowSVG = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="5" stroke="' + (colorsConfig.arrowBalancedColor || "#666666") + '" stroke-width="1.57143" fill="none" /></svg>';
if (price.status === "up") {
arrowContainer.innerHTML = upArrowSVG;
} else if (price.status === "down") {
arrowContainer.innerHTML = downArrowSVG;
} else if (price.status === "balance") {
arrowContainer.innerHTML = balancedArrowSVG;
}
}
// We'll add the event listener after the content is loaded
function setupEventListeners() {
document
.querySelector(".gold-24k-item")
.addEventListener("click", function() {
var items = document.querySelectorAll(".livegold_pricesBar ul li");
var isExpanded = false;
// Check if items are currently expanded
items.forEach(function(item) {
if (
!item.classList.contains("gold-24k-item") &&
item.classList.contains("show")
) {
isExpanded = true;
}
});
// Toggle visibility
items.forEach(function(item) {
if (!item.classList.contains("gold-24k-item")) {
if (isExpanded) {
item.classList.remove("show");
} else {
item.classList.add("show");
}
}
});
// Ensure gold-24k-item stays on top
if (!isExpanded) {
var ul = document.querySelector(".livegold_pricesBar ul");
var gold24kItem = document.querySelector(".gold-24k-item");
ul.removeChild(gold24kItem);
ul.insertBefore(gold24kItem, ul.firstChild);
}
// Rotate arrow on gold-24k-item
if (isExpanded) {
this.classList.remove("expanded");
} else {
this.classList.add("expanded");
}
// If expanded, add event listeners to hide items on any click
if (!isExpanded) {
items.forEach(function(item) {
if (!item.classList.contains("gold-24k-item")) {
item.addEventListener("click", function() {
items.forEach(function(i) {
if (!i.classList.contains("gold-24k-item")) {
i.classList.remove("show");
}
});
document
.querySelector(".gold-24k-item")
.classList.remove("expanded");
});
}
});
}
});
}
getConfig();
getPrices();
setInterval(getPrices, 45000);
setTimeout(setupEventListeners, 1000);
</script>