<style>
.mbti-dashboard-wrapper {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f7f6;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.mbti-dashboard-wrapper h1,
.mbti-dashboard-wrapper h2,
.mbti-dashboard-wrapper h3 {
color: #2c3e50;
}
.mbti-dashboard-wrapper h1 { text-align: center; }
.mbti-dashboard-wrapper .subtitle {
text-align: center;
color: #666;
margin-bottom: 30px;
}
.mbti-dashboard-wrapper .container {
background: #fff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
margin-bottom: 40px;
}

/* Interactive Heatmap Controls */
.mbti-dashboard-wrapper .controls {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 25px;
padding: 15px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.mbti-dashboard-wrapper select,
.mbti-dashboard-wrapper input[type=”range”] {
padding: 10px;
border-radius: 6px;
border: 1px solid #cbd5e1;
font-size: 1em;
background-color: #fff;
cursor: pointer;
}
.mbti-dashboard-wrapper select:focus { outline: none; border-color: #3b82f6; }
.mbti-dashboard-wrapper label { display: block; margin-bottom: 5px; color: #475569; }

/* Heatmap Grid */
.mbti-dashboard-wrapper .heatmap-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
}
.mbti-dashboard-wrapper .heatmap-cell {
padding: 15px;
border-radius: 8px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 130px;
transition: opacity 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.mbti-dashboard-wrapper .heatmap-cell:hover { transform: translateY(-3px); }
.mbti-dashboard-wrapper .cell-header { font-weight: bold; font-size: 1.25em; }
.mbti-dashboard-wrapper .cell-mbti { font-size: 0.9em; opacity: 0.95; margin-bottom: 10px; }
.mbti-dashboard-wrapper .cell-scores { font-size: 0.95em; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 8px; }

/* Analysis Panel */
.mbti-dashboard-wrapper .analysis-panel {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
display: none; /* Hidden until selection is made */
}
.mbti-dashboard-wrapper .analysis-card {
background: #f8fafc;
padding: 15px 20px;
border-left: 5px solid #3b82f6;
margin-bottom: 15px;
border-radius: 0 8px 8px 0;
}
.mbti-dashboard-wrapper .analysis-card h4 {
margin: 0 0 8px 0;
color: #1e293b;
font-size: 1.1em;
}
.mbti-dashboard-wrapper .analysis-card p {
margin: 0;
color: #475569;
}
.mbti-dashboard-wrapper .conflict-high { border-left-color: #ef4444; }
.mbti-dashboard-wrapper .conflict-medium { border-left-color: #f59e0b; }
.mbti-dashboard-wrapper .conflict-low { border-left-color: #10b981; }
</style>

<div class=”mbti-dashboard-wrapper”>
<h1>MBTI Archetype Compatibility Dashboard</h1>
<p class=”subtitle”>Global Heatmap & ESFJ Deep Analysis Tool</p>

<div class=”container”>
<h2>1. Global Heatmap Overview</h2>
<div class=”controls”>
<div>
<label for=”groupFilter”><strong>Filter by Group:</strong></label>
<select id=”groupFilter” onchange=”renderHeatmap()”>
<option value=”All”>All Groups</option>
<option value=”Analyst”>Analysts</option>
<option value=”Diplomat”>Diplomats</option>
<option value=”Explorer”>Explorers</option>
<option value=”Sentinel”>Sentinels</option>
</select>
</div>
<div>
<label for=”intensitySlider”><strong>Color Intensity:</strong></label>
<input type=”range” id=”intensitySlider” min=”0.3″ max=”1″ step=”0.1″ value=”1″ oninput=”adjustIntensity()”>
</div>
</div>
<div id=”heatmap” class=”heatmap-grid”></div>
</div>

<div class=”container”>
<h2>2. Deep Analysis: ESFJ Interaction Dynamics</h2>
<div class=”controls” style=”justify-content: flex-start;”>
<div style=”width: 100%; max-width: 400px;”>
<label for=”characterSelect”><strong>Select Character for Detailed Analysis:</strong></label>
<select id=”characterSelect” onchange=”updateAnalysis()” style=”width: 100%;”>
<option value=””>– Choose an Archetype –</option>
</select>
</div>
</div>

<div id=”analysisPanel” class=”analysis-panel”>
<h3 id=”panelHeader”>Character Name (MBTI)</h3>

<div class=”analysis-card”>
<h4>Character & Core Trait</h4>
<p id=”panelTrait”>Trait description goes here.</p>
</div>

<div class=”analysis-card”>
<h4>ESFJ Interaction Dynamics</h4>
<p id=”panelDynamics”>Dynamics description goes here.</p>
</div>

<div id=”conflictCard” class=”analysis-card”>
<h4>Compatibility & Conflict Probability</h4>
<p id=”panelConflict”>Conflict probability goes here.</p>
</div>
</div>
</div>
</div>

<script>
// Expanded Data Structure with Deep Analysis Text
const mbtiData = [
{
name: “Menassah”, mbti: “ISFJ”, group: “Sentinel”, esfj: 5, lead: 5,
trait: “The Defender – Loyal & Practical.”,
dynamics: “Highly compatible; shared focus on tradition and community harmony.”,
conflict: “Low probability.”
},
{
name: “Ruben”, mbti: “ESFP”, group: “Explorer”, esfj: 5, lead: 3,
trait: “The Entertainer – Spontaneous & Energetic.”,
dynamics: “Excellent synergy; shared extroversion and focus on present experiences.”,
conflict: “Low probability.”
},
{
name: “Asher”, mbti: “ISTJ”, group: “Sentinel”, esfj: 5, lead: 3,
trait: “The Logistician – Organized & Duty-driven.”,
dynamics: “Very strong; shared respect for structure and established rules.”,
conflict: “Low probability.”
},
{
name: “Isaachar”, mbti: “ISFP”, group: “Explorer”, esfj: 3, lead: 5,
trait: “The Adventurer – Artistic & Sensitive.”,
dynamics: “Moderate; both value harmony, but ISFP’s need for independence can chafe against ESFJ’s desire for group cohesion.”,
conflict: “Medium probability.”
},
{
name: “Naphthali”, mbti: “INFP”, group: “Diplomat”, esfj: 3, lead: 5,
trait: “The Mediator – Idealistic & Empathetic.”,
dynamics: “Moderate; shared feeling preference, but INFP’s internal moral focus clashes with ESFJ’s external social focus.”,
conflict: “Medium probability.”
},
{
name: “Zeblon”, mbti: “ENFP”, group: “Diplomat”, esfj: 3, lead: 5,
trait: “The Campaigner – Enthusiastic & Creative.”,
dynamics: “Moderate to High; shared enthusiasm, but ENFP’s chaotic exploration can stress the structured ESFJ.”,
conflict: “Medium probability.”
},
{
name: “Gad”, mbti: “ESTP”, group: “Explorer”, esfj: 2, lead: 3,
trait: “The Entrepreneur – Bold & Practical.”,
dynamics: “Low; ESTP’s blunt logic and risk-taking contradicts ESFJ’s need for safe, harmonious environments.”,
conflict: “High probability.”
},
{
name: “Judah”, mbti: “ISTP”, group: “Explorer”, esfj: 2, lead: 2,
trait: “The Virtuoso – Analytical & Independent.”,
dynamics: “Low; severe clash between ISTP’s introverted logic and ESFJ’s extroverted feeling.”,
conflict: “High probability.”
},
{
name: “Ephraim”, mbti: “INTP”, group: “Analyst”, esfj: 2, lead: 2,
trait: “The Logician – Innovative & Objective.”,
dynamics: “Low; INTP’s abstract theorizing and emotional detachment frustrates the pragmatic, emotionally engaged ESFJ.”,
conflict: “High probability.”
},
{
name: “Dan”, mbti: “INTJ”, group: “Analyst”, esfj: 1, lead: 1,
trait: “The Architect – Strategic & Conceptual.”,
dynamics: “Very Low; fundamental disconnect between INTJ’s future-oriented independence and ESFJ’s present-focused social obligations.”,
conflict: “Very High probability.”
},
{
name: “Benjamin”, mbti: “ENTJ”, group: “Analyst”, esfj: 1, lead: 1,
trait: “The Commander – Decisive & Ambitious.”,
dynamics: “Very Low; ENTJ’s ruthless efficiency overrides ESFJ’s need for emotional consensus.”,
conflict: “Very High probability.”
},
{
name: “Simeon”, mbti: “ESTJ”, group: “Sentinel”, esfj: 1, lead: 1,
trait: “The Executive – Efficient & Rule-abiding.”,
dynamics: “Low; though both respect order, ESTJ’s blunt, task-oriented approach often offends the people-oriented ESFJ.”,
conflict: “High probability.”
}
];

// — Heatmap Logic —
function getColor(esfj, lead) {
const total = esfj + lead;
if (total >= 9) return “#2e7d32”; // Dark Green
if (total >= 8) return “#689f38”; // Light Green
if (total >= 7) return “#fbc02d”; // Yellow
if (total >= 5) return “#f57c00”; // Orange
if (total >= 4) return “#7b1fa2”; // Purple
if (total >= 2) return “#1976d2”; // Blue
return “#d32f2f”; // Red
}

function renderHeatmap() {
const filter = document.getElementById(‘groupFilter’).value;
const container = document.getElementById(‘heatmap’);
const intensity = document.getElementById(‘intensitySlider’).value;
container.innerHTML = ”;

const filteredData = mbtiData.filter(d => filter === ‘All’ || d.group === filter);

filteredData.forEach(data => {
const cell = document.createElement(‘div’);
cell.className = ‘heatmap-cell’;
cell.style.backgroundColor = getColor(data.esfj, data.lead);
cell.style.opacity = intensity;

cell.innerHTML = `
<div>
<div class=”cell-header”>${data.name}</div>
<div class=”cell-mbti”>${data.mbti} • ${data.group}</div>
</div>
<div class=”cell-scores”>
<div>ESFJ Match: ${data.esfj}/5</div>
<div>Lead Match: ${data.lead}/5</div>
</div>
`;
container.appendChild(cell);
});
}

function adjustIntensity() {
const intensity = document.getElementById(‘intensitySlider’).value;
const cells = document.querySelectorAll(‘.heatmap-cell’);
cells.forEach(cell => cell.style.opacity = intensity);
}

// — Analysis Panel Logic —
function populateDropdown() {
const select = document.getElementById(‘characterSelect’);
mbtiData.forEach((char, index) => {
const option = document.createElement(‘option’);
option.value = index;
option.text = `${char.name} (${char.mbti})`;
select.appendChild(option);
});
}

function updateAnalysis() {
const selectIndex = document.getElementById(‘characterSelect’).value;
const panel = document.getElementById(‘analysisPanel’);
const conflictCard = document.getElementById(‘conflictCard’);

if (selectIndex === “”) {
panel.style.display = “none”;
return;
}

const data = mbtiData[selectIndex];

// Populate text
document.getElementById(‘panelHeader’).innerText = `Analysis: ${data.name} (${data.mbti} – ${data.group})`;
document.getElementById(‘panelTrait’).innerText = data.trait;
document.getElementById(‘panelDynamics’).innerText = data.dynamics;
document.getElementById(‘panelConflict’).innerText = data.conflict;

// Update border color based on conflict level
conflictCard.className = ‘analysis-card’; // reset
if (data.conflict.includes(“High”)) {
conflictCard.classList.add(‘conflict-high’);
} else if (data.conflict.includes(“Medium”)) {
conflictCard.classList.add(‘conflict-medium’);
} else {
conflictCard.classList.add(‘conflict-low’);
}

panel.style.display = “block”;
}

// — Initialization —
// Using an event listener instead of window.onload to avoid conflicting with WordPress’s native scripts
document.addEventListener(“DOMContentLoaded”, function() {
renderHeatmap();
populateDropdown();
});
</script>