<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simulateur Interactif Yin-Yang - Drainage selon Dr Henry</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 900px;
width: 100%;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 10px;
font-size: 1.8em;
}
.subtitle {
text-align: center;
color: #7f8c8d;
margin-bottom: 30px;
font-size: 0.95em;
}
.main-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 40px;
align-items: start;
}
.interactive-panel {
background: #f8f9fa;
padding: 20px;
border-radius: 15px;
border: 2px solid #dee2e6;
}
.panel-title {
font-weight: bold;
color: #495057;
margin-bottom: 20px;
text-align: center;
font-size: 1.1em;
}
.yin-yang-container {
position: relative;
width: 100%;
height: 400px;
border: 4px solid #2c3e50;
border-radius: 10px;
overflow: hidden;
background: white;
display: flex;
cursor: ns-resize;
}
.yin-section, .yang-section {
width: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.yin-section {
background: #2c3e50;
color: white;
}
.yang-section {
background: #ecf0f1;
color: #2c3e50;
}
.section-label {
font-size: 1.5em;
font-weight: bold;
text-align: center;
z-index: 10;
pointer-events: none;
position: absolute;
}
.separator {
position: absolute;
width: 100%;
height: 4px;
background: #e74c3c;
cursor: ns-resize;
z-index: 20;
transition: top 0.1s ease;
}
.separator:hover {
height: 6px;
background: #c0392b;
}
.separator::after {
content: '↕';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 20px;
font-weight: bold;
}
.level-indicators {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.level-line {
position: absolute;
width: 100%;
border-top: 1px dashed rgba(255,255,255,0.3);
}
.level-label {
position: absolute;
left: 5px;
font-size: 0.7em;
color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.3);
padding: 2px 5px;
border-radius: 3px;
}
.results-panel {
background: white;
border-radius: 15px;
}
.status-banner {
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
text-align: center;
transition: all 0.3s ease;
}
.status-title {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 5px;
}
.status-subtitle {
font-size: 0.9em;
opacity: 0.9;
}
.drainage-ok {
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
color: #155724;
}
.drainage-attention {
background: linear-gradient(135deg, #ffd89b 0%, #ffb347 100%);
color: #856404;
}
.drainage-danger {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
color: #721c24;
}
.info-section {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
border-left: 4px solid #3498db;
}
.info-title {
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
font-size: 0.95em;
}
.info-content {
font-size: 0.85em;
color: #495057;
line-height: 1.6;
}
.info-list {
list-style: none;
padding: 0;
}
.info-list li {
padding: 4px 0;
padding-left: 20px;
position: relative;
}
.info-list li:before {
content: "•";
position: absolute;
left: 5px;
color: #3498db;
}
.strategy-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
}
.remedies-section {
background: #e8f5e9;
padding: 15px;
border-radius: 10px;
border-left: 4px solid #4caf50;
}
.remedies-title {
font-weight: bold;
color: #2e7d32;
margin-bottom: 8px;
font-size: 0.95em;
}
.remedies-content {
color: #1b5e20;
font-size: 0.85em;
}
.warning-box {
background: #fff3cd;
border: 2px solid #ffc107;
padding: 12px;
border-radius: 8px;
margin-bottom: 15px;
display: none;
}
.warning-box.show {
display: block;
}
.warning-icon {
color: #ff6b6b;
font-size: 1.2em;
margin-right: 5px;
}
.values-display {
display: flex;
justify-content: space-around;
margin-top: 15px;
padding: 10px;
background: white;
border-radius: 8px;
}
.value-item {
text-align: center;
}
.value-label {
font-size: 0.8em;
color: #7f8c8d;
margin-bottom: 5px;
}
.value-number {
font-size: 1.5em;
font-weight: bold;
}
.yin-value {
color: #2c3e50;
}
.yang-value {
color: #e67e22;
}
.instructions {
background: #e3f2fd;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
border-left: 4px solid #2196f3;
}
.instructions-title {
font-weight: bold;
color: #1565c0;
margin-bottom: 8px;
}
.instructions-content {
font-size: 0.85em;
color: #0d47a1;
}
@media (max-width: 768px) {
.main-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.yin-yang-container {
height: 350px;
}
}
</style>
<div class="container">
<h1>Simulateur Interactif Yin-Yang</h1>
<div class="subtitle">Évaluation du terrain pour le drainage selon Dr Jean-Yves Henry</div>
<div class="instructions">
<div class="instructions-title">📌 Instructions :</div>
<div class="instructions-content">
Déplacez la ligne rouge verticalement pour ajuster les niveaux de Yin et Yang.<br>
Les recommandations s'adaptent automatiquement selon l'équilibre énergétique.
</div>
</div>
<div class="main-grid">
<!-- Panneau interactif -->
<div class="interactive-panel">
<div class="panel-title">Ajustez l'équilibre Yin-Yang</div>
<div class="yin-yang-container" id="yinYangBox">
<div class="yin-section" id="yinSection">
<div class="section-label">YIN</div>
<div class="level-indicators">
<div class="level-line" style="top: 25%;">
<span class="level-label" style="top: -10px;">Excès</span>
</div>
<div class="level-line" style="top: 50%;">
<span class="level-label" style="top: -10px;">Normal</span>
</div>
<div class="level-line" style="top: 75%;">
<span class="level-label" style="top: -10px;">Insuffisant</span>
</div>
</div>
</div>
<div class="yang-section" id="yangSection">
<div class="section-label">YANG</div>
</div>
<div class="separator" id="separator"></div>
</div>
<div class="values-display">
<div class="value-item">
<div class="value-label">Niveau Yin</div>
<div class="value-number yin-value" id="yinValue">50%</div>
</div>
<div class="value-item">
<div class="value-label">Niveau Yang</div>
<div class="value-number yang-value" id="yangValue">50%</div>
</div>
</div>
</div>
<!-- Panneau des résultats -->
<div class="results-panel">
<div class="status-banner drainage-ok" id="statusBanner">
<div class="status-title">✓ DRAINAGE POSSIBLE</div>
<div class="status-subtitle">Équilibre Yin-Yang optimal</div>
</div>
<div class="warning-box" id="warningBox">
<span class="warning-icon">⚠️</span>
<strong>Attention :</strong> <span id="warningText"></span>
</div>
<div class="info-section">
<div class="info-title">État du patient :</div>
<div class="info-content">
<ul class="info-list" id="symptomsList">
<li>Énergie stable</li>
<li>Température corporelle normale</li>
<li>Digestion régulière</li>
<li>Sommeil réparateur</li>
<li>Émotions équilibrées</li>
</ul>
</div>
</div>
<div class="strategy-section">
<div class="info-title" style="color: white;">Stratégie thérapeutique :</div>
<div class="info-content" style="color: white;" id="strategyContent">
Drainage classique selon Vannier<br>
Durée : 3-4 semaines<br>
Dilutions : 3-5 CH
</div>
</div>
<div class="remedies-section">
<div class="remedies-title">Remèdes indiqués :</div>
<div class="remedies-content" id="remediesContent">
Taraxacum, Solidago, Carduus marianus, Berberis
</div>
</div>
</div>
</div>
</div>
<script>
const separator = document.getElementById('separator');
const yinYangBox = document.getElementById('yinYangBox');
const yinSection = document.getElementById('yinSection');
const yangSection = document.getElementById('yangSection');
const yinValue = document.getElementById('yinValue');
const yangValue = document.getElementById('yangValue');
const statusBanner = document.getElementById('statusBanner');
const warningBox = document.getElementById('warningBox');
const warningText = document.getElementById('warningText');
const symptomsList = document.getElementById('symptomsList');
const strategyContent = document.getElementById('strategyContent');
const remediesContent = document.getElementById('remediesContent');
let isDragging = false;
let currentPosition = 50; // Position initiale à 50%
// Initialiser la position du séparateur
separator.style.top = '50%';
// Données pour chaque état
const states = {
'equilibre': {
status: '✓ DRAINAGE POSSIBLE',
subtitle: 'Équilibre Yin-Yang optimal',
class: 'drainage-ok',
warning: '',
symptoms: [
'Énergie stable',
'Température corporelle normale',
'Digestion régulière',
'Sommeil réparateur',
'Émotions équilibrées'
],
strategy: `Drainage classique selon Vannier<br>
Durée : 3-4 semaines<br>
Dilutions : 3-5 CH`,
remedies: 'Taraxacum, Solidago, Carduus marianus, Berberis'
},
'yin-exces_yang-normal': {
status: '✗ NE PAS DRAINER',
subtitle: 'Syndrome Froid - Yin en excès',
class: 'drainage-danger',
warning: 'Le drainage peut faire prendre 10 kg en quelques semaines !',
symptoms: [
'Obésité, surcharge pondérale',
'Frilosité permanente',
'Membres froids',
'Œdèmes (chevilles, jambes)',
'Fatigue matinale',
'Digestion lente',
'Langue pâle, enduit blanc'
],
strategy: `1. Disperser le Yin en excès<br>
2. Régime hypocalorique<br>
3. Réchauffer le terrain<br>
4. Attendre 4-6 semaines avant drainage`,
remedies: 'Calcarea carbonica, Graphites, Antimonium crudum'
},
'yin-normal_yang-exces': {
status: '✗ NE PAS DRAINER',
subtitle: 'Syndrome Chaleur - Yang en excès',
class: 'drainage-danger',
warning: 'Risque d\'aggravation inflammatoire !',
symptoms: [
'Allergies actives',
'Inflammations chroniques',
'Sensation de chaleur',
'Soif intense',
'Agitation, irritabilité',
'Insomnie d\'endormissement',
'Langue rouge, enduit jaune'
],
strategy: `1. Disperser le Yang en excès<br>
2. Rafraîchir le terrain<br>
3. Anti-inflammatoires naturels<br>
4. Attendre 3-4 semaines`,
remedies: 'Arsenicum album, Sulfur iodatum, Apis mellifica'
},
'yin-exces_yang-exces': {
status: '⚡ TRÈS COMPLEXE',
subtitle: 'Syndrome Mixte',
class: 'drainage-attention',
warning: 'Situation paradoxale nécessitant une expertise approfondie',
symptoms: [
'Obésité + inflammations',
'Œdèmes + chaleur locale',
'Fatigue + agitation',
'Froid aux extrémités + bouffées de chaleur',
'Alternance constipation/diarrhée'
],
strategy: `1. Traiter par alternance<br>
2. Harmoniser Yin et Yang<br>
3. Drainage très progressif<br>
4. Surveillance étroite`,
remedies: 'Lachesis, Sepia (en alternance)'
},
'yin-insuffisant_yang-normal': {
status: '⚡ AVEC PRÉCAUTION',
subtitle: 'Vide de Yin',
class: 'drainage-attention',
warning: 'Risque d\'assèchement supplémentaire',
symptoms: [
'Sécheresse peau/muqueuses',
'Soif nocturne',
'Chaleur des 5 cœurs',
'Transpirations nocturnes',
'Constipation sèche',
'Langue rouge sans enduit'
],
strategy: `1. Nourrir le Yin d'abord<br>
2. Hydrater l'organisme<br>
3. Drainage doux si nécessaire<br>
4. Éviter les diurétiques forts`,
remedies: 'Bryonia, Alumina, Natrum muriaticum'
},
'yin-normal_yang-insuffisant': {
status: '⚡ AVEC PRÉCAUTION',
subtitle: 'Vide de Yang',
class: 'drainage-attention',
warning: 'Risque d\'épuisement énergétique',
symptoms: [
'Épuisement profond',
'Frilosité modérée',
'Digestion faible',
'Libido diminuée',
'Dépression, apathie',
'Pouls faible et lent'
],
strategy: `1. Tonifier le Yang<br>
2. Soutenir l'énergie vitale<br>
3. Drainage très léger<br>
4. Privilégier la stimulation`,
remedies: 'Silicea, Phosphoricum acidum, Causticum'
},
'yin-insuffisant_yang-insuffisant': {
status: '✗ CONTRE-INDIQUÉ',
subtitle: 'Double Vide - État critique',
class: 'drainage-danger',
warning: 'État d\'épuisement total ! Interdiction formelle de drainer',
symptoms: [
'Épuisement complet',
'Amaigrissement',
'Déshydratation',
'Hypothermie',
'Confusion mentale',
'Pouls filant'
],
strategy: `1. Reconstitution urgente<br>
2. Repos absolu<br>
3. Nutrition adaptée<br>
4. PAS de drainage !`,
remedies: 'Carbo vegetabilis, China, Arsenicum album'
},
'yin-exces_yang-insuffisant': {
status: '✗ TRÈS DANGEREUX',
subtitle: 'Froid Extrême',
class: 'drainage-danger',
warning: 'DANGER MAXIMAL : Aggravation garantie si drainage !',
symptoms: [
'Obésité morbide',
'Œdèmes généralisés',
'Hypothyroïdie',
'Dépression sévère',
'Frilosité extrême',
'Stase complète'
],
strategy: `1. Réchauffer fortement<br>
2. Mobiliser le Yang<br>
3. Disperser le Yin<br>
4. Durée : 3-6 mois minimum`,
remedies: 'Baryta carbonica, Calcarea carbonica, Graphites'
},
'yin-insuffisant_yang-exces': {
status: '✗ TRÈS RISQUÉ',
subtitle: 'Feu Non Contrôlé',
class: 'drainage-danger',
warning: 'Syndrome inflammatoire aigu ! Risque vital',
symptoms: [
'Hyperthyroïdie',
'Agitation extrême',
'Insomnie totale',
'Amaigrissement rapide',
'Fièvres récurrentes',
'Crises inflammatoires'
],
strategy: `1. Nourrir le Yin urgent<br>
2. Calmer le Yang<br>
3. Rafraîchir fortement<br>
4. Surveillance médicale`,
remedies: 'Iodum, Phosphorus, Belladonna'
}
};
function getState(yinPercent, yangPercent) {
let yinState = yinPercent > 66 ? 'exces' : yinPercent > 33 ? 'normal' : 'insuffisant';
let yangState = yangPercent > 66 ? 'exces' : yangPercent > 33 ? 'normal' : 'insuffisant';
// Cas d'équilibre parfait
if (yinState === 'normal' && yangState === 'normal' &&
Math.abs(yinPercent - 50) < 10 && Math.abs(yangPercent - 50) < 10) {
return 'equilibre';
}
return `yin-${yinState}_yang-${yangState}`;
}
function updateDisplay(position) {
// Calculer les pourcentages
const yinPercent = position;
const yangPercent = 100 - position;
// Mettre à jour les hauteurs visuelles
yinSection.style.height = yinPercent + '%';
yangSection.style.height = yangPercent + '%';
// Mettre à jour les valeurs affichées
yinValue.textContent = Math.round(yinPercent) + '%';
yangValue.textContent = Math.round(yangPercent) + '%';
// Ajuster les couleurs selon l'intensité
if (yinPercent > 66) {
yinSection.style.background = '#1a252f'; // Très foncé pour excès
} else if (yinPercent < 34) {
yinSection.style.background = '#7f8c8d'; // Gris pour insuffisant
} else {
yinSection.style.background = '#2c3e50'; // Normal
}
if (yangPercent > 66) {
yangSection.style.background = '#fff3cd'; // Jaune chaud pour excès
} else if (yangPercent < 34) {
yangSection.style.background = '#bdc3c7'; // Gris clair pour insuffisant
} else {
yangSection.style.background = '#ecf0f1'; // Normal
}
// Obtenir l'état actuel
const currentState = getState(yinPercent, yangPercent);
const stateData = states[currentState] || states['equilibre'];
// Mettre à jour le statut
statusBanner.className = 'status-banner ' + stateData.class;
statusBanner.innerHTML = `
<div class="status-title">${stateData.status}</div>
<div class="status-subtitle">${stateData.subtitle}</div>
`;
// Mettre à jour l'avertissement
if (stateData.warning) {
warningBox.classList.add('show');
warningText.textContent = stateData.warning;
} else {
warningBox.classList.remove('show');
}
// Mettre à jour les symptômes
symptomsList.innerHTML = stateData.symptoms.map(s => `<li>${s}</li>`).join('');
// Mettre à jour la stratégie
strategyContent.innerHTML = stateData.strategy;
// Mettre à jour les remèdes
remediesContent.textContent = stateData.remedies;
}
// Gestion du drag
separator.addEventListener('mousedown', (e) => {
isDragging = true;
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const rect = yinYangBox.getBoundingClientRect();
const y = e.clientY - rect.top;
const percentage = (y / rect.height) * 100;
// Limiter entre 5% et 95%
currentPosition = Math.max(5, Math.min(95, percentage));
separator.style.top = currentPosition + '%';
updateDisplay(currentPosition);
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// Support tactile
separator.addEventListener('touchstart', (e) => {
isDragging = true;
e.preventDefault();
});
document.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const rect = yinYangBox.getBoundingClientRect();
const y = e.touches[0].clientY - rect.top;
const percentage = (y / rect.height) * 100;
currentPosition = Math.max(5, Math.min(95, percentage));
separator.style.top = currentPosition + '%';
updateDisplay(currentPosition);
});
document.addEventListener('touchend', () => {
isDragging = false;
});
// Initialisation
updateDisplay(50);
</script>
