|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Send Crypto - CryptoPouch</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> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
|
|
} |
|
|
.card-glass { |
|
|
backdrop-filter: blur(16px) saturate(180%); |
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%); |
|
|
background-color: rgba(17, 25, 40, 0.75); |
|
|
border-radius: 12px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.125); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen text-white font-sans"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<header class="mb-8 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<a href="index.html" class="p-2 rounded-full hover:bg-gray-800 transition-colors"> |
|
|
<i data-feather="arrow-left"></i> |
|
|
</a> |
|
|
<h1 class="text-2xl font-bold">Send Crypto</h1> |
|
|
</div> |
|
|
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="user"></i> |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="card-glass p-6 max-w-md mx-auto"> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Select Asset</label> |
|
|
<select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3"> |
|
|
<option>Ethereum (ETH)</option> |
|
|
<option>Bitcoin (BTC)</option> |
|
|
<option>USD Coin (USDC)</option> |
|
|
<option>Polygon (MATIC)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Recipient Address</label> |
|
|
<input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3" placeholder="0x..."> |
|
|
<div class="flex justify-between mt-2"> |
|
|
<button class="text-blue-400 text-sm flex items-center"> |
|
|
<i data-feather="user" class="mr-1 w-4 h-4"></i> Contacts |
|
|
</button> |
|
|
<button class="text-blue-400 text-sm flex items-center"> |
|
|
<i data-feather="scan" class="mr-1 w-4 h-4"></i> Scan QR |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Amount</label> |
|
|
<div class="flex items-center"> |
|
|
<input type="number" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-4 py-3" placeholder="0.0"> |
|
|
<button class="bg-gray-700 px-4 py-3 rounded-r-lg">MAX</button> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2 text-sm text-gray-400"> |
|
|
<span>Balance: 1.42 ETH</span> |
|
|
<span>≈ $2,628.45</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<button class="w-full bg-blue-600 py-4 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center"> |
|
|
<i data-feather="arrow-up-right" class="mr-2"></i> Send Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 max-w-md mx-auto"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="users" class="mr-2"></i> Recent Contacts |
|
|
</h2> |
|
|
<div class="card-glass p-4"> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3"> |
|
|
<i data-feather="user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Alice</p> |
|
|
<p class="text-xs text-gray-400 truncate">0x1a2...b3c4</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3"> |
|
|
<i data-feather="user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Bob</p> |
|
|
<p class="text-xs text-gray-400 truncate">0x4d5...e6f7</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mr-3"> |
|
|
<i data-feather="user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Charlie</p> |
|
|
<p class="text-xs text-gray-400 truncate">0x7g8...h9i0</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-800 transition-colors cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center mr-3"> |
|
|
<i data-feather="user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Dave</p> |
|
|
<p class="text-xs text-gray-400 truncate">0x0j1...k2l3</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
