|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Profile - 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); |
|
|
} |
|
|
.avatar { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
</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">Profile</h1> |
|
|
</div> |
|
|
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="settings"></i> |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="card-glass p-6 mb-6"> |
|
|
<div class="flex flex-col items-center text-center mb-6"> |
|
|
<div class="avatar rounded-full bg-gray-700 mb-4" style="background-image: url('http://static.photos/people/200x200/42')"></div> |
|
|
<h2 class="text-xl font-bold">Crypto Enthusiast</h2> |
|
|
<p class="text-gray-400 text-sm">Member since 2022</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-around mb-6"> |
|
|
<div class="text-center"> |
|
|
<p class="text-2xl font-bold">12</p> |
|
|
<p class="text-gray-400 text-sm">Assets</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-2xl font-bold">86</p> |
|
|
<p class="text-gray-400 text-sm">Transactions</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-2xl font-bold">4.8</p> |
|
|
<p class="text-gray-400 text-sm">Rating</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full py-2 bg-blue-600 rounded-lg font-medium hover:bg-blue-700 transition-colors"> |
|
|
Edit Profile |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-glass p-6 mb-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Account Details</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Username</label> |
|
|
<div class="bg-gray-800 rounded-lg p-3"> |
|
|
<p>crypto_wizard</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Email</label> |
|
|
<div class="bg-gray-800 rounded-lg p-3"> |
|
|
<p>[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Wallet Address</label> |
|
|
<div class="bg-gray-800 rounded-lg p-3"> |
|
|
<p class="font-mono text-sm break-all">0x71C7656EC7ab88b098defB751B7401B5f6d8976F</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-glass p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Settings</h2> |
|
|
<div class="space-y-3"> |
|
|
<button class="w-full flex justify-between items-center p-3 hover:bg-gray-800 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="shield" class="mr-3 text-green-400"></i> |
|
|
<span>Security</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right"></i> |
|
|
</button> |
|
|
<button class="w-full flex justify-between items-center p-3 hover:bg-gray-800 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="bell" class="mr-3 text-purple-400"></i> |
|
|
<span>Notifications</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right"></i> |
|
|
</button> |
|
|
<button class="w-full flex justify-between items-center p-3 hover:bg-gray-800 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="moon" class="mr-3 text-blue-400"></i> |
|
|
<span>Dark Mode</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right"></i> |
|
|
</button> |
|
|
<button class="w-full flex justify-between items-center p-3 hover:bg-gray-800 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="help-circle" class="mr-3 text-yellow-400"></i> |
|
|
<span>Help Center</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right"></i> |
|
|
</button> |
|
|
<button class="w-full flex justify-between items-center p-3 text-red-400 hover:bg-gray-800 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="log-out" class="mr-3"></i> |
|
|
<span>Sign Out</span> |
|
|
</div> |
|
|
<i data-feather="chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm border-t border-gray-800"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex justify-around"> |
|
|
<a href="index.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="home"></i> |
|
|
<span class="text-xs mt-1">Home</span> |
|
|
</a> |
|
|
<a href="explore.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="compass"></i> |
|
|
<span class="text-xs mt-1">Explore</span> |
|
|
</a> |
|
|
<a href="portfolio.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="pie-chart"></i> |
|
|
<span class="text-xs mt-1">Portfolio</span> |
|
|
</a> |
|
|
<a href="profile.html" class="flex flex-col items-center text-blue-400"> |
|
|
<i data-feather="user"></i> |
|
|
<span class="text-xs mt-1">Profile</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
