Skip to content

Commit e38d0ae

Browse files
TranHuuDat2004TranHuuDat2004
committed
add tour tutorial
1 parent 3830fb2 commit e38d0ae

2 files changed

Lines changed: 304 additions & 10 deletions

File tree

‎index.html‎

Lines changed: 144 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,78 @@
88
<link rel="stylesheet" href="css/main.css">
99
<link rel="stylesheet" href="css/homepage.css">
1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
11-
1211
<link rel="icon" href="images/favicon.png" type="image/x-icon">
12+
13+
<!-- 1. Tích hợp CSS của Driver.js -->
14+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
15+
16+
<style>
17+
/* CSS cho nút Help/Tour */
18+
.tour-btn {
19+
position: fixed;
20+
bottom: 20px;
21+
right: 20px;
22+
background-color: #fff;
23+
border: 1px solid #ddd;
24+
color: #333;
25+
width: 50px;
26+
height: 50px;
27+
border-radius: 50%;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
cursor: pointer;
32+
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
33+
z-index: 999;
34+
font-size: 24px;
35+
transition: transform 0.2s, background-color 0.2s;
36+
}
37+
38+
.tour-btn:hover {
39+
transform: scale(1.1);
40+
background-color: #f8f9fa;
41+
}
42+
43+
/* Tùy chỉnh giao diện Popover của Driver.js */
44+
.driver-popover.driverjs-theme {
45+
background-color: #fff;
46+
color: #333;
47+
border-radius: 8px;
48+
padding: 15px;
49+
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
50+
}
51+
52+
.driver-popover.driverjs-theme .driver-popover-title {
53+
font-size: 18px;
54+
font-weight: 700;
55+
margin-bottom: 8px;
56+
color: #000;
57+
}
58+
59+
.driver-popover.driverjs-theme .driver-popover-description {
60+
font-size: 14px;
61+
line-height: 1.5;
62+
color: #555;
63+
}
64+
65+
.driver-popover.driverjs-theme button {
66+
background-color: #007bff; /* Màu chủ đạo giả định */
67+
color: #fff;
68+
text-shadow: none;
69+
border: none;
70+
border-radius: 4px;
71+
padding: 6px 12px;
72+
}
73+
</style>
1374
</head>
1475

1576
<body>
1677

17-
<!-- === SIDEBAR CHÍNH (BÊN TRÁI) - CÓ HEADER VÀ NÚT ĐÓNG === -->
78+
<!-- === SIDEBAR CHÍNH (BÊN TRÁI) === -->
1879
<nav id="left-sidebar" class="sidebar left-sidebar">
1980
<div class="sidebar-header">
2081
<div class="sidebar-logo-container">
2182
<img src="images/logo.png" alt="Slidify Logo" class="logo">
22-
2383
</div>
2484
<button id="close-left-sidebar-btn" class="close-sidebar-btn">
2585
<i class="fas fa-times"></i>
@@ -28,14 +88,18 @@
2888
<a href="index.html">Trang Chủ</a>
2989
<a href="#">Giới Thiệu</a>
3090
</nav>
91+
3192
<!-- === LỚP PHỦ (OVERLAY) === -->
3293
<div id="overlay"></div>
3394

34-
<!-- Header của bạn sẽ được nạp vào đây -->
95+
<!-- Header Placeholder -->
3596
<header id="header-placeholder"></header>
3697

98+
<!-- 2. Nút kích hoạt lại Tour -->
99+
<div class="tour-btn" id="restart-tour" title="Hướng dẫn sử dụng">❓</div>
100+
37101
<main class="homepage-main">
38-
<h1>Chào mừng đến với Slidify</h1>
102+
<h1 id="welcome-title">Chào mừng đến với Slidify</h1>
39103
<p>Chọn một môn học bên dưới để bắt đầu ghi chú và khám phá kiến thức.</p>
40104

41105
<div id="course-list-container" class="course-list-container">
@@ -48,8 +112,11 @@ <h1>Chào mừng đến với Slidify</h1>
48112
<!-- Nhúng các file JS cần thiết -->
49113
<script src="js/main.js"></script>
50114

