From e054b04b063c2df61a2ea16697b8a2afd4d4a19e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= Date: Tue, 26 May 2026 23:29:27 +0300 Subject: [PATCH] ui: refactor live rates widget to use premium cards with SVG icons and updated typography --- .../views/front/products/finance.blade.php | 164 ++++++++++-------- 1 file changed, 95 insertions(+), 69 deletions(-) diff --git a/resources/views/front/products/finance.blade.php b/resources/views/front/products/finance.blade.php index 0474047..add10e0 100644 --- a/resources/views/front/products/finance.blade.php +++ b/resources/views/front/products/finance.blade.php @@ -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.') !!}

-
-
+ {{-- Live Rates Widget (Dynamic Premium Cards matching the image design) --}} +
+
{!! t('Canlı Piyasalar') !!}
-
+
{{-- USD Card --}} -
-
- USD - - +0.42% - ▲ - -
-
- 45.9000 ₺ -
-
-
+
+
+
+ USD +
+ 0.42% + + + +
+
+
+ 45.9 ₺ +
+
+
+
{{-- EUR Card --}} -
-
- EUR - - -0.15% - ▼ - -
-
- 53.4061 ₺ -
-
-
+
+
+
+ EUR +
+ -0.15% + + + +
+
+
+ 53.4061 ₺ +
+
+
+
{{-- GBP Card --}} -
-
- GBP - - -0.42% - ▼ - -
-
- 61.7723 ₺ -
-
-
+
+
+
+ GBP +
+ -0.42% + + + +
+
+
+ 61.7723 ₺ +
+
+
+
{{-- GRA Card --}} -
-
- GRA - - -1.00% - ▼ - -
-
- 6650.24 ₺ -
-
-
+
+
+
+ GRA +
+ -1% + + + +
+
+
+ 6650.24 ₺ +
+
+
+
@@ -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); }