Hugging Face's logo

Spaces:
markburn
/
test2
Running

App Files Community
test2 / index.html
markburn's picture
markburn
Add 2 files
eea1d49 verified
raw
history blame contribute delete
16.9 kB
<!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>
 /* Custom scrollbar */
 ::-webkit-scrollbar {
 width: 4px;
 }
 ::-webkit-scrollbar-track {
 background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 2px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background: #555;
 }
/* Custom animations */
 @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 */
 .card-gradient {
 background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
 }
/* Custom switch */
 .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">
 <!-- Mobile App Container -->
 <div class="relative max-w-md mx-auto h-screen bg-white overflow-hidden shadow-lg flex flex-col">
 <!-- Header -->
 <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 Content -->
 <main class="flex-1 overflow-y-auto pb-20">
 <!-- Balance Card -->
 <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>
<!-- Quick Actions -->
 <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>
<!-- Recent Transactions -->
 <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">
 <!-- Transaction 1 -->
 <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>
<!-- Transaction 2 -->
 <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>
<!-- Transaction 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-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>
<!-- Transaction 4 -->
 <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>
<!-- Savings Goals -->
 <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>
<!-- Bottom Navigation -->
 <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>
 // Simple animation on load
 document.addEventListener('DOMContentLoaded', function() {
 // Add ripple effect to buttons
 document.querySelectorAll('button').forEach(button => {
 button.addEventListener('click', function(e) {
 // Only add ripple to certain buttons
 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);
 }
 });
 });
// Simulate loading transactions
 setTimeout(() => {
 const transactions = document.querySelectorAll('.animate-fade-in');
 transactions.forEach((el, index) => {
 el.style.opacity = 1;
 });
 }, 100);
// Toggle dark mode (example functionality)
 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');
// Toggle all text colors
 document.querySelectorAll('.text-gray-800').forEach(el => {
 el.classList.toggle('text-gray-200');
 });
// Toggle card backgrounds
 document.querySelectorAll('.bg-white').forEach(el => {
 el.classList.toggle('bg-gray-700');
 });
// Toggle transaction backgrounds
 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>