{"id":6836,"date":"2025-12-26T06:16:27","date_gmt":"2025-12-26T06:16:27","guid":{"rendered":"https:\/\/promotionexams.com\/?page_id=6836"},"modified":"2026-01-30T15:30:03","modified_gmt":"2026-01-30T15:30:03","slug":"upsc-so-steno-ldce-2","status":"publish","type":"page","link":"https:\/\/promotionexams.com\/?page_id=6836","title":{"rendered":"UPSC SO\/Steno LDCE-flashcards"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Study Materials - Flashcards | CSS Adda<\/title>\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 :root {\r\n --primary-blue: #1e3a8a;\r\n --primary-blue-dark: #0d2d5a;\r\n --primary-blue-light: #2563EB;\r\n --accent-orange: #ff6b35;\r\n --accent-orange-dark: #d97706;\r\n --accent-orange-light: #f59e0b;\r\n --white: #ffffff;\r\n --gray-50: #f8fafc;\r\n --gray-100: #f1f5f9;\r\n --gray-200: #e2e8f0;\r\n --gray-300: #d1d5db;\r\n --gray-400: #9ca3af;\r\n --gray-500: #64748b;\r\n --gray-600: #475569;\r\n --gray-700: #334155;\r\n --gray-800: #1e293b;\r\n --success: #10b981;\r\n --success-light: #d1fae5;\r\n --purple: #8b5cf6;\r\n --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);\r\n --gradient-secondary: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\r\n --gradient-hero: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 50%, var(--primary-blue-light) 100%);\r\n --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);\r\n --shadow-md: 0 4px 20px rgba(0,0,0,0.12);\r\n --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);\r\n --radius-md: 12px;\r\n --radius-lg: 16px;\r\n --radius-xl: 24px;\r\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);\r\n color: var(--gray-800);\r\n line-height: 1.6;\r\n min-height: 100vh;\r\n }\r\n\r\n a { text-decoration: none; color: inherit; }\r\n\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .hero {\r\n background: var(--gradient-hero);\r\n padding: 60px 20px 100px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n }\r\n\r\n .hero::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 60px;\r\n background: var(--gray-50);\r\n border-radius: 50% 50% 0 0;\r\n transform: translateY(30px);\r\n }\r\n\r\n .hero-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 1;\r\n text-align: center;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: rgba(255, 107, 53, 0.2);\r\n border: 1px solid rgba(255, 107, 53, 0.4);\r\n color: var(--accent-orange-light);\r\n padding: 10px 24px;\r\n border-radius: 50px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n }\r\n\r\n .hero-title {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-size: clamp(2rem, 5vw, 3.2rem);\r\n font-weight: 800;\r\n color: var(--white);\r\n margin-bottom: 16px;\r\n line-height: 1.2;\r\n }\r\n\r\n .hero-title span {\r\n background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .hero-description {\r\n font-size: 1.1rem;\r\n color: rgba(255, 255, 255, 0.9);\r\n max-width: 700px;\r\n margin: 0 auto;\r\n }\r\n\r\n .main-container {\r\n max-width: 1200px;\r\n margin: -50px auto 80px;\r\n padding: 0 20px;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n .info-banner {\r\n background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);\r\n border: 2px solid var(--accent-orange-light);\r\n border-left: 6px solid var(--accent-orange);\r\n border-radius: var(--radius-lg);\r\n padding: 24px 30px;\r\n margin-bottom: 50px;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 20px;\r\n box-shadow: var(--shadow-md);\r\n }\r\n\r\n .info-banner-icon {\r\n width: 50px;\r\n height: 50px;\r\n background: var(--gradient-secondary);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--white);\r\n font-size: 1.3rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n .info-banner-content h4 {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: var(--accent-orange-dark);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .info-banner-content p {\r\n font-size: 0.95rem;\r\n color: var(--gray-600);\r\n }\r\n\r\n .info-banner-content strong {\r\n color: var(--primary-blue);\r\n }\r\n\r\n .section-container {\r\n background: var(--white);\r\n border: 3px solid var(--accent-orange);\r\n border-radius: var(--radius-xl);\r\n padding: 40px;\r\n margin-bottom: 50px;\r\n box-shadow: var(--shadow-lg);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .section-container::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 5px;\r\n background: var(--gradient-secondary);\r\n }\r\n\r\n .section-container.free-section::before {\r\n background: linear-gradient(90deg, var(--success) 0%, #34d399 100%);\r\n }\r\n\r\n .section-container.free-section {\r\n border-color: var(--success);\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 35px;\r\n }\r\n\r\n .section-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n border-radius: 50px;\r\n font-size: 0.8rem;\r\n font-weight: 700;\r\n margin-bottom: 18px;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n }\r\n\r\n .section-tag.free {\r\n background: var(--success-light);\r\n color: var(--success);\r\n border: 2px solid var(--success);\r\n }\r\n\r\n .section-tag.premium {\r\n background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);\r\n color: var(--accent-orange-dark);\r\n border: 2px solid var(--accent-orange);\r\n }\r\n\r\n .section-title {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--gray-800);\r\n margin-bottom: 10px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 1rem;\r\n color: var(--gray-500);\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n .products-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\r\n gap: 25px;\r\n }\r\n\r\n .product-card {\r\n background: var(--white);\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n transition: var(--transition);\r\n border: 2px solid var(--gray-200);\r\n box-shadow: var(--shadow-sm);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n animation: fadeInUp 0.5s ease forwards;\r\n }\r\n\r\n .product-card:nth-child(1) { animation-delay: 0.1s; }\r\n .product-card:nth-child(2) { animation-delay: 0.2s; }\r\n .product-card:nth-child(3) { animation-delay: 0.3s; }\r\n\r\n .product-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: var(--shadow-lg);\r\n border-color: var(--accent-orange-light);\r\n }\r\n\r\n .product-card.premium-card {\r\n background: linear-gradient(180deg, #fffbeb 0%, var(--white) 100%);\r\n border-color: var(--accent-orange-light);\r\n }\r\n\r\n .product-card.free-card {\r\n background: linear-gradient(180deg, #ecfdf5 0%, var(--white) 100%);\r\n border-color: #a7f3d0;\r\n }\r\n\r\n .product-card.free-card:hover {\r\n border-color: var(--success);\r\n }\r\n\r\n .product-card.is-purchased {\r\n border-color: var(--purple) !important;\r\n }\r\n\r\n .product-header {\r\n position: relative;\r\n padding: 20px 20px 0;\r\n }\r\n\r\n .premium-badge, .free-badge, .purchased-badge {\r\n position: absolute;\r\n top: 15px;\r\n padding: 6px 14px;\r\n border-radius: 20px;\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n color: white;\r\n }\r\n\r\n .premium-badge {\r\n right: 15px;\r\n background: var(--gradient-secondary);\r\n box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);\r\n }\r\n\r\n .free-badge {\r\n right: 15px;\r\n background: linear-gradient(135deg, var(--success) 0%, #059669 100%);\r\n box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\r\n }\r\n\r\n .purchased-badge {\r\n left: 15px;\r\n background: linear-gradient(135deg, var(--purple) 0%, #7c3aed 100%);\r\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\r\n display: none;\r\n }\r\n\r\n .product-card.is-purchased .purchased-badge {\r\n display: flex;\r\n }\r\n\r\n .product-main {\r\n display: flex;\r\n align-items: center;\r\n padding: 20px;\r\n gap: 18px;\r\n }\r\n\r\n .product-image {\r\n width: 75px;\r\n height: 75px;\r\n min-width: 75px;\r\n background: white;\r\n border-radius: var(--radius-md);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n box-shadow: var(--shadow-md);\r\n border: 2px solid var(--gray-100);\r\n }\r\n\r\n .product-image-placeholder {\r\n width: 100%;\r\n height: 100%;\r\n background: var(--gradient-primary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-size: 1.8rem;\r\n }\r\n\r\n .product-card.free-card .product-image-placeholder {\r\n background: linear-gradient(135deg, var(--success) 0%, #059669 100%);\r\n }\r\n\r\n .product-info { flex: 1; }\r\n\r\n .product-type {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 0.75rem;\r\n color: white;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin-bottom: 8px;\r\n padding: 5px 12px;\r\n border-radius: 20px;\r\n background: var(--gradient-secondary);\r\n }\r\n\r\n .product-card.free-card .product-type {\r\n background: linear-gradient(135deg, var(--success) 0%, #059669 100%);\r\n }\r\n\r\n .product-name {\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n color: var(--gray-800);\r\n line-height: 1.35;\r\n }\r\n\r\n .product-preview {\r\n background: var(--gray-50);\r\n padding: 15px 20px;\r\n border-top: 1px dashed var(--gray-200);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .preview-label {\r\n font-size: 0.8rem;\r\n color: var(--gray-500);\r\n font-weight: 600;\r\n margin-right: auto;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n\r\n .preview-label i {\r\n color: var(--primary-blue);\r\n }\r\n\r\n .preview-thumb {\r\n width: 50px;\r\n height: 38px;\r\n background: white;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n border: 2px solid var(--gray-200);\r\n transition: var(--transition);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .preview-thumb:hover {\r\n border-color: var(--primary-blue);\r\n transform: scale(1.1);\r\n }\r\n\r\n .preview-thumb img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .preview-thumb.placeholder {\r\n background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);\r\n color: var(--gray-400);\r\n font-size: 0.9rem;\r\n }\r\n\r\n .product-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 18px 20px;\r\n background: var(--white);\r\n border-top: 1px solid var(--gray-100);\r\n }\r\n\r\n .product-meta {\r\n display: flex;\r\n gap: 14px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .product-meta-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 0.78rem;\r\n color: var(--gray-500);\r\n background: var(--gray-50);\r\n padding: 5px 10px;\r\n border-radius: 20px;\r\n }\r\n\r\n .product-meta-item i {\r\n color: var(--primary-blue);\r\n font-size: 0.72rem;\r\n }\r\n\r\n .product-card.free-card .product-meta-item i {\r\n color: var(--success);\r\n }\r\n\r\n .product-meta-item strong {\r\n color: var(--gray-700);\r\n }\r\n\r\n .product-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n }\r\n\r\n .product-price { text-align: right; }\r\n\r\n .product-price-free {\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n color: var(--success);\r\n }\r\n\r\n .product-price-original {\r\n font-size: 0.82rem;\r\n color: var(--gray-400);\r\n text-decoration: line-through;\r\n display: block;\r\n }\r\n\r\n .product-price-current {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: var(--accent-orange);\r\n }\r\n\r\n .btn-action {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 22px;\r\n border: none;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 0.85rem;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n font-family: 'Poppins', sans-serif;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .btn-access {\r\n background: linear-gradient(135deg, var(--success) 0%, #059669 100%);\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);\r\n }\r\n\r\n .btn-access:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);\r\n }\r\n\r\n .btn-add-cart {\r\n background: var(--gradient-secondary);\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);\r\n }\r\n\r\n .btn-add-cart:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);\r\n }\r\n\r\n .btn-add-cart.added {\r\n background: linear-gradient(135deg, var(--success) 0%, #059669 100%);\r\n }\r\n\r\n .btn-practice {\r\n background: linear-gradient(135deg, var(--purple) 0%, #7c3aed 100%);\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);\r\n }\r\n\r\n .btn-practice:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);\r\n }\r\n\r\n \/* IMAGE POPUP *\/\r\n .image-popup-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.9);\r\n z-index: 10000;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n .image-popup-overlay.active {\r\n display: flex;\r\n }\r\n\r\n .image-popup-container {\r\n position: relative;\r\n max-width: 90%;\r\n max-height: 90%;\r\n background: white;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .image-popup-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px 20px;\r\n background: var(--gradient-primary);\r\n color: white;\r\n }\r\n\r\n .image-popup-title {\r\n font-size: 1rem;\r\n font-weight: 600;\r\n }\r\n\r\n .image-popup-close {\r\n width: 36px;\r\n height: 36px;\r\n border: none;\r\n background: rgba(255, 255, 255, 0.2);\r\n color: white;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: var(--transition);\r\n }\r\n\r\n .image-popup-close:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: rotate(90deg);\r\n }\r\n\r\n .image-popup-content {\r\n padding: 20px;\r\n text-align: center;\r\n background: var(--gray-50);\r\n }\r\n\r\n .image-popup-content img {\r\n max-width: 100%;\r\n max-height: 70vh;\r\n border-radius: 8px;\r\n box-shadow: var(--shadow-md);\r\n }\r\n\r\n .image-popup-nav {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n padding: 15px 20px;\r\n background: white;\r\n border-top: 1px solid var(--gray-200);\r\n }\r\n\r\n .image-popup-nav button {\r\n padding: 10px 25px;\r\n border: none;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n font-family: 'Poppins', sans-serif;\r\n }\r\n\r\n .image-popup-nav .btn-prev,\r\n .image-popup-nav .btn-next {\r\n background: var(--gradient-primary);\r\n color: white;\r\n }\r\n\r\n .image-popup-nav .btn-prev:hover,\r\n .image-popup-nav .btn-next:hover {\r\n transform: translateY(-2px);\r\n box-shadow: var(--shadow-md);\r\n }\r\n\r\n .image-popup-nav .btn-prev:disabled,\r\n .image-popup-nav .btn-next:disabled {\r\n background: var(--gray-300);\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n .image-popup-counter {\r\n display: flex;\r\n align-items: center;\r\n font-size: 0.9rem;\r\n color: var(--gray-600);\r\n font-weight: 500;\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .products-grid { grid-template-columns: repeat(2, 1fr); }\r\n .section-container { padding: 30px; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero { padding: 50px 15px 80px; }\r\n .hero-title { font-size: 1.8rem; }\r\n .products-grid { grid-template-columns: 1fr; }\r\n .section-container { padding: 25px 20px; }\r\n .section-title { font-size: 1.5rem; }\r\n .product-footer { flex-direction: column; gap: 15px; align-items: stretch; }\r\n .product-actions { justify-content: space-between; }\r\n .product-meta { justify-content: center; }\r\n .info-banner { flex-direction: column; text-align: center; }\r\n .info-banner-icon { margin: 0 auto; }\r\n .product-type { width: 32px; height: 32px; padding: 0; border-radius: 50%; justify-content: center; font-size: 0; }\r\n .product-type i { font-size: 1rem; margin: 0; }\r\n .image-popup-container { max-width: 95%; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .product-meta-item { font-size: 0.72rem; padding: 4px 8px; }\r\n .preview-thumb { width: 42px; height: 32px; }\r\n .btn-action { padding: 10px 18px; font-size: 0.8rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- IMAGE POPUP MODAL -->\r\n <div class=\"image-popup-overlay\" id=\"imagePopup\">\r\n <div class=\"image-popup-container\">\r\n <div class=\"image-popup-header\">\r\n <span class=\"image-popup-title\" id=\"popupTitle\">Preview<\/span>\r\n <button class=\"image-popup-close\" onclick=\"closeImagePopup()\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"image-popup-content\">\r\n <img decoding=\"async\" id=\"popupImage\" src=\"\" alt=\"Preview\">\r\n <\/div>\r\n <div class=\"image-popup-nav\">\r\n <button class=\"btn-prev\" onclick=\"navigatePopup(-1)\">\r\n <i class=\"fas fa-chevron-left\"><\/i> Prev\r\n <\/button>\r\n <span class=\"image-popup-counter\">\r\n <span id=\"currentIndex\">1<\/span> \/ <span id=\"totalImages\">3<\/span>\r\n <\/span>\r\n <button class=\"btn-next\" onclick=\"navigatePopup(1)\">\r\n Next <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- HERO SECTION -->\r\n <section class=\"hero\">\r\n <div class=\"hero-container\">\r\n <div class=\"hero-badge\"><i class=\"fas fa-graduation-cap\"><\/i> Study Materials<\/div>\r\n <h1 class=\"hero-title\">Master Your Subjects with <span>Flashcards<\/span><\/h1>\r\n <p class=\"hero-description\">Interactive flashcards designed for effective learning and exam success<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- MAIN CONTAINER -->\r\n <div class=\"main-container\">\r\n \r\n <!-- INFO BANNER -->\r\n <div class=\"info-banner\">\r\n <div class=\"info-banner-icon\">\r\n <i class=\"fas fa-info-circle\"><\/i>\r\n <\/div>\r\n <div class=\"info-banner-content\">\r\n <h4><i class=\"fas fa-lightbulb\"><\/i> Important Note<\/h4>\r\n <p>After purchasing any study material, you can access it from your <strong>My Prep Page<\/strong> section. All your materials will be organized and available for easy access anytime, anywhere.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FREE FLASHCARDS SECTION -->\r\n <div class=\"section-container free-section\">\r\n <div class=\"section-header\">\r\n <span class=\"section-tag free\"><i class=\"fas fa-gift\"><\/i> Free Access<\/span>\r\n <h2 class=\"section-title\">Free Flashcards<\/h2>\r\n <p class=\"section-subtitle\">Start your preparation journey with our complimentary flashcards<\/p>\r\n <\/div>\r\n\r\n <div class=\"products-grid\" id=\"free-products\">\r\n <!-- Free Flashcard 1 -->\r\n <div class=\"product-card free-card\">\r\n <div class=\"product-header\">\r\n <span class=\"free-badge\"><i class=\"fas fa-gift\"><\/i> FREE<\/span>\r\n <\/div>\r\n <div class=\"product-main\">\r\n <div class=\"product-image\">\r\n <div class=\"product-image-placeholder\">\r\n <i class=\"fas fa-landmark\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-info\">\r\n <div class=\"product-type\"><i class=\"fas fa-clone\"><\/i> Flashcards<\/div>\r\n <h3 class=\"product-name\">Constitution Basics Flashcards<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-preview\">\r\n <span class=\"preview-label\"><i class=\"fas fa-eye\"><\/i> Preview<\/span>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('Constitution Basics Flashcards', ['https:\/\/via.placeholder.com\/800x600\/1e3a8a\/ffffff?text=Card+1', 'https:\/\/via.placeholder.com\/800x600\/2563eb\/ffffff?text=Card+2', 'https:\/\/via.placeholder.com\/800x600\/3b82f6\/ffffff?text=Card+3'], 0)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/1e3a8a\/ffffff?text=1\" alt=\"Preview 1\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('Constitution Basics Flashcards', ['https:\/\/via.placeholder.com\/800x600\/1e3a8a\/ffffff?text=Card+1', 'https:\/\/via.placeholder.com\/800x600\/2563eb\/ffffff?text=Card+2', 'https:\/\/via.placeholder.com\/800x600\/3b82f6\/ffffff?text=Card+3'], 1)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/2563eb\/ffffff?text=2\" alt=\"Preview 2\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('Constitution Basics Flashcards', ['https:\/\/via.placeholder.com\/800x600\/1e3a8a\/ffffff?text=Card+1', 'https:\/\/via.placeholder.com\/800x600\/2563eb\/ffffff?text=Card+2', 'https:\/\/via.placeholder.com\/800x600\/3b82f6\/ffffff?text=Card+3'], 2)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/3b82f6\/ffffff?text=3\" alt=\"Preview 3\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-footer\">\r\n <div class=\"product-meta\">\r\n <div class=\"product-meta-item\"><i class=\"fas fa-layer-group\"><\/i> <strong>5<\/strong> Topics<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-clone\"><\/i> <strong>50+<\/strong> Cards<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-infinity\"><\/i> <strong>Lifetime<\/strong><\/div>\r\n <\/div>\r\n <div class=\"product-actions\">\r\n <div class=\"product-price\">\r\n <span class=\"product-price-free\">FREE<\/span>\r\n <\/div>\r\n <button class=\"btn-action btn-access\" onclick=\"window.location.href='\/flashcards\/constitution-basics'\">\r\n <i class=\"fas fa-play-circle\"><\/i> Practice\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Free Flashcard 2 -->\r\n <div class=\"product-card free-card\">\r\n <div class=\"product-header\">\r\n <span class=\"free-badge\"><i class=\"fas fa-gift\"><\/i> FREE<\/span>\r\n <\/div>\r\n <div class=\"product-main\">\r\n <div class=\"product-image\">\r\n <div class=\"product-image-placeholder\">\r\n <i class=\"fas fa-file-alt\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-info\">\r\n <div class=\"product-type\"><i class=\"fas fa-clone\"><\/i> Flashcards<\/div>\r\n <h3 class=\"product-name\">RTI Act Flashcards<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-preview\">\r\n <span class=\"preview-label\"><i class=\"fas fa-eye\"><\/i> Preview<\/span>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('RTI Act Flashcards', ['https:\/\/via.placeholder.com\/800x600\/10b981\/ffffff?text=RTI+1', 'https:\/\/via.placeholder.com\/800x600\/059669\/ffffff?text=RTI+2', 'https:\/\/via.placeholder.com\/800x600\/047857\/ffffff?text=RTI+3'], 0)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/10b981\/ffffff?text=1\" alt=\"Preview 1\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('RTI Act Flashcards', ['https:\/\/via.placeholder.com\/800x600\/10b981\/ffffff?text=RTI+1', 'https:\/\/via.placeholder.com\/800x600\/059669\/ffffff?text=RTI+2', 'https:\/\/via.placeholder.com\/800x600\/047857\/ffffff?text=RTI+3'], 1)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/059669\/ffffff?text=2\" alt=\"Preview 2\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('RTI Act Flashcards', ['https:\/\/via.placeholder.com\/800x600\/10b981\/ffffff?text=RTI+1', 'https:\/\/via.placeholder.com\/800x600\/059669\/ffffff?text=RTI+2', 'https:\/\/via.placeholder.com\/800x600\/047857\/ffffff?text=RTI+3'], 2)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/047857\/ffffff?text=3\" alt=\"Preview 3\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-footer\">\r\n <div class=\"product-meta\">\r\n <div class=\"product-meta-item\"><i class=\"fas fa-layer-group\"><\/i> <strong>4<\/strong> Topics<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-clone\"><\/i> <strong>40+<\/strong> Cards<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-infinity\"><\/i> <strong>Lifetime<\/strong><\/div>\r\n <\/div>\r\n <div class=\"product-actions\">\r\n <div class=\"product-price\">\r\n <span class=\"product-price-free\">FREE<\/span>\r\n <\/div>\r\n <button class=\"btn-action btn-access\" onclick=\"window.location.href='\/flashcards\/rti-act'\">\r\n <i class=\"fas fa-play-circle\"><\/i> Practice\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PREMIUM FLASHCARDS SECTION -->\r\n <div class=\"section-container premium-section\">\r\n <div class=\"section-header\">\r\n <span class=\"section-tag premium\"><i class=\"fas fa-crown\"><\/i> Premium Content<\/span>\r\n <h2 class=\"section-title\">Premium Flashcards<\/h2>\r\n <p class=\"section-subtitle\">Unlock comprehensive flashcard sets for exam excellence<\/p>\r\n <\/div>\r\n\r\n <div class=\"products-grid\" id=\"premium-products\">\r\n \r\n <!-- \r\n =====================================================\r\n IMPORTANT: HOW TO SET UP FLASHCARD PRODUCTS\r\n =====================================================\r\n \r\n 1. Create a new WooCommerce product for each flashcard\r\n 2. Note down the Product ID from WooCommerce\r\n 3. Replace data-woo-id=\"REPLACE_WITH_YOUR_PRODUCT_ID\" \r\n with your actual WooCommerce product ID\r\n \r\n Example: If your WooCommerce product ID is 7890, use:\r\n data-woo-id=\"7890\"\r\n \r\n DO NOT use IDs of products you've already purchased!\r\n =====================================================\r\n -->\r\n\r\n <!-- Premium Flashcard 1 -->\r\n <div class=\"product-card premium-card\" \r\n data-woo-id=\"REPLACE_WITH_YOUR_PRODUCT_ID_1\" \r\n data-page-url=\"\/flashcards\/complete-constitution\"\r\n data-price=\"299\"\r\n data-original-price=\"499\"\r\n data-name=\"Complete Constitution Flashcards\">\r\n <div class=\"product-header\">\r\n <span class=\"purchased-badge\"><i class=\"fas fa-check-circle\"><\/i> PURCHASED<\/span>\r\n <span class=\"premium-badge\"><i class=\"fas fa-crown\"><\/i> PREMIUM<\/span>\r\n <\/div>\r\n <div class=\"product-main\">\r\n <div class=\"product-image\">\r\n <div class=\"product-image-placeholder\">\r\n <i class=\"fas fa-landmark\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-info\">\r\n <div class=\"product-type\"><i class=\"fas fa-clone\"><\/i> Flashcards<\/div>\r\n <h3 class=\"product-name\">Complete Constitution Flashcards<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-preview\">\r\n <span class=\"preview-label\"><i class=\"fas fa-eye\"><\/i> Preview<\/span>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('Complete Constitution Flashcards', ['https:\/\/via.placeholder.com\/800x600\/ff6b35\/ffffff?text=Card+1', 'https:\/\/via.placeholder.com\/800x600\/f59e0b\/ffffff?text=Card+2', 'https:\/\/via.placeholder.com\/800x600\/d97706\/ffffff?text=Card+3'], 0)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/ff6b35\/ffffff?text=1\" alt=\"Preview 1\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('Complete Constitution Flashcards', ['https:\/\/via.placeholder.com\/800x600\/ff6b35\/ffffff?text=Card+1', 'https:\/\/via.placeholder.com\/800x600\/f59e0b\/ffffff?text=Card+2', 'https:\/\/via.placeholder.com\/800x600\/d97706\/ffffff?text=Card+3'], 1)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/f59e0b\/ffffff?text=2\" alt=\"Preview 2\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('Complete Constitution Flashcards', ['https:\/\/via.placeholder.com\/800x600\/ff6b35\/ffffff?text=Card+1', 'https:\/\/via.placeholder.com\/800x600\/f59e0b\/ffffff?text=Card+2', 'https:\/\/via.placeholder.com\/800x600\/d97706\/ffffff?text=Card+3'], 2)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/d97706\/ffffff?text=3\" alt=\"Preview 3\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-footer\">\r\n <div class=\"product-meta\">\r\n <div class=\"product-meta-item\"><i class=\"fas fa-layer-group\"><\/i> <strong>25<\/strong> Topics<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-clone\"><\/i> <strong>500+<\/strong> Cards<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-clock\"><\/i> <strong>1 Yr<\/strong><\/div>\r\n <\/div>\r\n <div class=\"product-actions\">\r\n <div class=\"product-price\">\r\n <span class=\"product-price-original\">\u20b9499<\/span>\r\n <span class=\"product-price-current\">\u20b9299<\/span>\r\n <\/div>\r\n <button class=\"btn-action btn-add-cart\">\r\n <i class=\"fas fa-cart-plus\"><\/i> Add\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Premium Flashcard 2 -->\r\n <div class=\"product-card premium-card\" \r\n data-woo-id=\"REPLACE_WITH_YOUR_PRODUCT_ID_2\" \r\n data-page-url=\"\/flashcards\/ccs-rules\"\r\n data-price=\"279\"\r\n data-original-price=\"449\"\r\n data-name=\"CCS Rules Master Flashcards\">\r\n <div class=\"product-header\">\r\n <span class=\"purchased-badge\"><i class=\"fas fa-check-circle\"><\/i> PURCHASED<\/span>\r\n <span class=\"premium-badge\"><i class=\"fas fa-crown\"><\/i> PREMIUM<\/span>\r\n <\/div>\r\n <div class=\"product-main\">\r\n <div class=\"product-image\">\r\n <div class=\"product-image-placeholder\">\r\n <i class=\"fas fa-gavel\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-info\">\r\n <div class=\"product-type\"><i class=\"fas fa-clone\"><\/i> Flashcards<\/div>\r\n <h3 class=\"product-name\">CCS Rules Master Flashcards<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-preview\">\r\n <span class=\"preview-label\"><i class=\"fas fa-eye\"><\/i> Preview<\/span>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('CCS Rules Master Flashcards', ['https:\/\/via.placeholder.com\/800x600\/8b5cf6\/ffffff?text=CCS+1', 'https:\/\/via.placeholder.com\/800x600\/7c3aed\/ffffff?text=CCS+2', 'https:\/\/via.placeholder.com\/800x600\/6d28d9\/ffffff?text=CCS+3'], 0)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/8b5cf6\/ffffff?text=1\" alt=\"Preview 1\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('CCS Rules Master Flashcards', ['https:\/\/via.placeholder.com\/800x600\/8b5cf6\/ffffff?text=CCS+1', 'https:\/\/via.placeholder.com\/800x600\/7c3aed\/ffffff?text=CCS+2', 'https:\/\/via.placeholder.com\/800x600\/6d28d9\/ffffff?text=CCS+3'], 1)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/7c3aed\/ffffff?text=2\" alt=\"Preview 2\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('CCS Rules Master Flashcards', ['https:\/\/via.placeholder.com\/800x600\/8b5cf6\/ffffff?text=CCS+1', 'https:\/\/via.placeholder.com\/800x600\/7c3aed\/ffffff?text=CCS+2', 'https:\/\/via.placeholder.com\/800x600\/6d28d9\/ffffff?text=CCS+3'], 2)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/6d28d9\/ffffff?text=3\" alt=\"Preview 3\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-footer\">\r\n <div class=\"product-meta\">\r\n <div class=\"product-meta-item\"><i class=\"fas fa-layer-group\"><\/i> <strong>20<\/strong> Topics<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-clone\"><\/i> <strong>400+<\/strong> Cards<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-clock\"><\/i> <strong>1 Yr<\/strong><\/div>\r\n <\/div>\r\n <div class=\"product-actions\">\r\n <div class=\"product-price\">\r\n <span class=\"product-price-original\">\u20b9449<\/span>\r\n <span class=\"product-price-current\">\u20b9279<\/span>\r\n <\/div>\r\n <button class=\"btn-action btn-add-cart\">\r\n <i class=\"fas fa-cart-plus\"><\/i> Add\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Premium Flashcard 3 -->\r\n <div class=\"product-card premium-card\" \r\n data-woo-id=\"REPLACE_WITH_YOUR_PRODUCT_ID_3\" \r\n data-page-url=\"\/flashcards\/gfr-financial-rules\"\r\n data-price=\"249\"\r\n data-original-price=\"399\"\r\n data-name=\"GFR & Financial Rules Flashcards\">\r\n <div class=\"product-header\">\r\n <span class=\"purchased-badge\"><i class=\"fas fa-check-circle\"><\/i> PURCHASED<\/span>\r\n <span class=\"premium-badge\"><i class=\"fas fa-crown\"><\/i> PREMIUM<\/span>\r\n <\/div>\r\n <div class=\"product-main\">\r\n <div class=\"product-image\">\r\n <div class=\"product-image-placeholder\">\r\n <i class=\"fas fa-coins\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-info\">\r\n <div class=\"product-type\"><i class=\"fas fa-clone\"><\/i> Flashcards<\/div>\r\n <h3 class=\"product-name\">GFR & Financial Rules Flashcards<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-preview\">\r\n <span class=\"preview-label\"><i class=\"fas fa-eye\"><\/i> Preview<\/span>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('GFR & Financial Rules Flashcards', ['https:\/\/via.placeholder.com\/800x600\/0d9488\/ffffff?text=GFR+1', 'https:\/\/via.placeholder.com\/800x600\/0f766e\/ffffff?text=GFR+2', 'https:\/\/via.placeholder.com\/800x600\/115e59\/ffffff?text=GFR+3'], 0)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/0d9488\/ffffff?text=1\" alt=\"Preview 1\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('GFR & Financial Rules Flashcards', ['https:\/\/via.placeholder.com\/800x600\/0d9488\/ffffff?text=GFR+1', 'https:\/\/via.placeholder.com\/800x600\/0f766e\/ffffff?text=GFR+2', 'https:\/\/via.placeholder.com\/800x600\/115e59\/ffffff?text=GFR+3'], 1)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/0f766e\/ffffff?text=2\" alt=\"Preview 2\">\r\n <\/div>\r\n <div class=\"preview-thumb\" onclick=\"openImagePopup('GFR & Financial Rules Flashcards', ['https:\/\/via.placeholder.com\/800x600\/0d9488\/ffffff?text=GFR+1', 'https:\/\/via.placeholder.com\/800x600\/0f766e\/ffffff?text=GFR+2', 'https:\/\/via.placeholder.com\/800x600\/115e59\/ffffff?text=GFR+3'], 2)\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/100x75\/115e59\/ffffff?text=3\" alt=\"Preview 3\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"product-footer\">\r\n <div class=\"product-meta\">\r\n <div class=\"product-meta-item\"><i class=\"fas fa-layer-group\"><\/i> <strong>18<\/strong> Topics<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-clone\"><\/i> <strong>350+<\/strong> Cards<\/div>\r\n <div class=\"product-meta-item\"><i class=\"fas fa-clock\"><\/i> <strong>1 Yr<\/strong><\/div>\r\n <\/div>\r\n <div class=\"product-actions\">\r\n <div class=\"product-price\">\r\n <span class=\"product-price-original\">\u20b9399<\/span>\r\n <span class=\"product-price-current\">\u20b9249<\/span>\r\n <\/div>\r\n <button class=\"btn-action btn-add-cart\">\r\n <i class=\"fas fa-cart-plus\"><\/i> Add\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ =====================================================\r\n \/\/ IMAGE POPUP FUNCTIONALITY\r\n \/\/ =====================================================\r\n var currentImages = [];\r\n var currentImageIndex = 0;\r\n\r\n function openImagePopup(title, images, startIndex) {\r\n currentImages = images;\r\n currentImageIndex = startIndex || 0;\r\n \r\n document.getElementById('popupTitle').textContent = title + ' - Preview';\r\n document.getElementById('totalImages').textContent = images.length;\r\n \r\n updatePopupImage();\r\n document.getElementById('imagePopup').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeImagePopup() {\r\n document.getElementById('imagePopup').classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n function navigatePopup(direction) {\r\n currentImageIndex += direction;\r\n if (currentImageIndex < 0) currentImageIndex = 0;\r\n if (currentImageIndex >= currentImages.length) currentImageIndex = currentImages.length - 1;\r\n updatePopupImage();\r\n }\r\n\r\n function updatePopupImage() {\r\n document.getElementById('popupImage').src = currentImages[currentImageIndex];\r\n document.getElementById('currentIndex').textContent = currentImageIndex + 1;\r\n document.querySelector('.btn-prev').disabled = currentImageIndex === 0;\r\n document.querySelector('.btn-next').disabled = currentImageIndex === currentImages.length - 1;\r\n }\r\n\r\n document.getElementById('imagePopup').addEventListener('click', function(e) {\r\n if (e.target === this) closeImagePopup();\r\n });\r\n\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') closeImagePopup();\r\n if (e.key === 'ArrowLeft') navigatePopup(-1);\r\n if (e.key === 'ArrowRight') navigatePopup(1);\r\n });\r\n\r\n \/\/ =====================================================\r\n \/\/ PURCHASE CHECK ON PAGE LOAD\r\n \/\/ =====================================================\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \r\n \/\/ Get all premium cards\r\n var cards = document.querySelectorAll('.product-card.premium-card');\r\n \r\n cards.forEach(function(card) {\r\n var wooId = card.getAttribute('data-woo-id');\r\n \r\n \/\/ SKIP if wooId is placeholder or empty\r\n if (!wooId || wooId === '' || wooId.indexOf('REPLACE') !== -1) {\r\n console.log('Skipping card - no valid woo ID set');\r\n return;\r\n }\r\n \r\n \/\/ Check if cssaddaPurchased exists\r\n if (typeof cssaddaPurchased === 'undefined' || cssaddaPurchased === null) {\r\n console.log('cssaddaPurchased not defined');\r\n return;\r\n }\r\n \r\n \/\/ Check if this product is purchased\r\n var isPurchased = false;\r\n \r\n \/\/ Check string key\r\n if (cssaddaPurchased[wooId]) {\r\n isPurchased = true;\r\n }\r\n \/\/ Check number key\r\n if (cssaddaPurchased[parseInt(wooId)]) {\r\n isPurchased = true;\r\n }\r\n \r\n if (isPurchased) {\r\n console.log('Product ' + wooId + ' is purchased');\r\n markCardAsPurchased(card);\r\n }\r\n });\r\n });\r\n\r\n function markCardAsPurchased(card) {\r\n var pageUrl = card.getAttribute('data-page-url') || '#';\r\n var button = card.querySelector('.btn-add-cart');\r\n var priceDiv = card.querySelector('.product-price');\r\n\r\n \/\/ Add purchased class\r\n card.classList.add('is-purchased');\r\n\r\n \/\/ Change button\r\n if (button) {\r\n button.className = 'btn-action btn-practice';\r\n button.innerHTML = '<i class=\"fas fa-play-circle\"><\/i> Practice';\r\n button.onclick = function() {\r\n window.location.href = pageUrl;\r\n };\r\n }\r\n\r\n \/\/ Hide price\r\n if (priceDiv) {\r\n priceDiv.style.display = 'none';\r\n }\r\n }\r\n\r\n \/\/ =====================================================\r\n \/\/ ADD TO CART - Click Handler\r\n \/\/ =====================================================\r\n document.querySelectorAll('.btn-add-cart').forEach(function(button) {\r\n button.addEventListener('click', function() {\r\n var card = this.closest('.product-card');\r\n var wooId = card.getAttribute('data-woo-id');\r\n var productName = card.getAttribute('data-name');\r\n var price = parseInt(card.getAttribute('data-price'));\r\n\r\n \/\/ Check if wooId is valid\r\n if (!wooId || wooId.indexOf('REPLACE') !== -1) {\r\n showToast('Product not configured yet. Please set WooCommerce Product ID.', 'error');\r\n return;\r\n }\r\n\r\n \/\/ Check login\r\n if (typeof cssaddaIsLoggedIn !== 'undefined' && !cssaddaIsLoggedIn) {\r\n showToast('Please login to add items to cart', 'warning');\r\n setTimeout(function() {\r\n window.location.href = '\/?page_id=4602';\r\n }, 1500);\r\n return;\r\n }\r\n\r\n var product = {\r\n id: 'flash-' + wooId,\r\n name: productName,\r\n type: 'flashcards',\r\n price: price,\r\n wooProductId: parseInt(wooId)\r\n };\r\n\r\n if (typeof CSSAddaCart !== 'undefined' && CSSAddaCart.addItem) {\r\n CSSAddaCart.addItem(product, this);\r\n } else {\r\n this.classList.add('added');\r\n this.innerHTML = '<i class=\"fas fa-check\"><\/i> Added';\r\n showToast(productName + ' added to cart!', 'success');\r\n \r\n var btn = this;\r\n setTimeout(function() {\r\n btn.classList.remove('added');\r\n btn.innerHTML = '<i class=\"fas fa-cart-plus\"><\/i> Add';\r\n }, 2000);\r\n }\r\n });\r\n });\r\n\r\n \/\/ =====================================================\r\n \/\/ TOAST NOTIFICATION\r\n \/\/ =====================================================\r\n function showToast(message, type) {\r\n if (typeof CSSAddaCart !== 'undefined' && CSSAddaCart.showToast) {\r\n CSSAddaCart.showToast(message, type);\r\n return;\r\n }\r\n \r\n var colors = { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' };\r\n var toast = document.createElement('div');\r\n toast.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:15px 25px;border-radius:10px;color:white;font-weight:600;z-index:99999;background:' + (colors[type] || colors.info) + ';box-shadow:0 4px 15px rgba(0,0,0,0.2);';\r\n toast.textContent = message;\r\n document.body.appendChild(toast);\r\n \r\n setTimeout(function() {\r\n toast.style.opacity = '0';\r\n toast.style.transition = 'opacity 0.3s';\r\n setTimeout(function() { toast.remove(); }, 300);\r\n }, 3000);\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\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>Study Materials – Flashcards | CSS Adda Preview Prev 1 \/ 3 Next Study Materials Master Your Subjects with Flashcards […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","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":[53],"tags":[],"class_list":["post-6836","page","type-page","status-publish","hentry","category-website-main-pages-header"],"_links":{"self":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/6836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=6836"}],"version-history":[{"count":119,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/6836\/revisions"}],"predecessor-version":[{"id":9657,"href":"https:\/\/promotionexams.com\/index.php?rest_route=\/wp\/v2\/pages\/6836\/revisions\/9657"}],"wp:attachment":[{"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promotionexams.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}