.video-course-container {
font-family: 'Montserrat', sans-serif;
background: #fffaf3;
color: #2d2d2d;
line-height: 1.6;
padding: 60px 20px;
}
.video-course-container * {
box-sizing: border-box;
}
.video-course-inner {
max-width: 1400px;
margin: 0 auto;
}
.vc-header {
text-align: center;
margin-bottom: 80px;
position: relative;
}
.vc-header h1 {
font-size: 3.5rem;
font-weight: 700;
color: #d7127b;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.vc-subtitle {
font-size: 1.2rem;
color: #2d2d2d;
font-weight: 400;
opacity: 0.8;
}
.vc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.vc-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.vc-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(215, 18, 123, 0.15);
}
.vc-card:nth-child(1) { border-top: 4px solid #d7127b; }
.vc-card:nth-child(2) { border-top: 4px solid #ba94c4; }
.vc-card:nth-child(3) { border-top: 4px solid #a8c89b; }
.vc-video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
background: #f5f5f5;
}
.vc-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vc-info {
padding: 24px;
}
.vc-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 12px;
color: #2d2d2d;
}
.vc-description {
font-size: 0.95rem;
color: #2d2d2d;
opacity: 0.7;
margin-bottom: 16px;
}
.vc-progress-bar {
width: 100%;
height: 6px;
background: #e0e0e0;
border-radius: 3px;
overflow: hidden;
margin-bottom: 12px;
}
.vc-progress-fill {
height: 100%;
background: linear-gradient(90deg, #d7127b, #ba94c4);
width: 0%;
transition: width 0.3s ease;
}
.vc-status {
font-size: 0.85rem;
font-weight: 500;
color: #d7127b;
}
.vc-cert-section {
background: white;
border-radius: 16px;
padding: 50px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
display: none;
margin-top: 60px;
}
.vc-cert-section.active {
display: block;
animation: vcSlideUp 0.5s ease;
}
@keyframes vcSlideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vc-cert-section h2 {
font-size: 2.5rem;
color: #d7127b;
margin-bottom: 20px;
}
.vc-cert-section p {
font-size: 1.1rem;
margin-bottom: 30px;
opacity: 0.8;
}
.vc-btn {
display: inline-block;
padding: 16px 40px;
background: #d7127b;
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(215, 18, 123, 0.3);
font-family: 'Montserrat', sans-serif;
}
.vc-btn:hover {
background: #b00f66;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(215, 18, 123, 0.4);
}
.vc-password-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(45, 45, 45, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
backdrop-filter: blur(10px);
}
.vc-password-overlay.hidden {
display: none;
}
.vc-password-box {
background: white;
padding: 50px 60px;
border-radius: 20px;
max-width: 500px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: vcFadeIn 0.4s ease;
}
@keyframes vcFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.vc-password-box h2 {
font-size: 2rem;
color: #d7127b;
margin-bottom: 15px;
}
.vc-password-box p {
margin-bottom: 30px;
opacity: 0.7;
}
.vc-password-box input {
width: 100%;
padding: 16px 20px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 1rem;
font-family: 'Montserrat', sans-serif;
margin-bottom: 20px;
transition: border-color 0.3s ease;
}
.vc-password-box input:focus {
outline: none;
border-color: #d7127b;
}
.vc-error-message {
color: #e74c3c;
font-size: 0.9rem;
margin-top: -10px;
margin-bottom: 15px;
display: none;
}
.vc-error-message.show {
display: block;
}
.vc-cert-preview {
max-width: 800px;
margin: 30px auto;
padding: 60px;
background: white;
border: 8px solid #d7127b;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.vc-cert-header {
text-align: center;
margin-bottom: 40px;
}
.vc-cert-title {
font-size: 3rem;
font-weight: 700;
color: #d7127b;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
.vc-cert-subtitle {
font-size: 1.2rem;
color: #2d2d2d;
opacity: 0.6;
}
.vc-cert-body {
text-align: center;
margin: 40px 0;
}
.vc-cert-name {
font-size: 2.5rem;
font-weight: 700;
color: #2d2d2d;
margin: 20px 0;
border-bottom: 2px solid #ba94c4;
padding-bottom: 10px;
display: inline-block;
}
.vc-cert-course {
font-size: 1.4rem;
color: #2d2d2d;
margin: 30px 0;
font-weight: 500;
}
.vc-cert-footer {
display: flex;
justify-content: space-between;
margin-top: 60px;
padding-top: 30px;
border-top: 2px solid #e0e0e0;
}
.vc-cert-signature {
text-align: center;
}
.vc-cert-signature-line {
border-top: 2px solid #2d2d2d;
width: 200px;
margin-bottom: 10px;
}
.vc-cert-date {
font-size: 0.95rem;
color: #2d2d2d;
opacity: 0.7;
}
.vc-input {
width: 100%;
max-width: 400px;
padding: 16px 20px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 1rem;
font-family: 'Montserrat', sans-serif;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.video-course-container {
padding: 40px 20px;
}
.vc-header h1 {
font-size: 2.5rem;
}
.vc-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.vc-password-box {
padding: 40px 30px;
}
.vc-cert-section {
padding: 30px 20px;
}
.vc-cert-preview {
padding: 30px 20px;
}
.vc-cert-footer {
flex-direction: column;
gap: 30px;
}
}
(function() {
const VC_COURSE_PASSWORD = "test123";
window.vcCheckPassword = function() {
const input = document.getElementById('vcPasswordInput').value;
const errorMessage = document.getElementById('vcErrorMessage');
if (input === VC_COURSE_PASSWORD) {
document.getElementById('vcPasswordOverlay').classList.add('hidden');
vcInitializeVideos();
} else {
errorMessage.classList.add('show');
}
};
document.getElementById('vcPasswordInput')?.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
vcCheckPassword();
}
});
let vcVideoProgress = {
video1: 0,
video2: 0,
video3: 0
};
function vcInitializeVideos() {
const iframe1 = document.getElementById('vcVideo1');
const iframe2 = document.getElementById('vcVideo2');
const iframe3 = document.getElementById('vcVideo3');
if (iframe1 && typeof Vimeo !== 'undefined') {
const player1 = new Vimeo.Player(iframe1);
vcSetupVideoTracking(player1, 'video1', 1);
}
if (iframe2 && typeof Vimeo !== 'undefined') {
const player2 = new Vimeo.Player(iframe2);
vcSetupVideoTracking(player2, 'video2', 2);
}
if (iframe3 && typeof Vimeo !== 'undefined') {
const player3 = new Vimeo.Player(iframe3);
vcSetupVideoTracking(player3, 'video3', 3);
}
}
function vcSetupVideoTracking(player, videoId, videoNum) {
player.on('timeupdate', function(data) {
const progress = (data.percent * 100).toFixed(0);
vcVideoProgress[videoId] = data.percent;
vcUpdateProgressBar(videoNum, progress);
if (data.percent >= 0.9 && !vcVideoProgress[videoId + '_completed']) {
vcVideoProgress[videoId + '_completed'] = true;
vcMarkVideoComplete(videoNum);
vcCheckAllVideosComplete();
}
});
}
function vcUpdateProgressBar(videoNum, progress) {
document.getElementById('vcProgress' + videoNum).style.width = progress + '%';
const status = document.getElementById('vcStatus' + videoNum);
if (progress > 0 && progress < 90) {
status.textContent = 'In progress: ' + progress + '%';
}
}
function vcMarkVideoComplete(videoNum) {
const status = document.getElementById('vcStatus' + videoNum);
status.textContent = '✓ Completed';
status.style.color = '#a8c89b';
}
function vcCheckAllVideosComplete() {
const allComplete = vcVideoProgress.video1_completed &&
vcVideoProgress.video2_completed &&
vcVideoProgress.video3_completed;
if (allComplete) {
document.getElementById('vcCertificateSection').classList.add('active');
document.getElementById('vcCertificateSection').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
let vcCertificateGenerated = false;
window.vcGenerateCertificate = function() {
const userName = document.getElementById('vcUserName').value.trim();
if (!userName) {
alert('Please enter your name to generate the certificate.');
return;
}
const today = new Date();
const dateStr = today.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
const certificateHTML = '';
document.getElementById('vcCertificatePreview').innerHTML = certificateHTML;
document.getElementById('vcCertificatePreview').style.display = 'block';
document.getElementById('vcDownloadBtn').style.display = 'inline-block';
vcCertificateGenerated = true;
};
window.vcDownloadCertificate = function() {
if (!vcCertificateGenerated) {
alert('Please generate your certificate first.');
return;
}
const userName = document.getElementById('vcUserName').value.trim();
const today = new Date();
const dateStr = today.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
if (typeof window.jspdf === 'undefined') {
alert('PDF library not loaded. Please refresh the page and try again.');
return;
}
try {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({
orientation: 'landscape',
unit: 'mm',
format: 'a4'
});
doc.setLineWidth(3);
doc.setDrawColor(215, 18, 123);
doc.rect(10, 10, 277, 190);
doc.setFontSize(32);
doc.setTextColor(215, 18, 123);
doc.setFont('helvetica', 'bold');
doc.text('CERTIFICATE OF COMPLETION', 148.5, 50, { align: 'center' });
doc.setFontSize(14);
doc.setTextColor(100, 100, 100);
doc.setFont('helvetica', 'normal');
doc.text('Professional Development', 148.5, 62, { align: 'center' });
doc.setFontSize(12);
doc.setTextColor(45, 45, 45);
doc.text('This certifies that', 148.5, 85, { align: 'center' });
doc.setFontSize(24);
doc.setFont('helvetica', 'bold');
doc.text(userName, 148.5, 100, { align: 'center' });
doc.setLineWidth(0.5);
doc.setDrawColor(186, 148, 196);
doc.line(80, 102, 217, 102);
doc.setFontSize(12);
doc.setFont('helvetica', 'normal');
doc.text('has successfully completed', 148.5, 115, { align: 'center' });
doc.setFontSize(18);
doc.setFont('helvetica', 'bold');
doc.text('Social Work and Neurodiversity', 148.5, 130, { align: 'center' });
doc.text('Parts 1-3', 148.5, 140, { align: 'center' });
doc.setFontSize(10);
doc.setFont('helvetica', 'italic');
doc.setTextColor(100, 100, 100);
doc.text('with dedication and commitment to professional excellence', 148.5, 155, { align: 'center' });
doc.setLineWidth(0.3);
doc.setDrawColor(45, 45, 45);
doc.line(50, 175, 110, 175);
doc.setFont('helvetica', 'bold');
doc.setFontSize(10);
doc.setTextColor(45, 45, 45);
doc.text('Course Instructor', 80, 181, { align: 'center' });
doc.setFont('helvetica', 'normal');
doc.setFontSize(9);
doc.text('Certified Professional', 80, 186, { align: 'center' });
doc.line(187, 175, 247, 175);
doc.setFont('helvetica', 'bold');
doc.setFontSize(10);
doc.text('Date of Completion', 217, 181, { align: 'center' });
doc.setFont('helvetica', 'normal');
doc.setFontSize(9);
doc.text(dateStr, 217, 186, { align: 'center' });
doc.save(userName.replace(/\s+/g, '_') + '_Certificate.pdf');
alert('Certificate downloaded successfully!');
} catch (error) {
alert('Error creating PDF: ' + error.message);
}
};
})();
Social Work and Neurodiversity
Professional Development Course • Parts 1-3
VIDEO ONE
VIDEO ONE DESCRIPTION
Not started
VIDEO TWO
VIDEO TWO DESCRIPTION
Not started
VIDEO THREE
VIDEO THREE DESCRIPTION
Not started
🎉 Congratulations!
You've completed all three parts of the course. Enter your name to generate your certificate of completion.
Certificate of Completion
Professional Development
This certifies that
' + userName + '
has successfully completed
Social Work and Neurodiversity
Parts 1-3
Parts 1-3
with dedication and commitment to professional excellence
