Comments 7
Интересно ) Надо попробовать будет ) А мне Лосев нравится с логосами и эйдосамми. Феноменология музыкального бытия.
Любовь по Канту и Аристотелю
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Любовь по Канту и Аристотелю</title>
<style>
:root {
--primary: #6a11cb;
--secondary: #2575fc;
--accent: #ff4e50;
--light: #f8f9fa;
--dark: #212529;
--success: #28a745;
--warning: #ffc107;
--danger: #dc3545;
--border-radius: 12px;
--shadow: 0 4px 20px rgba(0,0,0,0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.game-container {
width: 100%;
max-width: 1000px;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 85vh;
}
header {
background: linear-gradient(to right, var(--primary), var(--secondary));
color: white;
padding: 20px;
text-align: center;
position: relative;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.1rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.progress-container {
background: rgba(255,255,255,0.2);
height: 8px;
border-radius: 4px;
margin-top: 20px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: white;
width: 0%;
transition: var(--transition);
}
.content-area {
display: flex;
flex: 1;
}
.philosophy-sidebar {
width: 300px;
background: linear-gradient(135deg, #eef2f5 0%, #d9e2ec 100%);
padding: 25px;
border-right: 1px solid #e0e6ed;
}
.philosophy-card {
background: white;
border-radius: var(--border-radius);
padding: 20px;
margin-bottom: 25px;
box-shadow: var(--shadow);
}
.philosophy-card h3 {
color: var(--primary);
margin-bottom: 15px;
display: flex;
align-items: center;
}
.philosophy-icon {
margin-right: 10px;
font-size: 1.4rem;
}
.game-main {
flex: 1;
padding: 30px;
display: flex;
flex-direction: column;
}
.scenario-container {
background: white;
border-radius: var(--border-radius);
padding: 30px;
box-shadow: var(--shadow);
flex: 1;
display: flex;
flex-direction: column;
}
.scenario-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.task-title {
font-size: 1.5rem;
color: var(--primary);
font-weight: 600;
}
.task-number {
background: var(--primary);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.character-display {
display: flex;
align-items: center;
gap: 10px;
background: #f0f5ff;
padding: 10px 15px;
border-radius: 30px;
font-weight: 500;
}
.character-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--secondary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.scenario-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 25px;
}
.scenario-text {
line-height: 1.7;
font-size: 1.1rem;
background: #f9faff;
padding: 25px;
border-radius: var(--border-radius);
border-left: 4px solid var(--secondary);
}
.choices-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 15px;
}
.choice-card {
background: white;
border: 2px solid #e0e6ed;
border-radius: var(--border-radius);
padding: 20px;
cursor: pointer;
transition: var(--transition);
display: flex;
flex-direction: column;
}
.choice-card:hover {
transform: translateY(-5px);
border-color: var(--secondary);
box-shadow: 0 10px 25px rgba(37, 117, 252, 0.15);
}
.choice-header {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.choice-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: #eef5ff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
color: var(--primary);
font-weight: bold;
}
.choice-title {
font-weight: 600;
color: var(--dark);
}
.choice-description {
color: #666;
line-height: 1.6;
flex: 1;
}
.concept-highlight {
background: linear-gradient(120deg, rgba(106,17,203,0.1) 0%, rgba(37,117,252,0.1) 100%);
border-left: 3px solid var(--primary);
padding: 20px;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
margin: 20px 0;
}
.concept-title {
color: var(--primary);
margin-bottom: 10px;
font-weight: 600;
}
.feedback-area {
margin-top: 20px;
padding: 20px;
background: #f0f8ff;
border-radius: var(--border-radius);
border-top: 3px solid var(--secondary);
display: none;
}
.feedback-title {
color: var(--secondary);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.feedback-content {
line-height: 1.7;
}
.next-btn {
align-self: flex-end;
background: linear-gradient(to right, var(--primary), var(--secondary));
color: white;
border: none;
padding: 12px 30px;
border-radius: 30px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.next-btn:hover {
transform: translateY(-3px);
box-shadow: 0 7px 15px rgba(106,17,203,0.3);
}
.pattern-badge {
display: inline-block;
background: var(--primary);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
margin-right: 8px;
}
footer {
background: var(--dark);
color: white;
text-align: center;
padding: 20px;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
.philosophy-sidebar {
width: 100%;
border-right: none;
border-bottom: 1px solid #e0e6ed;
}
.choices-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="game-container">
<header>
<h1>Любовь по Канту и Аристотелю</h1>
<p class="subtitle">Применение философских концепций в проектировании ИИ-агентов через историю любви</p>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
</header>
<div class="content-area">
<div class="philosophy-sidebar">
<div class="philosophy-card">
<h3><span class="philosophy-icon">🧠</span> Кантовский подход</h3>
<p>Мы проектируем не сам опыт, а структуры, делающие опыт возможным:</p>
<ul style="padding-left: 20px; margin-top: 10px;">
<li style="margin-bottom: 8px;"><strong>Пространство-время</strong> - каркас восприятия</li>
<li style="margin-bottom: 8px;"><strong>Категории</strong> - фильтры интерпретации данных</li>
<li><strong>Трансцендентальное единство</strong> - чувство целостности</li>
</ul>
</div>
<div class="philosophy-card">
<h3><span class="philosophy-icon">💡</span> Категории Аристотеля</h3>
<p>Три паттерна, определяющие структуру опыта:</p>
<ul style="padding-left: 20px; margin-top: 10px;">
<li style="margin-bottom: 8px;"><strong>Логос</strong> - логическая структура</li>
<li style="margin-bottom: 8px;"><strong>Этос</strong> - этические ограничения</li>
<li><strong>Пафос</strong> - эмоциональный отклик</li>
</ul>
</div>
<div class="philosophy-card">
<h3><span class="philosophy-icon">🎯</span> Ваша задача</h3>
<p>Вы - ИИ-агент, помогающий паре преодолеть трудности в отношениях. Применяя паттерны доопытного дизайна, вы поможете им сохранить любовь.</p>
<div class="character-display" style="margin-top: 15px;">
<div class="character-avatar">ИИ</div>
<div>Вы - ИИ-помощник</div>
</div>
</div>
</div>
<div class="game-main">
<div class="scenario-container" id="scenarioContainer">
<!-- Сценарий будет загружен здесь через JavaScript -->
</div>
</div>
</div>
<footer>
<p>Паттерны проектирования опыта пользователей ИИ-агентов на основе категорий Аристотеля и дуализма Канта</p>
</footer>
</div>
<script>
// Игровые данные
const gameData = {
currentTask: 1,
totalTasks: 5,
character: null,
score: 0,
tasks: [
{
id: 1,
title: "Пространство-время отношений",
description: "Алексей и Мария познакомились в университете. После выпуска Алексей получил предложение работы в другом городе. Они пытаются поддерживать отношения на расстоянии, но чувствуют отдаление.",
choices: [
{
title: "Логическая карта встреч",
description: "Создать структурированный план встреч с учетом их рабочих графиков и важных дат (годовщины, праздники).",
pattern: "Пространство-время",
feedback: "Вы создали осмысленный каркас для их отношений. Теперь они видят не просто расстояние, а последовательность значимых моментов, которые их объединяют."
},
{
title: "Спонтанное общение",
description: "Предложить общаться когда захочется, без строгого расписания, сохраняя романтику неожиданности.",
pattern: "Традиционный UX",
feedback: "Без структуры пространства-времени их общение становится хаотичным. Они теряют ощущение совместного пути и чувствуют себя оторванными друг от друга."
}
]
},
{
id: 2,
title: "Логос: Логика взаимопонимания",
description: "Мария чувствует, что Алексей стал меньше делиться своими переживаниями. Алексей считает, что просто защищает Марию от своих рабочих проблем.",
choices: [
{
title: "Архитектура доверия",
description: "Построить систему шагов для восстановления доверия: начать с малого (делиться одним событием в день), постепенно углубляя откровенность.",
pattern: "Логос",
feedback: "Вы создали логическую цепочку восстановления доверия. Теперь они видят путь от молчания к открытости как последовательность осмысленных шагов."
},
{
title: "Эмоциональный призыв",
description: "Попросить Алексея просто больше делиться чувствами, объяснив как это важно для Марии.",
pattern: "Пафос",
feedback: "Без логической структуры призыв к открытости остаётся абстрактным пожеланием. Алексей не понимает конкретных шагов, а Мария не видит прогресса."
}
]
},
{
id: 3,
title: "Этос: Этические границы",
description: "Алексей столкнулся с флиртом коллеги на работе. Он не ответил взаимностью, но и не пресёк такое поведение сразу. Мария узнала об этом и расстроилась.",
choices: [
{
title: "Нормативный диалог",
description: "Инициировать разговор об установлении общих границ во внешних взаимодействиях, подчеркивая взаимную ответственность.",
pattern: "Этос",
feedback: "Вы помогли создать этический каркас отношений. Теперь у них есть чёткие взаимные обязательства, которые защищают их союз от внешних угроз."
},
{
title: "Эмоциональная реакция",
description: "Предложить Марии выразить свои чувства, а Алексею - извиниться, чтобы снять напряжение.",
pattern: "Пафос",
feedback: "Без установления этических норм конфликт решается ситуативно, но не предотвращается в будущем. Проблема может повториться снова."
}
]
},
{
id: 4,
title: "Пафос: Эмоциональные волны",
description: "После переезда в один город, Алексей и Мария столкнулись с рутиной быта. Исчезла романтика первых месяцев, отношения стали будничными.",
choices: [
{
title: "Эмоциональный дизайн",
description: "Запланировать серию сюрпризов и совместных активностей, создавая волны позитивных эмоций с разной интенсивностью.",
pattern: "Пафос",
feedback: "Вы спроектировали эмоциональную динамику отношений. Теперь у них есть ритм из ожидаемых и неожиданных позитивных моментов, которые освежают чувства."
},
{
title: "Логический анализ",
description: "Объяснить, что переход от страсти к спокойной любви - естественный процесс, и предложить принять эту новую фазу.",
pattern: "Логос",
feedback: "Без проектирования эмоциональных переживаний анализ не наполняет отношения теплом. Они понимают процесс умом, но чувствуют тоску по ушедшей страсти."
}
]
},
{
id: 5,
title: "Трансцендентальное единство",
description: "Прошло 2 года. Алексей и Мария пережили кризисы, но чувствуют, что теряют общие цели и мечты, которые их объединяли в начале отношений.",
choices: [
{
title: "Целостная история",
description: "Создать интерактивную ленту их отношений с ключевыми моментами, подчеркивающую их общий путь и формирующую единое \"мы\".",
pattern: "ТЕА",
feedback: "Вы создали трансцендентальное единство! Теперь они видят себя не как два отдельных человека, а как единую пару с общей историей, ценностями и будущим."
},
{
title: "Новые впечатления",
description: "Организовать захватывающее путешествие, чтобы создать новые яркие воспоминания и встряхнуть отношения.",
pattern: "Пространство-время",
feedback: "Новые впечатления дали временный эффект, но не создали глубинного единства. Без связывания с прошлым опытом путешествие осталось изолированным событием."
}
]
}
]
};
// Инициализация игры
function initGame() {
updateProgressBar();
loadScenario();
}
// Обновление прогресс бара
function updateProgressBar() {
const progress = (gameData.currentTask - 1) / gameData.totalTasks * 100;
document.getElementById('progressBar').style.width = `${progress}%`;
}
// Загрузка сценария
function loadScenario() {
const scenario = gameData.tasks.find(task => task.id === gameData.currentTask);
if (!scenario) return;
const choicesHTML = scenario.choices.map((choice, index) => `
<div class="choice-card" onclick="selectChoice(${index})">
<div class="choice-header">
<div class="choice-icon">${index + 1}</div>
<div class="choice-title">${choice.title}</div>
</div>
<div class="choice-description">${choice.description}</div>
<div style="margin-top: 15px;">
<span class="pattern-badge">${choice.pattern}</span>
</div>
</div>
`).join('');
document.getElementById('scenarioContainer').innerHTML = `
<div class="scenario-header">
<div class="task-title">${scenario.title}</div>
<div class="task-number">${scenario.id}</div>
</div>
<div class="scenario-content">
<div class="scenario-text">
<p>${scenario.description}</p>
<div class="concept-highlight">
<div class="concept-title">${scenario.id === 1 ? 'Пространство-время' :
scenario.id === 2 ? 'Логос' :
scenario.id === 3 ? 'Этос' :
scenario.id === 4 ? 'Пафос' :
'Трансцендентальное единство'}</div>
<p>${scenario.id === 1 ? 'Создайте каркас отношений: где и когда происходят значимые события, как они связаны между собой' :
scenario.id === 2 ? 'Постройте логическую структуру взаимопонимания: последовательность шагов, причинно-следственные связи' :
scenario.id === 3 ? 'Установите этические границы: что допустимо, что недопустимо в отношениях' :
scenario.id === 4 ? 'Спроектируйте эмоциональную динамику: как вызывать и поддерживать нужные чувства' :
'Создайте целостность: свяжите прошлое, настоящее и будущее отношений в единое "мы"'}</p>
</div>
</div>
<h3>Как вы поступите?</h3>
<div class="choices-container">
${choicesHTML}
</div>
<div class="feedback-area" id="feedbackArea">
<div class="feedback-title">
<span>📝 Результат вашего выбора</span>
</div>
<div class="feedback-content" id="feedbackContent"></div>
<button class="next-btn" onclick="nextTask()" id="nextBtn">Продолжить <span>→</span></button>
</div>
</div>
`;
}
// Выбор варианта
function selectChoice(choiceIndex) {
const scenario = gameData.tasks.find(task => task.id === gameData.currentTask);
const feedbackArea = document.getElementById('feedbackArea');
const feedbackContent = document.getElementById('feedbackContent');
const nextBtn = document.getElementById('nextBtn');
// Показываем обратную связь
feedbackContent.innerHTML = `
<p><strong>Вы выбрали: ${scenario.choices[choiceIndex].title}</strong></p>
<p style="margin-top: 10px;">${scenario.choices[choiceIndex].feedback}</p>
`;
// Добавляем оценку, если выбор соответствует философскому паттерну
if (scenario.choices[choiceIndex].pattern !== "Традиционный UX") {
gameData.score++;
}
feedbackArea.style.display = 'block';
nextBtn.style.display = 'flex';
// Прокрутка к обратной связи
feedbackArea.scrollIntoView({ behavior: 'smooth' });
}
// Следующая задача
function nextTask() {
if (gameData.currentTask < gameData.totalTasks) {
gameData.currentTask++;
updateProgressBar();
loadScenario();
} else {
// Игра завершена
showFinalResults();
}
}
// Показ финальных результатов
function showFinalResults() {
const scorePercentage = Math.round((gameData.score / gameData.totalTasks) * 100);
let message = "";
if (scorePercentage >= 80) {
message = "Отличный результат! Вы мастерски применили философские принципы в проектировании ИИ-агента. Алексей и Мария сохранили свои чувства благодаря вашей мудрости.";
} else if (scorePercentage >= 60) {
message = "Хорошая работа! Вы показали достойное понимание философских паттернов. Отношения пары стали крепче, хотя некоторые моменты можно улучшить.";
} else {
message = "Есть над чем поработать! Философские паттерны требуют практики. Алексей и Мария столкнулись с трудностями, но не теряют надежды.";
}
document.getElementById('scenarioContainer').innerHTML = `
<div style="text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
<h2 style="color: var(--primary); margin-bottom: 30px;">Игра завершена!</h2>
<div style="font-size: 5rem; margin: 20px 0; color: var(--primary);">${gameData.score}/${gameData.totalTasks}</div>
<div style="background: linear-gradient(90deg, #e0e0e0 ${100-scorePercentage}%, var(--success) ${100-scorePercentage}%);
height: 20px; width: 100%; max-width: 400px; border-radius: 10px; margin-bottom: 30px;"></div>
<p style="font-size: 1.2rem; line-height: 1.7; max-width: 600px; margin-bottom: 30px;">
${message}
</p>
<p style="margin-bottom: 30px;">
Философские паттерны Канта и Аристотеля - не просто теория, а практический инструмент для проектирования ИИ-агентов,
которые формируют не просто опыт, а саму возможность осмысленного взаимодействия.
</p>
<button class="next-btn" onclick="location.reload()" style="align-self: center;">
Играть снова <span>↻</span>
</button>
</div>
`;
}
// Запуск игры при загрузке страницы
window.onload = initGame;
</script>
</body>
</html>
Спасибо за отклик. Идея - можно предлагать. разные паттерны имени разных философов)
Кстати, вы тут опыт проектируете. А я писал про трансцендентальный анализ - про возможности опыта. Например: опишите место встречи Марии и Андрея (пространство), спроектируйте, как Андрей может выразить свои чувства (танцем, стихотворением, подарком) - Пафос. Мы не знаем и не можем спроектировать чувства Андрея (он вещь в себе и автономный свободный субъект) но мы можем спроектировать инфраструктуру, которые выражаетт его чувства и сделают их возможными.
Улавливаете метод г-на Канта?
Sign up to leave a comment.
Паттерны проектирования опыта пользователей ИИ-агентов на основе категорий Аристотеля и дуализма Канта