115+
<!-- 3. Tích hợp Script của Driver.js -->
116+
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
117+
51118
<script>
52-
// Hàm load header/footer (có thể tách ra file js/main.js nếu muốn)
119+
// Hàm load header/footer
53120
function loadComponent(filePath, elementId) {
54121
fetch(filePath)
55122
.then(response => response.text())
@@ -63,13 +130,13 @@ <h1>Chào mừng đến với Slidify</h1>
63130

64131
// Hiển thị danh sách môn học từ courses.json
65132
const courseContainer = document.getElementById('course-list-container');
133+
66134
fetch('js/courses.json')
67135
.then(response => response.json())
68136
.then(courses => {
69137
courses.forEach(course => {
70138
const courseCard = document.createElement('a');
71139
courseCard.className = 'course-card';
72-
// Link đến trang học với tham số ?course=...
73140
courseCard.href = `subject.html?course=${course.id}`;
74141

75142
courseCard.innerHTML = `
@@ -81,12 +148,82 @@ <h3>${course.title}</h3>
81148
`;
82149
courseContainer.appendChild(courseCard);
83150
});
151+
152+
// === 4. KHỞI TẠO TOUR SAU KHI DỮ LIỆU ĐÃ LOAD ===
153+
// Chúng ta gọi hàm initTour ở đây để đảm bảo các thẻ course-card đã xuất hiện
154+
initSlidifyTour();
84155
})
85156
.catch(error => {
86157
console.error('Error loading courses:', error);
87158
courseContainer.innerHTML = '<p>Lỗi khi tải danh sách môn học.</p>';
88159
});
89160
});
161+
162+
function initSlidifyTour() {
163+
const driver = window.driver.js.driver;
164+
165+
const driverObj = driver({
166+
showProgress: true,
167+
animate: true,
168+
doneBtnText: 'Bắt đầu học ngay!',
169+
nextBtnText: 'Tiếp theo',
170+
prevBtnText: 'Quay lại',
171+
popoverClass: 'driverjs-theme', // Class CSS tùy chỉnh
172+
steps: [
173+
{
174+
element: '#welcome-title',
175+
popover: {
176+
title: 'Chào mừng đến với Slidify! 🎓',
177+
description: 'Nền tảng hỗ trợ học tập và ghi chú thông minh của bạn.',
178+
side: "bottom",
179+
align: 'center'
180+
}
181+
},
182+
{
183+
element: '#header-placeholder',
184+
popover: {
185+
title: 'Thanh công cụ',
186+
description: 'Nơi bạn có thể tìm kiếm bài giảng hoặc truy cập các cài đặt hiển thị.', // Đã sửa nội dung tại đây
187+
side: "bottom",
188+
align: 'center'
189+
}
190+
},
191+
{
192+
element: '#course-list-container',
193+
popover: {
194+
title: 'Kho môn học',
195+
description: 'Tất cả các môn học hiện có đều nằm ở đây. Hãy chọn một môn để bắt đầu xem bài giảng.',
196+
side: "top",
197+
align: 'center'
198+
}
199+
},
200+
{
201+
element: '#restart-tour',
202+
popover: {
203+
title: 'Hỗ trợ',
204+
description: 'Bấm vào nút này bất cứ lúc nào nếu bạn muốn xem lại hướng dẫn.',
205+
side: "left",
206+
align: 'center'
207+
}
208+
}
209+
]
210+
});
211+
212+
// Logic tự động chạy lần đầu
213+
const hasSeenTour = localStorage.getItem('hasSeenSlidifyTour');
214+
if (!hasSeenTour) {
215+
// Delay 500ms để đảm bảo layout ổn định hoàn toàn
216+
setTimeout(() => {
217+
driverObj.drive();
218+
localStorage.setItem('hasSeenSlidifyTour', 'true');
219+
}, 500);
220+
}
221+
222+
// Gán sự kiện cho nút ?
223+
document.getElementById('restart-tour').addEventListener('click', () => {
224+
driverObj.drive();
225+
});
226+
}
90227
</script>
91228
</body>
92229

0 commit comments

Comments
 (0)