Hugging Face's logo

Spaces:
ngoctuanai
/
project
Running

App Files Community
1
ngoctuanai commited on
Commit
977a683
·
verified ·
1 Parent(s): 0f29384

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +88 -36
index.html CHANGED
@@ -1,60 +1,112 @@
1
- <style>
 
 
 
 
 
 
 
 
 
 
2
  html, body {
3
- height: 100%;
4
- margin: 0;
5
- padding: 0;
6
- font-family: 'Roboto', sans-serif;
7
- background-color: #f0f0f0;
 
8
  }
9
 
10
  .header {
11
- background-color: #007bff;
12
- color: white;
13
- padding: 20px;
14
- text-align: center;
15
- border-bottom: 5px solid #0056b3;
16
  }
17
 
18
  .header a {
19
- color: #ff9900;
20
  }
21
 
22
- .container {
23
- height: calc(100vh - 160px); /* 100% chiều cao - header + tab + footer */
24
- max-width: 100%;
25
- padding: 0;
26
- margin: 0 auto;
27
  }
28
 
29
- .tab-content {
30
- height: 100%;
31
  }
32
 
 
 
 
 
 
 
33
  .tab-pane {
34
- height: 100%;
35
  }
36
 
37
  .tab-pane iframe {
38
- width: 100%;
39
- height: 100%;
40
- border: none;
41
  }
42
 
43
  footer {
44
- background-color: #343a40;
45
- color: #fff;
46
- text-align: center;
47
- padding: 10px;
48
- position: fixed;
49
- left: 0;
50
- bottom: 0;
51
- width: 100%;
52
- font-size: 1em;
53
- opacity: 0.6;
54
- transition: opacity 0.5s ease-in-out;
55
  }
56
 
57
  footer:hover {
58
- opacity: 1;
59
  }
60
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>Welcome to My AI Projects</title>
8
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
10
+
11
+ <style>
12
  html, body {
13
+ height: 100%;
14
+ margin: 0;
15
+ padding: 0;
16
+ font-family: 'Roboto', sans-serif;
17
+ background-color: #f0f0f0;
18
+ overflow: hidden;
19
  }
20
 
21
  .header {
22
+ background-color: #007bff;
23
+ color: white;
24
+ padding: 20px;
25
+ text-align: center;
26
+ border-bottom: 5px solid #0056b3;
27
  }
28
 
29
  .header a {
30
+ color: #ff9900;
31
  }
32
 
33
+ .main-wrapper {
34
+ display: flex;
35
+ flex-direction: column;
36
+ height: 100vh;
 
37
  }
38
 
39
+ .nav-tabs {
40
+ margin-bottom: 0;
41
  }
42
 
43
+ .tab-container {
44
+ flex: 1;
45
+ overflow: hidden;
46
+ }
47
+
48
+ .tab-content,
49
  .tab-pane {
50
+ height: 100%;
51
  }
52
 
53
  .tab-pane iframe {
54
+ width: 100%;
55
+ height: 100%;
56
+ border: none;
57
  }
58
 
59
  footer {
60
+ background-color: #343a40;
61
+ color: #fff;
62
+ text-align: center;
63
+ padding: 10px;
64
+ font-size: 1em;
65
+ opacity: 0.6;
66
+ transition: opacity 0.5s ease-in-out;
 
 
 
 
67
  }
68
 
69
  footer:hover {
70
+ opacity: 1;
71
  }
72
+ </style>
73
+ </head>
74
+
75
+ <body>
76
+ <div class="main-wrapper">
77
+ <header class="header">
78
+ <h1>Welcome to My AI Projects <span style="font-size: 0.7em">(Stay tuned for exciting updates!)</span></h1>
79
+ <p>This is an introductory website, aimed at helping more people use AI. If there is any website that is not working, please
80
+ <a href="https://huggingface.co/spaces/ngoctuanai/project/discussions" target="_blank">contact me</a>.
81
+ </p>
82
+ </header>
83
+
84
+ <div class="container-fluid tab-container">
85
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
86
+ <li class="nav-item">
87
+ <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>
88
+ </li>
89
+ <li class="nav-item">
90
+ <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>
91
+ </li>
92
+ </ul>
93
+ <div class="tab-content" id="myTabContent">
94
+ <div class="tab-pane fade show active" id="ai-chat" role="tabpanel" aria-labelledby="ai-chat-tab">
95
+ <iframe src="ai-chat.html"></iframe>
96
+ </div>
97
+ <div class="tab-pane fade" id="ai-drawing" role="tabpanel" aria-labelledby="ai-drawing-tab">
98
+ <iframe src="ai-drawing.html"></iframe>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <footer>
104
+ * 2024 ngoctuanai *
105
+ </footer>
106
+ </div>
107
+
108
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
109
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
110
+ </body>
111
+
112
+ </html>