Hugging Face's logo

Spaces:
dxlorhuggingface
/
mxp
Running

App Files Community
dxlorhuggingface commited on
Commit
348160d
·
verified ·
1 Parent(s): a3cba1b

Create a dynamic, premium login and signup interface for the POKE: Bitcoin & Ethereum platform, following the same dark-themed, clean, and minimal style as the main app, with a dark blue night sky & stars background. Visual Design Background: High-quality dark blue night sky with scattered stars. Subtle twinkling effect for stars (CSS animation). Soft parallax movement to create depth. Overlay: Semi-transparent black layer (rgba(0,0,0,0.5)) for readability. Colors: Primary: Electric Blue #00AEEF Accent: Neon Green #00FF9F Text: White #FFFFFF with soft grey for secondary text. Font: “Inter” or “Poppins” for modern, clean readability. Layout & Elements Central Auth Card: Dark background card, rounded corners (border-radius: 16px), soft glowing shadow. Card sits centered vertically and horizontally. Top tabs for Login and Signup, styled with neon underlines when active. Login Form Fields: Email, Password, “Forgot Password” link. Signup Form Fields: Full Name, Email, Password, Confirm Password. Extra: Password visibility toggle (eye icon). Social Login: Google button (optional). Dynamic Interactions Sliding/Flipping Animation: When switching between Login and Signup, the card either: Slide horizontally to reveal the other form, or Flip in 3D (like a card turning over). Smooth transition duration: 0.4–0.6s. Validation Feedback: Shake animation for incorrect inputs. Green glow for valid submissions. Hover Effects: Buttons glow with electric blue outline. Tab hover changes underline color to neon green. Extra Details Logo: POKE logo above the forms. Slogan: “Fast. Fair. Secure.” under logo. Responsive Design: Works seamlessly on desktop, tablet, and mobile. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +336 -964
index.html CHANGED
@@ -3,1045 +3,417 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>POKE: Bitcoin & Ethereum Trading</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
9
  <style>
10
- :root {
11
- --bg-dark: #0B0E11;
12
- --accent-blue: #00AEEF;
13
- --accent-green: #00FF9F;
 
 
14
  }
15
 
16
- body {
17
- font-family: 'Inter', sans-serif;
18
- background-color: var(--bg-dark);
19
- color: white;
 
 
 
 
20
  }
21
 
22
- .glow-button {
23
- box-shadow: 0 0 10px rgba(0, 174, 239, 0.5);
24
- transition: all 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  }
26
 
27
- .glow-button:hover {
28
- box-shadow: 0 0 20px rgba(0, 174, 239, 0.8);
29
  }
30
 
31
- .glow-button-green {
32
- box-shadow: 0 0 10px rgba(0, 255, 159, 0.5);
33
  }
34
 
35
- .glow-button-green:hover {
36
- box-shadow: 0 0 20px rgba(0, 255, 159, 0.8);
 
 
37
  }
38
 
39
- .tab-content {
40
- display: none;
41
- animation: fadeIn 0.5s ease;
42
  }
43
 
44
- .tab-content.active {
45
- display: block;
 
46
  }
47
 
48
- @keyframes fadeIn {
49
- from { opacity: 0; }
50
- to { opacity: 1; }
51
  }
52
 
53
- .upload-area {
54
- border: 2px dashed rgba(255, 255, 255, 0.2);
 
55
  transition: all 0.3s ease;
56
  }
57
 
58
- .upload-area:hover {
59
- border-color: var(--accent-blue);
60
- background-color: rgba(0, 174, 239, 0.05);
61
  }
62
 
63
- .upload-area.active {
64
- border-color: var(--accent-green);
65
- background-color: rgba(0, 255, 159, 0.05);
66
  }
67
 
68
- .progress-step {
 
 
69
  position: relative;
70
  }
71
 
72
- .progress-step:not(:last-child):after {
73
- content: '';
74
  position: absolute;
75
- top: 50%;
76
- left: 100%;
77
- width: 50px;
78
- height: 2px;
79
- background-color: rgba(255, 255, 255, 0.2);
80
- transform: translateY(-50%);
81
  }
82
 
83
- .progress-step.active:not(:last-child):after {
84
- background-color: var(--accent-blue);
 
85
  }
86
 
87
- .modal {
88
- animation: modalFadeIn 0.3s ease;
89
  }
90
 
91
- @keyframes modalFadeIn {
92
- from { opacity: 0; transform: translateY(-20px); }
93
- to { opacity: 1; transform: translateY(0); }
94
  }
95
 
96
- .ticker-item {
97
- animation: tickerScroll 20s linear infinite;
98
  }
99
 
100
- @keyframes tickerScroll {
101
- 0% { transform: translateX(100%); }
102
- 100% { transform: translateX(-100%); }
 
 
 
 
 
 
 
 
 
 
103
  }
104
  </style>
105
  </head>
106
- <body class="min-h-screen">
107
- <!-- Login Bonus Modal -->
108
- <div id="loginBonusModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 modal">
109
- <div class="bg-gray-900 rounded-xl max-w-md w-full p-6 border border-gray-800 shadow-xl">
110
- <div class="text-center mb-6">
111
- <div class="text-5xl mb-4">🎉</div>
112
- <h3 class="text-2xl font-bold mb-2">Congratulations!</h3>
113
- <p class="text-gray-300">You've won a $25 bonus.</p>
114
- <p class="text-gray-300">Complete KYC to claim your reward.</p>
115
- </div>
116
- <div class="flex space-x-4">
117
- <button onclick="closeModal()" class="flex-1 py-3 px-4 rounded-lg bg-gray-800 hover:bg-gray-700 transition">Maybe Later</button>
118
- <button onclick="startKYC()" class="flex-1 py-3 px-4 rounded-lg bg-gradient-to-r from-blue-500 to-teal-400 text-white font-medium glow-button hover:opacity-90 transition">Start KYC</button>
119
- </div>
120
- </div>
121
- </div>
122
-
123
- <!-- Main Layout -->
124
- <div class="flex flex-col min-h-screen">
125
- <!-- Price Ticker -->
126
- <div class="bg-gray-900 py-2 px-4 overflow-hidden">
127
- <div class="flex whitespace-nowrap">
128
- <div class="ticker-item flex space-x-8 pr-8">
129
- <span>BTC: <span class="text-green-400">$63,421.50</span> <span class="text-gray-400">(+2.34%)</span></span>
130
- <span>ETH: <span class="text-green-400">$3,421.75</span> <span class="text-gray-400">(+1.56%)</span></span>
131
- <span>24h Volume: <span class="text-gray-300">$42.8B</span></span>
132
- <span>Market Cap: <span class="text-gray-300">$1.24T</span></span>
133
- </div>
134
- <div class="ticker-item flex space-x-8 pr-8">
135
- <span>BTC: <span class="text-green-400">$63,421.50</span> <span class="text-gray-400">(+2.34%)</span></span>
136
- <span>ETH: <span class="text-green-400">$3,421.75</span> <span class="text-gray-400">(+1.56%)</span></span>
137
- <span>24h Volume: <span class="text-gray-300">$42.8B</span></span>
138
- <span>Market Cap: <span class="text-gray-300">$1.24T</span></span>
139
- </div>
140
- </div>
141
- </div>
142
-
143
- <!-- Header -->
144
- <header class="bg-gray-900 border-b border-gray-800 py-4 px-6 flex items-center justify-between">
145
- <div class="flex items-center space-x-2">
146
- <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-teal-400 rounded-lg"></div>
147
- <h1 class="text-xl font-bold">POKE</h1>
148
- </div>
149
- <div class="flex items-center space-x-4">
150
- <div class="hidden md:flex items-center space-x-2 bg-gray-800 rounded-full px-4 py-2">
151
- <div class="w-6 h-6 rounded-full bg-blue-500"></div>
152
- <span class="font-medium">John Doe</span>
153
  </div>
