Hugging Face's logo

Spaces:
enzostvs
/
deepsite
Running

App Files Community
118
Hungtruthguard commited on
Commit
37fafc2
·
verified ·
1 Parent(s): 735c29b

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +259 -29
index.html CHANGED
@@ -1,29 +1,259 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="icon" type="image/svg+xml" href="/logo.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>DeepSite | Build with AI ✨</title>
8
- <meta
9
- name="description"
10
- content="DeepSite is a web development tool that
11
- helps you build websites with AI, no code required. Let's deploy your
12
- website with DeepSite and enjoy the magic of AI."
13
- />
14
- <link rel="preconnect" href="https://fonts.googleapis.com" />
15
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16
- <link
17
- href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
18
- rel="stylesheet"
19
- />
20
- <link
21
- href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
22
- rel="stylesheet"
23
- />
24
- </head>
25
- <body>
26
- <div id="root"></div>
27
- <script type="module" src="/src/main.tsx"></script>
28
- </body>
29
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cải thiện văn bản học thuật - TruthGuard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ bo
13
+ $0dy {
14
+ font-family: 'Inter', sans-serif;
15
+ scroll-behavior: smooth;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%);
20
+ }
21
+
22
+ .feature-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
25
+ }
26
+
27
+ .original-text {
28
+ border-left: 4px solid #ef4444;
29
+ }
30
+
31
+ .improved-text {
32
+ border-left: 4px solid #10b981;
33
+ }
34
+
35
+ .video-container {
36
+ position: relative;
37
+ padding-bottom: 56.25%;
38
+ height: 0;
39
+ overflow: hidden;
40
+ }
41
+
42
+ .video-container iframe {
43
+ position: absolute;
44
+ top: 0;
45
+ left: 0;
46
+ width: 100%;
47
+ height: 100%;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-50 text-gray-800">
52
+ <!-- Header Section -->
53
+ <header class="py-6 px-4 md:px-8">
54
+ <div class="container mx-auto flex items-center">
55
+ <img src="https://truthguard.ai/assets/logo-official-white-torch.svg" alt="TruthGuard Logo" class="h-12 md:h-16">
56
+ </div>
57
+ </header>
58
+
59
+ <!-- Hero Section -->
60
+ <section class="py-12 md:py-20 px-4 md:px-8">
61
+ <div class="container mx-auto max-w-6xl text-center">
62
+ <h1 class="text-3xl md:text-5xl font-bold mb-6 text-purple-900">Cải thiện văn bản – Giữ chất riêng, nâng tầm tư duy</h1>
63
+ <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
64
+ TruthGuard giúp bạn phát hiện điểm yếu trong bài viết và gợi ý cách cải tiến từng đoạn – mà vẫn giữ phong cách riêng của bạn.
65
+ </p>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Video Demo Section -->
70
+ <section class="py-12 md:py-20 px-4 md:px-8 bg-white">
71
+ <div class="container mx-auto max-w-4xl">
72
+ <div class="video-container rounded-xl shadow-xl overflow-hidden mb-6">
73
+ <iframe src="https://www.youtube.com/embed/GDsY7O-ejhs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
74
+ </div>
75
+ <p class="text-center text-gray-600 mb-8">
76
+ Xem quá trình cải thiện văn bản thật sự – từ điểm thấp đến xuất sắc, do chính hệ thống TruthGuard hỗ trợ.
77
+ </p>
78
+ <div class="text-center">
79
+ <a href="https://www.youtube.com/watch?v=GDsY7O-ejhs" target="_blank" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold px-8 py-3 rounded-lg text-lg transition duration-300 shadow-lg">
80
+ <i class="fas fa-play mr-2"></i> Xem clip minh họa
81
+ </a>
82
+ </div>
83
+ </div>
84
+ </section>
85
+
86
+ <!-- Before & After Section -->
87
+ <section class="py-12 md:py-20 px-4 md:px-8 bg-gray-50">
88
+ <div class="container mx-auto max-w-6xl">
89
+ <h2 class="text-2xl md:text-3xl font-bold text-center mb-12 text-purple-900">Minh họa cải tiến bài viết</h2>
90
+
91
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
92
+ <!-- Before Improvement -->
93
+ <div class="bg-white p-6 rounded-xl shadow-md original-text">
94
+ <h3 class="font-bold text-lg text-red-600 mb-4">Bài viết trước cải tiến</h3>
95
+ <div class="mb-6 text-gray-700 bg-gray-50 p-4 rounded-lg">
96
+ <p class="italic">"Ngày nay, khi AI xuất hiện nhiều và được dùng nhiều thì con người có nhiều thứ để học và cũng có nhiều thứ không cần học nữa. Điều đó dẫn đến việc con người không cần phải suy nghĩ nhiều như trước vì đã có công cụ làm thay phần nào. Nhưng cũng có người nói là con người sẽ vẫn phải suy nghĩ vì không phải cái gì AI cũng làm được. Nhưng nếu chúng ta cứ dùng AI mỗi ngày thì khả năng tự mình suy nghĩ sẽ không còn như trước kia nữa.
97
+ Bản thân tôi thấy khi tôi làm bài tập, nếu tôi dùng ChatGPT hay AI thì tôi sẽ nhận được đáp án nhanh và không cần phải tự nghĩ nhiều. Có lần tôi đã dùng AI để viết một đoạn văn và kết quả là tôi chỉ cần chỉnh chút là xong. Nhưng khi thầy hỏi tôi giải thích lại thì tôi không biết giải thích sao. Vì thế, có thể thấy là AI đang thay đổi cách con người học và có thể ảnh hưởng đến cách tư duy.
98
+
99
+ Một số người thì lại nghĩ AI giúp cho việc học hiệu quả hơn, vì không phải mất thời gian tìm kiếm nữa. Nhưng theo tôi, điều đó không có nghĩa là con người vẫn giữ khả năng tư duy như cũ. Vì khi không còn phải động não để nghĩ câu trả lời thì tư duy sẽ bị giảm đi. Tuy nhiên, cũng có khi con người dùng AI để học tốt hơn, như là tham khảo, nhưng nếu lạm dụng thì sẽ không tốt.
100
+
101
+ Như vậy, AI có thể vừa giúp vừa hại khả năng tư duy. Điều đó còn tùy vào người sử dụng. Nhưng mà nếu không có ý thức thì chắc chắn sẽ mất tư duy. Nhiều bạn học sinh hiện nay cũng đã quen việc dùng AI nên không còn học bài như trước, cái gì cũng hỏi rồi chép. Như vậy là mất tư duy chứ không còn gì nữa.
102
+
103
+ Tóm lại, tôi nghĩ AI sẽ làm mất dần khả năng tư duy của người học nếu không được dùng đúng. Không phải vì AI xấu, mà vì cách dùng AI chưa đúng. Chúng ta nên dùng AI có chừng mực và phải rèn luyện tư duy song song thì mới tốt được. Nếu không thì về lâu dài sẽ ảnh hưởng không nhỏ đến sự phát triển của trí tuệ con người.
104
+ "</p>
105
+ </div>
106
+
107
+ <div class="bg-gray-100 p-4 rounded-lg">
108
+ <h4 class="font-bold mb-2">📊 Kết quả:</h4>
109
+ <ul class="space-y-1">
110
+ <li>Fingerprint tư duy: 4.5</li>
111
+ <li>Phong cách viết: 4.0</li>
112
+ <li>AI nghi vấn: 5.5</li>
113
+ <li>Logic: 5.0</li>
114
+ <li class="font-bold">Tổng điểm: 4.75</li>
115
+ <li>Trạng thái: <span class="text-orange-500">🟠 Dưới Trung bình – dễ nghi là đạo văn</span></li>
116
+ </ul>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- After Improvement -->
121
+ <div class="bg-white p-6 rounded-xl shadow-md improved-text">
122
+ <h3 class="font-bold text-lg text-green-600 mb-4">Bài viết sau cải tiến</h3>
123
+ <div class="mb-6 text-gray-700 bg-gray-50 p-4 rounded-lg">
124
+ <p class="italic">"Trí tuệ nhân tạo đang phát triển nhanh chóng và ngày càng hiện diện trong nhiều mặt của cuộc sống, đặc biệt là trong lĩnh vực giáo dục. Có ý kiến cho rằng AI sẽ khiến con người trở nên lười biếng và đánh mất khả năng tư duy. Cá nhân tôi không hoàn toàn bác bỏ ý kiến đó, nhưng cũng cho rằng vấn đề không nằm ở công nghệ mà ở cách chúng ta tương tác với nó.
125
+
126
+ Thời còn học phổ thông, tôi thường phải dành hàng giờ đọc sách, ghi chú rồi mới hiểu được một chủ đề. Nay, chỉ cần gõ một câu hỏi vào ChatGPT, tôi đã có thể nắm được cái nhìn tổng quát. Điều này thực sự tiện lợi, nhưng cũng khiến tôi suy nghĩ: liệu sự tiện lợi đó có lấy đi cơ hội rèn luyện tư duy? Tôi cho rằng không. Ngược lại, AI buộc người dùng phải đặt câu hỏi thông minh, đánh giá câu trả lời và lựa chọn thông tin đáng tin cậy – những kỹ năng tư duy bậc cao mà trước đây không phải lúc nào cũng được rèn luyện.
127
+
128
+ Tư duy không chỉ là ghi nhớ hay phân tích, mà còn là khả năng tổng hợp, đối chiếu và phản biện. AI không thể làm thay người dùng những điều này. Nó chỉ cung cấp dữ liệu – phần còn lại vẫn phụ thuộc vào cách mỗi người xử lý và phản ứng với dữ liệu đó.
129
+
130
+ Tôi từng chứng kiến nhiều bạn học sinh hỏi AI để làm bài, nhưng kết quả không tốt vì họ sao chép máy móc. Trong khi đó, những người biết cách khai thác AI như công cụ hỗ trợ thì lại học nhanh hơn và sâu hơn. Như khi tôi chuẩn bị bài thuyết trình gần đây, AI giúp tôi hệ thống ý chính, nhưng việc triển khai, chọn lọc và phản biện lại là phần tôi tự làm.
131
+
132
+ Vì vậy, tôi cho rằng AI không tước đoạt khả năng tư duy, mà đang thách thức con người tư duy linh hoạt hơn. Quan trọng là phải giáo dục người học cách dùng AI có trách nhiệm và tự chủ, thay vì lệ thuộc.
133
+
134
+ "</p>
135
+ </div>
136
+
137
+ <div class="bg-gray-100 p-4 rounded-lg">
138
+ <h4 class="font-bold mb-2">📊 Kết quả:</h4>
139
+ <ul class="space-y-1">
140
+ <li>Fingerprint tư duy: 9.5</li>
141
+ <li>Phong cách viết: 9.0</li>
142
+ <li>AI nghi vấn: 8.5</li>
143
+ <li>Logic: 9.0</li>
144
+ <li class="font-bold">Tổng điểm: 9.0</li>
145
+ <li>Trạng thái: <span class="text-green-500">🟢 Xuất sắc – tư duy rõ ràng, có giọng văn riêng</span></li>
146
+ </ul>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- Benefits Section -->
154
+ <section class="py-12 md:py-20 px-4 md:px-8 bg-white">
155
+ <div class="container mx-auto max-w-6xl">
156
+ <h2 class="text-2xl md:text-3xl font-bold text-center mb-12 text-purple-900">Lợi ích nổi bật</h2>
157
+
158
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
159
+ <!-- Benefit 1 -->
160
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md feature-card transition duration-300">
161
+ <div class="text-4xl mb-4 text-purple-600">✍️</div>
162
+ <h3 class="text-xl font-bold mb-3 text-purple-900">Gợi ý từng đoạn cụ thể</h3>
163
+ <p class="text-gray-600">
164
+ Không sửa chung chung – chỉ ra rõ ràng từng điểm cần điều chỉnh trong bài viết của bạn.
165
+ </p>
166
+ </div>
167
+
168
+ <!-- Benefit 2 -->
169
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md feature-card transition duration-300">
170
+ <div class="text-4xl mb-4 text-purple-600">💡</div>
171
+ <h3 class="text-xl font-bold mb-3 text-purple-900">Cải tiến tư duy & mạch lạc</h3>
172
+ <p class="text-gray-600">
173
+ Giúp bạn viết rõ ý, mạch lạc, đúng mục tiêu bài viết với tư duy logic chặt chẽ.
174
+ </p>
175
+ </div>
176
+
177
+ <!-- Benefit 3 -->
178
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md feature-card transition duration-300">
179
+ <div class="text-4xl mb-4 text-purple-600">🛡️</div>
180
+ <h3 class="text-xl font-bold mb-3 text-purple-900">Giữ nguyên phong cách cá nhân</h3>
181
+ <p class="text-gray-600">
182
+ Bài viết vẫn là của bạn – không biến thành văn mẫu hoặc máy móc.
183
+ </p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </section>
188
+
189
+ <!-- CTA Section -->
190
+ <section class="py-16 md:py-24 px-4 md:px-8 gradient-bg text-white">
191
+ <div class="container mx-auto max-w-4xl text-center">
192
+ <h2 class="text-2xl md:text-4xl font-bold mb-6">Bạn muốn cải thiện bài viết của mình mà không mất chất riêng?</h2>
193
+ <p class="text-lg md:text-xl mb-10 opacity-90">
194
+ TruthGuard sẽ giúp bạn nâng cấp bài viết học thuật một cách thông minh và hiệu quả.
195
+ </p>
196
+ <a href="https://truthguard.ai/register" class="inline-block bg-white text-purple-800 hover:bg-gray-100 font-bold px-8 py-4 md:px-12 md:py-5 rounded-lg text-lg md:text-xl transition duration-300 shadow-lg mb-4">
197
+ 🔥 Đăng ký để nhận link dùng thử TruthGuard
198
+ </a>
199
+ <p class="text-sm opacity-80">
200
+ Hệ thống chỉ mở link dùng thử sau khi đăng ký
201
+ </p>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- Footer -->
206
+ <footer class="bg-gray-900 text-white py-12 px-4 md:px-8">
207
+ <div class="container mx-auto max-w-6xl">
208
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
209
+ <!-- Logo & Brand -->
210
+ <div class="md:col-span-1">
211
+ <img src="https://truthguard.ai/assets/logo-official-white-torch.svg" alt="TruthGuard Logo" class="h-12 mb-4">
212
+ <p class="text-gray-400 text-sm">
213
+ TruthGuard – Công cụ hỗ trợ viết học thuật đáng tin cậy, thông minh và công bằng.
214
+ </p>
215
+ <div class="flex space-x-4 mt-4">
216
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
217
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
218
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Products -->
223
+ <div>
224
+ <h3 class="text-lg font-bold mb-4">Sản phẩm</h3>
225
+ <ul class="space-y-2 text-gray-400">
226
+ <li><a href="#" class="hover:text-white">Kiểm tra đạo văn</a></li>
227
+ <li><a href="#" class="hover:text-white">Cải thiện văn bản</a></li>
228
+ <li><a href="#" class="hover:text-white">Sáng tác học thuật</a></li>
229
+ </ul>
230
+ </div>
231
+
232
+ <!-- Resources -->
233
+ <div>
234
+ <h3 class="text-lg font-bold mb-4">Tài nguyên</h3>
235
+ <ul class="space-y-2 text-gray-400">
236
+ <li><a href="#" class="hover:text-white">Tài liệu hướng dẫn</a></li>
237
+ <li><a href="#" class="hover:text-white">Video minh họa</a></li>
238
+ <li><a href="#" class="hover:text-white">Câu hỏi thường gặp</a></li>
239
+ </ul>
240
+ </div>
241
+
242
+ <!-- Contact -->
243
+ <div>
244
+ <h3 class="text-lg font-bold mb-4">Liên hệ</h3>
245
+ <ul class="space-y-2 text-gray-400">
246
+ <li>Email: [email protected]</li>
247
+ <li>SĐT: +84 123 456 789</li>
248
+ <li>Địa chỉ: Saigon, Việt Nam</li>
249
+ </ul>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
254
+ &copy; 2025 TruthGuard. All rights reserved.
255
+ </div>
256
+ </div>
257
+ </footer>
258
+ </body>
259
+ </html>