Hugging Face's logo

Spaces:
shettyvignesh91
/
cryptopouch-the-digital-treasure-bag
Running

App Files Community
shettyvignesh91 commited on
Commit
2170e67
·
verified ·
1 Parent(s): 9949ed7

it doesn't work

Browse files
Files changed (4) hide show
  1. explore.html +228 -0
  2. index.html +7 -7
  3. portfolio.html +177 -0
  4. profile.html +170 -0
explore.html ADDED
@@ -0,0 +1,228 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Explore - CryptoPouch</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
13
+ }
14
+ .card-glass {
15
+ backdrop-filter: blur(16px) saturate(180%);
16
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
17
+ background-color: rgba(17, 25, 40, 0.75);
18
+ border-radius: 12px;
19
+ border: 1px solid rgba(255, 255, 255, 0.125);
20
+ }
21
+ .coin-item:hover {
22
+ transform: translateY(-2px);
23
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="gradient-bg min-h-screen text-white font-sans">
28
+ <div class="container mx-auto px-4 py-6">
29
+ <!-- Header -->
30
+ <header class="mb-8 flex justify-between items-center">
31
+ <div class="flex items-center space-x-2">
32
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-800 transition-colors">
33
+ <i data-feather="arrow-left"></i>
34
+ </a>
35
+ <h1 class="text-2xl font-bold">Explore Cryptocurrencies</h1>
36
+ </div>
37
+ <div class="relative">
38
+ <input type="text" placeholder="Search..." class="bg-gray-800 border border-gray-700 rounded-lg pl-10 pr-4 py-2 text-sm">
39
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
40
+ </div>
41
+ </header>
42
+
43
+ <!-- Top Gainers/Losers -->
44
+ <div class="flex space-x-4 mb-6">
45
+ <div class="card-glass p-4 flex-1">
46
+ <h3 class="text-sm font-semibold text-green-400 mb-2 flex items-center">
47
+ <i data-feather="trending-up" class="mr-1"></i> Top Gainers
48
+ </h3>
49
+ <div class="space-y-3">
50
+ <div class="flex justify-between items-center">
51
+ <div class="flex items-center">
52
+ <div class="bg-gray-700 p-2 rounded-full mr-3">
53
+ <i data-feather="bitcoin" class="text-yellow-400"></i>
54
+ </div>
55
+ <div>
56
+ <p class="font-medium">Bitcoin</p>
57
+ <p class="text-xs text-gray-400">BTC</p>
58
+ </div>
59
+ </div>
60
+ <p class="text-green-400">+5.2%</p>
61
+ </div>
62
+ <div class="flex justify-between items-center">
63
+ <div class="flex items-center">
64
+ <div class="bg-gray-700 p-2 rounded-full mr-3">
65
+ <i data-feather="hexagon" class="text-purple-400"></i>
66
+ </div>
67
+ <div>
68
+ <p class="font-medium">Polygon</p>
69
+ <p class="text-xs text-gray-400">MATIC</p>
70
+ </div>
71
+ </div>
72
+ <p class="text-green-400">+4.8%</p>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <div class="card-glass p-4 flex-1">
78
+ <h3 class="text-sm font-semibold text-red-400 mb-2 flex items-center">
79
+ <i data-feather="trending-down" class="mr-1"></i> Top Losers
80
+ </h3>
81
+ <div class="space-y-3">
82
+ <div class="flex justify-between items-center">
83
+ <div class="flex items-center">
84
+ <div class="bg-gray-700 p-2 rounded-full mr-3">
85
+ <i data-feather="activity" class="text-blue-400"></i>
86
+ </div>
87
+ <div>
88
+ <p class="font-medium">Ethereum</p>
89
+ <p class="text-xs text-gray-400">ETH</p>
90
+ </div>
91
+ </div>
92
+ <p class="text-red-400">-2.1%</p>
93
+ </div>
94
+ <div class="flex justify-between items-center">
95
+ <div class="flex items-center">
96
+ <div class="bg-gray-700 p-2 rounded-full mr-3">
97
+ <i data-feather="dollar-sign" class="text-green-400"></i>
98
+ </div>
99
+ <div>
100
+ <p class="font-medium">Tether</p>
101
+ <p class="text-xs text-gray-400">USDT</p>
102
+ </div>
103
+ </div>
104
+ <p class="text-red-400">-0.3%</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- All Cryptocurrencies -->
111
+ <div class="card-glass p-4">
112
+ <h2 class="text-xl font-semibold mb-4">Popular Cryptocurrencies</h2>
113
+ <div class="overflow-x-auto">
114
+ <table class="w-full">
115
+ <thead>
116
+ <tr class="text-gray-400 text-left border-b border-gray-700">
117
+ <th class="pb-3">#</th>
118
+ <th class="pb-3">Name</th>
119
+ <th class="pb-3">Price</th>
120
+ <th class="pb-3">24h</th>
121
+ <th class="pb-3">Market Cap</th>
122
+ <th class="pb-3">Action</th>
123
+ </tr>
124
+ </thead>
125
+ <tbody>
126
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
127
+ <td class="py-4">1</td>
128
+ <td class="py-4">
129
+ <div class="flex items-center">
130
+ <div class="bg-gray-700 p-2 rounded-full mr-3">
131
+ <i data-feather="bitcoin" class="text-yellow-400"></i>
132
+ </div>
133
+ <div>
134
+ <p class="font-medium">Bitcoin</p>
135
+ <p class="text-xs text-gray-400">BTC</p>
136
+ </div>
137
+ </div>
138
+ </td>
139
+ <td class="py-4">$29,450.32</td>
140
+ <td class="py-4 text-green-400">+2.1%</td>
141
+ <td class="py-4">$570.2B</td>
142
+ <td class="py-4">
143
+ <button class="px-3 py-1 bg-blue-600 rounded-lg text-sm hover:bg-blue-700 transition-colors">
144
+ Trade
145
+ </button>
146
+ </td>
147
+ </tr>
148
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
149
+ <td class="py-4">2</td>
150
+ <td class="py-4">
151
+ <div class="flex items-center">
152
+ <div class="bg-gray-700 p-2 rounded-full mr-3">
153
+ <i data-feather="activity" class="text-blue-400"></i>
154
+ </div>
155
+ <div>
156
+ <p class="font-medium">Ethereum</p>
157
+ <p class="text-xs text-gray-400">ETH</p>
158
+ </div>
159
+ </div>
160
+ </td>
161
+ <td class="py-4">$1,850.75</td>
162
+ <td class="py-4 text-red-400">-1.2%</td>
163
+ <td class="py-4">$222.8B</td>
164
+ <td class="py-4">
165
+ <button class="px-3 py-1 bg-blue-600 rounded-lg text-sm hover:bg-blue-700 transition-colors">
166
+ Trade
167
+ </button>
168
+ </td>
169
+ </tr>
170
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
171
+ <td class="py-4">3</td>
172
+ <td class="py-4">
173
+ <div class="flex items-center">
174
+ <div class="bg-gray-700 p-2 rounded-full mr-3">
175
+ <i data-feather="dollar-sign" class="text-green-400"></i>
176
+ </div>
177
+ <div>
178
+ <p class="font-medium">Tether</p>
179
+ <p class="text-xs text-gray-400">USDT</p>
180
+ </div>
181
+ </div>
182
+ </td>
183
+ <td class="py-4">$1.00</td>
184
+ <td class="py-4 text-gray-400">0.0%</td>
185
+ <td class="py-4">$83.4B</td>
186
+ <td class="py-4">
187
+ <button class="px-3 py-1 bg-blue-600 rounded-lg text-sm hover:bg-blue-700 transition-colors">
188
+ Trade
189
+ </button>
190
+ </td>
191
+ </tr>
192
+ </tbody>
193
+ </table>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Bottom Navigation -->
199
+ <nav class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm border-t border-gray-800">
200
+ <div class="container mx-auto px-4 py-3">
201
+ <div class="flex justify-around">
202
+ <a href="index.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
203
+ <i data-feather="home"></i>
204
+ <span class="text-xs mt-1">Home</span>
205
+ </a>
206
+ <a href="explore.html" class="flex flex-col items-center text-blue-400">
207
+ <i data-feather="compass"></i>
208
+ <span class="text-xs mt-1">Explore</span>
209
+ </a>
210
+ <a href="portfolio.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
211
+ <i data-feather="pie-chart"></i>
212
+ <span class="text-xs mt-1">Portfolio</span>
213
+ </a>
214
+ <a href="profile.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
215
+ <i data-feather="user"></i>
216
+ <span class="text-xs mt-1">Profile</span>
217
+ </a>
218
+ </div>
219
+ </div>
220
+ </nav>
221
+
222
+ <script>
223
+ document.addEventListener('DOMContentLoaded', function() {
224
+ feather.replace();
225
+ });
226
+ </script>
227
+ </body>
228
+ </html>
index.html CHANGED
@@ -205,19 +205,19 @@
205
  <i data-feather="home"></i>
206
  <span class="text-xs mt-1">Home</span>
207
  </button>
208
- <button class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
209
  <i data-feather="compass"></i>
210
  <span class="text-xs mt-1">Explore</span>
211
- </button>
212
- <button class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
213
  <i data-feather="pie-chart"></i>
214
  <span class="text-xs mt-1">Portfolio</span>
215
- </button>
216
- <button class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
217
  <i data-feather="user"></i>
218
  <span class="text-xs mt-1">Profile</span>
219
- </button>
220
- </div>
221
  </div>
222
  </nav>
223
  </div>
 
205
  <i data-feather="home"></i>
206
  <span class="text-xs mt-1">Home</span>
207
  </button>
208
+ <a href="explore.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
209
  <i data-feather="compass"></i>
210
  <span class="text-xs mt-1">Explore</span>
211
+ </a>
212
+ <a href="portfolio.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
213
  <i data-feather="pie-chart"></i>
214
  <span class="text-xs mt-1">Portfolio</span>
215
+ </a>
216
+ <a href="profile.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
217
  <i data-feather="user"></i>
218
  <span class="text-xs mt-1">Profile</span>
219
+ </a>
220
+ </div>
221
  </div>
222
  </nav>
223
  </div>
portfolio.html ADDED
@@ -0,0 +1,177 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Portfolio - CryptoPouch</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
13
+ }
14
+ .card-glass {
15
+ backdrop-filter: blur(16px) saturate(180%);
16
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
17
+ background-color: rgba(17, 25, 40, 0.75);
18
+ border-radius: 12px;
19
+ border: 1px solid rgba(255, 255, 255, 0.125);
20
+ }
21
+ .chart-container {
22
+ height: 250px;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="gradient-bg min-h-screen text-white font-sans">
27
+ <div class="container mx-auto px-4 py-6">
28
+ <!-- Header -->
29
+ <header class="mb-8 flex justify-between items-center">
30
+ <div class="flex items-center space-x-2">
31
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-800 transition-colors">
32
+ <i data-feather="arrow-left"></i>
33
+ </a>
34
+ <h1 class="text-2xl font-bold">Your Portfolio</h1>
35
+ </div>
36
+ <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors">
37
+ <i data-feather="filter"></i>
38
+ </button>
39
+ </header>
40
+
41
+ <!-- Portfolio Overview -->
42
+ <div class="card-glass p-6 mb-6">
43
+ <div class="flex justify-between items-center mb-4">
44
+ <h2 class="text-xl font-semibold">Total Balance</h2>
45
+ <div class="flex space-x-2">
46
+ <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors">
47
+ <i data-feather="eye"></i>
48
+ </button>
49
+ <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors">
50
+ <i data-feather="refresh-cw"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ <div class="flex items-end space-x-2 mb-6">
55
+ <p class="text-4xl font-bold">$4,256.42</p>
56
+ <p class="text-green-400 text-sm mb-2 flex items-center">
57
+ <i data-feather="trending-up" class="mr-1"></i> +5.4% (24h)
58
+ </p>
59
+ </div>
60
+
61
+ <!-- Portfolio Chart Placeholder -->
62
+ <div class="chart-container bg-gray-800 rounded-lg">
63
+ <div class="w-full h-full flex items-center justify-center text-gray-400">
64
+ <div class="text-center">
65
+ <i data-feather="bar-chart-2" width="48" height="48"></i>
66
+ <p>Portfolio Chart</p>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Asset Distribution -->
73
+ <div class="card-glass p-6 mb-6">
74
+ <h2 class="text-xl font-semibold mb-4">Asset Distribution</h2>
75
+ <div class="flex flex-wrap -mx-2">
76
+ <div class="w-1/2 px-2 mb-4">
77
+ <div class="bg-gray-800 p-4 rounded-lg">
78
+ <div class="flex justify-between items-center mb-2">
79
+ <p class="font-medium">Ethereum</p>
80
+ <p class="text-blue-400">42%</p>
81
+ </div>
82
+ <div class="w-full bg-gray-700 rounded-full h-2">
83
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 42%"></div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ <div class="w-1/2 px-2 mb-4">
88
+ <div class="bg-gray-800 p-4 rounded-lg">
89
+ <div class="flex justify-between items-center mb-2">
90
+ <p class="font-medium">Bitcoin</p>
91
+ <p class="text-yellow-400">35%</p>
92
+ </div>
93
+ <div class="w-full bg-gray-700 rounded-full h-2">
94
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 35%"></div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ <div class="w-1/2 px-2">
99
+ <div class="bg-gray-800 p-4 rounded-lg">
100
+ <div class="flex justify-between items-center mb-2">
101
+ <p class="font-medium">Stablecoins</p>
102
+ <p class="text-green-400">18%</p>
103
+ </div>
104
+ <div class="w-full bg-gray-700 rounded-full h-2">
105
+ <div class="bg-green-500 h-2 rounded-full" style="width: 18%"></div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ <div class="w-1/2 px-2">
110
+ <div class="bg-gray-800 p-4 rounded-lg">
111
+ <div class="flex justify-between items-center mb-2">
112
+ <p class="font-medium">Altcoins</p>
113
+ <p class="text-purple-400">5%</p>
114
+ </div>
115
+ <div class="w-full bg-gray-700 rounded-full h-2">
116
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 5%"></div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Performance Metrics -->
124
+ <div class="card-glass p-6">
125
+ <h2 class="text-xl font-semibold mb-4">Performance</h2>
126
+ <div class="grid grid-cols-2 gap-4">
127
+ <div class="bg-gray-800 p-4 rounded-lg">
128
+ <p class="text-gray-400 text-sm mb-1">24h Change</p>
129
+ <p class="text-green-400 text-xl font-medium">+$217.42</p>
130
+ </div>
131
+ <div class="bg-gray-800 p-4 rounded-lg">
132
+ <p class="text-gray-400 text-sm mb-1">7d Change</p>
133
+ <p class="text-green-400 text-xl font-medium">+$842.15</p>
134
+ </div>
135
+ <div class="bg-gray-800 p-4 rounded-lg">
136
+ <p class="text-gray-400 text-sm mb-1">30d Change</p>
137
+ <p class="text-red-400 text-xl font-medium">-$1,207.83</p>
138
+ </div>
139
+ <div class="bg-gray-800 p-4 rounded-lg">
140
+ <p class="text-gray-400 text-sm mb-1">All Time</p>
141
+ <p class="text-green-400 text-xl font-medium">+$3,156.42</p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Bottom Navigation -->
148
+ <nav class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm border-t border-gray-800">
149
+ <div class="container mx-auto px-4 py-3">
150
+ <div class="flex justify-around">
151
+ <a href="index.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
152
+ <i data-feather="home"></i>
153
+ <span class="text-xs mt-1">Home</span>
154
+ </a>
155
+ <a href="explore.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
156
+ <i data-feather="compass"></i>
157
+ <span class="text-xs mt-1">Explore</span>
158
+ </a>
159
+ <a href="portfolio.html" class="flex flex-col items-center text-blue-400">
160
+ <i data-feather="pie-chart"></i>
161
+ <span class="text-xs mt-1">Portfolio</span>
162
+ </a>
163
+ <a href="profile.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
164
+ <i data-feather="user"></i>
165
+ <span class="text-xs mt-1">Profile</span>
166
+ </a>
167
+ </div>
168
+ </div>
169
+ </nav>
170
+
171
+ <script>
172
+ document.addEventListener('DOMContentLoaded', function() {
173
+ feather.replace();
174
+ });
175
+ </script>
176
+ </body>
177
+ </html>
profile.html ADDED
@@ -0,0 +1,170 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Profile - CryptoPouch</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
13
+ }
14
+ .card-glass {
15
+ backdrop-filter: blur(16px) saturate(180%);
16
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
17
+ background-color: rgba(17, 25, 40, 0.75);
18
+ border-radius: 12px;
19
+ border: 1px solid rgba(255, 255, 255, 0.125);
20
+ }
21
+ .avatar {
22
+ width: 80px;
23
+ height: 80px;
24
+ background-size: cover;
25
+ background-position: center;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="gradient-bg min-h-screen text-white font-sans">
30
+ <div class="container mx-auto px-4 py-6">
31
+ <!-- Header -->
32
+ <header class="mb-8 flex justify-between items-center">
33
+ <div class="flex items-center space-x-2">
34
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-800 transition-colors">
35
+ <i data-feather="arrow-left"></i>
36
+ </a>
37
+ <h1 class="text-2xl font-bold">Profile</h1>
38
+ </div>
39
+ <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors">
40
+ <i data-feather="settings"></i>
41
+ </button>
42
+ </header>
43
+
44
+ <!-- Profile Section -->
45
+ <div class="card-glass p-6 mb-6">
46
+ <div class="flex flex-col items-center text-center mb-6">
47
+ <div class="avatar rounded-full bg-gray-700 mb-4" style="background-image: url('http://static.photos/people/200x200/42')"></div>
48
+ <h2 class="text-xl font-bold">Crypto Enthusiast</h2>
49
+ <p class="text-gray-400 text-sm">Member since 2022</p>
50
+ </div>
51
+
52
+ <div class="flex justify-around mb-6">
53
+ <div class="text-center">
54
+ <p class="text-2xl font-bold">12</p>
55
+ <p class="text-gray-400 text-sm">Assets</p>
56
+ </div>
57
+ <div class="text-center">
58
+ <p class="text-2xl font-bold">86</p>
59
+ <p class="text-gray-400 text-sm">Transactions</p>
60
+ </div>
61
+ <div class="text-center">
62
+ <p class="text-2xl font-bold">4.8</p>
63
+ <p class="text-gray-400 text-sm">Rating</p>
64
+ </div>
65
+ </div>
66
+
67
+ <button class="w-full py-2 bg-blue-600 rounded-lg font-medium hover:bg-blue-700 transition-colors">
68
+ Edit Profile
69
+ </button>
70
+ </div>
71
+
72
+ <!-- Account Details -->
73
+ <div class="card-glass p-6 mb-6">
74
+ <h2 class="text-xl font-semibold mb-4">Account Details</h2>
75
+ <div class="space-y-4">
76
+ <div>
77
+ <label class="block text-sm text-gray-400 mb-1">Username</label>
78
+ <div class="bg-gray-800 rounded-lg p-3">
79
+ <p>crypto_wizard</p>
80
+ </div>
81
+ </div>
82
+ <div>
83
+ <label class="block text-sm text-gray-400 mb-1">Email</label>
84
+ <div class="bg-gray-800 rounded-lg p-3">
85
+ <p>[email protected]</p>
86
+ </div>
87
+ </div>
88
+ <div>
89
+ <label class="block text-sm text-gray-400 mb-1">Wallet Address</label>
90
+ <div class="bg-gray-800 rounded-lg p-3">
91
+ <p class="font-mono text-sm break-all">0x71C7656EC7ab88b098defB751B7401B5f6d8976F</p>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Settings -->
98
+ <div class="card-glass p-6">
99
+ <h2 class="text-xl font-semibold mb-4">Settings</h2>
100
+ <div class="space-y-3">
101
+ <button class="w-full flex justify-between items-center p-3 hover:bg-gray-800 rounded-lg transition-colors">
102
+ <div class="flex items-center">
103
+ <i data-feather="shield" class="mr-3 text-green-400"></i>
104
+ <span>Security</span>
105
+ </div>
106
+ <i data-feather="chevron-right"></i>
107
+ </button>
108
+ <button class="w-full flex justify-between items-center p-3 hover:bg-gray-800 rounded-lg transition-colors">
109
+ <div class="flex items-center">
110
+ <i data-feather="bell" class="mr-3 text-purple-400"></i>
111
+ <span>Notifications</span>
112
+ </div>
113
+ <i data-feather="chevron-right"></i>
114
+ </button>
115
+ <button class="w-full flex justify-between items-center p-3 hover:bg-gray-800 rounded-lg transition-colors">
116
+ <div class="flex items-center">
117
+ <i data-feather="moon" class="mr-3 text-blue-400"></i>
118
+ <span>Dark Mode</span>
119
+ </div>
120
+ <i data-feather="chevron-right"></i>
121
+ </button>
122
+ <button class="w-full flex justify-between items-center p-3 hover:bg-gray-800 rounded-lg transition-colors">
123
+ <div class="flex items-center">
124
+ <i data-feather="help-circle" class="mr-3 text-yellow-400"></i>
125
+ <span>Help Center</span>
126
+ </div>
127
+ <i data-feather="chevron-right"></i>
128
+ </button>
129
+ <button class="w-full flex justify-between items-center p-3 text-red-400 hover:bg-gray-800 rounded-lg transition-colors">
130
+ <div class="flex items-center">
131
+ <i data-feather="log-out" class="mr-3"></i>
132
+ <span>Sign Out</span>
133
+ </div>
134
+ <i data-feather="chevron-right"></i>
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Bottom Navigation -->
141
+ <nav class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm border-t border-gray-800">
142
+ <div class="container mx-auto px-4 py-3">
143
+ <div class="flex justify-around">
144
+ <a href="index.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
145
+ <i data-feather="home"></i>
146
+ <span class="text-xs mt-1">Home</span>
147
+ </a>
148
+ <a href="explore.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
149
+ <i data-feather="compass"></i>
150
+ <span class="text-xs mt-1">Explore</span>
151
+ </a>
152
+ <a href="portfolio.html" class="flex flex-col items-center text-gray-400 hover:text-white transition-colors">
153
+ <i data-feather="pie-chart"></i>
154
+ <span class="text-xs mt-1">Portfolio</span>
155
+ </a>
156
+ <a href="profile.html" class="flex flex-col items-center text-blue-400">
157
+ <i data-feather="user"></i>
158
+ <span class="text-xs mt-1">Profile</span>
159
+ </a>
160
+ </div>
161
+ </div>
162
+ </nav>
163
+
164
+ <script>
165
+ document.addEventListener('DOMContentLoaded', function() {
166
+ feather.replace();
167
+ });
168
+ </script>
169
+ </body>
170
+ </html>