154
- <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700">
155
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
156
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
157
- </svg>
158
- </button>
159
  </div>
160
- </header>
161
-
162
- <div class="flex flex-1">
163
- <!-- Sidebar -->
164
- <aside class="hidden md:block w-64 bg-gray-900 border-r border-gray-800 p-4">
165
- <div class="mb-8">
166
- <div class="text-xs uppercase text-gray-500 font-medium mb-4">Main</div>
167
- <nav>
168
- <button onclick="switchTab('dashboard')" class="tab-button flex items-center space-x-3 w-full px-4 py-3 rounded-lg bg-gray-800 text-blue-400 mb-2">
169
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
170
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
171
- </svg>
172
- <span>Dashboard</span>
173
- </button>
174
- <button onclick="switchTab('buySell')" class="tab-button flex items-center space-x-3 w-full px-4 py-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white mb-2">
175
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
176
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
177
- </svg>
178
- <span>Buy/Sell</span>
179
- </button>
180
- <button onclick="switchTab('transfers')" class="tab-button flex items-center space-x-3 w-full px-4 py-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white mb-2">
181
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
182
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
183
- </svg>
184
- <span>Transfers</span>
185
- </button>
186
- </nav>
187
- </div>
188
- <div class="mb-8">
189
- <div class="text-xs uppercase text-gray-500 font-medium mb-4">Account</div>
190
- <nav>
191
- <button onclick="switchTab('kyc')" class="tab-button flex items-center space-x-3 w-full px-4 py-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white mb-2">
192
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
193
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
194
- </svg>
195
- <span>KYC Verification</span>
196
- </button>
197
- <button onclick="switchTab('settings')" class="tab-button flex items-center space-x-3 w-full px-4 py-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white mb-2">
198
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
199
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
200
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
201
- </svg>
202
- <span>Settings</span>
203
- </button>
204
- </nav>
205
  </div>
206
- </aside>
207
-
208
- <!-- Mobile Bottom Navigation -->
209
- <div class="md:hidden fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 flex justify-around py-3 px-4">
210
- <button onclick="switchTab('dashboard')" class="tab-button flex flex-col items-center text-xs">
211
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
212
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
213
- </svg>
214
- <span>Home</span>
215
- </button>
216
- <button onclick="switchTab('buySell')" class="tab-button flex flex-col items-center text-xs">
217
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
218
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
219
- </svg>
220
- <span>Trade</span>
221
- </button>
222
- <button onclick="switchTab('transfers')" class="tab-button flex flex-col items-center text-xs">
223
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
224
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
225
- </svg>
226
- <span>Transfers</span>
227
- </button>
228
- <button onclick="switchTab('kyc')" class="tab-button flex flex-col items-center text-xs">
229
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
230
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
231
- </svg>
232
- <span>KYC</span>
233
- </button>
234
- </div>
235
-
236
- <!-- Main Content -->
237
- <main class="flex-1 p-6 pb-20 md:pb-6">
238
- <!-- Dashboard Tab -->
239
- <div id="dashboard" class="tab-content active">
240
- <div class="mb-8">
241
- <h2 class="text-2xl font-bold mb-6">Dashboard</h2>
242
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
243
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800">
244
- <div class="flex items-center justify-between mb-4">
245
- <h3 class="text-gray-400">Total Balance</h3>
246
- <span class="text-xs bg-gray-800 text-gray-400 px-2 py-1 rounded">USD</span>
247
- </div>
248
- <div class="text-3xl font-bold mb-2">$12,845.50</div>
249
- <div class="text-sm text-gray-400">≈ 0.2025 BTC + 3.75 ETH</div>
250
- </div>
251
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800">
252
- <div class="flex items-center justify-between mb-4">
253
- <h3 class="text-gray-400">Bitcoin (BTC)</h3>
254
- <span class="text-xs bg-gray-800 text-gray-400 px-2 py-1 rounded">+2.34%</span>
255
- </div>
256
- <div class="text-3xl font-bold mb-2">0.2025 BTC</div>
257
- <div class="text-sm text-gray-400">≈ $12,845.50</div>
258
- </div>
259
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800">
260
- <div class="flex items-center justify-between mb-4">
261
- <h3 class="text-gray-400">Ethereum (ETH)</h3>
262
- <span class="text-xs bg-gray-800 text-gray-400 px-2 py-1 rounded">+1.56%</span>
263
- </div>
264
- <div class="text-3xl font-bold mb-2">3.75 ETH</div>
265
- <div class="text-sm text-gray-400">≈ $12,845.50</div>
266
- </div>
267
- </div>
268
- </div>
269
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
270
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800">
271
- <h3 class="text-lg font-medium mb-4">Quick Actions</h3>
272
- <div class="grid grid-cols-2 gap-4">
273
- <button onclick="switchTab('buySell')" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 flex flex-col items-center transition">
274
- <div class="w-10 h-10 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center mb-2">
275
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
276
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
277
- </svg>
278
- </div>
279
- <span class="text-sm">Buy Crypto</span>
280
- </button>
281
- <button onclick="switchTab('buySell')" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 flex flex-col items-center transition">
282
- <div class="w-10 h-10 bg-red-500 bg-opacity-20 rounded-full flex items-center justify-center mb-2">
283
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
284
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
285
- </svg>
286
- </div>
287
- <span class="text-sm">Sell Crypto</span>
288
- </button>
289
- <button onclick="switchTab('transfers')" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 flex flex-col items-center transition">
290
- <div class="w-10 h-10 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center mb-2">
291
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
292
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
293
- </svg>
294
- </div>
295
- <span class="text-sm">Send</span>
296
  </button>
297
- <button onclick="switchTab('transfers')" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 flex flex-col items-center transition">
298
- <div class="w-10 h-10 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center mb-2">
299
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
300
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
301
- </svg>
302
- </div>
303
- <span class="text-sm">Receive</span>
 
 
 
304
  </button>
305
- </div>
306
  </div>
