nngo/Personal-Finance-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

06/04 Improve Dashboard exchange rate card UI/UX

Browse Source
This commit is contained in:
nngo
2026-06-04 12:16:51 -04:00
parent 48322b609f
commit daba148562
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/dashboard/index.html
+13 -13
View File
@@ -3,7 +3,7 @@
{% block page_title %}Dashboard{% endblock %} {% block page_title %}Dashboard{% endblock %}
{% block extra_css %} {% block extra_css %}
.fx-card { background: #0f172a; border-color: #1e293b; color: #f1f5f9; cursor: pointer; transition: all .2s; } .fx-card { background: #eff6ff; border-color: #bfdbfe; color: #0f172a; cursor: pointer; transition: all .2s; }
.fx-card:hover { border-color: #3b82f6 !important; } .fx-card:hover { border-color: #3b82f6 !important; }
.period-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; } .period-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
@@ -122,16 +122,16 @@
<div class="pcard fx-card" id="fxWidget"> <div class="pcard fx-card" id="fxWidget">
<div class="d-flex justify-content-between align-items-start"> <div class="d-flex justify-content-between align-items-start">
<div onclick="toggleFxChart()" style="cursor:pointer;flex:1;"> <div onclick="toggleFxChart()" style="cursor:pointer;flex:1;">
<div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#475569;">USD → VND</div> <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#1d4ed8;">USD → VND</div>
<div class="mono" id="fxRate" style="font-size:24px;font-weight:600;margin-top:4px;">₫{{ "{:,.0f}".format(fx.rate) }}</div> <div class="mono" id="fxRate" style="font-size:24px;font-weight:700;margin-top:4px;color:#0f172a;">₫{{ "{:,.0f}".format(fx.rate) }}</div>
<div style="font-size:11px;color:#64748b;margin-top:2px;" id="fxMeta"> <div style="font-size:11px;color:#475569;margin-top:2px;" id="fxMeta">
1 USD · <span id="fxDate">{{ fx.date.strftime('%b %d, %Y') }}</span> 1 USD · <span id="fxDate">{{ fx.date.strftime('%b %d, %Y') }}</span>
· <span id="fxSource" style="opacity:.6;">{{ fx.source }}</span> · <span id="fxSource" style="opacity:.7;">{{ fx.source }}</span>
{% if fx.is_stale %}<span id="fxStale" title="Rate may be outdated" style="color:#f59e0b;"> ⚠ stale</span>{% endif %} {% if fx.is_stale %}<span id="fxStale" title="Rate may be outdated" style="color:#d97706;"> ⚠ stale</span>{% endif %}
</div> </div>
</div> </div>
<button id="fxRefreshBtn" onclick="refreshFxRate()" title="Refresh rate" <button id="fxRefreshBtn" onclick="refreshFxRate()" title="Refresh rate"
style="background:none;border:none;color:#475569;cursor:pointer;font-size:14px;padding:2px 4px;line-height:1;margin-top:2px;"> style="background:none;border:none;color:#3b82f6;cursor:pointer;font-size:15px;padding:2px 4px;line-height:1;margin-top:2px;">
<i class="bi bi-arrow-clockwise"></i> <i class="bi bi-arrow-clockwise"></i>
</button> </button>
</div> </div>
@@ -140,13 +140,13 @@
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="pcard" style="background:#1e293b;border-color:#334155;"> <div class="pcard" style="background:#eff6ff;border-color:#bfdbfe;">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div> <div>
<div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#475569;">USD → VND</div> <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#1d4ed8;">USD → VND</div>
<div style="font-size:13px;color:#94a3b8;margin-top:6px;">Rate unavailable</div> <div style="font-size:13px;color:#64748b;margin-top:6px;">Rate unavailable</div>
</div> </div>
<button onclick="refreshFxRate()" style="background:none;border:none;color:#475569;cursor:pointer;font-size:14px;"> <button onclick="refreshFxRate()" style="background:none;border:none;color:#3b82f6;cursor:pointer;font-size:15px;">
<i class="bi bi-arrow-clockwise"></i> <i class="bi bi-arrow-clockwise"></i>
</button> </button>
</div> </div>
@@ -361,9 +361,9 @@ function toggleFxChart(){
const h = {{ fx_history_data | tojson }}; const h = {{ fx_history_data | tojson }};
fxChart = new Chart(document.getElementById('fxChart').getContext('2d'), { fxChart = new Chart(document.getElementById('fxChart').getContext('2d'), {
type:'line', type:'line',
data:{ labels:h.dates, datasets:[{ data:h.rates, borderColor:'#3b82f6', borderWidth:1.5, pointRadius:0, tension:.3, fill:false }] }, data:{ labels:h.dates, datasets:[{ data:h.rates, borderColor:'#3b82f6', backgroundColor:'#dbeafe55', borderWidth:1.5, pointRadius:0, tension:.3, fill:true }] },
options:{ responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } }, options:{ responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } },
scales:{ x:{ display:false }, y:{ grid:{ color:'#1e293b' }, ticks:{ color:'#64748b', font:{ size:9 }, callback: v=>'₫'+(v/1000).toFixed(0)+'K' } } } } scales:{ x:{ display:false }, y:{ grid:{ color:'#dbeafe' }, ticks:{ color:'#64748b', font:{ size:9 }, callback: v=>'₫'+(v/1000).toFixed(0)+'K' } } } }
}); });
} }
} }