Skip to content

Commit 3bc0bc2

Browse files
MalharBhatt-devMalharBhatt-dev
committed
enhance ui .
1 parent d1ef7fc commit 3bc0bc2

4 files changed

Lines changed: 27 additions & 19 deletions

File tree

‎app/static/assert/account_card_avatar_bg.png‎

133 KB
Loading

‎app/static/css/style.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* Custom Fintech Colors & Animations */
21
:root {
32
--primary: #0B1F3A;
43
--secondary: #1E3A8A;

‎app/static/js/script.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,16 @@ document.addEventListener('DOMContentLoaded', () => {
8383

8484
// Simulated dynamic data in mockup
8585
setTimeout(() => {
86+
const accountShimmers = document.querySelectorAll('.dynamic-account-stat')
87+
accountShimmers.forEach(acc => {
88+
acc.classList.remove('shimmer');
89+
acc.innerHTML = `<span class="text-sm font-bold text-gray-900 dark:text-white">•••• •••• 4562</span>`;
90+
})
91+
8692
const balanceShimmers = document.querySelectorAll('.dynamic-balance');
8793
balanceShimmers.forEach(el => {
8894
el.classList.remove('shimmer');
89-
el.innerHTML = '<span class="text-3xl font-bold text-gray-900 dark:text-white">$24,562.00</span>';
95+
el.innerHTML = '<span class="text-3xl font-bold text-gray-900 dark:text-white">₹24,562.00</span>';
9096
});
9197
}, 2000); // 2 second mock load
9298
});

‎app/templates/index.html‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Banking Core | Fintech SaaS</title>
8-
8+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
9+
<rect width='100' height='100' rx='20' fill='%230B1F3A'/>
10+
<text x='50%' y='60%' text-anchor='middle' font-size='50' fill='%2322D3EE' font-family='Arial' dy='.3em'>BC</text>
11+
</svg>">
12+
913
<!-- Fonts: Inter -->
1014
<link rel="preconnect" href="https://fonts.googleapis.com">
1115
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -20,16 +24,15 @@
2024
class="bg-gray-50 dark:bg-[#050a15] text-gray-900 dark:text-gray-100 antialiased selection:bg-cyan-500 selection:text-white transition-colors duration-500">
2125

2226
<!--========NavBar==========-->
23-
<nav
24-
class="fixed top-0 w-full z-40 transition-all duration-300 glass-nav border-b border-gray-200 dark:border-gray-800/50">
27+
<nav class="fixed top-0 w-full z-40 transition-all duration-300 glass-nav border-b border-gray-200 dark:border-gray-800/50">
2528
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
2629
<div class="flex items-center gap-3 cursor-pointer group">
27-
<div
28-
class="w-9 h-9 rounded-xl bg-gradient-to-tr from-primary to-accent flex items-center justify-center shadow-lg shadow-cyan-500/20 group-hover:rotate-12 transition-transform duration-300">
29-
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
30-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
31-
d="M9 8h6m-5 0a3 3 0 110 6H9l3 3m-3-6h6m6 1a9 9 0 11-18 0 9 9 0 0118 0z">
32-
</path>
30+
<div class="w-9 h-9 rounded-xl bg-cyan-500 dark:bg-blue-600 from-primary to-accent flex items-center justify-center shadow-lg shadow-cyan-500/20 group-hover:rotate-12 transition-transform duration-300">
31+
<svg xmlns='http://www.w3.org/2000/svg' class=" text-blue-600 dark:text-cyan-500 font-bold" viewBox="0 0 100 100" fill="none">
32+
<!-- Background -->
33+
<rect width="100" height="100" rx="20" fill="none"/>
34+
<!-- BC Text -->
35+
<text x="50%" y="60%" text-anchor="middle" font-size="50" fill="currentColor" font-family="Arial" dy=".3em">BC</text>
3336
</svg>
3437
</div>
3538
<h1 class="text-xl font-extrabold tracking-tight text-gray-900 dark:text-white">BankingCore</h1>
@@ -89,16 +92,16 @@ <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 max-w-4xl lea
8992
</div>
9093

9194
<!-- Right 3D Mockup -->
92-
<div class="hidden lg:block relative h-[600px] w-full mockup-container cursor-crosshair reveal" style="transition-delay: 200ms;">
95+
<div class="hidden lg:block relative h-[500px] w-full mockup-container cursor-crosshair reveal" style="transition-delay: 200ms;">
9396
<div class="mockup-3d absolute inset-0 w-full h-full flex items-center justify-center">
9497

9598
<!-- Main Dashboard Background Card -->
96-
<div class="absolute w-[500px] h-[380px] glass rounded-3xl border border-gray-200/50 dark:border-white/10 shadow-2xl bg-white/40 dark:bg-[#0B1F3A]/40 backdrop-blur-3xl overflow-hidden flex flex-col p-6 layer-1">
99+
<div class="absolute w-[500px] h-[515px] glass rounded-3xl border border-gray-200/50 dark:border-white/10 shadow-2xl bg-white/40 dark:bg-[#0B1F3A]/40 backdrop-blur-3xl overflow-hidden flex flex-col p-6 layer-1">
97100
<!-- Top Bar Mock -->
98101
<div class="flex justify-between items-center mb-6">
99-
<div class="w-32 h-6 bg-gray-200 dark:bg-gray-700/50 rounded-md shimmer"></div>
102+
<div class="dynamic-account-stat w-32 h-6 bg-gray-200 dark:bg-gray-700/50 rounded-md shimmer"></div>
100103
<div class="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700/50 border border-white/20">
101-
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="avatar" class="w-full h-full rounded-full">
104+
<img src="{{ url_for('static',filename='assert/account_card_avatar_bg.png') }}" alt="avatar" class="w-full h-full rounded-full">
102105
</div>
103106
</div>
104107

@@ -155,7 +158,7 @@ <h4 class="text-xs font-bold text-gray-800 dark:text-white">Recent Transactions<
155158
<p class="text-[10px] text-gray-500">Today, 9:24 AM</p>
156159
</div>
157160
</div>
158-
<span class="text-xs font-bold text-gray-900 dark:text-white">-$5.40</span>
161+
<span class="text-xs font-bold text-gray-900 dark:text-white">-₹5.40</span>
159162
</div>
160163
<div class="w-full bg-white dark:bg-gray-800/80 p-2.5 rounded-xl flex items-center justify-between shadow-sm border border-gray-100 dark:border-white/5 hover:-translate-y-0.5 transition-transform backdrop-blur-md">
161164
<div class="flex items-center gap-3">
@@ -165,7 +168,7 @@ <h4 class="text-xs font-bold text-gray-800 dark:text-white">Recent Transactions<
165168
<p class="text-[10px] text-gray-500">Yesterday</p>
166169
</div>
167170
</div>
168-
<span class="text-xs font-bold text-emerald-600 dark:text-emerald-400">+$4,250.00</span>
171+
<span class="text-xs font-bold text-emerald-600 dark:text-emerald-400">+₹4,250.00</span>
169172
</div>
170173
</div>
171174
</div>
@@ -178,8 +181,8 @@ <h4 class="text-xs font-bold text-gray-800 dark:text-white">Recent Transactions<
178181
</svg>
179182
</div>
180183
<div>
181-
<p class="text-xs font-bold text-gray-900 dark:text-white">Transfer Success</p>
182-
<p class="text-[10px] text-gray-500 dark:text-gray-400">Jane received $200.00</p>
184+
<p class="text-xs font-bold text-gray-900 dark:text-white-400 ">Transfer Success</p>
185+
<p class="text-[10px] text-gray-500 dark:text-white-400">Jane received ₹200.00</p>
183186
</div>
184187
</div>
185188
</div>

0 commit comments

Comments
 (0)