307
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800">
308
- <h3 class="text-lg font-medium mb-4">Recent Transactions</h3>
309
- <div class="space-y-4">
310
- <div class="flex items-center justify-between">
311
- <div class="flex items-center space-x-3">
312
- <div class="w-10 h-10 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center">
313
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
314
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
315
- </svg>
316
- </div>
317
- <div>
318
- <div class="font-medium">BTC Purchase</div>
319
- <div class="text-xs text-gray-400">Today, 10:45 AM</div>
320
- </div>
321
- </div>
322
- <div class="text-right">
323
- <div class="font-medium text-green-400">+0.005 BTC</div>
324
- <div class="text-xs text-gray-400">$315.50</div>
325
- </div>
326
- </div>
327
- <div class="flex items-center justify-between">
328
- <div class="flex items-center space-x-3">
329
- <div class="w-10 h-10 bg-red-500 bg-opacity-20 rounded-full flex items-center justify-center">
330
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
331
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
332
- </svg>
333
- </div>
334
- <div>
335
- <div class="font-medium">ETH Sale</div>
336
- <div class="text-xs text-gray-400">Yesterday, 3:22 PM</div>
337
- </div>
338
- </div>
339
- <div class="text-right">
340
- <div class="font-medium text-red-400">-0.42 ETH</div>
341
- <div class="text-xs text-gray-400">$1,437.24</div>
342
- </div>
343
- </div>
344
- </div>
345
- <button class="mt-4 text-sm text-blue-400 hover:text-blue-300">View All Transactions</button>
346
- </div>
347
- </div>
348
- </div>
349
-
350
- <!-- Buy/Sell Tab -->
351
- <div id="buySell" class="tab-content">
352
- <h2 class="text-2xl font-bold mb-6">Buy & Sell Crypto</h2>
353
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
354
- <div class="lg:col-span-2">
355
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 mb-6">
356
- <div class="flex items-center justify-between mb-6">
357
- <h3 class="text-lg font-medium">Market Overview</h3>
358
- <div class="flex space-x-2">
359
- <button class="px-3 py-1 text-sm bg-gray-800 rounded-lg">24h</button>
360
- <button class="px-3 py-1 text-sm bg-blue-500 rounded-lg">1W</button>
361
- <button class="px-3 py-1 text-sm bg-gray-800 rounded-lg">1M</button>
362
- <button class="px-3 py-1 text-sm bg-gray-800 rounded-lg">1Y</button>
363
- </div>
364
- </div>
365
- <div class="h-64 bg-gray-800 rounded-lg mb-4 flex items-center justify-center">
366
- <!-- Chart placeholder -->
367
- <div class="text-gray-500">Price chart will appear here</div>
368
- </div>
369
- <div class="grid grid-cols-2 gap-4">
370
- <div>
371
- <div class="text-gray-400 text-sm mb-1">24h High</div>
372
- <div class="text-green-400 font-medium">$64,218.75</div>
373
- </div>
374
- <div>
375
- <div class="text-gray-400 text-sm mb-1">24h Low</div>
376
- <div class="text-red-400 font-medium">$62,104.30</div>
377
- </div>
378
- <div>
379
- <div class="text-gray-400 text-sm mb-1">24h Volume</div>
380
- <div class="font-medium">$28.4B</div>
381
- </div>
382
- <div>
383
- <div class="text-gray-400 text-sm mb-1">Market Cap</div>
384
- <div class="font-medium">$1.24T</div>
385
- </div>
386
- </div>
387
- </div>
388
- </div>
389
- <div>
390
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 sticky top-6">
391
- <div class="flex border-b border-gray-800 pb-4 mb-4">
392
- <button id="buyTabButton" class="flex-1 py-2 font-medium text-center border-b-2 border-blue-500">Buy</button>
393
- <button id="sellTabButton" class="flex-1 py-2 font-medium text-center border-b-2 border-transparent">Sell</button>
394
- </div>
395
- <div id="buyForm">
396
- <div class="mb-4">
397
- <label class="block text-sm text-gray-400 mb-2">Asset</label>
398
- <div class="relative">
399
- <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 appearance-none">
400
- <option>Bitcoin (BTC)</option>
401
- <option>Ethereum (ETH)</option>
402
- </select>
403
- <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
404
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
405
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
406
- </svg>
407
- </div>
408
- </div>
409
- </div>
410
- <div class="mb-4">
411
- <label class="block text-sm text-gray-400 mb-2">Amount (USD)</label>
412
- <div class="relative">
413
- <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3" placeholder="0.00">
414
- <div class="absolute inset-y-0 right-0 flex items-center pr-3">
415
- <span class="text-gray-400 text-sm">USD</span>
416
- </div>
417
- </div>
418
- <div class="text-xs text-gray-500 mt-1">Min: $10.00</div>
419
- </div>
420
- <div class="mb-6">
421
- <label class="block text-sm text-gray-400 mb-2">You receive</label>
422
- <div class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
423
- <div class="flex justify-between">
424
- <span class="text-gray-300">0.0000 BTC</span>
425
- <span class="text-gray-500">≈ $0.00</span>
426
- </div>
427
- </div>
428
- </div>
429
- <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-teal-400 text-white font-medium rounded-lg glow-button hover:opacity-90 transition">Buy Bitcoin</button>
430
- </div>
431
- <div id="sellForm" class="hidden">
432
- <div class="mb-4">
433
- <label class="block text-sm text-gray-400 mb-2">Asset</label>
434
- <div class="relative">
435
- <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 appearance-none">
436
- <option>Bitcoin (BTC)</option>
437
- <option>Ethereum (ETH)</option>
438
- </select>
439
- <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
440
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
441
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
442
- </svg>
443
- </div>
444
- </div>
445
- </div>
446
- <div class="mb-4">
447
- <label class="block text-sm text-gray-400 mb-2">Amount</label>
448
- <div class="relative">
449
- <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3" placeholder="0.0000">
450
- <div class="absolute inset-y-0 right-0 flex items-center pr-3">
451
- <span class="text-gray-400 text-sm">BTC</span>
452
- </div>
453
- </div>
454
- <div class="flex justify-between text-xs text-gray-500 mt-1">
455
- <span>Available: 0.2025 BTC</span>
456
- <span>≈ $12,845.50</span>
457
- </div>
458
- </div>
459
- <div class="mb-6">
460
- <label class="block text-sm text-gray-400 mb-2">You receive</label>
461
- <div class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
462
- <div class="flex justify-between">
463
- <span class="text-gray-300">$0.00</span>
464
- <span class="text-gray-500">≈ 0.0000 BTC</span>
465
- </div>
466
- </div>
467
- </div>
468
- <button class="w-full py-3 bg-gradient-to-r from-red-500 to-orange-400 text-white font-medium rounded-lg glow-button hover:opacity-90 transition">Sell Bitcoin</button>
469
- </div>
470
- </div>
471
- </div>
472
- </div>
473
- </div>
474
-
475
- <!-- Transfers Tab -->
476
- <div id="transfers" class="tab-content">
477
- <h2 class="text-2xl font-bold mb-6">Transfers</h2>
478
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
479
- <div class="lg:col-span-2">
480
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 mb-6">
481
- <h3 class="text-lg font-medium mb-6">Recent Transactions</h3>
482
- <div class="overflow-x-auto">
483
- <table class="w-full">
484
- <thead>
485
- <tr class="text-left text-gray-400 text-sm border-b border-gray-800">
486
- <th class="pb-3">Asset</th>
487
- <th class="pb-3">Amount</th>
488
- <th class="pb-3">Address</th>
489
- <th class="pb-3">Status</th>
490
- <th class="pb-3">Date</th>
491
- </tr>
492
- </thead>
493
- <tbody>
494
- <tr class="border-b border-gray-800 hover:bg-gray-800">
495
- <td class="py-4">
496
- <div class="flex items-center">
497
- <div class="w-6 h-6 bg-orange-500 rounded-full mr-2"></div>
498
- <span>BTC</span>
499
- </div>
500
- </td>
501
- <td class="py-4">
502
- <div class="font-medium">0.005 BTC</div>
503
- <div class="text-xs text-gray-400">$315.50</div>
504
- </td>
505
- <td class="py-4">
506
- <div class="text-sm text-gray-300">3FZb...Wpna</div>
507
- </td>
508
- <td class="py-4">
509
- <span class="px-2 py-1 text-xs bg-green-900 text-green-400 rounded">Completed</span>
510
- </td>
511
- <td class="py-4">
512
- <div class="text-sm">2 hours ago</div>
513
- </td>
514
- </tr>
515
- <tr class="border-b border-gray-800 hover:bg-gray-800">
516
- <td class="py-4">
517
- <div class="flex items-center">
518
- <div class="w-6 h-6 bg-purple-500 rounded-full mr-2"></div>
519
- <span>ETH</span>
520
- </div>
521
- </td>
522
- <td class="py-4">
523
- <div class="font-medium">0.42 ETH</div>
524
- <div class="text-xs text-gray-400">$1,437.24</div>
525
- </td>
526
- <td class="py-4">
527
- <div class="text-sm text-gray-300">0x71C...3bB6</div>
528
- </td>
529
- <td class="py-4">
530
- <span class="px-2 py-1 text-xs bg-blue-900 text-blue-400 rounded">Pending</span>
531
- </td>
532
- <td class="py-4">
533
- <div class="text-sm">Yesterday</div>
534
- </td>
535
- </tr>
536
- </tbody>
537
- </table>
538
- </div>
539
- <button class="mt-4 text-sm text-blue-400 hover:text-blue-300">View All Transactions</button>
540
- </div>
541
- </div>
542
- <div>
543
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 sticky top-6">
544
- <div class="flex border-b border-gray-800 pb-4 mb-4">
545
- <button id="sendTabButton" class="flex-1 py-2 font-medium text-center border-b-2 border-blue-500">Send</button>
546
- <button id="receiveTabButton" class="flex-1 py-2 font-medium text-center border-b-2 border-transparent">Receive</button>
547
- </div>
548
- <div id="sendForm">
549
- <div class="mb-4">
550
- <label class="block text-sm text-gray-400 mb-2">Asset</label>
551
- <div class="relative">
552
- <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 appearance-none">
553
- <option>Bitcoin (BTC)</option>
554
- <option>Ethereum (ETH)</option>
555
- </select>
556
- <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
557
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
558
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
559
- </svg>
560
- </div>
561
- </div>
562
- </div>
563
- <div class="mb-4">
564
- <label class="block text-sm text-gray-400 mb-2">Amount</label>
565
- <div class="relative">
566
- <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3" placeholder="0.0000">
567
- <div class="absolute inset-y-0 right-0 flex items-center pr-3">
568
- <span class="text-gray-400 text-sm">BTC</span>
569
- </div>
570
- </div>
571
- <div class="flex justify-between text-xs text-gray-500 mt-1">
572
- <span>Available: 0.2025 BTC</span>
573
- <span>≈ $12,845.50</span>
574
- </div>
575
- </div>
576
- <div class="mb-4">
577
- <label class="block text-sm text-gray-400 mb-2">Recipient Address</label>
578
- <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3" placeholder="3FZbgi29cpjq2GjdwV8eyHuJJnkLtktZc5">
579
- </div>
580
- <div class="mb-6">
581
- <label class="block text-sm text-gray-400 mb-2">Network Fee</label>
582
- <div class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
583
- <div class="flex justify-between">
584
- <span class="text-gray-300">0.0001 BTC</span>
585
- <span class="text-gray-500">≈ $6.34</span>
586
- </div>
587
- </div>
588
- </div>
589
- <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-teal-400 text-white font-medium rounded-lg glow-button hover:opacity-90 transition">Send Bitcoin</button>
590
- </div>
591
- <div id="receiveForm" class="hidden">
592
- <div class="mb-4">
593
- <label class="block text-sm text-gray-400 mb-2">Asset</label>
594
- <div class="relative">
595
- <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 appearance-none">
596
- <option>Bitcoin (BTC)</option>
597
- <option>Ethereum (ETH)</option>
598
- </select>
599
- <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
600
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
601
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
602
- </svg>
603
- </div>
604
- </div>
605
- </div>
606
- <div class="mb-6">
607
- <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
608
- <div class="w-48 h-48 bg-white mb-4 flex items-center justify-center">
609
- <!-- QR Code Placeholder -->
610
- <div class="text-gray-800 text-center p-4">
611
- QR Code<br>Would Appear Here
612
- </div>
613
- </div>
614
- <div class="text-center">
615
- <div class="text-sm text-gray-400 mb-1">Your BTC Address</div>
616
- <div class="font-mono text-sm bg-gray-900 px-3 py-2 rounded">3FZbgi29cpjq2GjdwV8eyHuJJnkLtktZc5</div>
617
- <button class="mt-3 text-sm text-blue-400 hover:text-blue-300">Copy Address</button>
618
- </div>
619
- </div>
620
- </div>
621
- </div>
622
- </div>
623
- </div>
624
- </div>
625
- </div>
626
-
627
- <!-- KYC Tab -->
628
- <div id="kyc" class="tab-content">
629
- <h2 class="text-2xl font-bold mb-6">KYC Verification</h2>
630
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 max-w-3xl mx-auto">
631
- <!-- Progress Steps -->
632
- <div class="flex justify-between mb-8">
633
- <div class="progress-step flex flex-col items-center">
634
- <div id="step1Indicator" class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium mb-2">1</div>
635
- <span class="text-sm">Personal Info</span>
636
- </div>
637
- <div class="progress-step flex flex-col items-center">
638
- <div id="step2Indicator" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 font-medium mb-2">2</div>
639
- <span class="text-sm text-gray-400">ID Verification</span>
640
- </div>
641
- </div>
642
-
643
- <!-- Step 1: Personal Info -->
644
- <div id="kycStep1">
645
- <h3 class="text-lg font-medium mb-6">Personal Information</h3>
646
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
647
  <div>
