Hugging Face's logo

Spaces:
privateuserh
/
privspot
Running

App Files Community
privateuserh commited on
Commit
fa36d1a
·
verified ·
1 Parent(s): be8f4e3

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +554 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privspot
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: privspot
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
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,554 @@
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>Cotton Commodity Dashboard</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 CSS for floating window */
11
+ .floating-window {
12
+ position: fixed;
13
+ bottom: 30px;
14
+ right: 30px;
15
+ width: 350px;
16
+ background: white;
17
+ border-radius: 15px;
18
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
19
+ z-index: 1000;
20
+ transform: translateY(100px);
21
+ opacity: 0;
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .floating-window.active {
26
+ transform: translateY(0);
27
+ opacity: 1;
28
+ }
29
+
30
+ .floating-btn {
31
+ position: fixed;
32
+ bottom: 30px;
33
+ right: 30px;
34
+ width: 60px;
35
+ height: 60px;
36
+ background: linear-gradient(135deg, #3b82f6, #1d4ed8);
37
+ color: white;
38
+ border-radius: 50%;
39
+ display: flex;
40
+ justify-content: center;
41
+ align-items: center;
42
+ cursor: pointer;
43
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
44
+ z-index: 1001;
45
+ }
46
+
47
+ .tab-content {
48
+ display: none;
49
+ }
50
+
51
+ .tab-content.active {
52
+ display: block;
53
+ }
54
+
55
+ .chart-container {
56
+ height: 300px;
57
+ position: relative;
58
+ }
59
+
60
+ .spinner {
61
+ border: 4px solid rgba(0, 0, 0, 0.1);
62
+ border-radius: 50%;
63
+ border-top: 4px solid #3b82f6;
64
+ width: 40px;
65
+ height: 40px;
66
+ animation: spin 1s linear infinite;
67
+ margin: 20px auto;
68
+ }
69
+
70
+ @keyframes spin {
71
+ 0% { transform: rotate(0deg); }
72
+ 100% { transform: rotate(360deg); }
73
+ }
74
+
75
+ .price-up {
76
+ color: #10b981;
77
+ }
78
+
79
+ .price-down {
80
+ color: #ef4444;
81
+ }
82
+
83
+ .blurred {
84
+ filter: blur(5px);
85
+ user-select: none;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body class="bg-gray-50">
90
+ <div class="container mx-auto px-4 py-8">
91
+ <header class="mb-8">
92
+ <div class="flex justify-between items-center">
93
+ <h1 class="text-3xl font-bold text-gray-800">Cotton Commodity Dashboard</h1>
94
+ <div class="flex items-center space-x-4">
95
+ <span class="text-sm text-gray-600">Last updated: <span id="update-time">Just now</span></span>
96
+ <button id="refresh-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
97
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
98
+ </button>
99
+ </div>
100
+ </div>
101
+ <p class="text-gray-600 mt-2">Real-time cotton prices, forecasts, and trading options</p>
102
+ </header>
103
+
104
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
105
+ <!-- Current Price Card -->
106
+ <div class="bg-white rounded-xl shadow-md p-6">
107
+ <div class="flex justify-between items-start">
108
+ <div>
109
+ <h2 class="text-lg font-semibold text-gray-700">Current Price</h2>
110
+ <div class="mt-2 flex items-end">
111
+ <span id="current-price" class="text-3xl font-bold text-gray-900">0.85</span>
112
+ <span class="ml-2 text-lg font-medium">USD/lb</span>
113
+ </div>
114
+ </div>
115
+ <div id="price-change" class="px-3 py-1 rounded-full bg-green-100 text-green-800 flex items-center">
116
+ <i class="fas fa-caret-up mr-1"></i>
117
+ <span>+0.02 (2.4%)</span>
118
+ </div>
119
+ </div>
120
+ <div class="mt-4 pt-4 border-t border-gray-100">
121
+ <div class="grid grid-cols-2 gap-4">
122
+ <div>
123
+ <p class="text-sm text-gray-500">Open</p>
124
+ <p class="font-medium">0.83</p>
125
+ </div>
126
+ <div>
127
+ <p class="text-sm text-gray-500">High</p>
128
+ <p class="font-medium">0.86</p>
129
+ </div>
130
+ <div>
131
+ <p class="text-sm text-gray-500">Low</p>
132
+ <p class="font-medium">0.82</p>
133
+ </div>
134
+ <div>
135
+ <p class="text-sm text-gray-500">Volume</p>
136
+ <p class="font-medium">12.5K</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Market Sentiment Card -->
143
+ <div class="bg-white rounded-xl shadow-md p-6">
144
+ <h2 class="text-lg font-semibold text-gray-700 mb-4">Market Sentiment</h2>
145
+ <div class="flex items-center justify-between mb-3">
146
+ <span class="text-sm font-medium">Bullish</span>
147
+ <span class="text-sm font-medium">65%</span>
148
+ </div>
149
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
150
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 65%"></div>
151
+ </div>
152
+ <div class="mt-6">
153
+ <h3 class="text-sm font-medium text-gray-700 mb-2">Key Factors</h3>
154
+ <ul class="space-y-2">
155
+ <li class="flex items-start">
156
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
157
+ <span class="text-sm">Strong demand from textile industry</span>
158
+ </li>
159
+ <li class="flex items-start">
160
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
161
+ <span class="text-sm">Lower production in key regions</span>
162
+ </li>
163
+ <li class="flex items-start">
164
+ <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
165
+ <span class="text-sm">Potential weather disruptions</span>
166
+ </li>
167
+ </ul>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Forecast Card -->
172
+ <div class="bg-white rounded-xl shadow-md p-6">
173
+ <h2 class="text-lg font-semibold text-gray-700 mb-4">3-Month Forecast</h2>
174
+ <div class="flex items-center justify-between mb-2">
175
+ <span class="text-sm font-medium">Low Estimate</span>
176
+ <span class="text-sm font-medium text-blue-600">0.78 USD/lb</span>
177
+ </div>
178
+ <div class="flex items-center justify-between mb-2">
179
+ <span class="text-sm font-medium">Median Estimate</span>
180
+ <span class="text-sm font-medium text-blue-600">0.87 USD/lb</span>
181
+ </div>
182
+ <div class="flex items-center justify-between mb-4">
183
+ <span class="text-sm font-medium">High Estimate</span>
184
+ <span class="text-sm font-medium text-blue-600">0.95 USD/lb</span>
185
+ </div>
186
+ <div class="mt-4 pt-4 border-t border-gray-100">
187
+ <h3 class="text-sm font-medium text-gray-700 mb-2">Analyst Consensus</h3>
188
+ <p class="text-sm text-gray-600">Most analysts expect prices to remain stable with moderate upside potential due to constrained supply and steady demand growth in Asian markets.</p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Chart Section -->
194
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
195
+ <div class="flex justify-between items-center mb-6">
196
+ <h2 class="text-xl font-semibold text-gray-800">Price History</h2>
197
+ <div class="flex space-x-2">
198
+ <button class="time-btn active px-3 py-1 bg-blue-500 text-white rounded-lg" data-period="1M">1M</button>
199
+ <button class="time-btn px-3 py-1 bg-gray-200 text-gray-700 rounded-lg" data-period="3M">3M</button>
200
+ <button class="time-btn px-3 py-1 bg-gray-200 text-gray-700 rounded-lg" data-period="6M">6M</button>
201
+ <button class="time-btn px-3 py-1 bg-gray-200 text-gray-700 rounded-lg" data-period="1Y">1Y</button>
202
+ </div>
203
+ </div>
204
+ <div class="chart-container">
205
+ <canvas id="price-chart"></canvas>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- News Section -->
210
+ <div class="bg-white rounded-xl shadow-md p-6">
211
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">Market News</h2>
212
+ <div class="space-y-4">
213
+ <div class="p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition">
214
+ <h3 class="font-medium text-blue-600">USDA Reports Lower Cotton Stocks</h3>
215
+ <p class="text-sm text-gray-600 mt-1">The USDA's latest report shows cotton stocks at their lowest level in 3 years, supporting higher prices in the near term.</p>
216
+ <div class="flex items-center mt-2 text-xs text-gray-500">
217
+ <span>2 hours ago</span>
218
+ <span class="mx-2">•</span>
219
+ <span>Bloomberg</span>
220
+ </div>
221
+ </div>
222
+ <div class="p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition">
223
+ <h3 class="font-medium text-blue-600">India Cotton Production Expected to Drop 15%</h3>
224
+ <p class="text-sm text-gray-600 mt-1">Unfavorable weather conditions in major growing regions may lead to significant production declines in the world's second-largest producer.</p>
225
+ <div class="flex items-center mt-2 text-xs text-gray-500">
226
+ <span>5 hours ago</span>
227
+ <span class="mx-2">•</span>
228
+ <span>Reuters</span>
229
+ </div>
230
+ </div>
231
+ <div class="p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition">
232
+ <h3 class="font-medium text-blue-600">Vietnam Textile Exports Surge in Q2</h3>
233
+ <p class="text-sm text-gray-600 mt-1">Increased demand from European markets is driving Vietnam's textile exports, creating additional demand for cotton imports.</p>
234
+ <div class="flex items-center mt-2 text-xs text-gray-500">
235
+ <span>1 day ago</span>
236
+ <span class="mx-2">•</span>
237
+ <span>CNBC</span>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Floating Button -->
245
+ <div class="floating-btn" id="trade-btn">
246
+ <i class="fas fa-shopping-cart text-xl"></i>
247
+ </div>
248
+
249
+ <!-- Floating Window -->
250
+ <div class="floating-window" id="trade-window">
251
+ <div class="bg-gray-800 text-white px-4 py-3 rounded-t-lg flex justify-between items-center">
252
+ <h3 class="font-medium">Trade Cotton</h3>
253
+ <button id="close-window" class="text-gray-300 hover:text-white">
254
+ <i class="fas fa-times"></i>
255
+ </button>
256
+ </div>
257
+
258
+ <div class="p-4">
259
+ <div class="flex border-b border-gray-200">
260
+ <button class="tab-btn active px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="buy">Buy</button>
261
+ <button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="convert">Convert</button>
262
+ </div>
263
+
264
+ <div class="tab-content active" id="buy-tab">
265
+ <div class="mt-4">
266
+ <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
267
+ <div class="grid grid-cols-2 gap-2 mb-4">
268
+ <button class="crypto-btn active py-2 px-3 bg-blue-100 text-blue-700 rounded-lg border border-blue-200 flex items-center justify-center" data-crypto="btc">
269
+ <i class="fab fa-bitcoin mr-2"></i> Bitcoin
270
+ </button>
271
+ <button class="crypto-btn py-2 px-3 bg-gray-100 text-gray-700 rounded-lg border border-gray-200 flex items-center justify-center" data-crypto="bch">
272
+ <i class="fas fa-money-bill-wave mr-2"></i> Bitcoin Cash
273
+ </button>
274
+ </div>
275
+
276
+ <div class="mb-4">
277
+ <label class="block text-sm font-medium text-gray-700 mb-1">Amount (lbs)</label>
278
+ <div class="relative">
279
+ <input type="number" id="cotton-amount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="100" min="10" step="10">
280
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
281
+ <span class="text-gray-500">lbs</span>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="bg-gray-50 p-3 rounded-lg mb-4">
287
+ <div class="flex justify-between mb-2">
288
+ <span class="text-sm text-gray-600">Price per lb</span>
289
+ <span class="text-sm font-medium" id="crypto-price">0.0000023 BTC</span>
290
+ </div>
291
+ <div class="flex justify-between mb-2">
292
+ <span class="text-sm text-gray-600">Total Cost</span>
293
+ <span class="text-sm font-medium" id="total-cost">0.00023 BTC</span>
294
+ </div>
295
+ <div class="flex justify-between">
296
+ <span class="text-sm text-gray-600">Equivalent</span>
297
+ <span class="text-sm font-medium" id="fiat-equivalent">≈ $85.00</span>
298
+ </div>
299
+ </div>
300
+
301
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium flex items-center justify-center">
302
+ <i class="fas fa-lock mr-2"></i> Confirm Purchase
303
+ </button>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="tab-content" id="convert-tab">
308
+ <div class="mt-4">
309
+ <div class="mb-4">
310
+ <label class="block text-sm font-medium text-gray-700 mb-1">From</label>
311
+ <div class="relative">
312
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 appearance-none">
313
+ <option>US Dollar (USD)</option>
314
+ <option>Bitcoin (BTC)</option>
315
+ <option>Bitcoin Cash (BCH)</option>
316
+ <option>Ethereum (ETH)</option>
317
+ </select>
318
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
319
+ <i class="fas fa-chevron-down text-gray-400"></i>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="mb-4">
325
+ <label class="block text-sm font-medium text-gray-700 mb-1">To</label>
326
+ <div class="relative">
327
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 appearance-none">
328
+ <option>Bitcoin (BTC)</option>
329
+ <option>Bitcoin Cash (BCH)</option>
330
+ <option>US Dollar (USD)</option>
331
+ <option>Ethereum (ETH)</option>
332
+ </select>
333
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
334
+ <i class="fas fa-chevron-down text-gray-400"></i>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="mb-4">
340
+ <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
341
+ <input type="number" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="100">
342
+ </div>
343
+
344
+ <div class="bg-gray-50 p-3 rounded-lg mb-4">
345
+ <div class="flex justify-between">
346
+ <span class="text-sm text-gray-600">Exchange Rate</span>
347
+ <span class="text-sm font-medium">1 BTC = 37,000 USD</span>
348
+ </div>
349
+ <div class="flex justify-between mt-2">
350
+ <span class="text-sm text-gray-600">You Receive</span>
351
+ <span class="text-sm font-medium">0.0027 BTC</span>
352
+ </div>
353
+ </div>
354
+
355
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium flex items-center justify-center">
356
+ <i class="fas fa-exchange-alt mr-2"></i> Convert Now
357
+ </button>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
364
+ <script>
365
+ // Initialize the floating window
366
+ const tradeBtn = document.getElementById('trade-btn');
367
+ const tradeWindow = document.getElementById('trade-window');
368
+ const closeWindow = document.getElementById('close-window');
369
+
370
+ tradeBtn.addEventListener('click', () => {
371
+ tradeWindow.classList.toggle('active');
372
+ });
373
+
374
+ closeWindow.addEventListener('click', () => {
375
+ tradeWindow.classList.remove('active');
376
+ });
377
+
378
+ // Tab functionality
379
+ const tabBtns = document.querySelectorAll('.tab-btn');
380
+ tabBtns.forEach(btn => {
381
+ btn.addEventListener('click', () => {
382
+ // Remove active class from all buttons and tabs
383
+ tabBtns.forEach(b => b.classList.remove('active', 'text-blue-600', 'border-blue-600'));
384
+ document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
385
+
386
+ // Add active class to clicked button
387
+ btn.classList.add('active', 'text-blue-600', 'border-blue-600');
388
+
389
+ // Show corresponding tab
390
+ const tabId = btn.getAttribute('data-tab') + '-tab';
391
+ document.getElementById(tabId).classList.add('active');
392
+ });
393
+ });
394
+
395
+ // Crypto selection
396
+ const cryptoBtns = document.querySelectorAll('.crypto-btn');
397
+ cryptoBtns.forEach(btn => {
398
+ btn.addEventListener('click', () => {
399
+ cryptoBtns.forEach(b => b.classList.remove('active', 'bg-blue-100', 'text-blue-700', 'border-blue-200'));
400
+ btn.classList.add('active', 'bg-blue-100', 'text-blue-700', 'border-blue-200');
401
+
402
+ // Update prices based on selected crypto
403
+ updateCryptoPrices(btn.getAttribute('data-crypto'));
404
+ });
405
+ });
406
+
407
+ function updateCryptoPrices(crypto) {
408
+ // These would normally come from an API
409
+ const prices = {
410
+ btc: { price: 0.0000023, symbol: 'BTC' },
411
+ bch: { price: 0.00012, symbol: 'BCH' }
412
+ };
413
+
414
+ const selected = prices[crypto];
415
+ const amount = document.getElementById('cotton-amount').value;
416
+ const total = (amount * selected.price).toFixed(6);
417
+ const usdValue = (amount * 0.85).toFixed(2);
418
+
419
+ document.getElementById('crypto-price').textContent = `${selected.price} ${selected.symbol}`;
420
+ document.getElementById('total-cost').textContent = `${total} ${selected.symbol}`;
421
+ document.getElementById('fiat-equivalent').textContent = `≈ $${usdValue}`;
422
+ }
423
+
424
+ // Update calculations when amount changes
425
+ document.getElementById('cotton-amount').addEventListener('input', function() {
426
+ const activeCrypto = document.querySelector('.crypto-btn.active').getAttribute('data-crypto');
427
+ updateCryptoPrices(activeCrypto);
428
+ });
429
+
430
+ // Time period buttons
431
+ const timeBtns = document.querySelectorAll('.time-btn');
432
+ timeBtns.forEach(btn => {
433
+ btn.addEventListener('click', () => {
434
+ timeBtns.forEach(b => b.classList.remove('active', 'bg-blue-500', 'text-white'));
435
+ btn.classList.add('active', 'bg-blue-500', 'text-white');
436
+
437
+ // Here you would normally fetch new chart data based on the selected period
438
+ // For demo purposes, we'll just update the chart with random data
439
+ updateChart(btn.getAttribute('data-period'));
440
+ });
441
+ });
442
+
443
+ // Initialize chart
444
+ const ctx = document.getElementById('price-chart').getContext('2d');
445
+ let priceChart = new Chart(ctx, {
446
+ type: 'line',
447
+ data: {
448
+ labels: [],
449
+ datasets: [{
450
+ label: 'Cotton Price (USD/lb)',
451
+ data: [],
452
+ borderColor: '#3b82f6',
453
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
454
+ borderWidth: 2,
455
+ fill: true,
456
+ tension: 0.4
457
+ }]
458
+ },
459
+ options: {
460
+ responsive: true,
461
+ maintainAspectRatio: false,
462
+ plugins: {
463
+ legend: {
464
+ display: false
465
+ },
466
+ tooltip: {
467
+ mode: 'index',
468
+ intersect: false,
469
+ }
470
+ },
471
+ scales: {
472
+ y: {
473
+ beginAtZero: false,
474
+ grid: {
475
+ drawBorder: false
476
+ }
477
+ },
478
+ x: {
479
+ grid: {
480
+ display: false
481
+ }
482
+ }
483
+ }
484
+ }
485
+ });
486
+
487
+ // Function to update chart with sample data
488
+ function updateChart(period) {
489
+ let labels = [];
490
+ let data = [];
491
+ let basePrice = 0.85;
492
+
493
+ // Generate sample data based on period
494
+ if (period === '1M') {
495
+ labels = ['Jun 1', 'Jun 5', 'Jun 10', 'Jun 15', 'Jun 20', 'Jun 25', 'Jun 30'];
496
+ data = [0.82, 0.83, 0.84, 0.86, 0.85, 0.84, 0.85];
497
+ } else if (period === '3M') {
498
+ labels = ['Apr', 'May', 'Jun'];
499
+ data = [0.78, 0.82, 0.85];
500
+ } else if (period === '6M') {
501
+ labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
502
+ data = [0.75, 0.76, 0.78, 0.80, 0.82, 0.85];
503
+ } else if (period === '1Y') {
504
+ labels = ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
505
+ data = [0.72, 0.74, 0.73, 0.75, 0.76, 0.77, 0.75, 0.76, 0.78, 0.80, 0.82, 0.85];
506
+ }
507
+
508
+ priceChart.data.labels = labels;
509
+ priceChart.data.datasets[0].data = data;
510
+ priceChart.update();
511
+ }
512
+
513
+ // Initialize with 1M data
514
+ updateChart('1M');
515
+
516
+ // Simulate API key (masked)
517
+ const apiKey = 'ebc6d2b48db541a:im201to74ucouji'.split('').map(() => '*').join('');
518
+ console.log('Using API key:', apiKey);
519
+
520
+ // Refresh button functionality
521
+ document.getElementById('refresh-btn').addEventListener('click', function() {
522
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Refreshing';
523
+ this.disabled = true;
524
+
525
+ // Simulate API refresh
526
+ setTimeout(() => {
527
+ this.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> Refresh';
528
+ this.disabled = false;
529
+
530
+ // Update timestamp
531
+ const now = new Date();
532
+ document.getElementById('update-time').textContent = now.toLocaleTimeString();
533
+
534
+ // Simulate small price change
535
+ const currentPriceEl = document.getElementById('current-price');
536
+ let price = parseFloat(currentPriceEl.textContent);
537
+ const change = (Math.random() * 0.02) * (Math.random() > 0.5 ? 1 : -1);
538
+ price = Math.round((price + change) * 100) / 100;
539
+ currentPriceEl.textContent = price.toFixed(2);
540
+
541
+ // Update change indicator
542
+ const changeEl = document.getElementById('price-change');
543
+ if (change >= 0) {
544
+ changeEl.innerHTML = `<i class="fas fa-caret-up mr-1"></i><span>+${change.toFixed(2)} (${(change/price*100).toFixed(1)}%)</span>`;
545
+ changeEl.className = 'px-3 py-1 rounded-full bg-green-100 text-green-800 flex items-center';
546
+ } else {
547
+ changeEl.innerHTML = `<i class="fas fa-caret-down mr-1"></i><span>${change.toFixed(2)} (${(change/price*100).toFixed(1)}%)</span>`;
548
+ changeEl.className = 'px-3 py-1 rounded-full bg-red-100 text-red-800 flex items-center';
549
+ }
550
+ }, 1500);
551
+ });
552
+ </script>
553
+ <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/privspot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
554
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create an app and display summary at https://tradingeconomics.com/commodity/cotton display stats, forecast at using Trading economics API ebc6d2b48db541a:im201to74ucouji mask the API but display a user friendly module make a floating window to purchase in Fractal Bitcoin and BCH at prices per lb. Also show a conversion window in the floating button