Spaces:
Running
Running
File size: 3,072 Bytes
977a683 0f29384 977a683 0f29384 04f52eb 0f29384 977a683 0f29384 04f52eb 0f29384 977a683 0f29384 04f52eb 977a683 0f29384 7a8934e 977a683 0f29384 621a743 977a683 0f29384 977a683 0f29384 04f52eb 0f29384 977a683 0f29384 977a683 0f29384 977a683 0f29384 977a683 |
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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to My AI Projects</title>
<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">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background-color: #f0f0f0;
overflow: hidden;
}
.header {
background-color: #007bff;
color: white;
padding: 20px;
text-align: center;
border-bottom: 5px solid #0056b3;
}
.header a {
color: #ff9900;
}
.main-wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.nav-tabs {
margin-bottom: 0;
}
.tab-container {
flex: 1;
overflow: hidden;
}
.tab-content,
.tab-pane {
height: 100%;
}
.tab-pane iframe {
width: 100%;
height: 100%;
border: none;
}
footer {
background-color: #343a40;
color: #fff;
text-align: center;
padding: 10px;
font-size: 1em;
opacity: 0.6;
transition: opacity 0.5s ease-in-out;
}
footer:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="main-wrapper">
<header class="header">
<h1>Welcome to My AI Projects <span style="font-size: 0.7em">(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-fluid tab-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>
</div>
<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>
|