648
- <label class="block text-sm text-gray-400 mb-2">First Name</label>
649
- <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
650
  </div>
 
651
  <div>
652
- <label class="block text-sm text-gray-400 mb-2">Last Name</label>
653
- <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
654
- </div>
655
- <div>
656
- <label class="block text-sm text-gray-400 mb-2">Date of Birth</label>
657
- <input type="date" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
658
- </div>
659
- <div>
660
- <label class="block text-sm text-gray-400 mb-2">Country</label>
661
- <div class="relative">
662
- <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 appearance-none">
663
- <option>United States</option>
664
- <option>Canada</option>
665
- <option>United Kingdom</option>
666
- <option>Australia</option>
667
- </select>
668
- <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
669
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
670
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
671
- </svg>
672
- </div>
673
- </div>
674
- </div>
675
- <div class="md:col-span-2">
676
- <label class="block text-sm text-gray-400 mb-2">Address</label>
677
- <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 mb-3" placeholder="Street Address">
678
- <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3" placeholder="Apartment, Suite, etc. (Optional)">
679
- </div>
680
- <div>
681
- <label class="block text-sm text-gray-400 mb-2">City</label>
682
- <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
683
- </div>
684
- <div>
685
- <label class="block text-sm text-gray-400 mb-2">ZIP/Postal Code</label>
686
- <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
687
- </div>
688
- </div>
689
- <div class="flex justify-end">
690
- <button onclick="nextKYCStep()" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-teal-400 text-white font-medium rounded-lg glow-button hover:opacity-90 transition">Continue</button>
691
- </div>
692
- </div>
693
-
694
- <!-- Step 2: ID Verification -->
695
- <div id="kycStep2" class="hidden">
696
- <h3 class="text-lg font-medium mb-6">ID Verification</h3>
697
- <div class="mb-8">
698
- <p class="text-gray-400 mb-6">To verify your identity, please upload a clear photo of one of the following documents:</p>
699
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
700
- <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
701
- <div class="flex items-center mb-2">
702
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
703
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
704
- </svg>
705
- <span class="font-medium">National ID</span>
706
- </div>
707
- <p class="text-sm text-gray-400">Government-issued identification card.</p>
708
- </div>
709
- <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
710
- <div class="flex items-center mb-2">
711
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
712
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
713
- </svg>
714
- <span class="font-medium">Driver's License</span>
715
- </div>
716
- <p class="text-sm text-gray-400">Valid driver's license.</p>
717
- </div>
718
- </div>
719
- <div class="mb-6">
720
- <label class="block text-sm text-gray-400 mb-2">Document Type</label>
721
- <div class="relative">
722
- <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 appearance-none">
723
- <option>National ID</option>
724
- <option>Driver's License</option>
725
- <option>Passport</option>
726
- </select>
727
- <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
728
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
729
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
730
- </svg>
731
- </div>
732
- </div>
733
- </div>
734
- <div class="mb-6">
735
- <label class="block text-sm text-gray-400 mb-2">Front Side</label>
736
- <div id="frontUpload" class="upload-area rounded-lg p-8 text-center cursor-pointer">
737
- <div class="flex flex-col items-center justify-center">
738
- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-500 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
739
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
740
- </svg>
741
- <p class="text-gray-400">Drag & drop your file here or click to browse</p>
742
- <p class="text-xs text-gray-500 mt-1">JPG, PNG or PDF (max. 5MB)</p>
743
- </div>
744
- </div>
745
- </div>
746
- <div class="mb-8">
747
- <label class="block text-sm text-gray-400 mb-2">Back Side</label>
748
- <div id="backUpload" class="upload-area rounded-lg p-8 text-center cursor-pointer">
749
- <div class="flex flex-col items-center justify-center">
750
- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-500 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
751
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
752
- </svg>
753
- <p class="text-gray-400">Drag & drop your file here or click to browse</p>
754
- <p class="text-xs text-gray-500 mt-1">JPG, PNG or PDF (max. 5MB)</p>
755
- </div>
756
- </div>
757
- </div>
758
- </div>
759
- <div class="flex justify-between">
760
- <button onclick="prevKYCStep()" class="px-6 py-3 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-700 transition">Back</button>
761
- <button class="px-6 py-3 bg-gradient-to-r from-blue-500 to-teal-400 text-white font-medium rounded-lg glow-button hover:opacity-90 transition">Submit Verification</button>
762
- </div>
763
- </div>
764
- </div>
765
- </div>
766
-
767
- <!-- Settings Tab -->
768
- <div id="settings" class="tab-content">
769
- <h2 class="text-2xl font-bold mb-6">Settings</h2>
770
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 max-w-3xl mx-auto">
771
- <div class="mb-8">
772
- <h3 class="text-lg font-medium mb-4">Account</h3>
773
- <div class="space-y-4">
774
- <div class="flex items-center justify-between py-3 border-b border-gray-800">
775
- <div>
776
- <div class="font-medium">Email</div>
777
- <div class="text-sm text-gray-400">[email protected]</div>
778
- </div>
779
- <button class="text-blue-400 hover:text-blue-300 text-sm">Change</button>
780
- </div>
781
- <div class="flex items-center justify-between py-3 border-b border-gray-800">
782
- <div>
783
- <div class="font-medium">Phone Number</div>
784
- <div class="text-sm text-gray-400">+1 (555) 123-4567</div>
785
- </div>
786
- <button class="text-blue-400 hover:text-blue-300 text-sm">Change</button>
787
- </div>
788
- <div class="flex items-center justify-between py-3 border-b border-gray-800">
789
- <div>
790
- <div class="font-medium">Password</div>
791
- <div class="text-sm text-gray-400">••••••••</div>
792
- </div>
793
- <button class="text-blue-400 hover:text-blue-300 text-sm">Change</button>
794
- </div>
795
- </div>
796
- </div>
797
- <div class="mb-8">
798
- <h3 class="text-lg font-medium mb-4">Security</h3>
799
- <div class="space-y-4">
800
- <div class="flex items-center justify-between py-3 border-b border-gray-800">
801
- <div>
802
- <div class="font-medium">Two-Factor Authentication</div>
803
- <div class="text-sm text-gray-400">Disabled</div>
804
- </div>
805
- <button class="text-blue-400 hover:text-blue-300 text-sm">Enable</button>
806
- </div>
807
- <div class="flex items-center justify-between py-3 border-b border-gray-800">
808
- <div>
809
- <div class="font-medium">Login Activity</div>
810
- <div class="text-sm text-gray-400">View recent logins</div>
811
- </div>
812
- <button class="text-blue-400 hover:text-blue-300 text-sm">View</button>
813
- </div>
814
- </div>
815
- </div>
816
- <div>
817
- <h3 class="text-lg font-medium mb-4">Preferences</h3>
818
- <div class="space-y-4">
819
- <div class="flex items-center justify-between py-3 border-b border-gray-800">
820
- <div>
821
- <div class="font-medium">Theme</div>
822
- <div class="text-sm text-gray-400">Dark</div>
823
- </div>
824
- <button class="text-blue-400 hover:text-blue-300 text-sm">Change</button>
825
- </div>
826
- <div class="flex items-center justify-between py-3 border-b border-gray-800">
827
- <div>
828
- <div class="font-medium">Currency</div>
829
- <div class="text-sm text-gray-400">US Dollar (USD)</div>
830
- </div>
831
- <button class="text-blue-400 hover:text-blue-300 text-sm">Change</button>
832
- </div>
833
- <div class="flex items-center justify-between py-3 border-b border-gray-800">
834
- <div>
835
- <div class="font-medium">Language</div>
836
- <div class="text-sm text-gray-400">English</div>
837
- </div>
838
- <button class="text-blue-400 hover:text-blue-300 text-sm">Change</button>
839
- </div>
840
- </div>
841
  </div>
