Update index.html

index.html

@@ -4,141 +4,168 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>NhatTran - Dashboard</title>
-  <style>
-    body {
-      background-color: #0f0f0f;
-      color: white;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      margin: 0;
-      padding: 0;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
+<style>
+  body {
+    background-color: #0f0f0f;
+    color: white;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+    margin: 12px 0;
+    text-align: center;
+  }
+
+  .clock-container {
+    margin: 2px auto;
+    text-align: center;
+    font-size: 1rem;
+    width: 100%;
+    max-width: 500px;
+  }
+
+  .market-overview {
+    background-color: #1a1a1a;
+    padding: 10px;
+    margin: 5px auto;
+    width: 100%;
+    max-width: 500px;
+    border-radius: 8px;
+    box-sizing: border-box;
+  }
+
+  .market-overview h2 {
+    font-size: 1.1rem;
+    margin: 0 0 10px 0;
+  }
+
+  .tab-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  .tab-content > div {
+    display: none;
+  }
+
+  .tab-content > div.active {
+    display: block;
+  }
+
+  .tab-content iframe,
+  .tab-content .tradingview-widget-container {
+    width: 100% !important;
+    height: auto;
+    min-height: 400px;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  .tabs {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #1a1a1a;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding: 10px 0;
+    border-top: 1px solid #333;
+    scrollbar-width: thin;
+    scrollbar-color: #555 #1a1a1a;
+    z-index: 999;
+  }
+
+  .tabs::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  .tabs::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 3px;
+  }
+
+  .tabs button {
+    background-color: transparent;
+    color: #ccc;
+    border: none;
+    padding: 6px 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    flex: 0 0 auto;
+    margin: 0 5px;
+    white-space: nowrap;
+  }
+
+  .tabs button.active {
+    color: white;
+    font-weight: bold;
+  }
+
+  .tabs button:hover {
+    color: white;
+  }
+
+  /* Responsive iPhone */
+  @media (max-width: 430px) {
     h1 {
-      font-size: 1.0rem;
-      margin: 10px 0;
-      text-align: center;
+      font-size: 1.2rem;
     }
+
     .clock-container {
-      margin: 2px auto;
-      text-align: center;
-      font-size: 0.4rem;
-      width: 100%;
-      max-width: 415px;
-    }
-    .clock-container a {
-      color: white;
-      text-decoration: none;
+      font-size: 0.9rem;
     }
-    .market-overview {
-      background-color: #1a1a1a;
-      padding: 10px;
-      margin: 5px auto;
-      width: 100%;
-      max-width: 415px;
-      border-radius: 5px;
-      box-sizing: border-box;
+
+    .tabs button {
+      font-size: 0.8rem;
+      padding: 6px 4px;
     }
+
     .market-overview h2 {
-      font-size: 0.95rem;
-      margin: 0 0 10px 0;
+      font-size: 1rem;
     }
-    .tab-content {
-      flex: 1;
-      overflow-y: auto;
-      padding: 10px;
-      width: 100%;
-      max-width: 415px;
-      margin: 0 auto;
-      box-sizing: border-box;
-    }
-    .tab-content > div {
-      display: none;
-    }
-    .tab-content > div.active {
-      display: block;
-    }
-    .tab-content iframe,
-    .tab-content .tradingview-widget-container {
-      width: 100% !important;
-      max-width: 415px;
-      margin: 0 auto;
+  }
+
+  /* Responsive iPad */
+  @media (min-width: 431px) and (max-width: 820px) {
+    h1 {
+      font-size: 1.6rem;
     }
-  .tabs {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  background-color: #1a1a1a;
-  display: flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  padding: 10px 0;
-  border-top: 1px solid #333;
-  scrollbar-width: thin; /* Firefox */
-  scrollbar-color: #555 #1a1a1a; /* Firefox */
-}
 
-.tabs::-webkit-scrollbar {
-  height: 6px;
-}
+    .clock-container {
+      font-size: 1.2rem;
+    }
 
-.tabs::-webkit-scrollbar-thumb {
-  background: #555; 
-  border-radius: 3px;
-}
     .tabs button {
-      background-color: transparent;
-      color: #888;
-      border: none;
-      padding: 4px 2px;
-      cursor: pointer;
-      font-size: 0.40rem;
-      flex: 0 0 auto;
-      margin: 0 5px;
-      white-space: nowrap;
+      font-size: 1rem;
+      padding: 8px 6px;
     }
-    .tabs button.active {
-      color: white;
-      font-weight: bold;
+
+    .market-overview h2 {
+      font-size: 1.2rem;
     }
-    .tabs button:hover {
-      color: white;
+  }
+
+  @media (min-width: 821px) {
+    h1 {
+      font-size: 2rem;
     }
-    @media (max-width: 430px) {
-      h1 {
-        font-size: 0.6rem;
-      }
-      .clock-container {
-        font-size: 0.4rem;
-      }
-      .market-overview h2 {
-        font-size: 1rem;
-      }
-      .tabs button {
-        font-size: 0.4rem;
-        padding: 4px 4px;
-      }
-      .tab-content .tradingview-widget-container {
-        height: 365px !important; /* Điều chỉnh chiều cao chart để vừa màn hình */
-      }
+    .tabs button {
+      font-size: 1.2rem;
     }
-  
-@media (max-width: 768px) {
-  h1 { font-size: 1rem; }
-  .tabs button { font-size: 0.6rem; padding: 6px 4px; }
-  .market-overview h2 { font-size: 0.9rem; }
-}
-@media (min-width: 769px) {
-  .tab-content iframe,
-  .tab-content .tradingview-widget-container {
-    max-width: 100%;
   }
-}
-
 </style>
 </head>
 <body>