Spaces:
Running
Running
File size: 6,278 Bytes
21bbb01 1fa55c8 21bbb01 1fa55c8 21bbb01 1fa55c8 21bbb01 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Send Money - PeerPay</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
accent: '#ec4899',
dark: '#1e293b',
light: '#f8fafc'
}
}
}
}
</script>
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
.card-shadow {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.contact-item {
transition: all 0.3s ease;
}
.contact-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="min-h-screen pb-24">
<!-- Header -->
<header class="bg-white shadow-sm py-4 px-6 flex items-center">
<a href="index.html" class="mr-4">
<i data-feather="arrow-left" class="text-dark"></i>
</a>
<h1 class="text-xl font-bold text-dark">Send Money</h1>
</header>
<!-- Main Content -->
<main class="max-w-6xl mx-auto px-4 py-6">
<!-- Search Bar -->
<div class="relative mb-6">
<input type="text" placeholder="Search contacts..." class="w-full py-3 pl-10 pr-4 bg-white rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary">
<i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
</div>
<!-- Amount Input -->
<div class="bg-white rounded-2xl p-6 card-shadow mb-6">
<p class="text-gray-500 mb-2">Amount</p>
<div class="flex items-center">
<span class="text-2xl font-bold mr-2">$</span>
<input type="number" placeholder="0.00" class="text-3xl font-bold w-full focus:outline-none">
</div>
<div class="flex justify-between mt-4 pt-4 border-t border-gray-100">
<button class="px-4 py-2 bg-gray-100 rounded-lg text-sm font-medium">10</button>
<button class="px-4 py-2 bg-gray-100 rounded-lg text-sm font-medium">25</button>
<button class="px-4 py-2 bg-gray-100 rounded-lg text-sm font-medium">50</button>
<button class="px-4 py-2 bg-gray-100 rounded-lg text-sm font-medium">100</button>
<button class="px-4 py-2 bg-gray-100 rounded-lg text-sm font-medium">Other</button>
</div>
</div>
<!-- Recipient Selection -->
<div class="mb-6">
<h2 class="text-lg font-bold text-dark mb-4">Select Recipient</h2>
<div id="contact-grid" class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Contacts will be populated by TypeScript -->
</div>
</div>
<!-- Recent Contacts -->
<div class="bg-white rounded-2xl p-6 card-shadow">
<h2 class="text-lg font-bold text-dark mb-4">Recent Contacts</h2>
<div class="space-y-3">
<!-- Recent Contact 1 -->
<div class="flex items-center p-3 rounded-lg hover:bg-gray-50 cursor-pointer">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/2" alt="Contact" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h3 class="font-semibold">Alex Johnson</h3>
<p class="text-gray-500 text-sm">@alexj</p>
</div>
<i data-feather="chevron-right" class="text-gray-400"></i>
</div>
<!-- Recent Contact 2 -->
<div class="flex items-center p-3 rounded-lg hover:bg-gray-50 cursor-pointer">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/3" alt="Contact" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h3 class="font-semibold">Sarah Miller</h3>
<p class="text-gray-500 text-sm">@sarahm</p>
</div>
<i data-feather="chevron-right" class="text-gray-400"></i>
</div>
<!-- Recent Contact 3 -->
<div class="flex items-center p-3 rounded-lg hover:bg-gray-50 cursor-pointer">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/4" alt="Contact" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h3 class="font-semibold">Mike Thompson</h3>
<p class="text-gray-500 text-sm">@miket</p>
</div>
<i data-feather="chevron-right" class="text-gray-400"></i>
</div>
</div>
</div>
</main>
<!-- Fixed Action Button -->
<div class="fixed bottom-24 left-0 right-0 px-6">
<button class="w-full bg-gradient-to-r from-primary to-secondary text-white py-4 rounded-xl font-bold text-lg shadow-lg hover:opacity-90 transition">
Continue
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace();
</script>
<script src="send.js"></script>
</body>
</html>
|