File size: 4,882 Bytes
04f52eb
c0ecb58
04f52eb
 
 
 
 
8b465d7
04f52eb
 
 
8b465d7
04f52eb
 
 
 
 
 
 
 
365e7dc
 
 
 
 
 
 
 
 
 
 
 
 
 
04f52eb
365e7dc
 
 
 
04f52eb
 
 
 
 
 
 
70cfac3
04f52eb
 
 
f43e31f
 
 
70cfac3
f43e31f
04f52eb
 
70cfac3
04f52eb
 
f43e31f
 
 
70cfac3
f43e31f
04f52eb
365e7dc
 
 
 
 
 
 
 
 
 
 
 
 
04f52eb
 
 
 
 
365e7dc
 
04f52eb
 
 
fd3e71a
 
365e7dc
fd3e71a
 
365e7dc
fd3e71a
 
 
 
70cfac3
 
 
 
 
365e7dc
70cfac3
 
fd3e71a
70cfac3
 
 
 
 
 
 
 
fd3e71a
 
 
 
365e7dc
04f52eb
 
7a8934e
 
fd3e71a
04f52eb
 
 
 
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">

<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 Website</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        .header {
            padding: 20px;
            text-align: center;
        }
        .title {
            font-size: 2.5em;
            color: #007bff;
        }
        .subtitle {
            display: block;
            font-size: 1.2em;
            color: #0056b3;
        }
        .description {
            font-size: 1.5em;
            color: #333;
        }
        .contact-link {
            color: #ff9900;
            text-decoration: none;
        }
        .contact-link:hover {
            text-decoration: underline;
        }
        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }
        .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;
        }
        .custom-link {
            display: inline-block;
            padding: 10px 20px;
            color: white;
            background-color: #007bff;
            border-radius: 15px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .custom-link:hover {
            background-color: #0056b3;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <header class="header">
        <h1 class="title">Welcome to My Website <span class="subtitle">(I'm so busy now! Wait for me, this will be the page containing all the projects!)</span></h1>
        <p class="description">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" class="contact-link">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 (Preview)</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">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">1) 🌟ChatGPT Free</h5>
                                <a href="https://github.com/chokiproai/ChatGPT-Plugins" class="custom-link" target="_blank">Visit ChatGPT Plugins</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">2) 🌟</h5>
                                <p class="card-text">.</p>
                                <a href="#" class="btn" target="_blank">Start</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="ai-drawing" role="tabpanel" aria-labelledby="ai-drawing-tab">
                Coming Soon!
            </div>
        </div>
    </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>