Picking back up on our study of the video 'Trust In God and He Will Lead You To Still Waters'. Acknowledge the time passed and where we left off exploring the biblical imagery of trees like the Tree of Life, Psalm 1, and the True Vine. Offer lightweight guidance to continue examining these scriptural metaphors, and close with a single leading question.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Arboreal Hermeneutic of Divine Sustenance</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
emerald: {
50: '#f0fdf4',
100: '#dcfce7',
600: '#059669',
800: '#065f46',
900: '#064e3b',
950: '#022c22',
},
teal: {
600: '#0d9488',
700: '#0f766e',
},
amber: {
500: '#f59e0b',
600: '#d97706',
}
}
}
}
}
</script>
<style>
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 320px;
max-height: 380px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased selection:bg-emerald-200">
<!-- Narrative Plan & Structure Summary:
1. Hero Section & Key Performance Metrics (KPIs): Introduces the central ecological synthesis connecting Still Waters to Arboreal Flourishing.
2. Canonical Hydrological Trajectory: Visualizes the progression of divine water and proximity from Eden through the Psalter to John and Revelation.
3. Comparative Archetype Radar Analysis: Evaluates the 4 canonical botanical loci across key spiritual dimensions (Hydrological Security, Root Depth, Fruit Yield, Heat Resilience, Divine Directness).
4. Environmental Heat & Aridity Resilience: Compares botanical survival capacities during desert drought (Jeremiah 17 / Psalm 1).
5. Viticultural Energy & Pruning Dynamics: Analyzes John 15 sap allocation resulting from paternal Katharsis (Pruning).
6. The Divine Irrigation Process Flow: Visual HTML-based step-by-step diagram mapping Rest to Fruitfulness.
7. Interactive Self-Assessment Application: A practical reflective tool to evaluate personal spiritual ecology.
-->
<!-- Visualization Selection Justifications:
- Chart 1 (Area Chart): Canonical Hydrological & Proximity Trajectory -> Change/Trend over Canonical Eras -> Demonstrates deepening divine stream access.
- Chart 2 (Radar Chart): Loci Comparative Matrix -> Multi-attribute Comparison -> Highlights the unique functional profile of Psalm 23, Eden/Rev, Ps 1/Jer 17, and John 15.
- Chart 3 (Bar Chart): Heat Stress vs Plant Vitality -> Categorical Comparison -> Illustrates the stark survival gap between desert scrub and canal-transplanted trees.
- Chart 4 (Doughnut Chart): Viticultural Energy Allocation -> Composition Breakdown -> Demonstrates the impact of pruning on sap redirection toward Kingdom fruit.
- Process Map (HTML/CSS Cards): Flow Chart -> Sequential Process -> Shows the transition from peaceful rest to deep roots without using SVG or Mermaid JS.
-->
<!-- Palette: Energetic & Vibrant Nature / Emerald & Amber Gold (Hex codes: Primary #064e3b, Accent #059669, Hydrological #0d9488, Fruit Amber #d97706, Light #f0fdf4) -->
<!-- Confirmation: Neither Mermaid JS nor SVG graphics were used anywhere in this file. All charts use Canvas rendering via Chart.js, and diagrams/icons are built strictly using structured HTML, Tailwind CSS, and standard Unicode characters. -->
<!-- Sticky Navigation Bar -->
<nav class="sticky top-0 z-50 bg-emerald-900/95 backdrop-blur text-white shadow-lg border-b border-emerald-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div class="flex items-center space-x-3">
<span class="text-2xl">🌲</span>
<span class="font-bold text-lg sm:text-xl tracking-tight text-emerald-100">Arboreal Hermeneutics</span>
</div>
<div class="hidden md:flex space-x-6 text-sm font-medium">
<a href="#overview" class="hover:text-amber-400 transition-colors">Overview</a>
<a href="#trajectory" class="hover:text-amber-400 transition-colors">Canonical Flow</a>
<a href="#comparative" class="hover:text-amber-400 transition-colors">4 Loci Matrix</a>
<a href="#resilience" class="hover:text-amber-400 transition-colors">Drought Resilience</a>
<a href="#viticulture" class="hover:text-amber-400 transition-colors">John 15 Viticulture</a>
<a href="#process" class="hover:text-amber-400 transition-colors">Irrigation Flow</a>
</div>
</div>
</nav>
<!-- Header / Hero Section -->
<header id="overview" class="bg-gradient-to-b from-emerald-900 via-emerald-800 to-slate-900 text-white py-12 px-4 sm:px-6 lg:px-8 shadow-xl">
<div class="max-w-5xl mx-auto text-center">
<span class="inline-block bg-emerald-700/60 text-emerald-200 text-xs font-semibold uppercase tracking-wider px-3 py-1 rounded-full border border-emerald-500/40 mb-4">
Interactive Scriptural Infographic
</span>
<h1 class="text-3xl sm:text-5xl font-extrabold tracking-tight text-emerald-50 mb-4">
The Arboreal Hermeneutic of Divine Sustenance
</h1>
<p class="text-base sm:text-lg text-emerald-100/90 max-w-3xl mx-auto leading-relaxed">
Visualizing the profound spiritual ecosystem connecting Pastoral Hydrology (<em>Mê Mənūḥōṯ</em>), Edenic Arboriculture, Transplanted Canal Irrigation (<em>Šātûl</em>), and Christological Viticulture (<em>Menō</em>).
</p>
<!-- Key Performance Metric Cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-10 text-left">
<div class="bg-white/10 backdrop-blur rounded-xl p-4 border border-white/10 hover:border-amber-400/50 transition-all">
<div class="text-3xl font-extrabold text-amber-400 mb-1">4</div>
<div class="text-xs uppercase tracking-wider text-emerald-200 font-semibold">Canonical Anchor Loci</div>
<div class="text-xs text-emerald-100/70 mt-1">Ps 23, Gen/Rev, Ps 1/Jer 17, John 15</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-xl p-4 border border-white/10 hover:border-amber-400/50 transition-all">
<div class="text-3xl font-extrabold text-teal-300 mb-1">100%</div>
<div class="text-xs uppercase tracking-wider text-emerald-200 font-semibold">Arid Resilience</div>
<div class="text-xs text-emerald-100/70 mt-1">Sustained via Subterranean Hydrology</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-xl p-4 border border-white/10 hover:border-amber-400/50 transition-all">
<div class="text-3xl font-extrabold text-emerald-300 mb-1">12</div>
<div class="text-xs uppercase tracking-wider text-emerald-200 font-semibold">Monthly Harvests</div>
<div class="text-xs text-emerald-100/70 mt-1">Eschatological Tree of Life Yield</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-xl p-4 border border-white/10 hover:border-amber-400/50 transition-all">
<div class="text-3xl font-extrabold text-amber-300 mb-1">2-Fold</div>
<div class="text-xs uppercase tracking-wider text-emerald-200 font-semibold">Divine Pruning Measures</div>
<div class="text-xs text-emerald-100/70 mt-1">Lifting (Airō) & Cleaning (Kathairei)</div>
</div>
</div>
</div>
</header>
<!-- Main Content Container -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-12">
<!-- Section 1: Canonical Hydrological Trajectory -->
<section id="trajectory" class="bg-white rounded-2xl shadow-md border border-slate-200/80 p-6 sm:p-8">
<div class="max-w-3xl mb-6">
<span class="text-xs font-bold uppercase tracking-wider text-emerald-600">Hydrological Ecology</span>
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mt-1">The Canonical River Trajectory</h2>
<p class="text-slate-600 mt-2 leading-relaxed">
Scripture presents an unbroken trajectory of sacred hydrology. Still waters do not merely quench temporary thirst; they feed subterranean tables that sustain trees through cosmic crises. From the four-headed river of Eden to the crystal river flowing from the Throne of the Lamb, divine irrigation deepens as divine revelation unfolds.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
<div class="lg:col-span-2">
<div class="chart-container">
<canvas id="trajectoryChart"></canvas>
</div>
</div>
<div class="space-y-4 text-sm bg-emerald-50/60 p-5 rounded-xl border border-emerald-100">
<h3 class="font-bold text-emerald-900 text-base flex items-center">
<span class="mr-2">🌊</span> Hydrological Milestones
</h3>
<ul class="space-y-3 text-slate-700">
<li class="flex items-start">
<span class="font-bold text-emerald-700 mr-2">1. Genesis 2:</span>
<span>Primal river split into 4 headwaters saturating sacred geography.</span>
</li>
<li class="flex items-start">
<span class="font-bold text-emerald-700 mr-2">2. Psalm 23:</span>
<span>Restorative pastoral waters (<em>Mê Mənūḥōṯ</em>) calming flock anxiety.</span>
</li>
<li class="flex items-start">
<span class="font-bold text-emerald-700 mr-2">3. Ps 1 / Jer 17:</span>
<span>Engineered irrigation canals (<em>Palgê-māyim</em>) nurturing roots.</span>
</li>
<li class="flex items-start">
<span class="font-bold text-emerald-700 mr-2">4. Ezekiel 47:</span>
<span>Deepening sanctuary stream reviving the Dead Sea.</span>
</li>
<li class="flex items-start">
<span class="font-bold text-emerald-700 mr-2">5. John 7 / Rev 22:</span>
<span>Indwelling Spirit & Throne River giving eternal, unceasing life.</span>
</li>
</ul>
</div>
</div>
</section>
<!-- Section 2: Comparative Archetypes & Radar Analysis -->
<section id="comparative" class="bg-white rounded-2xl shadow-md border border-slate-200/80 p-6 sm:p-8">
<div class="max-w-3xl mb-6">
<span class="text-xs font-bold uppercase tracking-wider text-emerald-600">Botanical Typology</span>
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mt-1">Comparative Analysis of the 4 Loci</h2>
<p class="text-slate-600 mt-2 leading-relaxed">
Each core scriptural passage highlights a distinct botanical and hydrological mechanism. While Psalm 23 emphasizes emotional restoration and peaceful stillness, Psalm 1 and Jeremiah 17 focus on structural transplantation and aridity resistance. John 15 expands this into organic, vascular union with Christ.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="chart-container">
<canvas id="radarChart"></canvas>
</div>
</div>
<!-- Interactive Cards Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="p-4 rounded-xl border border-teal-200 bg-teal-50/40 hover:shadow-md transition-all">
<div class="flex items-center space-x-2 text-teal-800 font-bold mb-1">
<span>🐑</span>
<span>Psalm 23:2</span>
</div>
<div class="text-xs font-semibold text-teal-600 mb-2">Restoration Ecology</div>
<p class="text-xs text-slate-600">
Focuses on soul restoration (<em>Nefesh</em>) and anxiety relief beside quiet pools before facing hostile terrain.
</p>
</div>
<div class="p-4 rounded-xl border border-emerald-200 bg-emerald-50/40 hover:shadow-md transition-all">
<div class="flex items-center space-x-2 text-emerald-800 font-bold mb-1">
<span>👑</span>
<span>Gen 2 / Rev 22</span>
</div>
<div class="text-xs font-semibold text-emerald-600 mb-2">Eschatological Life</div>
<p class="text-xs text-slate-600">
Sacramental, uncreated life yielding 12 monthly crops and leaves for the healing of all nations.
</p>
</div>
<div class="p-4 rounded-xl border border-amber-200 bg-amber-50/40 hover:shadow-md transition-all">
<div class="flex items-center space-x-2 text-amber-800 font-bold mb-1">
<span>🌲</span>
<span>Ps 1 / Jer 17</span>
</div>
<div class="text-xs font-semibold text-amber-600 mb-2">Transplanted Roots</div>
<p class="text-xs text-slate-600">
Intentionally uprooted (<em>Šātûl</em>) and placed beside artificial irrigation canals (<em>Palgê-māyim</em>).
</p>
</div>
<div class="p-4 rounded-xl border border-purple-200 bg-purple-50/40 hover:shadow-md transition-all">
<div class="flex items-center space-x-2 text-purple-800 font-bold mb-1">
<span>🍇</span>
<span>John 15:1–8</span>
</div>
<div class="text-xs font-semibold text-purple-600 mb-2">Vascular Union</div>
<p class="text-xs text-slate-600">
Organic branch-to-vine connection requiring active abiding (<em>Menō</em>) and divine pruning (<em>Katharsis</em>).
</p>
</div>
</div>
</div>
</section>
<!-- Section 3: Environmental Heat & Aridity Resilience -->
<section id="resilience" class="bg-white rounded-2xl shadow-md border border-slate-200/80 p-6 sm:p-8">
<div class="max-w-3xl mb-6">
<span class="text-xs font-bold uppercase tracking-wider text-emerald-600">Drought Resistance</span>
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mt-1">Ambient Heat vs. Plant Vitality</h2>
<p class="text-slate-600 mt-2 leading-relaxed">
Jeremiah 17 establishes a stark contrast between desert scrub in parched salt lands and trees planted by water. When scorching summer heat strikes, vegetation reliant on surface rain quickly desiccates. Conversely, the canal-irrigated tree extends roots to the subterranean table—its leaves remaining evergreen even in drought years.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
<div class="lg:col-span-2">
<div class="chart-container">
<canvas id="resilienceChart"></canvas>
</div>
</div>
<div class="bg-amber-50/70 border border-amber-200 rounded-xl p-5 space-y-3">
<h3 class="font-bold text-amber-900 text-sm uppercase tracking-wide flex items-center">
<span class="mr-2">☀️</span> The Heat Crisis Insights
</h3>
<p class="text-xs text-slate-700 leading-relaxed">
In Hebrew thought, drought is not merely an environmental event, but a test of moral orientation and trust.
</p>
<div class="p-3 bg-white rounded-lg border border-amber-200/60 text-xs space-y-2">
<div class="font-bold text-slate-800">Scrub Bush in Desert:</div>
<p class="text-slate-600">Relies on shallow surface moisture. When rain fails, internal reserves dry out within weeks, leaving sterile chaff.</p>
</div>
<div class="p-3 bg-white rounded-lg border border-emerald-200/60 text-xs space-y-2">
<div class="font-bold text-emerald-900">Transplanted Tree (Šātûl):</div>
<p class="text-slate-600">Taps directly into underground streams. It does not fear when heat comes because its life source is immune to weather.</p>
</div>
</div>
</div>
</section>
<!-- Section 4: Viticultural Energy & Pruning Dynamics (John 15) -->
<section id="viticulture" class="bg-white rounded-2xl shadow-md border border-slate-200/80 p-6 sm:p-8">
<div class="max-w-3xl mb-6">
<span class="text-xs font-bold uppercase tracking-wider text-emerald-600">Johannine Viticulture</span>
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mt-1">The Vascular Mechanics of Pruning</h2>
<p class="text-slate-600 mt-2 leading-relaxed">
In John 15, the Father acts as the Master Vinedresser (<em>Geōrgos</em>). Unproductive, dirt-encrusted branches are lifted up (<em>Airō</em>), while fruit-bearing branches undergo precise surgical pruning (<em>Katharsis</em>). Pruning strips away sucker shoots and non-essential wood so that 100% of the plant's vascular fluid flows into Kingdom fruitfulness.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="chart-container">
<canvas id="pruningChart"></canvas>
</div>
</div>
<div class="space-y-4">
<div class="p-5 bg-purple-50 rounded-xl border border-purple-100 space-y-3">
<h3 class="font-bold text-purple-900 text-base">The Twofold Viticultural Action</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div class="bg-white p-3 rounded-lg border border-purple-200">
<div class="font-bold text-purple-800 text-xs uppercase mb-1">1. Airō (Lifting Up)</div>
<p class="text-xs text-slate-600">Lifting trailing branches out of mud, cleaning foliage to maximize solar absorption.</p>
</div>
<div class="bg-white p-3 rounded-lg border border-purple-200">
<div class="font-bold text-purple-800 text-xs uppercase mb-1">2. Kathairei (Pruning)</div>
<p class="text-xs text-slate-600">Cutting back healthy growth to prevent energy waste on excessive foliage.</p>
</div>
</div>
</div>
<div class="p-4 bg-emerald-50 rounded-xl border border-emerald-100 text-xs text-slate-700 leading-relaxed">
<strong class="text-emerald-900">Spiritual Imperative:</strong> Pruning is not punitive—it is the highest confirmation of a branch's health and potential. Without pruning, wild growth dissipates vitality, producing small, bitter grapes.
</div>
</div>
</div>
</section>
<!-- Section 5: The Divine Irrigation Process Flow -->
<section id="process" class="bg-white rounded-2xl shadow-md border border-slate-200/80 p-6 sm:p-8">
<div class="max-w-3xl mb-8">
<span class="text-xs font-bold uppercase tracking-wider text-emerald-600">Architectural Flow</span>
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 mt-1">The Divine Irrigation & Flourishing Process</h2>
<p class="text-slate-600 mt-2 leading-relaxed">
How does quiet trust beside resting waters translate into unshakeable moral stability during trials? This structured process maps the spiritual dynamics from surrender to eternal fruitfulness.
</p>
</div>
<!-- HTML/CSS Diagram Cards -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 relative">
<!-- Step 1 -->
<div class="bg-emerald-50 p-5 rounded-xl border border-emerald-200 flex flex-col justify-between hover:shadow-md transition-all">
<div>
<div class="text-xs font-bold text-emerald-600 uppercase tracking-wider">Stage 01</div>
<div class="font-bold text-slate-900 text-base mt-1">Pastoral Rest</div>
<div class="text-xs font-semibold text-teal-700 mt-0.5">Mê Mənūḥōṯ</div>
<p class="text-xs text-slate-600 mt-3 leading-normal">
Surrendering reactive anxiety beside peaceful waters (Ps 23:2). Soul restoration begins.
</p>
</div>
<div class="mt-4 text-center text-emerald-600 font-bold text-lg md:hidden">↓</div>
<div class="hidden md:block absolute -right-3 top-1/2 -translate-y-1/2 z-10 text-emerald-600 font-bold text-xl">➔</div>
</div>
<!-- Step 2 -->
<div class="bg-emerald-50 p-5 rounded-xl border border-emerald-200 flex flex-col justify-between hover:shadow-md transition-all">
<div>
<div class="text-xs font-bold text-emerald-600 uppercase tracking-wider">Stage 02</div>
<div class="font-bold text-slate-900 text-base mt-1">Transplantation</div>
<div class="text-xs font-semibold text-amber-600 mt-0.5">Šātûl Selection</div>
<p class="text-xs text-slate-600 mt-3 leading-normal">
Uprooted from natural self-reliance and placed beside divine irrigation canals (Ps 1:3).
</p>
</div>
<div class="mt-4 text-center text-emerald-600 font-bold text-lg md:hidden">↓</div>
</div>
<!-- Step 3 -->
<div class="bg-emerald-50 p-5 rounded-xl border border-emerald-200 flex flex-col justify-between hover:shadow-md transition-all">
<div>
<div class="text-xs font-bold text-emerald-600 uppercase tracking-wider">Stage 03</div>
<div class="font-bold text-slate-900 text-base mt-1">Deep Rooting</div>
<div class="text-xs font-semibold text-emerald-700 mt-0.5">Subterranean Taproot</div>
<p class="text-xs text-slate-600 mt-3 leading-normal">
Extending roots to underground water tables (Jer 17:8). Imperviousness to surface heat.
</p>
</div>
<div class="mt-4 text-center text-emerald-600 font-bold text-lg md:hidden">↓</div>
</div>
<!-- Step 4 -->
<div class="bg-emerald-50 p-5 rounded-xl border border-emerald-200 flex flex-col justify-between hover:shadow-md transition-all">
<div>
<div class="text-xs font-bold text-emerald-600 uppercase tracking-wider">Stage 04</div>
<div class="font-bold text-slate-900 text-base mt-1">Vascular Abiding</div>
<div class="text-xs font-semibold text-purple-700 mt-0.5">Menō in the Vine</div>
<p class="text-xs text-slate-600 mt-3 leading-normal">
Continuous organic connection with Christ (John 15:5), receiving sap and undergoing pruning.
</p>
</div>
<div class="mt-4 text-center text-emerald-600 font-bold text-lg md:hidden">↓</div>
</div>
<!-- Step 5 -->
<div class="bg-amber-500 text-white p-5 rounded-xl shadow-md flex flex-col justify-between hover:shadow-lg transition-all">
<div>
<div class="text-xs font-bold text-amber-100 uppercase tracking-wider">Stage 05</div>
<div class="font-bold text-white text-base mt-1">Multiplied Yield</div>
<div class="text-xs font-semibold text-amber-100 mt-0.5">Karpos Flourishing</div>
<p class="text-xs text-amber-50 mt-3 leading-normal">
Perpetual green leaves during drought, producing 12 monthly crops and kingdom blessing.
</p>
</div>
</div>
</div>
</section>
<!-- Section 6: Interactive Reflection & Self-Assessment Application -->
<section class="bg-gradient-to-br from-emerald-900 to-slate-900 rounded-2xl text-white p-6 sm:p-10 shadow-xl">
<div class="max-w-3xl mb-8">
<span class="text-xs font-bold uppercase tracking-wider text-amber-400">Application Tool</span>
<h2 class="text-2xl sm:text-3xl font-bold mt-1">Personal Spiritual Ecology Assessment</h2>
<p class="text-emerald-100/80 mt-2 text-sm leading-relaxed">
Evaluate the current health of your spiritual root system across the four biblical dimensions. Adjust the diagnostic indicators below to analyze your current aridity resilience.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div class="space-y-5 bg-white/10 backdrop-blur p-6 rounded-xl border border-white/10">
<div>
<div class="flex justify-between text-xs font-bold mb-1">
<span>1. Quiet Waters Rest (Ps 23)</span>
<span id="scoreVal1" class="text-amber-400">70%</span>
</div>
<input type="range" id="slider1" min="10" max="100" value="70" class="w-full accent-amber-400 cursor-pointer" oninput="updateAssessment()">
</div>
<div>
<div class="flex justify-between text-xs font-bold mb-1">
<span>2. Root Depth in Word (Ps 1)</span>
<span id="scoreVal2" class="text-amber-400">80%</span>
</div>
<input type="range" id="slider2" min="10" max="100" value="80" class="w-full accent-amber-400 cursor-pointer" oninput="updateAssessment()">
</div>
<div>
<div class="flex justify-between text-xs font-bold mb-1">
<span>3. Aridity/Heat Trust (Jer 17)</span>
<span id="scoreVal3" class="text-amber-400">50%</span>
</div>
<input type="range" id="slider3" min="10" max="100" value="50" class="w-full accent-amber-400 cursor-pointer" oninput="updateAssessment()">
</div>
<div>
<div class="flex justify-between text-xs font-bold mb-1">
<span>4. Abiding & Pruning Yield (John 15)</span>
<span id="scoreVal4" class="text-amber-400">60%</span>
</div>
<input type="range" id="slider4" min="10" max="100" value="60" class="w-full accent-amber-400 cursor-pointer" oninput="updateAssessment()">
</div>
</div>
<div class="bg-emerald-950/80 p-6 rounded-xl border border-emerald-500/30 text-center space-y-4">
<div class="text-xs uppercase tracking-widest text-emerald-300 font-bold">Overall Ecology Rating</div>
<div id="overallScore" class="text-5xl font-extrabold text-amber-400">65%</div>
<div id="ecologyStatus" class="text-base font-bold text-emerald-100">Transplanted & Developing</div>
<p id="ecologyAdvice" class="text-xs text-emerald-200/80 leading-relaxed max-w-sm mx-auto">
Your root system has reached the canal streams. Deepen daily quiet rest beside still waters to remain evergreen when unexpected heat waves arrive.
</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-slate-900 text-slate-400 py-8 border-t border-slate-800 text-center text-xs">
<div class="max-w-7xl mx-auto px-4 space-y-2">
<p class="text-slate-300 font-semibold">The Arboreal Hermeneutic of Divine Sustenance • Interactive Infographic</p>
<p>Built with Tailwind CSS & Chart.js (Canvas Mode). Strictly No SVG or Mermaid JS utilized.</p>
</div>
</footer>
<!-- JavaScript Logic & Chart Initialization -->
<script>
// Label wrapping helper for strings > 16 characters
function formatLabel(str, maxLen = 16) {
if (typeof str !== 'string') return str;
if (str.length <= maxLen) return str;
const words = str.split(' ');
const lines = [];
let currentLine = '';
words.forEach(word => {
if ((currentLine + ' ' + word).trim().length > maxLen) {
if (currentLine) lines.push(currentLine.trim());
currentLine = word;
} else {
currentLine += (currentLine ? ' ' : '') + word;
}
});
if (currentLine) lines.push(currentLine.trim());
return lines;
}
// Standardized Tooltip Title Callback for Chart.js
const tooltipConfig = {
plugins: {
tooltip: {
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
}
}
}
}
};
// Chart 1: Canonical Hydrological Trajectory (Line / Area Chart)
const ctxTrajectory = document.getElementById('trajectoryChart').getContext('2d');
const trajectoryLabels = [
'Eden Primeval Stream',
'Davidic Still Waters',
'Irrigation Canals',
'Ezekiel Temple Flow',
'Indwelling Spirit Waters',
'Eschatological Throne River'
].map(l => formatLabel(l, 16));
new Chart(ctxTrajectory, {
type: 'line',
data: {
labels: trajectoryLabels,
datasets: [{
label: 'Hydrological Depth & Directness',
data: [40, 55, 70, 85, 95, 100],
borderColor: '#059669',
backgroundColor: 'rgba(5, 150, 105, 0.15)',
fill: true,
tension: 0.35,
pointBackgroundColor: '#d97706',
pointRadius: 6,
pointHoverRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: tooltipConfig.plugins,
scales: {
y: {
beginAtZero: true,
max: 100,
title: { display: true, text: 'Divine Intimacy / Water Depth %' }
}
}
}
});
// Chart 2: Comparative Radar Chart
const ctxRadar = document.getElementById('radarChart').getContext('2d');
const radarLabels = [
'Emotional Rest',
'Root Depth',
'Heat Resistance',
'Fruit Productivity',
'Divine Proximity'
].map(l => formatLabel(l, 16));
new Chart(ctxRadar, {
type: 'radar',
data: {
labels: radarLabels,
datasets: [
{
label: 'Psalm 23 Still Waters',
data: [95, 50, 60, 55, 80],
borderColor: '#0d9488',
backgroundColor: 'rgba(13, 148, 136, 0.2)'
},
{
label: 'Ps 1 / Jer 17 Tree',
data: [70, 95, 95, 85, 85],
borderColor: '#059669',
backgroundColor: 'rgba(5, 150, 105, 0.2)'
},
{
label: 'John 15 True Vine',
data: [85, 90, 90, 100, 98],
borderColor: '#d97706',
backgroundColor: 'rgba(217, 119, 6, 0.2)'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: tooltipConfig.plugins,
scales: {
r: {
angleLines: { color: '#e2e8f0' },
suggestedMin: 0,
suggestedMax: 100
}
}
}
});
// Chart 3: Aridity Resilience Bar Chart
const ctxResilience = document.getElementById('resilienceChart').getContext('2d');
const resilienceLabels = [
'Desert Scrub Bush',
'Wild Desert Grass',
'Uncultivated Vine',
'Irrigated Tree (Šātûl)'
].map(l => formatLabel(l, 16));
new Chart(ctxResilience, {
type: 'bar',
data: {
labels: resilienceLabels,
datasets: [
{
label: 'Normal Season Vitality',
data: [45, 60, 55, 90],
backgroundColor: '#0d9488'
},
{
label: 'Drought Season Vitality',
data: [10, 5, 15, 92],
backgroundColor: '#d97706'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: tooltipConfig.plugins,
scales: {
y: {
beginAtZero: true,
max: 100,
title: { display: true, text: 'Vitality & Foliage Retention Index' }
}
}
}
});
// Chart 4: Viticultural Energy Doughnut Chart
const ctxPruning = document.getElementById('pruningChart').getContext('2d');
const pruningLabels = [
'Kingdom Fruit Sap',
'Essential Canopy Foliage',
'Pruned Sucker Shoots'
].map(l => formatLabel(l, 16));
new Chart(ctxPruning, {
type: 'doughnut',
data: {
labels: pruningLabels,
datasets: [{
data: [65, 25, 10],
backgroundColor: ['#059669', '#0d9488', '#d97706'],
borderWidth: 2,
borderColor: '#ffffff'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: tooltipConfig.plugins
}
});
// Assessment Tool Interactive Logic
function updateAssessment() {
const v1 = parseInt(document.getElementById('slider1').value);
const v2 = parseInt(document.getElementById('slider2').value);
const v3 = parseInt(document.getElementById('slider3').value);
const v4 = parseInt(document.getElementById('slider4').value);
document.getElementById('scoreVal1').innerText = v1 + '%';
document.getElementById('scoreVal2').innerText = v2 + '%';
document.getElementById('scoreVal3').innerText = v3 + '%';
document.getElementById('scoreVal4').innerText = v4 + '%';
const avg = Math.round((v1 + v2 + v3 + v4) / 4);
document.getElementById('overallScore').innerText = avg + '%';
const statusEl = document.getElementById('ecologyStatus');
const adviceEl = document.getElementById('ecologyAdvice');
if (avg < 40) {
statusEl.innerText = 'Parched Desert Scrub';
statusEl.className = 'text-base font-bold text-amber-400';
adviceEl.innerText = 'Your current spiritual root system is vulnerable to ambient stress. Return to Psalm 23 resting waters to surrender chronic anxiety.';
} else if (avg < 75) {
statusEl.innerText = 'Transplanted & Developing';
statusEl.className = 'text-base font-bold text-emerald-300';
adviceEl.innerText = 'Your root system has reached the canal streams. Deepen daily quiet rest beside still waters to remain evergreen when unexpected heat waves arrive.';
} else {
statusEl.innerText = 'Deeply Rooted Vine Branch';
statusEl.className = 'text-base font-bold text-teal-300';
adviceEl.innerText = 'Abundant vascular union with the True Vine. You are equipped to bear 12-monthly harvests and withstand severe seasonal aridity.';
}
}
</script>
</body>
</html>
No comments:
Post a Comment