Загрузка...
UI-компонент: карточка дашборда мобильного банкинга с аналитикой. Отображает баланс, мини-виджеты аналитики. Идеально для финтех-приложений.
<div class="relative ring-1 ring-white/10 transition-all duration-500 hover:shadow-3xl hover:ring-white/20 bg-gradient-to-b from-zinc-900/80 to-black/90 rounded-[32px] pt-6 pr-6 pb-6 pl-6 shadow-2xl backdrop-blur-xl">
<!-- Status bar -->
<div class="flex items-center justify-between px-2 mb-6">
<p class="text-sm font-semibold text-white">9:41</p>
<div class="flex items-center gap-1.5 text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal h-4 w-4"><path d="M2 20h.01"></path><path d="M7 20v-4"></path><path d="M12 20v-8"></path><path d="M17 20V8"></path><path d="M22 4v16"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi h-4 w-4"><path d="M12 20h.01"></path><path d="M2 8.82a15 15 0 0 1 20 0"></path><path d="M5 12.859a10 10 0 0 1 14 0"></path><path d="M8.5 16.429a5 5 0 0 1 7 0"></path></svg>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="battery" class="lucide lucide-battery h-4 w-4"><path d="M 22 14 L 22 10"></path><rect x="2" y="6" width="16" height="12" rx="2"></rect></svg>
<div class="absolute inset-0.5 w-1/2 bg-green-400 rounded-sm"></div>
</div>
</div>
</div>
<!-- Balance section -->
<div class="mb-8">
<p class="text-white/70 text-sm font-medium mb-2">Total Balance</p>
<h2 class="text-4xl tracking-tight font-bold bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent mb-1">$127,439.82</h2>
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1 bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded-full text-xs font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3 w-3"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
+$3,247.83
</span>
<span class="text-white/50 text-sm">vs last month</span>
</div>
</div>
<!-- Card carousel -->
<div class="mb-8">
<div class="flex gap-4 overflow-x-auto pb-2" style="scrollbar-width: none; -ms-overflow-style: none;">
<!-- Card 1 -->
<div class="min-w-[300px] rounded-3xl p-6 bg-gradient-to-br from-blue-500/90 via-blue-600/80 to-purple-600/90 backdrop-blur ring-1 ring-white/20 shadow-xl relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-8">
<div class="h-10 w-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap h-5 w-5 text-white"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
</div>
<div class="text-right">
<p class="text-white/80 text-xs font-medium">ULTRA</p>
<i data-lucide="contactless" class="h-6 w-6 text-white mt-1"></i>
</div>
</div>
<p class="text-white font-mono text-xl tracking-wider mb-6">4532 1234 5678 9012</p>
<div class="flex items-center justify-between">
<div>
<p class="text-white/70 text-xs mb-1">EXPIRES</p>
<p class="text-white font-semibold">12/28</p>
</div>
<div>
<p class="text-white/70 text-xs mb-1">CVV</p>
<p class="text-white font-semibold">847</p>
</div>
<div class="text-right">
<p class="text-white/70 text-xs mb-1">BALANCE</p>
<p class="text-white font-bold">$87,430</p>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="min-w-[300px] rounded-3xl p-6 bg-gradient-to-br from-emerald-500/90 via-teal-600/80 to-cyan-600/90 backdrop-blur ring-1 ring-white/20 shadow-xl relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-8">
<div class="h-10 w-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="leaf" class="lucide lucide-leaf h-5 w-5 text-white"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path></svg>
</div>
<div class="text-right">
<p class="text-white/80 text-xs font-medium">ECO</p>
<i data-lucide="contactless" class="h-6 w-6 text-white mt-1"></i>
</div>
</div>
<p class="text-white font-mono text-xl tracking-wider mb-6">5678 9012 3456 7890</p>
<div class="flex items-center justify-between">
<div>
<p class="text-white/70 text-xs mb-1">EXPIRES</p>
<p class="text-white font-semibold">09/27</p>
</div>
<div>
<p class="text-white/70 text-xs mb-1">CVV</p>
<p class="text-white font-semibold">234</p>
</div>
<div class="text-right">
<p class="text-white/70 text-xs mb-1">BALANCE</p>
<p class="text-white font-bold">$40,009</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-center gap-2 mt-4">
<span class="h-2 w-8 rounded-full bg-white/80"></span>
<span class="h-2 w-2 rounded-full bg-white/40"></span>
<span class="h-2 w-2 rounded-full bg-white/40"></span>
</div>
</div>
<!-- Analytics section -->
<div class="mb-8">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl tracking-tight font-semibold">Analytics</h3>
<button class="text-blue-400 text-sm font-medium">View All</button>
</div>
<div class="grid grid-cols-2 gap-4">
<!-- Spending chart -->
<div class="rounded-2xl bg-white/[0.05] backdrop-blur ring-1 ring-white/10 p-4">
<div class="flex items-start justify-between mb-3">
<div>
<p class="text-white/60 text-xs font-medium">Monthly Spend</p>
<p class="text-lg font-bold">$12,847</p>
<p class="text-emerald-400 text-xs">-23% from last month</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-down" class="lucide lucide-trending-down h-4 w-4 text-emerald-400"><path d="M16 17h6v-6"></path><path d="m22 17-8.5-8.5-5 5L2 7"></path></svg>
</div>
<div class="relative h-16">
<div class="absolute bottom-0 left-0 right-0">
<div class="flex items-end justify-between gap-1 h-12">
<div class="w-3 bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm h-6"></div>
<div class="w-3 bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm h-9"></div>
<div class="w-3 bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm h-4"></div>
<div class="w-3 bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm h-12"></div>
<div class="w-3 bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm h-7"></div>
<div class="w-3 bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm h-10"></div>
<div class="w-3 bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm h-8"></div>
</div>
</div>
</div>
</div>
<!-- Goals -->
<div class="rounded-2xl bg-white/[0.05] backdrop-blur ring-1 ring-white/10 p-4">
<div class="flex items-start justify-between mb-3">
<div>
<p class="text-white/60 text-xs font-medium">Savings Goal</p>
<p class="text-lg font-bold">$8,430</p>
<p class="text-blue-400 text-xs">68% completed</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="target" class="lucide lucide-target h-4 w-4 text-blue-400"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
</div>
<div class="relative h-16 flex items-center justify-center">
<svg class="h-14 w-14 -rotate-90" viewBox="0 0 36 36">
<path d="M18 2 a 16 16 0 1 1 0 32 a 16 16 0 1 1 0 -32" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="3"></path>
<path d="M18 2 a 16 16 0 0 1 15.4 11.8" fill="none" stroke="url(#gradient)" stroke-width="3" stroke-linecap="round"></path>
</svg>
<div class="absolute text-center">
<span class="text-xs font-bold text-blue-400">68%</span>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom navigation -->
<nav class="rounded-2xl bg-white/[0.05] backdrop-blur ring-1 ring-white/10 p-2">
<div class="flex items-center justify-around">
<button class="flex flex-col items-center gap-1 text-blue-400 bg-blue-500/20 rounded-xl px-4 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="home" class="lucide lucide-home h-5 w-5"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
<span class="text-xs font-medium">Home</span>
</button>
<button class="flex flex-col items-center gap-1 text-white/60 hover:text-white px-4 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="credit-card" class="lucide lucide-credit-card h-5 w-5"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line></svg>
<span class="text-xs font-medium">Cards</span>
</button>
<button class="flex flex-col items-center gap-1 text-white/60 hover:text-white px-4 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-5 w-5"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>
<span class="text-xs font-medium">Stats</span>
</button>
<button class="flex flex-col items-center gap-1 text-white/60 hover:text-white px-4 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user h-5 w-5"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<span class="text-xs font-medium">Profile</span>
</button>
</div>
</nav>
</div>