Hugging Face's logo

Spaces:
nick5363
/
Nick
Running

App Files Community
nick5363 commited on
Commit
8f05157
·
verified ·
1 Parent(s): f76df63

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +494 -0
index.html ADDED
@@ -0,0 +1,494 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>NhatTran - Dashboard</title>
7
+ <style>
8
+ body {
9
+ background-color: #0f0f0f;
10
+ color: white;
11
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
12
+ margin: 0;
13
+ padding: 0;
14
+ height: 100vh;
15
+ display: flex;
16
+ flex-direction: column;
17
+ overflow: hidden;
18
+ }
19
+
20
+ h1 {
21
+ font-size: 1.4rem;
22
+ margin: 12px 0;
23
+ text-align: center;
24
+ }
25
+
26
+ .clock-container {
27
+ margin: 2px auto;
28
+ text-align: center;
29
+ font-size: 1rem;
30
+ width: 100%;
31
+ max-width: 500px;
32
+ }
33
+
34
+ .market-overview {
35
+ background-color: #1a1a1a;
36
+ padding: 10px;
37
+ margin: 5px auto;
38
+ width: 100%;
39
+ max-width: 500px;
40
+ border-radius: 8px;
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ .market-overview h2 {
45
+ font-size: 1.1rem;
46
+ margin: 0 0 10px 0;
47
+ }
48
+
49
+ .tab-content {
50
+ flex: 1;
51
+ overflow-y: auto;
52
+ padding: 10px;
53
+ width: 100%;
54
+ max-width: 500px;
55
+ margin: 0 auto;
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ .tab-content > div {
60
+ display: none;
61
+ }
62
+
63
+ .tab-content > div.active {
64
+ display: block;
65
+ }
66
+
67
+ .tab-content iframe,
68
+ .tab-content .tradingview-widget-container {
69
+ width: 100% !important;
70
+ height: auto;
71
+ min-height: 400px;
72
+ margin: 0 auto;
73
+ box-sizing: border-box;
74
+ }
75
+
76
+ .tabs {
77
+ position: fixed;
78
+ bottom: 0;
79
+ width: 100%;
80
+ background-color: #1a1a1a;
81
+ display: flex;
82
+ flex-wrap: nowrap;
83
+ overflow-x: auto;
84
+ padding: 10px 0;
85
+ border-top: 1px solid #333;
86
+ scrollbar-width: thin;
87
+ scrollbar-color: #555 #1a1a1a;
88
+ z-index: 999;
89
+ }
90
+
91
+ .tabs::-webkit-scrollbar {
92
+ height: 6px;
93
+ }
94
+
95
+ .tabs::-webkit-scrollbar-thumb {
96
+ background: #555;
97
+ border-radius: 3px;
98
+ }
99
+
100
+ .tabs button {
101
+ background-color: transparent;
102
+ color: #ccc;
103
+ border: none;
104
+ padding: 6px 8px;
105
+ cursor: pointer;
106
+ font-size: 0.9rem;
107
+ flex: 0 0 auto;
108
+ margin: 0 5px;
109
+ white-space: nowrap;
110
+ }
111
+
112
+ .tabs button.active {
113
+ color: white;
114
+ font-weight: bold;
115
+ }
116
+
117
+ .tabs button:hover {
118
+ color: white;
119
+ }
120
+
121
+ /* Responsive iPhone */
122
+ @media (max-width: 430px) {
123
+ h1 {
124
+ font-size: 1.2rem;
125
+ }
126
+
127
+ .clock-container {
128
+ font-size: 0.9rem;
129
+ }
130
+
131
+ .tabs button {
132
+ font-size: 0.8rem;
133
+ padding: 6px 4px;
134
+ }
135
+
136
+ .market-overview h2 {
137
+ font-size: 1rem;
138
+ }
139
+ }
140
+
141
+ /* Responsive iPad */
142
+ @media (min-width: 431px) and (max-width: 820px) {
143
+ h1 {
144
+ font-size: 1.6rem;
145
+ }
146
+
147
+ .clock-container {
148
+ font-size: 1.2rem;
149
+ }
150
+
151
+ .tabs button {
152
+ font-size: 1rem;
153
+ padding: 8px 6px;
154
+ }
155
+
156
+ .market-overview h2 {
157
+ font-size: 1.2rem;
158
+ }
159
+ }
160
+
161
+ @media (min-width: 821px) {
162
+ h1 {
163
+ font-size: 2rem;
164
+ }
165
+ .tabs button {
166
+ font-size: 1.2rem;
167
+ }
168
+ }
169
+ </style>
170
+ </head>
171
+ <body>
172
+
173
+ <h1>NhatTranView Dashboard</h1>
174
+
175
+ <div class="clock-container">
176
+ <script src="https://cdn.logwork.com/widget/digital.js"></script>
177
+ <a href="https://logwork.com/current-time-in-los-angeles-united-states-california" class="digital-clock" data-style="round" data-size="348" data-timezone="America/Los_Angeles" data-language="en">Los Angeles, United States</a>
178
+ </div>
179
+
180
+ <div id="market-status" style="text-align:center; font-size: 0.65rem; padding: 7px;">
181
+ <strong id="status-text" style="color: #ffffff;">Loading...</strong><br>
182
+ <span id="countdown" style="font-size: 1.0rem; font-weight: bold;"></span>
183
+ </div>
184
+
185
+ <script>
186
+ function updateCountdown() {
187
+ const now = new Date();
188
+ const day = now.getDay();
189
+ const hours = now.getHours();
190
+ const minutes = now.getMinutes();
191
+
192
+ const openHour = 6;
193
+ const openMin = 30;
194
+ const closeHour = 13;
195
+ const closeMin = 0;
196
+
197
+ const statusText = document.getElementById("status-text");
198
+ const countdown = document.getElementById("countdown");
199
+
200
+ if (day === 0 || day === 6) {
201
+ statusText.innerText = "Market Closed (Weekend)";
202
+ statusText.style.color = "#999999";
203
+ countdown.innerText = "";
204
+ return;
205
+ }
206
+
207
+ const nowSeconds = hours * 3600 + minutes * 60 + now.getSeconds();
208
+ const openSeconds = openHour * 3600 + openMin * 60;
209
+ const closeSeconds = closeHour * 3600 + closeMin * 60;
210
+
211
+ if (nowSeconds < openSeconds) {
212
+ const diff = openSeconds - nowSeconds;
213
+ statusText.innerText = "Market opens in:";
214
+ statusText.style.color = "#00cc66"; // Xanh lá
215
+ countdown.innerText = formatTime(diff);
216
+ countdown.style.color = "#00cc66";
217
+ } else if (nowSeconds < closeSeconds) {
218
+ const diff = closeSeconds - nowSeconds;
219
+ statusText.innerText = "Market closes in:";
220
+ statusText.style.color = "#ffcc00"; // Cam vàng
221
+ countdown.innerText = formatTime(diff);
222
+ countdown.style.color = "#ffcc00";
223
+ } else {
224
+ statusText.innerText = "Market Closed";
225
+ statusText.style.color = "#999999"; // Xám
226
+ countdown.innerText = "";
227
+ }
228
+ }
229
+
230
+ function formatTime(seconds) {
231
+ const h = Math.floor(seconds / 3600);
232
+ const m = Math.floor((seconds % 3600) / 60);
233
+ const s = seconds % 60;
234
+ return `${h.toString().padStart(2, '0')}h ${m.toString().padStart(2, '0')}m ${s.toString().padStart(2, '0')}s`;
235
+ }
236
+
237
+ setInterval(updateCountdown, 1000);
238
+ updateCountdown();
239
+ </script>
240
+
241
+ <div class="market-overview">
242
+
243
+ <div class="tradingview-widget-container">
244
+ <div class="tradingview-widget-container__widget"></div>
245
+ <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
246
+ <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
247
+ {
248
+ "symbols": [
249
+ { "proName": "FOREXCOM:SPXUSD", "title": "S&P 500 Index" },
250
+ { "description": "DJI", "proName": "FOREXCOM:DJI" },
251
+ { "description": "NASDAQ", "proName": "NASDAQ:IXIC" },
252
+ { "description": "BITCOIN", "proName": "INDEX:BTCUSD" },
253
+ { "description": "GOLD", "proName": "CAPITALCOM:GOLD" },
254
+ { "description": "VIX", "proName": "FXOPEN:VIX" }
255
+ ],
256
+ "showSymbolLogo": true,
257
+ "isTransparent": false,
258
+ "displayMode": "compact",
259
+ "colorTheme": "dark",
260
+ "locale": "en"
261
+ }
262
+ </script>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="tab-content">
267
+ <div id="chart" class="active">
268
+
269
+ <!-- TradingView Widget BEGIN -->
270
+ <div class="tradingview-widget-container" style="height:600;width:100%">
271
+ <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
272
+ <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
273
+ <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
274
+ {
275
+ "autosize": true,
276
+ "symbol": "VANTAGE:SP500FT",
277
+ "interval": "60",
278
+ "timezone": "America/Los_Angeles",
279
+ "theme": "light",
280
+ "style": "1",
281
+ "locale": "en",
282
+ "allow_symbol_change": true,
283
+ "save_image": false,
284
+ "studies": [
285
+ "STD;Donchian_Channels",
286
+ "STD;MACD"
287
+ ],
288
+ "hide_volume": true,
289
+ "support_host": "https://www.tradingview.com"
290
+ }
291
+ </script>
292
+ </div>
293
+ <!-- TradingView Widget END -->
294
+ </div>
295
+
296
+ <div id="futures">
297
+
298
+ <!-- TradingView Widget BEGIN -->
299
+ <div class="tradingview-widget-container">
300
+ <div class="tradingview-widget-container__widget"></div>
301
+ <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
302
+ <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
303
+ {
304
+ "colorTheme": "dark",
305
+ "dateRange": "12M",
306
+ "showChart": false,
307
+ "locale": "en",
308
+ "largeChartUrl": "",
309
+ "isTransparent": false,
310
+ "showSymbolLogo": true,
311
+ "showFloatingTooltip": false,
312
+ "width": "350",
313
+ "height": "100",
314
+ "tabs": [
315
+ {
316
+ "title": "Futures",
317
+ "symbols": [
318
+ {
319
+ "s": "VANTAGE:DJ30FT",
320
+ "d": "DOW JONES FT"
321
+ },
322
+ {
323
+ "s": "VANTAGE:SP500FT",
324
+ "d": "S&P500 FT"
325
+ },
326
+ {
327
+ "s": "SWISSQUOTE:NAS100M2025",
328
+ "d": "NASDAQ 100 FT"
329
+ }
330
+ ],
331
+ "originalTitle": "Futures"
332
+ }
333
+ ]
334
+ }
335
+ </script>
336
+ </div>
337
+ <!-- TradingView Widget END -->
338
+ </div>
339
+
340
+ <div id="news">
341
+
342
+ <iframe src="https://nick5363-web.hf.space" frameborder="0" width="100%" height="400"></iframe>
343
+ </div>
344
+
345
+ <div id="Expected Move">
346
+
347
+ <iframe
348
+ src="https://nick5363-nhat-tran.hf.space"
349
+ frameborder="0"
350
+ style="width:100%;min-height:450px;"></iframe>
351
+ </div>
352
+
353
+ <div id="ER">
354
+
355
+ <iframe
356
+ src="https://m.investing.com/earnings-calendar/"
357
+ width="100%"
358
+ height="850"
359
+ frameborder="0"
360
+ style="border: none; border-radius: 8px; background-color: #0f0f0f;">
361
+ </iframe>
362
+ </div>
363
+
364
+ <div id="heatmap">
365
+
366
+ <!-- TradingView Widget BEGIN -->
367
+ <div class="tradingview-widget-container">
368
+ <div class="tradingview-widget-container__widget"></div>
369
+ <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
370
+ <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-stock-heatmap.js" async>
371
+ {
372
+ "exchanges": [],
373
+ "dataSource": "SPX500",
374
+ "grouping": "sector",
375
+ "blockSize": "market_cap_basic",
376
+ "blockColor": "change",
377
+ "locale": "en",
378
+ "symbolUrl": "",
379
+ "colorTheme": "dark",
380
+ "hasTopBar": false,
381
+ "isDataSetEnabled": false,
382
+ "isZoomEnabled": true,
383
+ "hasSymbolTooltip": true,
384
+ "isMonoSize": false,
385
+ "width": "100%",
386
+ "height": "100%"
387
+ }
388
+ </script>
389
+ </div>
390
+ <!-- TradingView Widget END -->
391
+ </div>
392
+
393
+
394
+
395
+
396
+
397
+ <div id="mke" style="width: 100%; padding: 10px 0;">
398
+
399
+
400
+ <iframe
401
+ src="https://sslecal2.investing.com?ecoDayBackground=%23260707&defaultFont=%23ed5503&innerBorderColor=%23140808&borderColor=%230f0808&ecoDayFontColor=%23050101&columns=exc_flags,exc_importance,exc_event,exc_actual,exc_previous&category=_employment,_economicActivity,_inflation,_credit,_centralBanks,_confidenceIndex,_balance,_Bonds&importance=1,2,3&features=timeselector&countries=5&calType=day&timeZone=5&lang=1"
402
+ width="100%"
403
+ height="500"
404
+ frameborder="0"
405
+ style="border: none;">
406
+ </iframe>
407
+
408
+ <div style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #999; text-align: center; margin-top: 6px;">
409
+ Real Time Economic Calendar by
410
+ <a href="https://www.investing.com/" target="_blank" style="color: #4fa2ff; font-weight: bold;">Investing.com</a>
411
+ </div>
412
+ </div>
413
+
414
+
415
+ <div id="F&G">
416
+ <div style="max-width: 415px; margin: 0 auto; padding: 10px;">
417
+
418
+ <iframe
419
+ src="https://feargreedmeter.com/fear-and-greed-index"
420
+ width="100%"
421
+ height="600"
422
+ frameborder="0"
423
+ style="border: none; border-radius: 8px; background-color: #0f0f0f;">
424
+ </iframe>
425
+ </div>
426
+ </div>
427
+
428
+
429
+ <div id="Hours">
430
+ <iframe
431
+ src="https://nick5363-hours.static.hf.space"
432
+ frameborder="0"
433
+ style="width:100%;min-height:400px;"
434
+ ></iframe>
435
+ </div>
436
+
437
+
438
+
439
+ <div id="exchange-rate">
440
+
441
+ <iframe style="border: 1px solid #000000" width="100%" height="200" src="https://chogia.vn/ma-nhung-cho-iframe?ma=gold"></iframe>
442
+ <iframe style="border: 1px solid #000000" width="100%" height="400" src="https://chogia.vn/ma-nhung-cho-iframe?ma=ofr"></iframe>
443
+
444
+
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+
450
+
451
+ <div class="tabs" >
452
+ <button class="tab-button active" onclick="openTab('chart')">Chart</button>
453
+ <button class="tab-button" onclick="openTab('futures')">Futures</button>
454
+ <button class="tab-button" onclick="openTab('F&G')">Fear</button>
455
+ <button class="tab-button" onclick="openTab('ER')">ER</button>
456
+ <button class="tab-button" onclick="openTab('news')">News</button>
457
+ <button class="tab-button" onclick="openTab('heatmap')">Heat Map</button>
458
+ <button class="tab-button" onclick="openTab('mke')">Events</button>
459
+ <button class="tab-button" onclick="openTab('exchange-rate')">Tỷ Giá</button>
460
+ <button class="tab-button" onclick="openTab('Hours')">Hours</button>
461
+ <button class="tab-button" onclick="openTab('Expected Move')">E-Move</button>
462
+ </div>
463
+ </div>
464
+
465
+ <script>
466
+ function openTab(tabName) {
467
+ // Hide all tab contents
468
+ const tabContents = document.querySelectorAll('.tab-content > div');
469
+ tabContents.forEach(content => {
470
+ content.classList.remove('active');
471
+ });
472
+
473
+ // Remove active class from all buttons
474
+ const tabButtons = document.querySelectorAll('.tab-button');
475
+ tabButtons.forEach(button => {
476
+ button.classList.remove('active');
477
+ });
478
+
479
+ // Show the selected tab content
480
+ const selectedTab = document.getElementById(tabName);
481
+ if (selectedTab) {
482
+ selectedTab.classList.add('active');
483
+ }
484
+
485
+ // Add active class to the clicked button
486
+ const clickedButton = document.querySelector(`button[onclick="openTab('${tabName}')"]`);
487
+ if (clickedButton) {
488
+ clickedButton.classList.add('active');
489
+ }
490
+ }
491
+ </script>
492
+
493
+ </body>
494
+ </html>