Add comprehensive Islam cheatsheet HTML page
· 6 months ago
9a1862a2039bc0f77385c7564e23bf866c0ef299
Parent:
c03fc1627
Introduces a new islam.html file providing an in-depth, interactive cheatsheet on core Islamic beliefs, practices, sacred texts, law, and key concepts. The page features structured sections, Bootstrap styling, Arabic term toggling, and detailed explanations for educational and reference purposes.
1 file changed +1602 −0
- islam.html +1602 −0
Diff
--- /dev/null +++ b/islam.html @@ -0,0 +1,1602 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Islam Cheatsheet: Core Beliefs, Practices & Texts</title> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/islam.html"> + <meta name="description" content="Islam cheatsheet: Explore core beliefs (Iman), Five Pillars, Quran, Hadith, Sharia, holy days, lifecycle rituals, and major branches (Sunni, Shia, Sufism). Interactive with Arabic toggle."> + <meta name="keywords" content="islam, islamic beliefs, five pillars, quran, hadith, sharia, fiqh, sunni, shia, sufism, hajj, ramadan, salah, zakat, shahada, sawm, islamic practices, islamic law, cheatsheet, islam guide"> + <meta name="author" content="David Veksler"> + + <!-- Social Media / Open Graph Metadata --> + <meta property="og:title" content="Islam Cheatsheet: Core Beliefs, Practices & Texts"> + <meta property="og:description" content="Islam cheatsheet: Explore core beliefs (Iman), Five Pillars, Quran, Hadith, Sharia, holy days, lifecycle rituals, and major branches (Sunni, Shia, Sufism). Interactive with Arabic toggle."> + <meta property="og:type" content="website"> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/islam.html"> + <meta property="og:image:width" content="1200"> + <meta property="og:image:height" content="630"> + <meta property="og:site_name" content="David Veksler Cheatsheets"> + <meta property="og:locale" content="en_US"> + + <!-- Twitter Card Metadata --> + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:title" content="Islam Cheatsheet: Core Beliefs, Practices & Texts"> + <meta name="twitter:description" content="Islam cheatsheet: Explore core beliefs (Iman), Five Pillars, Quran, Hadith, Sharia, holy days, lifecycle rituals, and major branches (Sunni, Shia, Sufism). Interactive with Arabic toggle."> + <meta name="twitter:creator" content="@heroiclife"> + + <!-- Structured Data (JSON-LD) --> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "Article", + "mainEntityOfPage": { + "@type": "WebPage", + "@id": "https://cheatsheets.davidveksler.com/islam.html" + }, + "headline": "Islam Cheatsheet: Core Beliefs, Practices & Texts", + "description": "Islam cheatsheet: Explore core beliefs (Iman), Five Pillars, Quran, Hadith, Sharia, holy days, lifecycle rituals, and major branches (Sunni, Shia, Sufism). Interactive with Arabic toggle.", + "image": { + "@type": "ImageObject", + "url": "https://cheatsheets.davidveksler.com/images/islam.png", + "width": 1200, + "height": 630 + }, + "author": { + "@type": "Person", + "name": "David Veksler", + "url": "https://www.linkedin.com/in/davidveksler/" + }, + "publisher": { + "@type": "Organization", + "name": "David Veksler Cheatsheets", + "logo": { + "@type": "ImageObject", + "url": "https://cheatsheets.davidveksler.com/images/islam.png" + } + }, + "datePublished": "2025-01-01", + "dateModified": "2025-01-01" + } + </script> + + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"> + + <style> + :root { + --bs-body-bg: #f5f7fa; + --bs-primary: #1a5c20; + } + + body { + background: var(--bs-body-bg); + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + padding-bottom: 2.5rem; + font-size: 16px; + } + + .page-header { + background: #d4f1e4; + padding: 2rem 1.5rem; + text-align: center; + border-bottom: 1px solid #a8d5c4; + } + + .page-header h1 { + color: #1a5c20; + font-weight: 300; + } + + .arabic-toggle-container { + margin-top: 1rem; + font-size: 0.9em; + color: #2e8b57; + } + + .section-title { + color: #1a5c20; + margin: 2.7rem 0 1.2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.03em; + } + + .info-card { + background: #fff; + border: 1px solid #d4f1e4; + border-radius: 0.35rem; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); + height: 100%; + display: flex; + flex-direction: column; + } + + .info-card .card-body { + padding: 1.25rem 1rem; + flex-grow: 1; + display: flex; + flex-direction: column; + } + + .info-card h5 { + color: #1a5c20; + font-size: 1.05rem; + text-align: center; + margin-bottom: 0.75rem; + font-weight: 700; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 0.4rem; + } + + .info-card p { + font-size: 0.9rem; + color: #444; + margin-bottom: 0.8rem; + flex-grow: 1; + } + + .info-card ul { + padding-left: 1.2rem; + margin-bottom: 0; + } + + .info-card li { + margin-bottom: 0.45rem; + line-height: 1.45; + } + + .highlight { + color: #1a5c20; + font-weight: 700; + } + + .toggle-term .ar { + font-family: "Traditional Arabic", "Arabic Typesetting", serif; + font-size: 1.05em; + direction: rtl; + } + + .toggle-term .en, + .toggle-term .ar { + display: inline; + } + + .row { + align-items: flex-start; + } + + .row > * { + margin-bottom: 1.5rem; + } + + footer { + padding-top: 2rem; + font-size: 0.85em; + color: #496080; + } + + .collapse-content { + font-size: 0.9rem; + border-top: 1px solid #eee; + padding-top: 0.8rem; + margin-top: 0.8rem; + } + + .collapse-content ul { + padding-left: 1.1rem; + margin-bottom: 0.5rem; + } + + .collapse-content li { + margin-bottom: 0.3rem; + font-size: 0.88rem; + } + + .collapse-content p { + font-size: 0.9rem; + margin-bottom: 0.5rem; + } + + .details-toggle { + font-size: 0.8rem; + margin-top: auto; + align-self: flex-start; + padding: 0.25rem 0.5rem; + } + + .details-toggle .bi { + vertical-align: middle; + } + + .list-unstyled { + padding-left: 0; + list-style: none; + } + + .list-unstyled li { + margin-bottom: 0.4rem; + } + + .description { + font-size: 0.9rem; + color: #444; + margin-bottom: 1rem; + } + + .resource-link { + font-size: 0.88rem; + color: var(--bs-primary); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 2px; + } + </style> + + <!-- Print Styles --> + <style> + @media print { + :root { + --bs-body-bg: #fff; + --bs-body-color: #000; + --bs-primary: #000; + } + + body { + background: var(--bs-body-bg) !important; + color: var(--bs-body-color) !important; + font-size: 10pt; + font-family: serif; + padding-bottom: 0; + margin: 1cm; + width: auto !important; + } + + .arabic-toggle-container, + .details-toggle, + footer .bi { + display: none !important; + } + + .page-header { + background: none !important; + border-bottom: 1px solid #ccc !important; + text-align: left; + padding: 0 0 1rem 0; + margin-bottom: 1.5rem; + page-break-after: avoid; + } + + .page-header h1 { + color: #000 !important; + font-size: 18pt; + } + + .page-header p.lead { + color: #333 !important; + font-size: 11pt; + } + + .section-title { + color: #000 !important; + margin: 2rem 0 1rem 0; + font-size: 14pt; + page-break-after: avoid; + } + + .row { + display: block !important; + } + + .row > [class*="col-"] { + width: 100% !important; + float: none !important; + display: block !important; + margin-bottom: 1rem; + page-break-inside: avoid; + } + + .info-card { + background: none !important; + border: 1px solid #ccc !important; + box-shadow: none !important; + border-radius: 0 !important; + height: auto !important; + display: block !important; + margin-bottom: 1rem; + } + + .info-card .card-body { + padding: 0.75rem !important; + display: block !important; + } + + .info-card h5 { + color: #000 !important; + text-align: left; + font-size: 11pt; + margin-bottom: 0.5rem; + font-weight: bold; + } + + .info-card p, + .info-card li { + font-size: 10pt !important; + color: #000 !important; + line-height: 1.4; + } + + .info-card ul { + margin-bottom: 0.5rem; + padding-left: 1.5rem; + } + + .collapse { + display: block !important; + visibility: visible !important; + height: auto !important; + overflow: visible !important; + } + + .collapse-content { + border-top: 1px dotted #aaa !important; + padding-top: 0.5rem !important; + margin-top: 0.5rem !important; + font-size: 9pt !important; + } + + .collapse-content p, + .collapse-content li { + font-size: 9pt !important; + } + + .toggle-term .en, + .toggle-term .ar { + display: inline !important; + } + + .toggle-term .ar::before { + content: " ("; + font-family: serif; + font-style: normal; + } + + .toggle-term .ar::after { + content: ")"; + font-family: serif; + font-style: normal; + } + + a, + a:visited { + color: #000 !important; + text-decoration: none !important; + } + + a[href^="http"]::after, + a[href^="https"]::after { + content: " [" attr(href) "]"; + font-size: 8pt; + color: #555; + word-wrap: break-word; + display: inline; + } + + a[href^="#"]::after { + content: "" !important; + } + + footer a::after { + content: "" !important; + } + + .list-unstyled { + padding-left: 0; + list-style: none; + } + + .list-unstyled li { + margin-bottom: 0.3rem; + } + + footer { + padding-top: 1rem; + font-size: 9pt; + color: #555 !important; + text-align: left; + border-top: 1px solid #ccc; + } + + footer p { + font-size: 9pt !important; + } + } + </style> +</head> +<body> + +<header class="page-header"> + <h1 class="display-6"> + <i class="bi bi-star"></i> + Islam Cheatsheet + </h1> + <p class="lead" style="font-size: 1rem"> + Comprehensive at-a-glance guide to core tenets, practices, history, and diversity from a traditional Sunni perspective. + </p> + <div class="arabic-toggle-container form-check form-switch d-inline-flex align-items-center"> + <input class="form-check-input me-2" id="arabicToggleSwitch" type="checkbox"> + <label class="form-check-label" for="arabicToggleSwitch"> + Show Arabic Terms + </label> + </div> +</header> + +<div class="container"> + + <!-- Section: Core Beliefs (Iman) --> + <h2 class="section-title"> + <i class="bi bi-heart-fill"></i> Core Beliefs (Iman) + </h2> + <div class="row"> + <!-- Tawhid --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-lightbulb"></i> + <span class="toggle-term"> + <span class="en">Divine Unity</span> + <span class="ar">التوحيد</span> + </span> + </h5> + <p>Absolute monotheism: Allah is One, Indivisible, Creator.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseTawhid" aria-expanded="false" aria-controls="collapseTawhid"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseTawhid"> + <p>The absolute cornerstone of Islamic theology. God (Allah) is uniquely One, without partners, divisions, or multiplicity.</p> + <ul> + <li><strong>Rejection of Shirk:</strong> Polytheism and associating partners with God is the gravest sin.</li> + <li><strong>Divine Attributes:</strong> Allah is Eternal, All-Knowing, All-Powerful, Merciful, Just.</li> + <li><strong>No Trinity:</strong> Explicit rejection of Christian concept of Trinity.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Mala'ikah --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-cloud"></i> + <span class="toggle-term"> + <span class="en">Angels</span> + <span class="ar">الملائكة</span> + </span> + </h5> + <p>Created from light; obedient servants without free will or sin.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseAngels" aria-expanded="false" aria-controls="collapseAngels"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseAngels"> + <ul> + <li><strong>Jibril (Gabriel):</strong> Messenger angel; delivered Quran to Muhammad.</li> + <li><strong>Mikail (Michael):</strong> Angel of sustenance and nourishment.</li> + <li><strong>Israfil:</strong> Angel who will blow the trumpet on Day of Judgment.</li> + <li><strong>Malik:</strong> Keeper of Hell.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Kutub --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-book"></i> + <span class="toggle-term"> + <span class="en">Holy Books</span> + <span class="ar">الكتب السماوية</span> + </span> + </h5> + <p>Belief in revelations given to previous prophets and the Quran as the final, unchanged revelation.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseBooks" aria-expanded="false" aria-controls="collapseBooks"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseBooks"> + <ul> + <li><strong>Torah (Taurat):</strong> Revealed to Moses.</li> + <li><strong>Psalms (Zabur):</strong> Revealed to David.</li> + <li><strong>Gospel (Injil):</strong> Revealed to Jesus.</li> + <li><strong>Quran:</strong> Final revelation; preserved unchanged in original Arabic.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Rusul --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-person-fill"></i> + <span class="toggle-term"> + <span class="en">Prophets & Messengers</span> + <span class="ar">الأنبياء والرسل</span> + </span> + </h5> + <p>Belief in a chain of prophets from Adam to Muhammad, the final messenger.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseProphets" aria-expanded="false" aria-controls="collapseProphets"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseProphets"> + <ul> + <li><strong>24 Major Prophets:</strong> Including Noah, Abraham, Moses, Jesus, Muhammad.</li> + <li><strong>Muhammad as Seal:</strong> Last and final messenger; completes revelation.</li> + <li><strong>Distinction:</strong> All prophets are sinless (Ismah); messengers brought new law (Sharia).</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Akhirah --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-scale"></i> + <span class="toggle-term"> + <span class="en">Afterlife & Judgment</span> + <span class="ar">الآخرة واليوم الآخر</span> + </span> + </h5> + <p>Belief in Day of Judgment, bodily resurrection, and eternal reward or punishment.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseAfterlife" aria-expanded="false" aria-controls="collapseAfterlife"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseAfterlife"> + <ul> + <li><strong>Barzakh:</strong> Intermediate state between death and resurrection.</li> + <li><strong>Day of Judgment (Yawm al-Qiyamah):</strong> All souls resurrected and judged.</li> + <li><strong>Jannah (Paradise):</strong> Eternal reward for the righteous.</li> + <li><strong>Jahannam (Hell):</strong> Punishment for the wicked; may not be eternal for Muslims.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Qadar --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-gear"></i> + <span class="toggle-term"> + <span class="en">Divine Decree</span> + <span class="ar">القدر</span> + </span> + </h5> + <p>God's omniscience and predestination; humans possess free will within God's knowledge.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseQadar" aria-expanded="false" aria-controls="collapseQadar"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseQadar"> + <ul> + <li><strong>Allah's Knowledge:</strong> God knows all past, present, and future.</li> + <li><strong>Human Agency:</strong> Humans choose their actions and bear responsibility.</li> + <li><strong>Theological Balance:</strong> Reconciles God's omniscience with human free will.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Five Pillars --> + <h2 class="section-title"> + <i class="bi bi-bookmark-fill"></i> The Five Pillars + </h2> + <div class="row"> + <!-- Shahada --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-check2-circle"></i> + <span class="toggle-term"> + <span class="en">1. Shahada (Declaration)</span> + <span class="ar">الشهادة</span> + </span> + </h5> + <p>"There is no god but Allah, and Muhammad is His Messenger."</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseShahada" aria-expanded="false" aria-controls="collapseShahada"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseShahada"> + <ul> + <li>Verbal declaration of faith required for conversion.</li> + <li>First article of Islamic belief and the foundation of all practices.</li> + <li>Recited in call to prayer (Adhan) and daily Salah.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Salah --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-people"></i> + <span class="toggle-term"> + <span class="en">2. Salah (Prayer)</span> + <span class="ar">الصلاة</span> + </span> + </h5> + <p>Five daily ritual prayers facing Mecca (Qibla).</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSalah" aria-expanded="false" aria-controls="collapseSalah"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseSalah"> + <ul> + <li><strong>Five Daily Prayers:</strong> Fajr (Dawn), Dhuhr (Noon), Asr (Afternoon), Maghrib (Sunset), Isha (Night).</li> + <li><strong>Wudu:</strong> Ritual ablution (purification) before prayer.</li> + <li><strong>Friday Prayer (Jumu'ah):</strong> Communal prayer with sermon (Khutbah).</li> + <li><strong>Tawhid Focus:</strong> Spiritual connection and obedience to Allah.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Zakat --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-hand-thumbs-up"></i> + <span class="toggle-term"> + <span class="en">3. Zakat (Charity)</span> + <span class="ar">الزكاة</span> + </span> + </h5> + <p>Annual alms: 2.5% of excess wealth to purify and aid the poor.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseZakat" aria-expanded="false" aria-controls="collapseZakat"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseZakat"> + <ul> + <li><strong>Obligatory Alms:</strong> 2.5% of wealth held for a lunar year.</li> + <li><strong>Recipients:</strong> The poor, needy, debtors, travelers, etc.</li> + <li><strong>Purification:</strong> Purifies wealth and the soul from greed and miserliness.</li> + <li><strong>Zakat al-Fitr:</strong> Additional charity at end of Ramadan.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Sawm --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-moon-stars"></i> + <span class="toggle-term"> + <span class="en">4. Sawm (Fasting)</span> + <span class="ar">الصيام</span> + </span> + </h5> + <p>Abstaining from food, drink, and relations from dawn to sunset in Ramadan.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSawm" aria-expanded="false" aria-controls="collapseSawm"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseSawm"> + <ul> + <li><strong>Ramadan:</strong> 9th month of Islamic lunar calendar; month of revelation.</li> + <li><strong>Conditions:</strong> Must be Muslim, sane, adult, healthy; intention (Niyyah) required.</li> + <li><strong>Exceptions:</strong> Sick, elderly, menstruating women, travelers may be excused.</li> + <li><strong>Benefits:</strong> Spiritual discipline, empathy for the poor, increased prayer.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Hajj --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-geo-alt-fill"></i> + <span class="toggle-term"> + <span class="en">5. Hajj (Pilgrimage)</span> + <span class="ar">الحج</span> + </span> + </h5> + <p>Journey to Mecca required once in lifetime for those physically and financially able.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseHajj" aria-expanded="false" aria-controls="collapseHajj"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseHajj"> + <ul> + <li><strong>Timing:</strong> 12th month (Dhul-Hijjah) of lunar calendar; several days.</li> + <li><strong>Key Rites:</strong> Circling Kaaba (Tawaf), running between Safa and Marwah, standing at Mount Arafat, stoning pillars (Jamrat).</li> + <li><strong>Ihram:</strong> Sacred ritual dress; state of spiritual purity and devotion.</li> + <li><strong>Global Community:</strong> Millions gather; symbolizes unity of Muslims worldwide.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Sacred Texts & Law --> + <h2 class="section-title"> + <i class="bi bi-collection"></i> Sacred Texts & Law + </h2> + <div class="row"> + <!-- Quran --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-book-half"></i> + <span class="toggle-term"> + <span class="en">The Quran</span> + <span class="ar">القرآن</span> + </span> + </h5> + <p>The literal word of God revealed in Arabic; the primary source of Islamic law.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseQuran" aria-expanded="false" aria-controls="collapseQuran"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseQuran"> + <p><strong>Revelation & Authenticity:</strong></p> + <ul> + <li>Revealed over 23 years (609-632 CE) to Muhammad by Angel Jibril in Arabic.</li> + <li>Preserved verbatim in original Arabic; unchanged since revelation.</li> + <li>Memorized and recited by millions (Huffaz); oral and written transmission ensured accuracy.</li> + <li>Muslims believe it is the literal, uncreated word of God (Kalam Allah).</li> + </ul> + + <p><strong>Structure & Organization:</strong></p> + <ul> + <li><strong>114 Surahs (Chapters):</strong> Named after their content or themes (e.g., Surat al-Fatiha "Opening," Surat al-Baqarah "The Cow," Surat al-Nur "Light").</li> + <li><strong>6,236 Ayat (Verses):</strong> Organized in varying lengths; shortest surah has 3 verses, longest has 286.</li> + <li><strong>Juz (Parts):</strong> Divided into 30 equal parts (Juz) for recitation during Ramadan.</li> + <li><strong>Arrangement:</strong> Not chronological; mostly longest to shortest chapters.</li> + </ul> + + <p><strong>Content Themes:</strong></p> + <ul> + <li><strong>Theology (Aqidah):</strong> Oneness of God, attributes of Allah, divine justice.</li> + <li><strong>Law & Ethics (Sharia):</strong> Halal/Haram rulings, family law, commerce, criminal justice.</li> + <li><strong>History & Prophets:</strong> Stories of previous prophets (Noah, Abraham, Moses, Jesus, etc.).</li> + <li><strong>Eschatology:</strong> Day of Judgment, Paradise, Hell, resurrection.</li> + <li><strong>Guidance:</strong> Moral teachings, spiritual development, personal conduct.</li> + </ul> + + <p><strong>Key Classifications:</strong></p> + <ul> + <li><strong>Makki vs. Madani:</strong> Meccan (86 surahs; spiritual/theological) vs. Medinan (28 surahs; legal/social).</li> + <li><strong>Abrogation (Naskh):</strong> Later verses sometimes override earlier ones; understanding context is crucial.</li> + <li><strong>Tafsir (Exegesis):</strong> Detailed scholarly interpretation using history, grammar, and tradition.</li> + </ul> + + <p><strong>Unique Features:</strong></p> + <ul> + <li>Every surah (except one) begins with "Bismillah" (In the name of God).</li> + <li>Poetic rhythm and rhyme (Ejaz) make it memorable and unmistakable as God's word.</li> + <li>Addresses multiple audiences simultaneously (believers, disbelievers, scholars).</li> + <li>Repetition of themes reinforces core concepts.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Sunnah & Hadith --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-chat-left-quote"></i> + <span class="toggle-term"> + <span class="en">Sunnah & Hadith</span> + <span class="ar">السنة والحديث</span> + </span> + </h5> + <p>Example and teachings of Prophet Muhammad; second source after Quran.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSunnah" aria-expanded="false" aria-controls="collapseSunnah"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseSunnah"> + <p><strong>Definition & Scope:</strong></p> + <ul> + <li><strong>Sunnah:</strong> "The way/practice" - the customs, traditions, and lifestyle of Prophet Muhammad.</li> + <li><strong>Scope:</strong> Covers his prayer methods, family life, business dealings, military strategy, governance, personal hygiene, speech patterns, and moral character.</li> + <li><strong>Authority:</strong> Muslims view following the Sunnah as following the Prophet's perfect example (Uswa Hasanah).</li> + <li><strong>Basis for Practice:</strong> Many religious actions lack explicit Quranic verses but are established through Sunnah (e.g., specific prayer movements, timing of prayers).</li> + </ul> + + <p><strong>Hadith: Recording the Sunnah:</strong></p> + <ul> + <li><strong>Definition:</strong> "Report/Narration" - documented accounts of what the Prophet said, did, or approved.</li> + <li><strong>Three Types of Hadith Content:</strong> + <ul> + <li>Qawl (Saying) - Direct quotes and teachings</li> + <li>Fial (Action) - His documented practices and habits</li> + <li>Taqrir (Approval) - His silent approval of companions' actions</li> + </ul> + </li> + <li><strong>Isnad (Chain of Narrators):</strong> Each hadith includes a chain showing who reported it (e.g., "A reported from B who reported from C who witnessed the Prophet").</li> + <li><strong>Matn (Text):</strong> The actual content/wording of the report.</li> + </ul> + + <p><strong>Authentic Hadith Collections (Kutub al-Sittah):</strong></p> + <ul> + <li><strong>Sahih Bukhari (d. 870 CE):</strong> Most authentic; ~7,400 authentic hadith; rigorous verification criteria.</li> + <li><strong>Sahih Muslim (d. 875 CE):</strong> Second most authentic; ~3,100 hadith; slightly different methodology than Bukhari.</li> + <li><strong>Sunan Abu Dawud (d. 888 CE):</strong> 4,800 hadith; focuses on legal rulings.</li> + <li><strong>Jami' Tirmidhi (d. 892 CE):</strong> 3,956 hadith; classifies authenticity levels.</li> + <li><strong>Sunan al-Nasa'i (d. 915 CE):</strong> 5,761 hadith; organized by legal subject matter.</li> + <li><strong>Sunan Ibn Majah (d. 887 CE):</strong> 4,332 hadith; more lenient authentication standards.</li> + </ul> + + <p><strong>Hadith Classification (Grading):</strong></p> + <ul> + <li><strong>Sahih (Sound):</strong> Authentic hadith with reliable narrators and unbroken chain.</li> + <li><strong>Hasan (Good):</strong> Slightly weaker than Sahih but still acceptable for practice.</li> + <li><strong>Daif (Weak):</strong> Missing links in chain or unreliable narrators; generally not used for rulings.</li> + <li><strong>Mawdu' (Fabricated):</strong> Proven false or created; completely rejected.</li> + </ul> + + <p><strong>Role in Islamic Law:</strong></p> + <ul> + <li>Explains and clarifies Quranic teachings.</li> + <li>Provides practical details not found in Quran (e.g., how to perform Wudu).</li> + <li>Establishes legal rulings in new situations (Ijma', Qiyas).</li> + <li>Foundation for the Four Schools of Law (Madhabs).</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Sharia & Fiqh --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-scales"></i> + <span class="toggle-term"> + <span class="en">Sharia & Fiqh</span> + <span class="ar">الشريعة والفقه</span> + </span> + </h5> + <p>Islamic law derived from Quran and Sunnah; jurisprudence through scholarly interpretation.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSharia" aria-expanded="false" aria-controls="collapseSharia"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseSharia"> + <p><strong>Sharia: Divine Law:</strong></p> + <ul> + <li><strong>Definition:</strong> "The path to water" - the divine legal system derived from Quran and Sunnah.</li> + <li><strong>Scope:</strong> Covers all aspects of life: worship (Ibadah), transactions (Muamalat), family law, criminal law, constitutional law, and ethics.</li> + <li><strong>Objectives (Maqasid al-Sharia):</strong> Protection of religion, life, intellect, property, and family/honor.</li> + <li><strong>Authority:</strong> Binding on Muslims in all circumstances; source of legitimacy in Islamic societies.</li> + <li><strong>Divine Source:</strong> Believed to be from God; reveals God's wisdom and justice.</li> + </ul> + + <p><strong>Fiqh: Jurisprudence & Interpretation:</strong></p> + <ul> + <li><strong>Definition:</strong> "Understanding" - the human effort to understand and apply Sharia principles to new situations.</li> + <li><strong>Role:</strong> Bridges unchanging divine law with changing circumstances; allows Sharia to remain relevant across time and cultures.</li> + <li><strong>Mujtahid:</strong> Qualified scholars who can exercise independent reasoning (Ijtihad) to derive legal rulings.</li> + <li><strong>Historical Development:</strong> Formalized by major schools (Madhabs) in 2nd-3rd centuries AH; continues evolving.</li> + </ul> + + <p><strong>Sources of Sharia (Usul al-Fiqh):</strong></p> + <ul> + <li><strong>1. Quran:</strong> Primary source; explicit and implicit rulings; must be understood in context.</li> + <li><strong>2. Sunnah:</strong> Clarifies Quranic rulings; provides independent legal basis where Quran is silent.</li> + <li><strong>3. Ijma' (Consensus):</strong> Agreement of Islamic scholars (particularly early generations) on a legal issue; binding authority.</li> + <li><strong>4. Qiyas (Analogy):</strong> Extending a ruling to new situations based on shared effective cause (Illah).</li> + <li><strong>Secondary Methods:</strong> Istihsan (juristic preference), Istislah (public interest), Urf (custom), Darurah (necessity).</li> + </ul> + + <p><strong>Five Categories of Rulings (Ahkam al-Khamsah):</strong></p> + <ul> + <li><strong>Wajib/Fard (Obligatory):</strong> Required by Sharia; reward for compliance, punishment for omission (e.g., Prayer, Zakat).</li> + <li><strong>Mandub (Recommended/Sunnah):</strong> Encouraged but not required; reward if done, no punishment if omitted (e.g., voluntary fasting, extra prayers).</li> + <li><strong>Mubah (Permissible/Neutral):</strong> Neither required nor forbidden; neither rewarded nor punished (e.g., eating halal food, choice of profession).</li> + <li><strong>Makruh (Disliked):</strong> Discouraged but not forbidden; not rewarded if done, not severely punished if omitted (e.g., excessive divorce, unusual meats).</li> + <li><strong>Haram (Forbidden):</strong> Prohibited by Sharia; sin if performed, reward for avoidance (e.g., pork, alcohol, theft, interest/Riba).</li> + </ul> + + <p><strong>Four Schools of Islamic Law (Madhabs):</strong></p> + <ul> + <li><strong>Hanafi (d. 150 AH/767 CE):</strong> Most widely practiced (~40% of Muslims); emphasizes reason and scholarly preference (Istihsan).</li> + <li><strong>Maliki (d. 179 AH/795 CE):</strong> Prominent in North Africa, West Africa; considers custom and public interest (Maslaha).</li> + <li><strong>Shafi'i (d. 204 AH/820 CE):</strong> Widespread in Southeast Asia, Egypt, Jordan; systematic approach to Qiyas (analogy).</li> + <li><strong>Hanbali (d. 241 AH/855 CE):</strong> More literal interpretation; popular in Saudi Arabia; stricter standards for Qiyas.</li> + </ul> + + <p><strong>Major Areas of Sharia Law:</strong></p> + <ul> + <li><strong>Ibadah (Worship):</strong> Prayer, fasting, pilgrimage, ritual purity.</li> + <li><strong>Muamalat (Transactions):</strong> Contracts, commerce, inheritance, wills, partnerships.</li> + <li><strong>Nikah (Family Law):</strong> Marriage, divorce, custody, maintenance, inheritance.</li> + <li><strong>Jinayah (Criminal Law):</strong> Hudud (fixed punishments), Tazir (discretionary punishments), Qisas (retaliation), Diya (blood money).</li> + <li><strong>Siyasah (Constitutional/Political Law):</strong> Government structure, rights, duties, public order.</li> + </ul> + + <p><strong>Key Principles:</strong></p> + <ul> + <li><strong>Maslaha (Public Welfare):</strong> Rulings serve community benefit.</li> + <li><strong>Darurah (Necessity):</strong> Forbidden acts become permissible in life-threatening situations.</li> + <li><strong>Taysir (Facilitation):</strong> Sharia aims for ease, not hardship.</li> + <li><strong>Equality & Justice:</strong> Core to all rulings; protects rights of all members of society.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Haram & Wajib in Practice --> + <h2 class="section-title"> + <i class="bi bi-exclamation-triangle"></i> Haram & Wajib in Practice + </h2> + <div class="row"> + <!-- Haram (Forbidden) --> + <div class="col-lg-6 col-md-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-x-circle"></i> + <span class="toggle-term"> + <span class="en">Haram (Forbidden)</span> + <span class="ar">حرام</span> + </span> + </h5> + <p>Acts strictly prohibited by Sharia; performing them is sinful; avoiding them is rewarded.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseHaram" aria-expanded="false" aria-controls="collapseHaram"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseHaram"> + <p><strong>Definition & Consequences:</strong></p> + <ul> + <li>Explicitly forbidden in Quran or Sunnah; clear Quranic language: "Haram" (forbidden), "Don't approach," "Prohibited."</li> + <li>Commission is sinful and subject to punishment (in afterlife or sometimes Dunya/worldly consequences).</li> + <li>Avoidance is rewarded; demonstrates obedience to God and piety (Taqwa).</li> + <li>No excuse or justification makes Haram permissible except in life-threatening necessity (Darurah).</li> + </ul> + + <p><strong>Haram Foods (Haraam al-At'ima):</strong></p> + <ul> + <li><strong>Pork & Swine:</strong> Explicitly forbidden in Quran 2:173, 5:3, 16:115.</li> + <li><strong>Blood:</strong> Flowing blood forbidden; drained meat permissible.</li> + <li><strong>Carrion (Maitah):</strong> Dead animals not slaughtered according to Islamic method.</li> + <li><strong>Slaughtered to Idols:</strong> Animals dedicated to non-Islamic deities.</li> + <li><strong>Improperly Slaughtered Animals:</strong> Without invoking God's name or incorrect method.</li> + <li><strong>Predatory Animals & Birds:</strong> Lions, tigers, eagles, hawks (have claws for hunting).</li> + <li><strong>Intoxicants (Khamr):</strong> Alcohol in any form; all types forbidden (wine, beer, spirits); even traces in food.</li> + </ul> + + <p><strong>Haram Actions (Behavior & Conduct):</strong></p> + <ul> + <li><strong>Murder & Killing:</strong> Without justified cause; forbidden except in self-defense or prescribed legal punishment.</li> + <li><strong>Theft (Sariqah):</strong> Taking someone's property without permission; subject to Hadd punishment (cutting hand).</li> + <li><strong>Adultery & Fornication (Zina):</strong> Sexual relations outside marriage; subject to severe punishment (100 lashes for unmarried, stoning for married).</li> + <li><strong>False Testimony (Shahada al-Zur):</strong> Lying under oath; major sin and source of injustice.</li> + <li><strong>Riba (Usury/Interest):</strong> Lending money with interest-bearing returns; forbidden in all forms; Quran strongly condemns (2:275-279).</li> + <li><strong>Gambling (Maisir):</strong> Games of chance involving money; Quran 2:219 forbids.</li> + <li><strong>Sorcery & Magic (Sihr):</strong> Forbidden except for beneficial knowledge; great sin.</li> + <li><strong>Lying (Kidhab):</strong> Deliberately deceiving others; contradicts Islamic ethics.</li> + <li><strong>Backbiting (Ghibah):</strong> Speaking ill of others behind their back, even if true.</li> + <li><strong>Slander & False Accusations (Buhtaan):</strong> Accusing someone falsely of shameful acts without evidence.</li> + </ul> + + <p><strong>Haram in Worship:</strong></p> + <ul> + <li><strong>Shirk (Associating Partners):</strong> Most serious sin; unforgivable if died without repenting.</li> + <li><strong>Intentional Disrespect of Quran:</strong> Desecrating the holy text.</li> + <li><strong>False Prayer/Ritual:</strong> Performing prayer without proper intention (Niyyah) or respect.</li> + <li><strong>Breaking Oaths Lightly:</strong> Making vows casually and breaking them.</li> + </ul> + + <p><strong>Haram in Family & Relationships:</strong></p> + <ul> + <li><strong>Incest (Haraam al-Nisbah):</strong> Relations with close relatives (parents, siblings, grandparents, aunts, uncles).</li> + <li><strong>Disrespecting Parents:</strong> Especially in old age; major sin.</li> + <li><strong>Abandoning Family:</strong> Cutting off ties with relatives (Silat al-Rahim).</li> + </ul> + + <p><strong>Haram Financial Practices:</strong></p> + <ul> + <li><strong>Fraud & Deception in Trade:</strong> Cheating customers, false advertising, hidden defects.</li> + <li><strong>Monopoly & Price Manipulation:</strong> Artificially controlling prices to harm people.</li> + <li><strong>Bribery (Ruwah):</strong> Offering gifts to corrupt officials or judges.</li> + </ul> + + <p><strong>Repentance from Haram (Tawbah):</strong></p> + <ul> + <li>Sincere repentance erases sin; Quran 4:110: "Whoever commits evil and then repents, Allah is Forgiving."</li> + <li>Requirements: Sincerely regret action, cease immediately, make amends if wronged others, firm resolve not to repeat.</li> + <li>Even grave sins forgiven except Shirk (unless repent before death); God's mercy is limitless.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Wajib (Obligatory) --> + <div class="col-lg-6 col-md-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-check-circle"></i> + <span class="toggle-term"> + <span class="en">Wajib (Obligatory)</span> + <span class="ar">واجب</span> + </span> + </h5> + <p>Acts required by Sharia; performing them is rewarded; omitting them is sinful.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseWajib" aria-expanded="false" aria-controls="collapseWajib"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseWajib"> + <p><strong>Definition & Conditions:</strong></p> + <ul> + <li>Explicitly required in Quran or Sunnah using imperative language: "Do," "Must," "Obligatory."</li> + <li>Applies to all Muslims meeting specific criteria (sane, adult, capable, appropriate circumstances).</li> + <li>Omission is sinful and subject to divine punishment if done deliberately.</li> + <li>Performance is rewarded; demonstrates submission to God's will.</li> + <li>Obligation can vary based on capability and circumstance; exceptions apply for illness, travel, etc.</li> + </ul> + + <p><strong>The Five Pillars (Al-Arkan al-Khamsah) - Core Wajib:</strong></p> + <ul> + <li><strong>1. Shahada:</strong> Declaration of faith; foundation and prerequisite for all other obligations.</li> + <li><strong>2. Salah:</strong> Five daily prayers; foundational act of worship; timing, direction, and movements prescribed.</li> + <li><strong>3. Zakat:</strong> Annual alms of 2.5% on certain wealth; obligation to aid the poor.</li> + <li><strong>4. Sawm:</strong> Fasting during Ramadan month; purification of soul and discipline.</li> + <li><strong>5. Hajj:</strong> Pilgrimage to Mecca; once in lifetime if physically and financially capable.</li> + </ul> + + <p><strong>Wajib in Prayer (Wajibiyan al-Salah):</strong></p> + <ul> + <li><strong>Takbir al-Ihram:</strong> Opening "Allahu Akbar" (God is Greatest); begins prayer state.</li> + <li><strong>Standing (Qiyam):</strong> Standing upright during prayer (unless unable).</li> + <li><strong>Recitation of Quran:</strong> Minimum Al-Fatiha (Opening Chapter) in each prayer unit.</li> + <li><strong>Ruku (Bowing):</strong> Bowing with hands on knees, praising God.</li> + <li><strong>Sujud (Prostration):</strong> Full prostration with forehead touching ground.</li> + <li><strong>Tashahud:</strong> Sitting position reciting Islamic testimony at end of prayer.</li> + <li><strong>Proper Sequence:</strong> Movements must follow prescribed order.</li> + </ul> + + <p><strong>Wajib in Daily Life:</strong></p> + <ul> + <li><strong>Obedience to God (Tawah):</strong> Following Quran and Sunnah in all matters.</li> + <li><strong>Honoring Parents:</strong> Respect, kindness, providing support in old age; Quran emphasizes this repeatedly.</li> + <li><strong>Truthfulness (Sidq):</strong> Speaking truth in all dealings and transactions.</li> + <li><strong>Fulfilling Promises & Covenants (Wafaa bi-al-Ahd):</strong> Keeping word; reliability essential to Islamic ethics.</li> + <li><strong>Establishing Justice (Qist):</strong> Fairness in all dealings with others; being just with employees, business partners, family.</li> + <li><strong>Promoting Good (Amr bi-al-Maruf):</strong> Commanding/encouraging what is right and beneficial.</li> + <li><strong>Forbidding Evil (Nahi an-al-Munkar):</strong> Discouraging and preventing wrongdoing; done with wisdom and kindness.</li> + <li><strong>Repaying Debts:</strong> Fulfilling financial and other obligations.</li> + <li><strong>Good Treatment of Spouses:</strong> Kindness, support, maintaining household harmony.</li> + </ul> + + <p><strong>Wajib in Family & Relationships:</strong></p> + <ul> + <li><strong>Providing for Family:</strong> Husband obligated to provide maintenance (Nafaqah) for wife and children.</li> + <li><strong>Educating Children:</strong> Teaching Islamic knowledge, values, skills for living.</li> + <li><strong>Visiting Sick Family:</strong> Checking on health and welfare of relatives.</li> + <li><strong>Maintaining Family Ties:</strong> Regular contact and support (Silat al-Rahim).</li> + <li><strong>Inheritance Distribution:</strong> Following prescribed Islamic inheritance laws; cannot deny rightful heirs.</li> + </ul> + + <p><strong>Wajib in Financial Matters:</strong></p> + <ul> + <li><strong>Fair Pricing:</strong> Not exploiting customers; honest representation of goods.</li> + <li><strong>Transparent Transactions:</strong> Full disclosure in contracts; no hidden terms.</li> + <li><strong>Honoring Contracts:</strong> Fulfilling terms of all agreements completely.</li> + <li><strong>Zakat Payment:</strong> Annual mandatory alms on qualifying wealth.</li> + <li><strong>Hajj Expenses:</strong> If capable, saving and preparing for Hajj pilgrimage.</li> + </ul> + + <p><strong>Wajib in Knowledge & Belief:</strong></p> + <ul> + <li><strong>Seeking Islamic Knowledge (Talab al-Ilm):</strong> Learning Quran, Sunnah, and faith principles.</li> + <li><strong>Believing in Core Doctrines:</strong> The six articles of faith (Six Beliefs/Iman).</li> + <li><strong>Pondering Creation (Taddabur):</strong> Reflecting on God's signs and wisdom in the universe.</li> + <li><strong>Teaching Others:</strong> Sharing Islamic knowledge; "Convey from me, even if a single verse" (Hadith).</li> + </ul> + + <p><strong>Wajib in Specific Situations:</strong></p> + <ul> + <li><strong>During Illness:</strong> Prayer still Wajib but can be modified (sitting, lying down if necessary).</li> + <li><strong>During Travel:</strong> Prayers still Wajib; can shorten (2 units instead of 4) and combine prayers.</li> + <li><strong>Menstruation:</strong> Women exempt from prayer/fasting during menstrual period; these days made up after.</li> + <li><strong>Pregnancy/Breastfeeding:</strong> Women can delay fasting; make up days later.</li> + <li><strong>Age Requirements:</strong> Wajib obligations begin at puberty (Bulugh); applied gradually for children.</li> + </ul> + + <p><strong>Differences in Schools (Madhabs) on Wajib:</strong></p> + <ul> + <li>Core Wajib (Five Pillars) agreed upon universally.</li> + <li>Some differences in subsidiary obligations (e.g., whether Qunut in Fajr prayer is Wajib - varies by school).</li> + <li>Schools differ on whether certain actions are Wajib or Mandub (Recommended) based on textual interpretation.</li> + <li>Muslims can follow any school's view; all are valid.</li> + </ul> + + <p><strong>Consequences of Neglecting Wajib:</strong></p> + <ul> + <li>Deliberate omission is major sin; weakens faith and disconnects from God.</li> + <li>Repeated neglect may lead to spiritual emptiness and moral decline.</li> + <li>Negligence in Wajib obligations raises questions about sincerity of faith.</li> + <li>Repentance (Tawbah), catching up (making up missed prayers/fasts), and recommitment restore standing.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Holy Days & Calendar --> + <h2 class="section-title"> + <i class="bi bi-calendar-event"></i> Holy Days & Islamic Calendar + </h2> + <div class="row"> + <!-- Hijri Calendar --> + <div class="col-lg-6 col-md-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-calendar"></i> + <span class="toggle-term"> + <span class="en">Islamic Lunar Calendar (Hijri)</span> + <span class="ar">التقويم الهجري</span> + </span> + </h5> + <p>12 lunar months; approximately 354 days per year. No leap months.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseCalendar" aria-expanded="false" aria-controls="collapseCalendar"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseCalendar"> + <ul> + <li><strong>12 Months:</strong> Muharram, Safar, Rabi' al-Awwal, Rabi' al-Thani, Jumada al-Awwal, Jumada al-Thani, Rajab, Sha'ban, Ramadan, Shawwal, Dhu al-Qi'dah, Dhu al-Hijjah.</li> + <li><strong>Year Zero:</strong> Year 1 AH (After Hijra) = 622 CE (Migration to Medina).</li> + <li><strong>Seasons Shift:</strong> Islamic months move backward ~11 days each Gregorian year.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Major Holidays --> + <div class="col-lg-6 col-md-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-gift"></i> + <span class="toggle-term"> + <span class="en">Major Islamic Holidays</span> + <span class="ar">الأعياد الإسلامية</span> + </span> + </h5> + <p>Celebrations marking significant religious occasions and spiritual milestones.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseHolidays" aria-expanded="false" aria-controls="collapseHolidays"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseHolidays"> + <ul> + <li><strong>Eid al-Fitr (Shawwal 1):</strong> Festival of Breaking the Fast; marks end of Ramadan.</li> + <li><strong>Eid al-Adha (Dhul-Hijjah 10):</strong> Festival of Sacrifice; commemorates Abraham's obedience; during Hajj season.</li> + <li><strong>Islamic New Year (Muharram 1):</strong> Beginning of new lunar year.</li> + <li><strong>Mawlid al-Nabi (Rabi' al-Awwal 12):</strong> Birthday of Prophet Muhammad (commemorated in many Muslim-majority countries).</li> + <li><strong>Ashura (Muharram 9-10):</strong> Commemorates various historical events; significant in Shia tradition.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Lifecycle & Rituals --> + <h2 class="section-title"> + <i class="bi bi-heart-handshake"></i> Lifecycle & Rituals + </h2> + <div class="row"> + <!-- Birth --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-suit-heart"></i> + <span class="toggle-term"> + <span class="en">Birth (Mawlid)</span> + <span class="ar">المولود</span> + </span> + </h5> + <p>Islamic rituals welcoming and naming a newborn child.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseBirth" aria-expanded="false" aria-controls="collapseBirth"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseBirth"> + <ul> + <li><strong>Adhan:</strong> Call to prayer whispered in baby's right ear at birth.</li> + <li><strong>Tahnik:</strong> A small amount of chewed date placed in baby's mouth.</li> + <li><strong>Aqiqah:</strong> Animal sacrifice (on 7th day for boys, 14th for girls) and formal naming ceremony.</li> + <li><strong>Circumcision (Khitan):</strong> For boys, typically performed after one week.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Marriage --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-rings"></i> + <span class="toggle-term"> + <span class="en">Marriage (Nikah)</span> + <span class="ar">النكاح</span> + </span> + </h5> + <p>Civil contract between two consenting adults; not a sacrament.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseMarriage" aria-expanded="false" aria-controls="collapseMarriage"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseMarriage"> + <ul> + <li><strong>Essentials:</strong> Consent of both parties, witnesses, and Mahr (gift from groom to bride).</li> + <li><strong>Ijab & Qabul:</strong> Offer and acceptance ceremony.</li> + <li><strong>Walima:</strong> Wedding feast and celebration (Sunnah).</li> + <li><strong>Fiqh Principles:</strong> Marriage is a bond of mutual rights and responsibilities.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Death & Funeral --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-flower1"></i> + <span class="toggle-term"> + <span class="en">Death & Funeral (Janazah)</span> + <span class="ar">الجنازة</span> + </span> + </h5> + <p>Islamic funeral rites and burial practices honoring the deceased.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseDeath" aria-expanded="false" aria-controls="collapseDeath"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseDeath"> + <ul> + <li><strong>Ghusl:</strong> Ritual washing of the body by same-gender family/community members.</li> + <li><strong>Kafan:</strong> Shrouding in simple white cloth (no coffin required).</li> + <li><strong>Salat al-Janazah:</strong> Communal funeral prayer for the deceased.</li> + <li><strong>Burial:</strong> As soon as possible; facing Mecca; in a grave in the ground.</li> + <li><strong>Cremation:</strong> Strictly forbidden (Haram).</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Community Structure & Leadership --> + <h2 class="section-title"> + <i class="bi bi-people"></i> Community Structure + </h2> + <div class="row"> + <!-- Ummah --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-globe"></i> + <span class="toggle-term"> + <span class="en">The Ummah</span> + <span class="ar">الأمة</span> + </span> + </h5> + <p>The global community of believers united by faith in Islam.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseUmmah" aria-expanded="false" aria-controls="collapseUmmah"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseUmmah"> + <ul> + <li>Transcends national, ethnic, and cultural boundaries.</li> + <li>Approximately 1.8+ billion Muslims worldwide.</li> + <li>Concept emphasizes unity and mutual responsibility (Takaful).</li> + <li>Verse: "And this Ummah of yours is one Ummah" (Quran 21:92).</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Mosque --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-building"></i> + <span class="toggle-term"> + <span class="en">The Mosque (Masjid)</span> + <span class="ar">المسجد</span> + </span> + </h5> + <p>Place of worship and community center for Muslims.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseMosque" aria-expanded="false" aria-controls="collapseMosque"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseMosque"> + <ul> + <li><strong>Mihrab:</strong> Niche indicating direction of prayer toward Mecca (Qibla).</li> + <li><strong>Minbar:</strong> Pulpit for the Imam to deliver sermons (Khutbah).</li> + <li><strong>Minaret:</strong> Tower from which Adhan (call to prayer) is announced.</li> + <li><strong>Ablution Area (Wudu):</strong> Place for ritual purification before prayer.</li> + <li><strong>Social Functions:</strong> Education, social services, community gathering.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Leadership --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-person-badge"></i> + <span class="toggle-term"> + <span class="en">Religious Leadership</span> + <span class="ar">القيادة الدينية</span> + </span> + </h5> + <p>Key roles in mosque and Islamic community leadership.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseLeadership" aria-expanded="false" aria-controls="collapseLeadership"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseLeadership"> + <ul> + <li><strong>Imam:</strong> Prayer leader; leads congregational prayers; usually most knowledgeable community member.</li> + <li><strong>Muezzin (Mu'adhdhin):</strong> Caller to prayer; announces Adhan five times daily.</li> + <li><strong>Ulama:</strong> Religious scholars and jurists; experts in Islamic sciences.</li> + <li><strong>Mufti:</strong> Jurisconsult who issues Fatwas (non-binding legal opinions).</li> + <li><strong>Qadi:</strong> Islamic judge; applies Sharia law in legal disputes.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Major Branches --> + <h2 class="section-title"> + <i class="bi bi-diagram-3"></i> Major Branches of Islam + </h2> + <div class="row"> + <!-- Sunni --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <span class="toggle-term"> + <span class="en">Sunni Islam (~90%)</span> + <span class="ar">السنة</span> + </span> + </h5> + <p>"People of the Sunnah and Community"; largest branch of Islam.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSunni" aria-expanded="false" aria-controls="collapseSunni"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseSunni"> + <ul> + <li><strong>Leadership:</strong> Caliphate system; leadership determined by community/consensus (Ijma').</li> + <li><strong>Schools of Law (Madhabs):</strong> Hanafi, Maliki, Shafi'i, Hanbali.</li> + <li><strong>Belief:</strong> Accept Quran and Sunnah as foundational; follow established jurisprudence.</li> + <li><strong>Scholars:</strong> Majority of Muslim scholars and traditional Islamic institutions.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Shia --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <span class="toggle-term"> + <span class="en">Shia Islam (~10%)</span> + <span class="ar">الشيعة</span> + </span> + </h5> + <p>"Followers/Party of Ali"; emphasize leadership from Prophet's family (Ahl al-Bayt).</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseShia" aria-expanded="false" aria-controls="collapseShia"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseShia"> + <ul> + <li><strong>Imamah:</strong> Belief in divinely guided Imams from Prophet's family.</li> + <li><strong>Largest Branch:</strong> Twelver Shia (Ithna'ashari) - believe in 12 Imams.</li> + <li><strong>Other Branches:</strong> Ismaili (Sevener), Zaydi (Fiver).</li> + <li><strong>Key Practices:</strong> Mourning rituals (Ashura), reverence for Ali and Prophet's descendants.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Sufism --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card"> + <div class="card-body"> + <h5> + <i class="bi bi-heart-fill"></i> + <span class="toggle-term"> + <span class="en">Sufism (Tasawwuf)</span> + <span class="ar">التصوف</span> + </span> + </h5> + <p>Mystical dimension of Islam; emphasizes inner spiritual development and closeness to Allah.</p> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSufism" aria-expanded="false" aria-controls="collapseSufism"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseSufism"> + <ul> + <li><strong>Approach:</strong> Can be Sunni or Shia; focuses on inward spirituality.</li> + <li><strong>Dhikr (Remembrance):</strong> Repetition of God's names and attributes for spiritual purification.</li> + <li><strong>Tariqas (Orders):</strong> Naqshbandi, Qadiri, Shadhili, and others; organized spiritual communities.</li> + <li><strong>Goal:</strong> Purification of the heart (Tazkiyah) and direct experience of God's presence.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Key History --> + <h2 class="section-title"> + <i class="bi bi-clock-history"></i> Key Historical Events + </h2> + <div class="row"> + <div class="col-lg-12"> + <div class="info-card"> + <div class="card-body"> + <h5>Timeline of Islam</h5> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseHistory" aria-expanded="false" aria-controls="collapseHistory"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseHistory"> + <ul> + <li><strong>570 CE:</strong> Birth of Muhammad ibn Abdullah in Mecca.</li> + <li><strong>610 CE:</strong> First revelation in Cave of Hira; beginning of prophecy.</li> + <li><strong>613 CE:</strong> Public proclamation of Islam begins; meets Meccan resistance.</li> + <li><strong>622 CE:</strong> Hijra (Migration) to Medina; begins Islamic calendar (Year 1 AH).</li> + <li><strong>628 CE:</strong> Treaty of Hudaybiyyah; recognition of growing Muslim power.</li> + <li><strong>630 CE:</strong> Conquest of Mecca; Islam becomes dominant in Arabia.</li> + <li><strong>632 CE:</strong> Death of Prophet Muhammad; completion of revelation and religion.</li> + <li><strong>632-661 CE:</strong> Rashidun (Rightly Guided) Caliphs: Abu Bakr, Umar, Uthman, Ali.</li> + <li><strong>661-750 CE:</strong> Umayyad Caliphate; rapid territorial expansion (Spain to Central Asia).</li> + <li><strong>750-1258 CE:</strong> Abbasid Caliphate; Islamic Golden Age of science, mathematics, medicine, philosophy.</li> + <li><strong>1453:</strong> Ottoman Caliphate conquers Constantinople; spans three continents.</li> + <li><strong>1924:</strong> Ottoman Caliphate officially abolished.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <!-- Section: Common Arabic Terms --> + <h2 class="section-title"> + <i class="bi bi-chat-dots"></i> Common Islamic Terms & Phrases + </h2> + <div class="row"> + <div class="col-lg-12"> + <div class="info-card"> + <div class="card-body"> + <h5>Frequently Used Words & Expressions</h5> + <button type="button" class="btn btn-sm btn-outline-primary details-toggle" data-bs-toggle="collapse" data-bs-target="#collapseVocabulary" aria-expanded="false" aria-controls="collapseVocabulary"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="collapseVocabulary"> + <ul> + <li><strong>Halal / Haram:</strong> Permitted / Forbidden.</li> + <li><strong>Jihad:</strong> "Struggle"; inner spiritual effort or external defense of faith.</li> + <li><strong>Insha'Allah:</strong> "If God wills"; expression of God's will in future matters.</li> + <li><strong>Alhamdulillah:</strong> "Praise be to God"; expression of gratitude and acceptance.</li> + <li><strong>Bismillah:</strong> "In the name of God"; said before eating or beginning actions.</li> + <li><strong>Subhanallah:</strong> "Glory be to God"; expression of wonder and divine praise.</li> + <li><strong>Fatwa:</strong> Non-binding legal opinion issued by Islamic scholar (Mufti) on specific matter.</li> + <li><strong>Ummah:</strong> The global community of Muslims.</li> + <li><strong>Deen / Din:</strong> Religion, way of life, system of faith.</li> + <li><strong>Tawhid:</strong> Divine Unity; absolute monotheism; cornerstone of Islamic belief.</li> + <li><strong>Taqwa:</strong> God-consciousness; piety; fear and love of God.</li> + <li><strong>Ijma':</strong> Consensus of Islamic scholars on legal or theological matters.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + +</div> + +<footer class="container"> + <div class="row"> + <div class="col-12"> + <p> + <i class="bi bi-info-circle"></i> + Structure inspired by David Veksler's Judaism Cheatsheet. Perspective: Traditional Sunni Islamic teachings with references to Shia and Sufi traditions. For deeper study, consult traditional Islamic scholars and texts. + </p> + </div> + </div> +</footer> + +<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> +<script> + // Arabic Toggle Functionality + document.addEventListener('DOMContentLoaded', function() { + const arabicToggleSwitch = document.getElementById('arabicToggleSwitch'); + const toggleTerms = document.querySelectorAll('.toggle-term'); + + // Load saved preference from localStorage + const savedPreference = localStorage.getItem('arabicTogglePreference'); + if (savedPreference === 'true') { + arabicToggleSwitch.checked = true; + applyArabicToggle(true); + } + + // Add change event listener + arabicToggleSwitch.addEventListener('change', function() { + const isChecked = this.checked; + localStorage.setItem('arabicTogglePreference', isChecked); + applyArabicToggle(isChecked); + }); + + function applyArabicToggle(showArabic) { + toggleTerms.forEach(term => { + const enSpan = term.querySelector('.en'); + const arSpan = term.querySelector('.ar'); + + if (enSpan && arSpan) { + if (showArabic) { + enSpan.style.display = 'none'; + arSpan.style.display = 'inline'; + } else { + enSpan.style.display = 'inline'; + arSpan.style.display = 'none'; + } + } + }); + } + }); +</script> + +</body> +</html> \ No newline at end of file