{"id":2246,"date":"2026-07-23T04:55:28","date_gmt":"2026-07-23T04:55:28","guid":{"rendered":"https:\/\/learnpureislam.com\/?page_id=2246"},"modified":"2026-07-23T06:06:08","modified_gmt":"2026-07-23T06:06:08","slug":"dukan","status":"publish","type":"page","link":"https:\/\/learnpureislam.com\/?page_id=2246","title":{"rendered":"Dukan"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Learn Quran, Aqeedah & Seerat \u2013 Islamic Courses Shop<\/title>\r\n <style>\r\n \/* ========== Light Mode (default) ========== *\/\r\n :root {\r\n --bg: #f5f5f7;\r\n --card-bg: #ffffff;\r\n --text: #1d1d1f;\r\n --text-secondary: #6e6e73;\r\n --accent: #0e7c4b;\r\n --accent-hover: #0a5e38;\r\n --border: #d0d0d5;\r\n --tag-bg: #e8f5e9;\r\n --tag-text: #1b5e20;\r\n --badge-popular: #f9a825;\r\n --badge-new: #2e7d32;\r\n --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\r\n --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.12);\r\n --navbar-bg: rgba(255, 255, 255, 0.85);\r\n --cart-item-bg: #fafafa;\r\n --toast-bg: #1d1d1f;\r\n --toast-text: #fff;\r\n --radius: 16px;\r\n --transition: 0.25s ease;\r\n font-size: 16px;\r\n }\r\n\r\n \/* ========== Dark Mode ========== *\/\r\n body.dark-mode {\r\n --bg: #1a1a1a;\r\n --card-bg: #2c2c2e;\r\n --text: #f5f5f7;\r\n --text-secondary: #a1a1a6;\r\n --accent: #30b570;\r\n --accent-hover: #28a060;\r\n --border: #48484a;\r\n --tag-bg: #1e3a2a;\r\n --tag-text: #8fd8a0;\r\n --badge-popular: #e6a817;\r\n --badge-new: #3b8c3f;\r\n --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);\r\n --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.5);\r\n --navbar-bg: rgba(44, 44, 46, 0.85);\r\n --cart-item-bg: #3a3a3c;\r\n --toast-bg: #f5f5f7;\r\n --toast-text: #1d1d1f;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n line-height: 1.5;\r\n min-height: 100vh;\r\n transition: background 0.3s, color 0.3s;\r\n }\r\n\r\n \/* ========== Navbar ========== *\/\r\n .navbar {\r\n background: var(--navbar-bg);\r\n backdrop-filter: blur(12px);\r\n border-bottom: 1px solid var(--border);\r\n padding: 0 1.5rem;\r\n height: 60px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n .navbar .logo {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: var(--text);\r\n text-decoration: none;\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .dark-mode-toggle {\r\n background: none;\r\n border: 1.5px solid var(--border);\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--text);\r\n transition: var(--transition);\r\n }\r\n\r\n .dark-mode-toggle:hover {\r\n background: var(--accent);\r\n color: #fff;\r\n border-color: var(--accent);\r\n }\r\n\r\n .cart-btn {\r\n background: none;\r\n border: 1.5px solid var(--border);\r\n cursor: pointer;\r\n font-size: 0.95rem;\r\n padding: 8px 18px;\r\n border-radius: 25px;\r\n transition: var(--transition);\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n color: var(--text);\r\n font-weight: 600;\r\n }\r\n\r\n .cart-btn:hover {\r\n border-color: var(--accent);\r\n color: var(--accent);\r\n background: rgba(14, 124, 75, 0.1);\r\n }\r\n\r\n .cart-count {\r\n background: var(--accent);\r\n color: #fff;\r\n border-radius: 50%;\r\n width: 22px;\r\n height: 22px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n }\r\n\r\n \/* ========== Main Layout ========== *\/\r\n .shop-container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 2rem 1.5rem 4rem;\r\n }\r\n\r\n .shop-header {\r\n text-align: center;\r\n margin-bottom: 2.2rem;\r\n }\r\n\r\n .shop-header h1 {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .shop-header p {\r\n color: var(--text-secondary);\r\n font-size: 1rem;\r\n }\r\n\r\n .filter-bar {\r\n display: flex;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n margin-bottom: 2rem;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .search-input {\r\n flex: 1;\r\n min-width: 220px;\r\n padding: 10px 16px;\r\n border: 1.5px solid var(--border);\r\n border-radius: 25px;\r\n font-size: 0.95rem;\r\n outline: none;\r\n transition: var(--transition);\r\n background: var(--card-bg);\r\n color: var(--text);\r\n }\r\n\r\n .search-input:focus {\r\n border-color: var(--accent);\r\n box-shadow: 0 0 0 3px rgba(14, 124, 75, 0.2);\r\n }\r\n\r\n .category-tabs {\r\n display: flex;\r\n gap: 8px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cat-tab {\r\n padding: 8px 18px;\r\n border-radius: 22px;\r\n border: 1.5px solid var(--border);\r\n background: var(--card-bg);\r\n cursor: pointer;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n transition: var(--transition);\r\n white-space: nowrap;\r\n color: var(--text-secondary);\r\n }\r\n\r\n .cat-tab.active,\r\n .cat-tab:hover {\r\n background: var(--accent);\r\n color: #fff;\r\n border-color: var(--accent);\r\n }\r\n\r\n \/* ========== Course Grid ========== *\/\r\n .course-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 1.5rem;\r\n }\r\n\r\n \/* ========== Course Card ========== *\/\r\n .course-card {\r\n background: var(--card-bg);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n border: 1px solid var(--border);\r\n box-shadow: var(--shadow);\r\n transition: var(--transition);\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n .course-card:hover {\r\n box-shadow: var(--shadow-hover);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .card-badge {\r\n position: absolute;\r\n top: 12px;\r\n left: 12px;\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n font-size: 0.72rem;\r\n font-weight: 700;\r\n letter-spacing: 0.3px;\r\n text-transform: uppercase;\r\n z-index: 2;\r\n background: var(--badge-popular);\r\n color: #3e2c00;\r\n }\r\n\r\n .badge-popular {\r\n background: var(--badge-popular);\r\n color: #3e2c00;\r\n }\r\n\r\n .badge-new {\r\n background: var(--badge-new);\r\n color: #fff;\r\n }\r\n\r\n .card-img-wrap {\r\n position: relative;\r\n height: 150px;\r\n overflow: hidden;\r\n background: #e8ecf1;\r\n }\r\n\r\n .card-img-wrap img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .course-card:hover .card-img-wrap img {\r\n transform: scale(1.05);\r\n }\r\n\r\n .card-body {\r\n padding: 1rem 1.2rem 1.2rem;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n gap: 0.6rem;\r\n }\r\n\r\n .card-category {\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n color: var(--tag-text);\r\n background: var(--tag-bg);\r\n display: inline-block;\r\n padding: 4px 10px;\r\n border-radius: 10px;\r\n align-self: flex-start;\r\n font-weight: 700;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.1rem;\r\n font-weight: 650;\r\n line-height: 1.35;\r\n }\r\n\r\n .card-instructor {\r\n font-size: 0.85rem;\r\n color: var(--text-secondary);\r\n }\r\n\r\n .card-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 0.82rem;\r\n color: var(--text-secondary);\r\n }\r\n\r\n .card-rating {\r\n color: #f5a623;\r\n font-weight: 600;\r\n }\r\n\r\n .card-stats {\r\n display: flex;\r\n gap: 12px;\r\n font-size: 0.8rem;\r\n color: var(--text-secondary);\r\n align-items: center;\r\n }\r\n\r\n .card-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n margin-top: auto;\r\n padding-top: 0.6rem;\r\n border-top: 1px solid var(--border);\r\n gap: 8px;\r\n }\r\n\r\n .card-price {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n }\r\n\r\n .card-price .original {\r\n font-size: 0.85rem;\r\n text-decoration: line-through;\r\n color: #aaa;\r\n margin-right: 6px;\r\n font-weight: 400;\r\n }\r\n\r\n .card-actions {\r\n display: flex;\r\n gap: 8px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn {\r\n padding: 8px 14px;\r\n border-radius: 22px;\r\n font-weight: 600;\r\n font-size: 0.85rem;\r\n transition: var(--transition);\r\n cursor: pointer;\r\n border: none;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n white-space: nowrap;\r\n text-decoration: none;\r\n }\r\n\r\n .btn-details {\r\n background: transparent;\r\n color: var(--accent);\r\n border: 1.5px solid var(--accent);\r\n }\r\n\r\n .btn-details:hover {\r\n background: var(--accent);\r\n color: #fff;\r\n }\r\n\r\n .btn-checkout {\r\n background: var(--accent);\r\n color: #fff;\r\n }\r\n\r\n .btn-checkout:hover {\r\n background: var(--accent-hover);\r\n box-shadow: 0 4px 14px rgba(14, 124, 75, 0.35);\r\n }\r\n\r\n .btn-cart {\r\n background: var(--accent);\r\n color: #fff;\r\n }\r\n\r\n .btn-cart:hover {\r\n background: var(--accent-hover);\r\n box-shadow: 0 4px 14px rgba(14, 124, 75, 0.35);\r\n }\r\n\r\n .btn-cart.added {\r\n background: #34c759;\r\n pointer-events: none;\r\n }\r\n\r\n \/* ========== Cart Sidebar ========== *\/\r\n .cart-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n z-index: 200;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s;\r\n }\r\n\r\n .cart-overlay.open {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .cart-sidebar {\r\n position: fixed;\r\n top: 0;\r\n right: -420px;\r\n width: 400px;\r\n max-width: 90vw;\r\n height: 100vh;\r\n background: var(--card-bg);\r\n z-index: 300;\r\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);\r\n transition: right 0.35s ease;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 16px 0 0 16px;\r\n }\r\n\r\n .cart-sidebar.open {\r\n right: 0;\r\n }\r\n\r\n .cart-header {\r\n padding: 1.2rem 1.5rem;\r\n border-bottom: 1px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n font-weight: 700;\r\n font-size: 1.15rem;\r\n }\r\n\r\n .btn-close-cart {\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--text-secondary);\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .btn-close-cart:hover {\r\n background: #f0f0f2;\r\n color: var(--text);\r\n }\r\n\r\n .cart-items {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: 1rem 1.5rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.8rem;\r\n }\r\n\r\n .cart-empty {\r\n text-align: center;\r\n color: var(--text-secondary);\r\n margin-top: 3rem;\r\n font-size: 1rem;\r\n }\r\n\r\n .cart-item {\r\n display: flex;\r\n gap: 12px;\r\n align-items: center;\r\n padding: 10px;\r\n border-radius: 10px;\r\n background: var(--cart-item-bg);\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .cart-item-img {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 8px;\r\n object-fit: cover;\r\n background: #e0e4ea;\r\n flex-shrink: 0;\r\n }\r\n\r\n .cart-item-info {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .cart-item-title {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .cart-item-price {\r\n font-size: 0.85rem;\r\n color: var(--text-secondary);\r\n }\r\n\r\n .btn-remove-item {\r\n background: none;\r\n border: none;\r\n color: #e53935;\r\n cursor: pointer;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n padding: 4px 8px;\r\n border-radius: 12px;\r\n }\r\n\r\n .btn-remove-item:hover {\r\n background: #ffebee;\r\n }\r\n\r\n .cart-footer {\r\n padding: 1rem 1.5rem;\r\n border-top: 1px solid var(--border);\r\n }\r\n\r\n .cart-total {\r\n display: flex;\r\n justify-content: space-between;\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n .btn-checkout-sidebar {\r\n width: 100%;\r\n padding: 12px;\r\n background: var(--accent);\r\n color: #fff;\r\n border: none;\r\n border-radius: 25px;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n\r\n .btn-checkout-sidebar:hover {\r\n background: var(--accent-hover);\r\n box-shadow: 0 4px 16px rgba(14, 124, 75, 0.4);\r\n }\r\n\r\n \/* ========== Toast ========== *\/\r\n .toast {\r\n position: fixed;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(120px);\r\n background: var(--toast-bg);\r\n color: var(--toast-text);\r\n padding: 12px 24px;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n z-index: 500;\r\n transition: transform 0.35s ease;\r\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .toast.show {\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n @media (max-width: 900px) {\r\n :root {\r\n font-size: 15px;\r\n }\r\n .course-grid {\r\n gap: 1.2rem;\r\n }\r\n .navbar .logo {\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n :root {\r\n font-size: 14px;\r\n }\r\n .course-grid {\r\n grid-template-columns: 1fr;\r\n gap: 1.2rem;\r\n }\r\n .card-img-wrap {\r\n height: 140px;\r\n }\r\n .cart-sidebar {\r\n width: 100%;\r\n max-width: 100vw;\r\n border-radius: 16px 16px 0 0;\r\n right: -100vw;\r\n }\r\n .filter-bar {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- ==================== NAVBAR ==================== -->\r\n <nav class=\"navbar\">\r\n <a href=\"#\" class=\"logo\">\ud83d\udcd6 Learn Quran, Aqeedah, Seerat and More<\/a>\r\n <div class=\"nav-actions\">\r\n <button class=\"dark-mode-toggle\" id=\"darkModeToggle\" aria-label=\"Toggle dark mode\">\ud83c\udf19<\/button>\r\n <button class=\"cart-btn\" id=\"btnOpenCart\" aria-label=\"Go to checkout\">\r\n \ud83d\uded2 Cart <span class=\"cart-count\" id=\"cartCount\">0<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- ==================== SHOP MAIN ==================== -->\r\n <main class=\"shop-container\">\r\n <div class=\"shop-header\">\r\n <h1>Islamic Courses for Everyone<\/h1>\r\n <p>Structured studies with authentic scholars. Use the buttons on each card to learn more, buy now, or add to cart.<\/p>\r\n <\/div>\r\n\r\n <div class=\"filter-bar\">\r\n <input type=\"text\" class=\"search-input\" id=\"searchInput\" placeholder=\"\ud83d\udd0d Search courses...\">\r\n <div class=\"category-tabs\" id=\"categoryTabs\">\r\n <button class=\"cat-tab active\" data-cat=\"all\">All<\/button>\r\n <button class=\"cat-tab\" data-cat=\"quran\">Quran<\/button>\r\n <button class=\"cat-tab\" data-cat=\"aqeedah\">Aqeedah<\/button>\r\n <button class=\"cat-tab\" data-cat=\"seerat\">Seerat<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"course-grid\" id=\"courseGrid\">\r\n <!-- JS generated -->\r\n <\/div>\r\n <\/main>\r\n\r\n <!-- ==================== CART SIDEBAR ==================== -->\r\n <div class=\"cart-overlay\" id=\"cartOverlay\"><\/div>\r\n <aside class=\"cart-sidebar\" id=\"cartSidebar\">\r\n <div class=\"cart-header\">\r\n \ud83d\uded2 Your Cart\r\n <button class=\"btn-close-cart\" id=\"btnCloseCart\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"cart-items\" id=\"cartItems\">\r\n <p class=\"cart-empty\">Your cart is empty.<\/p>\r\n <\/div>\r\n <div class=\"cart-footer\">\r\n <div class=\"cart-total\">\r\n <span>Total:<\/span>\r\n <span id=\"cartTotal\">$0<\/span>\r\n <\/div>\r\n <button class=\"btn-checkout-sidebar\" id=\"btnCheckoutSidebar\">Proceed to Checkout<\/button>\r\n <\/div>\r\n <\/aside>\r\n\r\n <div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ ==================== COURSE DATA ====================\r\n const courses = [\r\n {\r\n id: 1,\r\n title: 'Learn Quran \u2013 Tajweed & Recitation',\r\n category: 'quran',\r\n instructor: 'Sh. Abdullah Al-Juhany',\r\n rating: 4.9,\r\n students: 12840,\r\n duration: '48h',\r\n price: 79.99,\r\n originalPrice: 119.99,\r\n badge: 'popular',\r\n image: 'https:\/\/images.unsplash.com\/photo-1585036154771-5e5b3e3b9f88?w=400&h=220&fit=crop',\r\n detailsLink: 'course-details.html?id=1',\r\n checkoutLink: 'https:\/\/learnpureislam.com\/checkout\/?course_id=1'\r\n },\r\n {\r\n id: 2,\r\n title: 'Quran Memorization (Hifz) Program',\r\n category: 'quran',\r\n instructor: 'Hafiz Muhammad Ali',\r\n rating: 4.8,\r\n students: 8560,\r\n duration: '60h',\r\n price: 89.99,\r\n originalPrice: 129.99,\r\n badge: 'new',\r\n image: 'https:\/\/images.unsplash.com\/photo-1609599006353-e629aa3b7f30?w=400&h=220&fit=crop',\r\n detailsLink: 'course-details.html?id=2',\r\n checkoutLink: 'https:\/\/learnpureislam.com\/checkout\/?course_id=2'\r\n },\r\n {\r\n id: 3,\r\n title: 'Tafseer of the Quran \u2013 Juz Amma',\r\n category: 'quran',\r\n instructor: 'Dr. Yasir Qadhi',\r\n rating: 4.9,\r\n students: 11200,\r\n duration: '32h',\r\n price: 74.99,\r\n originalPrice: 109.99,\r\n badge: 'popular',\r\n image: 'https:\/\/images.unsplash.com\/photo-1564769625905-50e93678e769?w=400&h=220&fit=crop',\r\n detailsLink: 'course-details.html?id=3',\r\n checkoutLink: 'https:\/\/learnpureislam.com\/checkout\/?course_id=3'\r\n },\r\n {\r\n id: 4,\r\n title: 'Learn Aqeedah \u2013 Islamic Creed',\r\n category: 'aqeedah',\r\n instructor: 'Dr. Bilal Philips',\r\n rating: 4.8,\r\n students: 9870,\r\n duration: '36h',\r\n price: 69.99,\r\n originalPrice: 99.99,\r\n badge: 'popular',\r\n image: 'https:\/\/images.unsplash.com\/photo-1584551246679-0daf3d275d0f?w=400&h=220&fit=crop',\r\n detailsLink: 'course-details.html?id=4',\r\n checkoutLink: 'https:\/\/learnpureislam.com\/checkout\/?course_id=4'\r\n },\r\n {\r\n id: 5,\r\n title: 'Aqeedah Al-Wasitiyyah Explained',\r\n category: 'aqeedah',\r\n instructor: 'Sh. Assim Al-Hakeem',\r\n rating: 4.7,\r\n students: 7340,\r\n duration: '28h',\r\n price: 64.99,\r\n originalPrice: 94.99,\r\n badge: null,\r\n image: 'https:\/\/images.unsplash.com\/photo-1542816417-3b40b4e2a0b2?w=400&h=220&fit=crop',\r\n detailsLink: 'course-details.html?id=5',\r\n checkoutLink: 'https:\/\/learnpureislam.com\/checkout\/?course_id=5'\r\n },\r\n {\r\n id: 6,\r\n title: 'Know Seerat \u2013 Life of Prophet \ufdfa',\r\n category: 'seerat',\r\n instructor: 'Sh. Yasir Qadhi',\r\n rating: 4.9,\r\n students: 15230,\r\n duration: '52h',\r\n price: 89.99,\r\n originalPrice: 139.99,\r\n badge: 'new',\r\n image: 'https:\/\/images.unsplash.com\/photo-1584551246679-0daf3d275d0f?w=400&h=220&fit=crop',\r\n detailsLink: 'course-details.html?id=6',\r\n checkoutLink: 'https:\/\/learnpureislam.com\/checkout\/?course_id=6'\r\n },\r\n {\r\n id: 7,\r\n title: 'Seerah of the Rightly Guided Caliphs',\r\n category: 'seerat',\r\n instructor: 'Dr. Ali Muhammad As-Sallabi',\r\n rating: 4.8,\r\n students: 11200,\r\n duration: '40h',\r\n price: 79.99,\r\n originalPrice: 119.99,\r\n badge: 'popular',\r\n image: 'https:\/\/images.unsplash.com\/photo-1573481070899-34c34a87a0c7?w=400&h=220&fit=crop',\r\n detailsLink: 'course-details.html?id=7',\r\n checkoutLink: 'https:\/\/learnpureislam.com\/checkout\/?course_id=7'\r\n },\r\n {\r\n id: 8,\r\n title: 'Women in the Seerah',\r\n category: 'seerat',\r\n instructor: 'Ustadha Fatima Barkatulla',\r\n rating: 4.9,\r\n students: 6780,\r\n duration: '24h',\r\n price: 59.99,\r\n originalPrice: 89.99,\r\n badge: 'new',\r\n image: 'https:\/\/images.unsplash.com\/photo-1532635241-17e820acc59c?w=400&h=220&fit=crop',\r\n detailsLink: 'course-details.html?id=8',\r\n checkoutLink: 'https:\/\/learnpureislam.com\/checkout\/?course_id=8'\r\n }\r\n ];\r\n\r\n \/\/ ==================== STATE ====================\r\n let cart = [];\r\n let activeCategory = 'all';\r\n let searchQuery = '';\r\n\r\n \/\/ ==================== DOM REFS ====================\r\n const courseGrid = document.getElementById('courseGrid');\r\n const searchInput = document.getElementById('searchInput');\r\n const categoryTabs = document.getElementById('categoryTabs');\r\n const cartCountEl = document.getElementById('cartCount');\r\n const cartItemsEl = document.getElementById('cartItems');\r\n const cartTotalEl = document.getElementById('cartTotal');\r\n const cartOverlay = document.getElementById('cartOverlay');\r\n const cartSidebar = document.getElementById('cartSidebar');\r\n const btnOpenCart = document.getElementById('btnOpenCart');\r\n const btnCloseCart = document.getElementById('btnCloseCart');\r\n const btnCheckoutSidebar = document.getElementById('btnCheckoutSidebar');\r\n const toastEl = document.getElementById('toast');\r\n const darkModeToggle = document.getElementById('darkModeToggle');\r\n\r\n \/\/ ==================== DARK MODE ====================\r\n function setDarkMode(isDark) {\r\n if (isDark) {\r\n document.body.classList.add('dark-mode');\r\n darkModeToggle.textContent = '\u2600\ufe0f';\r\n localStorage.setItem('darkMode', 'enabled');\r\n } else {\r\n document.body.classList.remove('dark-mode');\r\n darkModeToggle.textContent = '\ud83c\udf19';\r\n localStorage.setItem('darkMode', 'disabled');\r\n }\r\n }\r\n\r\n const savedDarkMode = localStorage.getItem('darkMode');\r\n if (savedDarkMode === 'enabled') {\r\n setDarkMode(true);\r\n } else {\r\n setDarkMode(false);\r\n }\r\n\r\n darkModeToggle.addEventListener('click', () => {\r\n const isDark = document.body.classList.contains('dark-mode');\r\n setDarkMode(!isDark);\r\n });\r\n\r\n \/\/ ==================== CART BUTTON (navbar) ====================\r\n btnOpenCart.addEventListener('click', function () {\r\n window.location.href = \"https:\/\/learnpureislam.com\/checkout\/\";\r\n });\r\n\r\n \/\/ ==================== CHECKOUT BUTTON (sidebar) ====================\r\n btnCheckoutSidebar.addEventListener('click', function () {\r\n window.location.href = \"https:\/\/learnpureislam.com\/checkout\/\";\r\n });\r\n\r\n \/\/ ==================== RENDER COURSES ====================\r\n function getFilteredCourses() {\r\n return courses.filter(course => {\r\n const matchesCategory = activeCategory === 'all' || course.category === activeCategory;\r\n const matchesSearch = course.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\r\n course.instructor.toLowerCase().includes(searchQuery.toLowerCase()) ||\r\n course.category.toLowerCase().includes(searchQuery.toLowerCase());\r\n return matchesCategory && matchesSearch;\r\n });\r\n }\r\n\r\n function renderCourses() {\r\n const filtered = getFilteredCourses();\r\n if (filtered.length === 0) {\r\n courseGrid.innerHTML = `\r\n <div style=\"grid-column: 1 \/ -1; text-align: center; padding: 3rem; color: var(--text-secondary);\">\r\n <p style=\"font-size:1.1rem;\">\ud83d\ude15 No courses found.<\/p>\r\n <p>Try adjusting your search or filter.<\/p>\r\n <\/div>`;\r\n return;\r\n }\r\n\r\n courseGrid.innerHTML = filtered.map(course => {\r\n const inCart = cart.find(item => item.id === course.id);\r\n return `\r\n <div class=\"course-card\">\r\n ${course.badge ? `<span class=\"card-badge ${course.badge === 'popular' ? 'badge-popular' : 'badge-new'}\">${course.badge === 'popular' ? '\ud83d\udd25 Popular' : '\u2728 New'}<\/span>` : ''}\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"${course.image}\" alt=\"${course.title}\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"card-body\">\r\n <span class=\"card-category\">${course.category}<\/span>\r\n <h3 class=\"card-title\">${course.title}<\/h3>\r\n <p class=\"card-instructor\">\ud83d\udc64 ${course.instructor}<\/p>\r\n <div class=\"card-meta\">\r\n <span class=\"card-rating\">\u2b50 ${course.rating}<\/span>\r\n <span>(${course.students.toLocaleString()} students)<\/span>\r\n <\/div>\r\n <div class=\"card-stats\">\r\n <span>\u23f1 ${course.duration}<\/span>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-price\">\r\n <span class=\"original\">$${course.originalPrice}<\/span> $${course.price}\r\n <\/span>\r\n <div class=\"card-actions\">\r\n <a href=\"${course.detailsLink}\" class=\"btn btn-details\" target=\"_blank\">View Details<\/a>\r\n <a href=\"${course.checkoutLink}\" class=\"btn btn-checkout\">Checkout<\/a>\r\n <button class=\"btn btn-cart ${inCart ? 'added' : ''}\" data-id=\"${course.id}\">\r\n ${inCart ? '\u2713 Added' : 'Add to Cart'}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n }).join('');\r\n\r\n \/\/ Add to Cart buttons\r\n document.querySelectorAll('.btn-cart').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const id = parseInt(btn.dataset.id);\r\n addToCart(id);\r\n });\r\n });\r\n }\r\n\r\n \/\/ ==================== CART LOGIC ====================\r\n function addToCart(courseId) {\r\n const course = courses.find(c => c.id === courseId);\r\n if (!course) return;\r\n if (cart.find(item => item.id === courseId)) {\r\n showToast('\u26a0\ufe0f Already in your cart!');\r\n return;\r\n }\r\n cart.push({ ...course });\r\n updateCartUI();\r\n renderCourses();\r\n showToast(`\u2705 \"${course.title}\" added to cart!`);\r\n }\r\n\r\n function removeFromCart(courseId) {\r\n cart = cart.filter(item => item.id !== courseId);\r\n updateCartUI();\r\n renderCourses();\r\n showToast('\ud83d\uddd1\ufe0f Item removed from cart.');\r\n }\r\n\r\n function updateCartUI() {\r\n cartCountEl.textContent = cart.length;\r\n if (cart.length === 0) {\r\n cartItemsEl.innerHTML = '<p class=\"cart-empty\">Your cart is empty.<\/p>';\r\n } else {\r\n cartItemsEl.innerHTML = cart.map(item => `\r\n <div class=\"cart-item\">\r\n <img decoding=\"async\" src=\"${item.image}\" alt=\"${item.title}\" class=\"cart-item-img\">\r\n <div class=\"cart-item-info\">\r\n <p class=\"cart-item-title\">${item.title}<\/p>\r\n <p class=\"cart-item-price\">$${item.price}<\/p>\r\n <\/div>\r\n <button class=\"btn-remove-item\" data-id=\"${item.id}\">Remove<\/button>\r\n <\/div>\r\n `).join('');\r\n\r\n document.querySelectorAll('.btn-remove-item').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const id = parseInt(btn.dataset.id);\r\n removeFromCart(id);\r\n });\r\n });\r\n }\r\n const total = cart.reduce((sum, item) => sum + item.price, 0);\r\n cartTotalEl.textContent = '$' + total.toFixed(2);\r\n }\r\n\r\n \/\/ ==================== CART SIDEBAR TOGGLE (not used by navbar) ====================\r\n function openCart() {\r\n cartOverlay.classList.add('open');\r\n cartSidebar.classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeCart() {\r\n cartOverlay.classList.remove('open');\r\n cartSidebar.classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n btnCloseCart.addEventListener('click', closeCart);\r\n cartOverlay.addEventListener('click', closeCart);\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') closeCart();\r\n });\r\n\r\n \/\/ ==================== TOAST ====================\r\n let toastTimer;\r\n function showToast(message) {\r\n clearTimeout(toastTimer);\r\n toastEl.textContent = message;\r\n toastEl.classList.add('show');\r\n toastTimer = setTimeout(() => {\r\n toastEl.classList.remove('show');\r\n }, 2500);\r\n }\r\n\r\n \/\/ ==================== FILTERS ====================\r\n searchInput.addEventListener('input', (e) => {\r\n searchQuery = e.target.value.trim();\r\n renderCourses();\r\n });\r\n\r\n categoryTabs.addEventListener('click', (e) => {\r\n if (e.target.classList.contains('cat-tab')) {\r\n document.querySelectorAll('.cat-tab').forEach(tab => tab.classList.remove('active'));\r\n e.target.classList.add('active');\r\n activeCategory = e.target.dataset.cat;\r\n renderCourses();\r\n }\r\n });\r\n\r\n \/\/ ==================== INIT ====================\r\n function init() {\r\n updateCartUI();\r\n renderCourses();\r\n }\r\n init();\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\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Learn Quran, Aqeedah & Seerat \u2013 Islamic Courses Shop \ud83d\udcd6 Learn Quran, Aqeedah, Seerat and More \ud83c\udf19 \ud83d\uded2 Cart 0 Islamic Courses for Everyone Structured studies with authentic scholars. Use the buttons on each card to learn more, buy now, or add to cart. All Quran Aqeedah Seerat \ud83d\uded2 Your Cart \u2715 Your cart is empty. Total: $0 Proceed to Checkout<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2246","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/pages\/2246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnpureislam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2246"}],"version-history":[{"count":21,"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/pages\/2246\/revisions"}],"predecessor-version":[{"id":2285,"href":"https:\/\/learnpureislam.com\/index.php?rest_route=\/wp\/v2\/pages\/2246\/revisions\/2285"}],"wp:attachment":[{"href":"https:\/\/learnpureislam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}