|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Receive 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">Receive 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="max-w-md mx-auto"> |
|
|
<div class="card-glass p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold">Select Asset to Receive</h2> |
|
|
<select class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm"> |
|
|
<option>ETH</option> |
|
|
<option>BTC</option> |
|
|
<option>USDC</option> |
|
|
<option>MATIC</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg mb-4 flex justify-center"> |
|
|
|
|
|
<div class="w-48 h-48 bg-gray-200"></div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<p class="text-sm text-gray-300 mb-4">Scan this QR code with a wallet app to send crypto</p> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-3 mb-4"> |
|
|
<p class="text-sm font-mono break-all">0x71C7656EC7ab88b098defB751B7401B5f6d8976F</p> |
|
|
</div> |
|
|
|
|
|
<button class="text-blue-400 text-sm flex items-center justify-center mx-auto mb-6"> |
|
|
<i data-feather="copy" class="mr-1"></i> Copy Address |
|
|
</button> |
|
|
|
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="text-blue-400 text-sm flex items-center"> |
|
|
<i data-feather="share-2" class="mr-1"></i> Share |
|
|
</button> |
|
|
<button class="text-blue-400 text-sm flex items-center"> |
|
|
<i data-feather="download" class="mr-1"></i> Save Image |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card-glass p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">How to Receive</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-600 rounded-full p-2 mr-3"> |
|
|
<i data-feather="copy" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Copy Address</h3> |
|
|
<p class="text-sm text-gray-400">Copy the wallet address above and paste it in your sending app</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-600 rounded-full p-2 mr-3"> |
|
|
<i data-feather="scan" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Scan QR Code</h3> |
|
|
<p class="text-sm text-gray-400">Let the sender scan your QR code with their wallet app</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-600 rounded-full p-2 mr-3"> |
|
|
<i data-feather="shield" class="w-4 h-4"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Double Check</h3> |
|
|
<p class="text-sm text-gray-400">Always verify the address before receiving funds</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
