ui: refactor live rates widget to use premium cards with SVG icons and updated typography
This commit is contained in:
Ümit Tunç
@@ -40,78 +40,95 @@
|
||||
{!! t('Gecikmesiz, anlık ve yüksek frekanslı tüm finansal piyasa verilerini tek bir JSON/RESTful API uç noktasından saniyeler içinde sistemlerinize entegre edin.') !!}
|
||||
</p>
|
||||
|
||||
<div class="w-full p-4 rounded-2xl bg-[rgba(255,255,255,0.03)] border border-[rgba(255,255,255,0.06)] !mb-7" style="backdrop-filter: blur(15px);">
|
||||
<div class="flex items-center gap-2 mb-3 px-1">
|
||||
{{-- Live Rates Widget (Dynamic Premium Cards matching the image design) --}}
|
||||
<div class="w-full !mb-7 pt-4">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="w-2 h-2 rounded-full bg-[#00e676] animate-pulse"></span>
|
||||
<span class="text-[#cacaca] text-[0.75rem] font-bold tracking-wider uppercase">{!! t('Canlı Piyasalar') !!}</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
{{-- USD Card --}}
|
||||
<div class="bg-white rounded-xl p-3 shadow-md flex flex-col justify-between" style="min-height: 105px;">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[0.65rem] font-bold text-gray-500 uppercase">USD</span>
|
||||
<span class="text-[0.65rem] font-bold text-[#009846] flex items-center gap-0.5" id="usd-change-container">
|
||||
<span id="usd-pct">+0.42%</span>
|
||||
<i class="uil uil-arrow-up-right font-bold text-[0.75rem]" id="usd-arrow">▲</i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[1.2rem] font-bold text-[#1e2229] font-mono leading-none my-2" id="usd-rate-container">
|
||||
<span id="usd-try">45.9000</span> <span class="text-[0.9rem] font-normal font-sans">₺</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||
<div class="bg-[#009846] h-1.5 rounded-full" style="width: 45%;" id="usd-bar"></div>
|
||||
<div class="w-full md:w-auto">
|
||||
<div class="bg-white rounded-xl p-4 shadow-md flex flex-col justify-between" style="min-height: 105px;">
|
||||
<div class="flex items-center justify-between !mb-2">
|
||||
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">USD</span>
|
||||
<div class="flex items-center gap-1" id="usd-change-container" style="color: #009846;">
|
||||
<span class="text-[0.75rem] font-bold" id="usd-pct">0.42%</span>
|
||||
<svg id="usd-arrow-svg" width="16" height="16" fill="#009846" style="position: relative; top: -1px; transform: rotate(180deg);" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[1.4rem] font-bold text-[#1e2229] font-mono leading-none my-1.5" id="usd-rate-container">
|
||||
<span id="usd-try">45.9</span> <span class="text-[1rem] font-normal font-sans">₺</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden mt-1">
|
||||
<div class="bg-[#009846] h-1.5 rounded-full" style="width: 45%;" id="usd-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- EUR Card --}}
|
||||
<div class="bg-white rounded-xl p-3 shadow-md flex flex-col justify-between" style="min-height: 105px;">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[0.65rem] font-bold text-gray-500 uppercase">EUR</span>
|
||||
<span class="text-[0.65rem] font-bold text-[#e2626b] flex items-center gap-0.5" id="eur-change-container">
|
||||
<span id="eur-pct">-0.15%</span>
|
||||
<i class="uil uil-arrow-down-right font-bold text-[0.75rem]" id="eur-arrow">▼</i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[1.2rem] font-bold text-[#1e2229] font-mono leading-none my-2" id="eur-rate-container">
|
||||
<span id="eur-try">53.4061</span> <span class="text-[0.9rem] font-normal font-sans">₺</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||
<div class="bg-[#e2626b] h-1.5 rounded-full" style="width: 35%;" id="eur-bar"></div>
|
||||
<div class="w-full md:w-auto">
|
||||
<div class="bg-white rounded-xl p-4 shadow-md flex flex-col justify-between" style="min-height: 105px;">
|
||||
<div class="flex items-center justify-between !mb-2">
|
||||
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">EUR</span>
|
||||
<div class="flex items-center gap-1" id="eur-change-container" style="color: #B9101E;">
|
||||
<span class="text-[0.75rem] font-bold" id="eur-pct">-0.15%</span>
|
||||
<svg id="eur-arrow-svg" width="16" height="16" fill="#B9101E" style="position: relative; top: -1px;" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[1.4rem] font-bold text-[#1e2229] font-mono leading-none my-1.5" id="eur-rate-container">
|
||||
<span id="eur-try">53.4061</span> <span class="text-[1rem] font-normal font-sans">₺</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden mt-1">
|
||||
<div class="bg-[#B9101E] h-1.5 rounded-full" style="width: 35%;" id="eur-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- GBP Card --}}
|
||||
<div class="bg-white rounded-xl p-3 shadow-md flex flex-col justify-between" style="min-height: 105px;">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[0.65rem] font-bold text-gray-500 uppercase">GBP</span>
|
||||
<span class="text-[0.65rem] font-bold text-[#e2626b] flex items-center gap-0.5" id="gbp-change-container">
|
||||
<span id="gbp-pct">-0.42%</span>
|
||||
<i class="uil uil-arrow-down-right font-bold text-[0.75rem]" id="gbp-arrow">▼</i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[1.2rem] font-bold text-[#1e2229] font-mono leading-none my-2" id="gbp-rate-container">
|
||||
<span id="gbp-try">61.7723</span> <span class="text-[0.9rem] font-normal font-sans">₺</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||
<div class="bg-[#e2626b] h-1.5 rounded-full" style="width: 40%;" id="gbp-bar"></div>
|
||||
<div class="w-full md:w-auto">
|
||||
<div class="bg-white rounded-xl p-4 shadow-md flex flex-col justify-between" style="min-height: 105px;">
|
||||
<div class="flex items-center justify-between !mb-2">
|
||||
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">GBP</span>
|
||||
<div class="flex items-center gap-1" id="gbp-change-container" style="color: #B9101E;">
|
||||
<span class="text-[0.75rem] font-bold" id="gbp-pct">-0.42%</span>
|
||||
<svg id="gbp-arrow-svg" width="16" height="16" fill="#B9101E" style="position: relative; top: -1px;" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[1.4rem] font-bold text-[#1e2229] font-mono leading-none my-1.5" id="gbp-rate-container">
|
||||
<span id="gbp-try">61.7723</span> <span class="text-[1rem] font-normal font-sans">₺</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden mt-1">
|
||||
<div class="bg-[#B9101E] h-1.5 rounded-full" style="width: 40%;" id="gbp-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- GRA Card --}}
|
||||
<div class="bg-white rounded-xl p-3 shadow-md flex flex-col justify-between" style="min-height: 105px;">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[0.65rem] font-bold text-gray-500 uppercase">GRA</span>
|
||||
<span class="text-[0.65rem] font-bold text-[#e2626b] flex items-center gap-0.5" id="gra-change-container">
|
||||
<span id="gra-pct">-1.00%</span>
|
||||
<i class="uil uil-arrow-down-right font-bold text-[0.75rem]" id="gra-arrow">▼</i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[1.2rem] font-bold text-[#1e2229] font-mono leading-none my-2" id="gra-rate-container">
|
||||
<span id="gold-try">6650.24</span> <span class="text-[0.9rem] font-normal font-sans">₺</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||
<div class="bg-[#e2626b] h-1.5 rounded-full" style="width: 30%;" id="gra-bar"></div>
|
||||
<div class="w-full md:w-auto">
|
||||
<div class="bg-white rounded-xl p-4 shadow-md flex flex-col justify-between" style="min-height: 105px;">
|
||||
<div class="flex items-center justify-between !mb-2">
|
||||
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">GRA</span>
|
||||
<div class="flex items-center gap-1" id="gra-change-container" style="color: #B9101E;">
|
||||
<span class="text-[0.75rem] font-bold" id="gra-pct">-1%</span>
|
||||
<svg id="gra-arrow-svg" width="16" height="16" fill="#B9101E" style="position: relative; top: -1px;" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M384 576q0-26 19-45t45-19h896q26 0 45 19t19 45-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[1.4rem] font-bold text-[#1e2229] font-mono leading-none my-1.5" id="gra-rate-container">
|
||||
<span id="gold-try">6650.24</span> <span class="text-[1rem] font-normal font-sans">₺</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden mt-1">
|
||||
<div class="bg-[#B9101E] h-1.5 rounded-full" style="width: 30%;" id="gra-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -625,7 +642,7 @@
|
||||
const gbpTryEl = document.getElementById('gbp-try');
|
||||
const goldTryEl = document.getElementById('gold-try');
|
||||
|
||||
function updateCard(id, currentVal, oscRange, precision, barId, pctId, arrowId, containerId) {
|
||||
function updateCard(id, currentVal, oscRange, precision, barId, pctId, svgId, containerId) {
|
||||
const osc = (Math.random() - 0.5) * oscRange;
|
||||
const nextVal = Math.max(0.1, currentVal + osc);
|
||||
|
||||
@@ -638,24 +655,33 @@
|
||||
}
|
||||
|
||||
const pctEl = document.getElementById(pctId);
|
||||
const arrowEl = document.getElementById(arrowId);
|
||||
const svgEl = document.getElementById(svgId);
|
||||
const containerEl = document.getElementById(containerId);
|
||||
const barEl = document.getElementById(barId);
|
||||
|
||||
if (pctEl && arrowEl && containerEl) {
|
||||
if (pctEl && containerEl) {
|
||||
pctEl.innerText = sign + pctChange.toFixed(2) + '%';
|
||||
const greenColor = '#009846';
|
||||
const redColor = '#B9101E';
|
||||
|
||||
if (pctChange >= 0) {
|
||||
arrowEl.innerText = '▲';
|
||||
containerEl.style.color = '#009846';
|
||||
containerEl.style.color = greenColor;
|
||||
if (svgEl) {
|
||||
svgEl.setAttribute('fill', greenColor);
|
||||
svgEl.style.transform = 'rotate(180deg)';
|
||||
}
|
||||
if (barEl) {
|
||||
barEl.style.backgroundColor = '#009846';
|
||||
barEl.style.backgroundColor = greenColor;
|
||||
barEl.style.width = Math.min(100, Math.max(10, (barEl.style.width ? parseFloat(barEl.style.width) : 50) + 2)) + '%';
|
||||
}
|
||||
} else {
|
||||
arrowEl.innerText = '▼';
|
||||
containerEl.style.color = '#e2626b';
|
||||
containerEl.style.color = redColor;
|
||||
if (svgEl) {
|
||||
svgEl.setAttribute('fill', redColor);
|
||||
svgEl.style.transform = 'rotate(0deg)';
|
||||
}
|
||||
if (barEl) {
|
||||
barEl.style.backgroundColor = '#e2626b';
|
||||
barEl.style.backgroundColor = redColor;
|
||||
barEl.style.width = Math.min(100, Math.max(10, (barEl.style.width ? parseFloat(barEl.style.width) : 50) - 2)) + '%';
|
||||
}
|
||||
}
|
||||
@@ -663,16 +689,16 @@
|
||||
return nextVal;
|
||||
}
|
||||
|
||||
let usdVal = parseFloat(usdTryEl?.innerText || '45.9000');
|
||||
let usdVal = parseFloat(usdTryEl?.innerText || '45.9');
|
||||
let eurVal = parseFloat(eurTryEl?.innerText || '53.4061');
|
||||
let gbpVal = parseFloat(gbpTryEl?.innerText || '61.7723');
|
||||
let goldVal = parseFloat(goldTryEl?.innerText || '6650.24');
|
||||
|
||||
setInterval(() => {
|
||||
if (usdTryEl) usdVal = updateCard('usd-try', usdVal, 0.05, 4, 'usd-bar', 'usd-pct', 'usd-arrow', 'usd-change-container');
|
||||
if (eurTryEl) eurVal = updateCard('eur-try', eurVal, 0.06, 4, 'eur-bar', 'eur-pct', 'eur-arrow', 'eur-change-container');
|
||||
if (gbpTryEl) gbpVal = updateCard('gbp-try', gbpVal, 0.07, 4, 'gbp-bar', 'gbp-pct', 'gbp-arrow', 'gbp-change-container');
|
||||
if (goldTryEl) goldVal = updateCard('gold-try', goldVal, 5.0, 2, 'gra-bar', 'gra-pct', 'gra-arrow', 'gra-change-container');
|
||||
if (usdTryEl) usdVal = updateCard('usd-try', usdVal, 0.05, 1, 'usd-bar', 'usd-pct', 'usd-arrow-svg', 'usd-change-container');
|
||||
if (eurTryEl) eurVal = updateCard('eur-try', eurVal, 0.06, 4, 'eur-bar', 'eur-pct', 'eur-arrow-svg', 'eur-change-container');
|
||||
if (gbpTryEl) gbpVal = updateCard('gbp-try', gbpVal, 0.07, 4, 'gbp-bar', 'gbp-pct', 'gbp-arrow-svg', 'gbp-change-container');
|
||||
if (goldTryEl) goldVal = updateCard('gold-try', goldVal, 5.0, 2, 'gra-bar', 'gra-pct', 'gra-arrow-svg', 'gra-change-container');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user