|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>T-Bank Mobile</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
|
|
::-webkit-scrollbar { |
|
width: 4px; |
|
} |
|
::-webkit-scrollbar-track { |
|
background: #f1f1f1; |
|
} |
|
::-webkit-scrollbar-thumb { |
|
background: #888; |
|
border-radius: 2px; |
|
} |
|
::-webkit-scrollbar-thumb:hover { |
|
background: #555; |
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
from { opacity: 0; transform: translateY(10px); } |
|
to { opacity: 1; transform: translateY(0); } |
|
} |
|
|
|
.animate-fade-in { |
|
animation: fadeIn 0.3s ease-out forwards; |
|
} |
|
|
|
|
|
.card-gradient { |
|
background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%); |
|
} |
|
|
|
|
|
.switch { |
|
position: relative; |
|
display: inline-block; |
|
width: 50px; |
|
height: 24px; |
|
} |
|
|
|
.switch input { |
|
opacity: 0; |
|
width: 0; |
|
height: 0; |
|
} |
|
|
|
.slider { |
|
position: absolute; |
|
cursor: pointer; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background-color: #ccc; |
|
transition: .4s; |
|
border-radius: 24px; |
|
} |
|
|
|
.slider:before { |
|
position: absolute; |
|
content: ""; |
|
height: 16px; |
|
width: 16px; |
|
left: 4px; |
|
bottom: 4px; |
|
background-color: white; |
|
transition: .4s; |
|
border-radius: 50%; |
|
} |
|
|
|
input:checked + .slider { |
|
background-color: #4f46e5; |
|
} |
|
|
|
input:checked + .slider:before { |
|
transform: translateX(26px); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-100 font-sans antialiased"> |
|
|
|
<div class="relative max-w-md mx-auto h-screen bg-white overflow-hidden shadow-lg flex flex-col"> |
|
|
|
<header class="bg-indigo-600 text-white p-4 flex justify-between items-center"> |
|
<div class="flex items-center space-x-2"> |
|
<div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center"> |
|
<span class="text-xs font-bold">TB</span> |
|
</div> |
|
<h1 class="font-bold text-lg">T-Bank</h1> |
|
</div> |
|
<div class="flex items-center space-x-4"> |
|
<button class="text-white"> |
|
<i class="fas fa-bell"></i> |
|
</button> |
|
<button class="text-white"> |
|
<i class="fas fa-qrcode"></i> |
|
</button> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="flex-1 overflow-y-auto pb-20"> |
|
|
|
<div class="card-gradient rounded-xl mx-4 mt-4 p-6 text-white shadow-lg animate-fade-in"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<p class="text-sm opacity-80">Total Balance</p> |
|
<h2 class="text-2xl font-bold mt-1">$12,456.78</h2> |
|
</div> |
|
<button class="bg-white bg-opacity-20 p-2 rounded-full"> |
|
<i class="fas fa-ellipsis-h"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="mt-6 flex justify-between items-center"> |
|
<div> |
|
<p class="text-xs opacity-80">Card Number</p> |
|
<p class="text-sm font-medium">•••• •••• •••• 4567</p> |
|
</div> |
|
<div class="w-10 h-6 bg-white bg-opacity-30 rounded flex items-center justify-center"> |
|
<span class="text-xs font-bold text-white">VISA</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mx-4 mt-6 grid grid-cols-4 gap-4 animate-fade-in" style="animation-delay: 0.1s"> |
|
<button class="flex flex-col items-center justify-center p-3 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition"> |
|
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-2"> |
|
<i class="fas fa-exchange-alt"></i> |
|
</div> |
|
<span class="text-xs font-medium">Transfer</span> |
|
</button> |
|
<button class="flex flex-col items-center justify-center p-3 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition"> |
|
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-2"> |
|
<i class="fas fa-money-bill-wave"></i> |
|
</div> |
|
<span class="text-xs font-medium">Pay</span> |
|
</button> |
|
<button class="flex flex-col items-center justify-center p-3 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition"> |
|
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-2"> |
|
<i class="fas fa-wallet"></i> |
|
</div> |
|
<span class="text-xs font-medium">Top Up</span> |
|
</button> |
|
<button class="flex flex-col items-center justify-center p-3 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition"> |
|
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-2"> |
|
<i class="fas fa-chart-line"></i> |
|
</div> |
|
<span class="text-xs font-medium">Invest</span> |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="mx-4 mt-8 animate-fade-in" style="animation-delay: 0.2s"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="font-bold text-gray-800">Recent Transactions</h3> |
|
<button class="text-indigo-600 text-sm font-medium">See All</button> |
|
</div> |
|
|
|
<div class="space-y-3"> |
|
|
|
<div class="bg-white p-3 rounded-xl flex items-center justify-between shadow-sm hover:shadow-md transition"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500"> |
|
<i class="fas fa-shopping-bag"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium">Amazon Purchase</p> |
|
<p class="text-xs text-gray-500">Today, 10:45 AM</p> |
|
</div> |
|
</div> |
|
<div class="text-right"> |
|
<p class="text-sm font-medium text-red-500">-$45.99</p> |
|
<p class="text-xs text-gray-500">Completed</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white p-3 rounded-xl flex items-center justify-between shadow-sm hover:shadow-md transition"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500"> |
|
<i class="fas fa-money-bill-wave"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium">Salary Deposit</p> |
|
<p class="text-xs text-gray-500">Yesterday, 9:00 AM</p> |
|
</div> |
|
</div> |
|
<div class="text-right"> |
|
<p class="text-sm font-medium text-green-500">+$3,250.00</p> |
|
<p class="text-xs text-gray-500">Completed</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white p-3 rounded-xl flex items-center justify-between shadow-sm hover:shadow-md transition"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500"> |
|
<i class="fas fa-coffee"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium">Starbucks</p> |
|
<p class="text-xs text-gray-500">Yesterday, 4:30 PM</p> |
|
</div> |
|
</div> |
|
<div class="text-right"> |
|
<p class="text-sm font-medium text-red-500">-$6.75</p> |
|
<p class="text-xs text-gray-500">Completed</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white p-3 rounded-xl flex items-center justify-between shadow-sm hover:shadow-md transition"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500"> |
|
<i class="fas fa-mobile-alt"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium">Phone Bill</p> |
|
<p class="text-xs text-gray-500">May 15, 8:00 AM</p> |
|
</div> |
|
</div> |
|
<div class="text-right"> |
|
<p class="text-sm font-medium text-red-500">-$89.99</p> |
|
<p class="text-xs text-gray-500">Completed</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mx-4 mt-8 animate-fade-in" style="animation-delay: 0.3s"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="font-bold text-gray-800">Savings Goals</h3> |
|
<button class="text-indigo-600 text-sm font-medium">Add Goal</button> |
|
</div> |
|
|
|
<div class="bg-white p-4 rounded-xl shadow-sm"> |
|
<div class="flex items-center justify-between mb-3"> |
|
<div> |
|
<p class="text-sm font-medium">Vacation Fund</p> |
|
<p class="text-xs text-gray-500">Target: $5,000</p> |
|
</div> |
|
<p class="text-sm font-medium text-indigo-600">$3,200</p> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 64%"></div> |
|
</div> |
|
<div class="flex justify-between mt-1"> |
|
<span class="text-xs text-gray-500">64% completed</span> |
|
<span class="text-xs text-gray-500">64 days left</span> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
|
|
|
|
<nav class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-3"> |
|
<button class="flex flex-col items-center text-indigo-600"> |
|
<i class="fas fa-home"></i> |
|
<span class="text-xs mt-1">Home</span> |
|
</button> |
|
<button class="flex flex-col items-center text-gray-500"> |
|
<i class="fas fa-credit-card"></i> |
|
<span class="text-xs mt-1">Cards</span> |
|
</button> |
|
<button class="flex flex-col items-center text-gray-500"> |
|
<i class="fas fa-chart-pie"></i> |
|
<span class="text-xs mt-1">Stats</span> |
|
</button> |
|
<button class="flex flex-col items-center text-gray-500"> |
|
<i class="fas fa-cog"></i> |
|
<span class="text-xs mt-1">Settings</span> |
|
</button> |
|
</nav> |
|
</div> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
document.querySelectorAll('button').forEach(button => { |
|
button.addEventListener('click', function(e) { |
|
|
|
if(this.classList.contains('flex-col') || this.classList.contains('bg-white')) { |
|
const rect = this.getBoundingClientRect(); |
|
const x = e.clientX - rect.left; |
|
const y = e.clientY - rect.top; |
|
|
|
const ripple = document.createElement('span'); |
|
ripple.className = 'ripple'; |
|
ripple.style.left = `${x}px`; |
|
ripple.style.top = `${y}px`; |
|
|
|
this.appendChild(ripple); |
|
|
|
setTimeout(() => { |
|
ripple.remove(); |
|
}, 600); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
setTimeout(() => { |
|
const transactions = document.querySelectorAll('.animate-fade-in'); |
|
transactions.forEach((el, index) => { |
|
el.style.opacity = 1; |
|
}); |
|
}, 100); |
|
|
|
|
|
const darkModeToggle = document.createElement('div'); |
|
darkModeToggle.className = 'fixed top-4 right-4 z-50'; |
|
darkModeToggle.innerHTML = ` |
|
<label class="switch"> |
|
<input type="checkbox" id="darkModeToggle"> |
|
<span class="slider"></span> |
|
</label> |
|
`; |
|
document.body.appendChild(darkModeToggle); |
|
|
|
document.getElementById('darkModeToggle').addEventListener('change', function() { |
|
document.body.classList.toggle('bg-gray-900'); |
|
document.querySelector('.max-w-md').classList.toggle('bg-gray-800'); |
|
document.querySelector('.max-w-md').classList.toggle('text-white'); |
|
|
|
|
|
document.querySelectorAll('.text-gray-800').forEach(el => { |
|
el.classList.toggle('text-gray-200'); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.bg-white').forEach(el => { |
|
el.classList.toggle('bg-gray-700'); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.bg-gray-100').forEach(el => { |
|
el.classList.toggle('bg-gray-900'); |
|
}); |
|
}); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=markburn/test2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
