Hugging Face's logo

Spaces:
nick5363
/
Nick
Running

App Files Community
nick5363 commited on
Commit
835fbb3
·
verified ·
1 Parent(s): d1bd101

Upload index.html

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