842
  </div>
843
  </div>
844
- </main>
 
 
 
 
845
  </div>
846
  </div>
847
 
848
  <script>
849
- // Show login bonus modal on page load
850
  document.addEventListener('DOMContentLoaded', function() {
851
- document.getElementById('loginBonusModal').classList.remove('hidden');
852
-
853
- // Initialize tab functionality
854
- initTabs();
855
-
856
- // Initialize KYC file upload
857
- initKYCUpload();
858
-
859
- // Initialize buy/sell tabs
860
- initBuySellTabs();
861
-
862
- // Initialize send/receive tabs
863
- initSendReceiveTabs();
864
- });
865
-
866
- // Close modal
867
- function closeModal() {
868
- document.getElementById('loginBonusModal').classList.add('hidden');
869
- }
870
-
871
- // Start KYC process
872
- function startKYC() {
873
- closeModal();
874
- switchTab('kyc');
875
- }
876
-
877
- // Tab switching functionality
878
- function initTabs() {
879
- // Set default active tab
880
- switchTab('dashboard');
881
- }
882
-
883
- function switchTab(tabId) {
884
- // Hide all tab contents
885
- document.querySelectorAll('.tab-content').forEach(tab => {
886
- tab.classList.remove('active');
887
- });
888
-
889
- // Show selected tab content
890
- document.getElementById(tabId).classList.add('active');
891
-
892
- // Update active tab button styles (for sidebar)
893
- document.querySelectorAll('.tab-button').forEach(button => {
894
- button.classList.remove('bg-gray-800', 'text-blue-400');
895
- button.classList.add('text-gray-300', 'hover:text-white', 'hover:bg-gray-800');
896
- });
897
-
898
- // For mobile bottom nav, we'd need to add similar logic if we had visual indicators
899
- }
900
-
901
- // KYC Steps Navigation
902
- function nextKYCStep() {
903
- document.getElementById('kycStep1').classList.add('hidden');
904
- document.getElementById('kycStep2').classList.remove('hidden');
905
- document.getElementById('step1Indicator').classList.remove('bg-blue-500');
906
- document.getElementById('step1Indicator').classList.add('bg-green-500');
907
- document.getElementById('step2Indicator').classList.remove('bg-gray-800', 'text-gray-400');
908
- document.getElementById('step2Indicator').classList.add('bg-blue-500', 'text-white');
909
- }
910
-
911
- function prevKYCStep() {
912
- document.getElementById('kycStep2').classList.add('hidden');
913
- document.getElementById('kycStep1').classList.remove('hidden');
914
- document.getElementById('step1Indicator').classList.remove('bg-green-500');
915
- document.getElementById('step1Indicator').classList.add('bg-blue-500');
916
- document.getElementById('step2Indicator').classList.remove('bg-blue-500', 'text-white');
917
- document.getElementById('step2Indicator').classList.add('bg-gray-800', 'text-gray-400');
918
- }
919
-
920
- // KYC File Upload
921
- function initKYCUpload() {
922
- const frontUpload = document.getElementById('frontUpload');
923
- const backUpload = document.getElementById('backUpload');
924
 
925
- ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
926
- frontUpload.addEventListener(eventName, preventDefaults, false);
927
- backUpload.addEventListener(eventName, preventDefaults, false);
928
- });
929
 
