Hugging Face's logo

Spaces:
nick5363
/
Nick
Running

App Files Community
nick5363 commited on
Commit
c2bc6bb
·
verified ·
1 Parent(s): f013e2a

Upload index.html

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