Различия

Показаны различия между двумя версиями страницы.

--- problems:diagnostics:coralclose [2025/10/28 15:59] – Вадим Мартовский
+++ problems:diagnostics:coralclose [2026/07/31 12:15] (текущий) – Вадим Мартовский
@@ Строка 1: / Строка 1: @@
-<html>
+==== 🌊 Умная диагностика кораллов ====
-<div id="diagnose-container"></div>
-<script>
+<html><!-- 🌊 Умная диагностика кораллов ( htmlok=1) -->
-async function loadDiagnosis(url) {
+<style>
-  const response = await fetch(url);
+.coral-step {
-  const data = await response.json();
+  margin: 20px auto;
-  const container = document.getElementById('diagnose-container');
+  padding: 16px;
-  renderStep('start', data, container);
+  border-radius: 12px;
+  background: #f8faff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  max-width: 600px;
+  font-family: system-ui, sans-serif;
 }
+.coral-step h3 {
+  margin: 0 0 10px 0;
+  color: #0077b6;
+  text-align: center;
+}
+.coral-btn {
+  display: block;
+  width: 100%;
+  margin: 6px 0;
+  padding: 10px 14px;
+  background: #26a69a;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 15px;
+  transition: 0.2s;
+  text-align: center;
+}
+.coral-btn:hover { background: #34bfa3; }
-function renderStep(id, data, container) {
+.coral-btn-nav {
-  const step = data.steps[id];
+  background: #607d8b;
-  container.innerHTML = `
+  width: 48%;
-    <div class="coral-step">
+}
-      <h3>${data.title}</h3>
+.coral-btn-nav:hover { background: #78909c; }
-      ${step.question ? `<p>${step.question}</p>` : ''}
-      ${step.answers ? Object.entries(step.answers)
+.coral-btn-home {
-        .map(([next, text]) => `<button class="coral-btn" onclick="renderStep('${next}', data, document.getElementById('diagnose-container'))">${text}</button>`)
+  background: #455a64;
-        .join('') : ''}
+  width: 48%;
-      ${step.text ? `<div class="coral-response">${step.text}</div>` : ''}
+}
-      <button class="coral-btn" onclick="renderStep('start', data, document.getElementById('diagnose-container'))">↩️ В начало</button>
+.coral-btn-home:hover { background: #546e7a; }
-    </div>
-  `;
+.coral-response {
+  margin: 10px 0 0 0;
+  padding: 10px;
+  background: #fff3cd;
+  border-radius: 5px;
+  border: 1px solid #ffeeba;
+  font-size: 14px;
+}
+.coral-history {
+  background: #eef7fa;
+  padding: 8px;
+  border-radius: 6px;
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+.coral-history-item {
+  margin-bottom: 5px;
+}
+.coral-history-item span {
+  color: #00695c;
+}
+.coral-nav {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  margin-top: 12px;
+}
+</style>
+<div id="diag-root"></div>
+<!-- 🧠 JSON-структура сценария -->
+<script type="application/json" id="diag-data">
+{
+  "title": "Диагностика: Кораллы закрылись",
+  "steps": {
+    "start": {
+      "question": "Выберите сценарий:",
+      "answers": {
+        "one": "Один коралл",
+        "one_species": "Один вид",
+        "multi": "Несколько видов",
+        "all": "Все кораллы"
+      }
+    },
+    "one": {
+      "question": "Коралл закрывается кратковременно или более суток?",
+      "answers": {
+        "short": "Кратковременно",
+        "long": "Более суток"
+      }
+    },
+    "short": {
+      "text": "✅ Кратковременное закрытие — нормально для многих LPS. Просто наблюдайте."
+    },
+    "long": {
+      "question": "Локальные причины: поток, сосед, свет. Что изменилось?",
+      "answers": {
+        "flow": "Течение",
+        "neighbor": "Появился сосед",
+        "light": "Освещение",
+        "none": "Ничего не менялось"
+      }
+    },
+    "flow": {
+      "text": "💡 Переместите коралл в зону мягкого потока или скорректируйте направление течения."
+    },
+    "neighbor": {
+      "text": "💡 Отодвиньте нового соседа, оцените конфликт. Разделите, если нужно."
+    },
+    "light": {
+      "text": "💡 Верните прежний световой режим или постепенно корректируйте интенсивность."
+    },
+    "none": {
+      "text": "⚠️ Проверьте параметры воды (pH, KH, нитраты, аммиак). Возможен стресс или скрытая болезнь."
+    },
+    "one_species": {
+      "question": "Все представители вида закрылись или только часть?",
+      "answers": {
+        "one_species_all": "Все",
+        "one_species_some": "Только часть"
+      }
+    },
+    "one_species_all": {
+      "question": "Изменился свет, добавки или течение?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "yes": {
+      "text": "💡 Верните прежние настройки освещения, потока и дозировки. Наблюдайте."
+    },
+    "no": {
+      "question": "Есть признаки инфекции (слизь, пятна, белый стрип)?",
+      "answers": {
+        "infect_yes": "Да",
+        "infect_no": "Нет"
+      }
+    },
+    "infect_yes": {
+      "text": "⚠️ Изолируйте поражённые, обработайте ваннами, поставьте уголь. Консультация специалиста рекомендуется."
+    },
+    "infect_no": {
+      "text": "✅ Возможно, временная адаптация или стресс. Проверьте стабильность параметров воды."
+    },
+    "one_species_some": {
+      "question": "Есть общий локальный признак (свет, сосед, место)?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "yes": {
+      "text": "💡 Диагностируйте локальное влияние: поток, конфликт соседей, локальный свет. Скорректируйте."
+    },
+    "no": {
+      "question": "Остальные представители в норме?",
+      "answers": {
+        "all_good": "Да",
+        "some_bad": "Нет"
+      }
+    },
+    "all_good": {
+      "text": "✅ Понаблюдайте — это индивидуальная реакция. Возможна изоляция для карантина."
+    },
+    "some_bad": {
+      "text": "⚠️ Проверьте все параметры вида. Возможен скрытый стресс или начальная стадия массового влияния."
+    },
+    "multi": {
+      "question": "Какие типы пострадали?",
+      "answers": {
+        "multi_lps": "Только LPS",
+        "multi_sps": "Только SPS",
+        "multi_soft": "Мягкие кораллы",
+        "multi_mixed": "Несколько типов"
+      }
+    },
+    "multi_lps": {
+      "question": "Изменилась ли доза кормления/добавок?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "multi_sps": {
+      "question": "Были скачки KH/pH?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "multi_soft": {
+      "question": "Были изменения света или температуры?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "multi_mixed": {
+      "question": "Все виды закрылись одновременно?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "multi_env": {
+      "question": "Проводилась чистка, подмена воды, химические вещества?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "multi_env_yes": {
+      "text": "⚠️ Подмените воду, поставьте свежий уголь, ищите причину. Массовый стресс часто связан с вмешательством."
+    },
+    "multi_env_no": {
+      "text": "✅ Сделайте базовую диагностику параметров воды, фильтрации, света и потока."
+    },
+    "all": {
+      "question": "Когда произошло закрытие?",
+      "answers": {
+        "yesterday": "Вчера",
+        "today": "Сегодня",
+        "long": "Давно"
+      }
+    },
+    "all_corals_env": {
+      "question": "Менялись параметры воды или было вмешательство?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "all_corals_env_yes": {
+      "text": "⚠️ Срочно проверьте все параметры: аммиак, нитриты, pH, KH, температура. Подмените воду!"
+    },
+    "all_corals_env_no": {
+      "question": "Оборудование работало стабильно?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "all_corals_hardware_yes": {
+      "text": "✅ Следите за освещением, скиммером, нагревом. Массовое закрытие иногда связано с мелкой поломкой."
+    },
+    "all_corals_hardware_no": {
+      "text": "⚠️ Восстановите работу оборудования, обеспечьте аэрацию и фильтрацию, следите за параметрами."
+    },
+    "all_corals_long": {
+      "question": "Есть запах, мутность воды, признаки бактериального всплеска?",
+      "answers": {
+        "yes": "Да",
+        "no": "Нет"
+      }
+    },
+    "all_corals_long_yes": {
+      "text": "⚠️ Усильте аэрацию, срочно подмените воду, поставьте свежий уголь."
+    },
+    "all_corals_long_no": {
+      "text": "✅ Понаблюдайте, возможно сезонный стресс или адаптация. Проверьте все параметры!"
+    }
+  }
 }
-// пример вызова
+</script>
-loadDiagnosis('/data/diagnose/coral.json');
+<script>
+(function(){
+  const root = document.getElementById('diag-root');
+  const data = JSON.parse(document.getElementById('diag-data').textContent);
+  let path = [];
+  function renderStep(id) {
+    const step = data.steps[id];
+    let html = '<div class="coral-step">';
+    html += '<h3>' + (data.title || '') + '</h3>';
+    // История
+    if (path.length) {
+      html += '<div class="coral-history">';
+      path.forEach(p => {
+        html += `<div class="coral-history-item">
+          <b>${p.question}</b><br>
+          <span>→ ${p.answer}</span>
+        </div>`;
+      });
+      html += '</div><hr>';
+    }
+    if(step.question) html += '<p><b>' + step.question + '</b></p>';
+    if(step.text) html += '<div class="coral-response">' + step.text + '</div>';
+    if(step.answers){
+      for(const key in step.answers){
+        html += '<button class="coral-btn" data-next="' + key + '" data-q="' + step.question + '" data-a="' + step.answers[key] + '">' + step.answers[key] + '</button>';
+      }
+    }
+    html += `
+      <div class="coral-nav">
+        <button class="coral-btn coral-btn-nav" data-next="back">⬅️ Назад</button>
+        <button class="coral-btn coral-btn-home" data-next="start">🏠 В начало</button>
+      </div>
+    `;
+    html += '</div>';
+    root.innerHTML = html;
+    Array.from(root.querySelectorAll('.coral-btn')).forEach(btn=>{
+      btn.addEventListener('click', function(){
+        const next = this.getAttribute('data-next');
+        if (next === 'back') { path.pop(); renderStep(path.length ? path.at(-1).step : 'start'); return; }
+        if (next === 'start') { path = []; renderStep('start'); return; }
+        const q = this.getAttribute('data-q');
+        const a = this.getAttribute('data-a');
+        if (q && a) path.push({question:q, answer:a, step:next});
+        renderStep(next);
+        root.scrollIntoView({behavior:'smooth'});
+      });
+    });
+  }
+  if (document.readyState === 'loading')
+    document.addEventListener('DOMContentLoaded', () => renderStep('start'));
+  else renderStep('start');
+})();
 </script>
 </html>
+<html><div style="text-align:right;"><i>Made with ❤️ by @Martovsky</i></div></html>
+----