Hugging Face's logo

Spaces:
JymNils
/
neon-trader-2077
Running

App Files Community
bybrawe commited on
Commit
2970595
·
verified ·
1 Parent(s): 80a8e2c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +521 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Neon Trader 2077
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: blue
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: neon-trader-2077
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,521 @@
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>NEON TRADER 2077</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
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap');
11
+
12
+ :root {
13
+ --neon-pink: #ff2a6d;
14
+ --neon-blue: #05d9e8;
15
+ --neon-purple: #d300c5;
16
+ --dark-bg: #0d0221;
17
+ --darker-bg: #02010a;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Rajdhani', sans-serif;
22
+ background-color: var(--dark-bg);
23
+ color: white;
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ h1, h2, h3, .font-orbitron {
28
+ font-family: 'Orbitron', sans-serif;
29
+ }
30
+
31
+ .neon-text-pink {
32
+ color: var(--neon-pink);
33
+ text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
34
+ }
35
+
36
+ .neon-text-blue {
37
+ color: var(--neon-blue);
38
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
39
+ }
40
+
41
+ .neon-border-pink {
42
+ border: 2px solid var(--neon-pink);
43
+ box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px var(--neon-pink);
44
+ }
45
+
46
+ .neon-border-blue {
47
+ border: 2px solid var(--neon-blue);
48
+ box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue);
49
+ }
50
+
51
+ .glow-pink {
52
+ animation: glow-pink 2s infinite alternate;
53
+ }
54
+
55
+ .glow-blue {
56
+ animation: glow-blue 2s infinite alternate;
57
+ }
58
+
59
+ @keyframes glow-pink {
60
+ from {
61
+ box-shadow: 0 0 5px var(--neon-pink);
62
+ }
63
+ to {
64
+ box-shadow: 0 0 20px var(--neon-pink);
65
+ }
66
+ }
67
+
68
+ @keyframes glow-blue {
69
+ from {
70
+ box-shadow: 0 0 5px var(--neon-blue);
71
+ }
72
+ to {
73
+ box-shadow: 0 0 20px var(--neon-blue);
74
+ }
75
+ }
76
+
77
+ .scanline {
78
+ position: absolute;
79
+ top: 0;
80
+ left: 0;
81
+ width: 100%;
82
+ height: 100%;
83
+ background: linear-gradient(
84
+ to bottom,
85
+ rgba(255, 255, 255, 0) 0%,
86
+ rgba(255, 255, 255, 0.03) 50%,
87
+ rgba(255, 255, 255, 0) 100%
88
+ );
89
+ background-size: 100% 8px;
90
+ pointer-events: none;
91
+ animation: scanline 8s linear infinite;
92
+ }
93
+
94
+ @keyframes scanline {
95
+ 0% {
96
+ background-position: 0 0;
97
+ }
98
+ 100% {
99
+ background-position: 0 100vh;
100
+ }
101
+ }
102
+
103
+ .flicker {
104
+ animation: flicker 5s infinite alternate;
105
+ }
106
+
107
+ @keyframes flicker {
108
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
109
+ opacity: 1;
110
+ }
111
+ 20%, 22%, 24%, 55% {
112
+ opacity: 0.5;
113
+ }
114
+ }
115
+
116
+ .stock-up {
117
+ color: #00ff00;
118
+ text-shadow: 0 0 5px #00ff00;
119
+ }
120
+
121
+ .stock-down {
122
+ color: #ff0000;
123
+ text-shadow: 0 0 5px #ff0000;
124
+ }
125
+
126
+ .terminal-text {
127
+ font-family: 'Courier New', monospace;
128
+ color: var(--neon-blue);
129
+ text-shadow: 0 0 5px var(--neon-blue);
130
+ }
131
+
132
+ .grid-bg {
133
+ background-image:
134
+ linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px),
135
+ linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px);
136
+ background-size: 20px 20px;
137
+ }
138
+
139
+ .cyber-button {
140
+ transition: all 0.3s;
141
+ position: relative;
142
+ overflow: hidden;
143
+ }
144
+
145
+ .cyber-button:hover {
146
+ transform: translateY(-2px);
147
+ box-shadow: 0 0 15px currentColor;
148
+ }
149
+
150
+ .cyber-button::before {
151
+ content: '';
152
+ position: absolute;
153
+ top: 0;
154
+ left: -100%;
155
+ width: 100%;
156
+ height: 100%;
157
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
158
+ transition: all 0.5s;
159
+ }
160
+
161
+ .cyber-button:hover::before {
162
+ left: 100%;
163
+ }
164
+
165
+ .pulse {
166
+ animation: pulse 2s infinite;
167
+ }
168
+
169
+ @keyframes pulse {
170
+ 0% {
171
+ opacity: 0.7;
172
+ }
173
+ 50% {
174
+ opacity: 1;
175
+ }
176
+ 100% {
177
+ opacity: 0.7;
178
+ }
179
+ }
180
+ </style>
181
+ </head>
182
+ <body class="min-h-screen grid-bg">
183
+ <div class="scanline"></div>
184
+
185
+ <!-- Header -->
186
+ <header class="bg-black bg-opacity-80 border-b border-neon-blue py-4 px-6 flex justify-between items-center neon-border-blue">
187
+ <div class="flex items-center space-x-4">
188
+ <div class="w-12 h-12 bg-neon-pink rounded-full glow-pink flex items-center justify-center">
189
+ <i class="fas fa-chart-line text-xl text-white"></i>
190
+ </div>
191
+ <h1 class="text-3xl font-bold neon-text-pink flicker">NEON TRADER 2077</h1>
192
+ </div>
193
+
194
+ <div class="flex items-center space-x-6">
195
+ <div class="text-center">
196
+ <p class="text-xs text-gray-400">CRYPTO TIME</p>
197
+ <p id="current-time" class="text-xl neon-text-blue font-orbitron">23:59:45</p>
198
+ </div>
199
+ <div class="text-center">
200
+ <p class="text-xs text-gray-400">NET WORTH</p>
201
+ <p class="text-xl neon-text-pink font-orbitron">₡ 1,245,890</p>
202
+ </div>
203
+ <div class="w-10 h-10 rounded-full bg-neon-blue bg-opacity-30 flex items-center justify-center neon-border-blue cursor-pointer hover:bg-opacity-50 transition">
204
+ <i class="fas fa-user neon-text-blue"></i>
205
+ </div>
206
+ </div>
207
+ </header>
208
+
209
+ <main class="container mx-auto px-4 py-6">
210
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
211
+ <!-- Left sidebar -->
212
+ <div class="lg:col-span-1 space-y-6">
213
+ <!-- Portfolio Summary -->
214
+ <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-pink">
215
+ <h2 class="text-xl neon-text-pink font-orbitron mb-4">PORTFOLIO</h2>
216
+
217
+ <div class="space-y-3">
218
+ <div class="flex justify-between items-center">
219
+ <span class="text-gray-400">Total Value:</span>
220
+ <span class="neon-text-blue font-bold">₡ 1,245,890</span>
221
+ </div>
222
+ <div class="flex justify-between items-center">
223
+ <span class="text-gray-400">Day Change:</span>
224
+ <span class="text-green-400 font-bold">+₡ 24,560 (+2.01%)</span>
225
+ </div>
226
+ <div class="flex justify-between items-center">
227
+ <span class="text-gray-400">Buying Power:</span>
228
+ <span class="neon-text-blue font-bold">₡ 245,890</span>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="mt-6">
233
+ <h3 class="text-sm text-gray-400 mb-2">ASSET DISTRIBUTION</h3>
234
+ <div class="h-2 w-full bg-gray-800 rounded-full mb-2">
235
+ <div class="h-2 rounded-full bg-gradient-to-r from-neon-pink to-neon-purple" style="width: 65%;"></div>
236
+ </div>
237
+ <div class="flex justify-between text-xs">
238
+ <span class="neon-text-pink">Stocks (65%)</span>
239
+ <span class="neon-text-blue">Crypto (35%)</span>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Quick Actions -->
245
+ <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-blue">
246
+ <h2 class="text-xl neon-text-blue font-orbitron mb-4">QUICK ACTIONS</h2>
247
+
248
+ <div class="grid grid-cols-2 gap-3">
249
+ <button class="cyber-button bg-neon-pink bg-opacity-20 text-white py-2 px-3 rounded-md neon-border-pink neon-text-pink">
250
+ <i class="fas fa-arrow-up mr-2"></i> Buy
251
+ </button>
252
+ <button class="cyber-button bg-red-500 bg-opacity-20 text-white py-2 px-3 rounded-md border border-red-500 text-red-400">
253
+ <i class="fas fa-arrow-down mr-2"></i> Sell
254
+ </button>
255
+ <button class="cyber-button bg-neon-blue bg-opacity-20 text-white py-2 px-3 rounded-md neon-border-blue neon-text-blue">
256
+ <i class="fas fa-exchange-alt mr-2"></i> Trade
257
+ </button>
258
+ <button class="cyber-button bg-purple-500 bg-opacity-20 text-white py-2 px-3 rounded-md border border-purple-500 text-purple-400">
259
+ <i class="fas fa-coins mr-2"></i> Crypto
260
+ </button>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- News Feed -->
265
+ <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-pink">
266
+ <h2 class="text-xl neon-text-pink font-orbitron mb-4">CYBER NEWS</h2>
267
+
268
+ <div class="space-y-4">
269
+ <div class="border-b border-gray-800 pb-3">
270
+ <p class="text-xs text-gray-400">10:45 AM</p>
271
+ <p class="text-sm neon-text-blue">Arasaka Corp announces breakthrough in neural interface tech</p>
272
+ </div>
273
+ <div class="border-b border-gray-800 pb-3">
274
+ <p class="text-xs text-gray-400">09:30 AM</p>
275
+ <p class="text-sm neon-text-blue">Militech wins major defense contract</p>
276
+ </div>
277
+ <div class="border-b border-gray-800 pb-3">
278
+ <p class="text-xs text-gray-400">08:15 AM</p>
279
+ <p class="text-sm neon-text-blue">NetWatch reports surge in rogue AIs</p>
280
+ </div>
281
+ <div class="pb-2">
282
+ <p class="text-xs text-gray-400">07:00 AM</p>
283
+ <p class="text-sm neon-text-blue">Night City stock exchange hits record high</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Main Content -->
290
+ <div class="lg:col-span-3 space-y-6">
291
+ <!-- Market Overview -->
292
+ <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-blue">
293
+ <div class="flex justify-between items-center mb-4">
294
+ <h2 class="text-xl neon-text-blue font-orbitron">MARKET OVERVIEW</h2>
295
+ <div class="flex space-x-2">
296
+ <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">STOCKS</button>
297
+ <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">CRYPTO</button>
298
+ <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">FUTURES</button>
299
+ </div>
300
+ </div>
301
+
302
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
303
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg border border-gray-800">
304
+ <p class="text-xs text-gray-400">NIGHT CITY INDEX</p>
305
+ <p class="text-xl neon-text-blue font-orbitron">4,328.76</p>
306
+ <p class="text-sm text-green-400">+42.18 (0.98%)</p>
307
+ </div>
308
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg border border-gray-800">
309
+ <p class="text-xs text-gray-400">TECH SECTOR</p>
310
+ <p class="text-xl neon-text-pink font-orbitron">1,845.32</p>
311
+ <p class="text-sm text-green-400">+28.45 (1.56%)</p>
312
+ </div>
313
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg border border-gray-800">
314
+ <p class="text-xs text-gray-400">BTC/USD</p>
315
+ <p class="text-xl neon-text-blue font-orbitron">₡ 42,876</p>
316
+ <p class="text-sm text-red-400">-1,245.76 (2.82%)</p>
317
+ </div>
318
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg border border-gray-800">
319
+ <p class="text-xs text-gray-400">ETH/USD</p>
320
+ <p class="text-xl neon-text-pink font-orbitron">₡ 2,876</p>
321
+ <p class="text-sm text-green-400">+45.32 (1.60%)</p>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Stock Chart -->
326
+ <div class="h-64 bg-gray-900 bg-opacity-50 rounded-lg mb-4 relative overflow-hidden">
327
+ <!-- This would be a chart in a real app - using a placeholder here -->
328
+ <div class="absolute inset-0 flex items-center justify-center">
329
+ <div class="terminal-text text-opacity-50">[ LIVE PRICE CHART ]</div>
330
+ </div>
331
+ <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-neon-pink via-neon-blue to-neon-purple"></div>
332
+ </div>
333
+
334
+ <div class="flex justify-between items-center">
335
+ <div class="flex space-x-2">
336
+ <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">1D</button>
337
+ <button class="cyber-button bg-neon-blue bg-opacity-20 text-white text-xs py-1 px-3 rounded-md neon-border-blue">1W</button>
338
+ <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">1M</button>
339
+ <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">1Y</button>
340
+ </div>
341
+ <div class="text-xs text-gray-400">
342
+ <span class="neon-text-blue">ARAS</span> |
343
+ <span class="neon-text-pink">MILT</span> |
344
+ <span class="neon-text-blue">KANG</span> |
345
+ <span class="neon-text-pink">NETW</span>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Watchlist -->
351
+ <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-pink">
352
+ <div class="flex justify-between items-center mb-4">
353
+ <h2 class="text-xl neon-text-pink font-orbitron">WATCHLIST</h2>
354
+ <div class="relative">
355
+ <input type="text" placeholder="Search assets..." class="bg-gray-900 bg-opacity-50 text-white text-sm py-1 px-3 pr-8 rounded-md border border-gray-800 focus:outline-none focus:border-neon-blue">
356
+ <i class="fas fa-search absolute right-3 top-2 text-gray-500"></i>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="overflow-x-auto">
361
+ <table class="w-full">
362
+ <thead>
363
+ <tr class="text-left text-sm text-gray-400 border-b border-gray-800">
364
+ <th class="pb-2">SYMBOL</th>
365
+ <th class="pb-2">PRICE</th>
366
+ <th class="pb-2">CHANGE</th>
367
+ <th class="pb-2">% CHANGE</th>
368
+ <th class="pb-2">VOLUME</th>
369
+ <th class="pb-2">ACTIONS</th>
370
+ </tr>
371
+ </thead>
372
+ <tbody id="stock-table">
373
+ <!-- Stock data will be inserted here by JavaScript -->
374
+ </tbody>
375
+ </table>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </main>
381
+
382
+ <!-- Footer -->
383
+ <footer class="bg-black bg-opacity-80 border-t border-neon-blue py-3 px-6 neon-border-blue mt-6">
384
+ <div class="flex justify-between items-center">
385
+ <div class="flex items-center space-x-4">
386
+ <div class="flex items-center space-x-1">
387
+ <div class="w-2 h-2 rounded-full bg-green-500 pulse"></div>
388
+ <span class="text-xs text-gray-400">CONNECTED</span>
389
+ </div>
390
+ <span class="text-xs text-gray-400">LATENCY: <span class="neon-text-blue">28ms</span></span>
391
+ <span class="text-xs text-gray-400">API: <span class="neon-text-pink">v3.2.7</span></span>
392
+ </div>
393
+ <div class="text-xs text-gray-400">
394
+ <span class="neon-text-blue">NEON TRADER 2077</span> | SECURE TRADING TERMINAL | <span class="neon-text-pink">ENCRYPTED</span>
395
+ </div>
396
+ </div>
397
+ </footer>
398
+
399
+ <script>
400
+ // Update current time
401
+ function updateTime() {
402
+ const now = new Date();
403
+ const timeString = now.toLocaleTimeString('en-US', {hour12: false});
404
+ document.getElementById('current-time').textContent = timeString;
405
+ }
406
+
407
+ setInterval(updateTime, 1000);
408
+ updateTime();
409
+
410
+ // Sample stock data
411
+ const stocks = [
412
+ { symbol: 'ARAS', name: 'Arasaka Corp', price: 245.67, change: 3.45, percentChange: 1.42, volume: '4.5M' },
413
+ { symbol: 'MILT', name: 'Militech Intl', price: 187.32, change: -2.34, percentChange: -1.23, volume: '3.2M' },
414
+ { symbol: 'KANG', name: 'Kang Tao Arms', price: 92.45, change: 1.87, percentChange: 2.06, volume: '1.8M' },
415
+ { symbol: 'NETW', name: 'NetWatch', price: 156.78, change: 5.67, percentChange: 3.75, volume: '2.7M' },
416
+ { symbol: 'BIOT', name: 'Biotechnica', price: 78.23, change: -0.45, percentChange: -0.57, volume: '1.2M' },
417
+ { symbol: 'TRAU', name: 'Trauma Team', price: 134.56, change: 2.34, percentChange: 1.77, volume: '2.1M' },
418
+ { symbol: 'ZETT', name: 'Zetatech', price: 67.89, change: -1.23, percentChange: -1.78, volume: '3.5M' },
419
+ { symbol: 'BTC', name: 'Bitcoin', price: 42876, change: -1245, percentChange: -2.82, volume: '24.5K' },
420
+ { symbol: 'ETH', name: 'Ethereum', price: 2876, change: 45, percentChange: 1.60, volume: '18.7K' }
421
+ ];
422
+
423
+ // Render stock table
424
+ function renderStockTable() {
425
+ const tableBody = document.getElementById('stock-table');
426
+ tableBody.innerHTML = '';
427
+
428
+ stocks.forEach(stock => {
429
+ const isCrypto = stock.symbol === 'BTC' || stock.symbol === 'ETH';
430
+ const row = document.createElement('tr');
431
+ row.className = 'border-b border-gray-800 hover:bg-gray-900 hover:bg-opacity-50';
432
+
433
+ const changeClass = stock.change >= 0 ? 'stock-up' : 'stock-down';
434
+ const changeSymbol = stock.change >= 0 ? '+' : '';
435
+
436
+ row.innerHTML = `
437
+ <td class="py-3">
438
+ <div class="font-bold ${isCrypto ? 'neon-text-blue' : 'neon-text-pink'}">${stock.symbol}</div>
439
+ <div class="text-xs text-gray-400">${stock.name}</div>
440
+ </td>
441
+ <td class="py-3 font-orbitron">₡ ${stock.price.toLocaleString()}</td>
442
+ <td class="py-3 font-orbitron ${changeClass}">${changeSymbol}${stock.change}</td>
443
+ <td class="py-3 font-orbitron ${changeClass}">${changeSymbol}${stock.percentChange}%</td>
444
+ <td class="py-3 text-gray-400">${stock.volume}</td>
445
+ <td class="py-3">
446
+ <div class="flex space-x-2">
447
+ <button class="cyber-button bg-green-900 bg-opacity-20 text-green-400 text-xs py-1 px-2 rounded border border-green-500">
448
+ <i class="fas fa-arrow-up mr-1"></i> Buy
449
+ </button>
450
+ <button class="cyber-button bg-red-900 bg-opacity-20 text-red-400 text-xs py-1 px-2 rounded border border-red-500">
451
+ <i class="fas fa-arrow-down mr-1"></i> Sell
452
+ </button>
453
+ </div>
454
+ </td>
455
+ `;
456
+
457
+ tableBody.appendChild(row);
458
+ });
459
+ }
460
+
461
+ renderStockTable();
462
+
463
+ // Simulate stock price changes
464
+ function simulateMarket() {
465
+ stocks.forEach(stock => {
466
+ // Random price change between -2% and +2%
467
+ const changePercent = (Math.random() * 4 - 2) / 100;
468
+ const newPrice = stock.price * (1 + changePercent);
469
+ const change = newPrice - stock.price;
470
+ const percentChange = (change / stock.price) * 100;
471
+
472
+ stock.price = parseFloat(newPrice.toFixed(2));
473
+ stock.change = parseFloat(change.toFixed(2));
474
+ stock.percentChange = parseFloat(percentChange.toFixed(2));
475
+
476
+ // Random volume change
477
+ const volumeNum = parseFloat(stock.volume.replace(/[MK]/g, ''));
478
+ const volumeChange = Math.random() * 0.2 - 0.1; // -10% to +10%
479
+ let newVolume = volumeNum * (1 + volumeChange);
480
+
481
+ if (stock.volume.includes('M')) {
482
+ newVolume = newVolume.toFixed(1) + 'M';
483
+ } else {
484
+ newVolume = Math.round(newVolume) + 'K';
485
+ }
486
+
487
+ stock.volume = newVolume;
488
+ });
489
+
490
+ renderStockTable();
491
+ }
492
+
493
+ setInterval(simulateMarket, 5000);
494
+
495
+ // Add cyberpunk terminal effect to inputs
496
+ document.querySelectorAll('input').forEach(input => {
497
+ input.addEventListener('focus', () => {
498
+ input.classList.add('neon-border-blue');
499
+ input.classList.remove('border-gray-800');
500
+ });
501
+
502
+ input.addEventListener('blur', () => {
503
+ input.classList.remove('neon-border-blue');
504
+ input.classList.add('border-gray-800');
505
+ });
506
+ });
507
+
508
+ // Add button hover effects
509
+ document.querySelectorAll('.cyber-button').forEach(button => {
510
+ button.addEventListener('mouseenter', () => {
511
+ const rect = button.getBoundingClientRect();
512
+ const x = event.clientX - rect.left;
513
+ const y = event.clientY - rect.top;
514
+
515
+ button.style.setProperty('--x', `${x}px`);
516
+ button.style.setProperty('--y', `${y}px`);
517
+ });
518
+ });
519
+ </script>
520
+ <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=bybrawe/neon-trader-2077" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
521
+ </html>