https://www.pandoraburo.ru/reabilitatciya-posle-insultov
Реабилитация после инсультов
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Нейро-тренажер: Струп-тест</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
body {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, sans-serif;
padding: 15px;
}
.container {
background: #f5f7fa;
border-radius: 24px;
padding: 30px;
max-width: 650px;
width: 100%;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 10px;
font-size: 1.6rem;
}
.subtitle {
text-align: center;
color: #7f8c8d;
margin-bottom: 25px;
font-size: 0.95rem;
}
.stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 25px;
}
.stat-card {
background: white;
border-radius: 14px;
padding: 12px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.stat-label {
font-size: 0.8rem;
color: #95a5a6;
margin-bottom: 4px;
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
color: #2c3e50;
}
.word-display {
background: #2c3e50;
color: white;
padding: 60px 20px;
text-align: center;
border-radius: 18px;
margin-bottom: 20px;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}
.word-display span {
font-size: 3.5rem;
font-weight: 900;
letter-spacing: 2px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.instruction {
text-align: center;
color: #7f8c8d;
margin-bottom: 15px;
font-size: 1rem;
font-style: italic;
}
.buttons-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.color-btn {
padding: 18px;
font-size: 1.1rem;
font-weight: bold;
color: white;
border: 3px solid transparent;
border-radius: 14px;
cursor: pointer;
transition: all 0.15s;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.color-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.color-btn:active:not(:disabled) {
transform: translateY(2px);
}
.color-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.color-btn.correct {
border-color: #00e676 !important;
animation: pulse-green 0.5s;
}
.color-btn.wrong {
border-color: #ff1744 !important;
animation: shake 0.4s;
}
@keyframes pulse-green {
0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
50% { box-shadow: 0 0 30px #00e676; }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
.controls {
display: flex;
gap: 12px;
}
.btn {
flex: 1;
padding: 14px;
font-size: 1.1rem;
font-weight: bold;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary {
background: #27ae60;
color: white;
box-shadow: 0 4px 0 #1e8449;
}
.btn-primary:active {
transform: translateY(4px);
box-shadow: none;
}
.btn-secondary {
background: #95a5a6;
color: white;
}
.message {
text-align: center;
padding: 15px;
margin-top: 15px;
border-radius: 12px;
font-weight: bold;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.message.success { background: #d4edda; color: #155724; }
.message.error { background: #f8d7da; color: #721c24; }
.message.info { background: #d1ecf1; color: #0c5460; }
.timer-bar {
height: 6px;
background: #ecf0f1;
border-radius: 3px;
margin-bottom: 15px;
overflow: hidden;
}
.timer-fill {
height: 100%;
background: linear-gradient(90deg, #00e676, #ff1744);
transition: width 0.1s linear;
width: 100%;
}
@media (max-width: 500px) {
.word-display span { font-size: 2.2rem; }
.buttons-grid { grid-template-columns: 1fr; }
.stat-value { font-size: 1.2rem; }
}
</style>
</head>
<body>
<div class="container">
<h1>? Струп-тест</h1>
<p class="subtitle">Нажми цвет <b>ШРИФТА</b>, а не значение слова</p>
<div class="stats-row">
<div class="stat-card">
<div class="stat-label">✅ Верно</div>
<div class="stat-value" id="correctCount">0</div>
</div>
<div class="stat-card">
<div class="stat-label">❌ Ошибки</div>
<div class="stat-value" id="wrongCount">0</div>
</div>
<div class="stat-card">
<div class="stat-label">⚡ Реакция</div>
<div class="stat-value" id="avgTime">0 мс</div>
</div>
</div>
<div class="timer-bar"><div class="timer-fill" id="timerFill"></div></div>
<div class="word-display">
<span id="wordDisplay">НАЖМИ "СТАРТ"</span>
</div>
<p class="instruction" id="instruction">Задача: определить цвет букв</p>
<div class="buttons-grid" id="buttonsGrid"></div>
<div class="controls">
<button class="btn btn-primary" id="startBtn">▶ Старт</button>
<button class="btn btn-secondary" id="stopBtn" disabled="disabled">⏹ Стоп</button>
</div>
<div class="message info" id="message">
Тренирует тормозной контроль и переключение внимания. Рекомендуется 10-15 минут в день.
</div>
</div>
<script>
(function() {
// Палитра цветов (названия + коды)
const COLORS = [
{ name: 'КРАСНЫЙ', hex: '#e74c3c', colorblindSymbol: '●' },
{ name: 'СИНИЙ', hex: '#3498db', colorblindSymbol: '■' },
{ name: 'ЗЕЛЁНЫЙ', hex: '#27ae60', colorblindSymbol: '▲' },
{ name: 'ЖЁЛТЫЙ', hex: '#f1c40f', colorblindSymbol: '◆' },
{ name: 'ФИОЛЕТОВЫЙ', hex: '#9b59b6', colorblindSymbol: '★' },
{ name: 'ОРАНЖЕВЫЙ', hex: '#e67e22', colorblindSymbol: '◐' }
];
const wordDisplay = document.getElementById('wordDisplay');
const instruction = document.getElementById('instruction');
const buttonsGrid = document.getElementById('buttonsGrid');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const message = document.getElementById('message');
const timerFill = document.getElementById('timerFill');
const correctCountEl = document.getElementById('correctCount');
const wrongCountEl = document.getElementById('wrongCount');
const avgTimeEl = document.getElementById('avgTime');
// Состояние игры
let correctCount = 0;
let wrongCount = 0;
let totalTime = 0;
let trialsCount = 0;
let currentLevel = 1;
let currentColor = null;
let isRunning = false;
let wordStartTime = 0;
let timerInterval = null;
let timeLimit = 5000; // 5 секунд на ответ
// Создание кнопок с цветами
function renderButtons() {
buttonsGrid.innerHTML = '';
const colorsToShow = COLORS.slice(0, Math.min(3 + currentLevel, COLORS.length));
colorsToShow.forEach(color => {
const btn = document.createElement('button');
btn.className = 'color-btn';
btn.style.background = color.hex;
btn.textContent = color.name;
btn.dataset.hex = color.hex;
btn.disabled = !isRunning;
btn.addEventListener('click', () => handleAnswer(color.hex));
buttonsGrid.appendChild(btn);
});
}
// Показ нового слова
function showNewWord() {
if (!isRunning) return;
// Выбираем слово и цвет (обязательно разные!)
const wordIndex = Math.floor(Math.random() * COLORS.length);
let colorIndex;
do {
colorIndex = Math.floor(Math.random() * COLORS.length);
} while (colorIndex === wordIndex && COLORS.length > 1);
currentColor = COLORS[colorIndex];
wordDisplay.textContent = COLORS[wordIndex].name;
wordDisplay.querySelector('span') ||
(wordDisplay.innerHTML = `<span style="color: ${currentColor.hex}">${COLORS[wordIndex].name}</span>`);
// Перезаписываем правильно
const span = document.createElement('span');
span.textContent = COLORS[wordIndex].name;
span.style.color = currentColor.hex;
wordDisplay.innerHTML = '';
wordDisplay.appendChild(span);
wordStartTime = Date.now();
startTimer();
renderButtons();
}
// Таймер ответа
function startTimer() {
clearInterval(timerInterval);
timerFill.style.width = '100%';
const startTime = Date.now();
timerInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
const percent = Math.max(0, 100 - (elapsed / timeLimit) * 100);
timerFill.style.width = percent + '%';
if (elapsed >= timeLimit) {
clearInterval(timerInterval);
handleTimeout();
}
}, 50);
}
// Обработка ответа
function handleAnswer(chosenHex) {
clearInterval(timerInterval);
const reactionTime = Date.now() - wordStartTime;
trialsCount++;
totalTime += reactionTime;
const buttons = buttonsGrid.querySelectorAll('.color-btn');
if (chosenHex === currentColor.hex) {
// Правильный ответ
correctCount++;
buttons.forEach(btn => {
if (btn.dataset.hex === chosenHex) btn.classList.add('correct');
});
message.className = 'message success';
message.textContent = `✅ Верно! Реакция: ${reactionTime} мс`;
// Повышение уровня каждые 5 правильных
if (correctCount % 5 === 0 && correctCount > 0) {
currentLevel++;
timeLimit = Math.max(2000, timeLimit - 300);
message.textContent += ` ? Уровень ${currentLevel}!`;
}
} else {
// Неправильный ответ
wrongCount++;
buttons.forEach(btn => {
if (btn.dataset.hex === chosenHex) btn.classList.add('wrong');
if (btn.dataset.hex === currentColor.hex) btn.classList.add('correct');
});
message.className = 'message error';
message.textContent = `❌ Ошибка. Правильный цвет выделен зелёным.`;
}
updateStats();
disableButtons();
setTimeout(() => {
if (isRunning) showNewWord();
}, 1200);
}
// Время вышло
function handleTimeout() {
wrongCount++;
trialsCount++;
const buttons = buttonsGrid.querySelectorAll('.color-btn');
buttons.forEach(btn => {
if (btn.dataset.hex === currentColor.hex) btn.classList.add('correct');
});
message.className = 'message error';
message.textContent = `⏱ Время вышло! Правильный цвет: ${currentColor.name}`;
updateStats();
disableButtons();
setTimeout(() => {
if (isRunning) showNewWord();
}, 1500);
}
function disableButtons() {
buttonsGrid.querySelectorAll('.color-btn').forEach(btn => btn.disabled = true);
}
function updateStats() {
correctCountEl.textContent = correctCount;
wrongCountEl.textContent = wrongCount;
const avg = trialsCount > 0 ? Math.round(totalTime / trialsCount) : 0;
avgTimeEl.textContent = avg + ' мс';
}
// Запуск
function startGame() {
isRunning = true;
correctCount = 0;
wrongCount = 0;
totalTime = 0;
trialsCount = 0;
currentLevel = 1;
timeLimit = 5000;
updateStats();
startBtn.disabled = true;
stopBtn.disabled = false;
message.className = 'message info';
message.textContent = 'Тренировка началась! Не торопись — важна точность.';
showNewWord();
}
function stopGame() {
isRunning = false;
clearInterval(timerInterval);
startBtn.disabled = false;
stopBtn.disabled = true;
disableButtons();
wordDisplay.innerHTML = '<span>ТРЕНИРОВКА ОКОНЧЕНА</span>';
instruction.textContent = 'Нажми "Старт" для новой попытки';
const accuracy = trialsCount > 0 ? Math.round((correctCount / trialsCount) * 100) : 0;
const avg = trialsCount > 0 ? Math.round(totalTime / trialsCount) : 0;
message.className = 'message info';
message.textContent = `? Точность: ${accuracy}% | Средняя реакция: ${avg} мс | Уровень: ${currentLevel}`;
// Сохраняем в localStorage для врача
const session = {
date: new Date().toISOString(),
correct: correctCount,
wrong: wrongCount,
accuracy: accuracy,
avgReaction: avg,
level: currentLevel
};
const history = JSON.parse(localStorage.getItem('stroop_history') || '[]');
history.push(session);
localStorage.setItem('stroop_history', JSON.stringify(history));
}
startBtn.addEventListener('click', startGame);
stopBtn.addEventListener('click', stopGame);
renderButtons();
})();
</script>
</body>
</html>
2026-08-15T11:34:19Z
https://pandoraburo.ru/ssl/u/pic/69/be1662953111f1a508b532fbee6d5f/-/logo.png
1592962
https://www.pandoraburo.ru/