Hugging Face's logo

Spaces:
privateuserh
/
privdmi-vbeta1-01
Running

App Files Community
privateuserh commited on
Commit
38140c0
·
verified ·
1 Parent(s): b205b6c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +582 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privdmi Vbeta1 01
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: pink
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: privdmi-vbeta1-01
3
+ emoji: 🐳
4
+ colorFrom: gray
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,582 @@
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>DMIM Trading Dashboard | Bitcoin Cash Blockchain</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
+ .price-up {
11
+ color: #10b981;
12
+ animation: pulse-up 0.5s ease-in-out;
13
+ }
14
+ .price-down {
15
+ color: #ef4444;
16
+ animation: pulse-down 0.5s ease-in-out;
17
+ }
18
+ @keyframes pulse-up {
19
+ 0% { transform: scale(1); }
20
+ 50% { transform: scale(1.1); }
21
+ 100% { transform: scale(1); }
22
+ }
23
+ @keyframes pulse-down {
24
+ 0% { transform: scale(1); }
25
+ 50% { transform: scale(0.9); }
26
+ 100% { transform: scale(1); }
27
+ }
28
+ .chart-container {
29
+ height: 250px;
30
+ position: relative;
31
+ }
32
+ .chart-line {
33
+ position: absolute;
34
+ bottom: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ stroke-width: 2;
39
+ fill: none;
40
+ }
41
+ .institutional-panel {
42
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
43
+ border: 1px solid #334155;
44
+ }
45
+ .tokenomics-card {
46
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
47
+ border-left: 4px solid #8b5cf6;
48
+ }
49
+ .token-badge {
50
+ background-color: rgba(139, 92, 246, 0.1);
51
+ border: 1px solid rgba(139, 92, 246, 0.3);
52
+ }
53
+ .blink {
54
+ animation: blink-animation 1s steps(5, start) infinite;
55
+ }
56
+ @keyframes blink-animation {
57
+ to { opacity: 0.5; }
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
62
+ <div class="container mx-auto px-4 py-8">
63
+ <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
64
+ <div class="flex items-center">
65
+ <div class="relative">
66
+ <i class="fas fa-coins text-3xl text-purple-500 mr-3"></i>
67
+ <span class="absolute -top-1 -right-1 bg-purple-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center blink"></span>
68
+ </div>
69
+ <div>
70
+ <h1 class="text-2xl font-bold">DMIM Trading Dashboard</h1>
71
+ <div class="flex items-center mt-1 space-x-2">
72
+ <span class="token-badge px-2 py-1 rounded-md text-xs flex items-center">
73
+ <i class="fab fa-bitcoin text-orange-400 mr-1"></i>
74
+ Bitcoin Cash Blockchain
75
+ </span>
76
+ <span class="token-badge px-2 py-1 rounded-md text-xs">Fungible Token</span>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ <div class="flex flex-col md:flex-row items-start md:items-center space-y-2 md:space-y-0 md:space-x-4">
81
+ <div class="bg-gray-800 px-4 py-2 rounded-lg">
82
+ <span class="text-gray-400">Balance:</span>
83
+ <span class="font-bold ml-2" id="balance">1,250.00 DMIM</span>
84
+ </div>
85
+ <div class="bg-gray-800 px-4 py-2 rounded-lg">
86
+ <span class="text-gray-400">BCH Balance:</span>
87
+ <span class="font-bold ml-2">5.42 BCH</span>
88
+ </div>
89
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg transition flex items-center">
90
+ <i class="fas fa-wallet mr-2"></i>Wallet
91
+ </button>
92
+ </div>
93
+ </header>
94
+
95
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
96
+ <!-- Token Info -->
97
+ <div class="bg-gray-800 rounded-xl p-6">
98
+ <h2 class="text-xl font-bold mb-4 flex items-center">
99
+ <i class="fas fa-info-circle text-purple-400 mr-2"></i>
100
+ Token Information
101
+ </h2>
102
+ <div class="space-y-4">
103
+ <div>
104
+ <div class="text-gray-400 text-sm">Token Name</div>
105
+ <div class="text-lg font-bold">DMIM</div>
106
+ </div>
107
+ <div>
108
+ <div class="text-gray-400 text-sm">Token ID</div>
109
+ <div class="text-sm font-mono break-all">81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9</div>
110
+ </div>
111
+ <div>
112
+ <div class="text-gray-400 text-sm">Total Supply</div>
113
+ <div class="text-lg font-bold">1,000,000 DMIM</div>
114
+ </div>
115
+ <div>
116
+ <div class="text-gray-400 text-sm">Current Price</div>
117
+ <div class="text-2xl font-bold" id="current-price">0.052 BCH</div>
118
+ <div class="text-sm" id="price-change">+1.24% <i class="fas fa-arrow-up ml-1"></i></div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Market Data -->
124
+ <div class="bg-gray-800 rounded-xl p-6">
125
+ <div class="flex justify-between items-center mb-4">
126
+ <h2 class="text-xl font-bold flex items-center">
127
+ <i class="fas fa-chart-line text-purple-400 mr-2"></i>
128
+ Market Data
129
+ </h2>
130
+ <div class="flex space-x-2">
131
+ <select class="bg-gray-700 text-white rounded px-3 py-1 text-sm">
132
+ <option>1h</option>
133
+ <option>4h</option>
134
+ <option>1d</option>
135
+ <option>1w</option>
136
+ </select>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="chart-container mb-4">
141
+ <svg id="price-chart" width="100%" height="100%" viewBox="0 0 500 250" preserveAspectRatio="none">
142
+ <path class="chart-line" stroke="#8b5cf6" d="M0,250 L50,220 L100,240 L150,210 L200,230 L250,200 L300,220 L350,190 L400,180 L450,170 L500,160" />
143
+ </svg>
144
+ </div>
145
+
146
+ <div class="grid grid-cols-2 gap-4">
147
+ <div class="bg-gray-700 p-3 rounded-lg">
148
+ <div class="text-gray-400 text-sm">24h Volume</div>
149
+ <div class="text-lg font-bold">12,450 DMIM</div>
150
+ </div>
151
+ <div class="bg-gray-700 p-3 rounded-lg">
152
+ <div class="text-gray-400 text-sm">Liquidity</div>
153
+ <div class="text-lg font-bold">24,000 BCH</div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Tokenomics -->
159
+ <div class="tokenomics-card rounded-xl p-6">
160
+ <h2 class="text-xl font-bold mb-4 flex items-center">
161
+ <i class="fas fa-pie-chart text-purple-400 mr-2"></i>
162
+ Tokenomics
163
+ </h2>
164
+ <div class="flex items-center justify-center mb-4">
165
+ <div class="w-32 h-32 rounded-full border-4 border-purple-500 flex items-center justify-center">
166
+ <div class="text-center">
167
+ <div class="text-2xl font-bold">1M</div>
168
+ <div class="text-xs text-gray-400">Total Supply</div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ <div class="space-y-3">
173
+ <div class="flex justify-between">
174
+ <span class="text-gray-400">Circulating</span>
175
+ <span class="font-medium">650,000 DMIM (65%)</span>
176
+ </div>
177
+ <div class="flex justify-between">
178
+ <span class="text-gray-400">Reserves</span>
179
+ <span class="font-medium">200,000 DMIM (20%)</span>
180
+ </div>
181
+ <div class="flex justify-between">
182
+ <span class="text-gray-400">Team</span>
183
+ <span class="font-medium">100,000 DMIM (10%)</span>
184
+ </div>
185
+ <div class="flex justify-between">
186
+ <span class="text-gray-400">Ecosystem</span>
187
+ <span class="font-medium">50,000 DMIM (5%)</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
194
+ <!-- Trading Panel -->
195
+ <div class="bg-gray-800 rounded-xl p-6">
196
+ <h2 class="text-xl font-bold mb-4 flex items-center">
197
+ <i class="fas fa-exchange-alt text-purple-400 mr-2"></i>
198
+ Trading Panel
199
+ </h2>
200
+
201
+ <div class="mb-4">
202
+ <div class="flex justify-between mb-2">
203
+ <label class="text-gray-400">Amount (DMIM)</label>
204
+ <span class="text-gray-400">Available: 1,250.00 DMIM</span>
205
+ </div>
206
+ <input type="number" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="0.00" id="trade-amount">
207
+ </div>
208
+
209
+ <div class="grid grid-cols-2 gap-4 mb-4">
210
+ <button id="buy-btn" class="bg-green-600 hover:bg-green-700 py-3 rounded-lg font-bold transition flex items-center justify-center">
211
+ <i class="fas fa-arrow-up mr-2"></i> Buy DMIM
212
+ </button>
213
+ <button id="sell-btn" class="bg-red-600 hover:bg-red-700 py-3 rounded-lg font-bold transition flex items-center justify-center">
214
+ <i class="fas fa-arrow-down mr-2"></i> Sell DMIM
215
+ </button>
216
+ </div>
217
+
218
+ <div class="mb-4">
219
+ <h3 class="font-bold mb-2">Order Type</h3>
220
+ <div class="grid grid-cols-2 gap-2">
221
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm">Market</button>
222
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm">Limit</button>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="space-y-3">
227
+ <div>
228
+ <label class="text-gray-400 block mb-1">Price (BCH)</label>
229
+ <input type="number" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" value="0.052" step="0.001">
230
+ </div>
231
+ <div>
232
+ <label class="text-gray-400 block mb-1">Total (BCH)</label>
233
+ <input type="number" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="0.00" readonly>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Institutional Trading -->
239
+ <div class="institutional-panel rounded-xl p-6">
240
+ <h2 class="text-xl font-bold mb-4 flex items-center">
241
+ <i class="fas fa-building text-purple-400 mr-2"></i>
242
+ Institutional Trading
243
+ </h2>
244
+
245
+ <div class="mb-4">
246
+ <div class="flex justify-between items-center mb-2">
247
+ <label class="text-gray-400">OTC Order Size</label>
248
+ <span class="text-xs text-gray-400">Min: 10,000 DMIM</span>
249
+ </div>
250
+ <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="10,000+ DMIM">
251
+ </div>
252
+
253
+ <div class="mb-4">
254
+ <label class="text-gray-400 block mb-2">Settlement Period</label>
255
+ <div class="grid grid-cols-3 gap-2">
256
+ <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg text-sm">T+1</button>
257
+ <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg text-sm">T+2</button>
258
+ <button class="bg-purple-600 py-2 rounded-lg text-sm">T+0</button>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="mb-4">
263
+ <label class="flex items-center">
264
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600 rounded" checked>
265
+ <span class="ml-2">Block Trade</span>
266
+ </label>
267
+ </div>
268
+
269
+ <div class="mb-4">
270
+ <label class="text-gray-400 block mb-1">Counterparty</label>
271
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
272
+ <option>Select Institution</option>
273
+ <option>BCH Foundation</option>
274
+ <option>Digital Asset Fund</option>
275
+ <option>Crypto Market Makers</option>
276
+ </select>
277
+ </div>
278
+
279
+ <button class="w-full bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-bold transition">
280
+ Request OTC Quote
281
+ </button>
282
+ </div>
283
+
284
+ <!-- Order Book -->
285
+ <div class="bg-gray-800 rounded-xl p-6">
286
+ <h2 class="text-xl font-bold mb-4 flex items-center">
287
+ <i class="fas fa-book text-purple-400 mr-2"></i>
288
+ Order Book (DMIM/BCH)
289
+ </h2>
290
+
291
+ <div class="mb-2">
292
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
293
+ <span>Price (BCH)</span>
294
+ <span>Amount (DMIM)</span>
295
+ <span>Total</span>
296
+ </div>
297
+ <div class="space-y-1">
298
+ <!-- Sell orders (red) -->
299
+ <div class="flex justify-between text-red-400 text-sm py-1">
300
+ <span>0.0525</span>
301
+ <span>1,250</span>
302
+ <span>65.62</span>
303
+ </div>
304
+ <div class="flex justify-between text-red-400 text-sm py-1">
305
+ <span>0.0523</span>
306
+ <span>850</span>
307
+ <span>44.45</span>
308
+ </div>
309
+ <div class="flex justify-between text-red-400 text-sm py-1">
310
+ <span>0.0521</span>
311
+ <span>420</span>
312
+ <span>21.88</span>
313
+ </div>
314
+
315
+ <!-- Market price indicator -->
316
+ <div class="text-center my-2">
317
+ <span class="bg-gray-700 px-2 py-1 rounded text-xs">Market: 0.0520 BCH</span>
318
+ </div>
319
+
320
+ <!-- Buy orders (green) -->
321
+ <div class="flex justify-between text-green-400 text-sm py-1">
322
+ <span>0.0518</span>
323
+ <span>1,800</span>
324
+ <span>93.24</span>
325
+ </div>
326
+ <div class="flex justify-between text-green-400 text-sm py-1">
327
+ <span>0.0515</span>
328
+ <span>1,200</span>
329
+ <span>61.80</span>
330
+ </div>
331
+ <div class="flex justify-between text-green-400 text-sm py-1">
332
+ <span>0.0512</span>
333
+ <span>950</span>
334
+ <span>48.64</span>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="mt-4">
340
+ <h3 class="font-bold mb-2">Recent Trades</h3>
341
+ <div class="space-y-2">
342
+ <div class="flex justify-between text-sm">
343
+ <span>0.0520</span>
344
+ <span>250 DMIM</span>
345
+ <span class="text-green-400">Buy</span>
346
+ <span class="text-gray-400">2 min ago</span>
347
+ </div>
348
+ <div class="flex justify-between text-sm">
349
+ <span>0.0521</span>
350
+ <span>180 DMIM</span>
351
+ <span class="text-red-400">Sell</span>
352
+ <span class="text-gray-400">5 min ago</span>
353
+ </div>
354
+ <div class="flex justify-between text-sm">
355
+ <span>0.0519</span>
356
+ <span>420 DMIM</span>
357
+ <span class="text-green-400">Buy</span>
358
+ <span class="text-gray-400">12 min ago</span>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Trade History -->
366
+ <div class="bg-gray-800 rounded-xl p-6 mt-6">
367
+ <div class="flex justify-between items-center mb-6">
368
+ <h2 class="text-xl font-bold flex items-center">
369
+ <i class="fas fa-history text-purple-400 mr-2"></i>
370
+ Trade History
371
+ </h2>
372
+ <div class="flex space-x-2">
373
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">All</button>
374
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Buys</button>
375
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Sells</button>
376
+ </div>
377
+ </div>
378
+ <div class="overflow-x-auto">
379
+ <table class="w-full">
380
+ <thead>
381
+ <tr class="text-gray-400 border-b border-gray-700">
382
+ <th class="pb-3 text-left">Date</th>
383
+ <th class="pb-3 text-left">Type</th>
384
+ <th class="pb-3 text-left">Price (BCH)</th>
385
+ <th class="pb-3 text-left">Amount (DMIM)</th>
386
+ <th class="pb-3 text-left">Total (BCH)</th>
387
+ <th class="pb-3 text-left">Status</th>
388
+ <th class="pb-3 text-left">TX ID</th>
389
+ </tr>
390
+ </thead>
391
+ <tbody id="trades-table">
392
+ <tr class="border-b border-gray-700 hover:bg-gray-700">
393
+ <td class="py-3">2023-11-15 14:32</td>
394
+ <td class="text-green-400">Buy</td>
395
+ <td>0.0518</td>
396
+ <td>250.00</td>
397
+ <td>12.95</td>
398
+ <td class="text-green-400">Confirmed</td>
399
+ <td class="text-xs font-mono">a1b2c3...e4f5</td>
400
+ </tr>
401
+ <tr class="border-b border-gray-700 hover:bg-gray-700">
402
+ <td class="py-3">2023-11-15 11:18</td>
403
+ <td class="text-red-400">Sell</td>
404
+ <td>0.0522</td>
405
+ <td>180.50</td>
406
+ <td>9.42</td>
407
+ <td class="text-green-400">Confirmed</td>
408
+ <td class="text-xs font-mono">d4e5f6...g7h8</td>
409
+ </tr>
410
+ <tr class="border-b border-gray-700 hover:bg-gray-700">
411
+ <td class="py-3">2023-11-14 16:45</td>
412
+ <td class="text-green-400">Buy</td>
413
+ <td>0.0515</td>
414
+ <td>420.00</td>
415
+ <td>21.63</td>
416
+ <td class="text-green-400">Confirmed</td>
417
+ <td class="text-xs font-mono">i9j0k1...l2m3</td>
418
+ </tr>
419
+ <tr class="border-b border-gray-700 hover:bg-gray-700">
420
+ <td class="py-3">2023-11-14 09:12</td>
421
+ <td class="text-red-400">Sell</td>
422
+ <td>0.0525</td>
423
+ <td>75.25</td>
424
+ <td>3.95</td>
425
+ <td class="text-green-400">Confirmed</td>
426
+ <td class="text-xs font-mono">n4o5p6...q7r8</td>
427
+ </tr>
428
+ <tr class="hover:bg-gray-700">
429
+ <td class="py-3">2023-11-13 22:08</td>
430
+ <td class="text-green-400">Buy</td>
431
+ <td>0.0512</td>
432
+ <td>324.75</td>
433
+ <td>16.63</td>
434
+ <td class="text-green-400">Confirmed</td>
435
+ <td class="text-xs font-mono">s9t0u1...v2w3</td>
436
+ </tr>
437
+ </tbody>
438
+ </table>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <script>
444
+ // Simulate price changes for DMIM/BCH pair
445
+ let currentPrice = 0.0520;
446
+ let priceDirection = 1; // 1 for up, -1 for down
447
+ let balance = 1250.00;
448
+ let trades = [];
449
+
450
+ // DOM elements
451
+ const currentPriceEl = document.getElementById('current-price');
452
+ const priceChangeEl = document.getElementById('price-change');
453
+ const balanceEl = document.getElementById('balance');
454
+ const buyBtn = document.getElementById('buy-btn');
455
+ const sellBtn = document.getElementById('sell-btn');
456
+ const tradeAmountEl = document.getElementById('trade-amount');
457
+ const tradesTableEl = document.getElementById('trades-table');
458
+ const priceChartEl = document.getElementById('price-chart');
459
+
460
+ // Format currency
461
+ const formatCurrency = (amount) => {
462
+ return amount.toFixed(4) + ' BCH';
463
+ };
464
+
465
+ // Format DMIM
466
+ const formatDMIM = (amount) => {
467
+ return amount.toFixed(2) + ' DMIM';
468
+ };
469
+
470
+ // Generate random price data for chart
471
+ const generateChartData = () => {
472
+ let points = [];
473
+ let y = 250;
474
+ for (let x = 0; x <= 500; x += 50) {
475
+ y = Math.max(100, Math.min(250, y + (Math.random() * 40 - 20)));
476
+ points.push(`${x},${y}`);
477
+ }
478
+ return points.join(' ');
479
+ };
480
+
481
+ // Update chart
482
+ const updateChart = () => {
483
+ const path = priceChartEl.querySelector('.chart-line');
484
+ path.setAttribute('d', `M${generateChartData()}`);
485
+ };
486
+
487
+ // Update price
488
+ const updatePrice = () => {
489
+ // Random price change
490
+ const change = (Math.random() * 0.002 - 0.001) * priceDirection;
491
+ currentPrice = Math.max(0.0500, Math.min(0.0540, currentPrice + change));
492
+
493
+ // Occasionally reverse direction
494
+ if (Math.random() < 0.2) {
495
+ priceDirection *= -1;
496
+ }
497
+
498
+ // Update UI
499
+ currentPriceEl.textContent = formatCurrency(currentPrice);
500
+
501
+ // Calculate percentage change
502
+ const changePercent = (change / (currentPrice - change) * 100).toFixed(2);
503
+ if (change >= 0) {
504
+ priceChangeEl.innerHTML = `+${changePercent}% <i class="fas fa-arrow-up ml-1"></i>`;
505
+ priceChangeEl.className = 'text-sm price-up';
506
+ currentPriceEl.className = 'text-2xl font-bold price-up';
507
+ } else {
508
+ priceChangeEl.innerHTML = `${changePercent}% <i class="fas fa-arrow-down ml-1"></i>`;
509
+ priceChangeEl.className = 'text-sm price-down';
510
+ currentPriceEl.className = 'text-2xl font-bold price-down';
511
+ }
512
+
513
+ // Update chart
514
+ updateChart();
515
+ };
516
+
517
+ // Add trade to history
518
+ const addTrade = (type, amount) => {
519
+ const price = currentPrice;
520
+ const total = amount * price;
521
+ const date = new Date().toLocaleString();
522
+ const status = 'Confirmed';
523
+ const txId = Math.random().toString(36).substring(2, 10) + '...' + Math.random().toString(36).substring(2, 6);
524
+
525
+ trades.unshift({
526
+ date,
527
+ type,
528
+ price,
529
+ amount,
530
+ total,
531
+ status,
532
+ txId
533
+ });
534
+
535
+ // Update balance
536
+ if (type === 'Buy') {
537
+ balance += parseFloat(amount);
538
+ } else {
539
+ balance -= parseFloat(amount);
540
+ }
541
+ balanceEl.textContent = formatDMIM(balance);
542
+
543
+ // Update trades table
544
+ renderTrades();
545
+ };
546
+
547
+ // Render trades table
548
+ const renderTrades = () => {
549
+ // In a real app, this would update the table with new trades
550
+ // For demo, we're using static data in the HTML
551
+ };
552
+
553
+ // Event listeners
554
+ buyBtn.addEventListener('click', () => {
555
+ const amount = parseFloat(tradeAmountEl.value);
556
+ if (amount && amount > 0) {
557
+ addTrade('Buy', amount);
558
+ tradeAmountEl.value = '';
559
+ } else {
560
+ alert('Please enter a valid amount');
561
+ }
562
+ });
563
+
564
+ sellBtn.addEventListener('click', () => {
565
+ const amount = parseFloat(tradeAmountEl.value);
566
+ if (amount && amount > 0 && amount <= balance) {
567
+ addTrade('Sell', amount);
568
+ tradeAmountEl.value = '';
569
+ } else {
570
+ alert('Invalid amount or insufficient balance');
571
+ }
572
+ });
573
+
574
+ // Initialize
575
+ updatePrice();
576
+ renderTrades();
577
+
578
+ // Simulate price changes every 3 seconds
579
+ setInterval(updatePrice, 3000);
580
+ </script>
581
+ <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=tonymontana2064/simple-trading" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=privateuserh/privdmi-vbeta1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
582
+ </html>