Spaces:

ngoctuanai
/

project

Running

App Files Files Community

ngoctuanai commited on 21 days ago

Commit

0f29384

verified ·

1 Parent(s): 12c5f04

Update index.html

Browse files

Files changed (1) hide show

index.html +54 -88

index.html CHANGED Viewed

@@ -1,94 +1,60 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
-    <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>
-        html, body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            font-family: 'Roboto', sans-serif;
-            background-color: #f0f0f0;
-        }
-        .header {
-            background-color: #007bff;
-            color: white;
-            padding: 20px;
-            text-align: center;
-            border-bottom: 5px solid #0056b3;
-        }
-        .header a {
-            color: #ff9900;
-        }
-        .container {
-            max-width: 1100px;
-            margin: auto;
-            padding: 0 15px;
-        }
-        .tab-content {
-            height: calc(100vh - 220px); /* trừ header + nav + margin */
-            overflow: hidden;
-        }
-        .tab-pane iframe {
-            width: 100%;
-            height: 100%;
-            border: none;
-        }
-        footer {
-            background-color: #343a40;
-            color: #fff;
-            text-align: center;
-            padding: 10px;
-            position: fixed;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            font-size: 1em;
-            opacity: 0.6;
-            transition: opacity 0.5s ease-in-out;
-        }
-        footer:hover {
-            opacity: 1;
-        }
-    </style>
-</head>
-<body>
-    <header class="header">
-        <h1 class="title">Welcome to My AI Projects <span class="subtitle">(Stay tuned for exciting updates!)</span></h1>
-        <p>This is an introductory website, aimed at helping more people use AI. If there is any website that is not working, please <a href="https://huggingface.co/spaces/ngoctuanai/project/discussions" target="_blank">contact me</a>.</p>
-    </header>
-    <div class="container">
-        <ul class="nav nav-tabs" id="myTab" role="tablist">
-            <li class="nav-item">
-                <a class="nav-link active" id="ai-chat-tab" data-toggle="tab" href="#ai-chat" role="tab" aria-controls="ai-chat" aria-selected="true">AI Chat</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" id="ai-drawing-tab" data-toggle="tab" href="#ai-drawing" role="tab" aria-controls="ai-drawing" aria-selected="false">AI Drawing (Coming Soon)</a>
-            </li>
-        </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"></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>
-    <footer>
-        * 2024 ngoctuanai *
-    </footer>
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
-</body>
-</html>

+<style>
+    html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family: 'Roboto', sans-serif;
+        background-color: #f0f0f0;
+    }
+    .header {
+        background-color: #007bff;
+        color: white;
+        padding: 20px;
+        text-align: center;
+        border-bottom: 5px solid #0056b3;
+    }
+    .header a {
+        color: #ff9900;
+    }
+    .container {
+        height: calc(100vh - 160px); /* 100% chiều cao - header + tab + footer */
+        max-width: 100%;
+        padding: 0;
+        margin: 0 auto;
+    }
+    .tab-content {
+        height: 100%;
+    }
+    .tab-pane {
+        height: 100%;
+    }
+    .tab-pane iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+    footer {
+        background-color: #343a40;
+        color: #fff;
+        text-align: center;
+        padding: 10px;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        font-size: 1em;
+        opacity: 0.6;
+        transition: opacity 0.5s ease-in-out;
+    }
+    footer:hover {
+        opacity: 1;
+    }
+</style>