Hugging Face's logo

Spaces:
nick5363
/
Nick
Running

App Files Community
nick5363 commited on
Commit
ebdc2e5
·
verified ·
1 Parent(s): e6f2620

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
+
116
+ @media (max-width: 768px) {
117
+ h1 { font-size: 1rem; }
118
+ .tabs button { font-size: 0.6rem; padding: 6px 4px; }
119
+ .market-overview h2 { font-size: 0.9rem; }
120
+ }
121
+ @media (min-width: 769px) {
122
+ .tab-content iframe,
123
+ .tab-content .tradingview-widget-container {
124
+ max-width: 100%;
125
+ }
126
+ }
127
+
128
+ </style>
129
+ </head>
130
+ <body>
131
+
132
+ <h1>NhatTranView Dashboard</h1>
133
+
134
+ <div class="clock-container">
135
+ <script src="https://cdn.logwork.com/widget/digital.js"></script>
136
+ <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>
137
+ </div>
138
+
139
+ <div id="market-status" style="text-align:center; font-size: 0.65rem; padding: 7px;">
140
+ <strong id="status-text" style="color: #ffffff;">Loading...</strong><br>
141
+ <span id="countdown" style="font-size: 1.0rem; font-weight: bold;"></span>
142
+ </div>
143
+
144
+ <script>
145
+ function updateCountdown() {
146
+ const now = new Date();
147
+ const day = now.getDay();
148
+ const hours = now.getHours();
149
+ const minutes = now.getMinutes();
150
+
151
+ const openHour = 6;
152
+ const openMin = 30;
153
+ const closeHour = 13;
154
+ const closeMin = 0;
155
+
156
+ const statusText = document.getElementById("status-text");
157
+ const countdown = document.getElementById("countdown");
158
+
159
+ if (day === 0 || day === 6) {
160
+ statusText.innerText = "Market Closed (Weekend)";
161
+ statusText.style.color = "#999999";
162
+ countdown.innerText = "";
163
+ return;
164
+ }
165
+
166
+ const nowSeconds = hours * 3600 + minutes * 60 + now.getSeconds();
167
+ const openSeconds = openHour * 3600 + openMin * 60;
168
+ const closeSeconds = closeHour * 3600 + closeMin * 60;
169
+
170
+ if (nowSeconds < openSeconds) {
171
+ const diff = openSeconds - nowSeconds;
172
+ statusText.innerText = "Market opens in:";
173
+ statusText.style.color = "#00cc66"; // Xanh lá
174
+ countdown.innerText = formatTime(diff);
175
+ countdown.style.color = "#00cc66";
176
+ } else if (nowSeconds < closeSeconds) {
177
+ const diff = closeSeconds - nowSeconds;
178
+ statusText.innerText = "Market closes in:";
179
+ statusText.style.color = "#ffcc00"; // Cam vàng
180
+ countdown.innerText = formatTime(diff);
181
+ countdown.style.color = "#ffcc00";
182
+ } else {
183
+ statusText.innerText = "Market Closed";
184
+ statusText.style.color = "#999999"; // Xám
185
+ countdown.innerText = "";
186
+ }
187
+ }
188
+
189
+ function formatTime(seconds) {
190
+ const h = Math.floor(seconds / 3600);
191
+ const m = Math.floor((seconds % 3600) / 60);
192
+ const s = seconds % 60;
193
+ return `${h.toString().padStart(2, '0')}h ${m.toString().padStart(2, '0')}m ${s.toString().padStart(2, '0')}s`;
194
+ }
195
+
196
+ setInterval(updateCountdown, 1000);
197
+ updateCountdown();
198
+ </script>
199
+
200
+ <div class="market-overview">
201
+
202
+ <div class="tradingview-widget-container">
203
+ <div class="tradingview-widget-container__widget"></div>
204
+ <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>
205
+ <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
206
+ {
207
+ "symbols": [
208
+ { "proName": "FOREXCOM:SPXUSD", "title": "S&P 500 Index" },
209
+ { "description": "DJI", "proName": "FOREXCOM:DJI" },
210
+ { "description": "NASDAQ", "proName": "NASDAQ:IXIC" },
211
+ { "description": "BITCOIN", "proName": "INDEX:BTCUSD" },
212
+ { "description": "GOLD", "proName": "CAPITALCOM:GOLD" },
213
+ { "description": "VIX", "proName": "FXOPEN:VIX" }
214
+ ],
215
+ "showSymbolLogo": true,
216
+ "isTransparent": false,
217
+ "displayMode": "compact",
218
+ "colorTheme": "dark",
219
+ "locale": "en"
220
+ }
221
+ </script>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="tab-content">
226
+ <div id="chart" class="active">
227
+
228
+ <!-- TradingView Widget BEGIN -->
229
+ <div class="tradingview-widget-container" style="height:600;width:100%">
230
+ <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div>
231
+ <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>
232
+ <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
233
+ {
234
+ "autosize": true,
235
+ "symbol": "VANTAGE:SP500FT",
236
+ "interval": "60",
237
+ "timezone": "America/Los_Angeles",
238
+ "theme": "light",
239
+ "style": "1",
240
+ "locale": "en",
241
+ "allow_symbol_change": true,
242
+ "save_image": false,
243
+ "studies": [
244
+ "STD;Donchian_Channels",
245
+ "STD;MACD"
246
+ ],
247
+ "hide_volume": true,
248
+ "support_host": "https://www.tradingview.com"
249
+ }
250
+ </script>
251
+ </div>
252
+ <!-- TradingView Widget END -->
253
+ </div>
254
+
255
+ <div id="futures">
256
+
257
+ <!-- TradingView Widget BEGIN -->
258
+ <div class="tradingview-widget-container">
259
+ <div class="tradingview-widget-container__widget"></div>
260
+ <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>
261
+ <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
262
+ {
263
+ "colorTheme": "dark",
264
+ "dateRange": "12M",
265
+ "showChart": false,
266
+ "locale": "en",
267
+ "largeChartUrl": "",
268
+ "isTransparent": false,
269
+ "showSymbolLogo": true,
270
+ "showFloatingTooltip": false,
271
+ "width": "350",
272
+ "height": "100",
273
+ "tabs": [
274
+ {
275
+ "title": "Futures",
276
+ "symbols": [
277
+ {
278
+ "s": "VANTAGE:DJ30FT",
279
+ "d": "DOW JONES FT"
280
+ },
281
+ {
282
+ "s": "VANTAGE:SP500FT",
283
+ "d": "S&P500 FT"
284
+ },
285
+ {
286
+ "s": "SWISSQUOTE:NAS100M2025",
287
+ "d": "NASDAQ 100 FT"
288
+ }
289
+ ],
290
+ "originalTitle": "Futures"
291
+ }
292
+ ]
293
+ }
294
+ </script>
295
+ </div>
296
+ <!-- TradingView Widget END -->
297
+ </div>
298
+
299
+ <div id="news">
300
+
301
+ <iframe src="https://nick5363-web.hf.space" frameborder="0" width="100%" height="400"></iframe>
302
+ </div>
303
+
304
+ <div id="Expected Move">
305
+
306
+ <iframe
307
+ src="https://nick5363-nhat-tran.hf.space"
308
+ frameborder="0"
309
+ style="width:100%;min-height:450px;"></iframe>
310
+ </div>
311
+
312
+ <div id="ER">
313
+
314
+ <iframe
315
+ src="https://m.investing.com/earnings-calendar/"
316
+ width="100%"
317
+ height="850"
318
+ frameborder="0"
319
+ style="border: none; border-radius: 8px; background-color: #0f0f0f;">
320
+ </iframe>
321
+ </div>
322
+
323
+ <div id="heatmap">
324
+
325
+ <div class="tradingview-widget-container">
326
+ <div class="tradingview-widget-container__widget"></div>
327
+ <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>
328
+ <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-stock-heatmap.js" async>
329
+ {
330
+ "exchanges": [],
331
+ "dataSource": "SPX500",
332
+ "grouping": "sector",
333
+ "blockSize": "market_cap_basic",
334
+ "blockColor": "change",
335
+ "locale": "en",
336
+ "symbolUrl": "",
337
+ "colorTheme": "dark",
338
+ "hasTopBar": false,
339
+ "isDataSetEnabled": false,
340
+ "isZoomEnabled": true,
341
+ "hasSymbolTooltip": true,
342
+ "isMonoSize": false,
343
+ "width": "100%",
344
+ "height": 400
345
+ }
346
+ </script>
347
+ </div>
348
+ </div>
349
+
350
+
351
+
352
+
353
+
354
+ <div id="mke" style="width: 100%; padding: 10px 0;">
355
+
356
+
357
+ <iframe
358
+ 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"
359
+ width="100%"
360
+ height="500"
361
+ frameborder="0"
362
+ style="border: none;">
363
+ </iframe>
364
+
365
+ <div style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #999; text-align: center; margin-top: 6px;">
366
+ Real Time Economic Calendar by
367
+ <a href="https://www.investing.com/" target="_blank" style="color: #4fa2ff; font-weight: bold;">Investing.com</a>
368
+ </div>
369
+ </div>
370
+
371
+
372
+ <div id="F&G">
373
+ <div style="max-width: 415px; margin: 0 auto; padding: 10px;">
374
+
375
+ <iframe
376
+ src="https://feargreedmeter.com/fear-and-greed-index"
377
+ width="100%"
378
+ height="600"
379
+ frameborder="0"
380
+ style="border: none; border-radius: 8px; background-color: #0f0f0f;">
381
+ </iframe>
382
+ </div>
383
+ </div>
384
+
385
+
386
+ <div id="Hours">
387
+ <iframe
388
+ src="https://nick5363-hours.static.hf.space"
389
+ frameborder="0"
390
+ style="width:100%;min-height:450px;"
391
+ ></iframe>
392
+ </div>
393
+
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>