refine
ยท 1 year ago
0ae9a9780f8bf5b57d6fd43159e7b3398760e569
Parent:
40f0e1329
1 file changed +459 โ362
- etz-chaim-tree-of-life.html +459 โ362
Diff
--- a/etz-chaim-tree-of-life.html +++ b/etz-chaim-tree-of-life.html @@ -1,346 +1,438 @@ <!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; + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <title>Etz Chaim Cheatsheet: An Interactive Exploration of the Sefirot</title> + <meta name="description" content="An interactive visual cheatsheet exploring the Etz Chaim (Tree of Life) and its Sefirot. Delve into Kabbalistic concepts, their meanings, and their echoes in traditional Jewish thought."> + <meta name="keywords" content="Etz Chaim, Tree of Life, Kabbalah, Sefirot, Jewish Mysticism, Keter, Chokhmah, Binah, Chesed, Gevurah, Tiferet, Netzach, Hod, Yesod, Malkuth, Daat, Interactive Cheatsheet, Jewish Spirituality, Torah"> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/etz-chaim-tree-of-life.html"> + + <!-- Open Graph / Facebook --> + <meta property="og:type" content="article"> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/etz-chaim-tree-of-life.html"> + <meta property="og:title" content="Etz Chaim Cheatsheet: An Interactive Exploration of the Sefirot"> + <meta property="og:description" content="An interactive visual cheatsheet exploring the Etz Chaim (Tree of Life) and its Sefirot, delving into Kabbalistic concepts and their traditional resonances."> + <!-- <meta property="og:image" content="https://cheatsheets.davidveksler.com/images/etz-chaim-placeholder.png"> Placeholder image --> + + <!-- Twitter --> + <meta name="twitter:creator" content="@heroiclife" /> + <meta property="twitter:card" content="summary_large_image"> + <meta property="twitter:url" content="https://cheatsheets.davidveksler.com/etz-chaim-tree-of-life.html"> + <meta property="twitter:title" content="Etz Chaim Cheatsheet: An Interactive Exploration of the Sefirot"> + <meta property="twitter:description" content="An interactive visual cheatsheet exploring the Etz Chaim (Tree of Life) and its Sefirot, delving into Kabbalistic concepts and their traditional resonances."> + <!-- <meta property="twitter:image" content="https://cheatsheets.davidveksler.com/images/etz-chaim-placeholder.png"> Placeholder image --> + + <!-- Favicon (Simple Emoji) --> + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>๐ณ</text></svg>"> + + <!-- 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 --> + <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> + :root { + --bg-deep-blue: #1a1a2e; + --bg-canvas-dark: #0A0A10; + --text-light-grey: #e0e0e0; + --text-brighter: #f0f0f0; + --accent-goldenrod: #f2a365; + --accent-goldenrod-darker: #e0b36f; + --accordion-button-bg: #2c3e50; + --accordion-button-active-bg: #34495e; + --accordion-body-bg: #232a3f; + --link-color: #9bb0d1; + --link-hover-color: var(--accent-goldenrod); + --border-color-subtle: rgba(242, 163, 101, 0.3); + --term-highlight-bg: rgba(242, 163, 101, 0.15); + --term-highlight-border: rgba(242, 163, 101, 0.4); + } + + body { font-family: 'EB Garamond', serif; background-color: var(--bg-deep-blue); color: var(--text-light-grey); 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: var(--accent-goldenrod); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } + h2.accordion-header button, h3.accordion-header button { font-family: 'Cinzel', serif; } /* Ensure h3 also gets Cinzel */ + .page-header .lead { font-size: 1.15em; color: var(--text-light-grey); opacity: 0.9;} + .last-updated { font-size: 0.85em; color: var(--text-light-grey); opacity: 0.7; margin-top: -10px; margin-bottom: 20px; } + + .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: var(--bg-canvas-dark); 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.6); padding: 3px 6px; border-radius: 4px; font-size: 13px; pointer-events: none; text-shadow: 0 0 4px black; transform: translate(-50%, -140%); white-space: nowrap; z-index: 5; border: 1px solid rgba(255,255,255,0.1); } + .sefirah-label .he { font-family: 'Noto Sans Hebrew', sans-serif; font-size: 15px; } + .sefirah-label .en { font-family: 'Cinzel', serif; font-size: 11px; opacity: 0.9; } + + .accordion-button { background-color: var(--accordion-button-bg); color: var(--accent-goldenrod); } + .accordion-button:not(.collapsed) { background-color: var(--accordion-button-active-bg); color: var(--accent-goldenrod-darker); } + .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(242, 163, 101, 0.5); } + .accordion-body { background-color: var(--accordion-body-bg); color: var(--text-brighter); font-size: 1.05em; line-height: 1.7; } + .accordion-body p, .accordion-body ul { margin-bottom: 1rem; } + .accordion-body strong { color: var(--accent-goldenrod); } + .accordion-body a { color: var(--link-color); text-decoration: none; border-bottom: 1px dotted var(--link-color); } + .accordion-body a:hover { color: var(--link-hover-color); border-bottom-style: solid; } + .accordion-item { border: 1px solid var(--border-color-subtle); } + + .term, .kabbalah-term { + background-color: var(--term-highlight-bg); + padding: 0.1em 0.3em; + border-radius: 0.2em; + font-style: italic; + border-bottom: 1px solid var(--term-highlight-border); + cursor: help; + } + + .highlight-card { border: 2px solid var(--accent-goldenrod) !important; box-shadow: 0 0 15px var(--accent-goldenrod); } + .highlight-card .accordion-button { background-color: var(--accent-goldenrod) !important; color: var(--bg-deep-blue) !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 var(--accent-goldenrod); } + #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: var(--accent-goldenrod); border: 1px solid var(--accent-goldenrod); padding: 5px 10px; margin: 0 5px; cursor: pointer; border-radius: 3px; font-family: 'Cinzel', serif; } + #controls3d button:hover, #controls3d button.active { background: var(--accent-goldenrod); color: var(--bg-deep-blue); } + + .study-pathways h4 {font-size: 1.15em; margin-top:15px; margin-bottom:10px; color: var(--accent-goldenrod-darker); font-weight:normal; border-bottom: 1px solid var(--border-color-subtle); padding-bottom: 5px;} + .study-pathways ul { list-style-type: "\2726"; padding-left: 20px;} + .study-pathways li { margin-bottom: 8px; font-size: 0.95em;} + + @media print { + body { background-color: #fff !important; color: #000 !important; font-size: 10pt; } + .page-header, .tree-container, #controls3d, footer .bi, .accordion-button::after { display: none !important; } + main, .accordion-body, .intro-text, .study-hook-section, .accordion-item { background-color: #fff !important; color: #000 !important; border: none !important; box-shadow: none !important;} + h1, h2, h3, h4, strong, .accordion-button { color: #000 !important; text-shadow: none !important;} + .accordion-collapse { display: block !important; } + .accordion-button { background-color: #eee !important; border-bottom: 1px solid #ccc !important; padding: 0.5rem 1rem;} + a { color: #0000EE !important; text-decoration: underline !important; border: none !important;} + a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; } + .term, .kabbalah-term { background-color: #f0f0f0 !important; border: 1px solid #ccc !important; font-style: normal !important; padding: 0.05em 0.15em;} + .tooltip { display: none !important; } + .study-pathways ul { list-style-type: disc;} + .study-hook-section ul li a::after { content: "";} + .container-main {max-width: 100% !important;} + } + </style> + + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "TechArticle", + "headline": "Etz Chaim Cheatsheet: An Interactive Exploration of the Sefirot", + "description": "An interactive visual cheatsheet exploring the Etz Chaim (Tree of Life) and its Sefirot. Delve into Kabbalistic concepts, their meanings, and their echoes in traditional Jewish thought.", + "image": "http://cheatsheets.davidveksler.com/images/etz-chaim-placeholder.png", + "author": { "@type": "Person", "name": "David Vekslers Cheatsheets (Generated Content)" }, + "publisher": { "@type": "Organization", "name": "David Vekslers Cheatsheets", "logo": { "@type": "ImageObject", "url": "http://cheatsheets.davidveksler.com/images/logo-placeholder.png" }}, + "datePublished": "2024-05-24", + "dateModified": "2024-05-24", + "mainEntityOfPage": "http://cheatsheets.davidveksler.com/etz-chaim-tree-of-life.html", + "keywords": "Etz Chaim, Tree of Life, Kabbalah, Sefirot, Jewish Mysticism, Interactive Cheatsheet" } - .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> + </script> </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> +<main class="container container-main"> + <header class="page-header text-center my-5"> + <h1><i class="bi bi-diagram-3"></i> <span class="hebrew-text">ืขืฅ ืืืื</span> - Etz Chaim Cheatsheet</h1> + <p class="lead">An Interactive Exploration of the Sefirot</p> + <p class="last-updated" id="lastUpdatedDate">Last Updated: May 24, 2024</p> </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> + <section id="interactive-diagram-section" aria-labelledby="diagram-heading"> + <h2 id="diagram-heading" class="visually-hidden">Interactive Tree of Life Diagram</h2> + <div class="intro-text"> + <p>Welcome to an interactive exploration of the <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Hebrew: ืขืฅ ืืืื, literally 'Tree of Life.' A central mystical symbol in Kabbalah.">Etz Chaim</span>, the Tree of Life. This ancient diagram, central to Kabbalistic thought, offers a symbolic map of consciousness and the unfolding of Divine attributes. It serves as a profound tool for contemplation, with each <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Plural of Sefirah (ืกืคืืจื). Divine emanations or attributes.">Sefirah</span> representing a distinct quality or energy. These concepts have resonated deeply within Jewish mystical and philosophical traditions, offering rich layers of meaning. As you explore, consider how these universal archetypes might illuminate aspects of existence and inner life. Click on a Sefirah in the diagram or explore the descriptions below 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 class="tree-container"> + <div id="threejs-canvas-container"></div> + <div id="controls3d"> + <button id="toggleRotationBtn" aria-label="Toggle automatic rotation of the diagram">Auto-Rotate</button> + </div> </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> + </section> + + <section id="sefirot-details-section" aria-labelledby="sefirot-heading"> + <h2 id="sefirot-heading" class="text-center mb-4">The Sefirot Explained</h2> + <div class="accordion" id="sefirotAccordion"> + <!-- Keter --> + <div class="accordion-item" id="card-keter"> + <h3 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></h3> + <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 (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="The Infinite Light, a core Kabbalistic term for Divine illumination preceding creation.">Ohr Ein Sof</span>). 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 (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Divine Will or desire.">Ratzon</span>) and delight (Taanug), beyond comprehension and often described as "Nothingness" (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Nothingness, a term for the state preceding differentiation, or the sublime nature of Keter.">Ayin</span>).</p> + <p><strong>Psychological Aspect:</strong> The deepest wellspring of motivation, pure faith (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Faith or belief.">Emunah</span>) 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>Echoes in Tradition:</h4> + <p>The concept of Keter, as Divine Will, resonates with traditional discussions of God's initial impulse for creation ("Let there be light") and the profound devotion encapsulated in the Shema. It speaks to the ultimate source of all purposeful action and spiritual striving.</p> + <ul> + <li>Discussions of <em>Ratzon HaShem</em> (Divine Will) in Jewish philosophy delve into themes akin to Keter. For further exploration, one might consider Maimonides' 13 Principles of Faith.</li> + <li>The emphasis on pure faith (Emunah) in many wisdom traditions finds a parallel in Keter.</li> + <li>The role of *kavanah* (focused intention) in contemplative practices can be seen as an attempt to align personal will with a higher, or deeper, source of volition.</li> + </ul> + </div> </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> + <!-- Chokhmah --> + <div class="accordion-item" id="card-chokhmah"> + <h3 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></h3> + <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. <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Wisdom; the first unformed flash of an idea.">Chokhmah</span> is the first stirrings of conscious thought, the unformed seed of an idea, pure undifferentiated intellect.</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>Echoes in Tradition:</h4> + <p>Chokhmah's nature as revealed, intuitive wisdom finds parallels in the traditional understanding of sacred texts as sources of profound insight. The Book of Proverbs (Mishlei), for instance, is a classic exploration of practical and Divine wisdom.</p> + <ul> + <li>The imperative to seek wisdom is a recurring theme in Jewish literature. Passages in Genesis (Bereshit), when explored with classical commentaries, touch upon concepts of primordial wisdom.</li> + <li>The value placed on learning and the pursuit of knowledge (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Torah study.">Talmud Torah</span>) can be seen as a path to cultivating aspects of Chokhmah.</li> + <li>Moments of sudden clarity or inspiration in any deep study often feel like a direct experience of this Sefirah's quality.</li> + </ul> + </div> </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> + <!-- Binah --> + <div class="accordion-item" id="card-binah"> + <h3 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></h3> + <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". <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Understanding, analytical thought that gives form to Chokhmah's insight.">Binah</span> 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>Echoes in Tradition:</h4> + <p>The development of detailed legal and ethical systems within Jewish tradition, requiring careful analysis and discernment (Halakha), reflects Binah's quality of structured understanding. The concept of <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Return or Repentance; a process of introspection and change.">Teshuvah</span> (Return/Repentance) also involves deep introspection and understanding of one's path.</p> + <ul> + <li>The detailed explication of principles, such as found in discussions of Shabbat or Kashrut, can lead to a profound appreciation (Binah) of underlying spiritual structures. Exploring Maimonides' Laws of Teshuvah can illuminate this.</li> + <li>The practice of Teshuvah often emphasizes self-understanding as a precursor to change.</li> + <li>The dialectical method of Talmudic study (pilpul) is a rigorous exercise in developing understanding.</li> + </ul> + </div> </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> + <!-- Da'at --> + <div class="accordion-item" id="card-daat"> + <h3 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></h3> + <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. <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Knowledge, often understood as experiential or integrated knowledge; the synthesis of Chokhmah and Binah.">Da'at</span> is the synthesis of Chokhmah and Binah, representing experiential knowledge and the integration of an idea into one's being. It is often considered a non-Sefirah or a mediating state.</p> + <p><strong>Psychological Aspect:</strong> Deep knowing from experience, conviction, ability to apply knowledge, focused awareness, integration of intellect and emotion.</p> + <div class="study-pathways"> + <h4>Echoes in Tradition:</h4> + <p>Da'at is often associated with the intimate knowledge of God spoken of by the prophets. It's the point where intellectual understanding becomes personal conviction, vital for sincere ethical and spiritual practice.</p> + <ul> + <li>Explore the concept of "Yediat Hashem" (Knowing God) in traditional Jewish texts. How does this differ from mere belief or intellectual assent?</li> + <li>The idea that actions should stem from deep internal awareness, rather than rote performance, resonates with Da'at. The exploration of *Ta'amei HaMitzvot* (reasons for commandments) can foster such integrated knowledge. For more on this, one might explore resources on the meaning of Mitzvot.</li> + </ul> + </div> </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> + <!-- Chesed --> + <div class="accordion-item" id="card-chesed"> + <h3 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></h3> + <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. <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Loving-kindness, grace, benevolence.">Chesed</span> is boundless benevolence and expansion, often associated with Abraham.</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>Echoes in Tradition:</h4> + <p>Abraham, a key figure in Jewish tradition, is often seen as the archetype of Chesed. Many traditional teachings and narratives emphasize acts of kindness (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Acts of loving-kindness.">Gemilut Chasadim</span>) like charity, hospitality, and visiting the sick.</p> + <ul> + <li>Analyze the story of Abraham and the angels (Genesis 18) as a paradigm of Chesed.</li> + <li>Study the ethics and practices of Tzedakah (Charitable Giving).</li> + <li>Reflect on the importance of *Bikur Cholim* (visiting the sick) and *Hachnasat Orchim* (hospitality) in Jewish life as expressions of Chesed.</li> + </ul> + </div> </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> + <!-- Gevurah --> + <div class="accordion-item" id="card-gevurah"> + <h3 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></h3> + <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. <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Strength, severity, judgment, discipline.">Gevurah</span> is the necessary counterpart to Chesed, providing balance through restraint and discernment, often associated with Isaac.</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>Echoes in Tradition:</h4> + <p>Gevurah is reflected in traditional systems of law (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Judgment or law.">Din</span>) and consequences, bringing order and justice. The narrative of the *Akedah* (Binding of Isaac) is a profound exploration touching on themes related to 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 principled living.</li> + <li>Consider how practices requiring self-control (e.g., dietary laws, ethical speech - *Shmirat HaLashon*) can be seen as expressions of Gevurah's structuring quality. One might learn about the foundations of Jewish Law.</li> + </ul> + </div> </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> + <!-- Tiferet --> + <div class="accordion-item" id="card-tiferet"> + <h3 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></h3> + <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 (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Compassion or mercy.">Rachamim</span>), Truth (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Truth.">Emet</span>). <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Beauty, harmony, glory; the central Sefirah balancing Chesed and Gevurah.">Tiferet</span> balances Chesed and Gevurah, often associated with Jacob and the harmonious nature of sacred texts.</p> + <p><strong>Psychological Aspect:</strong> Empathy balanced with discernment, integrity, self-acceptance, inner balance, holistic perspective.</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>Echoes in Tradition:</h4> + <p>Jacob, a patriarch who integrated diverse aspects of life, is often seen as embodying Tiferet's harmonizing quality. Sacred texts, in their entirety, are sometimes described with terms like Tiferet, implying beauty and balanced truth. The Psalms are rich with expressions of Divine compassion (Rachamim).</p> + <ul> + <li>How do narratives like the life of Jacob illustrate the struggle for and achievement of inner balance and truth? Studying the weekly Parsha can illuminate these themes.</li> + <li>Explore the Book of Psalms, focusing on verses about Divine compassion and truth.</li> + <li>The pursuit of peace (*Rodef Shalom*) and acts that beautify life (*Hiddur Mitzvah*) can be seen as manifestations of Tiferet.</li> + </ul> + </div> </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> + <!-- Netzach --> + <div class="accordion-item" id="card-netzach"> + <h3 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></h3> + <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. <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Victory, endurance, eternity.">Netzach</span> represents the drive to overcome obstacles and bring Divine energy into action, often associated with Moses.</p> + <p><strong>Psychological Aspect:</strong> Ambition, perseverance, creativity, passion, initiative, resilience.</p> + <p><strong>Divine Name:</strong> YHVH Tzva'ot (ืืืื ืฆืืืืช - Lord of Hosts).</p> + <p><strong>Archangel:</strong> Haniel.</p> + <div class="study-pathways"> + <h4>Echoes in Tradition:</h4> + <p>Moses leading the Israelites through the desert for forty years, despite challenges, is a powerful example of Netzach. The concept of the enduring nature of tradition and spiritual commitments ("Netzach Yisrael lo yeshaker" - 1 Samuel 15:29, "The Eternity/Victory of Israel will not deceive") is a core idea.</p> + <ul> + <li>How do stories of perseverance through adversity, such as the Exodus or the rebuilding of the Second Temple, demonstrate this quality of endurance?</li> + <li>Explore the concept of Bitachon (Trust/Confidence in God), which often fuels perseverance in spiritual paths.</li> + <li>Maintaining consistent spiritual practices, like daily prayer or study, reflects the quality of Netzach.</li> + </ul> + </div> </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> + <!-- Hod --> + <div class="accordion-item" id="card-hod"> + <h3 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></h3> + <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. <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Splendor, glory, acknowledgment, humility.">Hod</span> is the counterpart to Netzach, representing gratitude, humility, and intellectual formulation, often associated with Aaron the Priest.</p> + <p><strong>Psychological Aspect:</strong> Humility, gratitude, intellectual honesty, analytical skills, communication, acceptance.</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>Echoes in Tradition:</h4> + <p>Aaron's priestly service, with its detailed rituals and splendor, acknowledged God's majesty. The tradition of daily prayers and blessings (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Blessings.">Berachot</span>) are constant expressions of Hod (Thanksgiving and Acknowledgment).</p> + <ul> + <li>How do daily prayers and the recitation of blessings cultivate a sense of Hod? One might explore resources on Jewish Prayer.</li> + <li>The traditional ideal of reciting one hundred blessings daily (Talmud, Menachot 43b) emphasizes continuous acknowledgment and gratitude.</li> + <li>Study descriptions of sacred spaces and rituals (like the Temple service) to understand their splendor as an expression of Hod.</li> + </ul> + </div> </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> + <!-- Yesod --> + <div class="accordion-item" id="card-yesod"> + <h3 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></h3> + <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 (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="A righteous individual.">Tzaddik</span>). <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Foundation; the Sefirah that channels energies to Malkuth, associated with covenant and connection.">Yesod</span> funnels higher energies into Malkuth, representing the covenant (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="Covenant.">Brit</span>) and connection. Often associated with Joseph.</p> + <p><strong>Psychological Aspect:</strong> Power to connect and bond, subconscious, imagination, commitment, integrity, generativity.</p> + <p><strong>Divine Name:</strong> Shaddai El Chai (ืฉืื ืื ืื - Almighty Living God).</p> + <p><strong>Archangel:</strong> Gabriel.</p> + <div class="study-pathways"> + <h4>Echoes in Tradition:</h4> + <p>Joseph HaTzaddik, who maintained his moral purity and connection to God in challenging circumstances, is often seen as embodying Yesod. The Brit (covenant), particularly Brit Milah, is a foundational concept signifying connection and continuity.</p> + <ul> + <li>How does the concept of covenant (e.g., between the Divine and humanity, in relationships, in communal bonds) act as a foundation for holiness and shared purpose? One might study the life of Joseph.</li> + <li>Practices like Brit Milah and the sanctity of marriage (Kiddushin) are traditionally tied to Yesod's connective and generative power.</li> + <li>Reflect on how figures of great integrity and righteousness (Tzaddikim) in various traditions serve as conduits for higher values, reflecting Yesod.</li> + </ul> + </div> </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> + <!-- Malkuth --> + <div class="accordion-item" id="card-malkuth"> + <h3 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></h3> + <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 (<span class="term kabbalah-term" data-bs-toggle="tooltip" title="The immanent Divine Presence.">Shekhinah</span>). <span class="term kabbalah-term" data-bs-toggle="tooltip" title="Kingdom; the Sefirah representing the physical world and the immanent Divine Presence.">Malkuth</span> is the physical world, the plane of immanence, where Divine energy is actualized. Often associated with King David.</p> + <p><strong>Psychological Aspect:</strong> Action, embodiment, manifestation, humility (as receptive), practical application of spiritual principles, groundedness.</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>Echoes in Tradition:</h4> + <p>Malkhut is our world, the realm where we strive to manifest higher ideals and accept Divine sovereignty ("Kabbalat Ol Malkhut Shamayim") through our actions. King David, who established Jerusalem as a spiritual and national center, is often linked to this Sefirah.</p> + <ul> + <li>How do our daily actions and ethical choices contribute to revealing harmony and sanctity in the world? One might explore teachings about the Shekhinah.</li> + <li>The aspiration for a just and perfected world, often expressed in prayers for the restoration of ideal leadership or a messianic era, relates to the ultimate actualization of Malkhut.</li> + <li>Every deed performed with conscious intent to serve a higher purpose can be seen as an act that ennobles Malkhut.</li> + </ul> + </div> </div> </div> </div> </div> - </div> + </section> - <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> + <section class="study-hook-section mt-5" aria-labelledby="further-contemplation-heading"> + <h3 id="further-contemplation-heading">Pathways for Deeper Understanding</h3> + <p>The Sefirot of the Etz Chaim offer a rich tapestry of interconnected concepts that have sparked contemplation and insight for centuries. Exploring these attributes can be a journey into the nature of consciousness, existence, and the human spirit. These universal themes resonate across various wisdom traditions and philosophical inquiries.</p> + <p>For those interested in how these ideas are woven into the fabric of Jewish thought, the following resources may offer valuable perspectives:</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> + <li><strong>Canonical Texts:</strong> Exploring narratives and legal discussions in the <a href="https://www.sefaria.org/texts/Tanakh?lang=bi" target="_blank" rel="noopener noreferrer">Tanakh (Hebrew Bible)</a> or the dialectics of the <a href="https://www.sefaria.org/Talmud?lang=bi" target="_blank" rel="noopener noreferrer">Talmud</a> can reveal practical and philosophical applications of these attributes.</li> + <li><strong>Mystical Literature:</strong> Texts such as the <a href="https://www.sefaria.org/texts/Zohar?lang=bi" target="_blank" rel="noopener noreferrer">Zohar</a> and writings of later Kabbalists delve deeply into the Sefirot. Chabad.org offers many <a href="https://www.chabad.org/kabbalah/default_cdo/jewish/Kabbalah-Online.htm" target="_blank" rel="noopener noreferrer">articles on Kabbalah and Chasidic thought</a>.</li> + <li><strong>Philosophical Works:</strong> Jewish philosophers like Maimonides and others have grappled with concepts of Divine attributes and human virtues. <a href="https://www.myjewishlearning.com/category/study/jewish-thought/" target="_blank" rel="noopener noreferrer">MyJewishLearning's section on Jewish Thought</a> can be a starting point.</li> + <li><strong>Comparative Study:</strong> Reflecting on how themes of wisdom, understanding, compassion, strength, harmony, etc., are treated in other spiritual and philosophical systems can also enrich one's appreciation of the Etz Chaim's depth.</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> + <p class="text-center fst-italic mt-4">"The beginning of wisdom is this: Get wisdom. Though it cost all you have, get understanding." (Proverbs 4:7)</p> + </section> <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>ยฉ <span id="currentYear"></span> Etz Chaim Cheatsheet. 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> + <p class="small">This exploration draws upon concepts found within Kabbalistic tradition and general wisdom literature. Referenced sites are for further independent exploration.</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> +</main> +<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script> - // --- Accordion Interaction (called by Three.js) --- - function handleSefirahInteraction(sefirahId) { /* ... same as previous ... */ + document.getElementById('currentYear').textContent = new Date().getFullYear(); + document.getElementById('lastUpdatedDate').textContent = `Last Updated: ${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}`; + + var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl) + }) + + function handleSefirahInteraction(sefirahId) { const targetCard = document.getElementById(`card-${sefirahId}`); const targetCollapseId = `collapse${sefirahId.charAt(0).toUpperCase() + sefirahId.slice(1)}`; const targetCollapseEl = document.getElementById(targetCollapseId); @@ -360,17 +452,19 @@ setTimeout(() => { if (targetCard) targetCard.classList.remove('highlight-card'); }, 3000); } - // --- THREE.JS INTEGRATION --- let scene, camera, renderer; let sefirotSpheres = []; + let sefirotGlows = []; 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 minZoom = 8; + const maxZoom = 35; + let daatLines = []; + let starParticles; - const sefirotLayoutData = [ /* ... same layout data as previous ... */ + const sefirotLayoutData = [ { 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 }, @@ -383,7 +477,7 @@ { 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 ... */ + const pathConnections = [ ['keter', 'chokhmah'], ['keter', 'binah'], ['keter', 'tiferet'], ['chokhmah', 'binah'], ['chokhmah', 'chesed'], ['chokhmah', 'tiferet'], ['binah', 'gevurah'], ['binah', 'tiferet'], @@ -394,138 +488,141 @@ ['hod', 'yesod'], ['yesod', 'malkuth'] ]; - const daatPathConnections = [ /* ... same Da'at path data as previous ... */ + const daatPathConnections = [ ['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 }); + scene = new THREE.Scene(); + scene.background = new THREE.Color(0x0A0A10); + scene.fog = new THREE.FogExp2(0x0A0A10, 0.035); + camera = new THREE.PerspectiveCamera(55, container.clientWidth / container.clientHeight, 0.1, 100); + camera.position.set(0, 0, 20); + renderer = new THREE.WebGLRenderer({ antialias: true, alpha: 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); + const ambientLight = new THREE.AmbientLight(0x505070); + scene.add(ambientLight); + const dirLight1 = new THREE.DirectionalLight(0xfff0e0, 0.7); + dirLight1.position.set(1.5, 1, 2); + scene.add(dirLight1); + const dirLight2 = new THREE.DirectionalLight(0x8090ff, 0.4); + dirLight2.position.set(-1.5, -0.5, -1.5); + scene.add(dirLight2); + + sefirotLayoutData.forEach(data => { + const sphereRadius = data.id === 'tiferet' ? 1.0 : (data.isDaat ? 0.6 : 0.8); + const coreGeometry = new THREE.SphereGeometry(sphereRadius, 32, 32); + const coreMaterial = new THREE.MeshPhongMaterial({ color: data.color, emissive: data.color, emissiveIntensity: data.isDaat ? 0.5 : 0.35, shininess: data.isDaat ? 30: 80, specular: 0xdddddd, transparent: data.isDaat, opacity: data.isDaat ? 0.55 : 0.9, depthWrite: !data.isDaat }); + const sphere = new THREE.Mesh(coreGeometry, coreMaterial); 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'; + sphere.userData = { id: data.id, name_he: data.name_he, name_en: data.name_en, type: 'sefirah', isDaat: data.isDaat, baseEmissive: coreMaterial.emissiveIntensity }; + const glowRadius = sphereRadius * (data.isDaat ? 1.8 : 2.2); + const glowGeometry = new THREE.SphereGeometry(glowRadius, 32, 32); + const glowMaterial = new THREE.MeshBasicMaterial({ color: data.color, transparent: true, opacity: data.isDaat ? 0.08 : 0.12, blending: THREE.AdditiveBlending, depthWrite: false }); + const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial); + sphere.add(glowMesh); + sefirotGlows.push(glowMesh); + 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) }); + 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 }); + pathConnections.forEach(conn => { + const points = [new THREE.Vector3(...getSefirahPos(conn[0])), new THREE.Vector3(...getSefirahPos(conn[1]))]; + const geometry = new THREE.BufferGeometry().setFromPoints(points); + const material = new THREE.LineBasicMaterial({ color: 0x7788aa, linewidth: 0.8, transparent: true, opacity: 0.35 }); 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); + daatPathConnections.forEach(conn => { + const points = [new THREE.Vector3(...getSefirahPos(conn[0])), new THREE.Vector3(...getSefirahPos(conn[1]))]; + const geometry = new THREE.BufferGeometry().setFromPoints(points); + const material = new THREE.LineDashedMaterial({ color: 0xADD8E6, linewidth: 1, scale: 1, dashSize: 0.15, gapSize: 0.1, transparent: true, opacity: 0.45 }); + const line = new THREE.Line(geometry, material); + line.computeLineDistances(); + treeGroup.add(line); + daatLines.push(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)); + const particleCount = 2500; + const particleGeometry = new THREE.BufferGeometry(); + const particlePositions = new Float32Array(particleCount * 3); + const particleColors = new Float32Array(particleCount * 3); + const particleSizes = new Float32Array(particleCount); + for (let i = 0; i < particleCount; i++) { const x = (Math.random() - 0.5) * 80; const y = (Math.random() - 0.5) * 80; const z = (Math.random() - 0.5) * 60 - 10; particlePositions[i*3] = x; particlePositions[i*3+1] = y; particlePositions[i*3+2] = z; const c = new THREE.Color().setHSL(Math.random() * 0.2 + 0.55, 0.8, Math.random() * 0.3 + 0.5); particleColors[i*3]=c.r; particleColors[i*3+1]=c.g; particleColors[i*3+2]=c.b; particleSizes[i] = Math.random() * 0.1 + 0.02; } + particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions,3)); + particleGeometry.setAttribute('color', new THREE.BufferAttribute(particleColors,3)); + particleGeometry.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1)); + const particleMaterial = new THREE.PointsMaterial({ size: 0.15, vertexColors:true, transparent:true, opacity:0.7, blending: THREE.AdditiveBlending, depthWrite: false, sizeAttenuation: true }); + starParticles = new THREE.Points(particleGeometry, particleMaterial); + scene.add(starParticles); 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 + renderer.domElement.addEventListener('wheel', onCanvasWheel, { passive: false }); 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; + toggleBtn.addEventListener('click', () => { autoRotate = !autoRotate; toggleBtn.classList.toggle('active', autoRotate); container.style.cursor = autoRotate ? 'default' : 'grab';}); + let isDragging = false; 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; - }); + document.addEventListener('mousemove', (event) => { if (!isDragging || autoRotate) return; const dX = event.clientX-lastMouseX; const dY = event.clientY-lastMouseY; treeGroup.rotation.y+=dX*0.005; treeGroup.rotation.x+=dY*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 ... */ + function onCanvasMouseMove(event) { 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; } + if (isDragging || autoRotate) { if (INTERSECTED) INTERSECTED.material.emissiveIntensity = INTERSECTED.userData.baseEmissive; 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 (INTERSECTED != intersects[0].object) { if (INTERSECTED) INTERSECTED.material.emissiveIntensity = INTERSECTED.userData.baseEmissive; INTERSECTED = intersects[0].object; INTERSECTED.material.emissiveIntensity = INTERSECTED.userData.baseEmissive + 0.3; } 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'; } + } else { if (INTERSECTED) INTERSECTED.material.emissiveIntensity = INTERSECTED.userData.baseEmissive; INTERSECTED = null; if (!autoRotate) container.style.cursor = 'grab'; } } - function onCanvasClick(event) { /* ... same as previous ... */ + function onCanvasClick(event) { 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 ... */ + function onCanvasWheel(event) { event.preventDefault(); const d = event.deltaY > 0 ? 1 : -1; camera.position.z = THREE.MathUtils.clamp(camera.position.z + d * 0.8, minZoom, maxZoom); } + function onWindowResize() { 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 ... */ + function updateHtmlLabels() { 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 ... */ + const clock = new THREE.Clock(); + + function animateThreeJS() { 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); + const delta = clock.getDelta(); + if (autoRotate) { treeGroup.rotation.y += 0.0015; treeGroup.rotation.x += 0.0003 * Math.sin(Date.now() * 0.0001); } + daatLines.forEach(line => { line.material.dashOffset -= delta * 0.1; }); + sefirotGlows.forEach((glow, i) => { const baseOpacity = sefirotSpheres[i].userData.isDaat ? 0.08 : 0.12; glow.material.opacity = baseOpacity + Math.sin(Date.now() * 0.001 + i * 0.5) * 0.05; }); + if (starParticles) { starParticles.rotation.y += delta * 0.005; } + 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(); - }); + document.addEventListener('DOMContentLoaded', () => { initThreeJS(); }); </script> </body> -</html> - +</html> \ No newline at end of file