-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhelp.html
More file actions
340 lines (315 loc) · 21.5 KB
/
help.html
File metadata and controls
340 lines (315 loc) · 21.5 KB
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help - Library Management</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 font-inter">
<!-- Sidebar -->
<div class="fixed left-0 top-0 h-full w-60 bg-white border-r border-gray-200 z-30">
<div class="flex flex-col h-full">
<!-- Logo -->
<div class="flex items-center px-6 py-5 border-b border-gray-100">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center">
<i data-lucide="book-open" class="w-5 h-5 text-white"></i>
</div>
<span class="text-xl font-semibold text-gray-900">Library App</span>
</div>
</div>
<!-- Navigation -->
<nav class="flex-1 px-4 py-6 space-y-2">
<a href="#" data-page="index.html" class="nav-item flex items-center px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200">
<i data-lucide="layout-dashboard" class="w-5 h-5 mr-3"></i>
Dashboard
</a>
<a href="#" data-page="members.html" class="nav-item flex items-center px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200">
<i data-lucide="users" class="w-5 h-5 mr-3"></i>
Members
</a>
<a href="#" data-page="add-books.html" class="nav-item flex items-center px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200">
<i data-lucide="book-plus" class="w-5 h-5 mr-3"></i>
Add Books
</a>
<a href="#" data-page="checkout-books.html" class="nav-item flex items-center px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200">
<i data-lucide="book-check" class="w-5 h-5 mr-3"></i>
Check-out Books
</a>
<a href="#" data-page="analytics.html" class="nav-item flex items-center px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200">
<i data-lucide="bar-chart-3" class="w-5 h-5 mr-3"></i>
Analytics
</a>
<a href="#" data-page="settings.html" class="nav-item flex items-center px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200">
<i data-lucide="settings" class="w-5 h-5 mr-3"></i>
Settings
</a>
<a href="#" data-page="help.html" class="nav-item active flex items-center px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200">
<i data-lucide="help-circle" class="w-5 h-5 mr-3"></i>
Help
</a>
</nav>
<!-- Logout -->
<div class="px-4 pb-6">
<button class="nav-item flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200 text-red-600 hover:bg-red-50">
<i data-lucide="log-out" class="w-5 h-5 mr-3"></i>
Logout
</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="ml-60">
<!-- Top Navbar -->
<header class="sticky top-0 bg-white border-b border-gray-200 z-20">
<div class="flex items-center justify-between px-8 py-4">
<!-- Search Bar -->
<div class="flex-1 max-w-2xl">
<div class="relative">
<i data-lucide="search" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"></i>
<input type="text" placeholder="Search help articles..."
class="w-full pl-12 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-200">
</div>
</div>
<!-- Right Section -->
<div class="flex items-center space-x-4 ml-8">
<!-- Contact Support Button -->
<button class="px-4 py-2 bg-emerald-500 text-white rounded-lg text-sm font-medium hover:bg-emerald-600 transition-colors duration-200">
<i data-lucide="message-circle" class="w-4 h-4 mr-2 inline"></i>
Contact Support
</button>
<!-- Notifications -->
<button class="relative p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-all duration-200">
<i data-lucide="bell" class="w-5 h-5"></i>
<span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
</button>
<!-- User Profile -->
<div class="flex items-center space-x-3">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face"
alt="User" class="w-8 h-8 rounded-full">
<div class="hidden md:block">
<p class="text-sm font-medium text-gray-900">Admin</p>
</div>
<i data-lucide="chevron-down" class="w-4 h-4 text-gray-400"></i>
</div>
</div>
</div>
</header>
<!-- Help Content -->
<main class="p-8">
<!-- Page Header -->
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">How can we help you?</h1>
<p class="text-gray-600 text-lg">Find answers to common questions and get support</p>
</div>
<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<div class="bg-white rounded-2xl p-6 border border-gray-100 text-center hover:shadow-lg transition-all duration-300 cursor-pointer">
<div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center mx-auto mb-4">
<i data-lucide="book-open" class="w-6 h-6 text-emerald-600"></i>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">User Guide</h3>
<p class="text-gray-600 text-sm">Complete guide to using the library system</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-100 text-center hover:shadow-lg transition-all duration-300 cursor-pointer">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-4">
<i data-lucide="video" class="w-6 h-6 text-blue-600"></i>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Video Tutorials</h3>
<p class="text-gray-600 text-sm">Step-by-step video instructions</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-100 text-center hover:shadow-lg transition-all duration-300 cursor-pointer">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-4">
<i data-lucide="message-circle" class="w-6 h-6 text-purple-600"></i>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Contact Support</h3>
<p class="text-gray-600 text-sm">Get help from our support team</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- FAQ Section -->
<div class="lg:col-span-2">
<div class="bg-white rounded-2xl p-6 border border-gray-100">
<h3 class="text-xl font-semibold text-gray-900 mb-6">Frequently Asked Questions</h3>
<div class="space-y-4">
<!-- FAQ Item -->
<div class="faq-item border border-gray-200 rounded-xl">
<button class="faq-question w-full text-left p-4 flex items-center justify-between hover:bg-gray-50 transition-colors duration-200">
<span class="font-medium text-gray-900">How do I add a new book to the system?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-400 transform transition-transform duration-200"></i>
</button>
<div class="faq-answer hidden p-4 pt-0 text-gray-600 text-sm">
<p>To add a new book, navigate to the "Add Books" section from the sidebar. Fill in the required information including ISBN, title, author, and other details. You can also upload a book cover image. Click "Add Book" to save the new entry to your library collection.</p>
</div>
</div>
<div class="faq-item border border-gray-200 rounded-xl">
<button class="faq-question w-full text-left p-4 flex items-center justify-between hover:bg-gray-50 transition-colors duration-200">
<span class="font-medium text-gray-900">How do I process a book checkout?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-400 transform transition-transform duration-200"></i>
</button>
<div class="faq-answer hidden p-4 pt-0 text-gray-600 text-sm">
<p>Go to the "Check-out Books" section. Search for the member by ID or name, then search for the book by ISBN or title. Set the checkout and due dates, add any notes if needed, and click "Process Checkout" to complete the transaction.</p>
</div>
</div>
<div class="faq-item border border-gray-200 rounded-xl">
<button class="faq-question w-full text-left p-4 flex items-center justify-between hover:bg-gray-50 transition-colors duration-200">
<span class="font-medium text-gray-900">How do I add a new member?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-400 transform transition-transform duration-200"></i>
</button>
<div class="faq-answer hidden p-4 pt-0 text-gray-600 text-sm">
<p>In the "Members" section, click the "Add Member" button. Fill in the member's personal information, select their membership type (Student, Faculty, Staff, or Public), and set the membership duration. The system will automatically generate a unique member ID.</p>
</div>
</div>
<div class="faq-item border border-gray-200 rounded-xl">
<button class="faq-question w-full text-left p-4 flex items-center justify-between hover:bg-gray-50 transition-colors duration-200">
<span class="font-medium text-gray-900">How do I handle overdue books?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-400 transform transition-transform duration-200"></i>
</button>
<div class="faq-answer hidden p-4 pt-0 text-gray-600 text-sm">
<p>Overdue books are automatically flagged in the system. You can view them in the "Overdue History" section on the dashboard or in the "Check-out Books" section. The system calculates fines based on your library's policy settings. You can process returns and collect fines from there.</p>
</div>
</div>
<div class="faq-item border border-gray-200 rounded-xl">
<button class="faq-question w-full text-left p-4 flex items-center justify-between hover:bg-gray-50 transition-colors duration-200">
<span class="font-medium text-gray-900">How do I generate reports?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-400 transform transition-transform duration-200"></i>
</button>
<div class="faq-answer hidden p-4 pt-0 text-gray-600 text-sm">
<p>Visit the "Analytics" section to view comprehensive reports and statistics. You can see circulation trends, member growth, popular books, and detailed analytics. Use the "Export Report" button to download data in various formats for external use.</p>
</div>
</div>
<div class="faq-item border border-gray-200 rounded-xl">
<button class="faq-question w-full text-left p-4 flex items-center justify-between hover:bg-gray-50 transition-colors duration-200">
<span class="font-medium text-gray-900">How do I backup my data?</span>
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-400 transform transition-transform duration-200"></i>
</button>
<div class="faq-answer hidden p-4 pt-0 text-gray-600 text-sm">
<p>Data backup can be configured in the "Settings" section under "Backup & Export". You can enable automatic daily backups or manually create backups. The system supports various export formats and can be configured to save backups to cloud storage or local drives.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Support Sidebar -->
<div class="space-y-6">
<!-- Contact Information -->
<div class="bg-white rounded-2xl p-6 border border-gray-100">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Contact Support</h3>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
<i data-lucide="mail" class="w-5 h-5 text-emerald-600"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-900">Email Support</p>
<p class="text-sm text-gray-600">support@libraryapp.com</p>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
<i data-lucide="phone" class="w-5 h-5 text-blue-600"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-900">Phone Support</p>
<p class="text-sm text-gray-600">+1 (555) 123-4567</p>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
<i data-lucide="message-circle" class="w-5 h-5 text-purple-600"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-900">Live Chat</p>
<p class="text-sm text-gray-600">Available 9 AM - 6 PM</p>
</div>
</div>
</div>
<button class="w-full mt-4 px-4 py-3 bg-emerald-500 text-white rounded-xl hover:bg-emerald-600 transition-colors duration-200">
Start Live Chat
</button>
</div>
<!-- System Status -->
<div class="bg-white rounded-2xl p-6 border border-gray-100">
<h3 class="text-lg font-semibold text-gray-900 mb-4">System Status</h3>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Database</span>
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span class="text-sm text-emerald-600">Operational</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">API Services</span>
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span class="text-sm text-emerald-600">Operational</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Backup System</span>
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span class="text-sm text-emerald-600">Operational</span>
</div>
</div>
</div>
</div>
<!-- Quick Links -->
<div class="bg-white rounded-2xl p-6 border border-gray-100">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Links</h3>
<div class="space-y-2">
<a href="#" class="block text-sm text-emerald-600 hover:text-emerald-700 transition-colors duration-200">
📖 User Manual (PDF)
</a>
<a href="#" class="block text-sm text-emerald-600 hover:text-emerald-700 transition-colors duration-200">
🎥 Video Tutorials
</a>
<a href="#" class="block text-sm text-emerald-600 hover:text-emerald-700 transition-colors duration-200">
🔧 System Requirements
</a>
<a href="#" class="block text-sm text-emerald-600 hover:text-emerald-700 transition-colors duration-200">
📋 Release Notes
</a>
<a href="#" class="block text-sm text-emerald-600 hover:text-emerald-700 transition-colors duration-200">
🐛 Report a Bug
</a>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
// Initialize Lucide Icons and FAQ functionality
document.addEventListener('DOMContentLoaded', function() {
lucide.createIcons();
initializeFAQ();
});
function initializeFAQ() {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
const answer = item.querySelector('.faq-answer');
const icon = question.querySelector('i');
question.addEventListener('click', () => {
const isOpen = !answer.classList.contains('hidden');
if (isOpen) {
answer.classList.add('hidden');
icon.style.transform = 'rotate(0deg)';
} else {
answer.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)';
}
});
});
}
</script>
</body>
</html>