problems:diagnostics:coralclose
Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия | ||
| problems:diagnostics:coralclose [2025/10/28 07:52] – Вадим Мартовский | problems:diagnostics:coralclose [2026/07/31 12:15] (текущий) – Вадим Мартовский | ||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| - | < | + | ==== 🌊 Умная диагностика кораллов ==== |
| - | <button onclick=" | + | |
| - | <button onclick=" | + | |
| - | <button onclick=" | + | |
| - | <button onclick=" | + | |
| - | <div id=" | + | <html><!-- 🌊 Умная |
| - | | + | <style> |
| - | < | + | .coral-step { |
| - | <button onclick=" | + | |
| - | | + | padding: 16px; |
| + | border-radius: | ||
| + | background: #f8faff; | ||
| + | box-shadow: 0 2px 8px rgba(0,0,0,0.05); | ||
| + | max-width: 600px; | ||
| + | font-family: | ||
| + | } | ||
| + | .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: | ||
| + | cursor: pointer; | ||
| + | font-size: 15px; | ||
| + | transition: 0.2s; | ||
| + | text-align: center; | ||
| + | } | ||
| + | .coral-btn: | ||
| - | <div id=" | + | .coral-btn-nav { |
| - | < | + | background: #607d8b; |
| - | </ | + | width: 48%; |
| - | < | + | } |
| - | < | + | .coral-btn-nav:hover { background: #78909c; } |
| - | </ | + | |
| - | </ | + | |
| + | .coral-btn-home { | ||
| + | background: #455a64; | ||
| + | width: 48%; | ||
| + | } | ||
| + | .coral-btn-home: | ||
| + | .coral-response { | ||
| + | margin: 10px 0 0 0; | ||
| + | padding: 10px; | ||
| + | background: #fff3cd; | ||
| + | border-radius: | ||
| + | border: 1px solid #ffeeba; | ||
| + | font-size: 14px; | ||
| + | } | ||
| + | |||
| + | .coral-history { | ||
| + | background: #eef7fa; | ||
| + | padding: 8px; | ||
| + | border-radius: | ||
| + | font-size: 13px; | ||
| + | margin-bottom: | ||
| + | } | ||
| + | .coral-history-item { | ||
| + | margin-bottom: | ||
| + | } | ||
| + | .coral-history-item span { | ||
| + | color: #00695c; | ||
| + | } | ||
| + | .coral-nav { | ||
| + | display: flex; | ||
| + | justify-content: | ||
| + | gap: 6px; | ||
| + | margin-top: 12px; | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | <div id=" | ||
| + | |||
| + | <!-- 🧠 JSON-структура сценария --> | ||
| + | <script type=" | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | |||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | |||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | |||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | |||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | </ | ||
| + | |||
| + | < | ||
| + | (function(){ | ||
| + | const root = document.getElementById(' | ||
| + | const data = JSON.parse(document.getElementById(' | ||
| + | let path = []; | ||
| + | |||
| + | function renderStep(id) { | ||
| + | const step = data.steps[id]; | ||
| + | let html = '< | ||
| + | html += '< | ||
| + | |||
| + | // История | ||
| + | if (path.length) { | ||
| + | html += '< | ||
| + | path.forEach(p => { | ||
| + | html += `<div class=" | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | }); | ||
| + | html += '</ | ||
| + | } | ||
| + | |||
| + | if(step.question) html += '< | ||
| + | if(step.text) html += '< | ||
| + | |||
| + | if(step.answers){ | ||
| + | for(const key in step.answers){ | ||
| + | html += '< | ||
| + | } | ||
| + | } | ||
| + | |||
| + | html += ` | ||
| + | <div class=" | ||
| + | <button class=" | ||
| + | <button class=" | ||
| + | </ | ||
| + | `; | ||
| + | |||
| + | html += '</ | ||
| + | root.innerHTML = html; | ||
| + | |||
| + | Array.from(root.querySelectorAll(' | ||
| + | btn.addEventListener(' | ||
| + | const next = this.getAttribute(' | ||
| + | if (next === ' | ||
| + | if (next === ' | ||
| + | |||
| + | const q = this.getAttribute(' | ||
| + | const a = this.getAttribute(' | ||
| + | if (q && a) path.push({question: | ||
| + | renderStep(next); | ||
| + | root.scrollIntoView({behavior:' | ||
| + | }); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | if (document.readyState === ' | ||
| + | document.addEventListener(' | ||
| + | else renderStep(' | ||
| + | })(); | ||
| + | </ | ||
| </ | </ | ||
| + | |||
| + | |||
| + | < | ||
| + | ---- | ||
| + | |||
problems/diagnostics/coralclose.1761627144.txt.gz · Последнее изменение: — Вадим Мартовский