930
- ['dragenter', 'dragover'].forEach(eventName => {
931
- frontUpload.addEventListener(eventName, highlight, false);
932
- backUpload.addEventListener(eventName, highlight, false);
 
 
 
933
  });
934
 
935
- ['dragleave', 'drop'].forEach(eventName => {
936
- frontUpload.addEventListener(eventName, unhighlight, false);
937
- backUpload.addEventListener(eventName, unhighlight, false);
 
 
 
938
  });
939
 
940
- frontUpload.addEventListener('drop', handleDrop, false);
941
- backUpload.addEventListener('drop', handleDrop, false);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
942
 
943
- frontUpload.addEventListener('click', () => {
944
- // Simulate file input click
945
- const input = document.createElement('input');
946
- input.type = 'file';
947
- input.accept = 'image/*,.pdf';
948
- input.onchange = () => handleFiles(input.files, frontUpload);
949
- input.click();
950
- });
951
 
952
- backUpload.addEventListener('click', () => {
953
- // Simulate file input click
954
- const input = document.createElement('input');
955
- input.type = 'file';
956
- input.accept = 'image/*,.pdf';
957
- input.onchange = () => handleFiles(input.files, backUpload);
958
- input.click();
959
- });
960
- }
961
-
962
- function preventDefaults(e) {
963
- e.preventDefault();
964
- e.stopPropagation();
965
- }
966
-
967
- function highlight(e) {
968
- e.currentTarget.classList.add('active');
969
- }
970
-
971
- function unhighlight(e) {
972
- e.currentTarget.classList.remove('active');
973
- }
974
-
975
- function handleDrop(e) {
976
- const dt = e.dataTransfer;
977
- const files = dt.files;
978
- handleFiles(files, e.currentTarget);
979
- }
980
-
981
- function handleFiles(files, target) {
982
- if (files.length > 0) {
983
- const file = files[0];
984
- if (file.size > 5 * 1024 * 1024) {
985
- alert('File size exceeds 5MB limit');
986
  return;
987
  }
988
 
989
- // Update UI to show file is selected
990
- target.innerHTML = `
991
- <div class="flex flex-col items-center justify-center">
992
- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
993
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
994
- </svg>
995
- <p class="text-gray-300">${file.name}</p>
996
- <p class="text-xs text-gray-500 mt-1">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
997
- </div>
998
- `;
999
- }
1000
- }
1001
-
1002
- // Buy/Sell Tabs
1003
- function initBuySellTabs() {
1004
- const buyTabButton = document.getElementById('buyTabButton');
1005
- const sellTabButton = document.getElementById('sellTabButton');
1006
- const buyForm = document.getElementById('buyForm');
1007
- const sellForm = document.getElementById('sellForm');
1008
-
1009
- buyTabButton.addEventListener('click', () => {
1010
- buyTabButton.classList.add('border-blue-500');
1011
- sellTabButton.classList.remove('border-blue-500');
1012
- buyForm.classList.remove('hidden');
1013
- sellForm.classList.add('hidden');
1014
  });
1015
 
1016
- sellTabButton.addEventListener('click', () => {
1017
- sellTabButton.classList.add('border-blue-500');
1018
- buyTabButton.classList.remove('border-blue-500');
1019
- sellForm.classList.remove('hidden');
1020
- buyForm.classList.add('hidden');
1021
- });
1022
- }
1023
-
1024
- // Send/Receive Tabs
1025
- function initSendReceiveTabs() {
1026
- const sendTabButton = document.getElementById('sendTabButton');
1027
- const receiveTabButton = document.getElementById('receiveTabButton');
1028
- const sendForm = document.getElementById('sendForm');
1029
- const receiveForm = document.getElementById('receiveForm');
1030
-
1031
- sendTabButton.addEventListener('click', () => {
1032
- sendTabButton.classList.add('border-blue-500');
1033
- receiveTabButton.classList.remove('border-blue-500');
1034
- sendForm.classList.remove('hidden');
1035
- receiveForm.classList.add('hidden');
1036
- });
1037
-
1038
- receiveTabButton.addEventListener('click', () => {
1039
- receiveTabButton.classList.add('border-blue-500');
1040
- sendTabButton.classList.remove('border-blue-500');
1041
- receiveForm.classList.remove('hidden');
1042
- sendForm.classList.add('hidden');
 
 
 
 
 
1043
  });
1044
- }
1045
  </script>
