Create buddhism.html
Ā· 1 year ago
543e2e7506f8c3926b706bf2b1d73a066d555f38
Parent:
5444a1237
1 file changed +889 ā0
- buddhism.html +889 ā0
Diff
--- /dev/null +++ b/buddhism.html @@ -0,0 +1,889 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Buddhist Principles Overview</title> + <!-- Bootstrap CSS --> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + <!-- Bootstrap Icons CSS --> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + <!-- Custom CSS --> + <style> + body { + background-color: #e9f0e9; /* Slightly softer green background */ + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + padding-top: 0; + padding-bottom: 20px; + font-size: 16px; /* Base font size */ + } + + .page-header { + background-color: #d8e8d8; + padding: 2rem 1.5rem 1.5rem 1.5rem; /* Adjusted padding */ + margin-bottom: 3rem; + text-align: center; + border-bottom: 1px solid #c8d8c8; + position: relative; /* For positioning the toggle */ + } + + .page-header h1 { + color: #2a4d2a; + font-weight: 300; + margin-bottom: 0.5rem; + } + + .page-header .lead { + color: #4a7c4a; + font-size: 1.1rem; + margin-bottom: 1rem; + } + + /* Pali Toggle Styles */ + .pali-toggle-container { + margin-top: 1rem; + font-size: 0.9em; + color: #4a7c4a; + } + .pali-toggle-container .form-check-label { + cursor: pointer; + } + + /* Add perspective for the 3D effect */ + .container { + perspective: 1500px; /* Creates the 3D space */ + } + + /* Info Card Base Styles */ + .info-card { + background-color: #ffffff; + border: 1px solid #d8e0d8; + border-radius: 0.35rem; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); + height: 100%; + display: flex; + flex-direction: column; + transform-style: preserve-3d; /* Keep for tilt effect */ + } + + + .info-card .card-body { + padding: 1.25rem; + flex-grow: 1; + transform: translateZ(20px); /* Slightly lift content within the card */ + } + + /* Info Card Title Styles */ + .info-card h5 { + color: #345c34; text-align: center; margin-bottom: 1rem; padding-bottom: 0.6rem; + border-bottom: 1px solid #eee; font-weight: 600; display: flex; + align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.3rem; /* Gap between title elements */ + } + + .info-card h5 .bi { /* Icon in title */ + font-size: 1.1em; color: #5a8c5a; order: -1; /* Order icon first */ + } + .info-card h5 a { color: inherit; text-decoration: none; } + .info-card h5 a:hover { text-decoration: underline; } + + /* Description Styles */ + .info-card p.description { + font-size: 0.9rem; color: #555; text-align: center; + margin-bottom: 1rem; font-style: italic; + } + + /* List Styles */ + .info-card ul, .info-card ol { padding-left: 1.5rem; margin-bottom: 0; } + /* Use padding-left on li for better alignment with icons/triggers */ + .info-card ul li, .info-card ol li { + margin-bottom: 0.5rem; color: #333; position: relative; + line-height: 1.5; padding-left: 5px; + } + .info-card ul li:last-child, .info-card ol li:last-child { margin-bottom: 0; } + + /* Styling for term toggling */ + .toggle-term .pi { font-style: italic; color: #555; } /* Slightly different style for Pali */ + .toggle-term .en, .toggle-term .pi { /* Ensure inline display works within links */ + display: inline; + } + li a .toggle-term .pi { /* Initially hide pali within links */ + display: none; + } + + + /* Tooltip styling for terms and links */ + .info-card a[data-bs-toggle="tooltip"], span[data-bs-toggle="tooltip"] { + border-bottom: 1px dotted #666; cursor: help; text-decoration: none; + } + /* Remove dotted border from links that ONLY contain a toggle term span, + let the span itself handle the dotting if needed */ + .info-card a:has(> span.toggle-term[data-bs-toggle="tooltip"]) { + /* border-bottom: none; */ /* Keep link underline behavior */ + } + + + .info-card a[data-bs-toggle="tooltip"]:hover, span[data-bs-toggle="tooltip"]:hover { + color: #0056b3; + border-bottom-color: #333; + text-decoration: none; + } + + /* General links within cards */ + .info-card li a { + color: #0d6efd; + text-decoration: none; /* Default link style */ + border-bottom: 1px dotted #666; /* Make links look like tooltipped spans */ + } + .info-card li a:hover { + color: #0a58ca; + text-decoration: none; /* Keep underline off */ + border-bottom: 1px dotted #333; /* Darken dots on hover */ + } + /* Specific override for glossary links etc. */ + .info-card li a[target="_blank"]:not([data-bs-toggle="tooltip"]){ + /* Styles already defined above should cover this */ + } + + + /* Noble Path Specific Styles */ + .noble-path-category { + font-weight: bold; margin-top: 0.8rem; margin-bottom: 0.3rem; + color: #4a7c4a; font-size: 0.95em; + } + .noble-path-list ul { + padding-left: 0.8rem; + } + + .row > * { + margin-bottom: 1.5rem; + } + + footer { + padding: 2rem 0; + font-size: 0.9em; + margin-top: 2rem; /* Added margin top */ + } + + /* --- Practice Pointer Styles --- */ + .practice-pointer-trigger { + color: #6c757d; text-decoration: none; font-size: 0.9em; + margin-left: 8px; + cursor: pointer; transition: color 0.2s ease; vertical-align: middle; + white-space: nowrap; + border-bottom: none; /* Remove dotted line from trigger */ + } + .practice-pointer-trigger:hover { color: #343a40; border-bottom: none; } + .practice-pointer-trigger .bi-plus-circle-fill { display: inline; } + .practice-pointer-trigger.collapsed .bi-plus-circle-fill { display: inline; } + .practice-pointer-trigger:not(.collapsed) .bi-plus-circle-fill { display: none; } + .practice-pointer-trigger .bi-dash-circle-fill { display: none; } + .practice-pointer-trigger:not(.collapsed) .bi-dash-circle-fill { display: inline; } + + .practice-pointer { + font-size: 0.85em; color: #495057; background-color: #f8f9fa; + border-left: 3px solid #ced4da; padding: 0.5rem 0.8rem; margin-top: 0.4rem; + margin-left: -0.5rem; margin-right: 0.5rem; border-radius: 0.2rem; + } + /* --- End Practice Pointer Styles --- */ + + /* --- Sutta Reference Styles --- */ + .sutta-ref-trigger { + color: #6c757d; font-size: 0.9em; cursor: help; + vertical-align: middle; transition: color 0.2s ease; + margin-left: 8px; + white-space: nowrap; + text-decoration: none; + border-bottom: none; + } + .sutta-ref-trigger:hover { color: #343a40; } + .popover-body a { display: block; margin-top: 5px; font-size: 0.9em; } + .popover { max-width: 300px; } + .popover-header { font-size: 0.95em; background-color: #f0f0f0; } + /* --- End Sutta Reference Styles --- */ + + </style> +</head> +<body> + + <header class="page-header"> + <div class="container"> + <h1 class="display-5"><i class="bi bi-brightness-high"></i> Core Buddhist Principles</h1> + <p class="lead">An overview of fundamental concepts and practices in Buddhism.</p> + <!-- Pali Toggle Switch --> + <div class="pali-toggle-container form-check form-switch d-flex justify-content-center align-items-center"> + <input class="form-check-input me-2" type="checkbox" role="switch" id="paliToggleSwitch"> + <label class="form-check-label" for="paliToggleSwitch">View PÄli Terms</label> + </div> + </div> + </header> + + <div class="container"> + <!-- Add data-tilt attribute to each card --> + <div class="row"> + + <!-- The Four Noble Truths --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-lightbulb"></i> + <a href="https://accesstoinsight.org/ptf/dhamma/sacca/index.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="The foundational teaching explaining suffering, its cause, its cessation, and the path to cessation.">The Four Noble Truths</a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="SN 56.11<br><small>Dhammacakkappavattana Sutta (Setting the Wheel of Dhamma in Motion)</small><br><a href='https://suttacentral.net/sn56.11' target='_blank' rel='noopener'>View on SuttaCentral</a>"></i> + </h5> + <p class="description">First and fundamental teaching about the nature of our experience and spiritual potential.</p> + <ol> + <li> + <a href="https://accesstoinsight.org/ptf/dhamma/sacca/sacca1/index.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="The reality of dissatisfaction, stress, and suffering inherent in conditioned existence."> + The existence of <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Pali term for suffering, stress, unsatisfactoriness."><span class="en">suffering</span><span class="pi">dukkha</span></span> + </a>. + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-truth1" role="button" aria-expanded="false" aria-controls="pp-truth1" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-truth1">Acknowledge the presence of dissatisfaction in life, from gross pain to subtle unease, without aversion or judgment.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ptf/dhamma/sacca/sacca2/index.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="The origin of suffering, identified as craving (tanha) rooted in ignorance."> + The <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Pali term for the origin or arising of suffering (craving)."><span class="en">origin</span><span class="pi">samudÄya</span></span> of suffering + </a> (craving). + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-truth2" role="button" aria-expanded="false" aria-controls="pp-truth2" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-truth2">Observe how wanting things to be different, clinging to pleasures, or pushing away discomfort fuels suffering. Identify craving (taį¹hÄ).</div> + </li> + <li> + <a href="https://accesstoinsight.org/ptf/dhamma/sacca/sacca3/index.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="The cessation of suffering, the possibility of liberation (Nibbana/Nirvana)."> + The <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Pali term for the cessation of suffering."><span class="en">cessation</span><span class="pi">nirodha</span></span> of suffering + </a> (NibbÄna). + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-truth3" role="button" aria-expanded="false" aria-controls="pp-truth3" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-truth3">Understand that liberation from suffering is possible through the complete fading and cessation of craving.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ptf/dhamma/sacca/sacca4/index.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="The Noble Eightfold Path - the way to end suffering."> + The <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Pali term for the path, specifically the Noble Eightfold Path."><span class="en">path</span><span class="pi">magga</span></span> for the cessation of suffering + </a> (The Noble Eightfold Path). + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-truth4" role="button" aria-expanded="false" aria-controls="pp-truth4" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-truth4">Engage with the Eightfold Path as the practical method to uproot craving and realize cessation.</div> + </li> + </ol> + </div> + </div> + </div> + + <!-- The Noble Eightfold Path --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body noble-path-list"> + <h5> + <i class="bi bi-compass"></i> + <a href="https://accesstoinsight.org/ptf/dhamma/sacca/sacca4/index.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="The practical guide to ethical conduct, mental discipline, and wisdom leading to liberation.">The Noble Eightfold Path</a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="SN 45.8<br><small>Magga-vibhanga Sutta (Analysis of the Path)</small><br><a href='https://suttacentral.net/sn45.8' target='_blank' rel='noopener'>View on SuttaCentral</a><hr style='margin: 3px 0;'><small>Also: MN 117 (Great Forty)</small>"></i> + </h5> + + <div class="noble-path-category" data-bs-toggle="tooltip" title="Ethical conduct: principles for moral behavior."> + <span class="toggle-term"><span class="en">Ethical Conduct</span><span class="pi">SÄ«la</span></span></div> + <ul> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#vaca" target="_blank" rel="noopener noreferrer"> + <span class="toggle-term"><span class="en">Right speech</span><span class="pi">SammÄ-vÄcÄ</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-right-speech" role="button" aria-expanded="false" aria-controls="pp-right-speech" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-right-speech">Practice speaking truthfully, kindly, beneficially, and harmoniously. Avoid lying, slander, harsh words, and idle chatter. Pause before speaking.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#kammanta" target="_blank" rel="noopener noreferrer"> + <span class="toggle-term"><span class="en">Right action</span><span class="pi">SammÄ-kammanta</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-right-action" role="button" aria-expanded="false" aria-controls="pp-right-action" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-right-action">Act ethically by refraining from killing, stealing, and sexual misconduct. Choose actions that support well-being and non-harming.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#ajiva" target="_blank" rel="noopener noreferrer"> + <span class="toggle-term"><span class="en">Right livelihood</span><span class="pi">SammÄ-ÄjÄ«va</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-right-livelihood" role="button" aria-expanded="false" aria-controls="pp-right-livelihood" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-right-livelihood">Engage in work that does not harm oneself or others. Avoid occupations involving deceit, exploitation, or trading in weapons, poisons, intoxicants, or living beings.</div> + </li> + </ul> + + <div class="noble-path-category" data-bs-toggle="tooltip" title="Mental discipline: cultivating concentration and mindfulness."> + <span class="toggle-term"><span class="en">Concentration</span><span class="pi">SamÄdhi</span></span></div> + <ul> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#vayama" target="_blank" rel="noopener noreferrer"> + <span class="toggle-term"><span class="en">Right effort</span><span class="pi">SammÄ-vÄyÄma</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-right-effort" role="button" aria-expanded="false" aria-controls="pp-right-effort" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-right-effort">Cultivate balanced diligence: prevent unskillful states, overcome existing ones, develop skillful ones, and maintain them. Avoid both laxity and excessive striving.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#samadhi" target="_blank" rel="noopener noreferrer"> + <span class="toggle-term"><span class="en">Right concentration</span><span class="pi">SammÄ-samÄdhi</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-right-concentration" role="button" aria-expanded="false" aria-controls="pp-right-concentration" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-right-concentration">Develop the ability to unify the mind on a meditation object (like the breath), leading to states of calm absorption (jhÄna) that support insight.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#sati" target="_blank" rel="noopener noreferrer"> + <span class="toggle-term"><span class="en">Right mindfulness</span><span class="pi">SammÄ-sati</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-right-mindfulness" role="button" aria-expanded="false" aria-controls="pp-right-mindfulness" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-right-mindfulness">Cultivate clear, non-judgmental present-moment awareness of body (kÄya), feelings (vedanÄ), mind-states (citta), and mental objects/phenomena (dhammÄ).</div> + </li> + </ul> + <div class="noble-path-category" data-bs-toggle="tooltip" title="Wisdom/Discernment: understanding reality correctly."> + <span class="toggle-term"><span class="en">Wisdom</span><span class="pi">PaƱƱÄ</span></span></div> + <ul> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#ditthi" target="_blank" rel="noopener noreferrer"> + <span class="toggle-term"><span class="en">Right view</span><span class="pi">SammÄ-diį¹į¹hi</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-right-view" role="button" aria-expanded="false" aria-controls="pp-right-view" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-right-view">Understand the Four Noble Truths, the law of kamma (karma), the Three Marks of Existence (impermanence, suffering, not-self), and dependent origination.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#sankappa" target="_blank" rel="noopener noreferrer"> + <span class="toggle-term"><span class="en">Right intention</span><span class="pi">SammÄ-saį¹ kappa</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-right-intention" role="button" aria-expanded="false" aria-controls="pp-right-intention" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-right-intention">Cultivate intentions rooted in renunciation (letting go of craving), goodwill (non-ill will, mettÄ), and harmlessness (non-cruelty, avihiį¹sÄ). Check your motivation before acting.</div> + </li> + </ul> + </div> + </div> + </div> + + <!-- The Three Poisons and Virtues --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <!-- Combined title links from v1 --> + <i class="bi bi-exclamation-octagon"></i> / <i class="bi bi-heart-fill"></i> + <a href="https://en.wikipedia.org/wiki/Kleshas_(Buddhism)#Three_poisons" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="The three root mental defilements or causes of suffering (Kleshas)."> + The Three <span class="toggle-term"><span class="en">Poisons</span><span class="pi">Kilesa</span></span> + </a> & + <a href="https://en.wikipedia.org/wiki/PÄramitÄ" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="Positive qualities or perfections cultivated to counteract poisons and progress on the path."> + Virtues + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta References" data-bs-content="Poisons: AN 3.69 (Mula Sutta - Roots)<br><a href='https://suttacentral.net/an3.69' target='_blank' rel='noopener'>AN 3.69 Link</a><hr style='margin: 3px 0;'>Virtues: MettÄ Sutta (Sn 1.8), etc.<br><a href='https://suttacentral.net/snp1.8' target='_blank' rel='noopener'>Sn 1.8 Link</a>"></i> + </h5> + <p class="description">The root causes of suffering and their antidotes.</p> + <ul> + <li> + <a href="https://en.wikipedia.org/wiki/Lobha_(Buddhism)" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Greed, attachment, desire for sensual pleasures or existence."> + <span class="toggle-term"><span class="en">Greed/lust</span><span class="pi">Lobha</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-greed" role="button" aria-expanded="false" aria-controls="pp-greed" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-greed">Observe the arising of desire. Notice its impermanent nature without needing to act on it immediately. Counter with thoughts of generosity, letting go, or contemplating unattractiveness (asubha).</div> + </li> + <li> + <a href="https://en.wikipedia.org/wiki/Dvesha_(Buddhism)" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Aversion, hatred, anger, ill will."> + <span class="toggle-term"><span class="en">Hatred/anger</span><span class="pi">Dosa</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-hatred" role="button" aria-expanded="false" aria-controls="pp-hatred" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-hatred">When anger or aversion arises, meet it with mindful breathing. Investigate its roots (often unmet expectations or perceived threats). Cultivate loving-kindness (MettÄ) as an antidote.</div> + </li> + <li> + <a href="https://en.wikipedia.org/wiki/Moha_(Buddhism)" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Ignorance, delusion, confusion about the true nature of reality."> + <span class="toggle-term"><span class="en">Delusion/ignorance</span><span class="pi">Moha</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-delusion" role="button" aria-expanded="false" aria-controls="pp-delusion" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-delusion">Challenge assumptions about self and reality. Question 'self'-centered views. Cultivate clarity through mindfulness and investigate the Three Marks of Existence and Dependent Origination.</div> + </li> + </ul> + <hr style="margin: 0.8rem 0;"> + <ul> + <li> + <a href="https://accesstoinsight.org/lib/authors/bodhi/waytoend.html#ch5" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="The virtue of giving, liberality, generosity; counteracts greed."> + <span class="toggle-term"><span class="en">Generosity</span><span class="pi">DÄna</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-generosity" role="button" aria-expanded="false" aria-controls="pp-generosity" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-generosity">Look for opportunities to give ā time, attention, material support, a smile, helpful advice. Notice the feeling of letting go and the joy it brings. Practice giving without expectation of return.</div> + </li> + <li> + <a href="https://accesstoinsight.org/lib/authors/buddharakkhita/metta.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Unconditional loving-kindness, friendliness; counteracts hatred."> + <span class="toggle-term"><span class="en">Lovingkindness</span><span class="pi">MettÄ</span></span> + </a> (Antidote to Hatred) + </li> + <li> + <a href="https://accesstoinsight.org/lib/authors/thanissaro/wisdom_keepers.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Direct understanding of reality, insight; counteracts delusion."> + <span class="toggle-term"><span class="en">Wisdom</span><span class="pi">PaƱƱÄ</span></span> + </a> (Antidote to Delusion) + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-wisdom-virtue" role="button" aria-expanded="false" aria-controls="pp-wisdom-virtue" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-wisdom-virtue">Reflect on the Three Marks of Existence in daily life. Investigate cause and effect (kamma). See how understanding impermanence, suffering, and not-self reduces clinging and aversion.</div> + </li> + </ul> + </div> + </div> + </div> + + <!-- The Five Precepts --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-shield-check"></i> + <a href="https://accesstoinsight.org/ptf/dhamma/sila/pancasila.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="The fundamental code of ethical conduct for lay Buddhists."> + The Five <span class="toggle-term"><span class="en">Precepts</span><span class="pi">PaƱcasÄ«la</span></span> + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="AN 8.39<br><small>Abhisanda Sutta (Rewards)</small><br><a href='https://suttacentral.net/an8.39' target='_blank' rel='noopener'>View on SuttaCentral</a><hr style='margin: 3px 0;'><small>Also widely discussed.</small>"></i> + </h5> + <p class="description" style="text-align: left; font-style: normal;">To live an ethical life, refrain from:</p> + <ol> + <li> + <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Abstaining from taking life."><span class="en">Killing</span><span class="pi">PÄį¹ÄtipÄtÄ veramaį¹Ä«</span></span> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-precept1" role="button" aria-expanded="false" aria-controls="pp-precept1" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-precept1">Extend compassion to all living beings, even insects. Cultivate respect for life in all its forms. Avoid intentionally causing death.</div> + </li> + <li> + <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Abstaining from taking what is not given."><span class="en">Stealing</span><span class="pi">AdinnÄdÄnÄ veramaį¹Ä«</span></span> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-precept2" role="button" aria-expanded="false" aria-controls="pp-precept2" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-precept2">Respect others' property and consent. Practice contentment with what you have. Be mindful of taking things unintentionally (e.g., office supplies, time).</div> + </li> + <li> + <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Abstaining from sexual behavior that harms oneself or others."><span class="en">Sexual misconduct</span><span class="pi">KÄmesumicchÄcÄra veramaį¹Ä«</span></span> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-precept3" role="button" aria-expanded="false" aria-controls="pp-precept3" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-precept3">Engage in sexual activity responsibly and ethically, avoiding harm, exploitation, coercion, or deceit towards yourself or others. Respect commitments and consent.</div> + </li> + <li> + <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Abstaining from lying, divisive speech, abusive speech, and idle chatter."><span class="en">False speech</span><span class="pi">MusÄvÄdÄ veramaį¹Ä«</span></span> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-precept4" role="button" aria-expanded="false" aria-controls="pp-precept4" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-precept4">Speak truthfully, kindly, constructively, and at the right time. Avoid gossip, slander, harsh words, and meaningless chatter that wastes time or causes division.</div> + </li> + <li> + <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Abstaining from substances causing heedlessness."><span class="en">Intoxicants causing heedlessness</span><span class="pi">SurÄmerayamajja-pamÄdaį¹į¹hÄnÄ veramaį¹Ä«</span></span> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-precept5" role="button" aria-expanded="false" aria-controls="pp-precept5" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-precept5">Avoid substances (alcohol, drugs) and excessive engagement in activities (e.g., entertainment, social media) that lead to carelessness, impair judgment, and hinder mindfulness development.</div> + </li> + </ol> + </div> + </div> + </div> + + <!-- The Three Kinds of Suffering --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-emoji-frown"></i> + <a href="https://en.wikipedia.org/wiki/Du%E1%B8%A5kha#Types" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="Classifications describing the different ways suffering or unsatisfactoriness is experienced."> + The Three Kinds of <span class="toggle-term"><span class="en">Suffering</span><span class="pi">Dukkha</span></span> + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="SN 38.14<br><small>Dukkha Sutta</small><br><a href='https://suttacentral.net/sn38.14' target='_blank' rel='noopener'>View on SuttaCentral</a><hr style='margin: 3px 0;'><small>Implied in SN 56.11</small>"></i> + </h5> + <p class="description" style="text-align: left; font-style: normal;">Understand Dukkha through these categories:</p> + <ol> + <li> + The suffering of <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Obvious physical and mental pain, anguish."><span class="en">pain</span><span class="pi">Dukkha-dukkhatÄ</span></span> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-dukkha1" role="button" aria-expanded="false" aria-controls="pp-dukkha1" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-dukkha1">Acknowledge physical and mental pain, loss, sadness, etc., without adding resistance or aversion, which creates secondary suffering ('the second arrow').</div> + </li> + <li> + The suffering of <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Stress caused by the impermanent nature of pleasant experiences."><span class="en">change</span><span class="pi">Vipariį¹Äma-dukkhatÄ</span></span> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-dukkha2" role="button" aria-expanded="false" aria-controls="pp-dukkha2" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-dukkha2">Reflect on how even pleasant experiences are temporary and dependence on them leads to subtle stress, anxiety, or disappointment when they inevitably change or cease.</div> + </li> + <li> + The suffering of <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="The inherent unsatisfactoriness of conditioned existence itself."><span class="en">conditionality</span><span class="pi">Saį¹ khÄra-dukkhatÄ</span></span> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-dukkha3" role="button" aria-expanded="false" aria-controls="pp-dukkha3" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-dukkha3">Contemplate the pervasive, underlying unsatisfactoriness of being subject to birth, aging, death, and the five aggregates (khandhas) which constitute conditioned existence and are inherently impermanent and not-self.</div> + </li> + </ol> + </div> + </div> + </div> + + <!-- 3 Marks of Existence --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-universal-access"></i> + <a href="https://en.wikipedia.org/wiki/Three_marks_of_existence" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="The three fundamental characteristics shared by all conditioned phenomena in the universe."> + 3 <span class="toggle-term"><span class="en">Marks of Existence</span><span class="pi">Tilakkhaį¹a</span></span> + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta References" data-bs-content="Dhp 277-279<br><small>Dhammapada Verses</small><br><a href='https://suttacentral.net/dhp277-295' target='_blank' rel='noopener'>View on SuttaCentral</a><hr style='margin: 3px 0;'>SN 22.59 (Anattalakkhana Sutta - Not-Self Characteristic)<br><a href='https://suttacentral.net/sn22.59' target='_blank' rel='noopener'>View on SuttaCentral</a>"></i> + </h5> + <p class="description" style="text-align: left; font-style: normal;">All conditioned phenomena are marked by:</p> + <ol> + <li> + <a href="https://en.wikipedia.org/wiki/Impermanence" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="All conditioned things are in a constant state of flux and change."> + <span class="toggle-term"><span class="en">Impermanence</span><span class="pi">Anicca</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-anicca" role="button" aria-expanded="false" aria-controls="pp-anicca" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-anicca">Observe the constant arising and passing away of thoughts, feelings, sounds, and physical sensations. Notice nothing is static; this reduces clinging and expectation.</div> + </li> + <li> + <a href="https://en.wikipedia.org/wiki/Du%E1%B8%A5kha" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Because things are impermanent, attachment leads to suffering."> + <span class="toggle-term"><span class="en">Suffering/Unsatisfactoriness</span><span class="pi">Dukkha</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-dukkha-mark" role="button" aria-expanded="false" aria-controls="pp-dukkha-mark" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-dukkha-mark">See how attachment to impermanent things inevitably leads to disappointment or stress when they change or disappear. Recognize the inherent unease in conditioned states.</div> + </li> + <li> + <a href="https://en.wikipedia.org/wiki/Anatt%C4%81" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="There is no permanent, unchanging self or soul in any phenomenon."> + <span class="toggle-term"><span class="en">Not-self</span><span class="pi">AnattÄ</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-anatta" role="button" aria-expanded="false" aria-controls="pp-anatta" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-anatta">Investigate experiences ā thoughts, body, feelings. Can you find a permanent, independent 'I' or 'self' controlling them? Notice phenomena arise and cease based on conditions, not a fixed self.</div> + </li> + </ol> + </div> + </div> + </div> + + <!-- The Seven Points of Posture --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-person-arms-up"></i> + <a href="https://en.wikipedia.org/wiki/Seven-point_posture_of_Vairochana" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="A traditional meditation posture designed to align the body and support mental clarity (also known as Vairochana posture).">The Seven Points of Posture</a> + </h5> + <p class="description" style="text-align: left; font-style: normal; font-size: 0.8em">(Note: Primarily from Tibetan traditions, not a specific Theravada Sutta list)</p> + <div class="row"> + <div class="col-6"><ul><li>Legs (Crossed)</li><li>Back (Straight)</li><li>Jaws (Relaxed)</li><li>Head (Slightly Tilted)</li></ul></div> + <div class="col-6"><ul><li>Arms (Hands in Lap)</li><li>Eyes (Gently Lowered)</li><li>Tongue (Touching Palate)</li><li>Shoulders (Level)</li></ul></div> + </div> + <div class="practice-pointer" style="margin-top: 10px;">This posture aids stability and alertness during meditation. Find a comfortable, balanced seat that you can maintain without strain. Adjust as needed for your body. The key is relaxed alertness.</div> + </div> + </div> + </div> + + <!-- The Five Hindrances --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-sign-stop"></i> + <a href="https://accesstoinsight.org/lib/authors/nyanaponika/hindrances.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="Mental obstacles that hinder concentration (samadhi) and wisdom (paƱƱÄ) in meditation and daily life."> + The Five <span class="toggle-term"><span class="en">Hindrances</span><span class="pi">NÄ«varaį¹a</span></span> + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="SN 46.51<br><small>Ahara Sutta (Food for Hindrances)</small><br><a href='https://suttacentral.net/sn46.51' target='_blank' rel='noopener'>View on SuttaCentral</a><hr style='margin: 3px 0;'><small>Also: AN 1.11-20</small>"></i> + </h5> + <p class="description">Mental obstacles that obscure clarity.</p> + <ol> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#kamacchanda" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Craving for sights, sounds, smells, tastes, or touch."> + <span class="toggle-term"><span class="en">Sensual desire</span><span class="pi">KÄma-chanda</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-hindrance-desire" role="button" aria-expanded="false" aria-controls="pp-hindrance-desire" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-hindrance-desire">Recognize sensual desire when it arises in meditation. Note it ('desire') and gently return focus to your meditation object (e.g., breath). Contemplate unattractiveness (asubha) or impermanence as antidotes.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#byapada" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Ill will, hostility, aversion, hatred towards others or experiences."> + <span class="toggle-term"><span class="en">Ill will</span><span class="pi">VyÄpÄda / ByÄpÄda</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-hindrance-illwill" role="button" aria-expanded="false" aria-controls="pp-hindrance-illwill" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-hindrance-illwill">Acknowledge aversion or ill will. Counteract it by deliberately cultivating thoughts of loving-kindness (MettÄ), even towards difficult people or sensations. Understand its harmful nature.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#thinamiddha" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Dullness, drowsiness, mental inertia, lack of energy."> + <span class="toggle-term"><span class="en">Sloth and torpor</span><span class="pi">ThÄ«na-middha</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-hindrance-sloth" role="button" aria-expanded="false" aria-controls="pp-hindrance-sloth" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-hindrance-sloth">Notice drowsiness or mental heaviness. Counteract with: brightening the mind (e.g., visualizing light, recalling teachings), adjusting posture, brisk walking meditation, or mindful energy cultivation.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#uddhacca" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Mental agitation, worry, inability to calm the mind."> + <span class="toggle-term"><span class="en">Restlessness and worry</span><span class="pi">Uddhacca-kukkucca</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-hindrance-restless" role="button" aria-expanded="false" aria-controls="pp-hindrance-restless" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-hindrance-restless">Recognize the agitated 'buzzing' mind or excessive remorse/worry. Gently bring attention back to the breath or body. Sometimes focusing on a slightly broader object helps. Cultivate calm and acceptance.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#vicikiccha" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Skeptical doubt, uncertainty about the path or teachings."> + <span class="toggle-term"><span class="en">Doubt</span><span class="pi">VicikicchÄ</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-hindrance-doubt" role="button" aria-expanded="false" aria-controls="pp-hindrance-doubt" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-hindrance-doubt">Acknowledge skeptical doubt about the practice, teachings, or teacher. Note it ('doubt'). Recall your motivation, trust the process based on evidence seen so far, investigate wisely, or seek clarification from reliable sources.</div> + </li> + </ol> + </div> + </div> + </div> + + <!-- The Four Metta Phrases --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-chat-heart"></i> + <a href="https://accesstoinsight.org/lib/authors/nanamoli/wheel007.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="Commonly used phrases in loving-kindness (Metta) meditation to cultivate feelings of goodwill.">The Four Metta Phrases</a> + </h5> + <p class="description" style="text-align: left; font-style: normal; font-size: 0.8em">(Common practice phrases derived from MettÄ Sutta)</p> + <ol><li>May I/you be free from danger</li><li>May I/you be happy</li><li>May I/you be healthy</li><li>May I/you live with ease</li></ol> + <div class="practice-pointer" style="margin-top: 10px;">Use these phrases sincerely in meditation, directing them towards yourself and others (see Six Stages of Metta). Feel the intention behind the words, letting the feeling of goodwill grow naturally. Modify phrases as needed.</div> + </div> + </div> + </div> + + <!-- The Five Remembrances --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-calendar-heart"></i> + <a href="https://accesstoinsight.org/tipitaka/an/an05/an05.057.than.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="Subjects for frequent reflection (Upajjhatthana Sutta) to cultivate wisdom and reduce attachment."> + The Five <span class="toggle-term"><span class="en">Remembrances</span><span class="pi">Abhiį¹hapaccavekkhaį¹a</span></span> + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="AN 5.57<br><small>Upajjhatthana Sutta</small><br><a href='https://suttacentral.net/an5.57' target='_blank' rel='noopener'>View on SuttaCentral</a>"></i> + </h5> + <p class="description">Subjects for frequent reflection.</p> + <ol> + <li> + I am subject to aging, I have not gone beyond aging. + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-rem1" role="button" aria-expanded="false" aria-controls="pp-rem1" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-rem1">Reflect on the inevitability of aging for yourself and others. How does this change your priorities? Use it to motivate practice and cultivate compassion, not despair.</div> + </li> + <li> + I am subject to illness, I have not gone beyond illness. + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-rem2" role="button" aria-expanded="false" aria-controls="pp-rem2" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-rem2">Acknowledge the fragility of health. Cultivate well-being now, but don't cling to it. Develop mental resilience for times of illness.</div> + </li> + <li> + I am subject to death, I have not gone beyond death. + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-rem3" role="button" aria-expanded="false" aria-controls="pp-rem3" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-rem3">Contemplate the certainty of death and the uncertainty of its time. Use this to focus on what truly matters and live meaningfully *now*. Reduces fear and procrastination.</div> + </li> + <li> + I will grow different, separate from all that is dear and appealing to me. + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-rem4" role="button" aria-expanded="false" aria-controls="pp-rem4" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-rem4">Reflect on the impermanence of relationships, possessions, status, and even your own body. Appreciate them now without clinging. Reduces suffering from loss.</div> + </li> + <li> + I am the owner of my <span class="toggle-term" data-bs-toggle="tooltip" data-bs-placement="top" title="Pali term for volitional action and its consequences."><span class="en">actions</span><span class="pi">kamma</span></span>, heir to my actions... Whatever I do, for good or for evil, to that will I fall heir. + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-rem5" role="button" aria-expanded="false" aria-controls="pp-rem5" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-rem5">Understand that your intentional actions (kamma) shape your future experiences. Focus on cultivating skillful actions (thoughts, words, deeds). Take responsibility for your choices.</div> + </li> + </ol> + </div> + </div> + </div> + + <!-- The Six Stages of Metta --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-arrow-repeat"></i> + <a href="https://www.lionsroar.com/how-to-practice-loving-kindness/" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="A common structure for practicing loving-kindness meditation, progressively extending goodwill outwards.">The Six Stages of Metta</a> + </h5> + <p class="description" style="text-align: left; font-style: normal; font-size: 0.8em">(Common practice structure, derived from commentaries like Visuddhimagga)</p> + <ol><li>Yourself</li><li>A good friend (or respected person)</li><li>A neutral person</li><li>A difficult person</li><li>All four (equally)</li><li>The entire universe (all beings)</li></ol> + <div class="practice-pointer" style="margin-top: 10px;">Systematically cultivate loving-kindness (MettÄ) using phrases or visualization. Start with yourself, then extend outwards, gradually breaking down barriers between self/other and like/dislike. Aim for impartial goodwill.</div> + </div> + </div> + </div> + + <!-- The Four Brahma-Viharas --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-hearts"></i> + <a href="https://accesstoinsight.org/lib/authors/nyanaponika/wheel006.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="The four 'sublime abodes' or 'divine states': boundless positive emotions to be cultivated."> + The Four <span class="toggle-term"><span class="en">Brahma-Viharas</span><span class="pi">BrahmavihÄra</span></span> + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="MN 7<br><small>Vatthupama Sutta (Simile of the Cloth)</small><br><a href='https://suttacentral.net/mn7' target='_blank' rel='noopener'>View on SuttaCentral</a><hr style='margin: 3px 0;'><small>Also: DN 13 (Tevijja Sutta)</small>"></i> + </h5> + <p class="description" style="text-align: left; font-style: normal;">Sublime Abodes / Divine States:</p> + <ol> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#metta" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Loving-kindness, friendliness, goodwill."> + <span class="toggle-term"><span class="en">Lovingkindness</span><span class="pi">MettÄ</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-metta-bv" role="button" aria-expanded="false" aria-controls="pp-metta-bv" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-metta-bv">Actively cultivate feelings of warmth, friendliness, and unconditional positive regard towards yourself and all beings, wishing them true happiness and freedom from hostility.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#karuna" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Compassion, empathy, wishing others free from suffering."> + <span class="toggle-term"><span class="en">Compassion</span><span class="pi">Karuį¹Ä</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-karuna-bv" role="button" aria-expanded="false" aria-controls="pp-karuna-bv" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-karuna-bv">Develop empathy for the suffering of others (and yourself). Cultivate the sincere wish and intention for suffering to end. Feel into others' pain without being overwhelmed; let it motivate action.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#mudita" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Sympathetic joy, rejoicing in others' happiness."> + <span class="toggle-term"><span class="en">Joy</span><span class="pi">MuditÄ</span></span> + </a> (Sympathetic Joy) + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-mudita-bv" role="button" aria-expanded="false" aria-controls="pp-mudita-bv" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-mudita-bv">Cultivate sympathetic joy ā genuinely rejoicing in the happiness, success, and good fortune of others, free from envy, comparison, or resentment.</div> + </li> + <li> + <a href="https://accesstoinsight.org/ati/glossary.html#upekkha" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Equanimity, mental balance, impartiality."> + <span class="toggle-term"><span class="en">Equanimity</span><span class="pi">UpekkhÄ</span></span> + </a> + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-upekkha-bv" role="button" aria-expanded="false" aria-controls="pp-upekkha-bv" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-upekkha-bv">Develop mental balance, stability, and impartiality towards all beings and changing life circumstances (gain/loss, praise/blame, pleasure/pain). See beings as heirs of their own kamma, responding wisely without attachment or aversion.</div> + </li> + </ol> + </div> + </div> + </div> + + <!-- The Eight Vicissitudes --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-arrow-down-up"></i> + <a href="https://accesstoinsight.org/tipitaka/an/an08/an08.006.than.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="The eight 'worldly winds' (Lokavipatti Sutta) - pairs of opposites that affect ordinary beings."> + The Eight <span class="toggle-term"><span class="en">Vicissitudes</span><span class="pi">Atthalokadhamma</span></span> + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="AN 8.6<br><small>Lokavipatti Sutta (Worldly Conditions)</small><br><a href='https://suttacentral.net/an8.6' target='_blank' rel='noopener'>View on SuttaCentral</a>"></i> + </h5> + <p class="description" style="text-align: left; font-style: normal;">Worldly Conditions experienced by all:</p> + <div class="row"> + <div class="col-6"><ol><li>Pleasure and pain</li><li>Gain and loss</li></ol></div> + <div class="col-6"><ol start="3"><li>Praise and blame</li><li>Fame and disrepute</li></ol></div> + </div> + <div class="practice-pointer" style="margin-top: 10px;">Recognize these pairs as natural parts of life, like winds blowing from different directions. Practice observing them with equanimity (UpekkhÄ), understanding their impermanence, without getting carried away by elation in gain/praise or despair in loss/blame.</div> + </div> + </div> + </div> + + <!-- The Three Jewels --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-gem"></i> + <a href="https://accesstoinsight.org/lib/authors/bodhi/wheel282.html" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="The three core objects of refuge for Buddhists, providing guidance and inspiration."> + The Three <span class="toggle-term"><span class="en">Jewels</span><span class="pi">Tiratana</span></span> + </a> + <i class="bi bi-book-half sutta-ref-trigger" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-title="Key Sutta Reference" data-bs-content="Khp 1<br><small>Saranagamana (Going for Refuge)</small><br><a href='https://suttacentral.net/khp1' target='_blank' rel='noopener'>View on SuttaCentral</a>"></i> + </h5> + <p class="description">The core objects of refuge and inspiration.</p> + <ul> + <li> + I take refuge in the + <a href="https://accesstoinsight.org/ati/glossary.html#buddha" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="The historical Buddha (Siddhartha Gotama) or the principle of enlightenment itself."> + <span class="toggle-term"><span class="en">Buddha</span><span class="pi">Buddha</span></span> + </a> (The Awakened One) + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-jewel1" role="button" aria-expanded="false" aria-controls="pp-jewel1" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-jewel1">Recall the qualities of the Buddha (wisdom, compassion, liberation) as inspiration and guidance for your own potential for awakening. Cultivate confidence in the path shown.</div> + </li> + <li> + I take refuge in the + <a href="https://accesstoinsight.org/ati/glossary.html#dhamma" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="The teachings of the Buddha; the truth or reality of the way things are."> + <span class="toggle-term"><span class="en">Dharma</span><span class="pi">Dhamma</span></span> + </a> (The Teachings/Truth) + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-jewel2" role="button" aria-expanded="false" aria-controls="pp-jewel2" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-jewel2">Trust the teachings as a reliable map to understanding reality and ending suffering. Study, reflect deeply, investigate through practice, and realize the truth for yourself.</div> + </li> + <li> + I take refuge in the + <a href="https://accesstoinsight.org/ati/glossary.html#sangha" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="The community of practitioners, especially monks and nuns, or the community of awakened beings (ariya sangha)."> + <span class="toggle-term"><span class="en">Sangha</span><span class="pi">Saį¹ gha</span></span> + </a> (The Community) + <a class="practice-pointer-trigger collapsed" data-bs-toggle="collapse" data-bs-target="#pp-jewel3" role="button" aria-expanded="false" aria-controls="pp-jewel3" title="Practice Pointer"><i class="bi bi-plus-circle-fill"></i><i class="bi bi-dash-circle-fill"></i></a> + <div class="collapse practice-pointer" id="pp-jewel3">Appreciate the support, guidance, and example of fellow practitioners (lay and monastic) committed to the path. Engage with the community for shared learning and encouragement. Recognize the value of the Ariya Sangha (noble ones).</div> + </li> + </ul> + </div> + </div> + </div> + + <!-- Five Rules of Leadership --> + <div class="col-lg-4 col-md-6 col-sm-12"> + <div class="info-card" data-tilt data-tilt-max="8" data-tilt-speed="400" data-tilt-perspective="1000" data-tilt-glare="false" data-tilt-scale="1.02"> + <div class="card-body"> + <h5> + <i class="bi bi-person-check"></i> + <a href="https://en.wikipedia.org/wiki/Mindful_leadership" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" title="Modern principles applying mindfulness and related concepts to effective leadership.">Five Rules of Leadership</a> + </h5> + <p class="description" style="text-align: left; font-style: normal; font-size: 0.8em">(Modern application, drawing parallels, not a specific Sutta list)</p> + <ol><li>Have a purpose (Relates to Right Intention)</li><li>Have a mission (Relates to Right Livelihood/Action)</li><li>Have a vision (Relates to Right View)</li><li>Set the tone (Relates to Ethical Conduct/Speech)</li><li>Be mindful (Relates to Right Mindfulness/Effort)</li></ol> + <div class="practice-pointer" style="margin-top: 10px;">Apply Buddhist principles like mindfulness (awareness of self/others/impact), ethical conduct (Sila), compassion (Karuna), wisdom (PaƱƱÄ), and equanimity (Upekkha) to leadership roles for greater effectiveness, resilience, and well-being for all involved.</div> + </div> + </div> + </div> + + + </div> <!-- /.row --> + </div> <!-- /.container --> + + <footer class="container text-center text-muted"> + <p>Ā© 2025 Buddhist Principles Overview. Information compiled from various sources including Access to Insight, SuttaCentral, Wikipedia, and common practice guides. Verify information with qualified teachers.</p> + </footer> + + <!-- Bootstrap JS Bundle (needed for tooltips, collapse, popovers) --> + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + + <!-- Vanilla-Tilt.js library --> + <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanilla-tilt.min.js"></script> + + <!-- Initialization Script --> + <script> + // Initialize Bootstrap Tooltips + var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl); + }); + + // Initialize Bootstrap Popovers (for Sutta references) + var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) + var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { + return new bootstrap.Popover(popoverTriggerEl, { trigger: 'hover focus', sanitize: false }) // Allow HTML in content + }) + + // Vanilla Tilt initializes automatically via data-tilt attributes + + // --- Pali Toggle Logic --- + const paliToggle = document.getElementById('paliToggleSwitch'); + const termsToToggle = document.querySelectorAll('.toggle-term'); + const listLinksWithToggle = document.querySelectorAll('li a > .toggle-term'); // Select toggle terms inside list item links + + function updateTermDisplay() { + const showPali = paliToggle.checked; + termsToToggle.forEach(termElement => { + const enSpan = termElement.querySelector('.en'); + const piSpan = termElement.querySelector('.pi'); + + if (enSpan && piSpan) { + // Tooltip handling: Find the closest ancestor with a tooltip OR the span itself + const elementWithTooltip = termElement.closest('[data-bs-toggle="tooltip"]') || termElement; + const tooltipInstance = bootstrap.Tooltip.getInstance(elementWithTooltip); + + if (showPali) { + enSpan.style.display = 'none'; + piSpan.style.display = 'inline'; // Use inline for Pali + // Disable tooltip if it exists and Pali is shown (to avoid showing Pali tooltip on English word) + if (tooltipInstance && elementWithTooltip === termElement) { + tooltipInstance.disable(); + } + // Special case for links: ensure link itself remains clickable + let parentLink = termElement.closest('a'); + if(parentLink){ parentLink.style.display = 'inline'; } + + + } else { + enSpan.style.display = 'inline'; // Use inline for English + piSpan.style.display = 'none'; + // Re-enable tooltip if it exists + if (tooltipInstance && elementWithTooltip === termElement) { + tooltipInstance.enable(); + } + // Ensure link remains clickable + let parentLink = termElement.closest('a'); + if(parentLink){ parentLink.style.display = 'inline'; } + } + } + }); + + // Ensure Pali terms within links are correctly hidden/shown initially and on toggle + listLinksWithToggle.forEach(termElement => { + const piSpan = termElement.querySelector('.pi'); + if (piSpan) { + piSpan.style.display = showPali ? 'inline' : 'none'; + } + }); + } + + paliToggle.addEventListener('change', updateTermDisplay); + + // Initial call to set the correct display based on checkbox state on load + updateTermDisplay(); + // --- End Pali Toggle Logic --- + + </script> + +</body> +</html> \ No newline at end of file