Update index.html

index.html

@@ -8,10 +8,11 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
     <title>Welcome to My AI Projects</title>
     <style>
-        body {
-            font-family: 'Roboto', sans-serif;
+        html, body {
+            height: 100%;
             margin: 0;
             padding: 0;
+            font-family: 'Roboto', sans-serif;
             background-color: #f0f0f0;
         }
         .header {
@@ -27,36 +28,16 @@
         .container {
             max-width: 1100px;
             margin: auto;
-            padding: auto;
-        }
-        .card {
-            border-radius: 15px;
-            margin-bottom: 20px;
-            border: none;
-            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
-            transition: all 0.3s ease;
-        }
-        .card:hover {
-            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
-            transform: scale(1.03);
-        }
-        .card .btn {
-            border-radius: 15px;
-            background-color: #007bff;
-            color: white;
-            transition: all 0.3s ease;
-        }
-        .card .btn:hover {
-            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
-            background-color: #0056b3;
+            padding: 0 15px;
         }
-        .tab-pane {
-            height: auto;
-            overflow: auto;
+        .tab-content {
+            height: calc(100vh - 220px); /* trừ header + nav + margin */
+            overflow: hidden;
         }
         .tab-pane iframe {
-           width: 100%;
-           height: 100%;
+            width: 100%;
+            height: 100%;
+            border: none;
         }
         footer {
             background-color: #343a40;
@@ -72,7 +53,7 @@
             transition: opacity 0.5s ease-in-out;
         }
         footer:hover {
-            opacity: 1; 
+            opacity: 1;
         }
     </style>
 </head>
@@ -94,16 +75,10 @@
         </ul>
         <div class="tab-content" id="myTabContent">
             <div class="tab-pane fade show active" id="ai-chat" role="tabpanel" aria-labelledby="ai-chat-tab">
-                <iframe src="ai-chat.html" frameborder="0" style="width:100%; height:100%;"></iframe>
+                <iframe src="ai-chat.html"></iframe>
             </div>
             <div class="tab-pane fade" id="ai-drawing" role="tabpanel" aria-labelledby="ai-drawing-tab">
-            
-         <div class="tab-content" id="myTabContent">
-            <div class="tab-pane fade show active" id="ai-drawing" role="tabpanel" aria-labelledby="ai-drawing-tab">
-                <iframe src="ai-drawing.html" frameborder="0" style="width:100%; height:100%;"></iframe>
-            </div>
-            <div class="tab-pane fade" id="ai-drawing" role="tabpanel" aria-labelledby="ai-drawing-tab">    
-            
+                <iframe src="ai-drawing.html"></iframe>
             </div>
         </div>
     </div>
@@ -116,4 +91,4 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
 </body>
 
-</html>
+</html>