Spaces:
Running
Running
File size: 3,312 Bytes
04f52eb 7f4c230 04f52eb 8b465d7 7f4c230 04f52eb e156eee 04f52eb e156eee 04f52eb 8ba08fb 04f52eb 8ba08fb 04f52eb 8ba08fb 04f52eb 16e0078 04f52eb e156eee f240807 e156eee f240807 0a00b44 e156eee 0a00b44 b40b27f 0a00b44 dc7ddf0 9621361 e156eee 0a00b44 04f52eb 7f4c230 8ba08fb 04f52eb fd3e71a e3067b8 fd3e71a 093deba acecba6 fd3e71a e156eee f240807 e156eee 04f52eb 7a8934e 0a00b44 621a743 fd3e71a 04f52eb e156eee |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<!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>
|