Hugging Face's logo

Spaces:
Advertider
/
B-max
Sleeping

App Files Community
2
suusuu93 commited on
Commit
a33201b
·
verified ·
1 Parent(s): 79e4589

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +767 -0
  2. style.css +81 -0
index.html ADDED
@@ -0,0 +1,767 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>EduHealth AI - Nền tảng AI hỗ trợ học sinh</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
13
+ .glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); }
14
+ .animate-fade-in { animation: fadeIn 0.5s ease-in; }
15
+ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
16
+ .loading-dots { display: inline-flex; gap: 4px; }
17
+ .loading-dots span { width: 8px; height: 8px; background: currentColor; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
18
+ .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
19
+ .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
20
+ @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
21
+ .progress-bar { transition: width 0.5s ease; }
22
+ </style>
23
+ </head>
24
+ <body class="bg-gray-50 text-gray-900">
25
+
26
+ <!-- Navigation -->
27
+ <nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-200">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16 items-center">
30
+ <div class="flex items-center gap-2">
31
+ <div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
32
+ <i data-lucide="brain" class="w-5 h-5 text-white"></i>
33
+ </div>
34
+ <span class="font-bold text-xl bg-clip-text text-transparent gradient-bg">EduHealth AI</span>
35
+ </div>
36
+ <div class="hidden md:flex space-x-8">
37
+ <a href="#stress" class="text-gray-700 hover:text-purple-600 font-medium transition">Chẩn đoán Stress</a>
38
+ <a href="#fakenews" class="text-gray-700 hover:text-red-600 font-medium transition">Phát hiện Tin giả</a>
39
+ <a href="#learning" class="text-gray-700 hover:text-blue-600 font-medium transition">Lộ trình học tập</a>
40
+ </div>
41
+ <button class="md:hidden" onclick="toggleMobileMenu()">
42
+ <i data-lucide="menu" class="w-6 h-6"></i>
43
+ </button>
44
+ </div>
45
+ </div>
46
+ <!-- Mobile Menu -->
47
+ <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
48
+ <div class="px-4 py-2 space-y-2">
49
+ <a href="#stress" class="block py-2 text-gray-700">Chẩn đoán Stress</a>
50
+ <a href="#fakenews" class="block py-2 text-gray-700">Phát hiện Tin giả</a>
51
+ <a href="#learning" class="block py-2 text-gray-700">Lộ trình học tập</a>
52
+ </div>
53
+ </div>
54
+ </nav>
55
+
56
+ <!-- Hero Section -->
57
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
58
+ <div class="text-center animate-fade-in">
59
+ <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-100 text-purple-700 text-sm font-medium mb-6">
60
+ <i data-lucide="sparkles" class="w-4 h-4"></i>
61
+ <span>Powered by Gen AI & RAG</span>
62
+ </div>
63
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
64
+ Nền tảng <span class="bg-clip-text text-transparent gradient-bg">AI thông minh</span><br>
65
+ đồng hành cùng học sinh
66
+ </h1>
67
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10">
68
+ Ứng dụng công nghệ Gen AI và RAG để chẩn đoán sức khỏe tinh thần,
69
+ phát hiện thông tin sai lệch và xây dựng lộ trình học tập cá nhân hóa.
70
+ </p>
71
+ <div class="flex flex-wrap justify-center gap-4">
72
+ <a href="#stress" class="px-8 py-3 bg-purple-600 text-white rounded-full font-medium hover:bg-purple-700 transition flex items-center gap-2">
73
+ <i data-lucide="heart-pulse" class="w-5 h-5"></i>
74
+ Kiểm tra Stress
75
+ </a>
76
+ <a href="#learning" class="px-8 py-3 bg-white text-purple-600 border-2 border-purple-600 rounded-full font-medium hover:bg-purple-50 transition flex items-center gap-2">
77
+ <i data-lucide="graduation-cap" class="w-5 h-5"></i>
78
+ Xây dựng lộ trình
79
+ </a>
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ <!-- Stats Section -->
85
+ <section class="py-12 bg-white border-y border-gray-200">
86
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
87
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
88
+ <div>
89
+ <div class="text-3xl font-bold text-purple-600">98%</div>
90
+ <div class="text-gray-600 text-sm mt-1">Độ chính xác phát hiện tin giả</div>
91
+ </div>
92
+ <div>
93
+ <div class="text-3xl font-bold text-blue-600">50K+</div>
94
+ <div class="text-gray-600 text-sm mt-1">Học sinh sử dụng</div>
95
+ </div>
96
+ <div>
97
+ <div class="text-3xl font-bold text-green-600">85%</div>
98
+ <div class="text-gray-600 text-sm mt-1">Cải thiện sau khi chẩn đoán</div>
99
+ </div>
100
+ <div>
101
+ <div class="text-3xl font-bold text-orange-600">24/7</div>
102
+ <div class="text-gray-600 text-sm mt-1">Hỗ trợ AI liên tục</div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Stress Diagnosis Section -->
109
+ <section id="stress" class="py-20 bg-gradient-to-br from-purple-50 to-blue-50">
110
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="text-center mb-12">
112
+ <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-4">
113
+ <i data-lucide="heart-pulse" class="w-6 h-6 text-purple-600"></i>
114
+ </div>
115
+ <h2 class="text-3xl font-bold mb-4">Chẩn đoán mức độ Stress</h2>
116
+ <p class="text-gray-600">Sử dụng mô hình AI phân tích dấu hiệu tâm lý qua bộ câu hỏi khoa học</p>
117
+ </div>
118
+
119
+ <div class="bg-white rounded-2xl shadow-xl p-8">
120
+ <!-- Progress -->
121
+ <div class="mb-8">
122
+ <div class="flex justify-between text-sm text-gray-600 mb-2">
123
+ <span id="questionCounter">Câu hỏi 1/8</span>
124
+ <span id="progressPercent">12.5%</span>
125
+ </div>
126
+ <div class="w-full bg-gray-200 rounded-full h-2">
127
+ <div id="progressBar" class="progress-bar bg-purple-600 h-2 rounded-full" style="width: 12.5%"></div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Quiz Container -->
132
+ <div id="stressQuiz" class="space-y-6">
133
+ <div id="questionContainer" class="animate-fade-in">
134
+ <h3 id="questionText" class="text-xl font-semibold mb-6">Trong tuần qua, bạn có thường xuyên cảm thấy căng thẳng không?</h3>
135
+ <div id="optionsContainer" class="space-y-3">
136
+ <!-- Options will be inserted here -->
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Result Container (Hidden initially) -->
142
+ <div id="stressResult" class="hidden text-center py-8">
143
+ <div id="stressIcon" class="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 text-4xl">
144
+ 😊
145
+ </div>
146
+ <h3 id="stressLevel" class="text-2xl font-bold mb-4">Mức độ stress: Thấp</h3>
147
+ <div class="bg-gray-50 rounded-xl p-6 mb-6 text-left">
148
+ <h4 class="font-semibold mb-3 flex items-center gap-2">
149
+ <i data-lucide="clipboard-list" class="w-5 h-5 text-purple-600"></i>
150
+ Phân tích AI:
151
+ </h4>
152
+ <p id="stressAnalysis" class="text-gray-700 leading-relaxed mb-4"></p>
153
+ <div class="border-t pt-4">
154
+ <h4 class="font-semibold mb-3 text-purple-700 flex items-center gap-2">
155
+ <i data-lucide="lightbulb" class="w-5 h-5"></i>
156
+ Đề xuất cải thiện:
157
+ </h4>
158
+ <ul id="stressRecommendations" class="space-y-2 text-gray-700"></ul>
159
+ </div>
160
+ </div>
161
+ <button onclick="resetStressTest()" class="px-6 py-3 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
162
+ Làm lại bài test
163
+ </button>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Fake News Detection Section -->
170
+ <section id="fakenews" class="py-20 bg-white">
171
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
172
+ <div class="text-center mb-12">
173
+ <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mx-auto mb-4">
174
+ <i data-lucide="shield-alert" class="w-6 h-6 text-red-600"></i>
175
+ </div>
176
+ <h2 class="text-3xl font-bold mb-4">Phát hiện Tin giả (Fake News)</h2>
177
+ <p class="text-gray-600">RAG Model quét và đối chiếu với cơ sở dữ liệu tin cậy để xác minh thông tin</p>
178
+ </div>
179
+
180
+ <div class="bg-white rounded-2xl shadow-xl border border-gray-200 p-8">
181
+ <div class="mb-6">
182
+ <label class="block text-sm font-medium text-gray-700 mb-2">Nhập nội dung tin cần kiểm tra:</label>
183
+ <textarea id="newsInput" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition resize-none" placeholder="Dán đoạn tin tức hoặc đường link cần kiểm tra vào đây..."></textarea>
184
+ </div>
185
+
186
+ <div class="flex gap-3 mb-6">
187
+ <button onclick="analyzeNews()" class="flex-1 px-6 py-3 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition flex items-center justify-center gap-2">
188
+ <i data-lucide="search" class="w-5 h-5"></i>
189
+ Phân tích ngay
190
+ </button>
191
+ <button onclick="clearNews()" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition">
192
+ Xóa
193
+ </button>
194
+ </div>
195
+
196
+ <!-- Loading State -->
197
+ <div id="newsLoading" class="hidden py-8 text-center">
198
+ <div class="loading-dots text-red-600 mb-4 justify-center">
199
+ <span></span><span></span><span></span>
200
+ </div>
201
+ <p class="text-gray-600">Đang truy vấn RAG database và phân tích nguồn tin...</p>
202
+ </div>
203
+
204
+ <!-- Result -->
205
+ <div id="newsResult" class="hidden space-y-4">
206
+ <div class="flex items-center gap-4 p-4 rounded-lg bg-gray-50">
207
+ <div id="trustScore" class="w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold border-4">
208
+ 85%
209
+ </div>
210
+ <div>
211
+ <div id="verdictBadge" class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium mb-1">
212
+ <!-- Badge content -->
213
+ </div>
214
+ <p id="verdictText" class="text-gray-700 font-medium"></p>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="grid md:grid-cols-2 gap-4">
219
+ <div class="bg-blue-50 p-4 rounded-lg">
220
+ <h4 class="font-semibold text-blue-900 mb-2 flex items-center gap-2">
221
+ <i data-lucide="database" class="w-4 h-4"></i>
222
+ Nguồn tham chiếu RAG:
223
+ </h4>
224
+ <ul id="ragSources" class="text-sm text-blue-800 space-y-1"></ul>
225
+ </div>
226
+ <div class="bg-orange-50 p-4 rounded-lg">
227
+ <h4 class="font-semibold text-orange-900 mb-2 flex items-center gap-2">
228
+ <i data-lucide="alert-triangle" class="w-4 h-4"></i>
229
+ Dấu hiệu nhận biết:
230
+ </h4>
231
+ <ul id="warningSigns" class="text-sm text-orange-800 space-y-1"></ul>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="bg-gray-100 p-4 rounded-lg">
236
+ <h4 class="font-semibold mb-2">Phân tích chi tiết:</h4>
237
+ <p id="detailedAnalysis" class="text-gray-700 text-sm leading-relaxed"></p>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </section>
243
+
244
+ <!-- Learning Path Section -->
245
+ <section id="learning" class="py-20 bg-gradient-to-br from-blue-50 to-indigo-50">
246
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
247
+ <div class="text-center mb-12">
248
+ <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
249
+ <i data-lucide="route" class="w-6 h-6 text-blue-600"></i>
250
+ </div>
251
+ <h2 class="text-3xl font-bold mb-4">Lộ trình học tập cá nhân hóa</h2>
252
+ <p class="text-gray-600">AI phân tích năng lực và tạo roadmap học tập phù hợp với từng học sinh</p>
253
+ </div>
254
+
255
+ <div class="grid md:grid-cols-2 gap-8">
256
+ <!-- Input Form -->
257
+ <div class="bg-white rounded-2xl shadow-xl p-6">
258
+ <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
259
+ <i data-lucide="user" class="w-5 h-5 text-blue-600"></i>
260
+ Thông tin học sinh
261
+ </h3>
262
+ <form id="learningForm" class="space-y-4" onsubmit="generateLearningPath(event)">
263
+ <div>
264
+ <label class="block text-sm font-medium text-gray-700 mb-1">Lớp:</label>
265
+ <select id="gradeLevel" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
266
+ <option value="10">Lớp 10</option>
267
+ <option value="11">Lớp 11</option>
268
+ <option value="12">Lớp 12</option>
269
+ </select>
270
+ </div>
271
+ <div>
272
+ <label class="block text-sm font-medium text-gray-700 mb-1">Ban học:</label>
273
+ <select id="major" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
274
+ <option value="natural">Khoa học tự nhiên (Toán, Lý, Hóa, Sinh)</option>
275
+ <option value="social">Khoa học xã hội (Văn, Sử, Địa, Anh)</option>
276
+ <option value="mixed">Tổ hợp linh hoạt</option>
277
+ </select>
278
+ </div>
279
+ <div>
280
+ <label class="block text-sm font-medium text-gray-700 mb-1">Môn học yếu (chọn nhiều):</label>
281
+ <div class="grid grid-cols-2 gap-2">
282
+ <label class="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-gray-50">
283
+ <input type="checkbox" value="math" class="weakSubject rounded text-blue-600">
284
+ <span class="text-sm">Toán</span>
285
+ </label>
286
+ <label class="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-gray-50">
287
+ <input type="checkbox" value="physics" class="weakSubject rounded text-blue-600">
288
+ <span class="text-sm">Vật Lý</span>
289
+ </label>
290
+ <label class="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-gray-50">
291
+ <input type="checkbox" value="chemistry" class="weakSubject rounded text-blue-600">
292
+ <span class="text-sm">Hóa Học</span>
293
+ </label>
294
+ <label class="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-gray-50">
295
+ <input type="checkbox" value="english" class="weakSubject rounded text-blue-600">
296
+ <span class="text-sm">Tiếng Anh</span>
297
+ </label>
298
+ </div>
299
+ </div>
300
+ <div>
301
+ <label class="block text-sm font-medium text-gray-700 mb-1">Mục tiêu điểm thi Đại học:</label>
302
+ <input type="number" id="targetScore" min="0" max="30" value="24" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
303
+ </div>
304
+ <div>
305
+ <label class="block text-sm font-medium text-gray-700 mb-1">Thời gian học mỗi ngày (giờ):</label>
306
+ <input type="range" id="studyTime" min="1" max="8" value="4" class="w-full accent-blue-600" oninput="document.getElementById('studyTimeVal').textContent = this.value">
307
+ <div class="text-center text-sm text-gray-600"><span id="studyTimeVal">4</span> giờ/ngày</div>
308
+ </div>
309
+ <button type="submit" class="w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center gap-2">
310
+ <i data-lucide="wand-2" class="w-5 h-5"></i>
311
+ Tạo lộ trình AI
312
+ </button>
313
+ </form>
314
+ </div>
315
+
316
+ <!-- Result Display -->
317
+ <div id="learningResult" class="hidden bg-white rounded-2xl shadow-xl p-6">
318
+ <div class="flex items-center justify-between mb-6">
319
+ <h3 class="text-lg font-semibold flex items-center gap-2">
320
+ <i data-lucide="map" class="w-5 h-5 text-blue-600"></i>
321
+ Lộ trình của bạn
322
+ </h3>
323
+ <span class="text-xs bg-blue-100 text-blue-700 px-3 py-1 rounded-full">AI Generated</span>
324
+ </div>
325
+
326
+ <div class="space-y-4 max-h-[500px] overflow-y-auto pr-2" id="roadmapContainer">
327
+ <!-- Timeline items will be inserted here -->
328
+ </div>
329
+
330
+ <div class="mt-6 p-4 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg border border-blue-200">
331
+ <div class="flex items-start gap-3">
332
+ <i data-lucide="trending-up" class="w-5 h-5 text-blue-600 mt-0.5"></i>
333
+ <div>
334
+ <h4 class="font-semibold text-sm text-blue-900">Dự đoán AI:</h4>
335
+ <p id="aiPrediction" class="text-sm text-blue-800 mt-1"></p>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <button onclick="document.getElementById('learningResult').classList.add('hidden')" class="mt-4 w-full py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition text-sm">
341
+ Tạo lộ trình mới
342
+ </button>
343
+ </div>
344
+
345
+ <!-- Empty State -->
346
+ <div id="learningEmpty" class="bg-white/50 rounded-2xl border-2 border-dashed border-gray-300 p-6 flex items-center justify-center">
347
+ <div class="text-center text-gray-500">
348
+ <i data-lucide="compass" class="w-12 h-12 mx-auto mb-2 opacity-50"></i>
349
+ <p>Điền thông tin để nhận lộ trình<br>học tập cá nhân hóa</p>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </section>
355
+
356
+ <!-- Footer -->
357
+ <footer class="bg-gray-900 text-white py-12">
358
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
359
+ <div class="grid md:grid-cols-3 gap-8">
360
+ <div>
361
+ <div class="flex items-center gap-2 mb-4">
362
+ <div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
363
+ <i data-lucide="brain" class="w-5 h-5 text-white"></i>
364
+ </div>
365
+ <span class="font-bold text-xl">EduHealth AI</span>
366
+ </div>
367
+ <p class="text-gray-400 text-sm">
368
+ Ứng dụng Gen AI và RAG để đồng hành cùng học sinh trong hành trình học tập và phát triển bản thân.
369
+ </p>
370
+ </div>
371
+ <div>
372
+ <h4 class="font-semibold mb-4">Tính năng</h4>
373
+ <ul class="space-y-2 text-gray-400 text-sm">
374
+ <li><a href="#stress" class="hover:text-white transition">Chẩn đoán Stress</a></li>
375
+ <li><a href="#fakenews" class="hover:text-white transition">Phát hiện Tin giả</a></li>
376
+ <li><a href="#learning" class="hover:text-white transition">Lộ trình học tập</a></li>
377
+ </ul>
378
+ </div>
379
+ <div>
380
+ <h4 class="font-semibold mb-4">Liên hệ</h4>
381
+ <div class="space-y-2 text-gray-400 text-sm">
382
+ <p class="flex items-center gap-2">
383
+ <i data-lucide="mail" class="w-4 h-4"></i>
384
+ support@eduhealth.ai
385
+ </p>
386
+ <p class="flex items-center gap-2">
387
+ <i data-lucide="phone" class="w-4 h-4"></i>
388
+ 1900 xxxx
389
+ </p>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
394
+ © 2024 EduHealth AI. All rights reserved. Powered by Gen AI & RAG Technology.
395
+ </div>
396
+ </div>
397
+ </footer>
398
+
399
+ <script>
400
+ // Initialize Lucide icons
401
+ lucide.createIcons();
402
+
403
+ // Mobile menu toggle
404
+ function toggleMobileMenu() {
405
+ const menu = document.getElementById('mobileMenu');
406
+ menu.classList.toggle('hidden');
407
+ }
408
+
409
+ // Stress Test Logic
410
+ const stressQuestions = [
411
+ {
412
+ text: "Trong tuần qua, bạn có thường xuyên cảm thấy căng thẳng, lo âu không?",
413
+ options: [
414
+ { text: "Không bao giờ", score: 0 },
415
+ { text: "Thỉnh thoảng", score: 1 },
416
+ { text: "Thường xuyên", score: 2 },
417
+ { text: "Liên tục", score: 3 }
418
+ ]
419
+ },
420
+ {
421
+ text: "Bạn có gặp khó khăn trong việc ngủ (khó ngủ hoặc ngủ không sâu)?",
422
+ options: [
423
+ { text: "Ngủ rất ngon", score: 0 },
424
+ { text: "Thỉnh thoảng khó ngủ", score: 1 },
425
+ { text: "Thường xuyên khó ngủ", score: 2 },
426
+ { text: "Mất ngủ triền miên", score: 3 }
427
+ ]
428
+ },
429
+ {
430
+ text: "Bạn có cảm thấy mệt mỏi kéo dài dù đã nghỉ ngơi?",
431
+ options: [
432
+ { text: "Không", score: 0 },
433
+ { text: "Hơi mệt", score: 1 },
434
+ { text: "Khá mệt", score: 2 },
435
+ { text: "Kiệt sức", score: 3 }
436
+ ]
437
+ },
438
+ {
439
+ text: "Bạn có dễ nổi cáu hoặc cảm thấy khó kiểm soát cảm xúc?",
440
+ options: [
441
+ { text: "Rất bình tĩnh", score: 0 },
442
+ { text: "Thỉnh thoảng", score: 1 },
443
+ { text: "Thường xuyên", score: 2 },
444
+ { text: "Liên tục bực bội", score: 3 }
445
+ ]
446
+ },
447
+ {
448
+ text: "Bạn có cảm thấy áp lực về việc học tập/ thi cử?",
449
+ options: [
450
+ { text: "Không áp lực", score: 0 },
451
+ { text: "Hơi áp lực", score: 1 },
452
+ { text: "Rất áp lực", score: 2 },
453
+ { text: "Quá tải", score: 3 }
454
+ ]
455
+ },
456
+ {
457
+ text: "Bạn có xu hướng tránh giao tiếp xã hội?",
458
+ options: [
459
+ { text: "Rất thích giao tiếp", score: 0 },
460
+ { text: "Thỉnh thoảng muốn ở một mình", score: 1 },
461
+ { text: "Thường tránh gặp người khác", score: 2 },
462
+ { text: "Hoàn toàn cô lập", score: 3 }
463
+ ]
464
+ },
465
+ {
466
+ text: "Bạn có triệu chứng đau đầu, đau bụng không rõ nguyên nhân?",
467
+ options: [
468
+ { text: "Không", score: 0 },
469
+ { text: "Thỉnh thoảng", score: 1 },
470
+ { text: "Thường xuyên", score: 2 },
471
+ { text: "Liên tục", score: 3 }
472
+ ]
473
+ },
474
+ {
475
+ text: "Bạn đánh giá khả năng tập trung của mình thế nào?",
476
+ options: [
477
+ { text: "Rất tập trung", score: 0 },
478
+ { text: "Thỉnh thoảng mất tập trung", score: 1 },
479
+ { text: "Khó tập trung", score: 2 },
480
+ { text: "Hoàn toàn mất khả năng tập trung", score: 3 }
481
+ ]
482
+ }
483
+ ];
484
+
485
+ let currentQuestion = 0;
486
+ let totalScore = 0;
487
+
488
+ function loadQuestion() {
489
+ const q = stressQuestions[currentQuestion];
490
+ document.getElementById('questionText').textContent = q.text;
491
+ document.getElementById('questionCounter').textContent = `Câu hỏi ${currentQuestion + 1}/${stressQuestions.length}`;
492
+ document.getElementById('progressBar').style.width = `${((currentQuestion + 1) / stressQuestions.length) * 100}%`;
493
+ document.getElementById('progressPercent').textContent = `${Math.round(((currentQuestion + 1) / stressQuestions.length) * 100)}%`;
494
+
495
+ const optionsHtml = q.options.map((opt, idx) => `
496
+ <button onclick="selectOption(${idx})" class="w-full text-left p-4 border-2 border-gray-200 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition flex items-center gap-3 group">
497
+ <div class="w-5 h-5 rounded-full border-2 border-gray-300 group-hover:border-purple-500 flex items-center justify-center">
498
+ <div class="w-2.5 h-2.5 rounded-full bg-purple-600 opacity-0 group-hover:opacity-100 transition"></div>
499
+ </div>
500
+ <span class="text-gray-700 font-medium">${opt.text}</span>
501
+ </button>
502
+ `).join('');
503
+
504
+ document.getElementById('optionsContainer').innerHTML = optionsHtml;
505
+ }
506
+
507
+ function selectOption(idx) {
508
+ totalScore += stressQuestions[currentQuestion].options[idx].score;
509
+ currentQuestion++;
510
+
511
+ if (currentQuestion < stressQuestions.length) {
512
+ document.getElementById('questionContainer').classList.remove('animate-fade-in');
513
+ setTimeout(() => {
514
+ document.getElementById('questionContainer').classList.add('animate-fade-in');
515
+ loadQuestion();
516
+ }, 50);
517
+ } else {
518
+ showStressResult();
519
+ }
520
+ }
521
+
522
+ function showStressResult() {
523
+ document.getElementById('stressQuiz').classList.add('hidden');
524
+ document.getElementById('stressResult').classList.remove('hidden');
525
+
526
+ let level, icon, colorClass, analysis, recommendations;
527
+
528
+ if (totalScore <= 4) {
529
+ level = "Thấp";
530
+ icon = "😊";
531
+ colorClass = "bg-green-100 text-green-700";
532
+ analysis = "AI phân tích: Bạn đang có sức khỏe tinh thần tốt. Mức độ căng thẳng ở mức bình thường, cho thấy khả năng quản lý stress hiệu quả. Hệ thống thần kinh của bạn đang hoạt động cân bằng.";
533
+ recommendations = [
534
+ "Duy trì thói quen sinh hoạt lành mạnh hiện tại",
535
+ "Tham gia hoạt động thể thao 30 phút/ngày",
536
+ "Dành thời gian cho sở thích cá nhân",
537
+ "Chia sẻ cảm xúc tích cực với bạn bè"
538
+ ];
539
+ } else if (totalScore <= 10) {
540
+ level = "Trung bình";
541
+ icon = "😐";
542
+ colorClass = "bg-yellow-100 text-yellow-700";
543
+ analysis = "AI phân tích: Bạn đang có dấu hiệu stress ở mức độ vừa phải. Có thể do áp lực học tập hoặc sinh hoạt thiếu khoa học. Cần điều chỉnh để tránh leo thang.";
544
+ recommendations = [
545
+ "Áp dụng kỹ thuật thở sâu 4-7-8 (hít vào 4s, giữ 7s, thở ra 8s)",
546
+ "Lập thời gian biểu khoa học, tránh học đêm khuya",
547
+ "Nói chuyện với người thân về áp lực đang gặp phải",
548
+ "Thử phương pháp thiền định 10 phút mỗi ngày"
549
+ ];
550
+ } else if (totalScore <= 16) {
551
+ level = "Cao";
552
+ icon = "😰";
553
+ colorClass = "bg-orange-100 text-orange-700";
554
+ analysis = "AI phân tích: Mức độ stress của bạn đang ở ngưỡng cao. Các triệu chứng về thể chất và tâm lý cho thấy cơ thể đang trong trạng thái báo động. Cần can thiệp sớm.";
555
+ recommendations = [
556
+ "Giảm tải công việc học tập, ưu tiên nghỉ ngơi",
557
+ "Tập thể dục nhẹ nhàng như yoga, đi bộ",
558
+ "Tránh caffeine và đồ ngọt, bổ sung magie, vitamin B",
559
+ "Tìm gặp chuyên gia tâm lý tại trường hoặc trung tâm y tế",
560
+ "Viết nhật ký cảm xúc để giải tỏa"
561
+ ];
562
+ } else {
563
+ level = "Rất cao (Báo động)";
564
+ icon = "🚨";
565
+ colorClass = "bg-red-100 text-red-700";
566
+ analysis = "AI phân tích: Hệ thống phát hiện dấu hiệu burnout/gánh nặng tâm lý nghiêm trọng. Bạn đang ở ngưỡng nguy hiểm cần hỗ trợ chuyên nghiệp ngay lập tức.";
567
+ recommendations = [
568
+ "LIÊN HỆ BÁC SĨ TÂM LÝ HOẶC GIÁO VIÊN CHỦ NHIỆM NGAY",
569
+ "Tạm dừng mọi hoạt động học thêm, ôn thi căng thẳng",
570
+ "Thông báo tình trạng với gia đình để được hỗ trợ",
571
+ "Áp dụng kỹ thuật grounding (5-4-3-2-1 senses technique)",
572
+ "Gọi đường dây nóng tâm lý nếu cần: 1900-xxx"
573
+ ];
574
+ }
575
+
576
+ document.getElementById('stressIcon').textContent = icon;
577
+ document.getElementById('stressIcon').className = `w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 text-4xl animate-bounce ${colorClass}`;
578
+ document.getElementById('stressLevel').textContent = `Mức độ stress: ${level}`;
579
+ document.getElementById('stressAnalysis').textContent = analysis;
580
+
581
+ const recHtml = recommendations.map(r => `<li class="flex items-start gap-2"><span class="text-purple-600 mt-1">•</span><span>${r}</span></li>`).join('');
582
+ document.getElementById('stressRecommendations').innerHTML = recHtml;
583
+ }
584
+
585
+ function resetStressTest() {
586
+ currentQuestion = 0;
587
+ totalScore = 0;
588
+ document.getElementById('stressResult').classList.add('hidden');
589
+ document.getElementById('stressQuiz').classList.remove('hidden');
590
+ loadQuestion();
591
+ }
592
+
593
+ // Fake News Logic
594
+ function analyzeNews() {
595
+ const text = document.getElementById('newsInput').value.trim();
596
+ if (!text) {
597
+ alert('Vui lòng nhập nội dung tin cần kiểm tra');
598
+ return;
599
+ }
600
+
601
+ document.getElementById('newsLoading').classList.remove('hidden');
602
+ document.getElementById('newsResult').classList.add('hidden');
603
+
604
+ // Simulate AI processing
605
+ setTimeout(() => {
606
+ generateFakeNewsResult(text);
607
+ }, 2000);
608
+ }
609
+
610
+ function generateFakeNewsResult(text) {
611
+ document.getElementById('newsLoading').classList.add('hidden');
612
+ document.getElementById('newsResult').classList.remove('hidden');
613
+
614
+ // Simple heuristic simulation (in real app, this would call RAG API)
615
+ const fakeIndicators = ['sốc', 'ngay lập tức', 'cấm', 'bí mật', 'không ai biết', 'chấn động', 'cực sốc'];
616
+ const hasIndicators = fakeIndicators.some(ind => text.toLowerCase().includes(ind));
617
+
618
+ let trustScore, verdict, verdictClass, analysis;
619
+
620
+ if (text.length < 50) {
621
+ trustScore = 30;
622
+ verdict = "Nghi vấn cao";
623
+ verdictClass = "bg-red-100 text-red-700";
624
+ analysis = "Nội dung quá ngắn, thiếu thông tin chi tiết, khó xác minh nguồn gốc. RAG model không tìm thấy dữ liệu tương đồng trong database tin cậy.";
625
+ } else if (hasIndicators) {
626
+ trustScore = 25;
627
+ verdict = "Có dấu hiệu câu view";
628
+ verdictClass = "bg-orange-100 text-orange-700";
629
+ analysis = "Phát hiện từ ngữ câu view (clickbait). Ngôn ngữ mang tính kích động, thiếu dẫn chứng cụ thể. RAG so sánh và không tìm thấy xác nhận từ nguồn uy tín.";
630
+ } else if (text.includes('http') || text.includes('www')) {
631
+ trustScore = 70;
632
+ verdict = "Cần kiểm chứng thêm";
633
+ verdictClass = "bg-yellow-100 text-yellow-700";
634
+ analysis = "Có chứa đường link nhưng chưa xác minh được domain. RAG đang truy vấn cross-reference với các nguồn báo chính thống.";
635
+ } else {
636
+ trustScore = 85;
637
+ verdict = "Có vẻ đáng tin";
638
+ verdictClass = "bg-green-100 text-green-700";
639
+ analysis = "Ngôn ngữ trung lập, có dẫn chứng logic. RAG model tìm thấy thông tin tương đồng từ nguồn tin cậy.";
640
+ }
641
+
642
+ // Update UI
643
+ const scoreEl = document.getElementById('trustScore');
644
+ scoreEl.textContent = trustScore + '%';
645
+ scoreEl.className = `w-16 h-16 rounded-full flex items-center justify-center text-xl font-bold border-4 ${
646
+ trustScore > 70 ? 'border-green-500 text-green-600' :
647
+ trustScore > 40 ? 'border-yellow-500 text-yellow-600' : 'border-red-500 text-red-600'
648
+ }`;
649
+
650
+ const badge = document.getElementById('verdictBadge');
651
+ badge.className = `inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium ${verdictClass}`;
652
+ badge.innerHTML = `<i data-lucide="${trustScore > 70 ? 'check-circle' : trustScore > 40 ? 'alert-circle' : 'x-circle'}" class="w-4 h-4"></i> ${verdict}`;
653
+
654
+ document.getElementById('verdictText').textContent = trustScore > 70 ? 'Thông tin có vẻ đáng tin cậy' : 'Cần thận trọng với thông tin này';
655
+ document.getElementById('detailedAnalysis').textContent = analysis;
656
+
657
+ // RAG Sources (simulated)
658
+ const sources = trustScore > 70 ?
659
+ ['VNExpress (xác nhận 90%)', 'Báo Tuổi Trẻ (tương đồng 85%)', 'Reuters Vietnam'] :
660
+ ['Không tìm thấy nguồn tin cậy', 'Có thể là tin đồn trên mạng xã hội', 'Chưa có báo chí chính thống đăng tải'];
661
+
662
+ document.getElementById('ragSources').innerHTML = sources.map(s => `<li>• ${s}</li>`).join('');
663
+
664
+ // Warning signs
665
+ const warnings = [];
666
+ if (hasIndicators) warnings.push('Tiêu đề câu view, kích động');
667
+ if (text.length < 100) warnings.push('Thiếu thông tin chi tiết');
668
+ if (!text.includes('theo') && !text.includes('nói')) warnings.push('Không có trích dẫn nguồn');
669
+ if (text.includes('!!!') || text.includes('???')) warnings.push('Sử dụng dấu câu thái quá');
670
+
671
+ if (warnings.length === 0) warnings.push('Không phát hiện dấu hiệu bất thường rõ ràng');
672
+
673
+ document.getElementById('warningSigns').innerHTML = warnings.map(w => `<li>⚠️ ${w}</li>`).join('');
674
+
675
+ lucide.createIcons();
676
+ }
677
+
678
+ function clearNews() {
679
+ document.getElementById('newsInput').value = '';
680
+ document.getElementById('newsResult').classList.add('hidden');
681
+ }
682
+
683
+ // Learning Path Logic
684
+ function generateLearningPath(e) {
685
+ e.preventDefault();
686
+
687
+ const grade = document.getElementById('gradeLevel').value;
688
+ const major = document.getElementById('major').value;
689
+ const weakSubs = Array.from(document.querySelectorAll('.weakSubject:checked')).map(cb => cb.value);
690
+ const target = document.getElementById('targetScore').value;
691
+ const time = document.getElementById('studyTime').value;
692
+
693
+ document.getElementById('learningEmpty').classList.add('hidden');
694
+ document.getElementById('learningResult').classList.remove('hidden');
695
+
696
+ // Generate personalized roadmap
697
+ const roadmap = [];
698
+ const months = grade === '12' ? 3 : grade === '11' ? 12 : 18;
699
+
700
+ // Phase 1: Foundation
701
+ roadmap.push({
702
+ phase: "Giai đoạn 1: Củng cố nền tảng",
703
+ time: "Tháng 1-2",
704
+ tasks: [
705
+ `Ôn tập lại kiến thức lớp ${parseInt(grade)-1} - đặc biệt ${weakSubs.join(', ') || 'các môn cơ bản'}`,
706
+ "Xây dựng thói quen học tập đều đặn",
707
+ `Phân bổ thời gian: ${Math.floor(time/3)}h/ngày cho môn yếu`
708
+ ],
709
+ color: "blue"
710
+ });
711
+
712
+ // Phase 2: Intensive
713
+ if (weakSubs.length > 0) {
714
+ roadmap.push({
715
+ phase: "Giai đoạn 2: Tăng cường điểm yếu",
716
+ time: "Tháng 3-6",
717
+ tasks: [
718
+ `Tập trung cao độ vào ${weakSubs.join(', ')}`,
719
+ "Làm đề thi thử các năm trước",
720
+ "Lập nhóm học tập với bạn giỏi các môn này",
721
+ "Dùng AI tutor để giải đáp thắc mắc"
722
+ ],
723
+ color: "purple"
724
+ });
725
+ }
726
+
727
+ // Phase 3: Exam prep
728
+ roadmap.push({
729
+ phase: "Giai đoạn 3: Luyện đề & Hoàn thiện",
730
+ time: `Tháng ${months-2} - ${months}`,
731
+ tasks: [
732
+ "Luyện đề thi chuẩn mỗi ngày",
733
+ "Rèn kỹ năng quản lý thời gian làm bài",
734
+ `Mục tiêu: đạt ${target} điểm`,
735
+ "Chế độ dinh dưỡng và ngủ nghỉ khoa học"
736
+ ],
737
+ color: "green"
738
+ });
739
+
740
+ const timelineHtml = roadmap.map((item, idx) => `
741
+ <div class="relative pl-6 pb-6 border-l-2 border-${item.color}-200 last:pb-0">
742
+ <div class="absolute -left-2 top-0 w-4 h-4 rounded-full bg-${item.color}-500 border-2 border-white shadow"></div>
743
+ <div class="bg-${item.color}-50 rounded-lg p-4 border border-${item.color}-100">
744
+ <div class="flex justify-between items-start mb-2">
745
+ <h4 class="font-semibold text-${item.color}-900">${item.phase}</h4>
746
+ <span class="text-xs bg-white px-2 py-1 rounded text-${item.color}-700 font-medium">${item.time}</span>
747
+ </div>
748
+ <ul class="text-sm text-${item.color}-800 space-y-1">
749
+ ${item.tasks.map(t => `<li class="flex items-start gap-2"><span class="mt-1">•</span><span>${t}</span></li>`).join('')}
750
+ </ul>
751
+ </div>
752
+ </div>
753
+ `).join('');
754
+
755
+ document.getElementById('roadmapContainer').innerHTML = timelineHtml;
756
+
757
+ // AI Prediction
758
+ const predictionText = `Với mức độ nỗ lực ${time}h/ngày và mục tiêu ${target} điểm, AI dự đoán khả năng đạt được là ${Math.min(95, 60 + (time*5) - (weakSubs.length*5))}%.
759
+ ${weakSubs.length > 2 ? 'Cần lưu ý: Nhiều môn yếu, nên tập trung tối đa 2 môn/lúc.' : 'Tiềm năng tốt, hãy duy trì động lực!'}`;
760
+ document.getElementById('aiPrediction').textContent = predictionText;
761
+ }
762
+
763
+ // Init
764
+ loadQuestion();
765
+ </script>
766
+ </body>
767
+ </html>
style.css ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom animations and utilities */
2
+ .animate-slide-in {
3
+ animation: slideIn 0.5s ease-out;
4
+ }
5
+
6
+ @keyframes slideIn {
7
+ from {
8
+ opacity: 0;
9
+ transform: translateX(-20px);
10
+ }
11
+ to {
12
+ opacity: 1;
13
+ transform: translateX(0);
14
+ }
15
+ }
16
+
17
+ /* Smooth scrolling */
18
+ html {
19
+ scroll-behavior: smooth;
20
+ }
21
+
22
+ /* Custom scrollbar */
23
+ ::-webkit-scrollbar {
24
+ width: 8px;
25
+ height: 8px;
26
+ }
27
+
28
+ ::-webkit-scrollbar-track {
29
+ background: #f1f1f1;
30
+ }
31
+
32
+ ::-webkit-scrollbar-thumb {
33
+ background: #c7c7c7;
34
+ border-radius: 4px;
35
+ }
36
+
37
+ ::-webkit-scrollbar-thumb:hover {
38
+ background: #a0a0a0;
39
+ }
40
+
41
+ /* Gradient text support */
42
+ .gradient-text {
43
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
44
+ -webkit-background-clip: text;
45
+ -webkit-text-fill-color: transparent;
46
+ background-clip: text;
47
+ }
48
+
49
+ /* Card hover effects */
50
+ .feature-card {
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .feature-card:hover {
55
+ transform: translateY(-5px);
56
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
57
+ }
58
+
59
+ /* Button ripple effect */
60
+ .btn-ripple {
61
+ position: relative;
62
+ overflow: hidden;
63
+ }
64
+
65
+ .btn-ripple::after {
66
+ content: '';
67
+ position: absolute;
68
+ top: 50%;
69
+ left: 50%;
70
+ width: 0;
71
+ height: 0;
72
+ border-radius: 50%;
73
+ background: rgba(255,255,255,0.3);
74
+ transform: translate(-50%, -50%);
75
+ transition: width 0.6s, height 0.6s;
76
+ }
77
+
78
+ .btn-ripple:active::after {
79
+ width: 300px;
80
+ height: 300px;
81
+ }