[html]<!-- Chosen Palette: Warm Neutrals (Stone-50 background, Stone-800 text) with Soft Teal (Teal-600) and Amber (Amber-500) accents for a calm, supportive, and accessible educational feel. -->
<!-- Application Structure Plan: A split-view interactive dashboard. The left panel acts as a navigation menu (list of terms), and the right panel dynamically displays the selected term's details (explanation, purpose, and a dynamic radar chart showing its impact profile). This allows users to quickly explore and compare different therapies without scrolling through a long, overwhelming text document, perfectly suiting a "dictionary" format. -->
<!-- Visualization & Content Choices: Source Info -> 4 therapies with textual descriptions. Goal -> Compare the focus areas of each therapy. Viz Method -> Interactive Radar Chart (Chart.js Canvas). Interaction -> Clicking a term updates both the textual explanation and animates the chart to show that therapy's specific impact profile (Behavior, Socialization, Cognitive, Physical). Justification -> A radar chart visually breaks down the qualitative text into understandable, comparative dimensions, making abstract therapies concrete. Library/Method -> Chart.js on Canvas. NO SVG/Mermaid used. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Интерактивный словарь адаптивных технологий</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
overflow-x: hidden;
}
.chart-container {
position: relative;
width: 100%;
max-width: 450px;
margin-left: auto;
margin-right: auto;
height: 280px;
max-height: 350px;
}
@media (min-width: 768px) {
.chart-container { height: 320px; }
}
.nav-btn {
transition: all 0.3s ease;
}
.nav-btn.active {
background-color: #0f766e;
color: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.nav-btn:not(.active):hover {
background-color: #e7e5e4;
transform: translateY(-1px);
}
.fade-in {
animation: fadeIn 0.4s ease-in forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-stone-50 text-stone-800 min-h-screen flex flex-col">
<header class="bg-white border-b border-stone-200 py-6 px-4 sm:px-8 shadow-sm">
<div class="max-w-6xl mx-auto flex items-center justify-between">
<div>
<h1 class="text-3xl font-extrabold text-teal-800 tracking-tight flex items-center gap-3">
<span class="text-4xl">📖</span>
Словарь адаптивных технологий
</h1>
<p class="text-stone-500 mt-1 font-medium">Простые объяснения сложных терминов реабилитации</p>
</div>
</div>
</header>
<main class="flex-grow max-w-6xl mx-auto w-full p-4 sm:p-8 flex flex-col gap-8">
<section class="bg-white rounded-3xl p-6 sm:p-8 shadow-sm border border-stone-100">
<h2 class="text-2xl font-bold text-stone-800 mb-3">О проекте</h2>
<p class="text-lg text-stone-600 leading-relaxed">
Мир реабилитации и поддержки детей с ОВЗ наполнен сложными аббревиатурами и медицинскими терминами. Этот интерактивный справочник создан для того, чтобы помочь родителям и специалистам лучше ориентироваться в методах поддержки. Здесь собраны ключевые технологии, объясненные простым и доступным языком.
</p>
</section>
<section class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<div class="lg:col-span-4 flex flex-col gap-4">
<div class="bg-stone-100 rounded-3xl p-6 h-full border border-stone-200">
<h3 class="text-xl font-bold text-stone-800 mb-2">Каталог терминов</h3>
<p class="text-sm text-stone-500 mb-6">Выберите методику из списка ниже, чтобы узнать о ней подробнее и увидеть профиль её воздействия.</p>
<div class="flex flex-col gap-3" id="nav-container">
<button data-id="aba" class="nav-btn active flex items-center justify-between w-full text-left px-5 py-4 rounded-2xl font-semibold text-stone-700 bg-white border border-stone-200">
<span class="flex items-center gap-3"><span class="text-2xl">🧩</span> АВА-терапия</span>
<span class="text-lg">→</span>
</button>
<button data-id="neuro" class="nav-btn flex items-center justify-between w-full text-left px-5 py-4 rounded-2xl font-semibold text-stone-700 bg-white border border-stone-200">
<span class="flex items-center gap-3"><span class="text-2xl">🧠</span> Нейрокоррекция</span>
<span class="text-lg">→</span>
</button>
<button data-id="sensory" class="nav-btn flex items-center justify-between w-full text-left px-5 py-4 rounded-2xl font-semibold text-stone-700 bg-white border border-stone-200">
<span class="flex items-center gap-3"><span class="text-2xl">🌈</span> Сенсорная интеграция</span>
<span class="text-lg">→</span>
</button>
<button data-id="aac" class="nav-btn flex items-center justify-between w-full text-left px-5 py-4 rounded-2xl font-semibold text-stone-700 bg-white border border-stone-200">
<span class="flex items-center gap-3"><span class="text-2xl">🗣️</span> Система АДК</span>
<span class="text-lg">→</span>
</button>
</div>
</div>
</div>
<div class="lg:col-span-8">
<div class="bg-white rounded-3xl p-6 sm:p-10 shadow-lg border border-stone-100 h-full flex flex-col" id="content-display">
<div class="flex flex-col xl:flex-row gap-10">
<div class="flex-1">
<div class="flex items-center gap-4 mb-2">
<span id="display-icon" class="text-5xl">🧩</span>
<h2 id="display-title" class="text-3xl font-extrabold text-teal-800">Что такое АВА-терапия?</h2>
</div>
<p id="display-subtitle" class="text-stone-400 font-semibold uppercase tracking-wider text-sm mb-6">Applied Behavior Analysis</p>
<div class="mb-8">
<h4 class="text-lg font-bold text-amber-600 mb-2 flex items-center gap-2">
<span>💡</span> Суть простыми словами
</h4>
<p id="display-desc" class="text-stone-700 leading-relaxed text-lg bg-amber-50 rounded-2xl p-5 border border-amber-100">
Это метод обучения, основанный на поощрении. Мы разбиваем любое сложное действие (например, чистку зубов или просьбу о помощи) на маленькие понятные шаги. Когда ребёнок успешно делает шаг — он получает «награду» (похвалу, любимую игрушку или жетон).
</p>
</div>
<div class="mb-8">
<h4 class="text-lg font-bold text-teal-700 mb-3 flex items-center gap-2">
<span>🎯</span> Зачем это нужно?
</h4>
<ul id="display-goals" class="space-y-3 text-stone-700">
<li class="flex items-start gap-3">
<span class="text-teal-500 mt-1">✔</span>
<span>Помогает освоить бытовые навыки.</span>
</li>
<li class="flex items-start gap-3">
<span class="text-teal-500 mt-1">✔</span>
<span>Учит взаимодействию с окружающими.</span>
</li>
<li class="flex items-start gap-3">
<span class="text-teal-500 mt-1">✔</span>
<span>Снижает нежелательное поведение, заменяя его эффективным общением.</span>
</li>
</ul>
</div>
<div class="bg-stone-50 border-l-4 border-teal-500 p-4 rounded-r-xl italic text-stone-600 font-medium" id="display-quote">
Главный принцип: мы не заставляем, а создаём мотивацию учиться!
</div>
</div>
<div class="flex-1 flex flex-col justify-center items-center border-t xl:border-t-0 xl:border-l border-stone-200 pt-8 xl:pt-0 xl:pl-8">
<h4 class="text-center font-bold text-stone-600 mb-2">Профиль воздействия терапии</h4>
<p class="text-center text-xs text-stone-400 mb-4 max-w-xs">Диаграмма показывает, на развитие каких сфер преимущественно направлена данная методика.</p>
<div class="chart-container">
<canvas id="impactChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-stone-800 text-stone-400 py-8 text-center mt-12">
<script>
const dictionaryData = {
aba: {
title: "Что такое АВА-терапия?",
icon: "🧩",
subtitle: "Applied Behavior Analysis (Прикладной анализ поведения)",
desc: "Это метод обучения, основанный на поощрении. Мы разбиваем любое сложное действие (например, чистку зубов или просьбу о помощи) на маленькие понятные шаги. Когда ребёнок успешно делает шаг — он получает «награду» (похвалу, любимую игрушку или жетон).",
goals: [
"Помогает освоить бытовые навыки.",
"Учит взаимодействию с окружающими.",
"Снижает нежелательное поведение, заменяя его эффективным общением."
],
quote: "Главный принцип: мы не заставляем, а создаём мотивацию учиться!",
chartData: [9, 7, 5, 2]
},
neuro: {
title: "Нейропсихологическая коррекция",
icon: "🧠",
subtitle: "Тренировка мозга через движение",
desc: "У каждого навыка (речи, письма, внимания) есть свой «фундамент» в мозге. Если фундамент неровный, надстройка (учеба) будет даваться с трудом. С помощью специальных двигательных упражнений и игр специалист помогает мозгу «дозреть» и выстроить правильные связи.",
goals: [
"Если ребёнок быстро устает или слишком активен.",
"Если есть проблемы с координацией или ориентацией в пространстве.",
"Чтобы подготовить мозг к школе и сложным задачам."
],
quote: "Мы тренируем тело, чтобы развивать мозг!",
chartData: [4, 3, 9, 8]
},
sensory: {
title: "Сенсорная интеграция",
icon: "🌈",
subtitle: "Настройка восприятия сигналов",
desc: "Представьте, что ваш мозг — это диспетчер, который принимает сигналы от глаз, ушей, кожи и мышц. Иногда диспетчер путает звонки. Это метод, который помогает ребёнку правильно воспринимать сигналы от своих органов чувств в специально оборудованных залах.",
goals: [
"Если ребёнок боится резких звуков или яркого света.",
"Если он постоянно всё трогает или, наоборот, избегает прикосновений.",
"Чтобы ребёнок чувствовал себя в безопасности в большом и шумном мире."
],
quote: "Мир становится понятнее, когда чувства работают в согласии.",
chartData: [6, 4, 3, 10]
},
aac: {
title: "Система АДК",
icon: "🗣️",
subtitle: "Альтернативная и дополнительная коммуникация",
desc: "Общение — это не только слова. Если ребёнок пока не говорит, это не значит, что ему нечего сказать. АДК — это «запасной выход» для общения. Это могут быть карточки с картинками (PECS), жесты, специальные кнопки или планшеты.",
goals: [
"Снижает уровень стресса (ребёнок может выразить просьбу).",
"Помогает социализации и взаимодействию в обществе.",
"Часто становится «трамплином» для появления обычной звуковой речи."
],
quote: "Голос есть у каждого, просто иногда он выглядит как картинка.",
chartData: [8, 10, 6, 1]
}
};
const titleEl = document.getElementById('display-title');
const iconEl = document.getElementById('display-icon');
const subtitleEl = document.getElementById('display-subtitle');
const descEl = document.getElementById('display-desc');
const goalsEl = document.getElementById('display-goals');
const quoteEl = document.getElementById('display-quote');
const buttons = document.querySelectorAll('.nav-btn');
const contentContainer = document.getElementById('content-display');
let radarChart = null;
function initChart() {
const ctx = document.getElementById('impactChart').getContext('2d');
Chart.defaults.font.family = "'Nunito', sans-serif";
Chart.defaults.color = '#78716c';
radarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Поведение', 'Социализация', 'Когнитивные навыки', 'Сенсорика и Моторика'],
datasets: [{
label: 'Уровень вовлечения',
data: dictionaryData.aba.chartData,
backgroundColor: 'rgba(15, 118, 110, 0.2)',
borderColor: 'rgba(15, 118, 110, 1)',
pointBackgroundColor: 'rgba(217, 119, 6, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(217, 119, 6, 1)',
borderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
angleLines: { color: 'rgba(0, 0, 0, 0.05)' },
grid: { color: 'rgba(0, 0, 0, 0.05)' },
pointLabels: {
font: { size: 11, weight: 'bold' },
color: '#57534e'
},
ticks: {
display: false,
max: 10,
min: 0,
stepSize: 2
}
}
},
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(28, 25, 23, 0.9)',
padding: 10,
cornerRadius: 8,
displayColors: false,
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) { label += ': '; }
if (context.parsed.y !== null) {
let val = context.raw;
if(val > 7) return 'Высокий фокус';
if(val > 4) return 'Средний фокус';
return 'Низкий фокус / Косвенно';
}
return '';
}
}
}
}
}
});
}
function updateContent(id) {
const data = dictionaryData[id];
contentContainer.classList.remove('fade-in');
void contentContainer.offsetWidth;
contentContainer.classList.add('fade-in');
titleEl.textContent = data.title;
iconEl.textContent = data.icon;
subtitleEl.textContent = data.subtitle;
descEl.textContent = data.desc;
quoteEl.textContent = data.quote;
goalsEl.innerHTML = '';
data.goals.forEach(goal => {
const li = document.createElement('li');
li.className = 'flex items-start gap-3';
li.innerHTML = `<span class="text-teal-500 mt-1">✔</span><span>${goal}</span>`;
goalsEl.appendChild(li);
});
radarChart.data.datasets[0].data = data.chartData;
radarChart.update();
}
buttons.forEach(btn => {
btn.addEventListener('click', (e) => {
const target = e.currentTarget;
if(target.classList.contains('active')) return;
buttons.forEach(b => {
b.classList.remove('active');
b.classList.add('bg-white', 'text-stone-700');
b.classList.remove('bg-teal-700', 'text-white');
});
target.classList.add('active');
updateContent(target.getAttribute('data-id'));
});
});
document.addEventListener('DOMContentLoaded', initChart);
</script>
</body>
</html>[/html]