Различия

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

--- problems:diagnostics:coralclose [2025/10/28 15:52] – Вадим Мартовский
+++ problems:diagnostics:coralclose [2026/07/31 12:15] (текущий) – Вадим Мартовский
@@ Строка 1: / Строка 1: @@
-<html>
+==== 🌊 Умная диагностика кораллов ====
+<html><!-- 🌊 Умная диагностика кораллов ( htmlok=1) -->
 <style>
-.coral-step { margin:20px; padding:13px; border-radius:10px; background: #f8faff; box-shadow: 0 2px 8px #eee;}
+.coral-step {
-.coral-step h3 { margin:0 0 8px 0; color:#0077b6;}
+  margin: 20px auto;
-.coral-btn { display:block; margin:7px 0; padding:8px 16px; background:#26a69a; color:#fff; border:none; border-radius:5px; cursor:pointer; font-size:14px;}
+  padding: 16px;
-.coral-btn:hover { background:#34bfa3;}
+  border-radius: 12px;
-.coral-response { margin:10px 0 0 0; padding:10px; background:#fff3cd; border-radius:5px; border:1px solid #ffeeba;
+  background: #f8faff;
-  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-  opacity: 0;
+  max-width: 600px;
-  height: 0;
+  font-family: system-ui, sans-serif;
-  overflow: hidden;}
+}
-.coral-hide { display: none; }
+.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; }
+.coral-btn-nav {
+  background: #607d8b;
+  width: 48%;
+}
+.coral-btn-nav:hover { background: #78909c; }
+.coral-btn-home {
+  background: #455a64;
+  width: 48%;
+}
+.coral-btn-home:hover { background: #546e7a; }
+.coral-response {
-.coral-response:not(.coral-hide) {
+  margin: 10px 0 0 0;
-  opacity: 1;
-  height: auto;
   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 class="coral-step">
+<div id="diag-root"></div>
-  <h3>Диагностика: Почему коралл закрылся</h3>
-  <button class="coral-btn" onclick="showStep('norm')">Коралл периодически сам закрывается</button>
+<!-- 🧠 JSON-структура сценария -->
-  <button class="coral-btn" onclick="showStep('problem')">Коралл не раскрывается более суток/выглядит нездорово</button>
+<script type="application/json" id="diag-data">
+{
+  "title": "Диагностика: Кораллы закрылись",
+  "steps": {
+    "start": {
+      "question": "Выберите сценарий:",
+      "answers": {
+        "one": "Один коралл",
+        "one_species": "Один вид",
+        "multi": "Несколько видов",
+        "all": "Все кораллы"
+      }
+    },
-  <div id="norm" class="coral-response coral-hide">
+    "one": {
-    Это нормально для многих видов АКВАКУЛЬТУРЫ и LPS. <br>
+      "question": "Коралл закрывается кратковременно или более суток?",
-    Если ткани здоровые, нет пятен, слизи — просто наблюдайте в течение дня.
+      "answers": {
-    <br><button class="coral-btn" onclick="backToStart()">Назад</button>
+        "short": "Кратковременно",
-  </div>
+        "long": "Более суток"
+      }
+    },
+    "short": {
+      "text": "✅ Кратковременное закрытие — нормально для многих LPS. Просто наблюдайте."
+    },
+    "long": {
+      "question": "Локальные причины: поток, сосед, свет. Что изменилось?",
+      "answers": {
+        "flow": "Течение",
+        "neighbor": "Появился сосед",
+        "light": "Освещение",
+        "none": "Ничего не менялось"
+      }
+    },
+    "flow": {
+      "text": "💡 Переместите коралл в зону мягкого потока или скорректируйте направление течения."
+    },
+    "neighbor": {
+      "text": "💡 Отодвиньте нового соседа, оцените конфликт. Разделите, если нужно."
+    },
+    "light": {
+      "text": "💡 Верните прежний световой режим или постепенно корректируйте интенсивность."
+    },
+    "none": {
+      "text": "⚠️ Проверьте параметры воды (pH, KH, нитраты, аммиак). Возможен стресс или скрытая болезнь."
+    },
-  <div id="problem" class="coral-response coral-hide">
+    "one_species": {
-    <b>Как быстро закрылся?</b>
+      "question": "Все представители вида закрылись или только часть?",
-    <br>
+      "answers": {
-    <button class="coral-btn" onclick="showStep('fast')">Внезапно (часы)</button>
+        "one_species_all": "Все",
-    <button class="coral-btn" onclick="showStep('slow')">Постепенно (дни/недели)</button>
+        "one_species_some": "Только часть"
-    <button class="coral-btn" onclick="backToStart()">Назад</button>
+      }
-  </div>
+    },
+    "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": "⚠️ Проверьте все параметры вида. Возможен скрытый стресс или начальная стадия массового влияния."
+    },
-  <div id="fast" class="coral-response coral-hide">
+    "multi": {
-    Есть механические повреждения на коралле?
+      "question": "Какие типы пострадали?",
-    <br>
+      "answers": {
-    <button class="coral-btn" onclick="showStep('damageyes')">Да</button>
+        "multi_lps": "Только LPS",
-    <button class="coral-btn" onclick="showStep('damageno')">Нет</button>
+        "multi_sps": "Только SPS",
-    <button class="coral-btn" onclick="backToStep('problem')">Назад</button>
+        "multi_soft": "Мягкие кораллы",
-  </div>
+        "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": "✅ Сделайте базовую диагностику параметров воды, фильтрации, света и потока."
+    },
-  <div id="damageyes" class="coral-response coral-hide">
+    "all": {
-    ✔️ Проверьте наличие улиток, рыбок-подбиральщиков, механических травм.<br>
+      "question": "Когда произошло закрытие?",
-    Изолируйте повреждённый участок, при необходимости обработайте.<br>
+      "answers": {
-    <button class="coral-btn" onclick="backToStep('fast')">Назад</button>
+        "yesterday": "Вчера",
-    <button class="coral-btn" onclick="backToStart()">В начало</button>
+        "today": "Сегодня",
-  </div>
+        "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": "✅ Понаблюдайте, возможно сезонный стресс или адаптация. Проверьте все параметры!"
+    }
+  }
+}
-  <div id="damageno" class="coral-response coral-hide">
+</script>
-    Были изменения в аквариуме?
-    <br>
-    <button class="coral-btn coral-btn-mini" onclick="showStep('neighbor')">Новый сосед/коралл</button>
-    <button class="coral-btn coral-btn-mini" onclick="showStep('light')">Новое освещение</button>
-    <button class="coral-btn coral-btn-mini" onclick="showStep('add')">Новые добавки/дозировка</button>
-    <button class="coral-btn coral-btn-mini" onclick="showStep('flow')">Новое течение</button>
-    <button class="coral-btn coral-btn-mini" onclick="showStep('clean')">Чистка аквариума</button>
-    <button class="coral-btn coral-btn-mini" onclick="showStep('none')">Никаких изменений</button>
-    <button class="coral-btn" onclick="backToStep('fast')">Назад</button>
-  </div>
-  <!-- Примеры быстрого ответа (можно добавить новые сценарии) -->
+<script>
-  <div id="neighbor" class="coral-response coral-hide">
+(function(){
-    ✔️ Отодвиньте новый коралл или соседа подальше.<br>
+  const root = document.getElementById('diag-root');
-    Оцените, нет ли конфликтов/агрессии.<br>
+  const data = JSON.parse(document.getElementById('diag-data').textContent);
-    <button class="coral-btn" onclick="backToStep('damageno')">Назад</button>
+  let path = [];
-    <button class="coral-btn" onclick="backToStart()">В начало</button>
-  </div>
-  <div id="light" class="coral-response coral-hide">
-    ✔️ Проверьте интенсивность и спектр освещения.<br>
-    Верните прежнюю лампу или отрегулируйте мощность.<br>
-    <button class="coral-btn" onclick="backToStep('damageno')">Назад</button>
-    <button class="coral-btn" onclick="backToStart()">В начало</button>
-  </div>
-  <div id="add" class="coral-response coral-hide">
-    ✔️ Проверьте дозировку всех добавок, нет ли превышения.<br>
-    <button class="coral-btn" onclick="backToStep('damageno')">Назад</button>
-    <button class="coral-btn" onclick="backToStart()">В начало</button>
-  </div>
-  <div id="flow" class="coral-response coral-hide">
-    ✔️ Переместите коралл в зону мягкого потока или скорректируйте направление течения.<br>
-    <button class="coral-btn" onclick="backToStep('damageno')">Назад</button>
-    <button class="coral-btn" onclick="backToStart()">В начало</button>
-  </div>
-  <div id="clean" class="coral-response coral-hide">
-    ✔️ Возможен взвесь/мусор после чистки.<br>
-    Аккуратно продуйте коралл, поставьте уголь.<br>
-    <button class="coral-btn" onclick="backToStep('damageno')">Назад</button>
-    <button class="coral-btn" onclick="backToStart()">В начало</button>
-  </div>
-  <div id="none" class="coral-response coral-hide">
-    ✔️ Если никаких изменений — проверьте параметры воды, на паразитов.<br>
-    <button class="coral-btn" onclick="backToStep('damageno')">Назад</button>
-    <button class="coral-btn" onclick="backToStart()">В начало</button>
-  </div>
-  <!-- Медленный сценарий (демо) -->
+  function renderStep(id) {
-  <div id="slow" class="coral-response coral-hide">
+    const step = data.steps[id];
-    (Шаги для медленного закрытия: вопросы о параметрах воды, кормлении, соседях и т.д.)
+    let html = '<div class="coral-step">';
-    <br><button class="coral-btn" onclick="backToStep('problem')">Назад</button>
+    html += '<h3>' + (data.title || '') + '</h3>';
-    <button class="coral-btn" onclick="backToStart()">В начало</button>
-  </div>
-</div>
+    // История
+    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>';
+    }
-<script>
+    if(step.question) html += '<p><b>' + step.question + '</b></p>';
-function showStep(id) {
+    if(step.text) html += '<div class="coral-response">' + step.text + '</div>';
-  hideAll();
-  document.getElementById(id).classList.remove('coral-hide');
+    if(step.answers){
-}
+      for(const key in step.answers){
-function backToStart() {
+        html += '<button class="coral-btn" data-next="' + key + '" data-q="' + step.question + '" data-a="' + step.answers[key] + '">' + step.answers[key] + '</button>';
-  hideAll();
+      }
-}
+    }
-function backToStep(step) {
-  hideAll();
+    html += `
-  document.getElementById(step).classList.remove('coral-hide');
+      <div class="coral-nav">
-}
+        <button class="coral-btn coral-btn-nav" data-next="back">⬅️ Назад</button>
-function hideAll() {
+        <button class="coral-btn coral-btn-home" data-next="start">🏠 В начало</button>
-  var steps = document.querySelectorAll('.coral-response');
+      </div>
-  steps.forEach(function(s){ s.classList.add('coral-hide'); });
+    `;
-}
+    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>
+----