|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Portfolio - 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); |
|
|
} |
|
|
.chart-container { |
|
|
height: 250px; |
|
|
} |
|
|
</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">Your Portfolio</h1> |
|
|
</div> |
|
|
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="filter"></i> |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="card-glass p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Total Balance</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors"> |
|
|
<i data-feather="eye"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors"> |
|
|
<i data-feather="refresh-cw"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-end space-x-2 mb-6"> |
|
|
<p class="text-4xl font-bold">$4,256.42</p> |
|
|
<p class="text-green-400 text-sm mb-2 flex items-center"> |
|
|
<i data-feather="trending-up" class="mr-1"></i> +5.4% (24h) |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="chart-container bg-gray-800 rounded-lg"> |
|
|
<div class="w-full h-full flex items-center justify-center text-gray-400"> |
|
|
<div class="text-center"> |
|
|
<i data-feather="bar-chart-2" width="48" height="48"></i> |
|
|
<p>Portfolio Chart</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-glass p-6 mb-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Asset Distribution</h2> |
|
|
<div class="flex flex-wrap -mx-2"> |
|
|
<div class="w-1/2 px-2 mb-4"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<p class="font-medium">Ethereum</p> |
|
|
<p class="text-blue-400">42%</p> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 42%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-1/2 px-2 mb-4"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<p class="font-medium">Bitcoin</p> |
|
|
<p class="text-yellow-400">35%</p> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 35%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-1/2 px-2"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<p class="font-medium">Stablecoins</p> |
|
|
<p class="text-green-400">18%</p> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 18%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-1/2 px-2"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<p class="font-medium">Altcoins</p> |
|
|
<p class="text-purple-400">5%</p> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-purple-500 h-2 rounded-full" style="width: 5%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-glass p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Performance</h2> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<p class="text-gray-400 text-sm mb-1">24h Change</p> |
|
|
<p class="text-green-400 text-xl font-medium">+$217.42</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<p class="text-gray-400 text-sm mb-1">7d Change</p> |
|
|
<p class="text-green-400 text-xl font-medium">+$842.15</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<p class="text-gray-400 text-sm mb-1">30d Change</p> |
|
|
<p class="text-red-400 text-xl font-medium">-$1,207.83</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<p class="text-gray-400 text-sm mb-1">All Time</p> |
|
|
<p class="text-green-400 text-xl font-medium">+$3,156.42</p> |
|
|
</div> |
|
|
</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-blue-400"> |
|
|
<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-gray-400 hover:text-white transition-colors"> |
|
|
<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> |