1046
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dxlorhuggingface/mxp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1047
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>POKE: Bitcoin & Ethereum - Login</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
+ body {
12
+ font-family: 'Poppins', sans-serif;
13
+ background: linear-gradient(135deg, #00172D 0%, #000B18 100%);
14
+ min-height: 100vh;
15
+ overflow-x: hidden;
16
+ position: relative;
17
  }
18
 
19
+ .stars-bg {
20
+ position: fixed;
21
+ top: 0;
22
+ left: 0;
23
+ width: 100%;
24
+ height: 100%;
25
+ z-index: -1;
26
+ overflow: hidden;
27
  }
28
 
29
+ .star {
30
+ position: absolute;
31
+ background-color: white;
32
+ border-radius: 50%;
33
+ animation: twinkle var(--duration) infinite ease-in-out;
34
+ opacity: 0;
35
+ }
36
+
37
+ @keyframes twinkle {
38
+ 0%, 100% { opacity: 0.2; }
39
+ 50% { opacity: 1; }
40
+ }
41
+
42
+ .auth-card {
43
+ background: rgba(15, 23, 42, 0.8);
44
+ backdrop-filter: blur(10px);
45
+ border: 1px solid rgba(255, 255, 255, 0.1);
46
+ box-shadow: 0 10px 30px rgba(0, 174, 239, 0.2);
47
+ }
48
+
49
+ .tab-underline {
50
+ position: relative;
51
+ }
52
+
53
+ .tab-underline::after {
54
+ content: '';
55
+ position: absolute;
56
+ bottom: -2px;
57
+ left: 0;
58
+ width: 100%;
59
+ height: 2px;
60
+ background: #00AEEF;
61
+ transform: scaleX(0);
62
+ transition: transform 0.3s ease;
63
  }
64
 
65
+ .tab-underline:hover::after {
66
+ transform: scaleX(1);
67
  }
68
 
69
+ .tab-underline.active::after {
70
+ transform: scaleX(1);
71
  }
72
 
73
+ .input-field {
74
+ background: rgba(255, 255, 255, 0.05);
75
+ border: 1px solid rgba(255, 255, 255, 0.1);
76
+ transition: all 0.3s ease;
77
  }
78
 
79
+ .input-field:focus {
80
+ border-color: #00AEEF;
81
+ box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
82
  }
83
 
84
+ .btn-primary {
85
+ background: linear-gradient(135deg, #00AEEF 0%, #0082C9 100%);
86
+ transition: all 0.3s ease;
87
  }
88
 
89
+ .btn-primary:hover {
90
+ transform: translateY(-2px);
91
+ box-shadow: 0 10px 20px rgba(0, 174, 239, 0.3);
92
  }
93
 
94
+ .btn-secondary {
95
+ background: rgba(255, 255, 255, 0.05);
96
+ border: 1px solid rgba(255, 255, 255, 0.1);
97
  transition: all 0.3s ease;
98
  }
99
 
100
+ .btn-secondary:hover {
101
+ background: rgba(255, 255, 255, 0.1);
102
+ transform: translateY(-2px);
103
  }
104
 
105
+ .flip-container {
106
+ perspective: 1000px;
 
107
  }
108
 
109
+ .flipper {
110
+ transition: 0.6s;
111
+ transform-style: preserve-3d;
112
  position: relative;
113
  }
114
 
115
+ .front, .back {
116
+ backface-visibility: hidden;
117
  position: absolute;
118
+ top: 0;
119
+ left: 0;
120
+ width: 100%;
 
 
 
121
  }
122
 
123
+ .front {
124
+ z-index: 2;
125
+ transform: rotateY(0deg);
126
  }
127
 
128
+ .back {
129
+ transform: rotateY(180deg);
130
  }
131
 
132
+ .flipped {
133
+ transform: rotateY(180deg);
 
134
  }
135
 
136
+ .shake {
137
+ animation: shake 0.5s;
138
  }
139
 
140
+ @keyframes shake {
141
+ 0%, 100% { transform: translateX(0); }
142
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
143
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
144
+ }
145
+
146
+ .success {
147
+ animation: success 1.5s;
148
+ }
149
+
150
+ @keyframes success {
151
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 159, 0); }
152
+ 50% { box-shadow: 0 0 20px 5px rgba(0, 255, 159, 0.5); }
153
  }
154
  </style>
155
  </head>
156
+ <body class="text-white">
157
+ <!-- Star Background -->
158
+ <div class="stars-bg" id="stars-bg"></div>
159
+
160
+ <!-- Main Content -->
161
+ <div class="container mx-auto px-4 py-12 flex items-center justify-center min-h-screen">
162
+ <div class="w-full max-w-md">
163
+ <!-- Logo -->
164
+ <div class="text-center mb-8">
165
+ <div class="text-4xl font-bold mb-2">
166
+ <span class="text-[#00AEEF]">POKE</span>
167
+ <span class="text-[#00FF9F]">:</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
+ <div class="text-lg text-gray-400">Bitcoin & Ethereum</div>
170
+ <div class="text-sm text-gray-500 mt-1">Fast. Fair. Secure.</div>
 
 
 
171
  </div>
172
+
173
+ <!-- Auth Card -->
174
+ <div class="auth-card rounded-2xl p-8 relative overflow-hidden">
175
+ <!-- Tabs -->
176
+ <div class="flex justify-center space-x-8 mb-8">
177
+ <button id="login-tab" class="tab-underline active font-medium text-lg px-2 py-1 focus:outline-none">
178
+ Login
179
+ </button>
180
+ <button id="signup-tab" class="tab-underline font-medium text-lg px-2 py-1 focus:outline-none">
181
+ Sign Up
182
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
  </div>
184
+
185
+ <!-- Flip Container -->
186
+ <div class="flip-container">
187
+ <div class="flipper" id="flipper">
188
+ <!-- Login Form (Front) -->
189
+ <div class="front">
190
+ <form id="login-form" class="space-y-6">
191
+ <div>
192
+ <label for="login-email" class="block text-sm font-medium text-gray-400 mb-1">Email</label>
193
+ <input type="email" id="login-email" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" required>
194
+ </div>
195
+
196
+ <div class="relative">
197
+ <label for="login-password" class="block text-sm font-medium text-gray-400 mb-1">Password</label>
198
+ <input type="password" id="login-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none pr-10" required>
199
+ <button type="button" class="absolute right-3 bottom-3 text-gray-500 hover:text-gray-300 focus:outline-none" id="toggle-login-password">
200
+ <i class="far fa-eye"></i>
201
+ </button>
202
+ </div>
203
+
204
+ <div class="flex justify-between items-center">
205
+ <div class="flex items-center">
206
+ <input type="checkbox" id="remember-me" class="rounded bg-gray-700 border-gray-600 focus:ring-[#00AEEF]">
207
+ <label for="remember-me" class="ml-2 text-sm text-gray-400">Remember me</label>
208
+ </div>
209
+ <a href="#" class="text-sm text-[#00AEEF] hover:text-[#00FF9F]">Forgot password?</a>
210
+ </div>
211
+
212
+ <button type="submit" class="w-full py-3 px-4 rounded-lg btn-primary font-medium focus:outline-none">
213
+ Login
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  </button>
215
+
216
+ <div class="relative flex items-center justify-center my-6">
217
+ <div class="flex-grow border-t border-gray-700"></div>
218
+ <span class="flex-shrink mx-4 text-gray-500 text-sm">OR</span>
219
+ <div class="flex-grow border-t border-gray-700"></div>
220
+ </div>
221
+
222
+ <button type="button" class="w-full py-3 px-4 rounded-lg btn-secondary font-medium flex items-center justify-center space-x-2">
223
+ <i class="fab fa-google text-red-500"></i>
224
+ <span>Continue with Google</span>
225
  </button>
226
+ </form>
227
  </div>
228
+
229
+ <!-- Signup Form (Back) -->
230
+ <div class="back">
231
+ <form id="signup-form" class="space-y-6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  <div>
233
+ <label for="signup-name" class="block text-sm font-medium text-gray-400 mb-1">Full Name</label>
234
+ <input type="text" id="signup-name" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" required>
235
  </div>
236
+
237
  <div>
