Create etz-chaim-tree-of-life.html
ยท 1 year ago
40f0e13294b346731de1001d4fd83793a5b775ab
Parent:
0764f2ad7
1 file changed +531 โ0
- etz-chaim-tree-of-life.html +531 โ0
Diff
--- /dev/null +++ b/etz-chaim-tree-of-life.html @@ -0,0 +1,531 @@ +<!DOCTYPE html> + +<html lang="en"> +<head> +<meta charset="UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<title>ืขืฅ ืืืื - Etz Chaim: A Gateway to Torah</title> + +<!-- Bootstrap CSS --> +<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> +<!-- Bootstrap Icons --> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> +<!-- Google Fonts --> +<link rel="preconnect" href="https://fonts.googleapis.com"> +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> +<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond:ital,wght@0,400;0,700;1,400&family=Noto+Sans+Hebrew:wght@400;700&display=swap" rel="stylesheet"> +<!-- Three.js --> +<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> + +<style> + body { + font-family: 'EB Garamond', serif; + background-color: #1a1a2e; /* Deep cosmic blue */ + color: #e0e0e0; /* Light grey for text */ + padding-top: 20px; + padding-bottom: 50px; + overflow-x: hidden; + } + .hebrew-text { font-family: 'Noto Sans Hebrew', sans-serif; font-size: 1.2em; } + h1, h2, h3, h4 { font-family: 'Cinzel', serif; color: #f2a365; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } + h2.accordion-header button { font-family: 'Cinzel', serif; } + .container-main { max-width: 1200px; margin: auto; position: relative; } + .tree-container { display: flex; justify-content: center; align-items: center; margin-bottom: 40px; height: 600px; background-color: rgba(10, 10, 20, 0.5); border-radius: 15px; box-shadow: 0 0 20px rgba(0,0,0,0.3); position: relative; overflow: hidden; } + #threejs-canvas-container { width: 100%; height: 100%; } + .sefirah-label { position: absolute; color: white; background: rgba(0,0,0,0.5); padding: 2px 5px; border-radius: 3px; font-size: 12px; pointer-events: none; text-shadow: 0 0 3px black; transform: translate(-50%, -130%); white-space: nowrap; z-index: 5; } + .sefirah-label .he { font-family: 'Noto Sans Hebrew', sans-serif; font-size: 14px; } + .sefirah-label .en { font-family: 'Cinzel', serif; font-size: 10px; } + .accordion-button { background-color: #2c3e50; color: #f2a365; } + .accordion-button:not(.collapsed) { background-color: #34495e; color: #f0c040; } + .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(242, 163, 101, 0.5); } + .accordion-body { background-color: #232a3f; color: #f0f0f0; font-size: 1.05em; line-height: 1.7; } + .accordion-body p, .accordion-body ul { margin-bottom: 1rem; } + .accordion-body strong { color: #f2a365; } + .accordion-body a { color: #88a2c4; text-decoration: none; border-bottom: 1px dotted #88a2c4; } + .accordion-body a:hover { color: #f2a365; border-bottom-style: solid; } + .accordion-item { border: 1px solid rgba(242, 163, 101, 0.3); } + .highlight-card { border: 2px solid #f2a365 !important; box-shadow: 0 0 15px #f2a365; } + .highlight-card .accordion-button { background-color: #f2a365 !important; color: #1a1a2e !important; } + .intro-text, .study-hook-section { font-size: 1.1em; line-height: 1.7; margin-bottom: 30px; text-align: justify; padding: 15px; background-color: rgba(255,255,255,0.02); border-left: 3px solid #f2a365; } + #controls3d { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 100; background: rgba(0,0,0,0.5); padding: 5px; border-radius: 5px; } + #controls3d button { background: #333; color: #f2a365; border: 1px solid #f2a365; padding: 5px 10px; margin: 0 5px; cursor: pointer; border-radius: 3px; font-family: 'Cinzel', serif; } + #controls3d button:hover, #controls3d button.active { background: #f2a365; color: #1a1a2e; } + .study-pathways h4 {font-size: 1.2em; margin-top:15px; margin-bottom:10px; color: #f0c040;} + .study-pathways ul { list-style-type: "\2728"; padding-left: 20px;} /* Sparkle bullet */ + .study-pathways li { margin-bottom: 8px;} +</style> + +</head> +<body> + +<div class="container container-main"> + <header class="text-center my-5"> + <h1><span class="hebrew-text">ืขืฅ ืืืื</span></h1> + <h2>Etz Chaim - A Gateway to Torah</h2> + </header> + + <div class="intro-text"> + <p>Welcome to the Etz Chaim, the Tree of Life. This sacred diagram offers a glimpse into the Divine architecture of creation and the flow of Divine energy. While rich in mystical meaning, its deepest truths are illuminated and brought to life through the dedicated study of Torah and the observance of its Mitzvot. As you explore each Sefirah, consider how its essence is reflected in the stories, laws, and wisdom of our tradition, inviting you to a deeper engagement with Jewish learning. Click on a Sefirah in the interactive diagram below or explore the descriptions to begin your journey.</p> + </div> + + <div class="tree-container"> + <div id="threejs-canvas-container"></div> + <div id="controls3d"> + <button id="toggleRotationBtn">Auto-Rotate</button> + </div> + </div> + + <div class="accordion" id="sefirotAccordion"> + <!-- Keter --> + <div class="accordion-item" id="card-keter"> + <h2 class="accordion-header" id="headingKeter"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKeter" aria-expanded="false" aria-controls="collapseKeter">1. Keter (ืืชืจ) - Crown</button></h2> + <div id="collapseKeter" class="accordion-collapse collapse" aria-labelledby="headingKeter" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Divine Will, Inspiration, The Infinite Light (<a href="https://en.wikipedia.org/wiki/Ohr" target="_blank">Ohr Ein Sof</a>). Keter is the highest Sefirah, representing the primordial emanation from the Infinite, the absolute potential that precedes actual existence. It is the source of all will (Ratzon) and delight (Taanug), beyond comprehension and often described as "Nothingness" (Ayin). [2, 4]</p> + <p><strong>Psychological Aspect:</strong> The deepest wellspring of motivation, pure faith (Emunah) beyond reason, sublime inspiration.</p> + <p><strong>Divine Name:</strong> Eheieh Asher Eheieh (ืืืื ืืฉืจ ืืืื - "I Am that I Am").</p> + <p><strong>Archangel:</strong> Metatron.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Keter mirrors the primordial Will for creation ("Let there be light") and the singular focus demanded by the Shema. It is the ultimate source from which all Mitzvot derive their Divine imperative.</p> + <ul> + <li>Explore the concept of <em>Ratzon HaShem</em> (God's Will) in Jewish thought. How does it inform our understanding of Divine commandments? See <a href="https://www.chabad.org/library/article_cdo/aid/904909/jewish/The-Thirteen-Principles-of-Faith.htm" target="_blank">Rambam's 13 Principles of Faith</a>.</li> + <li>Consider the Mitzvah of believing in God (the first of the Ten Commandments) as an expression of connecting to Keter's pure faith.</li> + <li>Reflect on how *kavanah* (intention) in performing Mitzvot connects our will to the Divine Will.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Chokhmah --> + <div class="accordion-item" id="card-chokhmah"> + <h2 class="accordion-header" id="headingChokhmah"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseChokhmah" aria-expanded="false" aria-controls="collapseChokhmah">2. Chokhmah (ืืืื) - Wisdom</button></h2> + <div id="collapseChokhmah" class="accordion-collapse collapse" aria-labelledby="headingChokhmah" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Primordial Wisdom, Intuition, The "Flash" of Intellect. Chokhmah is the first stirrings of conscious thought, the unformed seed of an idea, pure undifferentiated intellect from which the Torah itself emanates. [4]</p> + <p><strong>Psychological Aspect:</strong> Intuitive flashes, creative inspiration, the "aha!" moment, open-mindedness.</p> + <p><strong>Divine Name:</strong> Yah (ืื).</p> + <p><strong>Archangel:</strong> Raziel.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Chokhmah is embodied in the giving of the Torah at Sinai โ Divine wisdom revealed. The book of Proverbs (Mishlei) is a practical guide to living wisely, reflecting Chokhmah's application.</p> + <ul> + <li>The Sages teach, "If you seek wisdom, engage in Torah study." (Talmud Bavli, Makkot 10a). Explore the opening verses of <a href="https://www.sefaria.org/Genesis.1?lang=bi" target="_blank">Bereshit (Genesis) on Sefaria</a> with commentaries discussing primordial wisdom.</li> + <li>The Mitzvah of Torah Study (ืชืืืื ืชืืจื) is the primary way to connect with and cultivate Chokhmah.</li> + <li>Consider how a "flash of insight" during learning is a taste of Chokhmah.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Binah --> + <div class="accordion-item" id="card-binah"> + <h2 class="accordion-header" id="headingBinah"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBinah" aria-expanded="false" aria-controls="collapseBinah">3. Binah (ืืื ื) - Understanding</button></h2> + <div id="collapseBinah" class="accordion-collapse collapse" aria-labelledby="headingBinah" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Understanding, Analysis, The "Womb" or "Palace". Binah takes the raw flash of Chokhmah and gives it breadth and depth, developing it into a comprehensible concept.</p> + <p><strong>Psychological Aspect:</strong> Rational thought, logical deduction, developing ideas, critical thinking, discernment.</p> + <p><strong>Divine Name:</strong> YHVH Elohim (ืืืื ืืืืื) or Elohim (ืืืืื).</p> + <p><strong>Archangel:</strong> Tzaphkiel.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>The intricate details of Halakha (Jewish Law) require Binah's deep understanding. The process of Teshuvah (Return/Repentance) is rooted in Binah โ understanding one's actions and their implications.</p> + <ul> + <li>How do the detailed laws of Shabbat or Kashrut, when studied deeply, lead to a greater understanding (Binah) of holiness? Study <a href="https://www.sefaria.org/Mishneh_Torah%2C_Repentance?lang=bi" target="_blank">Rambam's Laws of Teshuvah on Sefaria</a>.</li> + <li>The Mitzvah of Teshuvah itself involves profound self-understanding and a commitment to change.</li> + <li>Engaging in Talmudic debate (pilpul) is a classic exercise in Binah.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Da'at --> + <div class="accordion-item" id="card-daat"> + <h2 class="accordion-header" id="headingDaat"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDaat" aria-expanded="false" aria-controls="collapseDaat">Da'at (ืืขืช) - Knowledge</button></h2> + <div id="collapseDaat" class="accordion-collapse collapse" aria-labelledby="headingDaat" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Knowledge, Awareness, Union. Da'at is the synthesis of Chokhmah and Binah, representing experiential knowledge and the integration of an idea into one's being. [2]</p> + <p><strong>Psychological Aspect:</strong> Deep knowing from experience, conviction, ability to apply knowledge, focused awareness.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Da'at is the intimate knowledge of God spoken of by the prophets. It's the point where intellectual understanding becomes personal conviction, vital for sincere Mitzvah observance.</p> + <ul> + <li>Explore the concept of "Yediat Hashem" (Knowing God) in the Torah and Prophets. How does this differ from mere belief?</li> + <li>The Mitzvot are not just actions but are meant to lead to a deeper Da'at of HaShem. For example, understanding the reasons behind Mitzvot (Ta'amei HaMitzvot) can foster Da'at. Look into resources on <a href="https://www.myjewishlearning.com/article/mitzvot-the-commandments/" target="_blank">the meaning of Mitzvot on MyJewishLearning</a>.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Chesed --> + <div class="accordion-item" id="card-chesed"> + <h2 class="accordion-header" id="headingChesed"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseChesed" aria-expanded="false" aria-controls="collapseChesed">4. Chesed (ืืกื) - Loving-kindness</button></h2> + <div id="collapseChesed" class="accordion-collapse collapse" aria-labelledby="headingChesed" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Loving-kindness, Mercy, Grace, Unconditional Love. Chesed is boundless benevolence and expansion, associated with Abraham Avinu. [4]</p> + <p><strong>Psychological Aspect:</strong> Generosity, compassion, empathy, forgiveness, altruism.</p> + <p><strong>Divine Name:</strong> El (ืื).</p> + <p><strong>Archangel:</strong> Tzadkiel.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Abraham, our forefather, is the archetype of Chesed. The Torah is filled with Mitzvot that express this attribute, such as charity, hospitality, and visiting the sick.</p> + <ul> + <li>Analyze the story of Abraham and the angels (Genesis 18) as a paradigm of Chesed. See <a href="https://www.sefaria.org/Genesis.18?lang=bi" target="_blank">this Parsha on Sefaria</a>.</li> + <li>Study the laws and ethics of <a href="https://www.myjewishlearning.com/article/tzedakah-charitable-giving/" target="_blank">Tzedakah (Charity) on MyJewishLearning</a>.</li> + <li>The Mitzvot of *Bikur Cholim* (visiting the sick) and *Hachnasat Orchim* (hospitality) are direct expressions of Chesed.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Gevurah --> + <div class="accordion-item" id="card-gevurah"> + <h2 class="accordion-header" id="headingGevurah"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGevurah" aria-expanded="false" aria-controls="collapseGevurah">5. Gevurah (ืืืืจื) - Strength</button></h2> + <div id="collapseGevurah" class="accordion-collapse collapse" aria-labelledby="headingGevurah" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Strength, Severity, Judgment, Discipline. Gevurah is the necessary counterpart to Chesed, providing balance through restraint and discernment, associated with Isaac. [4]</p> + <p><strong>Psychological Aspect:</strong> Self-discipline, setting boundaries, courage, objectivity, respect for justice.</p> + <p><strong>Divine Name:</strong> Elohim Gibor (ืืืืื ืืืืจ) or Elohim.</p> + <p><strong>Archangel:</strong> Kamael.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Gevurah is reflected in the Torah's system of laws (Din) and consequences, bringing order and justice. The *Akedah* (Binding of Isaac) is a profound narrative touching on Divine Gevurah and human faith.</p> + <ul> + <li>Explore the concept of *Yirat Shamayim* (Awe/Fear of Heaven) and its role in ethical behavior and Mitzvah observance.</li> + <li>Consider how Mitzvot requiring self-control (e.g., Kashrut, Shmirat HaLashon - guarding one's speech) are expressions of Gevurah. Learn about <a href="https://www.jewishvirtuallibrary.org/jewish-law-an-overview" target="_blank">Jewish Law on Jewish Virtual Library</a>.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Tiferet --> + <div class="accordion-item" id="card-tiferet"> + <h2 class="accordion-header" id="headingTiferet"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTiferet" aria-expanded="false" aria-controls="collapseTiferet">6. Tiferet (ืชืคืืจืช) - Beauty</button></h2> + <div id="collapseTiferet" class="accordion-collapse collapse" aria-labelledby="headingTiferet" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Beauty, Harmony, Compassion (Rachamim), Truth (Emet). Tiferet balances Chesed and Gevurah, associated with Jacob and the Torah itself as a harmonious whole.</p> + <p><strong>Psychological Aspect:</strong> Empathy balanced with discernment, integrity, self-acceptance, inner balance.</p> + <p><strong>Divine Name:</strong> YHVH Eloah VeDa'at (ืืืื ืืืื ืืืขืช) or YHVH.</p> + <p><strong>Archangel:</strong> Michael or Raphael.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Jacob, who fathered the twelve tribes, embodies Tiferet's ability to harmonize diverse elements. The Torah, in its entirety, is called Tiferet. The Psalms are filled with expressions of God's compassion (Rachamim).</p> + <ul> + <li>How do narratives like the life of Jacob illustrate the struggle for and achievement of inner balance and truth? Study the weekly <a href="https://www.chabad.org/parshah/default_cdo/jewish/Torah-Portion.htm" target="_blank">Parsha on Chabad.org</a> to see these themes.</li> + <li>Explore the <a href="https://www.sefaria.org/Psalms?lang=bi" target="_blank">Book of Psalms on Sefaria</a>, focusing on verses about Divine compassion and truth.</li> + <li>The Mitzvah of pursuing peace (Rodef Shalom) is a manifestation of Tiferet.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Netzach --> + <div class="accordion-item" id="card-netzach"> + <h2 class="accordion-header" id="headingNetzach"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNetzach" aria-expanded="false" aria-controls="collapseNetzach">7. Netzach (ื ืฆื) - Victory</button></h2> + <div id="collapseNetzach" class="accordion-collapse collapse" aria-labelledby="headingNetzach" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Victory, Eternity, Endurance, Persistence. Netzach represents the drive to overcome obstacles and bring Divine energy into action, associated with Moses.</p> + <p><strong>Psychological Aspect:</strong> Ambition, perseverance, creativity, passion, initiative.</p> + <p><strong>Divine Name:</strong> YHVH Tzva'ot (ืืืื ืฆืืืืช - Lord of Hosts).</p> + <p><strong>Archangel:</strong> Haniel.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Moses leading the Israelites through the desert for forty years, despite challenges, is a powerful example of Netzach. The eternity of Torah ("Netzach Yisrael lo yeshaker" - 1 Samuel 15:29) is a core Jewish belief.</p> + <ul> + <li>How do the stories of the Exodus or the rebuilding of the Second Temple demonstrate this quality of endurance?</li> + <li>Explore the concept of <a href="https://www.chabad.org/library/article_cdo/aid/434912/jewish/Trust-in-God-Bitachon.htm" target="_blank">Bitachon (Trust in God) on Chabad.org</a>, which fuels perseverance.</li> + <li>The Mitzvah of daily prayer, maintained with consistency, reflects Netzach.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Hod --> + <div class="accordion-item" id="card-hod"> + <h2 class="accordion-header" id="headingHod"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHod" aria-expanded="false" aria-controls="collapseHod">8. Hod (ืืื) - Splendor</button></h2> + <div id="collapseHod" class="accordion-collapse collapse" aria-labelledby="headingHod" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Splendor, Glory, Surrender, Acknowledgment. Hod is the counterpart to Netzach, representing gratitude, humility, and intellectual formulation, associated with Aaron the Priest. [3]</p> + <p><strong>Psychological Aspect:</strong> Humility, gratitude, intellectual honesty, analytical skills, communication.</p> + <p><strong>Divine Name:</strong> Elohim Tzva'ot (ืืืืื ืฆืืืืช - God of Hosts).</p> + <p><strong>Archangel:</strong> Raphael or Michael.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Aaron's priestly service, with its detailed rituals and splendor, acknowledged God's majesty. The daily prayers and blessings (*Berachot*) are constant expressions of Hod (Thanksgiving).</p> + <ul> + <li>How do the daily prayers and blessings cultivate a sense of Hod? Explore <a href="https://www.myjewishlearning.com/article/jewish-prayers-the-siddur/" target="_blank">Jewish Prayer on MyJewishLearning</a>.</li> + <li>The Mitzvah of reciting one hundred blessings daily (Talmud, Menachot 43b) emphasizes continuous acknowledgment.</li> + <li>Study the descriptions of the Temple service to understand its splendor as an expression of Hod.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Yesod --> + <div class="accordion-item" id="card-yesod"> + <h2 class="accordion-header" id="headingYesod"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseYesod" aria-expanded="false" aria-controls="collapseYesod">9. Yesod (ืืกืื) - Foundation</button></h2> + <div id="collapseYesod" class="accordion-collapse collapse" aria-labelledby="headingYesod" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Foundation, Connection, The Righteous One (Tzaddik). Yesod funnels higher energies into Malkuth, representing the covenant (<a href="https://en.wikipedia.org/wiki/Brit_(Jewish_ritual)" target="_blank">Brit</a>) and connection. Associated with Joseph.</p> + <p><strong>Psychological Aspect:</strong> Power to connect and bond, subconscious, imagination, commitment, integrity.</p> + <p><strong>Divine Name:</strong> Shaddai El Chai (ืฉืื ืื ืื - Almighty Living God).</p> + <p><strong>Archangel:</strong> Gabriel.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Joseph HaTzaddik, who maintained his moral purity and connection to God in challenging circumstances, embodies Yesod. The Brit (covenant), particularly Brit Milah, is a foundational Mitzvah signifying our connection.</p> + <ul> + <li>How does the concept of covenant (e.g., between God and Israel, in marriage) act as a foundation for holiness? Study the life of <a href="https://www.chabad.org/library/article_cdo/aid/643958/jewish/Joseph.htm" target="_blank">Joseph on Chabad.org</a>.</li> + <li>The Mitzvah of Brit Milah and the sanctity of marriage (Kiddushin) are tied to Yesod's connective power.</li> + <li>Reflect on how righteous individuals (Tzaddikim) in Torah serve as conduits, reflecting Yesod.</li> + </ul> + </div> + </div> + </div> + </div> + + <!-- Malkuth --> + <div class="accordion-item" id="card-malkuth"> + <h2 class="accordion-header" id="headingMalkuth"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMalkuth" aria-expanded="false" aria-controls="collapseMalkuth">10. Malkuth (ืืืืืช) - Kingdom</button></h2> + <div id="collapseMalkuth" class="accordion-collapse collapse" aria-labelledby="headingMalkuth" data-bs-parent="#sefirotAccordion"> + <div class="accordion-body"> + <p><strong>Core Concept:</strong> Kingdom, Sovereignty, The Divine Presence (<a href="https://en.wikipedia.org/wiki/Shekhinah" target="_blank">Shekhinah</a>). Malkuth is the physical world, where Divine energy is actualized. Associated with King David.</p> + <p><strong>Psychological Aspect:</strong> Action, embodiment, manifestation, humility, practical application of spiritual principles.</p> + <p><strong>Divine Name:</strong> Adonai (ืืื ื - Lord) or Adonai Melekh (ืืื ื ืืื - Lord King).</p> + <p><strong>Archangel:</strong> Sandalphon.</p> + <div class="study-pathways"> + <h4>Reflections from Torah & Pathways to Study:</h4> + <p>Malkhut is our world, the realm where we accept God's sovereignty ("Kabbalat Ol Malkhut Shamayim") through our actions and Mitzvot. King David established Jerusalem as the seat of Divine Kingship on Earth.</p> + <ul> + <li>How do our daily actions and observance of Mitzvot contribute to revealing God's sovereignty in the world? Explore teachings about the <a href="https://www.myjewishlearning.com/article/the-shekhinah/" target="_blank">Shekhinah on MyJewishLearning</a>.</li> + <li>The Mitzvah of appointing a king (in ancient Israel) and prayers for the restoration of Davidic dynasty relate to Malkhut.</li> + <li>Every Mitzvah performed with the intention of serving the King actualizes Malkhut.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <div class="study-hook-section mt-5"> + <h3>Continue Your Journey into Torah</h3> + <p>The journey through the Etz Chaim is a path of endless discovery, each Sefirah opening a gateway to understanding the depth of Torah. We encourage you to continue this exploration:</p> + <ul> + <li><strong>Dive into the Weekly Parsha:</strong> See how the Sefirot manifest in the unfolding story of our people. Visit <a href="https://www.sefaria.org" target="_blank">Sefaria.org</a> or <a href="https://www.chabad.org/parshah/default_cdo/jewish/Torah-Portion.htm" target="_blank">Chabad.org's Parsha section</a>.</li> + <li><strong>Explore Mitzvot:</strong> Understand how each commandment can be a channel for specific Divine energies. Check out <a href="https://www.myjewishlearning.com/article/mitzvot-the-commandments/" target="_blank">MyJewishLearning's Mitzvot section</a> or Chabad's Mitzvah directory.</li> + <li><strong>Study Classical Commentaries:</strong> Discover how sages throughout history have connected these ideas. <a href="https://www.sefaria.org" target="_blank">Sefaria</a> is an invaluable resource for texts like the Zohar, Ramban, and Chasidic writings.</li> + <li><strong>Find a Study Partner (Chavruta) or Class:</strong> Learning with others brings these concepts to life. Consider platforms like <a href="https://www.partnersintorah.org/" target="_blank">PartnersInTorah.org</a> or <a href="https://www.projectzug.org/" target="_blank">Project Zug</a>.</li> + </ul> + <p class="text-center fst-italic mt-4">"Its ways are ways of pleasantness, and all its paths are peace. It is a tree of life to those who grasp it, and its supporters are praiseworthy." (Proverbs 3:17-18)</p> + </div> + + + <footer class="text-center mt-5 pt-4 border-top border-secondary"> + <p>ยฉ <script>document.write(new Date().getFullYear())</script> Etz Chaim Interactive. For study and contemplation.</p> + <p><i class="bi bi-tree-fill text-success"></i> <i class="bi bi-star-fill text-warning"></i> <i class="bi bi-heart-fill text-danger"></i></p> + <p class="small">Sources referenced include Wikipedia, Chabad.org, Sefaria.org, MyJewishLearning.com, and JewishVirtualLibrary.org.</p> + </footer> +</div> + +<!-- Bootstrap JS Bundle --> +<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> + +<script> + // --- Accordion Interaction (called by Three.js) --- + function handleSefirahInteraction(sefirahId) { /* ... same as previous ... */ + const targetCard = document.getElementById(`card-${sefirahId}`); + const targetCollapseId = `collapse${sefirahId.charAt(0).toUpperCase() + sefirahId.slice(1)}`; + const targetCollapseEl = document.getElementById(targetCollapseId); + const accordionItems = document.querySelectorAll('.accordion-item'); + accordionItems.forEach(item => item.classList.remove('highlight-card')); + if (targetCard) { + targetCard.classList.add('highlight-card'); + const cardRect = targetCard.getBoundingClientRect(); + if (cardRect.top < 0 || cardRect.bottom > window.innerHeight) { + targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + } + document.querySelectorAll('#sefirotAccordion .accordion-collapse.show').forEach(openCollapse => { + if (openCollapse !== targetCollapseEl) { new bootstrap.Collapse(openCollapse).hide(); } + }); + if (targetCollapseEl) { bootstrap.Collapse.getOrCreateInstance(targetCollapseEl).show(); } + setTimeout(() => { if (targetCard) targetCard.classList.remove('highlight-card'); }, 3000); + } + + // --- THREE.JS INTEGRATION --- + let scene, camera, renderer; + let sefirotSpheres = []; + let htmlLabels = []; + let raycaster, mouse; + let autoRotate = false; + const treeGroup = new THREE.Group(); + const minZoom = 10; // Min camera Z position + const maxZoom = 40; // Max camera Z position + + const sefirotLayoutData = [ /* ... same layout data as previous ... */ + { id: 'keter', name_he: 'ืืชืจ', name_en: 'Keter', pos: [0, 10, 0], color: 0xffffff, isDaat: false }, + { id: 'chokhmah', name_he: 'ืืืื', name_en: 'Chokhmah', pos: [4.6, 7.5, 0], color: 0xc0c0c0, isDaat: false }, + { id: 'binah', name_he: 'ืืื ื', name_en: 'Binah', pos: [-4.6, 7.5, 0], color: 0x333333, isDaat: false }, + { id: 'daat', name_he: 'ืืขืช', name_en: 'Da\'at', pos: [0, 5.5, -0.5], color: 0xADD8E6, isDaat: true }, + { id: 'chesed', name_he: 'ืืกื', name_en: 'Chesed', pos: [4.6, 2.5, 0], color: 0x4169E1, isDaat: false }, + { id: 'gevurah', name_he: 'ืืืืจื', name_en: 'Gevurah', pos: [-4.6, 2.5, 0], color: 0xDC143C, isDaat: false }, + { id: 'tiferet', name_he: 'ืชืคืืจืช',name_en: 'Tiferet', pos: [0, 0, 0], color: 0xFFD700, isDaat: false }, + { id: 'netzach', name_he: 'ื ืฆื', name_en: 'Netzach', pos: [4.6, -4, 0], color: 0x32CD32, isDaat: false }, + { id: 'hod', name_he: 'ืืื', name_en: 'Hod', pos: [-4.6, -4, 0], color: 0xFF8C00, isDaat: false }, + { id: 'yesod', name_he: 'ืืกืื', name_en: 'Yesod', pos: [0, -7, 0], color: 0x8A2BE2, isDaat: false }, + { id: 'malkuth', name_he: 'ืืืืืช',name_en: 'Malkuth', pos: [0, -10.5, 0], color: 0x8B4513, isDaat: false } + ]; + const pathConnections = [ /* ... same path data as previous ... */ + ['keter', 'chokhmah'], ['keter', 'binah'], ['keter', 'tiferet'], + ['chokhmah', 'binah'], ['chokhmah', 'chesed'], ['chokhmah', 'tiferet'], + ['binah', 'gevurah'], ['binah', 'tiferet'], + ['chesed', 'gevurah'], ['chesed', 'tiferet'], ['chesed', 'netzach'], + ['gevurah', 'tiferet'], ['gevurah', 'hod'], + ['tiferet', 'netzach'], ['tiferet', 'hod'], ['tiferet', 'yesod'], + ['netzach', 'hod'], ['netzach', 'yesod'], + ['hod', 'yesod'], + ['yesod', 'malkuth'] + ]; + const daatPathConnections = [ /* ... same Da'at path data as previous ... */ + ['chokhmah', 'daat'], ['binah', 'daat'], ['keter', 'daat'], ['daat', 'tiferet'], ['daat', 'chesed'], ['daat', 'gevurah'] + ]; + + function initThreeJS() { + const container = document.getElementById('threejs-canvas-container'); + container.style.cursor = 'grab'; + + scene = new THREE.Scene(); /* ... same scene, camera, renderer, lights setup ... */ + scene.background = new THREE.Color(0x1a1a2e); + scene.fog = new THREE.Fog(0x1a1a2e, 20, 50); + camera = new THREE.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.1, 100); + camera.position.set(0, 0, 22); // Initial camera Z + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setSize(container.clientWidth, container.clientHeight); + renderer.setPixelRatio(window.devicePixelRatio); + container.appendChild(renderer.domElement); + const ambientLight = new THREE.AmbientLight(0x606080); scene.add(ambientLight); + const dirLight1 = new THREE.DirectionalLight(0xffffff, 0.6); dirLight1.position.set(1, 1, 1); scene.add(dirLight1); + const dirLight2 = new THREE.DirectionalLight(0x88aaff, 0.4); dirLight2.position.set(-1, -0.5, -1); scene.add(dirLight2); + + sefirotLayoutData.forEach(data => { /* ... same Sefirot creation as previous ... */ + const sphereRadius = data.id === 'tiferet' ? 1.1 : (data.isDaat ? 0.7 : 0.9); + const geometry = new THREE.SphereGeometry(sphereRadius, 32, 32); + const material = new THREE.MeshPhongMaterial({ color: data.color, emissive: data.color, emissiveIntensity: 0.25, shininess: 60, specular: 0x222222, transparent: data.isDaat, opacity: data.isDaat ? 0.6 : 0.95 }); + if(data.isDaat) material.depthWrite = false; + const sphere = new THREE.Mesh(geometry, material); + sphere.position.set(...data.pos); + sphere.userData = { id: data.id, name_he: data.name_he, name_en: data.name_en, type: 'sefirah', isDaat: data.isDaat }; + const pointLight = new THREE.PointLight(data.color, 0.7, 5); sphere.add(pointLight); + sefirotSpheres.push(sphere); treeGroup.add(sphere); + const labelDiv = document.createElement('div'); labelDiv.className = 'sefirah-label'; + labelDiv.innerHTML = `<span class="he">${data.name_he}</span><br><span class="en">${data.name_en}</span>`; + container.appendChild(labelDiv); htmlLabels.push({ div: labelDiv, sefirah: sphere, pos: new THREE.Vector3(...data.pos) }); + }); + + const getSefirahPos = (id) => sefirotLayoutData.find(s => s.id === id).pos; + pathConnections.forEach(conn => { /* ... same Path creation ... */ + const startPos = new THREE.Vector3(...getSefirahPos(conn[0])); const endPos = new THREE.Vector3(...getSefirahPos(conn[1])); + const geometry = new THREE.BufferGeometry().setFromPoints([startPos, endPos]); + const material = new THREE.LineBasicMaterial({ color: 0x88a2c4, linewidth: 1, transparent: true, opacity: 0.5 }); + treeGroup.add(new THREE.Line(geometry, material)); + }); + daatPathConnections.forEach(conn => { /* ... same Da'at Path creation ... */ + const startPos = new THREE.Vector3(...getSefirahPos(conn[0])); const endPos = new THREE.Vector3(...getSefirahPos(conn[1])); + const geometry = new THREE.BufferGeometry().setFromPoints([startPos, endPos]); + const material = new THREE.LineDashedMaterial({ color: 0xADD8E6, linewidth: 1, scale: 1, dashSize: 0.2, gapSize: 0.1, transparent: true, opacity: 0.6 }); + const line = new THREE.Line(geometry, material); line.computeLineDistances(); treeGroup.add(line); + }); + scene.add(treeGroup); + + const particleCount = 500; /* ... same Particle creation ... */ + const particleGeometry = new THREE.BufferGeometry(); const particlePositions = new Float32Array(particleCount * 3); const particleColors = new Float32Array(particleCount * 3); + for (let i = 0; i < particleCount; i++) { particlePositions[i*3] = (Math.random()-0.5)*50; particlePositions[i*3+1] = (Math.random()-0.5)*50; particlePositions[i*3+2] = (Math.random()-0.5)*30-15; const c=new THREE.Color(Math.random()*0.5+0.5,Math.random()*0.5+0.5,Math.random()*0.5+0.8); particleColors[i*3]=c.r; particleColors[i*3+1]=c.g; particleColors[i*3+2]=c.b; } + particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions,3)); particleGeometry.setAttribute('color', new THREE.BufferAttribute(particleColors,3)); + const particleMaterial = new THREE.PointsMaterial({size:0.1, vertexColors:true, transparent:true, opacity:0.5}); + scene.add(new THREE.Points(particleGeometry, particleMaterial)); + + raycaster = new THREE.Raycaster(); + mouse = new THREE.Vector2(); + + renderer.domElement.addEventListener('mousemove', onCanvasMouseMove, false); + renderer.domElement.addEventListener('click', onCanvasClick, false); + renderer.domElement.addEventListener('wheel', onCanvasWheel, false); // ZOOM event + window.addEventListener('resize', onWindowResize, false); + + const toggleBtn = document.getElementById('toggleRotationBtn'); + toggleBtn.addEventListener('click', () => { + autoRotate = !autoRotate; toggleBtn.classList.toggle('active', autoRotate); + container.style.cursor = autoRotate ? 'default' : 'grab'; + }); + + let isDragging = false; /* ... same Mouse Drag Logic as previous ... */ + let lastMouseX = 0, lastMouseY = 0; + renderer.domElement.addEventListener('mousedown', (event) => { if (autoRotate) return; isDragging = true; lastMouseX = event.clientX; lastMouseY = event.clientY; container.style.cursor = 'grabbing'; }); + document.addEventListener('mouseup', () => { if (isDragging) { isDragging = false; if (!autoRotate) container.style.cursor = 'grab'; } }); + document.addEventListener('mousemove', (event) => { + if (!isDragging || autoRotate) return; + const deltaX = event.clientX - lastMouseX; const deltaY = event.clientY - lastMouseY; + treeGroup.rotation.y += deltaX * 0.005; treeGroup.rotation.x += deltaY * 0.005; + treeGroup.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, treeGroup.rotation.x)); + lastMouseX = event.clientX; lastMouseY = event.clientY; + }); + animateThreeJS(); + } + + let INTERSECTED; + function onCanvasMouseMove(event) { /* ... same as previous ... */ + const container = document.getElementById('threejs-canvas-container'); const rect = container.getBoundingClientRect(); + mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; + if (isDragging || autoRotate) { if (INTERSECTED) INTERSECTED.material.emissiveIntensity = INTERSECTED.userData.isDaat ? 0.4 : 0.25; INTERSECTED = null; return; } + raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(sefirotSpheres); + if (intersects.length > 0) { + if (INTERSECTED != intersects[0].object) { if (INTERSECTED) INTERSECTED.material.emissiveIntensity = INTERSECTED.userData.isDaat ? 0.4 : 0.25; INTERSECTED = intersects[0].object; INTERSECTED.material.emissiveIntensity = 0.6; } + if (!autoRotate) container.style.cursor = 'pointer'; + } else { if (INTERSECTED) INTERSECTED.material.emissiveIntensity = INTERSECTED.userData.isDaat ? 0.4 : 0.25; INTERSECTED = null; if (!autoRotate) container.style.cursor = 'grab'; } + } + function onCanvasClick(event) { /* ... same as previous ... */ + raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(sefirotSpheres); + if (intersects.length > 0) { const c = intersects[0].object; if (c.userData.id) { handleSefirahInteraction(c.userData.id); } } + } + + function onCanvasWheel(event) { + event.preventDefault(); // Important to prevent page scroll + const zoomSpeed = 0.5; + let newZ = camera.position.z + event.deltaY * 0.01 * zoomSpeed; // Adjust multiplier for sensitivity + camera.position.z = THREE.MathUtils.clamp(newZ, minZoom, maxZoom); + } + + function onWindowResize() { /* ... same as previous ... */ + const container = document.getElementById('threejs-canvas-container'); if (!container) return; + camera.aspect = container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); + renderer.setSize(container.clientWidth, container.clientHeight); + } + function updateHtmlLabels() { /* ... same as previous ... */ + htmlLabels.forEach(labelData => { const { div, sefirah } = labelData; const worldPos = new THREE.Vector3(); sefirah.getWorldPosition(worldPos); const screenPos = worldPos.clone().project(camera); const x = (screenPos.x*0.5+0.5)*renderer.domElement.clientWidth; const y = (-screenPos.y*0.5+0.5)*renderer.domElement.clientHeight; if (screenPos.z<1) { div.style.left=`${x}px`; div.style.top=`${y}px`; div.style.display='block'; } else { div.style.display='none'; } }); + } + + function animateThreeJS() { /* ... same as previous ... */ + requestAnimationFrame(animateThreeJS); + if (autoRotate) { treeGroup.rotation.y += 0.002; treeGroup.rotation.x += 0.0005 * Math.sin(Date.now() * 0.0001); } + sefirotSpheres.forEach((sphere, i) => { const l = sphere.children[0]; if(l && l.isPointLight) { l.intensity = (sphere.userData.isDaat?0.4:0.7) + Math.sin(Date.now()*0.0015 + i*0.5)*0.2; } }); + updateHtmlLabels(); renderer.render(scene, camera); + } + + document.addEventListener('DOMContentLoaded', () => { + // Fill in accordion content placeholders + // This is done in the HTML directly now for the sake of example length. + initThreeJS(); + }); +</script> + +</body> +</html> +