File size: 7,963 Bytes
1e03517 472bc35 1e03517 472bc35 1e03517 472bc35 2bc9ce9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 | <!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">
<!-- Mobile App Container -->
<div class="max-w-md mx-auto h-screen flex flex-col relative overflow-hidden shadow-xl">
<!-- App Header -->
<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>
<!-- Main Content -->
<div class="flex-1 overflow-y-auto p-6 space-y-6">
<!-- Balance Card -->
<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>
<!-- Quick Actions -->
<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>
<!-- Recent Transactions -->
<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>
<!-- Bottom Navigation -->
<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>
|