Hugging Face's logo

Spaces:
omerencinar
/
crypto
Running

App Files Community
omerencinar commited on
Commit
8375e29
·
verified ·
1 Parent(s): b7a9e18

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +690 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Crypto
3
- emoji: 🏆
4
- colorFrom: pink
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: crypto
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: pink
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,690 @@
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 Crypto Tracker</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
13
+
14
+ :root {
15
+ --neon-pink: #ff2a6d;
16
+ --neon-blue: #05d9e8;
17
+ --neon-purple: #d300c5;
18
+ --dark-bg: #0d0221;
19
+ --glass-bg: rgba(15, 10, 35, 0.6);
20
+ }
21
+
22
+ body {
23
+ font-family: 'Rajdhani', sans-serif;
24
+ background-color: var(--dark-bg);
25
+ color: white;
26
+ margin: 0;
27
+ padding: 0;
28
+ overflow-x: hidden;
29
+ }
30
+
31
+ .glass-panel {
32
+ background: var(--glass-bg);
33
+ backdrop-filter: blur(10px);
34
+ border-radius: 12px;
35
+ border: 1px solid rgba(255, 255, 255, 0.1);
36
+ box-shadow: 0 8px 32px 0 rgba(5, 217, 232, 0.1);
37
+ }
38
+
39
+ .neon-text-pink {
40
+ text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
41
+ color: var(--neon-pink);
42
+ }
43
+
44
+ .neon-text-blue {
45
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
46
+ color: var(--neon-blue);
47
+ }
48
+
49
+ .neon-glow-blue {
50
+ box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
51
+ }
52
+
53
+ .neon-glow-pink {
54
+ box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
55
+ }
56
+
57
+ .nav-link {
58
+ position: relative;
59
+ overflow: hidden;
60
+ }
61
+
62
+ .nav-link::after {
63
+ content: '';
64
+ position: absolute;
65
+ bottom: 0;
66
+ left: 0;
67
+ width: 100%;
68
+ height: 2px;
69
+ background: var(--neon-blue);
70
+ transform: scaleX(0);
71
+ transform-origin: right;
72
+ transition: transform 0.3s ease;
73
+ }
74
+
75
+ .nav-link:hover::after {
76
+ transform: scaleX(1);
77
+ transform-origin: left;
78
+ }
79
+
80
+ .btn-neon {
81
+ transition: all 0.3s ease;
82
+ position: relative;
83
+ overflow: hidden;
84
+ }
85
+
86
+ .btn-neon:hover {
87
+ box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
88
+ }
89
+
90
+ .btn-neon::before {
91
+ content: '';
92
+ position: absolute;
93
+ top: -50%;
94
+ left: -50%;
95
+ width: 200%;
96
+ height: 200%;
97
+ background: linear-gradient(
98
+ to bottom right,
99
+ rgba(5, 217, 232, 0.3),
100
+ rgba(5, 217, 232, 0)
101
+ );
102
+ transform: rotate(45deg);
103
+ transition: all 0.3s ease;
104
+ opacity: 0;
105
+ }
106
+
107
+ .btn-neon:hover::before {
108
+ opacity: 1;
109
+ animation: shine 1.5s infinite;
110
+ }
111
+
112
+ @keyframes shine {
113
+ 0% {
114
+ transform: rotate(45deg) translate(-30%, -30%);
115
+ }
116
+ 100% {
117
+ transform: rotate(45deg) translate(30%, 30%);
118
+ }
119
+ }
120
+
121
+ .chart-container {
122
+ position: relative;
123
+ }
124
+
125
+ .chart-pulse {
126
+ position: absolute;
127
+ width: 100%;
128
+ height: 100%;
129
+ border-radius: 12px;
130
+ opacity: 0;
131
+ background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%);
132
+ animation: pulse 3s infinite;
133
+ }
134
+
135
+ @keyframes pulse {
136
+ 0% {
137
+ opacity: 0.3;
138
+ transform: scale(0.95);
139
+ }
140
+ 50% {
141
+ opacity: 0.1;
142
+ transform: scale(1.05);
143
+ }
144
+ 100% {
145
+ opacity: 0.3;
146
+ transform: scale(0.95);
147
+ }
148
+ }
149
+
150
+ .tab-content {
151
+ transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
152
+ }
153
+
154
+ .crypto-card {
155
+ transition: all 0.3s ease;
156
+ }
157
+
158
+ .crypto-card:hover {
159
+ transform: translateY(-5px);
160
+ box-shadow: 0 10px 20px rgba(5, 217, 232, 0.2);
161
+ }
162
+
163
+ .price-up {
164
+ color: #00ff9d;
165
+ text-shadow: 0 0 5px #00ff9d;
166
+ }
167
+
168
+ .price-down {
169
+ color: #ff2a6d;
170
+ text-shadow: 0 0 5px #ff2a6d;
171
+ }
172
+
173
+ .grid-bg {
174
+ position: absolute;
175
+ top: 0;
176
+ left: 0;
177
+ width: 100%;
178
+ height: 100%;
179
+ background:
180
+ linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px),
181
+ linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px);
182
+ background-size: 30px 30px;
183
+ z-index: -1;
184
+ }
185
+ </style>
186
+ </head>
187
+ <body class="min-h-screen">
188
+ <div class="grid-bg"></div>
189
+
190
+ <div class="flex">
191
+ <!-- Vertical Navigation -->
192
+ <nav class="w-20 md:w-64 h-screen sticky top-0 glass-panel flex flex-col items-center py-8 z-50">
193
+ <div class="text-2xl font-bold neon-text-pink mb-12">CRYPTO<span class="neon-text-blue">TRACK</span></div>
194
+
195
+ <div class="w-full flex flex-col items-center space-y-6">
196
+ <a href="#" class="nav-link text-white hover:text-cyan-300 px-4 py-2 text-lg font-medium transition-all duration-300" data-tab="dashboard">
197
+ <div class="flex items-center">
198
+ <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
199
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
200
+ </svg>
201
+ <span class="hidden md:inline">Dashboard</span>
202
+ </div>
203
+ </a>
204
+
205
+ <a href="#" class="nav-link text-white hover:text-cyan-300 px-4 py-2 text-lg font-medium transition-all duration-300" data-tab="markets">
206
+ <div class="flex items-center">
207
+ <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
208
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
209
+ </svg>
210
+ <span class="hidden md:inline">Markets</span>
211
+ </div>
212
+ </a>
213
+
214
+ <a href="#" class="nav-link text-white hover:text-cyan-300 px-4 py-2 text-lg font-medium transition-all duration-300" data-tab="portfolio">
215
+ <div class="flex items-center">
216
+ <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
217
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
218
+ </svg>
219
+ <span class="hidden md:inline">Portfolio</span>
220
+ </div>
221
+ </a>
222
+
223
+ <a href="#" class="nav-link text-white hover:text-cyan-300 px-4 py-2 text-lg font-medium transition-all duration-300" data-tab="news">
224
+ <div class="flex items-center">
225
+ <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
226
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
227
+ </svg>
228
+ <span class="hidden md:inline">News</span>
229
+ </div>
230
+ </a>
231
+ </div>
232
+
233
+ <div class="mt-auto">
234
+ <button class="btn-neon bg-cyan-600 hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-full flex items-center">
235
+ <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
236
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
237
+ </svg>
238
+ <span class="hidden md:inline">Connect</span>
239
+ </button>
240
+ </div>
241
+ </nav>
242
+
243
+ <!-- Main Content -->
244
+ <main class="flex-1 p-6">
245
+ <!-- Header -->
246
+ <header class="flex justify-between items-center mb-8">
247
+ <h1 class="text-3xl font-bold neon-text-blue">Dashboard</h1>
248
+ <div class="flex items-center space-x-4">
249
+ <div class="relative">
250
+ <input type="text" placeholder="Search coins..." class="bg-gray-900 bg-opacity-50 border border-cyan-500 border-opacity-30 rounded-full py-2 px-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent">
251
+ <svg class="w-5 h-5 text-cyan-400 absolute right-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
252
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
253
+ </svg>
254
+ </div>
255
+ <div class="glass-panel px-4 py-2 flex items-center">
256
+ <svg class="w-5 h-5 text-cyan-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
257
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
258
+ </svg>
259
+ <span class="text-sm">Live</span>
260
+ <div class="ml-2 w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
261
+ </div>
262
+ </div>
263
+ </header>
264
+
265
+ <!-- Market Overview -->
266
+ <div class="glass-panel p-6 mb-8">
267
+ <div class="flex justify-between items-center mb-6">
268
+ <h2 class="text-xl font-bold neon-text-pink">Market Overview</h2>
269
+ <div class="flex space-x-2">
270
+ <button class="bg-cyan-600 hover:bg-cyan-500 text-white text-xs font-bold py-1 px-3 rounded-full">24h</button>
271
+ <button class="bg-gray-800 hover:bg-gray-700 text-white text-xs font-bold py-1 px-3 rounded-full">7d</button>
272
+ <button class="bg-gray-800 hover:bg-gray-700 text-white text-xs font-bold py-1 px-3 rounded-full">30d</button>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
277
+ <div class="glass-panel p-4 rounded-lg">
278
+ <div class="flex justify-between items-start">
279
+ <div>
280
+ <p class="text-gray-400 text-sm">Total Market Cap</p>
281
+ <p class="text-2xl font-bold">$1.24T</p>
282
+ </div>
283
+ <span class="text-green-400 text-sm">+2.4%</span>
284
+ </div>
285
+ <div class="chart-container mt-4 h-20">
286
+ <div class="chart-pulse"></div>
287
+ <svg class="w-full h-full" id="marketCapChart"></svg>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="glass-panel p-4 rounded-lg">
292
+ <div class="flex justify-between items-start">
293
+ <div>
294
+ <p class="text-gray-400 text-sm">24h Volume</p>
295
+ <p class="text-2xl font-bold">$48.6B</p>
296
+ </div>
297
+ <span class="text-green-400 text-sm">+5.8%</span>
298
+ </div>
299
+ <div class="chart-container mt-4 h-20">
300
+ <div class="chart-pulse"></div>
301
+ <svg class="w-full h-full" id="volumeChart"></svg>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="glass-panel p-4 rounded-lg">
306
+ <div class="flex justify-between items-start">
307
+ <div>
308
+ <p class="text-gray-400 text-sm">BTC Dominance</p>
309
+ <p class="text-2xl font-bold">42.3%</p>
310
+ </div>
311
+ <span class="text-red-400 text-sm">-1.2%</span>
312
+ </div>
313
+ <div class="chart-container mt-4 h-20">
314
+ <div class="chart-pulse"></div>
315
+ <svg class="w-full h-full" id="btcChart"></svg>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="glass-panel p-4 rounded-lg">
320
+ <div class="flex justify-between items-start">
321
+ <div>
322
+ <p class="text-gray-400 text-sm">ETH Dominance</p>
323
+ <p class="text-2xl font-bold">18.7%</p>
324
+ </div>
325
+ <span class="text-green-400 text-sm">+0.8%</span>
326
+ </div>
327
+ <div class="chart-container mt-4 h-20">
328
+ <div class="chart-pulse"></div>
329
+ <svg class="w-full h-full" id="ethChart"></svg>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Top Cryptocurrencies -->
336
+ <div class="glass-panel p-6">
337
+ <div class="flex justify-between items-center mb-6">
338
+ <h2 class="text-xl font-bold neon-text-pink">Top Cryptocurrencies</h2>
339
+ <button class="btn-neon bg-cyan-600 hover:bg-cyan-500 text-white text-sm font-bold py-1 px-4 rounded-full">View All</button>
340
+ </div>
341
+
342
+ <div class="overflow-x-auto">
343
+ <table class="w-full">
344
+ <thead>
345
+ <tr class="text-left text-gray-400 border-b border-gray-800">
346
+ <th class="pb-4 pl-2">#</th>
347
+ <th class="pb-4">Name</th>
348
+ <th class="pb-4 text-right">Price</th>
349
+ <th class="pb-4 text-right">24h %</th>
350
+ <th class="pb-4 text-right">7d %</th>
351
+ <th class="pb-4 text-right">Market Cap</th>
352
+ <th class="pb-4 text-right">Volume(24h)</th>
353
+ <th class="pb-4 pr-2 text-right">Last 7 Days</th>
354
+ </tr>
355
+ </thead>
356
+ <tbody id="cryptoTableBody">
357
+ <!-- Crypto data will be inserted here by JavaScript -->
358
+ </tbody>
359
+ </table>
360
+ </div>
361
+ </div>
362
+ </main>
363
+ </div>
364
+
365
+ <script>
366
+ document.addEventListener('DOMContentLoaded', function() {
367
+ // Initialize GSAP animations
368
+ gsap.registerPlugin(ScrollTrigger);
369
+
370
+ // Animate elements on page load
371
+ gsap.from("nav", {
372
+ x: -50,
373
+ opacity: 0,
374
+ duration: 0.8,
375
+ ease: "power3.out"
376
+ });
377
+
378
+ gsap.from("header", {
379
+ y: -30,
380
+ opacity: 0,
381
+ duration: 0.6,
382
+ delay: 0.3,
383
+ ease: "back.out"
384
+ });
385
+
386
+ gsap.from(".glass-panel", {
387
+ y: 30,
388
+ opacity: 0,
389
+ duration: 0.8,
390
+ delay: 0.5,
391
+ stagger: 0.1,
392
+ ease: "power2.out"
393
+ });
394
+
395
+ // Tab switching functionality
396
+ const navLinks = document.querySelectorAll('.nav-link');
397
+ navLinks.forEach(link => {
398
+ link.addEventListener('click', function(e) {
399
+ e.preventDefault();
400
+ const tab = this.getAttribute('data-tab');
401
+
402
+ // Animate tab switch
403
+ gsap.to(".glass-panel", {
404
+ y: 20,
405
+ opacity: 0,
406
+ duration: 0.3,
407
+ onComplete: () => {
408
+ // Here you would normally load new content for the tab
409
+ // For this demo, we'll just change the header text
410
+ document.querySelector('header h1').textContent = tab.charAt(0).toUpperCase() + tab.slice(1);
411
+
412
+ gsap.fromTo(".glass-panel",
413
+ { y: -20, opacity: 0 },
414
+ { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" }
415
+ );
416
+ }
417
+ });
418
+
419
+ // Update active nav link
420
+ navLinks.forEach(l => l.classList.remove('text-cyan-300'));
421
+ this.classList.add('text-cyan-300');
422
+ });
423
+ });
424
+
425
+ // Generate random data for charts
426
+ function generateRandomData(points = 20, min = 10, max = 100) {
427
+ return Array.from({ length: points }, (_, i) => ({
428
+ x: i,
429
+ y: Math.random() * (max - min) + min
430
+ }));
431
+ }
432
+
433
+ // Create D3.js charts
434
+ function createChart(svgId, data, color) {
435
+ const svg = d3.select(`#${svgId}`);
436
+ const width = svg.node().getBoundingClientRect().width;
437
+ const height = svg.node().getBoundingClientRect().height;
438
+ const margin = { top: 5, right: 5, bottom: 5, left: 5 };
439
+
440
+ const x = d3.scaleLinear()
441
+ .domain([0, data.length - 1])
442
+ .range([margin.left, width - margin.right]);
443
+
444
+ const y = d3.scaleLinear()
445
+ .domain([d3.min(data, d => d.y) * 0.9, d3.max(data, d => d.y) * 1.1])
446
+ .range([height - margin.bottom, margin.top]);
447
+
448
+ const line = d3.line()
449
+ .x(d => x(d.x))
450
+ .y(d => y(d.y))
451
+ .curve(d3.curveBasis);
452
+
453
+ svg.append("path")
454
+ .datum(data)
455
+ .attr("fill", "none")
456
+ .attr("stroke", color)
457
+ .attr("stroke-width", 2)
458
+ .attr("d", line);
459
+
460
+ // Add gradient glow effect
461
+ const defs = svg.append("defs");
462
+ const gradient = defs.append("linearGradient")
463
+ .attr("id", "line-gradient")
464
+ .attr("gradientUnits", "userSpaceOnUse")
465
+ .attr("x1", 0)
466
+ .attr("y1", 0)
467
+ .attr("x2", width)
468
+ .attr("y2", 0);
469
+
470
+ gradient.append("stop")
471
+ .attr("offset", "0%")
472
+ .attr("stop-color", color)
473
+ .attr("stop-opacity", 0.7);
474
+
475
+ gradient.append("stop")
476
+ .attr("offset", "100%")
477
+ .attr("stop-color", color)
478
+ .attr("stop-opacity", 0);
479
+
480
+ svg.append("path")
481
+ .datum(data)
482
+ .attr("fill", "none")
483
+ .attr("stroke", "url(#line-gradient)")
484
+ .attr("stroke-width", 6)
485
+ .attr("d", line);
486
+
487
+ // Add pulsing animation
488
+ gsap.to(`#${svgId} path`, {
489
+ duration: 3,
490
+ attr: { "stroke-width": 3 },
491
+ repeat: -1,
492
+ yoyo: true,
493
+ ease: "sine.inOut"
494
+ });
495
+ }
496
+
497
+ // Create all charts
498
+ createChart("marketCapChart", generateRandomData(15, 80, 120), "#05d9e8");
499
+ createChart("volumeChart", generateRandomData(15, 30, 70), "#ff2a6d");
500
+ createChart("btcChart", generateRandomData(15, 35, 45), "#f7931a");
501
+ createChart("ethChart", generateRandomData(15, 15, 20), "#627eea");
502
+
503
+ // Sample crypto data
504
+ const cryptoData = [
505
+ {
506
+ rank: 1,
507
+ name: "Bitcoin",
508
+ symbol: "BTC",
509
+ price: 42356.78,
510
+ change24h: 2.34,
511
+ change7d: -1.56,
512
+ marketCap: 812456789123,
513
+ volume24h: 24567890123,
514
+ sparkline: generateRandomData(7, 40000, 43000)
515
+ },
516
+ {
517
+ rank: 2,
518
+ name: "Ethereum",
519
+ symbol: "ETH",
520
+ price: 2345.67,
521
+ change24h: 5.12,
522
+ change7d: 8.34,
523
+ marketCap: 281234567890,
524
+ volume24h: 15678901234,
525
+ sparkline: generateRandomData(7, 2200, 2400)
526
+ },
527
+ {
528
+ rank: 3,
529
+ name: "Binance Coin",
530
+ symbol: "BNB",
531
+ price: 345.67,
532
+ change24h: -1.23,
533
+ change7d: 3.45,
534
+ marketCap: 56789012345,
535
+ volume24h: 2345678901,
536
+ sparkline: generateRandomData(7, 330, 350)
537
+ },
538
+ {
539
+ rank: 4,
540
+ name: "Solana",
541
+ symbol: "SOL",
542
+ price: 123.45,
543
+ change24h: 7.89,
544
+ change7d: 12.34,
545
+ marketCap: 45678901234,
546
+ volume24h: 3456789012,
547
+ sparkline: generateRandomData(7, 110, 130)
548
+ },
549
+ {
550
+ rank: 5,
551
+ name: "Cardano",
552
+ symbol: "ADA",
553
+ price: 1.23,
554
+ change24h: -0.56,
555
+ change7d: -2.34,
556
+ marketCap: 41234567890,
557
+ volume24h: 1234567890,
558
+ sparkline: generateRandomData(7, 1.1, 1.3)
559
+ }
560
+ ];
561
+
562
+ // Populate crypto table
563
+ const tableBody = document.getElementById('cryptoTableBody');
564
+
565
+ cryptoData.forEach(crypto => {
566
+ const row = document.createElement('tr');
567
+ row.className = 'border-b border-gray-800 hover:bg-gray-900 hover:bg-opacity-50 transition-colors duration-200';
568
+
569
+ // Format numbers
570
+ const formattedPrice = crypto.price.toLocaleString('en-US', {
571
+ style: 'currency',
572
+ currency: 'USD',
573
+ minimumFractionDigits: crypto.price < 1 ? 4 : 2,
574
+ maximumFractionDigits: crypto.price < 1 ? 6 : 2
575
+ });
576
+
577
+ const formattedMarketCap = crypto.marketCap.toLocaleString('en-US', {
578
+ style: 'currency',
579
+ currency: 'USD',
580
+ minimumFractionDigits: 0,
581
+ maximumFractionDigits: 0
582
+ });
583
+
584
+ const formattedVolume = crypto.volume24h.toLocaleString('en-US', {
585
+ style: 'currency',
586
+ currency: 'USD',
587
+ minimumFractionDigits: 0,
588
+ maximumFractionDigits: 0
589
+ });
590
+
591
+ // Determine change classes
592
+ const change24hClass = crypto.change24h >= 0 ? 'price-up' : 'price-down';
593
+ const change7dClass = crypto.change7d >= 0 ? 'price-up' : 'price-down';
594
+
595
+ row.innerHTML = `
596
+ <td class="py-4 pl-2 text-gray-400">${crypto.rank}</td>
597
+ <td class="py-4">
598
+ <div class="flex items-center">
599
+ <div class="w-8 h-8 rounded-full bg-gray-700 mr-3 flex items-center justify-center">
600
+ <span class="text-xs font-bold">${crypto.symbol}</span>
601
+ </div>
602
+ <span class="font-medium">${crypto.name}</span>
603
+ <span class="text-gray-500 ml-2">${crypto.symbol}</span>
604
+ </div>
605
+ </td>
606
+ <td class="py-4 text-right font-medium">${formattedPrice}</td>
607
+ <td class="py-4 text-right ${change24hClass}">${crypto.change24h >= 0 ? '+' : ''}${crypto.change24h.toFixed(2)}%</td>
608
+ <td class="py-4 text-right ${change7dClass}">${crypto.change7d >= 0 ? '+' : ''}${crypto.change7d.toFixed(2)}%</td>
609
+ <td class="py-4 text-right">${formattedMarketCap}</td>
610
+ <td class="py-4 text-right">${formattedVolume}</td>
611
+ <td class="py-4 pr-2">
612
+ <div class="h-10 w-24 ml-auto">
613
+ <svg class="w-full h-full" id="sparkline-${crypto.symbol}"></svg>
614
+ </div>
615
+ </td>
616
+ `;
617
+
618
+ tableBody.appendChild(row);
619
+
620
+ // Create sparkline chart for this crypto
621
+ setTimeout(() => {
622
+ createChart(
623
+ `sparkline-${crypto.symbol}`,
624
+ crypto.sparkline,
625
+ crypto.change7d >= 0 ? '#00ff9d' : '#ff2a6d'
626
+ );
627
+ }, 100);
628
+ });
629
+
630
+ // Button hover effects
631
+ const buttons = document.querySelectorAll('.btn-neon');
632
+ buttons.forEach(button => {
633
+ button.addEventListener('mouseenter', () => {
634
+ gsap.to(button, {
635
+ boxShadow: '0 0 15px rgba(5, 217, 232, 0.8)',
636
+ duration: 0.3
637
+ });
638
+ });
639
+
640
+ button.addEventListener('mouseleave', () => {
641
+ gsap.to(button, {
642
+ boxShadow: '0 0 5px rgba(5, 217, 232, 0.5)',
643
+ duration: 0.3
644
+ });
645
+ });
646
+ });
647
+
648
+ // Simulate live data updates
649
+ setInterval(() => {
650
+ // Randomly update some prices
651
+ const randomIndex = Math.floor(Math.random() * cryptoData.length);
652
+ const change = (Math.random() - 0.5) * 2; // Random change between -1% and +1%
653
+
654
+ cryptoData[randomIndex].price *= (1 + change/100);
655
+ cryptoData[randomIndex].change24h += change;
656
+
657
+ // Update the table cell
658
+ const priceCells = document.querySelectorAll('tbody tr td:nth-child(3)');
659
+ const changeCells = document.querySelectorAll('tbody tr td:nth-child(4)');
660
+
661
+ const formattedPrice = cryptoData[randomIndex].price.toLocaleString('en-US', {
662
+ style: 'currency',
663
+ currency: 'USD',
664
+ minimumFractionDigits: cryptoData[randomIndex].price < 1 ? 4 : 2,
665
+ maximumFractionDigits: cryptoData[randomIndex].price < 1 ? 6 : 2
666
+ });
667
+
668
+ priceCells[randomIndex].textContent = formattedPrice;
669
+ changeCells[randomIndex].textContent = `${cryptoData[randomIndex].change24h >= 0 ? '+' : ''}${cryptoData[randomIndex].change24h.toFixed(2)}%`;
670
+
671
+ // Update color class
672
+ if (cryptoData[randomIndex].change24h >= 0) {
673
+ changeCells[randomIndex].classList.remove('price-down');
674
+ changeCells[randomIndex].classList.add('price-up');
675
+ } else {
676
+ changeCells[randomIndex].classList.remove('price-up');
677
+ changeCells[randomIndex].classList.add('price-down');
678
+ }
679
+
680
+ // Add flash animation
681
+ gsap.fromTo(priceCells[randomIndex],
682
+ { backgroundColor: 'rgba(5, 217, 232, 0.3)' },
683
+ { backgroundColor: 'transparent', duration: 1 }
684
+ );
685
+
686
+ }, 3000);
687
+ });
688
+ </script>
689
+ <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=omerencinar/crypto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
690
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a crypto tracker site with Next.js + D3.js + GSAP. Aesthetic: Neon-on-dark, cyberpunk glow, glassmorphism panels. Layout: Sticky vertical nav, dynamic dashboard with live cards. Motion: Real-time chart pulses, inertia-based tab transitions, button glows on hover.