{"id":5603,"date":"2025-12-21T13:04:29","date_gmt":"2025-12-21T13:04:29","guid":{"rendered":"https:\/\/promotionexams.com\/?p=5603"},"modified":"2025-12-30T10:56:21","modified_gmt":"2025-12-30T10:56:21","slug":"sosteno-test-case","status":"publish","type":"post","link":"https:\/\/promotionexams.com\/?p=5603","title":{"rendered":"course video lecture"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Constitution of India - CSS ADDA<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* ============================================\r\n CSS ADDA LMS - COURSE DETAIL PAGE\r\n Video Learning Interface\r\n ============================================ *\/\r\n :root {\r\n --primary-blue: #1e3a8a;\r\n --primary-blue-light: #2563EB;\r\n --primary-blue-dark: #1e40af;\r\n --primary-orange: #f59e0b;\r\n --primary-orange-dark: #d97706;\r\n --primary-orange-light: #fbbf24;\r\n \r\n --gradient-blue: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);\r\n --gradient-orange: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);\r\n \r\n --bg-light: #f8fafc;\r\n --bg-dark: #0f172a;\r\n --bg-white: #ffffff;\r\n --text-dark: #0f172a;\r\n --text-medium: #475569;\r\n --text-light: #94a3b8;\r\n --border-light: #e2e8f0;\r\n \r\n --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);\r\n --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);\r\n --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);\r\n --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);\r\n \r\n --radius-sm: 8px;\r\n --radius-md: 12px;\r\n --radius-lg: 16px;\r\n --radius-xl: 24px;\r\n \r\n --transition-fast: 0.15s ease;\r\n --transition-normal: 0.3s ease;\r\n \r\n --sidebar-width: 420px;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html, body {\r\n height: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n body {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n background: var(--bg-dark);\r\n color: var(--text-dark);\r\n }\r\n\r\n \/* ============================================\r\n MAIN LAYOUT\r\n ============================================ *\/\r\n .lms-layout {\r\n display: flex;\r\n height: 100vh;\r\n width: 100%;\r\n }\r\n\r\n \/* ============================================\r\n VIDEO SECTION (LEFT)\r\n ============================================ *\/\r\n .video-section {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--bg-dark);\r\n min-width: 0;\r\n }\r\n\r\n \/* Top Navigation Bar *\/\r\n .video-nav {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 1rem 1.5rem;\r\n background: rgba(15, 23, 42, 0.95);\r\n border-bottom: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n .nav-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .back-btn {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: var(--radius-sm);\r\n background: rgba(255,255,255,0.1);\r\n border: none;\r\n color: white;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .back-btn:hover {\r\n background: var(--primary-blue-light);\r\n }\r\n\r\n .course-info-nav h2 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1rem;\r\n color: white;\r\n font-weight: 600;\r\n }\r\n\r\n .course-info-nav span {\r\n font-size: 0.85rem;\r\n color: var(--text-light);\r\n }\r\n\r\n .nav-right {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n }\r\n\r\n .nav-btn {\r\n padding: 0.5rem 1rem;\r\n border-radius: var(--radius-sm);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n background: transparent;\r\n color: white;\r\n font-family: inherit;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .nav-btn:hover {\r\n background: rgba(255,255,255,0.1);\r\n }\r\n\r\n .nav-btn.primary {\r\n background: var(--gradient-orange);\r\n border: none;\r\n }\r\n\r\n .nav-btn.primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 15px rgba(245,158,11,0.3);\r\n }\r\n\r\n \/* Video Container *\/\r\n .video-container {\r\n flex: 1;\r\n position: relative;\r\n background: #000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .video-wrapper {\r\n width: 100%;\r\n height: 100%;\r\n max-height: calc(100vh - 250px);\r\n position: relative;\r\n }\r\n\r\n .video-wrapper video,\r\n .video-wrapper iframe {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n }\r\n\r\n \/* Video Placeholder *\/\r\n .video-placeholder {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);\r\n color: white;\r\n }\r\n\r\n .video-placeholder i {\r\n font-size: 5rem;\r\n color: var(--primary-orange);\r\n margin-bottom: 1.5rem;\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); opacity: 1; }\r\n 50% { transform: scale(1.1); opacity: 0.8; }\r\n }\r\n\r\n .video-placeholder h3 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.5rem;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .video-placeholder p {\r\n color: var(--text-light);\r\n }\r\n\r\n \/* Video Controls *\/\r\n .video-controls-bar {\r\n padding: 1rem 1.5rem;\r\n background: rgba(15, 23, 42, 0.95);\r\n border-top: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n .controls-top {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .current-lesson {\r\n flex: 1;\r\n }\r\n\r\n .current-lesson h3 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.1rem;\r\n color: white;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .current-lesson p {\r\n font-size: 0.85rem;\r\n color: var(--text-light);\r\n }\r\n\r\n .lesson-nav-btns {\r\n display: flex;\r\n gap: 0.5rem;\r\n }\r\n\r\n .lesson-nav-btn {\r\n padding: 0.75rem 1.25rem;\r\n border-radius: var(--radius-md);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n background: transparent;\r\n color: white;\r\n font-family: inherit;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .lesson-nav-btn:hover:not(:disabled) {\r\n background: rgba(255,255,255,0.1);\r\n }\r\n\r\n .lesson-nav-btn:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n }\r\n\r\n .lesson-nav-btn.next {\r\n background: var(--gradient-blue);\r\n border: none;\r\n }\r\n\r\n .lesson-nav-btn.next:hover:not(:disabled) {\r\n box-shadow: 0 4px 15px rgba(37,99,235,0.4);\r\n }\r\n\r\n \/* Progress Bar *\/\r\n .video-progress {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .progress-bar {\r\n flex: 1;\r\n height: 6px;\r\n background: rgba(255,255,255,0.1);\r\n border-radius: 3px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n background: var(--gradient-orange);\r\n border-radius: 3px;\r\n transition: width var(--transition-fast);\r\n }\r\n\r\n .progress-time {\r\n font-size: 0.85rem;\r\n color: var(--text-light);\r\n min-width: 100px;\r\n text-align: right;\r\n }\r\n\r\n \/* ============================================\r\n SIDEBAR (RIGHT) - CURRICULUM\r\n ============================================ *\/\r\n .curriculum-sidebar {\r\n width: var(--sidebar-width);\r\n background: var(--bg-white);\r\n display: flex;\r\n flex-direction: column;\r\n border-left: 1px solid var(--border-light);\r\n transition: transform var(--transition-normal);\r\n }\r\n\r\n .sidebar-header {\r\n padding: 1.25rem;\r\n border-bottom: 1px solid var(--border-light);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .sidebar-header h3 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.1rem;\r\n color: var(--text-dark);\r\n }\r\n\r\n .sidebar-toggle {\r\n display: none;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: var(--radius-sm);\r\n background: var(--bg-light);\r\n border: none;\r\n color: var(--text-medium);\r\n cursor: pointer;\r\n }\r\n\r\n \/* Course Progress Summary *\/\r\n .course-progress-summary {\r\n padding: 1rem 1.25rem;\r\n background: var(--bg-light);\r\n border-bottom: 1px solid var(--border-light);\r\n }\r\n\r\n .progress-stats {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .progress-stat {\r\n text-align: center;\r\n }\r\n\r\n .progress-stat-value {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: var(--primary-blue);\r\n }\r\n\r\n .progress-stat-label {\r\n font-size: 0.75rem;\r\n color: var(--text-medium);\r\n }\r\n\r\n .overall-progress-bar {\r\n height: 8px;\r\n background: var(--border-light);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n }\r\n\r\n .overall-progress-fill {\r\n height: 100%;\r\n background: var(--gradient-orange);\r\n border-radius: 4px;\r\n transition: width var(--transition-slow);\r\n }\r\n\r\n \/* Curriculum Tabs *\/\r\n .curriculum-tabs {\r\n display: flex;\r\n padding: 0 1.25rem;\r\n border-bottom: 1px solid var(--border-light);\r\n }\r\n\r\n .curriculum-tab {\r\n flex: 1;\r\n padding: 1rem 0.5rem;\r\n background: transparent;\r\n border: none;\r\n border-bottom: 3px solid transparent;\r\n font-family: inherit;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: var(--text-medium);\r\n cursor: pointer;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .curriculum-tab:hover {\r\n color: var(--primary-blue);\r\n }\r\n\r\n .curriculum-tab.active {\r\n color: var(--primary-blue);\r\n border-bottom-color: var(--primary-orange);\r\n }\r\n\r\n \/* Curriculum Content *\/\r\n .curriculum-content {\r\n flex: 1;\r\n overflow-y: auto;\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--border-light) transparent;\r\n }\r\n\r\n .curriculum-content::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n\r\n .curriculum-content::-webkit-scrollbar-thumb {\r\n background: var(--border-light);\r\n border-radius: 3px;\r\n }\r\n\r\n \/* Section *\/\r\n .curriculum-section {\r\n border-bottom: 1px solid var(--border-light);\r\n }\r\n\r\n .section-header {\r\n padding: 1rem 1.25rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n cursor: pointer;\r\n transition: background var(--transition-normal);\r\n }\r\n\r\n .section-header:hover {\r\n background: var(--bg-light);\r\n }\r\n\r\n .section-icon {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: var(--radius-sm);\r\n background: var(--gradient-blue);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-size: 1rem;\r\n }\r\n\r\n .section-icon.completed {\r\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n }\r\n\r\n .section-info {\r\n flex: 1;\r\n }\r\n\r\n .section-title {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 0.95rem;\r\n font-weight: 700;\r\n color: var(--text-dark);\r\n margin-bottom: 2px;\r\n }\r\n\r\n .section-meta {\r\n font-size: 0.8rem;\r\n color: var(--text-light);\r\n }\r\n\r\n .section-progress {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n gap: 4px;\r\n }\r\n\r\n .section-progress-text {\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n color: var(--primary-orange);\r\n }\r\n\r\n .section-progress-bar {\r\n width: 60px;\r\n height: 4px;\r\n background: var(--border-light);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n }\r\n\r\n .section-progress-fill {\r\n height: 100%;\r\n background: var(--primary-orange);\r\n border-radius: 2px;\r\n }\r\n\r\n .section-toggle {\r\n color: var(--text-light);\r\n transition: transform var(--transition-normal);\r\n }\r\n\r\n .section-header.expanded .section-toggle {\r\n transform: rotate(180deg);\r\n }\r\n\r\n \/* Lessons List *\/\r\n .lessons-list {\r\n display: none;\r\n background: var(--bg-light);\r\n }\r\n\r\n .lessons-list.show {\r\n display: block;\r\n }\r\n\r\n .lesson-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n padding: 0.875rem 1.25rem;\r\n padding-left: 2rem;\r\n border-bottom: 1px solid rgba(226,232,240,0.5);\r\n cursor: pointer;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .lesson-item:hover {\r\n background: rgba(37,99,235,0.05);\r\n }\r\n\r\n .lesson-item.active {\r\n background: rgba(37,99,235,0.1);\r\n border-left: 3px solid var(--primary-blue);\r\n }\r\n\r\n .lesson-item.completed {\r\n background: rgba(16,185,129,0.05);\r\n }\r\n\r\n .lesson-item.locked {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n\r\n .lesson-check {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n border: 2px solid var(--border-light);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .lesson-item.completed .lesson-check {\r\n background: #10b981;\r\n border-color: #10b981;\r\n color: white;\r\n }\r\n\r\n .lesson-item.active .lesson-check {\r\n border-color: var(--primary-blue);\r\n background: var(--primary-blue);\r\n color: white;\r\n }\r\n\r\n .lesson-info {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .lesson-title {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n color: var(--text-dark);\r\n margin-bottom: 2px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .lesson-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n font-size: 0.8rem;\r\n color: var(--text-light);\r\n }\r\n\r\n .lesson-meta span {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n\r\n .lesson-meta i {\r\n font-size: 0.7rem;\r\n }\r\n\r\n .lesson-type {\r\n padding: 2px 8px;\r\n border-radius: 4px;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n }\r\n\r\n .lesson-type.video {\r\n background: rgba(37,99,235,0.1);\r\n color: var(--primary-blue);\r\n }\r\n\r\n .lesson-type.quiz {\r\n background: rgba(245,158,11,0.1);\r\n color: var(--primary-orange-dark);\r\n }\r\n\r\n .lesson-type.pdf {\r\n background: rgba(239,68,68,0.1);\r\n color: #dc2626;\r\n }\r\n\r\n .lesson-lock {\r\n color: var(--text-light);\r\n }\r\n\r\n \/* Notes Tab Content *\/\r\n .notes-content {\r\n padding: 1.25rem;\r\n display: none;\r\n }\r\n\r\n .notes-content.show {\r\n display: block;\r\n }\r\n\r\n .note-input {\r\n width: 100%;\r\n min-height: 150px;\r\n padding: 1rem;\r\n border: 2px solid var(--border-light);\r\n border-radius: var(--radius-md);\r\n font-family: inherit;\r\n font-size: 0.9rem;\r\n resize: vertical;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .note-input:focus {\r\n outline: none;\r\n border-color: var(--primary-blue-light);\r\n }\r\n\r\n .save-note-btn {\r\n width: 100%;\r\n padding: 0.875rem;\r\n background: var(--gradient-blue);\r\n color: white;\r\n border: none;\r\n border-radius: var(--radius-md);\r\n font-family: inherit;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .save-note-btn:hover {\r\n box-shadow: 0 4px 15px rgba(30,58,138,0.3);\r\n }\r\n\r\n \/* Resources Tab *\/\r\n .resources-content {\r\n padding: 1.25rem;\r\n display: none;\r\n }\r\n\r\n .resources-content.show {\r\n display: block;\r\n }\r\n\r\n .resource-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n padding: 1rem;\r\n background: var(--bg-light);\r\n border-radius: var(--radius-md);\r\n margin-bottom: 0.75rem;\r\n cursor: pointer;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .resource-item:hover {\r\n background: rgba(37,99,235,0.1);\r\n }\r\n\r\n .resource-icon {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: var(--radius-sm);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.25rem;\r\n }\r\n\r\n .resource-icon.pdf {\r\n background: rgba(239,68,68,0.1);\r\n color: #dc2626;\r\n }\r\n\r\n .resource-icon.doc {\r\n background: rgba(37,99,235,0.1);\r\n color: var(--primary-blue);\r\n }\r\n\r\n .resource-info h4 {\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n margin-bottom: 2px;\r\n }\r\n\r\n .resource-info p {\r\n font-size: 0.8rem;\r\n color: var(--text-light);\r\n }\r\n\r\n \/* ============================================\r\n MOBILE SIDEBAR TOGGLE\r\n ============================================ *\/\r\n .mobile-menu-btn {\r\n display: none;\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: var(--gradient-orange);\r\n border: none;\r\n color: white;\r\n font-size: 1.25rem;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(245,158,11,0.4);\r\n z-index: 1000;\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE DESIGN\r\n ============================================ *\/\r\n @media (max-width: 1024px) {\r\n .curriculum-sidebar {\r\n width: 360px;\r\n }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .curriculum-sidebar {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n height: 100vh;\r\n z-index: 1000;\r\n transform: translateX(100%);\r\n width: 100%;\r\n max-width: 400px;\r\n }\r\n\r\n .curriculum-sidebar.open {\r\n transform: translateX(0);\r\n }\r\n\r\n .sidebar-toggle {\r\n display: flex;\r\n }\r\n\r\n .mobile-menu-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .video-wrapper {\r\n max-height: none;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .video-nav {\r\n padding: 0.75rem 1rem;\r\n }\r\n\r\n .course-info-nav h2 {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .nav-btn span {\r\n display: none;\r\n }\r\n\r\n .video-controls-bar {\r\n padding: 1rem;\r\n }\r\n\r\n .controls-top {\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n }\r\n\r\n .lesson-nav-btns {\r\n width: 100%;\r\n justify-content: space-between;\r\n }\r\n\r\n .lesson-nav-btn {\r\n flex: 1;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n \/* Sidebar Overlay *\/\r\n .sidebar-overlay {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 999;\r\n }\r\n\r\n .sidebar-overlay.show {\r\n display: block;\r\n }\r\n\r\n \/* ============================================\r\n LOCKED CONTENT MODAL\r\n ============================================ *\/\r\n .locked-modal {\r\n display: none;\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0,0,0,0.7);\r\n z-index: 2000;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem;\r\n }\r\n\r\n .locked-modal.show {\r\n display: flex;\r\n }\r\n\r\n .locked-modal-content {\r\n background: white;\r\n border-radius: var(--radius-xl);\r\n padding: 2.5rem;\r\n max-width: 450px;\r\n text-align: center;\r\n animation: modalIn 0.3s ease;\r\n }\r\n\r\n @keyframes modalIn {\r\n from {\r\n transform: scale(0.9);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .locked-modal-content i {\r\n font-size: 4rem;\r\n color: var(--primary-orange);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .locked-modal-content h3 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.5rem;\r\n color: var(--text-dark);\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .locked-modal-content p {\r\n color: var(--text-medium);\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .modal-btns {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n }\r\n\r\n .modal-btn {\r\n padding: 0.875rem 1.5rem;\r\n border-radius: var(--radius-md);\r\n font-family: inherit;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all var(--transition-normal);\r\n }\r\n\r\n .modal-btn.primary {\r\n background: var(--gradient-orange);\r\n color: white;\r\n border: none;\r\n }\r\n\r\n .modal-btn.secondary {\r\n background: transparent;\r\n border: 2px solid var(--border-light);\r\n color: var(--text-medium);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"lms-layout\">\r\n <!-- Video Section -->\r\n <section class=\"video-section\">\r\n <!-- Top Navigation -->\r\n <nav class=\"video-nav\">\r\n <div class=\"nav-left\">\r\n <button class=\"back-btn\" onclick=\"goBack()\">\r\n <i class=\"fas fa-arrow-left\"><\/i>\r\n <\/button>\r\n <div class=\"course-info-nav\">\r\n <h2>Constitution of India - Complete Course<\/h2>\r\n <span>Paper I \u2022 45 Lessons<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"nav-right\">\r\n <button class=\"nav-btn\">\r\n <i class=\"fas fa-bookmark\"><\/i>\r\n <span>Bookmark<\/span>\r\n <\/button>\r\n <button class=\"nav-btn\">\r\n <i class=\"fas fa-share-alt\"><\/i>\r\n <span>Share<\/span>\r\n <\/button>\r\n <button class=\"nav-btn primary\" onclick=\"toggleNotes()\">\r\n <i class=\"fas fa-sticky-note\"><\/i>\r\n <span>Notes<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Video Container -->\r\n <div class=\"video-container\">\r\n <div class=\"video-wrapper\">\r\n <!-- Replace with actual video embed -->\r\n <div class=\"video-placeholder\" id=\"videoPlaceholder\">\r\n <i class=\"fas fa-play-circle\"><\/i>\r\n <h3>Select a lesson to start learning<\/h3>\r\n <p>Choose from the curriculum on the right<\/p>\r\n <\/div>\r\n \r\n <!-- Video Element (hidden by default) -->\r\n <video id=\"videoPlayer\" style=\"display: none;\" controls>\r\n <source src=\"\" type=\"video\/mp4\">\r\n <\/video>\r\n \r\n <!-- YouTube Embed (hidden by default) -->\r\n <iframe id=\"youtubePlayer\" style=\"display: none;\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Video Controls -->\r\n <div class=\"video-controls-bar\">\r\n <div class=\"controls-top\">\r\n <div class=\"current-lesson\">\r\n <h3 id=\"currentLessonTitle\">Select a Lesson<\/h3>\r\n <p id=\"currentLessonMeta\">Start your learning journey<\/p>\r\n <\/div>\r\n <div class=\"lesson-nav-btns\">\r\n <button class=\"lesson-nav-btn prev\" id=\"prevBtn\" disabled onclick=\"prevLesson()\">\r\n <i class=\"fas fa-chevron-left\"><\/i>\r\n Previous\r\n <\/button>\r\n <button class=\"lesson-nav-btn next\" id=\"nextBtn\" disabled onclick=\"nextLesson()\">\r\n Next\r\n <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"video-progress\">\r\n <div class=\"progress-bar\" id=\"videoProgressBar\">\r\n <div class=\"progress-fill\" id=\"videoProgressFill\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <span class=\"progress-time\" id=\"videoTime\">00:00 \/ 00:00<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Curriculum Sidebar -->\r\n <aside class=\"curriculum-sidebar\" id=\"curriculumSidebar\">\r\n <div class=\"sidebar-header\">\r\n <h3>\ud83d\udcda Course Content<\/h3>\r\n <button class=\"sidebar-toggle\" onclick=\"toggleSidebar()\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Progress Summary -->\r\n <div class=\"course-progress-summary\">\r\n <div class=\"progress-stats\">\r\n <div class=\"progress-stat\">\r\n <div class=\"progress-stat-value\" id=\"completedCount\">12<\/div>\r\n <div class=\"progress-stat-label\">Completed<\/div>\r\n <\/div>\r\n <div class=\"progress-stat\">\r\n <div class=\"progress-stat-value\" id=\"totalCount\">45<\/div>\r\n <div class=\"progress-stat-label\">Total<\/div>\r\n <\/div>\r\n <div class=\"progress-stat\">\r\n <div class=\"progress-stat-value\" id=\"timeSpent\">4h 32m<\/div>\r\n <div class=\"progress-stat-label\">Time Spent<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"overall-progress-bar\">\r\n <div class=\"overall-progress-fill\" id=\"overallProgress\" style=\"width: 27%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tabs -->\r\n <div class=\"curriculum-tabs\">\r\n <button class=\"curriculum-tab active\" data-tab=\"curriculum\" onclick=\"switchTab('curriculum')\">\r\n <i class=\"fas fa-list\"><\/i> Curriculum\r\n <\/button>\r\n <button class=\"curriculum-tab\" data-tab=\"notes\" onclick=\"switchTab('notes')\">\r\n <i class=\"fas fa-sticky-note\"><\/i> Notes\r\n <\/button>\r\n <button class=\"curriculum-tab\" data-tab=\"resources\" onclick=\"switchTab('resources')\">\r\n <i class=\"fas fa-folder\"><\/i> Resources\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Curriculum Content -->\r\n <div class=\"curriculum-content\" id=\"curriculumTab\">\r\n <!-- Section 1 -->\r\n <div class=\"curriculum-section\">\r\n <div class=\"section-header expanded\" onclick=\"toggleSection(this)\">\r\n <div class=\"section-icon completed\">\r\n <i class=\"fas fa-check\"><\/i>\r\n <\/div>\r\n <div class=\"section-info\">\r\n <div class=\"section-title\">1. Introduction to Constitution<\/div>\r\n <div class=\"section-meta\">5 lessons \u2022 45 min<\/div>\r\n <\/div>\r\n <div class=\"section-progress\">\r\n <span class=\"section-progress-text\">100%<\/span>\r\n <div class=\"section-progress-bar\">\r\n <div class=\"section-progress-fill\" style=\"width: 100%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-chevron-down section-toggle\"><\/i>\r\n <\/div>\r\n <div class=\"lessons-list show\">\r\n <div class=\"lesson-item completed\" data-lesson=\"1\" onclick=\"loadLesson(1)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">What is a Constitution?<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 8:30<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item completed\" data-lesson=\"2\" onclick=\"loadLesson(2)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Historical Background<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 12:15<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item completed\" data-lesson=\"3\" onclick=\"loadLesson(3)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Making of the Constitution<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 15:45<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item completed\" data-lesson=\"4\" onclick=\"loadLesson(4)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Preamble - Philosophy & Values<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 10:20<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item completed\" data-lesson=\"5\" onclick=\"loadLesson(5)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Quiz: Introduction<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-question-circle\"><\/i> 10 Questions<\/span>\r\n <span class=\"lesson-type quiz\">Quiz<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Section 2 -->\r\n <div class=\"curriculum-section\">\r\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/div>\r\n <div class=\"section-info\">\r\n <div class=\"section-title\">2. Fundamental Rights (Part III)<\/div>\r\n <div class=\"section-meta\">8 lessons \u2022 1h 30min<\/div>\r\n <\/div>\r\n <div class=\"section-progress\">\r\n <span class=\"section-progress-text\">62%<\/span>\r\n <div class=\"section-progress-bar\">\r\n <div class=\"section-progress-fill\" style=\"width: 62%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-chevron-down section-toggle\"><\/i>\r\n <\/div>\r\n <div class=\"lessons-list\">\r\n <div class=\"lesson-item completed\" data-lesson=\"6\" onclick=\"loadLesson(6)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Right to Equality (Art. 14-18)<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 18:30<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item completed\" data-lesson=\"7\" onclick=\"loadLesson(7)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Right to Freedom (Art. 19-22)<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 22:15<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item completed\" data-lesson=\"8\" onclick=\"loadLesson(8)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Right Against Exploitation<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 12:40<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item completed\" data-lesson=\"9\" onclick=\"loadLesson(9)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Right to Freedom of Religion<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 14:20<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item completed\" data-lesson=\"10\" onclick=\"loadLesson(10)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-check\" style=\"font-size: 0.7rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Cultural & Educational Rights<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 10:15<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item active\" data-lesson=\"11\" onclick=\"loadLesson(11)\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-play\" style=\"font-size: 0.6rem;\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Right to Constitutional Remedies<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 16:50<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item\" data-lesson=\"12\" onclick=\"loadLesson(12)\">\r\n <div class=\"lesson-check\"><\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Important Case Laws<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-file-pdf\"><\/i> PDF Notes<\/span>\r\n <span class=\"lesson-type pdf\">PDF<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lesson-item\" data-lesson=\"13\" onclick=\"loadLesson(13)\">\r\n <div class=\"lesson-check\"><\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Quiz: Fundamental Rights<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-question-circle\"><\/i> 15 Questions<\/span>\r\n <span class=\"lesson-type quiz\">Quiz<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Section 3 (Locked) -->\r\n <div class=\"curriculum-section\">\r\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-lock\"><\/i>\r\n <\/div>\r\n <div class=\"section-info\">\r\n <div class=\"section-title\">3. Directive Principles (Part IV)<\/div>\r\n <div class=\"section-meta\">6 lessons \u2022 1h 15min<\/div>\r\n <\/div>\r\n <div class=\"section-progress\">\r\n <span class=\"section-progress-text\">0%<\/span>\r\n <div class=\"section-progress-bar\">\r\n <div class=\"section-progress-fill\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-chevron-down section-toggle\"><\/i>\r\n <\/div>\r\n <div class=\"lessons-list\">\r\n <div class=\"lesson-item locked\" data-lesson=\"14\" onclick=\"showLockedModal()\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-lock\" style=\"font-size: 0.6rem; color: var(--text-light);\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Introduction to DPSPs<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 14:30<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-lock lesson-lock\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-item locked\" data-lesson=\"15\" onclick=\"showLockedModal()\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-lock\" style=\"font-size: 0.6rem; color: var(--text-light);\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Socialist & Gandhian Principles<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 18:20<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-lock lesson-lock\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Section 4 (Locked) -->\r\n <div class=\"curriculum-section\">\r\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-lock\"><\/i>\r\n <\/div>\r\n <div class=\"section-info\">\r\n <div class=\"section-title\">4. Fundamental Duties (Part IVA)<\/div>\r\n <div class=\"section-meta\">4 lessons \u2022 45 min<\/div>\r\n <\/div>\r\n <div class=\"section-progress\">\r\n <span class=\"section-progress-text\">0%<\/span>\r\n <div class=\"section-progress-bar\">\r\n <div class=\"section-progress-fill\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-chevron-down section-toggle\"><\/i>\r\n <\/div>\r\n <div class=\"lessons-list\">\r\n <div class=\"lesson-item locked\" onclick=\"showLockedModal()\">\r\n <div class=\"lesson-check\">\r\n <i class=\"fas fa-lock\" style=\"font-size: 0.6rem; color: var(--text-light);\"><\/i>\r\n <\/div>\r\n <div class=\"lesson-info\">\r\n <div class=\"lesson-title\">Article 51A Explained<\/div>\r\n <div class=\"lesson-meta\">\r\n <span><i class=\"fas fa-play-circle\"><\/i> 12:30<\/span>\r\n <span class=\"lesson-type video\">Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-lock lesson-lock\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Section 5 -->\r\n <div class=\"curriculum-section\">\r\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-lock\"><\/i>\r\n <\/div>\r\n <div class=\"section-info\">\r\n <div class=\"section-title\">5. Union & State Government<\/div>\r\n <div class=\"section-meta\">12 lessons \u2022 2h 30min<\/div>\r\n <\/div>\r\n <div class=\"section-progress\">\r\n <span class=\"section-progress-text\">0%<\/span>\r\n <div class=\"section-progress-bar\">\r\n <div class=\"section-progress-fill\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-chevron-down section-toggle\"><\/i>\r\n <\/div>\r\n <div class=\"lessons-list\">\r\n <!-- Lessons would go here -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Section 6 -->\r\n <div class=\"curriculum-section\">\r\n <div class=\"section-header\" onclick=\"toggleSection(this)\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-lock\"><\/i>\r\n <\/div>\r\n <div class=\"section-info\">\r\n <div class=\"section-title\">6. Constitutional Amendments<\/div>\r\n <div class=\"section-meta\">10 lessons \u2022 2h 15min<\/div>\r\n <\/div>\r\n <div class=\"section-progress\">\r\n <span class=\"section-progress-text\">0%<\/span>\r\n <div class=\"section-progress-bar\">\r\n <div class=\"section-progress-fill\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fas fa-chevron-down section-toggle\"><\/i>\r\n <\/div>\r\n <div class=\"lessons-list\">\r\n <!-- Lessons would go here -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Notes Content -->\r\n <div class=\"notes-content\" id=\"notesTab\">\r\n <textarea class=\"note-input\" placeholder=\"Write your notes here... These will be saved with this lesson.\"><\/textarea>\r\n <button class=\"save-note-btn\">\r\n <i class=\"fas fa-save\"><\/i> Save Notes\r\n <\/button>\r\n <div style=\"margin-top: 1.5rem;\">\r\n <h4 style=\"font-size: 0.9rem; color: var(--text-dark); margin-bottom: 1rem;\">Previous Notes<\/h4>\r\n <div style=\"background: var(--bg-light); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 0.75rem;\">\r\n <p style=\"font-size: 0.85rem; color: var(--text-medium); margin-bottom: 0.5rem;\">\r\n Article 14 - Equality before law. Important point: Reasonable classification is allowed.\r\n <\/p>\r\n <span style=\"font-size: 0.75rem; color: var(--text-light);\">Lesson: Right to Equality<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Resources Content -->\r\n <div class=\"resources-content\" id=\"resourcesTab\">\r\n <div class=\"resource-item\" onclick=\"downloadResource('constitution-notes')\">\r\n <div class=\"resource-icon pdf\">\r\n <i class=\"fas fa-file-pdf\"><\/i>\r\n <\/div>\r\n <div class=\"resource-info\">\r\n <h4>Constitution Notes - Complete<\/h4>\r\n <p>PDF \u2022 45 pages \u2022 2.3 MB<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"resource-item\" onclick=\"downloadResource('fr-flowchart')\">\r\n <div class=\"resource-icon doc\">\r\n <i class=\"fas fa-sitemap\"><\/i>\r\n <\/div>\r\n <div class=\"resource-info\">\r\n <h4>Fundamental Rights Flowchart<\/h4>\r\n <p>PDF \u2022 5 pages \u2022 850 KB<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"resource-item\" onclick=\"downloadResource('case-laws')\">\r\n <div class=\"resource-icon pdf\">\r\n <i class=\"fas fa-gavel\"><\/i>\r\n <\/div>\r\n <div class=\"resource-info\">\r\n <h4>Important Case Laws Summary<\/h4>\r\n <p>PDF \u2022 28 pages \u2022 1.8 MB<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"resource-item\" onclick=\"downloadResource('amendments')\">\r\n <div class=\"resource-icon doc\">\r\n <i class=\"fas fa-list-ol\"><\/i>\r\n <\/div>\r\n <div class=\"resource-info\">\r\n <h4>Constitutional Amendments List<\/h4>\r\n <p>PDF \u2022 15 pages \u2022 920 KB<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n <\/div>\r\n\r\n <!-- Mobile Menu Button -->\r\n <button class=\"mobile-menu-btn\" onclick=\"toggleSidebar()\">\r\n <i class=\"fas fa-list\"><\/i>\r\n <\/button>\r\n\r\n <!-- Sidebar Overlay -->\r\n <div class=\"sidebar-overlay\" id=\"sidebarOverlay\" onclick=\"toggleSidebar()\"><\/div>\r\n\r\n <!-- Locked Content Modal -->\r\n <div class=\"locked-modal\" id=\"lockedModal\">\r\n <div class=\"locked-modal-content\">\r\n <i class=\"fas fa-lock\"><\/i>\r\n <h3>Premium Content<\/h3>\r\n <p>This lesson is part of the premium course. Purchase the full course to unlock all lessons, quizzes, and resources.<\/p>\r\n <div class=\"modal-btns\">\r\n <button class=\"modal-btn secondary\" onclick=\"closeLockedModal()\">\r\n Maybe Later\r\n <\/button>\r\n <button class=\"modal-btn primary\" onclick=\"purchaseCourse()\">\r\n <i class=\"fas fa-shopping-cart\"><\/i>\r\n Buy Course - \u20b91,499\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/* ============================================\r\n CONFIGURATION\r\n ============================================ *\/\r\n const CONFIG = {\r\n courseId: 'constitution',\r\n productId: 101,\r\n cartUrl: '\/cart\/',\r\n checkoutUrl: '\/checkout\/',\r\n dashboardUrl: '\/dashboard\/',\r\n \r\n \/\/ Video sources (can be YouTube, Vimeo, or direct URLs)\r\n lessons: {\r\n 1: { title: 'What is a Constitution?', duration: '8:30', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 2: { title: 'Historical Background', duration: '12:15', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 3: { title: 'Making of the Constitution', duration: '15:45', type: 'video', source: 'direct', url: '\/videos\/lesson-3.mp4' },\r\n 4: { title: 'Preamble - Philosophy & Values', duration: '10:20', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 5: { title: 'Quiz: Introduction', duration: '10 Questions', type: 'quiz', quizId: 'intro-quiz' },\r\n 6: { title: 'Right to Equality (Art. 14-18)', duration: '18:30', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 7: { title: 'Right to Freedom (Art. 19-22)', duration: '22:15', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 8: { title: 'Right Against Exploitation', duration: '12:40', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 9: { title: 'Right to Freedom of Religion', duration: '14:20', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 10: { title: 'Cultural & Educational Rights', duration: '10:15', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 11: { title: 'Right to Constitutional Remedies', duration: '16:50', type: 'video', source: 'youtube', videoId: 'dQw4w9WgXcQ' },\r\n 12: { title: 'Important Case Laws', duration: 'PDF', type: 'pdf', url: '\/pdfs\/case-laws.pdf' },\r\n 13: { title: 'Quiz: Fundamental Rights', duration: '15 Questions', type: 'quiz', quizId: 'fr-quiz' }\r\n },\r\n \r\n \/\/ User progress (would come from database)\r\n completedLessons: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\r\n currentLesson: 11,\r\n isPurchased: true\r\n };\r\n\r\n let currentLessonId = CONFIG.currentLesson;\r\n\r\n \/* ============================================\r\n SIDEBAR TOGGLE\r\n ============================================ *\/\r\n function toggleSidebar() {\r\n const sidebar = document.getElementById('curriculumSidebar');\r\n const overlay = document.getElementById('sidebarOverlay');\r\n \r\n sidebar.classList.toggle('open');\r\n overlay.classList.toggle('show');\r\n }\r\n\r\n \/* ============================================\r\n SECTION TOGGLE\r\n ============================================ *\/\r\n function toggleSection(header) {\r\n const section = header.parentElement;\r\n const lessonsList = section.querySelector('.lessons-list');\r\n \r\n header.classList.toggle('expanded');\r\n lessonsList.classList.toggle('show');\r\n }\r\n\r\n \/* ============================================\r\n TAB SWITCHING\r\n ============================================ *\/\r\n function switchTab(tabName) {\r\n const tabs = document.querySelectorAll('.curriculum-tab');\r\n tabs.forEach(tab => {\r\n tab.classList.toggle('active', tab.dataset.tab === tabName);\r\n });\r\n\r\n document.getElementById('curriculumTab').classList.toggle('show', tabName === 'curriculum');\r\n document.getElementById('curriculumTab').style.display = tabName === 'curriculum' ? 'block' : 'none';\r\n \r\n document.getElementById('notesTab').classList.toggle('show', tabName === 'notes');\r\n document.getElementById('notesTab').style.display = tabName === 'notes' ? 'block' : 'none';\r\n \r\n document.getElementById('resourcesTab').classList.toggle('show', tabName === 'resources');\r\n document.getElementById('resourcesTab').style.display = tabName === 'resources' ? 'block' : 'none';\r\n }\r\n\r\n \/\/ Initialize tabs\r\n switchTab('curriculum');\r\n\r\n \/* ============================================\r\n LOAD LESSON\r\n ============================================ *\/\r\n function loadLesson(lessonId) {\r\n const lesson = CONFIG.lessons[lessonId];\r\n if (!lesson) return;\r\n\r\n \/\/ Check if lesson is locked\r\n if (!CONFIG.isPurchased && lessonId > 5) {\r\n showLockedModal();\r\n return;\r\n }\r\n\r\n currentLessonId = lessonId;\r\n\r\n \/\/ Update active state in curriculum\r\n document.querySelectorAll('.lesson-item').forEach(item => {\r\n item.classList.remove('active');\r\n if (parseInt(item.dataset.lesson) === lessonId) {\r\n item.classList.add('active');\r\n }\r\n });\r\n\r\n \/\/ Update lesson title\r\n document.getElementById('currentLessonTitle').textContent = lesson.title;\r\n document.getElementById('currentLessonMeta').textContent = `Lesson ${lessonId} \u2022 ${lesson.duration}`;\r\n\r\n \/\/ Load video based on type\r\n const placeholder = document.getElementById('videoPlaceholder');\r\n const videoPlayer = document.getElementById('videoPlayer');\r\n const youtubePlayer = document.getElementById('youtubePlayer');\r\n\r\n placeholder.style.display = 'none';\r\n videoPlayer.style.display = 'none';\r\n youtubePlayer.style.display = 'none';\r\n\r\n if (lesson.type === 'video') {\r\n if (lesson.source === 'youtube') {\r\n youtubePlayer.src = `https:\/\/www.youtube.com\/embed\/${lesson.videoId}?autoplay=1&rel=0`;\r\n youtubePlayer.style.display = 'block';\r\n } else {\r\n videoPlayer.src = lesson.url;\r\n videoPlayer.style.display = 'block';\r\n videoPlayer.play();\r\n }\r\n } else if (lesson.type === 'pdf') {\r\n \/\/ Open PDF in new tab or show in viewer\r\n window.open(lesson.url, '_blank');\r\n } else if (lesson.type === 'quiz') {\r\n \/\/ Navigate to quiz page\r\n window.location.href = `\/quiz\/${lesson.quizId}\/`;\r\n }\r\n\r\n \/\/ Update navigation buttons\r\n updateNavButtons();\r\n\r\n \/\/ Close sidebar on mobile\r\n if (window.innerWidth <= 900) {\r\n toggleSidebar();\r\n }\r\n\r\n \/\/ Save progress to server\r\n saveProgress(lessonId);\r\n }\r\n\r\n \/* ============================================\r\n NAVIGATION\r\n ============================================ *\/\r\n function updateNavButtons() {\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const lessonIds = Object.keys(CONFIG.lessons).map(Number);\r\n const currentIndex = lessonIds.indexOf(currentLessonId);\r\n\r\n prevBtn.disabled = currentIndex === 0;\r\n nextBtn.disabled = currentIndex === lessonIds.length - 1;\r\n }\r\n\r\n function prevLesson() {\r\n const lessonIds = Object.keys(CONFIG.lessons).map(Number);\r\n const currentIndex = lessonIds.indexOf(currentLessonId);\r\n if (currentIndex > 0) {\r\n loadLesson(lessonIds[currentIndex - 1]);\r\n }\r\n }\r\n\r\n function nextLesson() {\r\n const lessonIds = Object.keys(CONFIG.lessons).map(Number);\r\n const currentIndex = lessonIds.indexOf(currentLessonId);\r\n if (currentIndex < lessonIds.length - 1) {\r\n loadLesson(lessonIds[currentIndex + 1]);\r\n }\r\n }\r\n\r\n \/* ============================================\r\n LOCKED MODAL\r\n ============================================ *\/\r\n function showLockedModal() {\r\n document.getElementById('lockedModal').classList.add('show');\r\n }\r\n\r\n function closeLockedModal() {\r\n document.getElementById('lockedModal').classList.remove('show');\r\n }\r\n\r\n function purchaseCourse() {\r\n \/\/ Add to cart and redirect to checkout\r\n window.location.href = `${CONFIG.checkoutUrl}?add-to-cart=${CONFIG.productId}`;\r\n }\r\n\r\n \/* ============================================\r\n UTILITY FUNCTIONS\r\n ============================================ *\/\r\n function goBack() {\r\n window.location.href = CONFIG.dashboardUrl;\r\n }\r\n\r\n function toggleNotes() {\r\n switchTab('notes');\r\n if (window.innerWidth <= 900) {\r\n toggleSidebar();\r\n }\r\n }\r\n\r\n function downloadResource(resourceId) {\r\n \/\/ Implement resource download\r\n console.log('Downloading resource:', resourceId);\r\n showNotification('Download started!', 'success');\r\n }\r\n\r\n function saveProgress(lessonId) {\r\n \/\/ Save progress to server via AJAX\r\n \/\/ fetch('\/wp-json\/cssadda\/v1\/progress\/', {\r\n \/\/ method: 'POST',\r\n \/\/ headers: { 'Content-Type': 'application\/json' },\r\n \/\/ body: JSON.stringify({ lesson_id: lessonId, course_id: CONFIG.courseId })\r\n \/\/ });\r\n console.log('Progress saved for lesson:', lessonId);\r\n }\r\n\r\n function showNotification(message, type) {\r\n const notification = document.createElement('div');\r\n notification.innerHTML = `<i class=\"fas fa-${type === 'success' ? 'check-circle' : 'info-circle'}\"><\/i> ${message}`;\r\n notification.style.cssText = `\r\n position: fixed;\r\n top: 20px;\r\n right: 20px;\r\n background: ${type === 'success' ? '#10b981' : '#3b82f6'};\r\n color: white;\r\n padding: 1rem 1.5rem;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-weight: 600;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\r\n z-index: 10000;\r\n animation: slideIn 0.3s ease;\r\n `;\r\n document.body.appendChild(notification);\r\n setTimeout(() => notification.remove(), 3000);\r\n }\r\n\r\n \/\/ Initialize with active lesson\r\n document.addEventListener('DOMContentLoaded', () => {\r\n updateNavButtons();\r\n \r\n \/\/ Expand section containing active lesson\r\n const activeLesson = document.querySelector('.lesson-item.active');\r\n if (activeLesson) {\r\n const section = activeLesson.closest('.curriculum-section');\r\n if (section) {\r\n const header = section.querySelector('.section-header');\r\n const lessonsList = section.querySelector('.lessons-list');\r\n header.classList.add('expanded');\r\n lessonsList.classList.add('show');\r\n }\r\n }\r\n });\r\n\r\n \/\/ Keyboard shortcuts\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowLeft' && !e.target.matches('input, textarea')) {\r\n prevLesson();\r\n } else if (e.key === 'ArrowRight' && !e.target.matches('input, textarea')) {\r\n nextLesson();\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ef95d38 e-flex e-con-boxed e-con e-parent\" data-id=\"ef95d38\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76678d7 elementor-widget elementor-widget-spacer\" data-id=\"76678d7\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Constitution of India – CSS ADDA Constitution of India – Complete Course Paper I \u2022 45 Lessons Bookmark Share Notes […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5603","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/5603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5603"}],"version-history":[{"count":29,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/5603\/revisions"}],"predecessor-version":[{"id":7344,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/posts\/5603\/revisions\/7344"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}