| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Mobile App UI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <div class="max-w-md mx-auto h-screen flex flex-col relative overflow-hidden shadow-xl"> |
| |
| <div class="gradient-bg text-white p-6 flex justify-between items-center"> |
| <div> |
| <h1 class="text-2xl font-bold">Hello, User</h1> |
| <p class="text-gray-200">Welcome back</p> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i data-feather="bell"></i> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-y-auto p-6 space-y-6"> |
| |
| <div class="gradient-bg rounded-2xl p-6 text-white shadow-lg" data-aos="fade-up"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="font-medium">Your Balance</h2> |
| <i data-feather="more-horizontal"></i> |
| </div> |
| <h1 class="text-3xl font-bold mb-4">$12,345.67</h1> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i data-feather="arrow-down" class="text-green-300"></i> |
| </div> |
| <div> |
| <p class="text-xs text-gray-200">Income</p> |
| <p class="font-medium">$5,432</p> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i data-feather="arrow-up" class="text-red-300"></i> |
| </div> |
| <div> |
| <p class="text-xs text-gray-200">Expense</p> |
| <p class="font-medium">$1,234</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-4 gap-4" data-aos="fade-up" data-aos-delay="100"> |
| <div class="bg-white p-4 rounded-xl shadow flex flex-col items-center"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2"> |
| <i data-feather="send" class="text-blue-500"></i> |
| </div> |
| <span class="text-sm">Transfer</span> |
| </div> |
| <div class="bg-white p-4 rounded-xl shadow flex flex-col items-center"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-2"> |
| <i data-feather="dollar-sign" class="text-purple-500"></i> |
| </div> |
| <span class="text-sm">Pay</span> |
| </div> |
| <div class="bg-white p-4 rounded-xl shadow flex flex-col items-center"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2"> |
| <i data-feather="credit-card" class="text-green-500"></i> |
| </div> |
| <span class="text-sm">Card</span> |
| </div> |
| <div class="bg-white p-4 rounded-xl shadow flex flex-col items-center"> |
| <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-2"> |
| <i data-feather="more-horizontal" class="text-yellow-500"></i> |
| </div> |
| <span class="text-sm">More</span> |
| </div> |
| </div> |
|
|
| |
| <div class="space-y-4" data-aos="fade-up" data-aos-delay="200"> |
| <div class="flex justify-between items-center"> |
| <h2 class="font-bold text-lg">Recent Transactions</h2> |
| <span class="text-blue-500 text-sm">See all</span> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-4"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i data-feather="shopping-bag" class="text-blue-500"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="font-medium">Amazon Purchase</h3> |
| <p class="text-gray-500 text-sm">Today, 10:45 AM</p> |
| </div> |
| <div class="text-red-500 font-medium">-$45.99</div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-4"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> |
| <i data-feather="dollar-sign" class="text-green-500"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="font-medium">Salary Deposit</h3> |
| <p class="text-gray-500 text-sm">Yesterday, 9:30 AM</p> |
| </div> |
| <div class="text-green-500 font-medium">+$2,500.00</div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow p-4"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i data-feather="coffee" class="text-purple-500"></i> |
| </div> |
| <div class="flex-1"> |
| <h3 class="font-medium">Starbucks</h3> |
| <p class="text-gray-500 text-sm">Yesterday, 2:15 PM</p> |
| </div> |
| <div class="text-red-500 font-medium">-$4.75</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white border-t border-gray-200 flex justify-around items-center p-4"> |
| <div class="p-2 text-blue-500"> |
| <i data-feather="home"></i> |
| </div> |
| <div class="p-2 text-gray-500"> |
| <i data-feather="credit-card"></i> |
| </div> |
| <div class="p-2 text-gray-500"> |
| <i data-feather="pie-chart"></i> |
| </div> |
| <div class="p-2 text-gray-500"> |
| <i data-feather="user"></i> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| AOS.init(); |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