238
+ <label for="signup-email" class="block text-sm font-medium text-gray-400 mb-1">Email</label>
239
+ <input type="email" id="signup-email" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" required>
240
+ </div>
241
+
242
+ <div class="relative">
243
+ <label for="signup-password" class="block text-sm font-medium text-gray-400 mb-1">Password</label>
244
+ <input type="password" id="signup-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none pr-10" required>
245
+ <button type="button" class="absolute right-3 bottom-3 text-gray-500 hover:text-gray-300 focus:outline-none" id="toggle-signup-password">
246
+ <i class="far fa-eye"></i>
247
+ </button>
248
+ </div>
249
+
250
+ <div class="relative">
251
+ <label for="signup-confirm-password" class="block text-sm font-medium text-gray-400 mb-1">Confirm Password</label>
252
+ <input type="password" id="signup-confirm-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none pr-10" required>
253
+ <button type="button" class="absolute right-3 bottom-3 text-gray-500 hover:text-gray-300 focus:outline-none" id="toggle-signup-confirm-password">
254
+ <i class="far fa-eye"></i>
255
+ </button>
256
+ </div>
257
+
258
+ <div class="flex items-center">
259
+ <input type="checkbox" id="terms" class="rounded bg-gray-700 border-gray-600 focus:ring-[#00AEEF]" required>
260
+ <label for="terms" class="ml-2 text-sm text-gray-400">
261
+ I agree to the <a href="#" class="text-[#00AEEF] hover:text-[#00FF9F]">Terms of Service</a> and <a href="#" class="text-[#00AEEF] hover:text-[#00FF9F]">Privacy Policy</a>
262
+ </label>
263
+ </div>
264
+
265
+ <button type="submit" class="w-full py-3 px-4 rounded-lg btn-primary font-medium focus:outline-none">
266
+ Create Account
267
+ </button>
268
+
269
+ <div class="relative flex items-center justify-center my-6">
270
+ <div class="flex-grow border-t border-gray-700"></div>
271
+ <span class="flex-shrink mx-4 text-gray-500 text-sm">OR</span>
272
+ <div class="flex-grow border-t border-gray-700"></div>
273
+ </div>
274
+
275
+ <button type="button" class="w-full py-3 px-4 rounded-lg btn-secondary font-medium flex items-center justify-center space-x-2">
276
+ <i class="fab fa-google text-red-500"></i>
277
+ <span>Continue with Google</span>
278
+ </button>
279
+ </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
280
  </div>
281
  </div>
282
  </div>
283
+ </div>
284
+
285
+ <div class="text-center mt-6 text-gray-500 text-sm">
286
+ © 2023 POKE Finance. All rights reserved.
287
+ </div>
288
  </div>
289
  </div>
290
 
291
  <script>
 
292
  document.addEventListener('DOMContentLoaded', function() {
293
+ // Create stars
294
+ const starsBg = document.getElementById('stars-bg');
295
+ for (let i = 0; i < 100; i++) {
296
+ const star = document.createElement('div');
297
+ star.classList.add('star');
298
+
299
+ // Random size between 1px and 3px
300
+ const size = Math.random() * 2 + 1;
301
+ star.style.width = `${size}px`;
302
+ star.style.height = `${size}px`;
303
+
304
+ // Random position
305
+ star.style.left = `${Math.random() * 100}%`;
306
+ star.style.top = `${Math.random() * 100}%`;
307
+
308
+ // Random animation duration between 2s and 5s
309
+ const duration = Math.random() * 3 + 2;
310
+ star.style.setProperty('--duration', `${duration}s`);
311
+
312
+ starsBg.appendChild(star);
313
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
314
 
315
+ // Tab switching
316
+ const loginTab = document.getElementById('login-tab');
317
+ const signupTab = document.getElementById('signup-tab');
318
+ const flipper = document.getElementById('flipper');
319
 
320
+ loginTab.addEventListener('click', function() {
321
+ if (flipper.classList.contains('flipped')) {
322
+ flipper.classList.remove('flipped');
323
+ loginTab.classList.add('active');
324
+ signupTab.classList.remove('active');
325
+ }
326
  });
327
 
328
+ signupTab.addEventListener('click', function() {
329
+ if (!flipper.classList.contains('flipped')) {
330
+ flipper.classList.add('flipped');
331
+ signupTab.classList.add('active');
332
+ loginTab.classList.remove('active');
333
+ }
334
  });
335
 
336
+ // Password visibility toggle
337
+ function setupPasswordToggle(passwordId, toggleId) {
338
+ const passwordInput = document.getElementById(passwordId);
339
+ const toggleButton = document.getElementById(toggleId);
340
+
341
+ toggleButton.addEventListener('click', function() {
342
+ const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
343
+ passwordInput.setAttribute('type', type);
344
+
345
+ // Toggle eye icon
346
+ const icon = toggleButton.querySelector('i');
347
+ if (type === 'password') {
348
+ icon.classList.remove('fa-eye-slash');
349
+ icon.classList.add('fa-eye');
350
+ } else {
351
+ icon.classList.remove('fa-eye');
352
+ icon.classList.add('fa-eye-slash');
353
+ }
354
+ });
355
+ }
356
 
357
+ setupPasswordToggle('login-password', 'toggle-login-password');
358
+ setupPasswordToggle('signup-password', 'toggle-signup-password');
359
+ setupPasswordToggle('signup-confirm-password', 'toggle-signup-confirm-password');
 
 
 
 
 
360
 
361
+ // Form validation and submission
362
+ document.getElementById('login-form').addEventListener('submit', function(e) {
363
+ e.preventDefault();
364
+
365
+ const email = document.getElementById('login-email').value;
366
+ const password = document.getElementById('login-password').value;
367
+
368
+ // Simple validation
369
+ if (!email || !password) {
370
+ this.classList.add('shake');
371
+ setTimeout(() => this.classList.remove('shake'), 500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
372
  return;
373
  }
374
 
375
+ // Simulate successful login
376
+ this.classList.add('success');
377
+ setTimeout(() => {
378
+ this.classList.remove('success');
379
+ alert('Login successful!');
380
+ }, 1500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
381
  });
382
 
383
+ document.getElementById('signup-form').addEventListener('submit', function(e) {
384
+ e.preventDefault();
385
+
386
+ const name = document.getElementById('signup-name').value;
387
+ const email = document.getElementById('signup-email').value;
388
+ const password = document.getElementById('signup-password').value;
389
+ const confirmPassword = document.getElementById('signup-confirm-password').value;
390
+ const terms = document.getElementById('terms').checked;
391
+
392
+ // Simple validation
393
+ if (!name || !email || !password || !confirmPassword || !terms) {
394
+ this.classList.add('shake');
395
+ setTimeout(() => this.classList.remove('shake'), 500);
396
+ return;
397
+ }
398
+
399
+ if (password !== confirmPassword) {
400
+ this.classList.add('shake');
401
+ setTimeout(() => this.classList.remove('shake'), 500);
402
+ alert('Passwords do not match!');
403
+ return;
404
+ }
405
+
406
+ // Simulate successful signup
407
+ this.classList.add('success');
408
+ setTimeout(() => {
409
+ this.classList.remove('success');
410
+ alert('Account created successfully!');
411
+ flipper.classList.remove('flipped');
412
+ loginTab.classList.add('active');
413
+ signupTab.classList.remove('active');
414
+ }, 1500);
415
  });
416
+ });
417
  </script>
418
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dxlorhuggingface/mxp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
419
  </html>