index.html

<!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>