Hugging Face's logo

Spaces:
dxlorhuggingface
/
mxp
Running

App Files Community
dxlorhuggingface commited on
Commit
fd124c4
·
verified ·
1 Parent(s): 3c1b18a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +596 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mxp
3
- emoji: 🐢
4
- colorFrom: blue
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mxp
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,596 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>MXPay Crypto Exchange</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom styles */
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
13
+ }
14
+ .kyc-step {
15
+ display: none;
16
+ }
17
+ .kyc-step.active {
18
+ display: block;
19
+ animation: fadeIn 0.5s ease-in-out;
20
+ }
21
+ @keyframes fadeIn {
22
+ from { opacity: 0; transform: translateY(10px); }
23
+ to { opacity: 1; transform: translateY(0); }
24
+ }
25
+ .file-upload {
26
+ border: 2px dashed #cbd5e0;
27
+ transition: all 0.3s ease;
28
+ }
29
+ .file-upload:hover {
30
+ border-color: #3b82f6;
31
+ }
32
+ .file-upload.dragover {
33
+ border-color: #3b82f6;
34
+ background-color: #ebf5ff;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-100 font-sans">
39
+ <!-- Header -->
40
+ <header class="gradient-bg text-white shadow-lg">
41
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
42
+ <div class="flex items-center space-x-2">
43
+ <i class="fas fa-coins text-2xl text-yellow-400"></i>
44
+ <h1 class="text-2xl font-bold">MXPay</h1>
45
+ </div>
46
+ <nav class="hidden md:flex space-x-6">
47
+ <a href="#" class="hover:text-blue-200 transition">Markets</a>
48
+ <a href="#" class="hover:text-blue-200 transition">Trade</a>
49
+ <a href="#" class="hover:text-blue-200 transition">Futures</a>
50
+ <a href="#" class="hover:text-blue-200 transition">Earn</a>
51
+ <a href="#" class="hover:text-blue-200 transition">Wallet</a>
52
+ </nav>
53
+ <div class="flex items-center space-x-4">
54
+ <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition">Login</button>
55
+ <button class="px-4 py-2 bg-white text-blue-600 hover:bg-gray-100 rounded-md transition">Register</button>
56
+ <button class="md:hidden text-xl">
57
+ <i class="fas fa-bars"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Main Content -->
64
+ <main class="container mx-auto px-4 py-8">
65
+ <!-- Dashboard Section -->
66
+ <section class="bg-white rounded-lg shadow-md p-6 mb-8">
67
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
68
+ <div>
69
+ <h2 class="text-2xl font-bold text-gray-800">Welcome back, <span id="username" class="text-blue-600">User</span></h2>
70
+ <p class="text-gray-600">Your crypto journey starts here</p>
71
+ </div>
72
+ <div class="mt-4 md:mt-0 flex space-x-4">
73
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
74
+ <i class="fas fa-wallet mr-2"></i> Deposit
75
+ </button>
76
+ <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition">
77
+ <i class="fas fa-exchange-alt mr-2"></i> Trade
78
+ </button>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Balance Cards -->
83
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
84
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
85
+ <div class="flex justify-between items-center">
86
+ <div>
87
+ <p class="text-gray-600">Total Balance</p>
88
+ <h3 class="text-2xl font-bold">$0.00</h3>
89
+ </div>
90
+ <i class="fas fa-wallet text-3xl text-blue-500"></i>
91
+ </div>
92
+ </div>
93
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
94
+ <div class="flex justify-between items-center">
95
+ <div>
96
+ <p class="text-gray-600">Available</p>
97
+ <h3 class="text-2xl font-bold">$0.00</h3>
98
+ </div>
99
+ <i class="fas fa-coins text-3xl text-green-500"></i>
100
+ </div>
101
+ </div>
102
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
103
+ <div class="flex justify-between items-center">
104
+ <div>
105
+ <p class="text-gray-600">In Orders</p>
106
+ <h3 class="text-2xl font-bold">$0.00</h3>
107
+ </div>
108
+ <i class="fas fa-exchange-alt text-3xl text-purple-500"></i>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Tabs Navigation -->
114
+ <div class="border-b border-gray-200 mb-6">
115
+ <nav class="flex space-x-8">
116
+ <button data-tab="assets" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-blue-500 text-blue-600">Assets</button>
117
+ <button data-tab="transactions" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Transactions</button>
118
+ <button data-tab="history" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">History</button>
119
+ <button data-tab="kyc" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">KYC Verification</button>
120
+ </nav>
121
+ </div>
122
+
123
+ <!-- Tab Contents -->
124
+ <div id="assets" class="tab-content">
125
+ <div class="overflow-x-auto">
126
+ <table class="min-w-full divide-y divide-gray-200">
127
+ <thead class="bg-gray-50">
128
+ <tr>
129
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
130
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
131
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
132
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
133
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
134
+ </tr>
135
+ </thead>
136
+ <tbody class="bg-white divide-y divide-gray-200">
137
+ <tr>
138
+ <td class="px-6 py-4 whitespace-nowrap">
139
+ <div class="flex items-center">
140
+ <div class="flex-shrink-0 h-10 w-10">
141
+ <i class="fab fa-bitcoin text-yellow-500 text-2xl"></i>
142
+ </div>
143
+ <div class="ml-4">
144
+ <div class="text-sm font-medium text-gray-900">Bitcoin</div>
145
+ <div class="text-sm text-gray-500">BTC</div>
146
+ </div>
147
+ </div>
148
+ </td>
149
+ <td class="px-6 py-4 whitespace-nowrap">
150
+ <div class="text-sm text-gray-900">0.00000000</div>
151
+ </td>
152
+ <td class="px-6 py-4 whitespace-nowrap">
153
+ <div class="text-sm text-gray-900">$0.00</div>
154
+ </td>
155
+ <td class="px-6 py-4 whitespace-nowrap">
156
+ <div class="text-sm text-gray-900">$0.00</div>
157
+ </td>
158
+ <td class="px-6 py-4 whitespace-nowrap">
159
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">Trade</button>
160
+ </td>
161
+ </tr>
162
+ <tr>
163
+ <td class="px-6 py-4 whitespace-nowrap">
164
+ <div class="flex items-center">
165
+ <div class="flex-shrink-0 h-10 w-10">
166
+ <i class="fab fa-ethereum text-purple-500 text-2xl"></i>
167
+ </div>
168
+ <div class="ml-4">
169
+ <div class="text-sm font-medium text-gray-900">Ethereum</div>
170
+ <div class="text-sm text-gray-500">ETH</div>
171
+ </div>
172
+ </div>
173
+ </td>
174
+ <td class="px-6 py-4 whitespace-nowrap">
175
+ <div class="text-sm text-gray-900">0.00000000</div>
176
+ </td>
177
+ <td class="px-6 py-4 whitespace-nowrap">
178
+ <div class="text-sm text-gray-900">$0.00</div>
179
+ </td>
180
+ <td class="px-6 py-4 whitespace-nowrap">
181
+ <div class="text-sm text-gray-900">$0.00</div>
182
+ </td>
183
+ <td class="px-6 py-4 whitespace-nowrap">
184
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">Trade</button>
185
+ </td>
186
+ </tr>
187
+ </tbody>
188
+ </table>
189
+ </div>
190
+ </div>
191
+
192
+ <div id="transactions" class="tab-content hidden">
193
+ <div class="text-center py-12">
194
+ <i class="fas fa-exchange-alt text-4xl text-gray-300 mb-4"></i>
195
+ <h3 class="text-lg font-medium text-gray-900">No transactions yet</h3>
196
+ <p class="mt-1 text-sm text-gray-500">Get started by making your first deposit or trade.</p>
197
+ </div>
198
+ </div>
199
+
200
+ <div id="history" class="tab-content hidden">
201
+ <div class="text-center py-12">
202
+ <i class="fas fa-history text-4xl text-gray-300 mb-4"></i>
203
+ <h3 class="text-lg font-medium text-gray-900">No history available</h3>
204
+ <p class="mt-1 text-sm text-gray-500">Your trading history will appear here.</p>
205
+ </div>
206
+ </div>
207
+
208
+ <div id="kyc" class="tab-content hidden">
209
+ <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
210
+ <div class="flex">
211
+ <div class="flex-shrink-0">
212
+ <i class="fas fa-info-circle text-blue-400"></i>
213
+ </div>
214
+ <div class="ml-3">
215
+ <p class="text-sm text-blue-700">
216
+ Complete KYC verification to unlock full account features and higher withdrawal limits.
217
+ </p>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- KYC Steps -->
223
+ <div class="kyc-steps">
224
+ <!-- Step 1 -->
225
+ <div id="kyc-step-1" class="kyc-step active">
226
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Personal Information</h3>
227
+ <form class="space-y-4">
228
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
229
+ <div>
230
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label>
231
+ <input type="text" id="first-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
232
+ </div>
233
+ <div>
234
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label>
235
+ <input type="text" id="last-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
236
+ </div>
237
+ </div>
238
+ <div>
239
+ <label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
240
+ <input type="date" id="dob" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
241
+ </div>
242
+ <div>
243
+ <label for="country" class="block text-sm font-medium text-gray-700">Country</label>
244
+ <select id="country" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
245
+ <option>Select Country</option>
246
+ <option>United States</option>
247
+ <option>United Kingdom</option>
248
+ <option>Canada</option>
249
+ <option>Australia</option>
250
+ </select>
251
+ </div>
252
+ <div class="flex justify-end">
253
+ <button type="button" class="next-step px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition" data-next="kyc-step-2">Continue</button>
254
+ </div>
255
+ </form>
256
+ </div>
257
+
258
+ <!-- Step 2 -->
259
+ <div id="kyc-step-2" class="kyc-step">
260
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Address Verification</h3>
261
+ <form class="space-y-4">
262
+ <div>
263
+ <label for="address" class="block text-sm font-medium text-gray-700">Street Address</label>
264
+ <input type="text" id="address" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
265
+ </div>
266
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
267
+ <div>
268
+ <label for="city" class="block text-sm font-medium text-gray-700">City</label>
269
+ <input type="text" id="city" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
270
+ </div>
271
+ <div>
272
+ <label for="state" class="block text-sm font-medium text-gray-700">State/Province</label>
273
+ <input type="text" id="state" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
274
+ </div>
275
+ <div>
276
+ <label for="zip" class="block text-sm font-medium text-gray-700">ZIP/Postal Code</label>
277
+ <input type="text" id="zip" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
278
+ </div>
279
+ </div>
280
+ <div class="flex justify-between">
281
+ <button type="button" class="prev-step px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition" data-prev="kyc-step-1">Back</button>
282
+ <button type="button" class="next-step px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition" data-next="kyc-step-3">Continue</button>
283
+ </div>
284
+ </form>
285
+ </div>
286
+
287
+ <!-- Step 3 -->
288
+ <div id="kyc-step-3" class="kyc-step">
289
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Identity Verification</h3>
290
+ <p class="text-sm text-gray-500 mb-6">To comply with regulations, we require identity verification. Please upload a clear photo of your government-issued ID (Passport, Driver's License, or National ID).</p>
291
+
292
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
293
+ <div>
294
+ <label class="block text-sm font-medium text-gray-700 mb-2">Front of ID</label>
295
+ <div class="file-upload relative rounded-lg p-8 text-center cursor-pointer" id="front-upload">
296
+ <input type="file" id="front-id" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/*">
297
+ <i class="fas fa-camera text-4xl text-gray-400 mb-2"></i>
298
+ <p class="text-sm text-gray-500">Drag & drop your file here or click to browse</p>
299
+ <p class="text-xs text-gray-400 mt-2">JPG, PNG or PDF (max 5MB)</p>
300
+ </div>
301
+ <div id="front-preview" class="mt-2 hidden">
302
+ <img id="front-preview-img" src="#" alt="Front ID Preview" class="max-h-40 mx-auto">
303
+ <button id="remove-front" class="mt-2 text-red-500 text-sm">Remove</button>
304
+ </div>
305
+ </div>
306
+ <div>
307
+ <label class="block text-sm font-medium text-gray-700 mb-2">Back of ID</label>
308
+ <div class="file-upload relative rounded-lg p-8 text-center cursor-pointer" id="back-upload">
309
+ <input type="file" id="back-id" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/*">
310
+ <i class="fas fa-camera text-4xl text-gray-400 mb-2"></i>
311
+ <p class="text-sm text-gray-500">Drag & drop your file here or click to browse</p>
312
+ <p class="text-xs text-gray-400 mt-2">JPG, PNG or PDF (max 5MB)</p>
313
+ </div>
314
+ <div id="back-preview" class="mt-2 hidden">
315
+ <img id="back-preview-img" src="#" alt="Back ID Preview" class="max-h-40 mx-auto">
316
+ <button id="remove-back" class="mt-2 text-red-500 text-sm">Remove</button>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="mt-8">
322
+ <label class="block text-sm font-medium text-gray-700 mb-2">Selfie with ID</label>
323
+ <p class="text-sm text-gray-500 mb-4">Please take a selfie while holding your ID next to your face. Make sure all details are clearly visible.</p>
324
+ <div class="file-upload relative rounded-lg p-8 text-center cursor-pointer" id="selfie-upload">
325
+ <input type="file" id="selfie" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/*">
326
+ <i class="fas fa-user-circle text-4xl text-gray-400 mb-2"></i>
327
+ <p class="text-sm text-gray-500">Drag & drop your file here or click to browse</p>
328
+ <p class="text-xs text-gray-400 mt-2">JPG or PNG (max 5MB)</p>
329
+ </div>
330
+ <div id="selfie-preview" class="mt-2 hidden">
331
+ <img id="selfie-preview-img" src="#" alt="Selfie Preview" class="max-h-40 mx-auto">
332
+ <button id="remove-selfie" class="mt-2 text-red-500 text-sm">Remove</button>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="flex justify-between mt-8">
337
+ <button type="button" class="prev-step px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition" data-prev="kyc-step-2">Back</button>
338
+ <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition" id="submit-kyc">Submit Verification</button>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Step 4 (Success) -->
343
+ <div id="kyc-step-4" class="kyc-step">
344
+ <div class="text-center py-12">
345
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
346
+ <i class="fas fa-check text-green-600"></i>
347
+ </div>
348
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Verification Submitted!</h3>
349
+ <p class="mt-2 text-sm text-gray-500">Your KYC documents have been received. Our team will review them shortly. You'll receive a notification once your verification is complete.</p>
350
+ <div class="mt-6">
351
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Back to Dashboard</button>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </section>
358
+ </main>
359
+
360
+ <!-- Bonus Notification Modal -->
361
+ <div id="bonus-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
362
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
363
+ <div class="p-6">
364
+ <div class="flex justify-between items-start">
365
+ <div>
366
+ <h3 class="text-lg font-bold text-gray-900">Congratulations!</h3>
367
+ <p class="mt-1 text-sm text-gray-500">You've won a $25 bonus!</p>
368
+ </div>
369
+ <button id="close-modal" class="text-gray-400 hover:text-gray-500">
370
+ <i class="fas fa-times"></i>
371
+ </button>
372
+ </div>
373
+ <div class="mt-4">
374
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
375
+ <div class="flex">
376
+ <div class="flex-shrink-0">
377
+ <i class="fas fa-exclamation-circle text-yellow-400"></i>
378
+ </div>
379
+ <div class="ml-3">
380
+ <p class="text-sm text-yellow-700">
381
+ To claim your bonus, please complete KYC verification as required by crypto regulations.
382
+ </p>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ <div class="mt-6 flex justify-end space-x-3">
388
+ <button id="cancel-bonus" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">Maybe Later</button>
389
+ <button id="start-kyc" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Start KYC</button>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Footer -->
396
+ <footer class="bg-gray-800 text-white py-8">
397
+ <div class="container mx-auto px-4">
398
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
399
+ <div>
400
+ <h3 class="text-lg font-semibold mb-4">MXPay</h3>
401
+ <p class="text-gray-400 text-sm">The world's leading cryptocurrency exchange</p>
402
+ </div>
403
+ <div>
404
+ <h3 class="text-lg font-semibold mb-4">Products</h3>
405
+ <ul class="space-y-2">
406
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Exchange</a></li>
407
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Futures</a></li>
408
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Earn</a></li>
409
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Wallet</a></li>
410
+ </ul>
411
+ </div>
412
+ <div>
413
+ <h3 class="text-lg font-semibold mb-4">Services</h3>
414
+ <ul class="space-y-2">
415
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">API</a></li>
416
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Trading Rules</a></li>
417
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Fees</a></li>
418
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Status</a></li>
419
+ </ul>
420
+ </div>
421
+ <div>
422
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
423
+ <ul class="space-y-2">
424
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Help Center</a></li>
425
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact Us</a></li>
426
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Legal</a></li>
427
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li>
428
+ </ul>
429
+ </div>
430
+ </div>
431
+ <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-gray-400">
432
+ <p>© 2023 MXPay. All rights reserved.</p>
433
+ </div>
434
+ </div>
435
+ </footer>
436
+
437
+ <script>
438
+ // Tab switching functionality
439
+ document.addEventListener('DOMContentLoaded', function() {
440
+ // Tab switching
441
+ const tabButtons = document.querySelectorAll('.tab-button');
442
+ const tabContents = document.querySelectorAll('.tab-content');
443
+
444
+ tabButtons.forEach(button => {
445
+ button.addEventListener('click', () => {
446
+ // Remove active class from all buttons and contents
447
+ tabButtons.forEach(btn => {
448
+ btn.classList.remove('border-blue-500', 'text-blue-600');
449
+ btn.classList.add('border-transparent', 'text-gray-500');
450
+ });
451
+
452
+ tabContents.forEach(content => {
453
+ content.classList.add('hidden');
454
+ });
455
+
456
+ // Add active class to clicked button
457
+ button.classList.remove('border-transparent', 'text-gray-500');
458
+ button.classList.add('border-blue-500', 'text-blue-600');
459
+
460
+ // Show corresponding content
461
+ const tabId = button.getAttribute('data-tab');
462
+ document.getElementById(tabId).classList.remove('hidden');
463
+ });
464
+ });
465
+
466
+ // KYC Steps navigation
467
+ const nextButtons = document.querySelectorAll('.next-step');
468
+ const prevButtons = document.querySelectorAll('.prev-step');
469
+ const kycSteps = document.querySelectorAll('.kyc-step');
470
+
471
+ nextButtons.forEach(button => {
472
+ button.addEventListener('click', () => {
473
+ const nextStepId = button.getAttribute('data-next');
474
+ const currentStep = button.closest('.kyc-step');
475
+
476
+ currentStep.classList.remove('active');
477
+ document.getElementById(nextStepId).classList.add('active');
478
+ });
479
+ });
480
+
481
+ prevButtons.forEach(button => {
482
+ button.addEventListener('click', () => {
483
+ const prevStepId = button.getAttribute('data-prev');
484
+ const currentStep = button.closest('.kyc-step');
485
+
486
+ currentStep.classList.remove('active');
487
+ document.getElementById(prevStepId).classList.add('active');
488
+ });
489
+ });
490
+
491
+ // File upload previews
492
+ function setupFileUpload(inputId, uploadDivId, previewDivId, previewImgId, removeBtnId) {
493
+ const input = document.getElementById(inputId);
494
+ const uploadDiv = document.getElementById(uploadDivId);
495
+ const previewDiv = document.getElementById(previewDivId);
496
+ const previewImg = document.getElementById(previewImgId);
497
+ const removeBtn = document.getElementById(removeBtnId);
498
+
499
+ // Handle drag and drop
500
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
501
+ uploadDiv.addEventListener(eventName, preventDefaults, false);
502
+ });
503
+
504
+ function preventDefaults(e) {
505
+ e.preventDefault();
506
+ e.stopPropagation();
507
+ }
508
+
509
+ ['dragenter', 'dragover'].forEach(eventName => {
510
+ uploadDiv.addEventListener(eventName, highlight, false);
511
+ });
512
+
513
+ ['dragleave', 'drop'].forEach(eventName => {
514
+ uploadDiv.addEventListener(eventName, unhighlight, false);
515
+ });
516
+
517
+ function highlight() {
518
+ uploadDiv.classList.add('dragover');
519
+ }
520
+
521
+ function unhighlight() {
522
+ uploadDiv.classList.remove('dragover');
523
+ }
524
+
525
+ // Handle file selection
526
+ input.addEventListener('change', function() {
527
+ if (this.files && this.files[0]) {
528
+ const reader = new FileReader();
529
+
530
+ reader.onload = function(e) {
531
+ previewImg.src = e.target.result;
532
+ previewDiv.classList.remove('hidden');
533
+ uploadDiv.classList.add('hidden');
534
+ }
535
+
536
+ reader.readAsDataURL(this.files[0]);
537
+ }
538
+ });
539
+
540
+ // Handle remove button
541
+ removeBtn.addEventListener('click', function() {
542
+ input.value = '';
543
+ previewDiv.classList.add('hidden');
544
+ uploadDiv.classList.remove('hidden');
545
+ });
546
+ }
547
+
548
+ // Set up file uploads
549
+ setupFileUpload('front-id', 'front-upload', 'front-preview', 'front-preview-img', 'remove-front');
550
+ setupFileUpload('back-id', 'back-upload', 'back-preview', 'back-preview-img', 'remove-back');
551
+ setupFileUpload('selfie', 'selfie-upload', 'selfie-preview', 'selfie-preview-img', 'remove-selfie');
552
+
553
+ // Submit KYC
554
+ document.getElementById('submit-kyc').addEventListener('click', function() {
555
+ // In a real app, you would submit the form data to the server here
556
+ // For this demo, we'll just show the success step
557
+ document.getElementById('kyc-step-3').classList.remove('active');
558
+ document.getElementById('kyc-step-4').classList.add('active');
559
+ });
560
+
561
+ // Show bonus modal on page load (simulating login)
562
+ setTimeout(() => {
563
+ document.getElementById('bonus-modal').classList.remove('hidden');
564
+ }, 1000);
565
+
566
+ // Close modal
567
+ document.getElementById('close-modal').addEventListener('click', function() {
568
+ document.getElementById('bonus-modal').classList.add('hidden');
569
+ });
570
+
571
+ document.getElementById('cancel-bonus').addEventListener('click', function() {
572
+ document.getElementById('bonus-modal').classList.add('hidden');
573
+ });
574
+
575
+ // Start KYC from modal
576
+ document.getElementById('start-kyc').addEventListener('click', function() {
577
+ document.getElementById('bonus-modal').classList.add('hidden');
578
+
579
+ // Switch to KYC tab
580
+ tabButtons.forEach(btn => {
581
+ btn.classList.remove('border-blue-500', 'text-blue-600');
582
+ btn.classList.add('border-transparent', 'text-gray-500');
583
+ });
584
+
585
+ tabContents.forEach(content => {
586
+ content.classList.add('hidden');
587
+ });
588
+
589
+ document.querySelector('[data-tab="kyc"]').classList.remove('border-transparent', 'text-gray-500');
590
+ document.querySelector('[data-tab="kyc"]').classList.add('border-blue-500', 'text-blue-600');
591
+ document.getElementById('kyc').classList.remove('hidden');
592
+ });
593
+ });
594
+ </script>
595
+ <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>
596
+ </html>