-
Notifications
You must be signed in to change notification settings - Fork 51
Expand file tree
/
Copy pathverification.html
More file actions
491 lines (448 loc) · 23.6 KB
/
verification.html
File metadata and controls
491 lines (448 loc) · 23.6 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
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Certificate Verification - BYAMN</title>
<meta name="description" content="Verify the authenticity of BYAMN course completion certificates.">
<link rel="icon" type="image/png" href="./logo.png">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Inter font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Custom styles -->
<link rel="stylesheet" href="assets/css/styles.css">
<!-- Firebase SDK - Using compat versions without type="module" -->
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-database-compat.js"></script>
<!-- Firebase configuration -->
<script type="module" src="assets/js/firebase.js"></script>
<style>
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* Animation classes */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
.pulse-slow {
animation: pulse 3s infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 4s ease-in-out infinite;
}
/* Custom styles for verification page */
.verification-card {
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.05);
}
.verification-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}
.certificate-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Rate limit warning */
.rate-limit-warning {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Print styles */
@media print {
body {
font-family: Arial, sans-serif;
padding: 20px;
background: white !important;
}
h1 { color: #000 !important; }
.bg-green-50 { background: #f0f9f0 !important; }
.bg-red-50 { background: #fee !important; }
.bg-blue-50 { background: #eff6ff !important; }
.no-print { display: none !important; }
}
/* Button styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
}
.btn-outline {
background: transparent;
border: 2px solid #5624d0;
color: #5624d0;
}
.btn-outline:hover {
background: #5624d0;
color: white;
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
<!-- Header -->
<header data-aos-duration="800" class="bg-white shadow-sm sticky top-0 z-10 no-print">
<div data-aos="fade-down" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center py-4 gap-4">
<div class="flex items-center">
<a href="index.html" class="text-theme-link text-theme-link-hover mr-4">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</a>
<div class="flex items-center space-x-2">
<div class="h-10 w-10 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center">
<span class="text-white font-bold text-lg">B</span>
</div>
<span class="text-xl font-bold text-gray-900">BYAMN</span>
</div>
</div>
<div class="flex flex-wrap items-center gap-3">
<span id="user-name" class="text-gray-700 font-medium">Welcome, Guest</span>
<button id="logout-btn" class="px-4 py-2 rounded-md bg-[#5624d0] hover:bg-[#451db0] text-white font-medium transition duration-300 hidden">
Logout
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Hero Section -->
<div class="text-center mb-12 fade-in">
<div class="flex justify-center mb-6">
<div class="certificate-icon w-20 h-20 rounded-full flex items-center justify-center float-animation">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
</div>
</div>
<h1 class="text-4xl font-bold text-gray-900 mb-4">Certificate Verification</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Verify the authenticity of BYAMN course completion certificates with our secure validation system</p>
</div>
<!-- Security Notice -->
<div class="max-w-2xl mx-auto bg-blue-50/20 border border-blue-200 rounded-xl p-5 mb-8 fade-in no-print">
<div class="flex">
<svg class="h-6 w-6 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<h3 class="font-bold text-blue-800 mb-1">Security Notice</h3>
<p class="text-blue-700 text-sm">
All certificate verifications are processed through our secure server-side validation system to ensure authenticity and prevent fraud. Rate limiting is enforced to prevent abuse.
</p>
</div>
</div>
</div>
<!-- Example Certificates -->
<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md p-6 mb-8 verification-card fade-in no-print">
<h2 class="text-xl font-bold text-gray-900 mb-4">How to Verify</h2>
<p class="text-gray-600 mb-4">Enter your certificate UID below. Certificate UIDs follow the format: <code class="bg-gray-100 px-2 py-1 rounded">CERT-BYAMN-XXXXX</code></p>
<div class="bg-gray-50 rounded-lg p-4 mb-4">
<h3 class="font-medium text-gray-900 mb-2">Example Certificate UIDs:</h3>
<ul class="text-sm text-gray-600 space-y-1">
<li class="flex items-center">
<svg class="h-4 w-4 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
CERT-BYAMN-12345
</li>
<li class="flex items-center">
<svg class="h-4 w-4 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
CERT-BYAMN-67890
</li>
<li class="flex items-center">
<svg class="h-4 w-4 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
CERT-BYAMN-ABCDE
</li>
</ul>
</div>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<h3 class="font-medium text-yellow-800 mb-2">Rate Limiting</h3>
<p class="text-yellow-700 text-sm">
To ensure system stability and prevent abuse, we limit verification requests to 5 per minute per user. If you exceed this limit, you'll need to wait before making additional requests.
</p>
</div>
</div>
<!-- Verification Form -->
<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden mb-8 verification-card fade-in no-print">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Verify Certificate</h2>
<p class="text-gray-600 mb-6">Enter the certificate UID to verify its authenticity</p>
<form id="verification-form">
<div class="mb-6">
<label for="certificate-uid" class="block text-sm font-medium text-gray-700 mb-2">Certificate UID</label>
<input type="text" id="certificate-uid" placeholder="e.g. CERT-BYAMN-12345" required class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
</div>
<div class="flex justify-center">
<button type="submit" id="verify-btn" class="px-6 py-3 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium transition duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 shadow-lg hover:shadow-xl">
<span>Verify Certificate</span>
<svg class="inline-block ml-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</button>
</div>
</form>
</div>
</div>
<!-- Verification Result -->
<div id="verification-result" class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden hidden fade-in">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Verification Result</h2>
<div id="result-content">
<!-- Result will be displayed here -->
</div>
<!-- Print button will be added here dynamically -->
<div id="print-button-container" class="mt-6 no-print"></div>
</div>
</div>
</main>
<!-- Footer -->
<footer data-aos-duration="1000" class="bg-neutral-900 text-white mt-24 fade-in no-print">
<div data-aos="fade-up" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="col-span-1 md:col-span-2">
<div class="flex items-center mb-4">
<div class="flex items-center space-x-2">
<div class="h-10 w-10 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center">
<span class="text-white font-bold text-lg">B</span>
</div>
<span class="text-xl font-bold text-white">BYAMN</span>
</div>
</div>
<p class="typography-body text-neutral-300 max-w-md">
Empowering learners worldwide with high-quality, accessible education for the digital age.
</p>
</div>
<div>
<h3 class="typography-h3 mb-4">Platform</h3>
<ul class="space-y-2 text-neutral-300">
<li><a href="courses.html" class="hover:text-white transition-colors">Courses</a></li>
<li><a href="about.html" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="faq.html" class="hover:text-white transition-colors">FAQ</a></li>
<li><a href="contact.html" class="hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h3 class="typography-h3 mb-4">Legal</h3>
<ul class="space-y-2 text-neutral-300">
<li><a href="privacy.html" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="terms.html" class="hover:text-white transition-colors">Terms of Service</a></li>
</ul>
</div>
</div>
<div
class="border-t border-neutral-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"
>
<p class="text-neutral-300">© 2026 BYAMN. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a
href="https://www.linkedin.com/company/byamn/"
target="_blank"
rel="noopener noreferrer"
class="text-neutral-300 hover:text-white transition-colors duration-200 transform hover:scale-110"
>
<span class="sr-only">LinkedIn</span>
<svg
class="h-6 w-6"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="https://www.facebook.com/byamn.byamn/"
target="_blank"
rel="noopener noreferrer"
class="text-neutral-300 hover:text-white transition-colors duration-200 transform hover:scale-110"
>
<span class="sr-only">Facebook</span>
<svg
class="h-6 w-6"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="https://x.com/byamn.ai"
target="_blank"
rel="noopener noreferrer"
class="text-neutral-300 hover:text-white transition-colors duration-200 transform hover:scale-110"
>
<span class="sr-only">X (Twitter)</span> <svg
class="h-6 w-6"
fill="currentColor"
viewBox="0 0 512 512"
aria-hidden="true"
>
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script>
// AOS initialization
if (typeof AOS !== 'undefined') {
AOS.init({
duration: 1200,
once: true
});
}
// Print verification result function
function printVerificationResult() {
const resultContent = document.getElementById('result-content');
if (!resultContent || resultContent.innerHTML.trim() === '') {
alert('No verification result to print');
return;
}
const printWindow = window.open('', '_blank');
printWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>BYAMN Certificate Verification</title>
<style>
@media print {
body {
font-family: Arial, sans-serif;
padding: 20px;
background: white !important;
}
h1 { color: #000 !important; }
.bg-green-50 { background: #f0f9f0 !important; }
.bg-red-50 { background: #fee !important; }
.bg-blue-50 { background: #eff6ff !important; }
}
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
color: #000;
text-align: center;
margin-bottom: 30px;
border-bottom: 2px solid #5624d0;
padding-bottom: 10px;
}
.result-container {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.success { background-color: #f0f9f0; }
.error { background-color: #fee; }
.info { background-color: #eff6ff; }
.verification-date {
text-align: right;
color: #666;
font-size: 0.9em;
margin-top: 30px;
border-top: 1px solid #ddd;
padding-top: 10px;
}
.byamn-logo {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
font-size: 1.5em;
color: #5624d0;
}
</style>
</head>
<body>
<div class="byamn-logo">BYAMN Certificate Verification</div>
<h1>Certificate Verification Result</h1>
<div class="result-container ${resultContent.className.includes('bg-green-50') ? 'success' : resultContent.className.includes('bg-red-50') ? 'error' : 'info'}">
${resultContent.innerHTML}
</div>
<div class="verification-date">
Verified on: ${new Date().toLocaleString()}<br>
Official BYAMN Verification System
</div>
<script>
window.onload = function() {
window.print();
setTimeout(() => {
if (confirm('Print completed. Close this window?')) {
window.close();
}
}, 500);
};
<\/script>
</body>
</html>
`);
printWindow.document.close();
}
// Add print button dynamically when verification result is shown
document.addEventListener('DOMContentLoaded', function() {
// This will be called from verification.js when result is displayed
window.addPrintButton = function() {
const verificationResult = document.getElementById('verification-result');
const printButtonContainer = document.getElementById('print-button-container');
if (verificationResult && printButtonContainer && verificationResult.style.display !== 'none') {
// Clear any existing button
printButtonContainer.innerHTML = '';
// Create print button
const printBtn = document.createElement('button');
printBtn.className = 'btn btn-outline mt-4 flex items-center';
printBtn.innerHTML = `
<svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
</svg>
Print Verification Result
`;
printBtn.onclick = printVerificationResult;
printButtonContainer.appendChild(printBtn);
}
};
});
</script>
<!-- Main JavaScript -->
<script src="assets/js/main.js"></script>
<script src="assets/js/verification.js"></script>
</body>
</html>