https://www.pandoraburo.ru/ariadne
Ariadne
<style>
/* ============================================
ARIADNE v1.0 — Design System (Block 1/14)
Мистика + Наука = Психометрия
============================================ */
:root {
/* === Палитра: глубокая ночь + золотая нить === */
--bg-void: #0a0612; /* почти чёрный с фиолетом */
--bg-deep: #140d24; /* основной фон */
--bg-panel: #1c1433; /* панели, карточки */
--bg-elevated: #261b45; /* hover, активные */
--accent-gold: #d4af37; /* золотая нить Ариадны */
--accent-gold-dim: #a8872b;
--accent-cyan: #5eead4; /* холодный cyan — логика */
--accent-violet: #a78bfa; /* фиолет — интуиция */
--accent-rose: #f472b6; /* розовый — эмоции */
--text-primary: #f4f1fa;
--text-secondary: #b8b0cc;
--text-muted: #6b6380;
--text-disabled: #3d3650;
--border-subtle: rgba(167, 139, 250, 0.12);
--border-strong: rgba(212, 175, 55, 0.35);
/* === Семантические цвета === */
--success: #34d399;
--warning: #fbbf24;
--danger: #f87171;
--info: #60a5fa;
/* === Типографика === */
--font-display: 'Cormorant Garamond', 'Georgia', serif;
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', monospace;
/* === Размеры и отступы === */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
--space-2xl: 64px;
/* === Тени и свечения === */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
--shadow-md: 0 8px 24px rgba(0,0,0,0.4);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
--glow-gold: 0 0 20px rgba(212, 175, 55, 0.4);
--glow-cyan: 0 0 20px rgba(94, 234, 212, 0.3);
--glow-violet: 0 0 24px rgba(167, 139, 250, 0.35);
/* === Переходы === */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 600ms;
}
/* === СБРОС И БАЗА === */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
background: var(--bg-void);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
/* Магический фон — тонкая текстура */
background-image:
radial-gradient(ellipse at top left, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(94, 234, 212, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at center, rgba(212, 175, 55, 0.03) 0%, transparent 70%);
background-attachment: fixed;
}
/* === ТИПОГРАФИКА === */
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.2;
color: var(--text-primary);
}
h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
p { color: var(--text-secondary); margin-bottom: var(--space-md); }
/* Золотой акцент для ключевых слов */
.golden {
color: var(--accent-gold);
font-family: var(--font-display);
font-style: italic;
}
.cyan { color: var(--accent-cyan); }
.violet { color: var(--accent-violet); }
.rose { color: var(--accent-rose); }
/* Моноширинный для чисел и вероятностей */
.mono {
font-family: var(--font-mono);
font-size: 0.9em;
color: var(--accent-cyan);
letter-spacing: -0.02em;
}
/* === УТИЛИТЫ === */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-small { font-size: 0.875rem; }
.text-tiny { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hidden { display: none !important; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); border: 0;
}
/* === СКРОЛЛБАР (мистический) === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--accent-violet), var(--accent-gold-dim));
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }
/* === АНИМАЦИИ (базовые) === */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes glowPulse {
0%, 100% { box-shadow: 0 0 12px rgba(212, 175, 55, 0.3); }
50% { box-shadow: 0 0 28px rgba(212, 175, 55, 0.6); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.fade-in { animation: fadeIn var(--duration-normal) var(--ease-smooth) both; }
.glow-pulse { animation: glowPulse 3s var(--ease-smooth) infinite; }
/* Загрузка-шиммер для карточек */
.skeleton {
background: linear-gradient(
90deg,
var(--bg-panel) 0%,
var(--bg-elevated) 50%,
var(--bg-panel) 100%
);
background-size: 200% 100%;
animation: shimmer 1.8s infinite;
border-radius: var(--radius-sm);
}
</style>
<style>
/* ============================================
ARIADNE v1.0 — Layout System (Block 2/14)
Структура: Header + Sidebar + Main
============================================ */
/* === APP CONTAINER === */
.app-container {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 280px 1fr;
grid-template-areas:
"header header"
"sidebar main";
min-height: 100vh;
gap: 0;
}
/* === HEADER === */
.app-header {
grid-area: header;
background: var(--bg-deep);
border-bottom: 1px solid var(--border-subtle);
padding: var(--space-md) var(--space-lg);
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
background: rgba(20, 13, 36, 0.85);
}
.header-logo {
display: flex;
align-items: center;
gap: var(--space-md);
}
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-violet));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: var(--glow-gold);
animation: glowPulse 4s var(--ease-smooth) infinite;
}
.logo-text {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.05em;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-violet));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.logo-subtitle {
font-size: 0.75rem;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: -4px;
}
.header-nav {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.nav-status {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--bg-panel);
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 8px var(--success);
animation: glowPulse 2s infinite;
}
.status-text {
font-size: 0.875rem;
color: var(--text-secondary);
}
.nav-actions {
display: flex;
gap: var(--space-sm);
}
.icon-btn {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--bg-panel);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-smooth);
font-size: 1.25rem;
}
.icon-btn:hover {
background: var(--bg-elevated);
color: var(--accent-gold);
border-color: var(--border-strong);
transform: translateY(-2px);
}
/* === SIDEBAR === */
.app-sidebar {
grid-area: sidebar;
background: var(--bg-deep);
border-right: 1px solid var(--border-subtle);
padding: var(--space-lg) var(--space-md);
overflow-y: auto;
position: sticky;
top: 72px;
height: calc(100vh - 72px);
}
.sidebar-section {
margin-bottom: var(--space-xl);
}
.sidebar-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: var(--space-md);
padding-left: var(--space-sm);
}
.sidebar-menu {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.menu-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-smooth);
color: var(--text-secondary);
border: 1px solid transparent;
}
.menu-item:hover {
background: var(--bg-panel);
color: var(--text-primary);
border-color: var(--border-subtle);
}
.menu-item.active {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(167, 139, 250, 0.1));
color: var(--accent-gold);
border-color: var(--border-strong);
box-shadow: var(--glow-gold);
}
.menu-icon {
font-size: 1.5rem;
width: 24px;
text-align: center;
}
.menu-label {
flex: 1;
font-size: 0.9375rem;
font-weight: 500;
}
.menu-badge {
background: var(--accent-violet);
color: white;
font-size: 0.75rem;
padding: 2px 8px;
border-radius: var(--radius-sm);
font-weight: 600;
}
/* === MAIN CONTENT === */
.app-main {
grid-area: main;
padding: var(--space-xl);
overflow-y: auto;
background: var(--bg-void);
}
.main-header {
margin-bottom: var(--space-xl);
display: flex;
align-items: center;
justify-content: space-between;
}
.main-title {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 400;
color: var(--text-primary);
}
.main-subtitle {
font-size: 0.875rem;
color: var(--text-muted);
margin-top: var(--space-xs);
}
.main-actions {
display: flex;
gap: var(--space-md);
}
/* === GRID SYSTEM === */
.grid {
display: grid;
gap: var(--space-lg);
}
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto-fit {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* Span utilities */
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.row-span-2 { grid-row: span 2; }
/* === RESPONSIVE === */
@media (max-width: 1200px) {
.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 968px) {
.app-container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main";
}
.app-sidebar {
display: none; /* Скрываем на мобильных, будет drawer */
}
.app-sidebar.mobile-open {
display: block;
position: fixed;
top: 72px;
left: 0;
width: 280px;
z-index: 99;
box-shadow: var(--shadow-lg);
}
.grid-cols-2,
.grid-cols-3,
.grid-cols-4 {
grid-template-columns: 1fr;
}
.col-span-2,
.col-span-3 {
grid-column: span 1;
}
}
@media (max-width: 640px) {
.app-header {
padding: var(--space-md);
}
.logo-text {
font-size: 1.25rem;
}
.logo-subtitle {
display: none;
}
.nav-status {
display: none;
}
.app-main {
padding: var(--space-md);
}
.main-title {
font-size: 1.5rem;
}
}
/* === MOBILE MENU TOGGLE === */
.mobile-menu-toggle {
display: none;
}
@media (max-width: 968px) {
.mobile-menu-toggle {
display: flex;
}
}
</style>
<style>
/* ============================================
ARIADNE v1.0 — UI Components (Block 3/14)
Cards, Buttons, Forms, Tags, Progress
============================================ */
/* === CARDS === */
.card {
background: var(--bg-panel);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-lg);
transition: all var(--duration-normal) var(--ease-smooth);
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-smooth);
}
.card:hover {
border-color: var(--border-strong);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.card:hover::before {
opacity: 1;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border-subtle);
}
.card-title {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.card-icon {
font-size: 1.5rem;
color: var(--accent-gold);
}
.card-body {
color: var(--text-secondary);
line-height: 1.7;
}
.card-footer {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
}
/* Статистическая карточка (метрика) */
.stat-card {
background: linear-gradient(135deg, var(--bg-panel), var(--bg-elevated));
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-lg);
position: relative;
overflow: hidden;
}
.stat-card::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.stat-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-sm);
}
.stat-value {
font-family: var(--font-mono);
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: var(--space-xs);
}
.stat-change {
font-size: 0.875rem;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }
.stat-change.neutral { color: var(--text-muted); }
/* Карточка с иконкой слева */
.feature-card {
display: flex;
gap: var(--space-lg);
align-items: flex-start;
}
.feature-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(167, 139, 250, 0.1));
border: 1px solid var(--border-strong);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
flex-shrink: 0;
}
.feature-content {
flex: 1;
}
.feature-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.feature-description {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* === BUTTONS === */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-smooth);
border: 1px solid transparent;
text-decoration: none;
white-space: nowrap;
user-select: none;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Primary — золотой акцент */
.btn-primary {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dim));
color: var(--bg-void);
border-color: var(--accent-gold);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, var(--accent-gold-dim), var(--accent-gold));
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
transform: translateY(-2px);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
/* Secondary — фиолетовый */
.btn-secondary {
background: var(--bg-elevated);
color: var(--accent-violet);
border-color: var(--accent-violet);
}
.btn-secondary:hover:not(:disabled) {
background: rgba(167, 139, 250, 0.15);
box-shadow: var(--glow-violet);
transform: translateY(-2px);
}
/* Ghost — прозрачный */
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border-color: var(--border-subtle);
}
.btn-ghost:hover:not(:disabled) {
background: var(--bg-panel);
color: var(--text-primary);
border-color: var(--border-strong);
}
/* Danger */
.btn-danger {
background: rgba(248, 113, 113, 0.15);
color: var(--danger);
border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
background: rgba(248, 113, 113, 0.25);
box-shadow: 0 0 16px rgba(248, 113, 113, 0.3);
}
/* Размеры */
.btn-sm {
padding: var(--space-sm) var(--space-md);
font-size: 0.8125rem;
}
.btn-lg {
padding: var(--space-lg) var(--space-xl);
font-size: 1.0625rem;
}
.btn-icon {
width: 40px;
height: 40px;
padding: 0;
}
/* === FORMS === */
.form-group {
margin-bottom: var(--space-lg);
}
.form-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
letter-spacing: 0.02em;
}
.form-label-optional {
color: var(--text-muted);
font-weight: 400;
font-size: 0.75rem;
margin-left: var(--space-sm);
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: var(--space-md);
background: var(--bg-deep);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.9375rem;
transition: all var(--duration-fast) var(--ease-smooth);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--text-muted);
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
border-color: var(--border-strong);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
background: var(--bg-panel);
}
.form-textarea {
min-height: 120px;
resize: vertical;
line-height: 1.6;
}
.form-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b8b0cc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-md) center;
padding-right: var(--space-xl);
}
/* Checkbox и Radio */
.form-check {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
user-select: none;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--accent-gold);
}
.form-check-label {
font-size: 0.9375rem;
color: var(--text-secondary);
cursor: pointer;
}
/* Help text */
.form-help {
font-size: 0.8125rem;
color: var(--text-muted);
margin-top: var(--space-xs);
}
.form-error {
font-size: 0.8125rem;
color: var(--danger);
margin-top: var(--space-xs);
}
/* === TAGS & BADGES === */
.tag {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-md);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-smooth);
}
.tag:hover {
background: var(--bg-panel);
border-color: var(--border-strong);
color: var(--text-primary);
}
.tag.active {
background: rgba(212, 175, 55, 0.15);
border-color: var(--accent-gold);
color: var(--accent-gold);
}
.tag-gold {
background: rgba(212, 175, 55, 0.15);
border-color: var(--accent-gold);
color: var(--accent-gold);
}
.tag-violet {
background: rgba(167, 139, 250, 0.15);
border-color: var(--accent-violet);
color: var(--accent-violet);
}
.tag-cyan {
background: rgba(94, 234, 212, 0.15);
border-color: var(--accent-cyan);
color: var(--accent-cyan);
}
.tag-rose {
background: rgba(244, 114, 182, 0.15);
border-color: var(--accent-rose);
color: var(--accent-rose);
}
.badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--accent-violet);
color: white;
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-sm);
}
/* === PROGRESS BARS === */
.progress {
width: 100%;
height: 8px;
background: var(--bg-deep);
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent-gold), var(--accent-cyan));
border-radius: var(--radius-sm);
transition: width var(--duration-slow) var(--ease-smooth);
position: relative;
overflow: hidden;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%
);
animation: shimmer 2s infinite;
background-size: 200% 100%;
}
.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-xs);
font-size: 0.8125rem;
}
.progress-label-text {
color: var(--text-secondary);
}
.progress-label-value {
font-family: var(--font-mono);
color: var(--accent-cyan);
font-weight: 600;
}
/* === DIVIDERS === */
.divider {
height: 1px;
background: var(--border-subtle);
margin: var(--space-lg) 0;
}
.divider-thick {
height: 2px;
background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
/* === UTILITY CLASSES === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.w-full { width: 100%; }
</style>
<style>
/* ============================================
ARIADNE v1.0 — Advanced UI (Block 4/14)
Bayesian Graph, Modals, Tooltips, Animations
============================================ */
/* === BAYESIAN GRAPH CANVAS === */
.graph-container {
position: relative;
width: 100%;
height: 500px;
background:
radial-gradient(circle at center, rgba(26, 18, 51, 0.8) 0%, var(--bg-void) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
}
.graph-canvas {
width: 100%;
height: 100%;
cursor: grab;
}
.graph-canvas:active {
cursor: grabbing;
}
/* Узлы графа */
.graph-node {
cursor: pointer;
transition: filter var(--duration-fast) var(--ease-smooth);
}
.graph-node:hover {
filter: brightness(1.3) drop-shadow(0 0 8px var(--accent-gold));
}
.graph-node-circle {
transition: all var(--duration-normal) var(--ease-smooth);
}
.graph-node-label {
font-family: var(--font-body);
font-size: 12px;
fill: var(--text-primary);
pointer-events: none;
text-anchor: middle;
user-select: none;
}
.graph-node-prob {
font-family: var(--font-mono);
font-size: 11px;
fill: var(--accent-cyan);
text-anchor: middle;
pointer-events: none;
}
/* Рёбра графа */
.graph-edge {
stroke: var(--border-strong);
stroke-width: 1.5;
fill: none;
opacity: 0.6;
transition: all var(--duration-fast) var(--ease-smooth);
}
.graph-edge.active {
stroke: var(--accent-gold);
stroke-width: 2.5;
opacity: 1;
filter: drop-shadow(0 0 4px var(--accent-gold));
}
.graph-edge-label {
font-family: var(--font-mono);
font-size: 10px;
fill: var(--text-muted);
}
/* Легенда графа */
.graph-legend {
position: absolute;
bottom: var(--space-md);
left: var(--space-md);
background: rgba(20, 13, 36, 0.9);
backdrop-filter: blur(8px);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-md);
font-size: 0.75rem;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.legend-item {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--text-secondary);
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.legend-dot.symptom { background: var(--accent-cyan); box-shadow: 0 0 6px var(--accent-cyan); }
.legend-dot.hypothesis { background: var(--accent-violet); box-shadow: 0 0 6px var(--accent-violet); }
.legend-dot.outcome { background: var(--accent-gold); box-shadow: 0 0 6px var(--accent-gold); }
.legend-dot.opponent { background: var(--accent-rose); box-shadow: 0 0 6px var(--accent-rose); }
/* === MODAL SYSTEM === */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 6, 18, 0.85);
backdrop-filter: blur(8px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
opacity: 0;
visibility: hidden;
transition: all var(--duration-normal) var(--ease-smooth);
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background: var(--bg-panel);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
max-width: 640px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg), var(--glow-violet);
transform: scale(0.9) translateY(20px);
transition: transform var(--duration-normal) var(--ease-bounce);
}
.modal-overlay.active .modal {
transform: scale(1) translateY(0);
}
.modal-header {
padding: var(--space-lg);
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: var(--bg-panel);
z-index: 1;
}
.modal-title {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.modal-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: all var(--duration-fast) var(--ease-smooth);
}
.modal-close:hover {
background: var(--danger);
color: white;
border-color: var(--danger);
}
.modal-body {
padding: var(--space-lg);
}
.modal-footer {
padding: var(--space-lg);
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: flex-end;
gap: var(--space-md);
position: sticky;
bottom: 0;
background: var(--bg-panel);
}
/* Размеры модалок */
.modal-sm { max-width: 420px; }
.modal-lg { max-width: 900px; }
.modal-xl { max-width: 1200px; }
/* === TOOLTIPS === */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip-text {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--bg-elevated);
color: var(--text-primary);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
font-size: 0.8125rem;
white-space: nowrap;
z-index: 100;
box-shadow: var(--shadow-md);
transition: all var(--duration-fast) var(--ease-smooth);
pointer-events: none;
}
.tooltip-text::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--border-strong);
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* === TAROT CARD ANIMATION === */
.tarot-card {
width: 140px;
height: 240px;
perspective: 1000px;
cursor: pointer;
}
.tarot-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s var(--ease-smooth);
transform-style: preserve-3d;
}
.tarot-card.flipped .tarot-card-inner {
transform: rotateY(180deg);
}
.tarot-card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: var(--radius-md);
border: 2px solid var(--accent-gold);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.tarot-card-front {
background: linear-gradient(135deg, var(--bg-elevated), var(--bg-panel));
background-image:
radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(167, 139, 250, 0.15) 0%, transparent 50%);
}
.tarot-card-back {
background: linear-gradient(135deg, var(--accent-gold-dim), var(--accent-violet));
transform: rotateY(180deg);
color: var(--bg-void);
}
.tarot-card:hover .tarot-card-inner {
transform: translateY(-8px);
}
.tarot-card.flipped:hover .tarot-card-inner {
transform: rotateY(180deg) translateY(-8px);
}
/* Расклад карт */
.tarot-spread {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
padding: var(--space-lg);
}
/* === PULSE ANIMATIONS === */
@keyframes nodePulse {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 4px currentColor);
}
50% {
transform: scale(1.08);
filter: drop-shadow(0 0 12px currentColor);
}
}
@keyframes edgeFlow {
0% { stroke-dashoffset: 20; }
100% { stroke-dashoffset: 0; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.pulse { animation: nodePulse 2s var(--ease-smooth) infinite; }
.float { animation: float 3s var(--ease-smooth) infinite; }
.edge-animated {
stroke-dasharray: 5 5;
animation: edgeFlow 1s linear infinite;
}
/* === NOTIFICATION / TOAST === */
.toast-container {
position: fixed;
top: var(--space-xl);
right: var(--space-xl);
z-index: 2000;
display: flex;
flex-direction: column;
gap: var(--space-md);
pointer-events: none;
}
.toast {
background: var(--bg-panel);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: var(--space-md);
min-width: 280px;
max-width: 400px;
pointer-events: auto;
animation: slideInRight var(--duration-normal) var(--ease-bounce);
}
@keyframes slideInRight {
from { transform: translateX(120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.toast.success { border-left: 4px solid var(--success); }
.toast.warning { border-left: 4px solid var(--warning); }
.toast.danger { border-left: 4px solid var(--danger); }
.toast.info { border-left: 4px solid var(--info); }
.toast-icon { font-size: 1.5rem; }
.toast-content { flex: 1; }
.toast-title { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.toast-message { font-size: 0.875rem; color: var(--text-secondary); }
/* === LOADING STATES === */
.spinner {
width: 24px;
height: 24px;
border: 3px solid var(--border-subtle);
border-top-color: var(--accent-gold);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }
/* === RESPONSIVE MODALS === */
@media (max-width: 640px) {
.modal-overlay {
padding: var(--space-md);
align-items: flex-end;
}
.modal {
max-height: 85vh;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.tarot-card {
width: 100px;
height: 170px;
}
.graph-container {
height: 350px;
}
.toast-container {
top: auto;
bottom: var(--space-md);
right: var(--space-md);
left: var(--space-md);
}
.toast {
min-width: auto;
max-width: none;
}
}
</style>
<div class="app-container">
<header class="app-header">
<div class="header-logo">
<div class="logo-icon">?️</div>
<div>
<div class="logo-text">Ariadne</div>
<div class="logo-subtitle">Нить подсознания</div>
</div>
</div>
<nav class="header-nav">
<div class="nav-status">
<div class="status-indicator"></div>
<span class="status-text">Сеть активна · 12 узлов</span>
</div>
<div class="nav-actions">
<button class="icon-btn mobile-menu-toggle" id="mobileMenuToggle" title="Меню">☰</button>
<button class="icon-btn" title="Уведомления">?</button>
<button class="icon-btn" title="Настройки">⚙️</button>
<button class="icon-btn" title="Профиль">?</button>
</div>
</nav>
</header>
<aside class="app-sidebar" id="sidebar">
<div class="sidebar-section">
<div class="sidebar-title">Ввод данных</div>
<ul class="sidebar-menu">
<li class="menu-item active" data-view="dashboard">
<span class="menu-icon">?</span>
<span class="menu-label">Обзор</span>
</li>
<li class="menu-item" data-view="dream">
<span class="menu-icon">?</span>
<span class="menu-label">Записать сон</span>
</li>
<li class="menu-item" data-view="tarot">
<span class="menu-icon">?</span>
<span class="menu-label">Расклад Таро</span>
</li>
<li class="menu-item" data-view="question">
<span class="menu-icon">❓</span>
<span class="menu-label">Задать вопрос</span>
</li>
</ul>
</div>
<div class="sidebar-section">
<div class="sidebar-title">Анализ</div>
<ul class="sidebar-menu">
<li class="menu-item" data-view="graph">
<span class="menu-icon">?️</span>
<span class="menu-label">Граф Байеса</span>
<span class="menu-badge">12</span>
</li>
<li class="menu-item" data-view="opponents">
<span class="menu-icon">?</span>
<span class="menu-label">Оппоненты</span>
</li>
<li class="menu-item" data-view="journal">
<span class="menu-icon">?</span>
<span class="menu-label">Журнал</span>
</li>
</ul>
</div>
<div class="sidebar-section">
<div class="sidebar-title">Инструменты</div>
<ul class="sidebar-menu">
<li class="menu-item" data-view="simulator">
<span class="menu-icon">?</span>
<span class="menu-label">Симулятор «Что если»</span>
</li>
<li class="menu-item" data-view="mirror">
<span class="menu-icon">?</span>
<span class="menu-label">Режим «Зеркало»</span>
</li>
<li class="menu-item" data-view="plugins">
<span class="menu-icon">?</span>
<span class="menu-label">Плагины</span>
</li>
</ul>
</div>
</aside>
<main class="app-main" id="mainContent">
</main>
</div>
<div class="toast-container" id="toastContainer"></div>
<div id="view-dashboard" class="hidden">
<div class="main-header">
<div>
<h1 class="main-title">Добрый вечер, <span class="golden">Искатель</span></h1>
<p class="main-subtitle">Понедельник, 24 августа 2026 · Ваша сеть насчитывает 12 активных узлов</p>
</div>
<div class="main-actions">
<button class="btn btn-ghost" id="quickJournal">? Журнал</button>
<button class="btn btn-primary" id="quickEntry">✨ Новая запись</button>
</div>
</div>
<div class="grid grid-cols-4 mb-lg">
<div class="stat-card">
<div class="stat-label">Уровень тревоги</div>
<div class="stat-value">34%</div>
<div class="stat-change positive">↓ 12% за неделю</div>
</div>
<div class="stat-card">
<div class="stat-label">Уверенность</div>
<div class="stat-value">67%</div>
<div class="stat-change positive">↑ 8% за неделю</div>
</div>
<div class="stat-card">
<div class="stat-label">Узлов в сети</div>
<div class="stat-value">12</div>
<div class="stat-change neutral">+2 новых связи</div>
</div>
<div class="stat-card">
<div class="stat-label">Записей за неделю</div>
<div class="stat-value">7</div>
<div class="stat-change positive">3 сна · 2 расклада · 2 вопроса</div>
</div>
</div>
<div class="grid grid-cols-2 mb-lg">
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Эмоциональный компас
</div>
<span class="tag tag-violet">live</span>
</div>
<div class="card-body">
<div class="progress-label">
<span class="progress-label-text">Тревога</span>
<span class="progress-label-value">34%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 34%"></div>
</div>
<div class="progress-label">
<span class="progress-label-text">Уверенность</span>
<span class="progress-label-value">67%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 67%"></div>
</div>
<div class="progress-label">
<span class="progress-label-text">Надежда</span>
<span class="progress-label-value">52%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 52%"></div>
</div>
<div class="progress-label">
<span class="progress-label-text">Социальное напряжение</span>
<span class="progress-label-value">41%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 41%"></div>
</div>
<div class="progress-label">
<span class="progress-label-text">Внутренний ресурс</span>
<span class="progress-label-value">73%</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 73%"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Активные прогнозы
</div>
<span class="tag tag-gold">3 активных</span>
</div>
<div class="card-body">
<div class="flex items-center justify-between mb-md" style="padding: var(--space-md); background: var(--bg-deep); border-radius: var(--radius-md);">
<div>
<div style="font-weight: 600; color: var(--text-primary);">Переговоры с заказчиком</div>
<div class="text-small text-muted">Обновлён 2 часа назад · на основе сна «ураган»</div>
</div>
<span class="mono" style="font-size: 1.25rem; font-weight: 700;">78%</span>
</div>
<div class="flex items-center justify-between mb-md" style="padding: var(--space-md); background: var(--bg-deep); border-radius: var(--radius-md);">
<div>
<div style="font-weight: 600; color: var(--text-primary);">Конфликт с Иваном П.</div>
<div class="text-small text-muted">Обновлён вчера · расклад «Кельтский крест»</div>
</div>
<span class="mono" style="font-size: 1.25rem; font-weight: 700;">45%</span>
</div>
<div class="flex items-center justify-between" style="padding: var(--space-md); background: var(--bg-deep); border-radius: var(--radius-md);">
<div>
<div style="font-weight: 600; color: var(--text-primary);">Смена работы</div>
<div class="text-small text-muted">Обновлён 3 дня назад · 5 свидетельств</div>
</div>
<span class="mono" style="font-size: 1.25rem; font-weight: 700;">61%</span>
</div>
</div>
<div class="card-footer">
<span class="text-small text-muted">Вероятность = ваша субъективная оценка</span>
<button class="btn btn-sm btn-ghost">Все прогнозы →</button>
</div>
</div>
</div>
<div class="grid grid-cols-2">
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Последние события
</div>
</div>
<div class="card-body">
<div class="flex gap-md mb-md" style="align-items: flex-start;">
<span style="font-size: 1.5rem;">?</span>
<div style="flex: 1;">
<div style="font-weight: 600; color: var(--text-primary);">Сон: «Ураган и потерянный паспорт»</div>
<div class="text-small text-muted">Сегодня, 07:42 · Извлечено 3 символа</div>
<div class="flex gap-sm mt-sm">
<span class="tag tag-cyan">хаос</span>
<span class="tag tag-rose">идентичность</span>
<span class="tag tag-violet">работа</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="flex gap-md mb-md" style="align-items: flex-start;">
<span style="font-size: 1.5rem;">?</span>
<div style="flex: 1;">
<div style="font-weight: 600; color: var(--text-primary);">Расклад: «Кельтский крест»</div>
<div class="text-small text-muted">Вчера, 21:15 · Тема: переговоры</div>
<div class="flex gap-sm mt-sm">
<span class="tag tag-gold">Башня XVI</span>
<span class="tag tag-gold">Звезда XVII</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="flex gap-md" style="align-items: flex-start;">
<span style="font-size: 1.5rem;">❓</span>
<div style="flex: 1;">
<div style="font-weight: 600; color: var(--text-primary);">Вопрос: «Стоит ли менять работу?»</div>
<div class="text-small text-muted">3 дня назад · 5 свидетельств в сети</div>
</div>
</div>
</div>
</div>
<div class="card" style="border-color: var(--border-strong);">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?️</span>
Нить Ариадны
</div>
<span class="tag tag-gold">рекомендация</span>
</div>
<div class="card-body">
<p style="font-family: var(--font-display); font-size: 1.125rem; font-style: italic; color: var(--text-primary); line-height: 1.7;">
«Ваше подсознание на <span class="mono" style="font-style: normal;">73%</span> готовится к переговорам, но тревога снизилась на <span class="mono" style="font-style: normal;">12%</span> после сна об урагане — хаос уже был прожит во сне. Сегодня полезно прописать 3 сильных аргумента заранее.»
</p>
<div class="divider"></div>
<div class="flex gap-sm">
<button class="btn btn-sm btn-primary">? Ритуал заземления</button>
<button class="btn btn-sm btn-ghost">Подробнее</button>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
var dashboard = document.getElementById('view-dashboard');
var main = document.getElementById('mainContent');
if (dashboard && main) {
main.appendChild(dashboard);
dashboard.classList.remove('hidden');
dashboard.classList.add('fade-in');
}
})();
</script>
<div class="modal-overlay" id="modal-dream">
<div class="modal">
<div class="modal-header">
<div class="modal-title">
<span>?</span>
Записать сон
</div>
<button class="modal-close" data-close-modal="data-close-modal">×</button>
</div>
<div class="modal-body">
<p class="text-small text-muted mb-md">
Опишите сон так подробно, как помните. Система извлечёт символы и обновит вашу байесовскую сеть.
</p>
<div class="form-group">
<label class="form-label">Описание сна</label>
<textarea class="form-textarea" id="dreamText" placeholder="Мне снилось, что я иду по тёмному коридору..."></textarea>
<div class="form-help">Совет: используйте голосовой ввод для потока сознания</div>
</div>
<div class="form-group">
<label class="form-label">Ключевые символы <span class="form-label-optional">(выберите или добавьте свои)</span></label>
<div class="flex gap-sm" style="flex-wrap: wrap;" id="dreamSymbols">
<span class="tag" data-symbol="вода">? Вода</span>
<span class="tag" data-symbol="падение">⬇️ Падение</span>
<span class="tag" data-symbol="полёт">?️ Полёт</span>
<span class="tag" data-symbol="зубы">? Зубы</span>
<span class="tag" data-symbol="погоня">? Погоня</span>
<span class="tag" data-symbol="дом">? Дом</span>
<span class="tag" data-symbol="незнакомец">? Незнакомец</span>
<span class="tag" data-symbol="животное">? Животное</span>
<span class="tag" data-symbol="огонь">? Огонь</span>
<span class="tag" data-symbol="дорога">?️ Дорога</span>
</div>
</div>
<div class="grid grid-cols-2">
<div class="form-group">
<label class="form-label">Тип сна</label>
<select class="form-select" id="dreamType">
<option value="ordinary">Обычный сон</option>
<option value="nightmare">Кошмар</option>
<option value="lucid">Осознанный сон</option>
<option value="prophetic">Пророческий</option>
<option value="recurring">Повторяющийся</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Эмоция после пробуждения</label>
<select class="form-select" id="dreamEmotion">
<option value="neutral">Нейтральная</option>
<option value="anxious">Тревога</option>
<option value="fear">Страх</option>
<option value="joy">Радость</option>
<option value="sadness">Грусть</option>
<option value="confused">Смущение</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-check">
<input type="checkbox" id="dreamImportant" />
<span class="form-check-label">Этот сон кажется мне важным</span>
</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" data-close-modal="data-close-modal">Отмена</button>
<button class="btn btn-primary" id="saveDream">?️ Сплести нить</button>
</div>
</div>
</div>
<div class="modal-overlay" id="modal-tarot">
<div class="modal modal-lg">
<div class="modal-header">
<div class="modal-title">
<span>?</span>
Расклад Таро
</div>
<button class="modal-close" data-close-modal="data-close-modal">×</button>
</div>
<div class="modal-body">
<div class="grid grid-cols-2 mb-lg">
<div class="form-group">
<label class="form-label">Система карт</label>
<select class="form-select" id="tarotSystem">
<option value="waite">Таро Райдер-Уэйт</option>
<option value="thoth">Таро Тота (Кроули)</option>
<option value="marseille">Марсельское Таро</option>
<option value="manara">Таро Манара</option>
<option value="lenormand">Ленорман</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Тип расклада</label>
<select class="form-select" id="tarotSpread">
<option value="3cards">3 карты (прошлое-настоящее-будущее)</option>
<option value="celtic">Кельтский крест (10 карт)</option>
<option value="horseshoe">Подкова (7 карт)</option>
<option value="single">1 карта (послание дня)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Вопрос или тема расклада</label>
<textarea class="form-textarea" id="tarotQuestion" placeholder="О чём вы спрашиваете карты?" style="min-height: 80px;"></textarea>
</div>
<div class="form-group">
<label class="form-label">Способ выбора карт</label>
<div class="flex gap-md">
<label class="form-check">
<input type="radio" name="tarotMode" value="random" checked="checked" />
<span class="form-check-label">? Случайная генерация</span>
</label>
<label class="form-check">
<input type="radio" name="tarotMode" value="manual" />
<span class="form-check-label">✋ Ручной ввод (физические карты)</span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="card" style="background: var(--bg-deep);">
<div class="card-header">
<div class="card-title">
<span class="card-icon">✨</span>
Ваш расклад
</div>
<button class="btn btn-sm btn-secondary" id="drawCards">? Вытянуть карты</button>
</div>
<div class="card-body">
<div class="tarot-spread" id="tarotSpreadArea">
<div class="text-center text-muted" style="padding: var(--space-xl);">
<div style="font-size: 3rem; margin-bottom: var(--space-md);">?</div>
<p>Нажмите «Вытянуть карты», чтобы начать расклад</p>
</div>
</div>
</div>
</div>
<div class="form-group mt-lg">
<label class="form-label">Ваши впечатления <span class="form-label-optional">(опционально)</span></label>
<textarea class="form-textarea" id="tarotImpressions" placeholder="Что вы почувствовали, когда увидели карты?" style="min-height: 80px;"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" data-close-modal="data-close-modal">Отмена</button>
<button class="btn btn-primary" id="saveTarot">?️ Зафиксировать расклад</button>
</div>
</div>
</div>
<div class="modal-overlay" id="modal-question">
<div class="modal">
<div class="modal-header">
<div class="modal-title">
<span>❓</span>
Задать вопрос
</div>
<button class="modal-close" data-close-modal="data-close-modal">×</button>
</div>
<div class="modal-body">
<p class="text-small text-muted mb-md">
Сформулируйте вопрос или ситуацию. Система создаст прогноз на основе вашей байесовской сети.
</p>
<div class="form-group">
<label class="form-label">Ваш вопрос или ситуация</label>
<textarea class="form-textarea" id="questionText" placeholder="Стоит ли мне принимать это предложение о работе?" style="min-height: 120px;"></textarea>
</div>
<div class="form-group">
<label class="form-label">Сфера жизни</label>
<div class="flex gap-sm" style="flex-wrap: wrap;">
<span class="tag" data-domain="career">? Карьера</span>
<span class="tag" data-domain="relationships">? Отношения</span>
<span class="tag" data-domain="health">? Здоровье</span>
<span class="tag" data-domain="finance">? Финансы</span>
<span class="tag" data-domain="creativity">? Творчество</span>
<span class="tag" data-domain="spiritual">?️ Духовное</span>
</div>
</div>
<div class="form-group">
<label class="form-label">Упомянутые люди <span class="form-label-optional">(оппоненты)</span></label>
<input type="text" class="form-input" id="questionOpponents" placeholder="Иван Петрович, Анна, начальник..." />
<div class="form-help">Система создаст модели поведения для каждого упомянутого</div>
</div>
<div class="grid grid-cols-2">
<div class="form-group">
<label class="form-label">Срок прогноза</label>
<select class="form-select" id="questionTimeframe">
<option value="3days">3 дня</option>
<option value="1week">1 неделя</option>
<option value="1month" selected="selected">1 месяц</option>
<option value="3months">3 месяца</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Ваша текущая уверенность</label>
<select class="form-select" id="questionConfidence">
<option value="low">Низкая (менее 30%)</option>
<option value="medium" selected="selected">Средняя (30-70%)</option>
<option value="high">Высокая (более 70%)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-check">
<input type="checkbox" id="questionTrack" />
<span class="form-check-label">Отслеживать и напомнить мне о результате</span>
</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" data-close-modal="data-close-modal">Отмена</button>
<button class="btn btn-primary" id="saveQuestion">? Получить прогноз</button>
</div>
</div>
</div>
<script>
(function() {
// Открытие модалок
function openModal(modalId) {
var modal = document.getElementById(modalId);
if (modal) {
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
}
// Закрытие модалок
function closeModal(modal) {
modal.classList.remove('active');
document.body.style.overflow = '';
}
// Закрытие по клику на overlay
document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
overlay.addEventListener('click', function(e) {
if (e.target === overlay) {
closeModal(overlay);
}
});
});
// Закрытие по кнопке
document.querySelectorAll('[data-close-modal]').forEach(function(btn) {
btn.addEventListener('click', function() {
var modal = btn.closest('.modal-overlay');
closeModal(modal);
});
});
// Закрытие по Escape
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.modal-overlay.active').forEach(closeModal);
}
});
// Экспорт функций в глобальную область
window.AriadneModals = {
open: openModal,
close: closeModal
};
// Интерактив: выбор тегов
document.querySelectorAll('.tag[data-symbol], .tag[data-domain]').forEach(function(tag) {
tag.addEventListener('click', function() {
tag.classList.toggle('active');
});
});
})();
</script>
<div id="view-graph" class="hidden">
<div class="main-header">
<div>
<h1 class="main-title">Граф Байеса</h1>
<p class="main-subtitle">Визуализация вашей вероятностной сети · 12 узлов · 18 связей</p>
</div>
<div class="main-actions">
<button class="btn btn-ghost">? Обновить</button>
<button class="btn btn-primary">? Добавить узел</button>
</div>
</div>
<div class="grid grid-cols-3 mb-lg">
<div class="stat-card">
<div class="stat-label">Симптомы</div>
<div class="stat-value">5</div>
<div class="stat-change neutral">входные данные</div>
</div>
<div class="stat-card">
<div class="stat-label">Гипотезы</div>
<div class="stat-value">4</div>
<div class="stat-change neutral">скрытые состояния</div>
</div>
<div class="stat-card">
<div class="stat-label">Исходы</div>
<div class="stat-value">3</div>
<div class="stat-change neutral">прогнозы</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?️</span>
Интерактивный граф
</div>
<div class="flex gap-sm">
<span class="tag tag-cyan active">Все</span>
<span class="tag tag-cyan">Симптомы</span>
<span class="tag tag-violet">Гипотезы</span>
<span class="tag tag-gold">Исходы</span>
</div>
</div>
<div class="card-body">
<div class="graph-container">
<svg class="graph-canvas" id="bayesianGraph"></svg>
<div class="graph-legend">
<div class="legend-item">
<div class="legend-dot symptom"></div>
<span>Симптомы (входные данные)</span>
</div>
<div class="legend-item">
<div class="legend-dot hypothesis"></div>
<span>Гипотезы (скрытые состояния)</span>
</div>
<div class="legend-item">
<div class="legend-dot outcome"></div>
<span>Исходы (прогнозы)</span>
</div>
<div class="legend-item">
<div class="legend-dot opponent"></div>
<span>Оппоненты (модели людей)</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="view-opponents" class="hidden">
<div class="main-header">
<div>
<h1 class="main-title">Модели оппонентов</h1>
<p class="main-subtitle">Поведенческие профили людей из вашего окружения</p>
</div>
<div class="main-actions">
<button class="btn btn-primary">➕ Добавить оппонента</button>
</div>
</div>
<div class="grid grid-cols-2">
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Иван Петрович
</div>
<span class="tag tag-rose">конфликт</span>
</div>
<div class="card-body">
<div class="text-small text-muted mb-md">Заказчик · 3 взаимодействия · последний: вчера</div>
<div class="progress-label">
<span class="progress-label-text">Агрессивность</span>
<span class="progress-label-value">23%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 23%"></div>
</div>
<div class="progress-label">
<span class="progress-label-text">Избегание</span>
<span class="progress-label-value">67%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 67%"></div>
</div>
<div class="progress-label">
<span class="progress-label-text">Манипулятивность</span>
<span class="progress-label-value">45%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 45%"></div>
</div>
<div class="divider"></div>
<div class="text-small">
<strong style="color: var(--text-primary);">Прогноз поведения:</strong><br />
<span class="text-muted">При давлении с вероятностью 78% выберет тактику игнорирования или газлайтинга.</span>
</div>
</div>
<div class="card-footer">
<button class="btn btn-sm btn-ghost">? История</button>
<button class="btn btn-sm btn-secondary">? Симулировать</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Анна Сергеевна
</div>
<span class="tag tag-violet">партнёр</span>
</div>
<div class="card-body">
<div class="text-small text-muted mb-md">Коллега · 7 взаимодействий · последний: 2 дня назад</div>
<div class="progress-label">
<span class="progress-label-text">Поддержка</span>
<span class="progress-label-value">82%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 82%"></div>
</div>
<div class="progress-label">
<span class="progress-label-text">Надёжность</span>
<span class="progress-label-value">71%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 71%"></div>
</div>
<div class="progress-label">
<span class="progress-label-text">Эмпатия</span>
<span class="progress-label-value">89%</span>
</div>
<div class="progress mb-md">
<div class="progress-bar" style="width: 89%"></div>
</div>
<div class="divider"></div>
<div class="text-small">
<strong style="color: var(--text-primary);">Прогноз поведения:</strong><br />
<span class="text-muted">При запросе помощи с вероятностью 91% откликнется в течение 24 часов.</span>
</div>
</div>
<div class="card-footer">
<button class="btn btn-sm btn-ghost">? История</button>
<button class="btn btn-sm btn-secondary">? Симулировать</button>
</div>
</div>
</div>
</div>
<div id="view-journal" class="hidden">
<div class="main-header">
<div>
<h1 class="main-title">Журнал событий</h1>
<p class="main-subtitle">Хронология всех записей, снов и раскладов</p>
</div>
<div class="main-actions">
<button class="btn btn-ghost">? Фильтр</button>
<button class="btn btn-ghost">? Экспорт</button>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="flex gap-md mb-lg" style="align-items: flex-start;">
<div style="font-size: 2rem;">?</div>
<div style="flex: 1;">
<div class="flex items-center justify-between mb-sm">
<div style="font-weight: 600; color: var(--text-primary);">Сон: «Ураган и потерянный паспорт»</div>
<span class="text-small text-muted">Сегодня, 07:42</span>
</div>
<p class="text-small text-muted mb-md">Извлечено 3 символа: хаос, идентичность, работа. Обновлены узлы: P(тревога) → 34%, P(смена_парадигмы) → 67%</p>
<div class="flex gap-sm">
<span class="tag tag-cyan">хаос</span>
<span class="tag tag-rose">идентичность</span>
<span class="tag tag-violet">работа</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="flex gap-md mb-lg" style="align-items: flex-start;">
<div style="font-size: 2rem;">?</div>
<div style="flex: 1;">
<div class="flex items-center justify-between mb-sm">
<div style="font-weight: 600; color: var(--text-primary);">Расклад: «Кельтский крест» — переговоры</div>
<span class="text-small text-muted">Вчера, 21:15</span>
</div>
<p class="text-small text-muted mb-md">Выпало: Башня XVI, Звезда XVII. Обновлены узлы: P(провал) → 45%, P(трансформация) → 78%</p>
<div class="flex gap-sm">
<span class="tag tag-gold">Башня XVI</span>
<span class="tag tag-gold">Звезда XVII</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="flex gap-md mb-lg" style="align-items: flex-start;">
<div style="font-size: 2rem;">❓</div>
<div style="flex: 1;">
<div class="flex items-center justify-between mb-sm">
<div style="font-weight: 600; color: var(--text-primary);">Вопрос: «Стоит ли менять работу?»</div>
<span class="text-small text-muted">3 дня назад</span>
</div>
<p class="text-small text-muted mb-md">Создан прогноз: P(смена_работы) = 61% в течение месяца. Оппоненты: Иван П., HR-менеджер</p>
<div class="flex gap-sm">
<span class="tag tag-violet">карьера</span>
<span class="tag tag-rose">Иван П.</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="flex gap-md" style="align-items: flex-start;">
<div style="font-size: 2rem;">✅</div>
<div style="flex: 1;">
<div class="flex items-center justify-between mb-sm">
<div style="font-weight: 600; color: var(--text-primary);">Подтверждение: «Встреча с Анной прошла хорошо»</div>
<span class="text-small text-muted">5 дней назад</span>
</div>
<p class="text-small text-muted">Прогноз P(успех) = 73% подтверждён. Калибровка весов: +0.12 к узлу «поддержка_Анны»</p>
</div>
</div>
</div>
</div>
</div>
<div id="view-simulator" class="hidden">
<div class="main-header">
<div>
<h1 class="main-title">Симулятор «Что если»</h1>
<p class="main-subtitle">Моделируйте сценарии и смотрите, как меняются вероятности</p>
</div>
</div>
<div class="grid grid-cols-2">
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Условия симуляции
</div>
</div>
<div class="card-body">
<div class="form-group">
<label class="form-label">Выберите действие</label>
<select class="form-select" id="simAction">
<option value="silence">Промолчать на переговорах</option>
<option value="confront">Открыто высказать недовольство</option>
<option value="compromise">Предложить компромисс</option>
<option value="delay">Отложить решение на неделю</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Контекст</label>
<textarea class="form-textarea" id="simContext" placeholder="Опишите обстоятельства..." style="min-height: 80px;"></textarea>
</div>
<div class="form-group">
<label class="form-label">Участники</label>
<input type="text" class="form-input" id="simParticipants" placeholder="Иван П., Анна С...." />
</div>
<button class="btn btn-primary w-full" id="runSimulation">? Запустить симуляцию</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Результаты симуляции
</div>
<span class="tag tag-gold">прогноз</span>
</div>
<div class="card-body">
<div class="text-center text-muted" style="padding: var(--space-xl);">
<div style="font-size: 3rem; margin-bottom: var(--space-md);">?</div>
<p>Запустите симуляцию, чтобы увидеть вероятностный прогноз</p>
</div>
</div>
</div>
</div>
</div>
<div id="view-mirror" class="hidden">
<div class="main-header">
<div>
<h1 class="main-title">Режим «Зеркало»</h1>
<p class="main-subtitle">Психологический анализ проекций и скрытых паттернов</p>
</div>
</div>
<div class="grid grid-cols-2">
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Анализ проекций
</div>
</div>
<div class="card-body">
<p class="text-small text-muted mb-md">
Опишите человека или ситуацию, и система покажет, какие ваши внутренние состояния проецируются на них.
</p>
<div class="form-group">
<label class="form-label">Описание</label>
<textarea class="form-textarea" id="mirrorInput" placeholder="Иван постоянно меня игнорирует, он эгоист и не хочет меня слышать..." style="min-height: 120px;"></textarea>
</div>
<button class="btn btn-primary w-full" id="runMirror">? Посмотреть в зеркало</button>
</div>
</div>
<div class="card" style="border-color: var(--border-strong);">
<div class="card-header">
<div class="card-title">
<span class="card-icon">?</span>
Инсайт
</div>
<span class="tag tag-violet">гипотеза</span>
</div>
<div class="card-body">
<div class="text-center text-muted" style="padding: var(--space-xl);">
<div style="font-size: 3rem; margin-bottom: var(--space-md);">?</div>
<p>Введите описание, чтобы получить психологический анализ</p>
</div>
</div>
</div>
</div>
</div>
<div id="view-plugins" class="hidden">
<div class="main-header">
<div>
<h1 class="main-title">Плагины и интеграции</h1>
<p class="main-subtitle">Расширяйте систему новыми факторами и источниками данных</p>
</div>
<div class="main-actions">
<button class="btn btn-primary">➕ Установить плагин</button>
</div>
</div>
<div class="grid grid-cols-3">
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">⭐</span>
Астрология
</div>
<span class="tag tag-gold">активен</span>
</div>
<div class="card-body">
<p class="text-small text-muted mb-md">Добавляет астрологические транзиты как контекстные переменные в байесовскую сеть.</p>
<div class="flex gap-sm">
<span class="tag tag-cyan">Ретроградный Меркурий</span>
<span class="tag tag-violet">Луна в Скорпионе</span>
</div>
</div>
<div class="card-footer">
<button class="btn btn-sm btn-ghost">⚙️ Настроить</button>
<button class="btn btn-sm btn-danger">Отключить</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">☯️</span>
И-Цзин
</div>
<span class="tag tag-muted">неактивен</span>
</div>
<div class="card-body">
<p class="text-small text-muted mb-md">Интеграция с Книгой Перемен. 64 гексаграммы как архетипические паттерны.</p>
<div class="text-small text-muted">Требует настройки</div>
</div>
<div class="card-footer">
<button class="btn btn-sm btn-primary">Активировать</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="card-icon">⌚</span>
Фитнес-трекер
</div>
<span class="tag tag-muted">неактивен</span>
</div>
<div class="card-body">
<p class="text-small text-muted mb-md">Синхронизация с Apple Health / Google Fit. Сон, пульс, активность как контекст.</p>
<div class="text-small text-muted">Требуется авторизация</div>
</div>
<div class="card-footer">
<button class="btn btn-sm btn-primary">Подключить</button>
</div>
</div>
</div>
</div>
<script>
(function() {
// Все view-контейнеры
var views = document.querySelectorAll('[id^="view-"]');
// Функция переключения вида
function switchView(viewName) {
views.forEach(function(view) {
view.classList.add('hidden');
});
var targetView = document.getElementById('view-' + viewName);
if (targetView) {
targetView.classList.remove('hidden');
targetView.classList.add('fade-in');
}
// Обновляем активный пункт меню
document.querySelectorAll('.menu-item').forEach(function(item) {
item.classList.remove('active');
if (item.dataset.view === viewName) {
item.classList.add('active');
}
});
}
// Клик по пунктам меню
document.querySelectorAll('.menu-item[data-view]').forEach(function(item) {
item.addEventListener('click', function() {
var viewName = item.dataset.view;
// Для пунктов ввода данных открываем модалки
if (viewName === 'dream') {
window.AriadneModals.open('modal-dream');
} else if (viewName === 'tarot') {
window.AriadneModals.open('modal-tarot');
} else if (viewName === 'question') {
window.AriadneModals.open('modal-question');
} else {
switchView(viewName);
}
});
});
// Экспорт
window.AriadneRouter = {
switchView: switchView
};
// Инициализация: показываем dashboard
switchView('dashboard');
})();
</script>
<script>
/* ============================================
ARIADNE v1.0 — Core Utilities (Block 9/14)
Utils, Storage, EventBus, Config
============================================ */
(function() {
'use strict';
// ==========================================
// CONFIG — Базовая конфигурация приложения
// ==========================================
var Config = {
appName: 'Ariadne',
version: '1.0.0',
storagePrefix: 'ariadne_',
// Байесовская сеть
defaultNetwork: {
nodes: 12,
edges: 18
},
// Эмоциональные шкалы
emotionScales: {
anxiety: { min: 0, max: 100, default: 34 },
confidence: { min: 0, max: 100, default: 67 },
hope: { min: 0, max: 100, default: 52 },
socialTension: { min: 0, max: 100, default: 41 },
innerResource: { min: 0, max: 100, default: 73 }
},
// Типы событий
eventTypes: {
DREAM: 'dream',
TAROT: 'tarot',
QUESTION: 'question',
CONFIRMATION: 'confirmation',
SIMULATION: 'simulation'
},
// Символы снов (базовый словарь)
dreamSymbols: [
{ id: 'water', label: 'Вода', icon: '?', category: 'emotion' },
{ id: 'falling', label: 'Падение', icon: '⬇️', category: 'fear' },
{ id: 'flying', label: 'Полёт', icon: '?️', category: 'freedom' },
{ id: 'teeth', label: 'Зубы', icon: '?', category: 'anxiety' },
{ id: 'chase', label: 'Погоня', icon: '?', category: 'fear' },
{ id: 'house', label: 'Дом', icon: '?', category: 'self' },
{ id: 'stranger', label: 'Незнакомец', icon: '?', category: 'unknown' },
{ id: 'animal', label: 'Животное', icon: '?', category: 'instinct' },
{ id: 'fire', label: 'Огонь', icon: '?', category: 'transformation' },
{ id: 'road', label: 'Дорога', icon: '?️', category: 'journey' }
],
// Сферы жизни
lifeDomains: [
{ id: 'career', label: 'Карьера', icon: '?' },
{ id: 'relationships', label: 'Отношения', icon: '?' },
{ id: 'health', label: 'Здоровье', icon: '?' },
{ id: 'finance', label: 'Финансы', icon: '?' },
{ id: 'creativity', label: 'Творчество', icon: '?' },
{ id: 'spiritual', label: 'Духовное', icon: '?️' }
]
};
// ==========================================
// UTILS — Вспомогательные функции
// ==========================================
var Utils = {
// Генерация уникального ID
generateId: function() {
return 'id_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
},
// Форматирование даты
formatDate: function(date, format) {
if (!(date instanceof Date)) {
date = new Date(date);
}
var months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
var days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];
var day = date.getDate();
var month = months[date.getMonth()];
var year = date.getFullYear();
var weekday = days[date.getDay()];
var hours = date.getHours().toString().padStart(2, '0');
var minutes = date.getMinutes().toString().padStart(2, '0');
if (format === 'full') {
return weekday.charAt(0).toUpperCase() + weekday.slice(1) + ', ' + day + ' ' + month + ' ' + year;
} else if (format === 'short') {
return day + ' ' + month;
} else if (format === 'time') {
return hours + ':' + minutes;
} else {
return day + ' ' + month + ', ' + hours + ':' + minutes;
}
},
// Относительное время ("2 часа назад")
timeAgo: function(date) {
if (!(date instanceof Date)) {
date = new Date(date);
}
var now = new Date();
var diff = Math.floor((now - date) / 1000); // секунды
if (diff < 60) return 'только что';
if (diff < 3600) return Math.floor(diff / 60) + ' мин назад';
if (diff < 86400) return Math.floor(diff / 3600) + ' ч назад';
if (diff < 604800) return Math.floor(diff / 86400) + ' дн назад';
return this.formatDate(date, 'short');
},
// Debounce функция
debounce: function(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
},
// Throttle функция
throttle: function(func, limit) {
var inThrottle;
return function() {
var context = this, args = arguments;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(function() {
inThrottle = false;
}, limit);
}
};
},
// Глубокое клонирование объекта
deepClone: function(obj) {
return JSON.parse(JSON.stringify(obj));
},
// Мерж объектов
merge: function(target, source) {
for (var key in source) {
if (source.hasOwnProperty(key)) {
if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
if (!target[key]) target[key] = {};
this.merge(target[key], source[key]);
} else {
target[key] = source[key];
}
}
}
return target;
},
// Форматирование вероятности
formatProbability: function(prob) {
return Math.round(prob * 100) + '%';
},
// Извлечение чисел из текста
extractNumbers: function(text) {
var matches = text.match(/\d+/g);
return matches ? matches.map(Number) : [];
},
// Нормализация строки (lowercase, trim)
normalize: function(str) {
return str.toLowerCase().trim();
}
};
// ==========================================
// STORAGE — Обёртка над localStorage
// ==========================================
var Storage = {
// Получить значение
get: function(key, defaultValue) {
try {
var fullKey = Config.storagePrefix + key;
var item = localStorage.getItem(fullKey);
if (item === null) return defaultValue;
return JSON.parse(item);
} catch (e) {
console.error('Storage.get error:', e);
return defaultValue;
}
},
// Сохранить значение
set: function(key, value) {
try {
var fullKey = Config.storagePrefix + key;
localStorage.setItem(fullKey, JSON.stringify(value));
return true;
} catch (e) {
console.error('Storage.set error:', e);
return false;
}
},
// Удалить значение
remove: function(key) {
try {
var fullKey = Config.storagePrefix + key;
localStorage.removeItem(fullKey);
return true;
} catch (e) {
console.error('Storage.remove error:', e);
return false;
}
},
// Очистить все данные приложения
clear: function() {
try {
var keys = [];
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
if (key && key.startsWith(Config.storagePrefix)) {
keys.push(key);
}
}
keys.forEach(function(key) {
localStorage.removeItem(key);
});
return true;
} catch (e) {
console.error('Storage.clear error:', e);
return false;
}
},
// Получить размер хранилища (в байтах)
getSize: function() {
var total = 0;
for (var key in localStorage) {
if (localStorage.hasOwnProperty(key) && key.startsWith(Config.storagePrefix)) {
total += localStorage[key].length * 2; // UTF-16
}
}
return total;
}
};
// ==========================================
// EVENT BUS — Система событий
// ==========================================
var EventBus = {
listeners: {},
// Подписка на событие
on: function(event, callback) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(callback);
return this;
},
// Отписка от события
off: function(event, callback) {
if (!this.listeners[event]) return this;
if (!callback) {
// Удалить все слушатели события
delete this.listeners[event];
} else {
// Удалить конкретный слушатель
this.listeners[event] = this.listeners[event].filter(function(cb) {
return cb !== callback;
});
}
return this;
},
// Генерация события
emit: function(event, data) {
if (!this.listeners[event]) return this;
this.listeners[event].forEach(function(callback) {
try {
callback(data);
} catch (e) {
console.error('EventBus callback error:', e);
}
});
return this;
},
// Одноразовая подписка
once: function(event, callback) {
var self = this;
var wrapper = function(data) {
callback(data);
self.off(event, wrapper);
};
this.on(event, wrapper);
return this;
}
};
// ==========================================
// TOAST — Система уведомлений
// ==========================================
var Toast = {
show: function(options) {
var container = document.getElementById('toastContainer');
if (!container) return;
var toast = document.createElement('div');
toast.className = 'toast ' + (options.type || 'info');
var icons = {
success: '✅',
warning: '⚠️',
danger: '❌',
info: 'ℹ️'
};
toast.innerHTML =
'<div class="toast-icon">' + (icons[options.type] || icons.info) + '</div>' +
'<div class="toast-content">' +
'<div class="toast-title">' + (options.title || '') + '</div>' +
'<div class="toast-message">' + (options.message || '') + '</div>' +
'</div>';
container.appendChild(toast);
// Автоудаление через 4 секунды
setTimeout(function() {
toast.style.animation = 'slideInRight 0.3s reverse';
setTimeout(function() {
if (toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 300);
}, options.duration || 4000);
},
success: function(title, message) {
this.show({ type: 'success', title: title, message: message });
},
warning: function(title, message) {
this.show({ type: 'warning', title: title, message: message });
},
danger: function(title, message) {
this.show({ type: 'danger', title: title, message: message });
},
info: function(title, message) {
this.show({ type: 'info', title: title, message: message });
}
};
// ==========================================
// EXPORT — Глобальный объект Ariadne
// ==========================================
window.Ariadne = {
Config: Config,
Utils: Utils,
Storage: Storage,
EventBus: EventBus,
Toast: Toast
};
// ==========================================
// INIT — Инициализация при загрузке
// ==========================================
console.log('%c?️ Ariadne v' + Config.version + ' initialized',
'color: #d4af37; font-size: 14px; font-weight: bold;');
// Генерируем событие инициализации
EventBus.emit('ariadne:init', { timestamp: Date.now() });
})();
</script>
<script>
/* ============================================
ARIADNE v1.0 — NLP Parser (Block 10/14)
Text analysis, entity extraction, emotion detection
============================================ */
(function() {
'use strict';
// ==========================================
// EMOTION LEXICON — Эмоциональный словарь
// ==========================================
var EmotionLexicon = {
// Позитивные слова (valence > 0)
positive: [
'радость', 'счастье', 'успех', 'любовь', 'надежда', 'уверенность',
'вдохновение', 'энтузиазм', 'удовольствие', 'благодарность',
'гордость', 'спокойствие', 'гармония', 'мир', 'свет', 'тепло',
'дружба', 'поддержка', 'помощь', 'достижение', 'победа'
],
// Негативные слова (valence < 0)
negative: [
'страх', 'тревога', 'гнев', 'грусть', 'боль', 'разочарование',
'одиночество', 'отчаяние', 'бессилие', 'вина', 'стыд', 'зависть',
'ревность', 'ненависть', 'раздражение', 'фрустрация', 'паника',
'ужас', 'кошмар', 'потеря', 'разрыв', 'конфликт', 'проблема'
],
// Высокий arousal (возбуждение)
highArousal: [
'крик', 'бежать', 'удар', 'взрыв', 'падать', 'лететь', 'гоняться',
'дрожать', 'плакать', 'смеяться', 'бороться', 'атаковать', 'спасать',
'быстро', 'внезапно', 'резко', 'сильно', 'громко'
],
// Низкий arousal (спокойствие)
lowArousal: [
'спокойствие', 'тишина', 'сон', 'медитация', 'отдых', 'расслабление',
'медленно', 'плавно', 'мягко', 'тихо', 'нежно', 'мирно', 'лениво'
],
// Эмоциональные паттерны (для определения primary emotion)
patterns: {
anxiety: ['тревог', 'беспоко', 'нервн', 'волнует', 'страш', 'паник'],
anger: ['зл', 'гнев', 'ярост', 'раздраж', 'бешен', 'агресс'],
sadness: ['груст', 'печал', 'тоск', 'горе', 'слёз', 'плач', 'одинок'],
fear: ['страх', 'ужас', 'кошмар', 'бояз', 'пуга', 'трепет'],
joy: ['радост', 'счаст', 'весел', 'смех', 'улыб', 'восторг'],
hope: ['надежд', 'вер', 'ожидан', 'мечт', 'желан'],
confusion: ['путаниц', 'непонят', 'смущен', 'растерян', 'хаос', 'запут']
}
};
// ==========================================
// SYMBOL DICTIONARY — Словарь символов снов
// ==========================================
var SymbolDictionary = {
water: {
keywords: ['вода', 'море', 'океан', 'река', 'озеро', 'дождь', 'лужа', 'волн', 'поток', 'капл'],
category: 'emotion',
weight: 1.0
},
falling: {
keywords: ['падать', 'падение', 'провал', 'обрыв', 'пропасть', 'снизу', 'лететь вниз'],
category: 'fear',
weight: 1.0
},
flying: {
keywords: ['лететь', 'полёт', 'парить', 'крыл', 'небо', 'воздух', 'высоко'],
category: 'freedom',
weight: 1.0
},
teeth: {
keywords: ['зуб', 'зубы', 'выпад', 'крош', 'рот', 'улыбк'],
category: 'anxiety',
weight: 0.9
},
chase: {
keywords: ['погоня', 'преслед', 'бежать от', 'убегать', 'догоня', 'охот'],
category: 'fear',
weight: 1.0
},
house: {
keywords: ['дом', 'квартира', 'комнат', 'здани', 'жилищ', 'крыш', 'стен'],
category: 'self',
weight: 0.8
},
stranger: {
keywords: ['незнакомец', 'чужой', 'человек', 'лицо', 'тень', 'фигур'],
category: 'unknown',
weight: 0.7
},
animal: {
keywords: ['животн', 'звер', 'кот', 'собак', 'волк', 'медвед', 'птиц', 'рыб'],
category: 'instinct',
weight: 0.8
},
fire: {
keywords: ['огонь', 'пламя', 'пожар', 'гореть', 'костёр', 'искр', 'жар'],
category: 'transformation',
weight: 1.0
},
road: {
keywords: ['дорог', 'путь', 'троп', 'улиц', 'шоссе', 'магистрал'],
category: 'journey',
weight: 0.9
}
};
// ==========================================
// DOMAIN KEYWORDS — Ключевые слова сфер жизни
// ==========================================
var DomainKeywords = {
career: ['работ', 'карьер', 'начальник', 'коллег', 'офис', 'проект', 'бизнес', 'задач', 'дедлайн', 'переговор', 'контракт', 'зарплат', 'повышен', 'увольн'],
relationships: ['отношен', 'партнёр', 'любим', 'семь', 'брак', 'свадьб', 'развод', 'друж', 'встреч', 'свидан', 'расстава'],
health: ['здоровь', 'болезн', 'врач', 'больниц', 'лечен', 'симптом', 'диагноз', 'самочувств', 'энерги', 'усталост'],
finance: ['деньг', 'финанс', 'бюджет', 'кредит', 'долг', 'инвестиц', 'покупк', 'продаж', 'эконом', 'доход', 'расход'],
creativity: ['творчеств', 'искусств', 'музык', 'писательств', 'дизайн', 'идея', 'вдохновл', 'проект', 'хобби'],
spiritual: ['духовн', 'медитац', 'религи', 'вера', 'смысл', 'цел', 'предназнач', 'карм', 'судьб', 'душа']
};
// ==========================================
// NLP MODULE — Основной модуль анализа
// ==========================================
var NLP = {
// Главный метод анализа текста
analyzeText: function(text) {
if (!text || typeof text !== 'string') {
return { error: 'Invalid text input' };
}
var normalizedText = text.toLowerCase();
return {
symbols: this.extractSymbols(normalizedText),
emotions: this.extractEmotions(normalizedText),
opponents: this.extractOpponents(text), // Оригинальный текст для имён
domain: this.extractDomain(normalizedText),
keywords: this.extractKeywords(normalizedText),
sentiment: this.calculateSentiment(normalizedText),
confidence: this.calculateConfidence(text)
};
},
// Извлечение символов снов
extractSymbols: function(text) {
var found = [];
for (var symbolId in SymbolDictionary) {
if (SymbolDictionary.hasOwnProperty(symbolId)) {
var symbol = SymbolDictionary[symbolId];
var matchCount = 0;
// Проверяем каждое ключевое слово
symbol.keywords.forEach(function(keyword) {
if (text.includes(keyword)) {
matchCount++;
}
});
// Если найдено хотя бы одно совпадение
if (matchCount > 0) {
found.push({
id: symbolId,
label: Ariadne.Config.dreamSymbols.find(function(s) { return s.id === symbolId; }).label,
icon: Ariadne.Config.dreamSymbols.find(function(s) { return s.id === symbolId; }).icon,
category: symbol.category,
confidence: Math.min(matchCount * symbol.weight, 1.0),
matchCount: matchCount
});
}
}
}
// Сортируем по уверенности
found.sort(function(a, b) { return b.confidence - a.confidence; });
return found;
},
// Извлечение эмоций
extractEmotions: function(text) {
var positiveCount = 0;
var negativeCount = 0;
var highArousalCount = 0;
var lowArousalCount = 0;
// Подсчёт позитивных/негативных слов
EmotionLexicon.positive.forEach(function(word) {
if (text.includes(word)) positiveCount++;
});
EmotionLexicon.negative.forEach(function(word) {
if (text.includes(word)) negativeCount++;
});
// Подсчёт arousal
EmotionLexicon.highArousal.forEach(function(word) {
if (text.includes(word)) highArousalCount++;
});
EmotionLexicon.lowArousal.forEach(function(word) {
if (text.includes(word)) lowArousalCount++;
});
// Валентность: от -1 (негатив) до +1 (позитив)
var totalEmotionWords = positiveCount + negativeCount;
var valence = totalEmotionWords > 0
? (positiveCount - negativeCount) / totalEmotionWords
: 0;
// Arousal: от 0 (спокойствие) до 1 (возбуждение)
var totalArousalWords = highArousalCount + lowArousalCount;
var arousal = totalArousalWords > 0
? highArousalCount / totalArousalWords
: 0.5;
// Определение основной эмоции
var primaryEmotion = this.detectPrimaryEmotion(text);
return {
valence: valence,
arousal: arousal,
primary: primaryEmotion,
positiveCount: positiveCount,
negativeCount: negativeCount,
intensity: Math.abs(valence) * arousal
};
},
// Определение основной эмоции
detectPrimaryEmotion: function(text) {
var scores = {};
for (var emotion in EmotionLexicon.patterns) {
if (EmotionLexicon.patterns.hasOwnProperty(emotion)) {
var patterns = EmotionLexicon.patterns[emotion];
var score = 0;
patterns.forEach(function(pattern) {
// Используем startsWith для частичного совпадения
var words = text.split(/\s+/);
words.forEach(function(word) {
if (word.startsWith(pattern)) {
score++;
}
});
});
scores[emotion] = score;
}
}
// Находим эмоцию с максимальным счётом
var maxEmotion = 'neutral';
var maxScore = 0;
for (var emotion in scores) {
if (scores[emotion] > maxScore) {
maxScore = scores[emotion];
maxEmotion = emotion;
}
}
return maxScore > 0 ? maxEmotion : 'neutral';
},
// Извлечение оппонентов (имён людей)
extractOpponents: function(text) {
var opponents = [];
// Паттерн для имён: Заглавная + слово (Иван Петрович)
var namePattern = /([А-ЯЁ][а-яё]+)\s+([А-ЯЁ][а-яё]+)(?:\s+([А-ЯЁ][а-яё]+))?/g;
var match;
while ((match = namePattern.exec(text)) !== null) {
var fullName = match[0];
// Проверяем, что это не начало предложения (простая эвристика)
var beforeMatch = text.substring(0, match.index);
var lastChar = beforeMatch.trim().slice(-1);
// Если перед именем точка/вопросительный знак — это начало предложения, пропускаем
if (lastChar === '.' || lastChar === '!' || lastChar === '?') {
continue;
}
// Добавляем, если ещё не добавлен
if (!opponents.find(function(o) { return o.name === fullName; })) {
opponents.push({
name: fullName,
role: this.detectRole(text, fullName)
});
}
}
// Также ищем упоминания ролей без имён
var roles = ['начальник', 'коллега', 'друг', 'партнёр', 'клиент', 'заказчик', 'менеджер'];
roles.forEach(function(role) {
if (text.includes(role)) {
opponents.push({
name: role.charAt(0).toUpperCase() + role.slice(1),
role: role,
isGeneric: true
});
}
});
return opponents;
},
// Определение роли оппонента из контекста
detectRole: function(text, name) {
var roleKeywords = {
'boss': ['начальник', 'руководитель', 'шеф', 'босс'],
'colleague': ['коллега', 'сотрудник', 'команд'],
'client': ['клиент', 'заказчик', 'партнёр', 'клиент'],
'friend': ['друг', 'подруг', 'товарищ'],
'family': ['семь', 'родств', 'мама', 'папа', 'брат', 'сестр']
};
// Ищем контекст вокруг имени (50 символов до и после)
var nameIndex = text.indexOf(name);
if (nameIndex === -1) return 'unknown';
var context = text.substring(
Math.max(0, nameIndex - 50),
Math.min(text.length, nameIndex + name.length + 50)
).toLowerCase();
for (var role in roleKeywords) {
if (roleKeywords.hasOwnProperty(role)) {
var keywords = roleKeywords[role];
for (var i = 0; i < keywords.length; i++) {
if (context.includes(keywords[i])) {
return role;
}
}
}
}
return 'unknown';
},
// Определение сферы жизни
extractDomain: function(text) {
var scores = {};
for (var domain in DomainKeywords) {
if (DomainKeywords.hasOwnProperty(domain)) {
var keywords = DomainKeywords[domain];
var score = 0;
keywords.forEach(function(keyword) {
if (text.includes(keyword)) {
score++;
}
});
scores[domain] = score;
}
}
// Находим домен с максимальным счётом
var maxDomain = 'general';
var maxScore = 0;
for (var domain in scores) {
if (scores[domain] > maxScore) {
maxScore = scores[domain];
maxDomain = domain;
}
}
return {
primary: maxDomain,
label: Ariadne.Config.lifeDomains.find(function(d) { return d.id === maxDomain; })?.label || 'Общее',
confidence: maxScore > 0 ? Math.min(maxScore / 3, 1.0) : 0.3
};
},
// Извлечение ключевых слов (упрощённо)
extractKeywords: function(text) {
// Удаляем стоп-слова
var stopWords = ['и', 'в', 'на', 'с', 'по', 'для', 'что', 'как', 'это', 'то', 'не', 'но', 'а', 'же', 'бы', 'ли', 'из', 'от', 'до', 'за', 'о', 'об', 'к', 'у'];
// Разбиваем на слова
var words = text.split(/\s+/);
// Фильтруем и считаем частоту
var wordCounts = {};
words.forEach(function(word) {
// Убираем пунктуацию и приводим к нижней форме
word = word.replace(/[^\wа-яё]/g, '').toLowerCase();
if (word.length > 3 && !stopWords.includes(word)) {
wordCounts[word] = (wordCounts[word] || 0) + 1;
}
});
// Сортируем по частоте и берём топ-10
var sorted = Object.keys(wordCounts).sort(function(a, b) {
return wordCounts[b] - wordCounts[a];
});
return sorted.slice(0, 10);
},
// Общий сентимент текста
calculateSentiment: function(text) {
var emotions = this.extractEmotions(text);
if (emotions.valence > 0.2) return 'positive';
if (emotions.valence < -0.2) return 'negative';
return 'neutral';
},
// Уверенность анализа (зависит от длины текста и количества найденных сущностей)
calculateConfidence: function(text) {
var wordCount = text.split(/\s+/).length;
var lengthFactor = Math.min(wordCount / 50, 1.0); // Нормализуем к 50 словам
var symbols = this.extractSymbols(text);
var opponents = this.extractOpponents(text);
var entityFactor = Math.min((symbols.length + opponents.length) / 5, 1.0);
return (lengthFactor * 0.6 + entityFactor * 0.4);
}
};
// ==========================================
// EXPORT — Добавляем NLP в глобальный объект
// ==========================================
window.Ariadne.NLP = NLP;
console.log('%c? NLP Parser initialized', 'color: #5eead4; font-size: 12px;');
})();
</script>
<script>
/* ============================================
ARIADNE v1.0 — Bayesian Engine (Block 11/14)
Probabilistic network, inference, simulation
============================================ */
(function() {
'use strict';
// ==========================================
// NODE TYPES — Типы узлов сети
// ==========================================
var NodeTypes = {
SYMPTOM: 'symptom', // Входные данные (сны, карты, слова)
HYPOTHESIS: 'hypothesis', // Скрытые состояния (тревога, уверенность)
OUTCOME: 'outcome', // Прогнозы (исходы событий)
OPPONENT: 'opponent' // Модели людей
};
// Цвета типов узлов для визуализации
var NodeColors = {
symptom: '#5eead4',
hypothesis: '#a78bfa',
outcome: '#d4af37',
opponent: '#f472b6'
};
// ==========================================
// NODE CLASS — Узел байесовской сети
// ==========================================
function Node(id, options) {
options = options || {};
this.id = id;
this.label = options.label || id;
this.type = options.type || NodeTypes.HYPOTHESIS;
this.description = options.description || '';
// Вероятности
this.prior = options.prior !== undefined ? options.prior : 0.5; // Априорная вероятность
this.posterior = this.prior; // Апостериорная (после обновлений)
// Связи
this.parents = []; // ID узлов-родителей
this.children = []; // ID узлов-детей
// Метаданные
this.evidence = null; // Установленное свидетельство (true/false/null)
this.lastUpdated = null; // Время последнего обновления
this.updateCount = 0; // Количество обновлений
// Для типа opponent — поведенческие характеристики
if (this.type === NodeTypes.OPPONENT) {
this.traits = options.traits || {
aggressiveness: 0.3,
avoidance: 0.4,
manipulation: 0.2,
empathy: 0.5
};
this.interactions = [];
}
}
// ==========================================
// EDGE CLASS — Ребро (связь) между узлами
// ==========================================
function Edge(from, to, options) {
options = options || {};
this.from = from;
this.to = to;
this.weight = options.weight !== undefined ? options.weight : 0.5; // Сила влияния (0-1)
this.type = options.type || 'causal'; // causal, correlational, inhibitory
this.label = options.label || '';
}
// ==========================================
// BAYESIAN NETWORK — Главная сеть
// ==========================================
var BayesianNetwork = {
nodes: {},
edges: [],
// === ДОБАВЛЕНИЕ УЗЛОВ И РЁБЕР ===
addNode: function(node) {
if (!(node instanceof Node)) {
node = new Node(node.id, node);
}
this.nodes[node.id] = node;
Ariadne.EventBus.emit('network:nodeAdded', { node: node });
return node;
},
addEdge: function(edge) {
if (!(edge instanceof Edge)) {
edge = new Edge(edge.from, edge.to, edge);
}
// Проверяем существование узлов
if (!this.nodes[edge.from] || !this.nodes[edge.to]) {
console.warn('Edge references non-existent node:', edge);
return null;
}
// Проверяем, нет ли уже такого ребра
var exists = this.edges.find(function(e) {
return e.from === edge.from && e.to === edge.to;
});
if (exists) {
console.warn('Edge already exists:', edge);
return exists;
}
// Добавляем связи в узлы
this.nodes[edge.from].children.push(edge.to);
this.nodes[edge.to].parents.push(edge.from);
this.edges.push(edge);
Ariadne.EventBus.emit('network:edgeAdded', { edge: edge });
return edge;
},
removeNode: function(nodeId) {
var node = this.nodes[nodeId];
if (!node) return false;
// Удаляем все связанные рёбра
this.edges = this.edges.filter(function(edge) {
if (edge.from === nodeId || edge.to === nodeId) {
// Удаляем ссылки из других узлов
if (edge.from === nodeId) {
var child = this.nodes[edge.to];
if (child) {
child.parents = child.parents.filter(function(p) { return p !== nodeId; });
}
}
if (edge.to === nodeId) {
var parent = this.nodes[edge.from];
if (parent) {
parent.children = parent.children.filter(function(c) { return c !== nodeId; });
}
}
return false;
}
return true;
}.bind(this));
delete this.nodes[nodeId];
Ariadne.EventBus.emit('network:nodeRemoved', { nodeId: nodeId });
return true;
},
// === ПОЛУЧЕНИЕ УЗЛОВ ===
getNode: function(id) {
return this.nodes[id];
},
getNodesByType: function(type) {
var result = [];
for (var id in this.nodes) {
if (this.nodes[id].type === type) {
result.push(this.nodes[id]);
}
}
return result;
},
// === УСТАНОВКА СВИДЕТЕЛЬСТВА ===
setEvidence: function(nodeId, value) {
var node = this.nodes[nodeId];
if (!node) return false;
node.evidence = value;
node.posterior = value ? 1.0 : 0.0;
node.lastUpdated = Date.now();
node.updateCount++;
// Запускаем распространение убеждений
this.propagateBelief(nodeId);
Ariadne.EventBus.emit('network:evidence', {
nodeId: nodeId,
value: value,
node: node
});
return true;
},
// === РАСПРОСТРАНЕНИЕ УБЕЖДЕНИЙ (Belief Propagation) ===
// Упрощённый алгоритм: идём от узла-свидетельства к детям и родителям
propagateBelief: function(startNodeId) {
var visited = {};
var queue = [startNodeId];
while (queue.length > 0) {
var currentId = queue.shift();
if (visited[currentId]) continue;
visited[currentId] = true;
var currentNode = this.nodes[currentId];
if (!currentNode) continue;
// Обновляем posterior на основе родителей
if (currentNode.evidence === null) {
currentNode.posterior = this.calculatePosterior(currentId);
}
currentNode.lastUpdated = Date.now();
// Добавляем детей в очередь
currentNode.children.forEach(function(childId) {
if (!visited[childId]) queue.push(childId);
});
// Добавляем родителей (для обратной связи)
currentNode.parents.forEach(function(parentId) {
if (!visited[parentId]) queue.push(parentId);
});
}
Ariadne.EventBus.emit('network:updated', { startNode: startNodeId });
},
// Расчёт апостериорной вероятности узла
calculatePosterior: function(nodeId) {
var node = this.nodes[nodeId];
if (!node) return 0.5;
// Если есть прямое свидетельство — возвращаем его
if (node.evidence !== null) {
return node.evidence ? 1.0 : 0.0;
}
// Если нет родителей — возвращаем prior
if (node.parents.length === 0) {
return node.prior;
}
// Считаем взвешенную сумму влияний родителей
var weightedSum = 0;
var totalWeight = 0;
node.parents.forEach(function(parentId) {
var parent = this.nodes[parentId];
var edge = this.edges.find(function(e) {
return e.from === parentId && e.to === nodeId;
});
if (parent && edge) {
var influence = parent.posterior * edge.weight;
// Для inhibitory связей — инвертируем влияние
if (edge.type === 'inhibitory') {
influence = (1 - parent.posterior) * edge.weight;
}
weightedSum += influence;
totalWeight += edge.weight;
}
}.bind(this));
if (totalWeight === 0) return node.prior;
// Комбинируем prior и влияние родителей
var parentInfluence = weightedSum / totalWeight;
var priorWeight = 0.3; // Вес априорной вероятности
var parentWeight = 0.7; // Вес влияния родителей
return node.prior * priorWeight + parentInfluence * parentWeight;
},
// === ОБНОВЛЕНИЕ ИЗ NLP ===
updateFromNLP: function(nlpResult) {
if (!nlpResult) return;
var updates = [];
// 1. Обновляем узлы-симптомы на основе извлечённых символов
if (nlpResult.symbols && nlpResult.symbols.length > 0) {
nlpResult.symbols.forEach(function(symbol) {
var nodeId = 'symptom_' + symbol.id;
var node = this.nodes[nodeId];
if (node) {
// Устанавливаем свидетельство с уверенностью
this.setEvidence(nodeId, symbol.confidence > 0.5);
updates.push({ nodeId: nodeId, source: 'symbol', value: symbol.id });
}
}.bind(this));
}
// 2. Обновляем эмоциональные узлы
if (nlpResult.emotions) {
// Тревога
if (nlpResult.emotions.primary === 'anxiety' || nlpResult.emotions.primary === 'fear') {
var anxietyNode = this.nodes['hypothesis_anxiety'];
if (anxietyNode) {
anxietyNode.posterior = Math.min(1, anxietyNode.prior + nlpResult.emotions.intensity);
updates.push({ nodeId: 'hypothesis_anxiety', source: 'emotion', value: nlpResult.emotions.primary });
}
}
// Уверенность (инвертировано от тревоги)
if (nlpResult.emotions.primary === 'joy' || nlpResult.emotions.valence > 0.3) {
var confidenceNode = this.nodes['hypothesis_confidence'];
if (confidenceNode) {
confidenceNode.posterior = Math.min(1, confidenceNode.prior + Math.abs(nlpResult.emotions.valence));
updates.push({ nodeId: 'hypothesis_confidence', source: 'emotion', value: 'positive' });
}
}
}
// 3. Создаём/обновляем узлы оппонентов
if (nlpResult.opponents && nlpResult.opponents.length > 0) {
nlpResult.opponents.forEach(function(opp) {
var nodeId = 'opponent_' + opp.name.replace(/\s+/g, '_').toLowerCase();
var node = this.nodes[nodeId];
if (!node) {
// Создаём новый узел оппонента
node = this.addNode({
id: nodeId,
label: opp.name,
type: NodeTypes.OPPONENT,
description: 'Role: ' + (opp.role || 'unknown'),
traits: {
aggressiveness: 0.3,
avoidance: 0.4,
manipulation: 0.2,
empathy: 0.5
}
});
// Связываем с гипотезой социального напряжения
if (this.nodes['hypothesis_social_tension']) {
this.addEdge({
from: nodeId,
to: 'hypothesis_social_tension',
weight: 0.6,
type: 'causal'
});
}
}
node.interactions.push({
timestamp: Date.now(),
role: opp.role,
context: nlpResult.domain ? nlpResult.domain.primary : 'unknown'
});
updates.push({ nodeId: nodeId, source: 'opponent', value: opp.name });
}.bind(this));
}
Ariadne.EventBus.emit('network:nlpUpdated', { updates: updates, nlpResult: nlpResult });
return updates;
},
// === СИМУЛЯЦИЯ "ЧТО ЕСЛИ" ===
simulate: function(scenario) {
// Создаём копию сети для симуляции
var simulatedNetwork = this.clone();
// Применяем условия сценария
if (scenario.conditions) {
scenario.conditions.forEach(function(condition) {
simulatedNetwork.setEvidence(condition.nodeId, condition.value);
});
}
// Собираем результаты
var results = {
scenario: scenario,
timestamp: Date.now(),
affectedNodes: [],
predictions: {}
};
// Сравниваем с исходной сетью
for (var nodeId in simulatedNetwork.nodes) {
var original = this.nodes[nodeId];
var simulated = simulatedNetwork.nodes[nodeId];
if (original && simulated) {
var diff = simulated.posterior - original.posterior;
if (Math.abs(diff) > 0.05) { // Значимое изменение
results.affectedNodes.push({
nodeId: nodeId,
label: original.label,
type: original.type,
original: original.posterior,
simulated: simulated.posterior,
change: diff
});
}
}
}
// Прогнозы для узлов-исходов
var outcomeNodes = simulatedNetwork.getNodesByType(NodeTypes.OUTCOME);
outcomeNodes.forEach(function(node) {
results.predictions[node.id] = {
label: node.label,
probability: node.posterior,
change: node.posterior - (this.nodes[node.id] ? this.nodes[node.id].posterior : node.prior)
};
}.bind(this));
Ariadne.EventBus.emit('network:simulated', { results: results });
return results;
},
// === ПРОГНОЗ ПОВЕДЕНИЯ ОППОНЕНТА ===
predictOpponentBehavior: function(opponentId, context) {
var opponent = this.nodes[opponentId];
if (!opponent || opponent.type !== NodeTypes.OPPONENT) {
return { error: 'Opponent not found' };
}
var traits = opponent.traits;
var predictions = [];
// Базовые поведенческие паттерны
if (traits.avoidance > 0.6) {
predictions.push({
behavior: 'Избегание конфликта',
probability: traits.avoidance,
description: 'С вероятностью ' + Math.round(traits.avoidance * 100) + '% оппонент попытается избежать прямого контакта'
});
}
if (traits.manipulation > 0.5) {
predictions.push({
behavior: 'Манипуляция',
probability: traits.manipulation,
description: 'С вероятностью ' + Math.round(traits.manipulation * 100) + '% возможна попытка манипуляции (газлайтинг, перекладывание вины)'
});
}
if (traits.aggressiveness > 0.6) {
predictions.push({
behavior: 'Агрессивная реакция',
probability: traits.aggressiveness,
description: 'С вероятностью ' + Math.round(traits.aggressiveness * 100) + '% возможна резкая или агрессивная реакция'
});
}
if (traits.empathy > 0.6) {
predictions.push({
behavior: 'Эмпатичный отклик',
probability: traits.empathy,
description: 'С вероятностью ' + Math.round(traits.empathy * 100) + '% оппонент проявит понимание и поддержку'
});
}
// Сортируем по вероятности
predictions.sort(function(a, b) { return b.probability - a.probability; });
return {
opponentId: opponentId,
opponentName: opponent.label,
context: context,
predictions: predictions,
dominantBehavior: predictions[0] ? predictions[0].behavior : 'Неопределено'
};
},
// === КЛОНИРОВАНИЕ СЕТИ ===
clone: function() {
var cloned = {
nodes: {},
edges: [],
addNode: this.addNode,
addEdge: this.addEdge,
setEvidence: this.setEvidence,
propagateBelief: this.propagateBelief,
calculatePosterior: this.calculatePosterior,
getNodesByType: this.getNodesByType,
clone: this.clone
};
// Клонируем узлы
for (var id in this.nodes) {
var original = this.nodes[id];
var clonedNode = new Node(original.id, {
label: original.label,
type: original.type,
description: original.description,
prior: original.prior
});
clonedNode.posterior = original.posterior;
clonedNode.evidence = original.evidence;
clonedNode.parents = original.parents.slice();
clonedNode.children = original.children.slice();
if (original.traits) clonedNode.traits = Ariadne.Utils.deepClone(original.traits);
cloned.nodes[id] = clonedNode;
}
// Клонируем рёбра
this.edges.forEach(function(edge) {
cloned.edges.push(new Edge(edge.from, edge.to, {
weight: edge.weight,
type: edge.type,
label: edge.label
}));
});
return cloned;
},
// === СБРОС СЕТИ ===
reset: function() {
for (var id in this.nodes) {
var node = this.nodes[id];
node.posterior = node.prior;
node.evidence = null;
}
Ariadne.EventBus.emit('network:reset', {});
},
// === СОХРАНЕНИЕ И ЗАГРУЗКА ===
save: function() {
var data = {
nodes: {},
edges: this.edges.map(function(e) {
return { from: e.from, to: e.to, weight: e.weight, type: e.type, label: e.label };
}),
savedAt: Date.now()
};
for (var id in this.nodes) {
var node = this.nodes[id];
data.nodes[id] = {
id: node.id,
label: node.label,
type: node.type,
description: node.description,
prior: node.prior,
posterior: node.posterior,
evidence: node.evidence,
parents: node.parents,
children: node.children,
traits: node.traits,
interactions: node.interactions,
lastUpdated: node.lastUpdated,
updateCount: node.updateCount
};
}
return Ariadne.Storage.set('network', data);
},
load: function() {
var data = Ariadne.Storage.get('network', null);
if (!data) return false;
// Очищаем текущую сеть
this.nodes = {};
this.edges = [];
// Восстанавливаем узлы
for (var id in data.nodes) {
var nodeData = data.nodes[id];
var node = new Node(nodeData.id, {
label: nodeData.label,
type: nodeData.type,
description: nodeData.description,
prior: nodeData.prior
});
node.posterior = nodeData.posterior;
node.evidence = nodeData.evidence;
node.parents = nodeData.parents;
node.children = nodeData.children;
node.traits = nodeData.traits;
node.interactions = nodeData.interactions || [];
node.lastUpdated = nodeData.lastUpdated;
node.updateCount = nodeData.updateCount || 0;
this.nodes[id] = node;
}
// Восстанавливаем рёбра
data.edges.forEach(function(edgeData) {
this.edges.push(new Edge(edgeData.from, edgeData.to, {
weight: edgeData.weight,
type: edgeData.type,
label: edgeData.label
}));
}.bind(this));
Ariadne.EventBus.emit('network:loaded', { data: data });
return true;
},
// === СТАТИСТИКА СЕТИ ===
getStats: function() {
var stats = {
totalNodes: 0,
totalEdges: this.edges.length,
byType: {},
activeEvidence: 0,
avgPosterior: 0
};
var posteriorSum = 0;
for (var id in this.nodes) {
var node = this.nodes[id];
stats.totalNodes++;
stats.byType[node.type] = (stats.byType[node.type] || 0) + 1;
if (node.evidence !== null) stats.activeEvidence++;
posteriorSum += node.posterior;
}
stats.avgPosterior = stats.totalNodes > 0 ? posteriorSum / stats.totalNodes : 0;
return stats;
}
};
// ==========================================
// INIT DEFAULT NETWORK — Создание демо-сети
// ==========================================
function initDefaultNetwork() {
// === УЗЛЫ-СИМПТОМЫ (входные данные) ===
BayesianNetwork.addNode({ id: 'symptom_water', label: 'Вода во сне', type: NodeTypes.SYMPTOM, prior: 0.3 });
BayesianNetwork.addNode({ id: 'symptom_falling', label: 'Падение во сне', type: NodeTypes.SYMPTOM, prior: 0.25 });
BayesianNetwork.addNode({ id: 'symptom_chase', label: 'Погоня во сне', type: NodeTypes.SYMPTOM, prior: 0.2 });
BayesianNetwork.addNode({ id: 'symptom_fire', label: 'Огонь во сне', type: NodeTypes.SYMPTOM, prior: 0.15 });
BayesianNetwork.addNode({ id: 'symptom_tower', label: 'Карта Башня', type: NodeTypes.SYMPTOM, prior: 0.1 });
// === УЗЛЫ-ГИПОТЕЗЫ (скрытые состояния) ===
BayesianNetwork.addNode({ id: 'hypothesis_anxiety', label: 'Тревога', type: NodeTypes.HYPOTHESIS, prior: 0.34 });
BayesianNetwork.addNode({ id: 'hypothesis_confidence', label: 'Уверенность', type: NodeTypes.HYPOTHESIS, prior: 0.67 });
BayesianNetwork.addNode({ id: 'hypothesis_paradigm_shift', label: 'Смена парадигмы', type: NodeTypes.HYPOTHESIS, prior: 0.4 });
BayesianNetwork.addNode({ id: 'hypothesis_social_tension', label: 'Социальное напряжение', type: NodeTypes.HYPOTHESIS, prior: 0.41 });
// === УЗЛЫ-ИСХОДЫ (прогнозы) ===
BayesianNetwork.addNode({ id: 'outcome_negotiations', label: 'Успех переговоров', type: NodeTypes.OUTCOME, prior: 0.55 });
BayesianNetwork.addNode({ id: 'outcome_conflict', label: 'Эскалация конфликта', type: NodeTypes.OUTCOME, prior: 0.3 });
BayesianNetwork.addNode({ id: 'outcome_transformation', label: 'Позитивная трансформация', type: NodeTypes.OUTCOME, prior: 0.45 });
// === РЁБРА (причинно-следственные связи) ===
// Символы снов → Тревога
BayesianNetwork.addEdge({ from: 'symptom_falling', to: 'hypothesis_anxiety', weight: 0.8, type: 'causal' });
BayesianNetwork.addEdge({ from: 'symptom_chase', to: 'hypothesis_anxiety', weight: 0.9, type: 'causal' });
BayesianNetwork.addEdge({ from: 'symptom_water', to: 'hypothesis_anxiety', weight: 0.5, type: 'causal' });
// Символы снов → Смена парадигмы
BayesianNetwork.addEdge({ from: 'symptom_fire', to: 'hypothesis_paradigm_shift', weight: 0.85, type: 'causal' });
BayesianNetwork.addEdge({ from: 'symptom_tower', to: 'hypothesis_paradigm_shift', weight: 0.95, type: 'causal' });
// Тревога → Исходы
BayesianNetwork.addEdge({ from: 'hypothesis_anxiety', to: 'outcome_negotiations', weight: 0.7, type: 'inhibitory' });
BayesianNetwork.addEdge({ from: 'hypothesis_anxiety', to: 'outcome_conflict', weight: 0.8, type: 'causal' });
// Уверенность → Исходы
BayesianNetwork.addEdge({ from: 'hypothesis_confidence', to: 'outcome_negotiations', weight: 0.85, type: 'causal' });
BayesianNetwork.addEdge({ from: 'hypothesis_confidence', to: 'outcome_transformation', weight: 0.6, type: 'causal' });
// Смена парадигмы → Исходы
BayesianNetwork.addEdge({ from: 'hypothesis_paradigm_shift', to: 'outcome_transformation', weight: 0.9, type: 'causal' });
BayesianNetwork.addEdge({ from: 'hypothesis_paradigm_shift', to: 'outcome_conflict', weight: 0.4, type: 'causal' });
// Социальное напряжение → Конфликт
BayesianNetwork.addEdge({ from: 'hypothesis_social_tension', to: 'outcome_conflict', weight: 0.75, type: 'causal' });
// Взаимосвязи между гипотезами
BayesianNetwork.addEdge({ from: 'hypothesis_anxiety', to: 'hypothesis_confidence', weight: 0.6, type: 'inhibitory' });
BayesianNetwork.addEdge({ from: 'hypothesis_social_tension', to: 'hypothesis_anxiety', weight: 0.5, type: 'causal' });
console.log('%c?️ Bayesian Network initialized: ' +
Object.keys(BayesianNetwork.nodes).length + ' nodes, ' +
BayesianNetwork.edges.length + ' edges',
'color: #a78bfa; font-size: 12px;');
}
// ==========================================
// EXPORT — Добавляем в глобальный объект
// ==========================================
window.Ariadne.Bayesian = {
Network: BayesianNetwork,
Node: Node,
Edge: Edge,
NodeTypes: NodeTypes,
NodeColors: NodeColors,
initDefault: initDefaultNetwork
};
// Инициализация демо-сети
initDefaultNetwork();
})();
</script>
<script>
/* ============================================
ARIADNE v1.0 — Graph Visualization (Block 12/14)
SVG rendering, force layout, interaction
============================================ */
(function() {
'use strict';
// ==========================================
// GRAPH RENDERER — Визуализация графа
// ==========================================
var GraphRenderer = {
svg: null,
container: null,
width: 0,
height: 0,
// Состояние
nodes: {}, // { id: { x, y, vx, vy, ... } }
edges: [],
selectedNode: null,
draggedNode: null,
// Настройки layout
layout: {
nodeRadius: 24,
chargeStrength: -300, // Отталкивание между узлами
linkDistance: 120, // Длина рёбер
centerStrength: 0.05, // Притяжение к центру
damping: 0.9, // Затухание скорости
maxIterations: 100 // Максимум итераций симуляции
},
// Цвета типов узлов
colors: {
symptom: '#5eead4',
hypothesis: '#a78bfa',
outcome: '#d4af37',
opponent: '#f472b6'
},
// === ИНИЦИАЛИЗАЦИЯ ===
init: function(containerId) {
this.container = document.getElementById(containerId);
if (!this.container) {
console.error('Graph container not found:', containerId);
return false;
}
// Создаём SVG
this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.svg.setAttribute('class', 'graph-canvas');
this.svg.setAttribute('width', '100%');
this.svg.setAttribute('height', '100%');
this.container.innerHTML = '';
this.container.appendChild(this.svg);
// Определяем размеры
this.updateSize();
// Создаём группы для слоёв
this.edgesGroup = this.createGroup('edges-layer');
this.nodesGroup = this.createGroup('nodes-layer');
// Подписываемся на события сети
this.subscribeToNetworkEvents();
// Обработчики событий мыши
this.setupMouseHandlers();
// Обработчик ресайза
window.addEventListener('resize', Ariadne.Utils.debounce(function() {
this.updateSize();
this.render();
}.bind(this), 200));
console.log('%c?️ Graph Renderer initialized', 'color: #5eead4; font-size: 12px;');
return true;
},
// Обновление размеров SVG
updateSize: function() {
var rect = this.container.getBoundingClientRect();
this.width = rect.width;
this.height = rect.height;
this.svg.setAttribute('viewBox', '0 0 ' + this.width + ' ' + this.height);
},
// Создание SVG-группы
createGroup: function(id) {
var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.setAttribute('id', id);
this.svg.appendChild(group);
return group;
},
// === ПОДПИСКА НА СОБЫТИЯ СЕТИ ===
subscribeToNetworkEvents: function() {
var self = this;
Ariadne.EventBus.on('network:nodeAdded', function(data) {
self.addNodeToGraph(data.node);
self.render();
});
Ariadne.EventBus.on('network:edgeAdded', function(data) {
self.addEdgeToGraph(data.edge);
self.render();
});
Ariadne.EventBus.on('network:nodeRemoved', function(data) {
self.removeNodeFromGraph(data.nodeId);
self.render();
});
Ariadne.EventBus.on('network:evidence', function(data) {
self.updateNodeEvidence(data.nodeId, data.value);
});
Ariadne.EventBus.on('network:updated', function() {
self.updateNodeLabels();
});
Ariadne.EventBus.on('network:reset', function() {
self.render();
});
},
// === ЗАГРУЗКА ДАННЫХ ИЗ СЕТИ ===
loadFromNetwork: function() {
var network = Ariadne.Bayesian.Network;
// Очищаем граф
this.nodes = {};
this.edges = [];
this.edgesGroup.innerHTML = '';
this.nodesGroup.innerHTML = '';
// Загружаем узлы
for (var id in network.nodes) {
var node = network.nodes[id];
this.addNodeToGraph(node);
}
// Загружаем рёбра
network.edges.forEach(function(edge) {
this.addEdgeToGraph(edge);
}.bind(this));
// Запускаем layout
this.runForceLayout();
// Рендерим
this.render();
},
// Добавление узла в граф
addNodeToGraph: function(node) {
// Начальная позиция — случайная или по кругу
var angle = (Object.keys(this.nodes).length / Object.keys(Ariadne.Bayesian.Network.nodes).length) * Math.PI * 2;
var radius = Math.min(this.width, this.height) * 0.3;
this.nodes[node.id] = {
id: node.id,
label: node.label,
type: node.type,
x: this.width / 2 + Math.cos(angle) * radius,
y: this.height / 2 + Math.sin(angle) * radius,
vx: 0,
vy: 0,
fixed: false,
posterior: node.posterior,
evidence: node.evidence
};
},
// Добавление ребра в граф
addEdgeToGraph: function(edge) {
this.edges.push({
from: edge.from,
to: edge.to,
weight: edge.weight,
type: edge.type
});
},
// Удаление узла из графа
removeNodeFromGraph: function(nodeId) {
delete this.nodes[nodeId];
this.edges = this.edges.filter(function(e) {
return e.from !== nodeId && e.to !== nodeId;
});
},
// Обновление свидетельства узла
updateNodeEvidence: function(nodeId, value) {
if (this.nodes[nodeId]) {
this.nodes[nodeId].evidence = value;
this.nodes[nodeId].posterior = Ariadne.Bayesian.Network.getNode(nodeId).posterior;
this.renderNode(nodeId);
}
},
// === FORCE-DIRECTED LAYOUT ===
runForceLayout: function() {
var iterations = 0;
var self = this;
function iterate() {
if (iterations >= self.layout.maxIterations) {
self.render();
return;
}
// Применяем силы
self.applyForces();
// Обновляем позиции
for (var id in self.nodes) {
var node = self.nodes[id];
if (!node.fixed) {
node.vx *= self.layout.damping;
node.vy *= self.layout.damping;
node.x += node.vx;
node.y += node.vy;
// Границы
node.x = Math.max(self.layout.nodeRadius, Math.min(self.width - self.layout.nodeRadius, node.x));
node.y = Math.max(self.layout.nodeRadius, Math.min(self.height - self.layout.nodeRadius, node.y));
}
}
iterations++;
// Рендерим каждые 5 итераций для плавности
if (iterations % 5 === 0) {
self.render();
}
requestAnimationFrame(iterate);
}
iterate();
},
// Применение сил
applyForces: function() {
var nodeIds = Object.keys(this.nodes);
// 1. Отталкивание между узлами (charge)
for (var i = 0; i < nodeIds.length; i++) {
for (var j = i + 1; j < nodeIds.length; j++) {
var node1 = this.nodes[nodeIds[i]];
var node2 = this.nodes[nodeIds[j]];
var dx = node2.x - node1.x;
var dy = node2.y - node1.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var force = this.layout.chargeStrength / (dist * dist);
var fx = (dx / dist) * force;
var fy = (dy / dist) * force;
if (!node1.fixed) { node1.vx -= fx; node1.vy -= fy; }
if (!node2.fixed) { node2.vx += fx; node2.vy += fy; }
}
}
// 2. Притяжение по рёбрам (links)
this.edges.forEach(function(edge) {
var source = this.nodes[edge.from];
var target = this.nodes[edge.to];
if (!source || !target) return;
var dx = target.x - source.x;
var dy = target.y - source.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var force = (dist - this.layout.linkDistance) * 0.05 * edge.weight;
var fx = (dx / dist) * force;
var fy = (dy / dist) * force;
if (!source.fixed) { source.vx += fx; source.vy += fy; }
if (!target.fixed) { target.vx -= fx; target.vy -= fy; }
}.bind(this));
// 3. Притяжение к центру
var centerX = this.width / 2;
var centerY = this.height / 2;
for (var id in this.nodes) {
var node = this.nodes[id];
if (!node.fixed) {
node.vx += (centerX - node.x) * this.layout.centerStrength;
node.vy += (centerY - node.y) * this.layout.centerStrength;
}
}
},
// === РЕНДЕРИНГ ===
render: function() {
this.renderEdges();
this.renderNodes();
},
// Рендеринг рёбер
renderEdges: function() {
this.edgesGroup.innerHTML = '';
this.edges.forEach(function(edge) {
var source = this.nodes[edge.from];
var target = this.nodes[edge.to];
if (!source || !target) return;
// Линия ребра
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', source.x);
line.setAttribute('y1', source.y);
line.setAttribute('x2', target.x);
line.setAttribute('y2', target.y);
line.setAttribute('class', 'graph-edge');
line.setAttribute('stroke-width', 1 + edge.weight * 2);
line.setAttribute('stroke-opacity', 0.3 + edge.weight * 0.5);
// Для inhibitory связей — пунктир
if (edge.type === 'inhibitory') {
line.setAttribute('stroke-dasharray', '5,5');
}
this.edgesGroup.appendChild(line);
// Стрелка направления
var arrow = this.createArrow(source.x, source.y, target.x, target.y);
this.edgesGroup.appendChild(arrow);
}.bind(this));
},
// Создание стрелки
createArrow: function(x1, y1, x2, y2) {
var angle = Math.atan2(y2 - y1, x2 - x1);
var arrowSize = 8;
var offset = this.layout.nodeRadius + 5;
var tipX = x2 - Math.cos(angle) * offset;
var tipY = y2 - Math.sin(angle) * offset;
var leftX = tipX - Math.cos(angle - Math.PI / 6) * arrowSize;
var leftY = tipY - Math.sin(angle - Math.PI / 6) * arrowSize;
var rightX = tipX - Math.cos(angle + Math.PI / 6) * arrowSize;
var rightY = tipY - Math.sin(angle + Math.PI / 6) * arrowSize;
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M ' + tipX + ' ' + tipY + ' L ' + leftX + ' ' + leftY + ' L ' + rightX + ' ' + rightY + ' Z');
path.setAttribute('fill', 'var(--border-strong)');
path.setAttribute('opacity', '0.6');
return path;
},
// Рендеринг узлов
renderNodes: function() {
this.nodesGroup.innerHTML = '';
for (var id in this.nodes) {
this.renderNode(id);
}
},
// Рендеринг одного узла
renderNode: function(nodeId) {
var nodeData = this.nodes[nodeId];
if (!nodeData) return;
var networkNode = Ariadne.Bayesian.Network.getNode(nodeId);
if (!networkNode) return;
var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
group.setAttribute('class', 'graph-node');
group.setAttribute('data-node-id', nodeId);
group.setAttribute('transform', 'translate(' + nodeData.x + ',' + nodeData.y + ')');
// Внешний круг (свечение)
var glowCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
glowCircle.setAttribute('r', this.layout.nodeRadius + 4);
glowCircle.setAttribute('fill', 'none');
glowCircle.setAttribute('stroke', this.colors[nodeData.type]);
glowCircle.setAttribute('stroke-width', '2');
glowCircle.setAttribute('stroke-opacity', '0.3');
if (nodeData.evidence !== null) {
glowCircle.setAttribute('class', 'pulse');
}
group.appendChild(glowCircle);
// Основной круг
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', this.layout.nodeRadius);
circle.setAttribute('fill', this.colors[nodeData.type]);
circle.setAttribute('fill-opacity', '0.2');
circle.setAttribute('stroke', this.colors[nodeData.type]);
circle.setAttribute('stroke-width', '2');
circle.setAttribute('class', 'graph-node-circle');
group.appendChild(circle);
// Иконка типа
var icon = this.getTypeIcon(nodeData.type);
var iconText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
iconText.setAttribute('class', 'graph-node-label');
iconText.setAttribute('y', '-5');
iconText.setAttribute('font-size', '16');
iconText.textContent = icon;
group.appendChild(iconText);
// Метка (название)
var label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
label.setAttribute('class', 'graph-node-label');
label.setAttribute('y', '12');
label.setAttribute('font-size', '10');
label.textContent = nodeData.label.length > 15 ? nodeData.label.substring(0, 12) + '...' : nodeData.label;
group.appendChild(label);
// Вероятность
var probText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
probText.setAttribute('class', 'graph-node-prob');
probText.setAttribute('y', '24');
probText.setAttribute('font-size', '9');
probText.textContent = Math.round(networkNode.posterior * 100) + '%';
group.appendChild(probText);
this.nodesGroup.appendChild(group);
},
// Иконка типа узла
getTypeIcon: function(type) {
var icons = {
symptom: '◉',
hypothesis: '◈',
outcome: '◆',
opponent: '◐'
};
return icons[type] || '●';
},
// Обновление меток вероятностей
updateNodeLabels: function() {
for (var id in this.nodes) {
var networkNode = Ariadne.Bayesian.Network.getNode(id);
if (networkNode) {
this.nodes[id].posterior = networkNode.posterior;
this.nodes[id].evidence = networkNode.evidence;
}
}
this.render();
},
// === ОБРАБОТЧИКИ МЫШИ ===
setupMouseHandlers: function() {
var self = this;
this.svg.addEventListener('mousedown', function(e) {
var target = e.target.closest('.graph-node');
if (target) {
var nodeId = target.getAttribute('data-node-id');
self.startDrag(nodeId, e);
}
});
this.svg.addEventListener('mousemove', function(e) {
if (self.draggedNode) {
self.drag(e);
}
});
this.svg.addEventListener('mouseup', function() {
self.endDrag();
});
this.svg.addEventListener('mouseleave', function() {
self.endDrag();
});
// Клик по узлу
this.svg.addEventListener('click', function(e) {
var target = e.target.closest('.graph-node');
if (target) {
var nodeId = target.getAttribute('data-node-id');
self.selectNode(nodeId);
}
});
},
// Начало перетаскивания
startDrag: function(nodeId, e) {
this.draggedNode = nodeId;
if (this.nodes[nodeId]) {
this.nodes[nodeId].fixed = true;
}
e.preventDefault();
},
// Перетаскивание
drag: function(e) {
if (!this.draggedNode) return;
var rect = this.svg.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
this.nodes[this.draggedNode].x = x;
this.nodes[this.draggedNode].y = y;
this.render();
},
// Конец перетаскивания
endDrag: function() {
if (this.draggedNode && this.nodes[this.draggedNode]) {
this.nodes[this.draggedNode].fixed = false;
}
this.draggedNode = null;
},
// Выбор узла
selectNode: function(nodeId) {
this.selectedNode = nodeId;
var networkNode = Ariadne.Bayesian.Network.getNode(nodeId);
if (networkNode) {
Ariadne.Toast.info(
networkNode.label,
'Тип: ' + networkNode.type + ' | Вероятность: ' + Math.round(networkNode.posterior * 100) + '%'
);
}
}
};
// ==========================================
// EXPORT
// ==========================================
window.Ariadne.Graph = GraphRenderer;
// Инициализация при загрузке вида графа
Ariadne.EventBus.on('ariadne:viewChanged', function(data) {
if (data.view === 'graph') {
setTimeout(function() {
if (!GraphRenderer.svg) {
GraphRenderer.init('bayesianGraph');
}
GraphRenderer.loadFromNetwork();
}, 100);
}
});
})();
</script>
<script>
/* ============================================
ARIADNE v1.0 — UI Handlers (Block 13/14)
Modal handlers, simulator, mirror, dashboard updates
============================================ */
(function() {
'use strict';
// ==========================================
// DREAM HANDLER — Обработка записи сна
// ==========================================
function handleDreamSave() {
var dreamText = document.getElementById('dreamText').value.trim();
var dreamType = document.getElementById('dreamType').value;
var dreamEmotion = document.getElementById('dreamEmotion').value;
var dreamImportant = document.getElementById('dreamImportant').checked;
if (!dreamText) {
Ariadne.Toast.warning('Пустой сон', 'Опишите хотя бы несколько деталей');
return;
}
// NLP-анализ
var nlpResult = Ariadne.NLP.analyzeText(dreamText);
// Извлекаем выбранные символы
var selectedSymbols = [];
document.querySelectorAll('#dreamSymbols .tag.active').forEach(function(tag) {
selectedSymbols.push(tag.dataset.symbol);
});
// Добавляем выбранные символы к результатам NLP
selectedSymbols.forEach(function(symbolId) {
if (!nlpResult.symbols.find(function(s) { return s.id === symbolId; })) {
var symbolConfig = Ariadne.Config.dreamSymbols.find(function(s) { return s.id === symbolId; });
if (symbolConfig) {
nlpResult.symbols.push({
id: symbolId,
label: symbolConfig.label,
icon: symbolConfig.icon,
confidence: 1.0
});
}
}
});
// Обновляем байесовскую сеть
var updates = Ariadne.Bayesian.Network.updateFromNLP(nlpResult);
// Сохраняем запись
var entry = {
id: Ariadne.Utils.generateId(),
type: 'dream',
text: dreamText,
timestamp: Date.now(),
dreamType: dreamType,
emotion: dreamEmotion,
important: dreamImportant,
symbols: nlpResult.symbols,
emotions: nlpResult.emotions,
opponents: nlpResult.opponents,
domain: nlpResult.domain,
networkUpdates: updates
};
saveEntry(entry);
// Закрываем модалку
Ariadne.Modals.close(document.getElementById('modal-dream'));
// Очищаем форму
document.getElementById('dreamText').value = '';
document.querySelectorAll('#dreamSymbols .tag.active').forEach(function(tag) {
tag.classList.remove('active');
});
// Обновляем дашборд
refreshDashboard();
// Показываем уведомление
Ariadne.Toast.success(
'Сон записан',
'Обновлено ' + updates.length + ' узлов сети. Извлечено ' + nlpResult.symbols.length + ' символов.'
);
}
// ==========================================
// TAROT HANDLER — Обработка расклада Таро
// ==========================================
function handleTarotSave() {
var tarotSystem = document.getElementById('tarotSystem').value;
var tarotSpread = document.getElementById('tarotSpread').value;
var tarotQuestion = document.getElementById('tarotQuestion').value.trim();
var tarotMode = document.querySelector('input[name="tarotMode"]:checked').value;
var tarotImpressions = document.getElementById('tarotImpressions').value.trim();
// Получаем карты из области расклада
var cards = [];
document.querySelectorAll('#tarotSpreadArea .tarot-card').forEach(function(card) {
var cardName = card.dataset.cardName;
if (cardName) {
cards.push(cardName);
}
});
if (cards.length === 0) {
Ariadne.Toast.warning('Нет карт', 'Сначала вытяните карты');
return;
}
// Создаём текст для NLP-анализа
var analysisText = tarotQuestion + ' ' + tarotImpressions + ' Карты: ' + cards.join(', ');
var nlpResult = Ariadne.NLP.analyzeText(analysisText);
// Специальная обработка карт Таро
cards.forEach(function(cardName) {
// Маппинг карт на узлы сети
if (cardName.includes('Башня')) {
Ariadne.Bayesian.Network.setEvidence('symptom_tower', true);
}
// Можно добавить больше маппингов для других карт
});
// Обновляем сеть
var updates = Ariadne.Bayesian.Network.updateFromNLP(nlpResult);
// Сохраняем запись
var entry = {
id: Ariadne.Utils.generateId(),
type: 'tarot',
timestamp: Date.now(),
system: tarotSystem,
spread: tarotSpread,
question: tarotQuestion,
mode: tarotMode,
cards: cards,
impressions: tarotImpressions,
nlpResult: nlpResult,
networkUpdates: updates
};
saveEntry(entry);
// Закрываем модалку
Ariadne.Modals.close(document.getElementById('modal-tarot'));
// Очищаем форму
document.getElementById('tarotQuestion').value = '';
document.getElementById('tarotImpressions').value = '';
document.getElementById('tarotSpreadArea').innerHTML =
'<div class="text-center text-muted" style="padding: var(--space-xl);">' +
'<div style="font-size: 3rem; margin-bottom: var(--space-md);">?</div>' +
'<p>Нажмите «Вытянуть карты», чтобы начать расклад</p>' +
'</div>';
// Обновляем дашборд
refreshDashboard();
Ariadne.Toast.success(
'Расклад сохранён',
cards.length + ' карт зафиксировано. Обновлено ' + updates.length + ' узлов.'
);
}
// ==========================================
// QUESTION HANDLER — Обработка вопроса
// ==========================================
function handleQuestionSave() {
var questionText = document.getElementById('questionText').value.trim();
var questionOpponents = document.getElementById('questionOpponents').value.trim();
var questionTimeframe = document.getElementById('questionTimeframe').value;
var questionConfidence = document.getElementById('questionConfidence').value;
var questionTrack = document.getElementById('questionTrack').checked;
if (!questionText) {
Ariadne.Toast.warning('Пустой вопрос', 'Опишите ситуацию или вопрос');
return;
}
// NLP-анализ
var nlpResult = Ariadne.NLP.analyzeText(questionText + ' ' + questionOpponents);
// Обновляем сеть
var updates = Ariadne.Bayesian.Network.updateFromNLP(nlpResult);
// Создаём прогноз
var prediction = generatePrediction(nlpResult, questionTimeframe);
// Сохраняем запись
var entry = {
id: Ariadne.Utils.generateId(),
type: 'question',
timestamp: Date.now(),
text: questionText,
opponents: questionOpponents,
timeframe: questionTimeframe,
confidence: questionConfidence,
track: questionTrack,
nlpResult: nlpResult,
prediction: prediction,
networkUpdates: updates
};
saveEntry(entry);
// Закрываем модалку
Ariadne.Modals.close(document.getElementById('modal-question'));
// Очищаем форму
document.getElementById('questionText').value = '';
document.getElementById('questionOpponents').value = '';
// Обновляем дашборд
refreshDashboard();
Ariadne.Toast.success(
'Прогноз создан',
'Вероятность: ' + Math.round(prediction.probability * 100) + '% в течение ' + formatTimeframe(questionTimeframe)
);
}
// ==========================================
// SIMULATOR — Симулятор "Что если"
// ==========================================
function handleSimulation() {
var action = document.getElementById('simAction').value;
var context = document.getElementById('simContext').value.trim();
var participants = document.getElementById('simParticipants').value.trim();
// Создаём условия сценария
var conditions = [];
// Маппинг действий на узлы сети
if (action === 'silence') {
conditions.push({ nodeId: 'hypothesis_anxiety', value: true });
} else if (action === 'confront') {
conditions.push({ nodeId: 'hypothesis_social_tension', value: true });
} else if (action === 'compromise') {
conditions.push({ nodeId: 'hypothesis_confidence', value: true });
} else if (action === 'delay') {
// Не меняем ничего, просто смотрим текущее состояние
}
// Запускаем симуляцию
var results = Ariadne.Bayesian.Network.simulate({
action: action,
context: context,
participants: participants,
conditions: conditions
});
// Показываем результаты
renderSimulationResults(results);
Ariadne.Toast.info('Симуляция завершена', 'Изменено ' + results.affectedNodes.length + ' узлов');
}
function renderSimulationResults(results) {
var container = document.querySelector('#view-simulator .card:last-child .card-body');
if (!container) return;
var html = '<div class="mb-lg">';
html += '<h4 style="color: var(--text-primary); margin-bottom: var(--space-md);">Изменённые узлы</h4>';
if (results.affectedNodes.length === 0) {
html += '<p class="text-muted">Сценарий не привёл к значимым изменениям</p>';
} else {
results.affectedNodes.forEach(function(node) {
var changeClass = node.change > 0 ? 'positive' : 'negative';
var changeIcon = node.change > 0 ? '↑' : '↓';
html += '<div class="flex items-center justify-between mb-md" style="padding: var(--space-md); background: var(--bg-deep); border-radius: var(--radius-md);">';
html += '<div>';
html += '<div style="font-weight: 600; color: var(--text-primary);">' + node.label + '</div>';
html += '<div class="text-small text-muted">' + node.type + '</div>';
html += '</div>';
html += '<div style="text-align: right;">';
html += '<div class="mono" style="font-size: 1.25rem; font-weight: 700;">' + Math.round(node.simulated * 100) + '%</div>';
html += '<div class="stat-change ' + changeClass + '">' + changeIcon + ' ' + Math.round(Math.abs(node.change) * 100) + '%</div>';
html += '</div>';
html += '</div>';
});
}
html += '</div>';
html += '<div>';
html += '<h4 style="color: var(--text-primary); margin-bottom: var(--space-md);">Прогнозы исходов</h4>';
for (var outcomeId in results.predictions) {
var prediction = results.predictions[outcomeId];
html += '<div class="mb-md">';
html += '<div class="progress-label">';
html += '<span class="progress-label-text">' + prediction.label + '</span>';
html += '<span class="progress-label-value">' + Math.round(prediction.probability * 100) + '%</span>';
html += '</div>';
html += '<div class="progress">';
html += '<div class="progress-bar" style="width: ' + (prediction.probability * 100) + '%"></div>';
html += '</div>';
html += '</div>';
}
html += '</div>';
container.innerHTML = html;
}
// ==========================================
// MIRROR — Режим "Зеркало"
// ==========================================
function handleMirrorAnalysis() {
var input = document.getElementById('mirrorInput').value.trim();
if (!input) {
Ariadne.Toast.warning('Пустой ввод', 'Опишите человека или ситуацию');
return;
}
// NLP-анализ
var nlpResult = Ariadne.NLP.analyzeText(input);
// Анализ проекций
var insights = analyzeProjections(input, nlpResult);
// Показываем результаты
renderMirrorResults(insights);
Ariadne.Toast.info('Анализ завершён', 'Найдено ' + insights.projections.length + ' проекций');
}
function analyzeProjections(text, nlpResult) {
var insights = {
projections: [],
hiddenFears: [],
recommendations: []
};
// Анализируем эмоциональный тон
if (nlpResult.emotions.valence < -0.3) {
insights.projections.push({
type: 'negative_emotion',
description: 'Вы описываете ситуацию с негативным оттенком (валентность: ' + Math.round(nlpResult.emotions.valence * 100) + '%)',
probability: Math.abs(nlpResult.emotions.valence)
});
}
// Анализируем абсолютные утверждения
if (text.includes('постоянно') || text.includes('всегда') || text.includes('никогда')) {
insights.projections.push({
type: 'absolutism',
description: 'Использование абсолютных утверждений ("постоянно", "всегда") может указывать на когнитивное искажение',
probability: 0.7
});
}
// Анализируем упоминания оппонентов
if (nlpResult.opponents.length > 0) {
nlpResult.opponents.forEach(function(opp) {
insights.projections.push({
type: 'opponent_focus',
description: 'Фокус на ' + opp.name + ' может отражать вашу внутреннюю тревогу, а не объективное поведение оппонента',
probability: 0.6
});
});
}
// Определяем скрытые страхи
if (nlpResult.emotions.primary === 'anxiety') {
insights.hiddenFears.push('Страх потери контроля');
}
if (nlpResult.emotions.primary === 'fear') {
insights.hiddenFears.push('Страх отвержения или конфликта');
}
if (nlpResult.emotions.primary === 'sadness') {
insights.hiddenFears.push('Страх одиночества');
}
// Рекомендации
if (insights.projections.length > 0) {
insights.recommendations.push('Попробуйте переформулировать описание, используя "я-сообщения" вместо обвинений');
insights.recommendations.push('Запишите 3 факта о ситуации без эмоциональной окраски');
}
return insights;
}
function renderMirrorResults(insights) {
var container = document.querySelector('#view-mirror .card:last-child .card-body');
if (!container) return;
var html = '';
if (insights.projections.length === 0 && insights.hiddenFears.length === 0) {
html = '<div class="text-center text-muted" style="padding: var(--space-xl);">';
html += '<div style="font-size: 3rem; margin-bottom: var(--space-md);">✨</div>';
html += '<p>Явных проекций не обнаружено. Ваше восприятие кажется сбалансированным.</p>';
html += '</div>';
} else {
// Проекции
if (insights.projections.length > 0) {
html += '<div class="mb-lg">';
html += '<h4 style="color: var(--accent-violet); margin-bottom: var(--space-md);">? Обнаруженные проекции</h4>';
insights.projections.forEach(function(proj) {
html += '<div class="mb-md" style="padding: var(--space-md); background: var(--bg-deep); border-radius: var(--radius-md); border-left: 3px solid var(--accent-violet);">';
html += '<div style="color: var(--text-primary); margin-bottom: var(--space-xs);">' + proj.description + '</div>';
html += '<div class="text-small text-muted">Вероятность: ' + Math.round(proj.probability * 100) + '%</div>';
html += '</div>';
});
html += '</div>';
}
// Скрытые страхи
if (insights.hiddenFears.length > 0) {
html += '<div class="mb-lg">';
html += '<h4 style="color: var(--accent-rose); margin-bottom: var(--space-md);">? Возможные скрытые страхи</h4>';
insights.hiddenFears.forEach(function(fear) {
html += '<div class="tag tag-rose mb-sm" style="display: inline-block; margin-right: var(--space-sm);">' + fear + '</div>';
});
html += '</div>';
}
// Рекомендации
if (insights.recommendations.length > 0) {
html += '<div>';
html += '<h4 style="color: var(--accent-cyan); margin-bottom: var(--space-md);">? Рекомендации</h4>';
insights.recommendations.forEach(function(rec) {
html += '<div class="mb-sm" style="padding: var(--space-sm) var(--space-md); background: rgba(94, 234, 212, 0.1); border-radius: var(--radius-sm); color: var(--text-secondary);">';
html += '→ ' + rec;
html += '</div>';
});
html += '</div>';
}
}
container.innerHTML = html;
}
// ==========================================
// TAROT DRAW — Вытягивание карт
// ==========================================
function handleDrawCards() {
var spreadType = document.getElementById('tarotSpread').value;
var cardCount = spreadType === 'celtic' ? 10 : spreadType === 'horseshoe' ? 7 : spreadType === '3cards' ? 3 : 1;
// Базовый набор карт (упрощённо)
var majorArcana = [
'Шут', 'Маг', 'Жрица', 'Императрица', 'Император', 'Иерофант',
'Влюблённые', 'Колесница', 'Сила', 'Отшельник', 'Колесо Фортуны',
'Справедливость', 'Повешенный', 'Смерть', 'Умеренность', 'Дьявол',
'Башня', 'Звезда', 'Луна', 'Солнце', 'Суд', 'Мир'
];
var spreadArea = document.getElementById('tarotSpreadArea');
spreadArea.innerHTML = '';
// Выбираем случайные карты
var selectedCards = [];
while (selectedCards.length < cardCount) {
var randomCard = majorArcana[Math.floor(Math.random() * majorArcana.length)];
if (!selectedCards.includes(randomCard)) {
selectedCards.push(randomCard);
}
}
// Создаём карточки
selectedCards.forEach(function(cardName, index) {
var card = document.createElement('div');
card.className = 'tarot-card';
card.dataset.cardName = cardName;
card.innerHTML =
'<div class="tarot-card-inner">' +
'<div class="tarot-card-face tarot-card-back">?</div>' +
'<div class="tarot-card-face tarot-card-front" style="font-size: 1rem; padding: var(--space-md); text-align: center;">' +
'<div style="font-size: 2rem; margin-bottom: var(--space-sm);">' + getCardIcon(cardName) + '</div>' +
'<div style="font-family: var(--font-display); font-size: 0.875rem;">' + cardName + '</div>' +
'</div>' +
'</div>';
spreadArea.appendChild(card);
// Анимация переворота с задержкой
setTimeout(function() {
card.classList.add('flipped');
}, 200 + index * 150);
});
}
function getCardIcon(cardName) {
var icons = {
'Шут': '?',
'Маг': '?',
'Жрица': '?',
'Императрица': '?',
'Император': '?️',
'Иерофант': '⛪',
'Влюблённые': '?',
'Колесница': '?',
'Сила': '?',
'Отшельник': '?️',
'Колесо Фортуны': '?',
'Справедливость': '⚖️',
'Повешенный': '?',
'Смерть': '?',
'Умеренность': '⚗️',
'Дьявол': '?',
'Башня': '?',
'Звезда': '⭐',
'Луна': '?',
'Солнце': '☀️',
'Суд': '?',
'Мир': '?'
};
return icons[cardName] || '?';
}
// ==========================================
// DASHBOARD UPDATE — Обновление дашборда
// ==========================================
function refreshDashboard() {
var stats = Ariadne.Bayesian.Network.getStats();
var entries = loadEntries();
// Обновляем статистические карточки
var anxietyNode = Ariadne.Bayesian.Network.getNode('hypothesis_anxiety');
var confidenceNode = Ariadne.Bayesian.Network.getNode('hypothesis_confidence');
if (anxietyNode) {
var anxietyValue = Math.round(anxietyNode.posterior * 100);
document.querySelector('#view-dashboard .stat-card:nth-child(1) .stat-value').textContent = anxietyValue + '%';
// Обновляем прогресс-бар
var anxietyBar = document.querySelector('#view-dashboard .progress:nth-child(2) .progress-bar');
if (anxietyBar) anxietyBar.style.width = anxietyValue + '%';
}
if (confidenceNode) {
var confidenceValue = Math.round(confidenceNode.posterior * 100);
document.querySelector('#view-dashboard .stat-card:nth-child(2) .stat-value').textContent = confidenceValue + '%';
var confidenceBar = document.querySelector('#view-dashboard .progress:nth-child(4) .progress-bar');
if (confidenceBar) confidenceBar.style.width = confidenceValue + '%';
}
// Обновляем количество узлов
document.querySelector('#view-dashboard .stat-card:nth-child(3) .stat-value').textContent = stats.totalNodes;
// Обновляем количество записей
var weekEntries = entries.filter(function(e) {
return Date.now() - e.timestamp < 7 * 24 * 60 * 60 * 1000;
});
document.querySelector('#view-dashboard .stat-card:nth-child(4) .stat-value').textContent = weekEntries.length;
}
// ==========================================
// HELPERS — Вспомогательные функции
// ==========================================
function saveEntry(entry) {
var entries = loadEntries();
entries.push(entry);
Ariadne.Storage.set('entries', entries);
Ariadne.Bayesian.Network.save();
}
function loadEntries() {
return Ariadne.Storage.get('entries', []);
}
function generatePrediction(nlpResult, timeframe) {
// Упрощённая логика генерации прогноза
var baseProbability = 0.5;
// Корректируем на основе эмоций
if (nlpResult.emotions.valence > 0.3) baseProbability += 0.2;
if (nlpResult.emotions.valence < -0.3) baseProbability -= 0.2;
// Корректируем на основе домена
if (nlpResult.domain.primary === 'career') baseProbability += 0.1;
return {
probability: Math.max(0.1, Math.min(0.9, baseProbability)),
timeframe: timeframe,
confidence: nlpResult.confidence
};
}
function formatTimeframe(timeframe) {
var formats = {
'3days': '3 дня',
'1week': '1 неделю',
'1month': '1 месяц',
'3months': '3 месяца'
};
return formats[timeframe] || timeframe;
}
// ==========================================
// EVENT LISTENERS — Подключение обработчиков
// ==========================================
function initEventListeners() {
// Сохранение сна
document.getElementById('saveDream').addEventListener('click', handleDreamSave);
// Сохранение расклада
document.getElementById('saveTarot').addEventListener('click', handleTarotSave);
// Вытягивание карт
document.getElementById('drawCards').addEventListener('click', handleDrawCards);
// Сохранение вопроса
document.getElementById('saveQuestion').addEventListener('click', handleQuestionSave);
// Запуск симуляции
document.getElementById('runSimulation').addEventListener('click', handleSimulation);
// Запуск анализа зеркала
document.getElementById('runMirror').addEventListener('click', handleMirrorAnalysis);
// Быстрые действия на дашборде
document.getElementById('quickEntry').addEventListener('click', function() {
Ariadne.Modals.open('modal-question');
});
document.getElementById('quickJournal').addEventListener('click', function() {
Ariadne.Router.switchView('journal');
});
}
// ==========================================
// INIT — Инициализация
// ==========================================
initEventListeners();
console.log('%c? UI Handlers initialized', 'color: #d4af37; font-size: 12px;');
})();
</script>
<script>
/* ============================================
ARIADNE v1.0 — Final Initialization (Block 14/14)
App bootstrap, demo data, first-run setup
============================================ */
(function() {
'use strict';
// ==========================================
// DEMO DATA — Демо-записи для первого запуска
// ==========================================
function createDemoData() {
var now = Date.now();
var demoEntries = [
{
id: 'demo_dream_1',
type: 'dream',
text: 'Мне снился ураган, я стоял на берегу океана. Волны были огромные, чёрные. Я потерял паспорт и не мог найти дорогу домой. Потом появился бывший коллега Иван и сказал, что всё будет хорошо.',
timestamp: now - 2 * 60 * 60 * 1000, // 2 часа назад
dreamType: 'ordinary',
emotion: 'anxious',
important: true,
symbols: [
{ id: 'water', label: 'Вода', icon: '?', confidence: 0.9 },
{ id: 'stranger', label: 'Незнакомец', icon: '?', confidence: 0.7 }
],
emotions: {
valence: -0.4,
arousal: 0.8,
primary: 'anxiety',
intensity: 0.32
},
opponents: [
{ name: 'Иван', role: 'colleague' }
],
domain: { primary: 'career', label: 'Карьера', confidence: 0.7 }
},
{
id: 'demo_tarot_1',
type: 'tarot',
timestamp: now - 24 * 60 * 60 * 1000, // 1 день назад
system: 'waite',
spread: 'celtic',
question: 'Как пройдут переговоры с заказчиком?',
mode: 'random',
cards: ['Башня', 'Звезда'],
impressions: 'Башня напугала, но Звезда дала надежду',
nlpResult: {
symbols: [],
emotions: { valence: -0.2, arousal: 0.6, primary: 'confusion' },
opponents: [],
domain: { primary: 'career', label: 'Карьера', confidence: 0.8 }
}
},
{
id: 'demo_question_1',
type: 'question',
timestamp: now - 3 * 24 * 60 * 60 * 1000, // 3 дня назад
text: 'Стоит ли мне менять работу? Чувствую, что застрял на месте, но боюсь неизвестности.',
opponents: 'Иван Петрович, HR-менеджер',
timeframe: '1month',
confidence: 'medium',
track: true,
nlpResult: {
symbols: [],
emotions: { valence: -0.3, arousal: 0.5, primary: 'anxiety' },
opponents: [
{ name: 'Иван Петрович', role: 'boss' },
{ name: 'HR-менеджер', role: 'unknown', isGeneric: true }
],
domain: { primary: 'career', label: 'Карьера', confidence: 0.9 }
},
prediction: {
probability: 0.61,
timeframe: '1month',
confidence: 0.75
}
},
{
id: 'demo_confirmation_1',
type: 'confirmation',
timestamp: now - 5 * 24 * 60 * 60 * 1000, // 5 дней назад
text: 'Встреча с Анной прошла хорошо, она действительно поддержала меня',
confirmed: true,
originalPrediction: 0.73
}
];
Ariadne.Storage.set('entries', demoEntries);
console.log('%c✨ Demo data created: ' + demoEntries.length + ' entries',
'color: #34d399; font-size: 12px;');
}
// ==========================================
// FIRST RUN CHECK — Проверка первого запуска
// ==========================================
function isFirstRun() {
return !Ariadne.Storage.get('initialized', false);
}
function markAsInitialized() {
Ariadne.Storage.set('initialized', true);
Ariadne.Storage.set('version', Ariadne.Config.version);
}
// ==========================================
// WELCOME MESSAGE — Приветственное сообщение
// ==========================================
function showWelcomeMessage() {
setTimeout(function() {
Ariadne.Toast.show({
type: 'info',
title: '?️ Добро пожаловать в Ariadne',
message: 'Ваша байесовская сеть готова к работе. Начните с записи сна или расклада.',
duration: 6000
});
}, 1000);
}
// ==========================================
// LOAD SAVED DATA — Загрузка сохранённых данных
// ==========================================
function loadSavedData() {
// Загружаем байесовскую сеть
var networkLoaded = Ariadne.Bayesian.Network.load();
if (!networkLoaded) {
console.log('%c? No saved network found, using default',
'color: #fbbf24; font-size: 12px;');
} else {
console.log('%c? Saved network loaded',
'color: #34d399; font-size: 12px;');
}
// Загружаем записи
var entries = Ariadne.Storage.get('entries', []);
console.log('%c? Loaded ' + entries.length + ' entries',
'color: #60a5fa; font-size: 12px;');
return {
networkLoaded: networkLoaded,
entriesCount: entries.length
};
}
// ==========================================
// UPDATE JOURNAL — Обновление журнала событий
// ==========================================
function updateJournal() {
var entries = Ariadne.Storage.get('entries', []);
var journalContainer = document.querySelector('#view-journal .card-body');
if (!journalContainer || entries.length === 0) return;
// Сортируем по времени (новые сверху)
entries.sort(function(a, b) { return b.timestamp - a.timestamp; });
var html = '';
entries.slice(0, 10).forEach(function(entry) {
var icon = entry.type === 'dream' ? '?' :
entry.type === 'tarot' ? '?' :
entry.type === 'question' ? '❓' : '✅';
var title = entry.type === 'dream' ? 'Сон: ' + (entry.text.substring(0, 40) + '...') :
entry.type === 'tarot' ? 'Расклад: ' + (entry.question || 'Без вопроса') :
entry.type === 'question' ? 'Вопрос: ' + (entry.text.substring(0, 40) + '...') :
'Подтверждение: ' + (entry.text.substring(0, 40) + '...');
var time = Ariadne.Utils.timeAgo(new Date(entry.timestamp));
html += '<div class="flex gap-md mb-lg" style="align-items: flex-start;">';
html += '<div style="font-size: 2rem;">' + icon + '</div>';
html += '<div style="flex: 1;">';
html += '<div class="flex items-center justify-between mb-sm">';
html += '<div style="font-weight: 600; color: var(--text-primary);">' + title + '</div>';
html += '<span class="text-small text-muted">' + time + '</span>';
html += '</div>';
if (entry.symbols && entry.symbols.length > 0) {
html += '<div class="flex gap-sm mt-sm">';
entry.symbols.slice(0, 3).forEach(function(sym) {
html += '<span class="tag tag-cyan">' + sym.icon + ' ' + sym.label + '</span>';
});
html += '</div>';
}
if (entry.cards && entry.cards.length > 0) {
html += '<div class="flex gap-sm mt-sm">';
entry.cards.slice(0, 3).forEach(function(card) {
html += '<span class="tag tag-gold">' + card + '</span>';
});
html += '</div>';
}
html += '</div>';
html += '</div>';
html += '<div class="divider"></div>';
});
journalContainer.innerHTML = html;
}
// ==========================================
// AUTO-SAVE — Автосохранение сети
// ==========================================
function setupAutoSave() {
Ariadne.EventBus.on('network:updated', Ariadne.Utils.debounce(function() {
Ariadne.Bayesian.Network.save();
}, 2000));
Ariadne.EventBus.on('network:evidence', Ariadne.Utils.debounce(function() {
Ariadne.Bayesian.Network.save();
}, 2000));
}
// ==========================================
// KEYBOARD SHORTCUTS — Горячие клавиши
// ==========================================
function setupKeyboardShortcuts() {
document.addEventListener('keydown', function(e) {
// Ctrl/Cmd + D — новый сон
if ((e.ctrlKey || e.metaKey) && e.key === 'd') {
e.preventDefault();
Ariadne.Modals.open('modal-dream');
}
// Ctrl/Cmd + T — новый расклад
if ((e.ctrlKey || e.metaKey) && e.key === 't') {
e.preventDefault();
Ariadne.Modals.open('modal-tarot');
}
// Ctrl/Cmd + Q — новый вопрос
if ((e.ctrlKey || e.metaKey) && e.key === 'q') {
e.preventDefault();
Ariadne.Modals.open('modal-question');
}
// Ctrl/Cmd + G — граф
if ((e.ctrlKey || e.metaKey) && e.key === 'g') {
e.preventDefault();
Ariadne.Router.switchView('graph');
}
});
}
// ==========================================
// PERFORMANCE MONITOR — Мониторинг производительности
// ==========================================
function logPerformance() {
var storageSize = Ariadne.Storage.getSize();
var entries = Ariadne.Storage.get('entries', []);
var networkStats = Ariadne.Bayesian.Network.getStats();
console.log('%c? Performance Report', 'color: #d4af37; font-size: 14px; font-weight: bold;');
console.log(' Storage size: ' + (storageSize / 1024).toFixed(2) + ' KB');
console.log(' Entries: ' + entries.length);
console.log(' Network nodes: ' + networkStats.totalNodes);
console.log(' Network edges: ' + networkStats.totalEdges);
console.log(' Active evidence: ' + networkStats.activeEvidence);
}
// ==========================================
// MAIN INIT — Главная функция инициализации
// ==========================================
function initApp() {
console.log('%c?️ Ariadne v' + Ariadne.Config.version + ' — Starting initialization...',
'color: #d4af37; font-size: 16px; font-weight: bold;');
var startTime = Date.now();
// 1. Проверяем первый запуск
var firstRun = isFirstRun();
if (firstRun) {
console.log('%c? First run detected — creating demo data',
'color: #34d399; font-size: 12px;');
createDemoData();
markAsInitialized();
}
// 2. Загружаем сохранённые данные
var loadData = loadSavedData();
// 3. Обновляем журнал
updateJournal();
// 4. Настраиваем автосохранение
setupAutoSave();
// 5. Настраиваем горячие клавиши
setupKeyboardShortcuts();
// 6. Показываем приветственное сообщение (только при первом запуске)
if (firstRun) {
showWelcomeMessage();
}
// 7. Обновляем дашборд
if (typeof refreshDashboard === 'function') {
refreshDashboard();
}
// 8. Логируем производительность
var initTime = Date.now() - startTime;
console.log('%c✅ Initialization complete in ' + initTime + 'ms',
'color: #34d399; font-size: 12px; font-weight: bold;');
logPerformance();
// 9. Генерируем событие готовности
Ariadne.EventBus.emit('ariadne:ready', {
timestamp: Date.now(),
firstRun: firstRun,
initTime: initTime
});
}
// ==========================================
// RUN — Запуск при загрузке DOM
// ==========================================
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initApp);
} else {
// DOM уже загружен
initApp();
}
// ==========================================
// GLOBAL API — Глобальный API для отладки
// ==========================================
window.AriadneDebug = {
reset: function() {
if (confirm('Вы уверены? Все данные будут удалены.')) {
Ariadne.Storage.clear();
location.reload();
}
},
export: function() {
var data = {
entries: Ariadne.Storage.get('entries', []),
network: Ariadne.Storage.get('network', null),
exportedAt: Date.now()
};
var blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'ariadne-backup-' + new Date().toISOString().split('T')[0] + '.json';
a.click();
URL.revokeObjectURL(url);
Ariadne.Toast.success('Экспорт завершён', 'Файл сохранён');
},
stats: function() {
logPerformance();
}
};
console.log('%c? Debug API available: AriadneDebug.reset() | .export() | .stats()',
'color: #60a5fa; font-size: 11px;');
})();
</script>
<style>
/* ============================================
ARIADNE v1.0 — Layout Override (Block 15/15)
Переопределение конфликтующих стилей +
расширение и перераспределение элементов
============================================ */
/* === 1. ПЕРЕБИВАЕМ ЧУЖИЕ СТИЛИ BODY === */
body.ariadne-active,
body {
background: var(--bg-void) !important;
background-color: var(--bg-void) !important;
background-image:
radial-gradient(ellipse at top left, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(94, 234, 212, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at center, rgba(212, 175, 55, 0.03) 0%, transparent 70%) !important;
background-position: 0 0, 0 0, 0 0 !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
color: var(--text-primary) !important;
font-family: var(--font-body) !important;
font-size: 16px !important;
line-height: 1.6 !important;
}
/* === 2. УБИРАЕМ ОГРАНИЧЕНИЕ ШИРИНЫ === */
.global-widther,
.global-widther.ariadne-override {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* === 3. УВЕЛИЧИВАЕМ STAT-VALUE В 2 РАЗА === */
.stat-value {
font-family: var(--font-mono) !important;
font-size: 5rem !important; /* было 2.5rem → стало 5rem */
font-weight: 700 !important;
background: linear-gradient(135deg, var(--accent-gold), var(--accent-cyan)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
line-height: 1 !important;
margin-bottom: var(--space-md) !important;
letter-spacing: -0.03em !important;
}
.stat-label {
font-size: 1rem !important;
letter-spacing: 0.15em !important;
margin-bottom: var(--space-md) !important;
}
.stat-change {
font-size: 1rem !important;
margin-top: var(--space-sm) !important;
}
/* === 4. РАСШИРЯЕМ КАРТОЧКИ В 2-3 РАЗА === */
.stat-card {
padding: var(--space-2xl) var(--space-xl) !important; /* было 24px → 64px/40px */
min-height: 240px !important;
border-radius: var(--radius-xl) !important;
border-width: 2px !important;
}
.card {
padding: var(--space-xl) !important; /* было 24px → 40px */
border-radius: var(--radius-xl) !important;
border-width: 2px !important;
}
.card-title {
font-size: 1.5rem !important;
}
.card-icon {
font-size: 2rem !important;
}
/* === 5. ПЕРЕРАСПРЕДЕЛЕНИЕ ПО ЭКРАНУ === */
/* Главный контейнер — на всю ширину */
.app-main {
padding: var(--space-2xl) !important;
max-width: 100% !important;
}
/* Заголовок — растягиваем на всю ширину */
.main-header {
margin-bottom: var(--space-2xl) !important;
padding: 0 var(--space-lg) !important;
}
.main-title {
font-size: clamp(2.5rem, 5vw, 4rem) !important;
}
/* === 6. АСИММЕТРИЧНАЯ СЕТКА СТАТИСТИКИ === */
/* 4 карточки: 2 слева, 2 справа, с большим промежутком */
#view-dashboard > .grid.grid-cols-4 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--space-2xl) !important;
max-width: 1600px !important;
margin: 0 auto var(--space-2xl) auto !important;
padding: 0 var(--space-xl) !important;
}
/* Первая и вторая карточки — прижаты к левому краю */
#view-dashboard > .grid.grid-cols-4 > .stat-card:nth-child(1) {
justify-self: start !important;
width: 100% !important;
}
#view-dashboard > .grid.grid-cols-4 > .stat-card:nth-child(2) {
justify-self: end !important;
width: 100% !important;
}
/* Третья и четвёртая — тоже по краям, но смещены */
#view-dashboard > .grid.grid-cols-4 > .stat-card:nth-child(3) {
justify-self: start !important;
width: 100% !important;
}
#view-dashboard > .grid.grid-cols-4 > .stat-card:nth-child(4) {
justify-self: end !important;
width: 100% !important;
}
/* === 7. ОСНОВНЫЕ ВИДЖЕТЫ — РАЗНОСИМ ПО КРАЯМ === */
#view-dashboard > .grid.grid-cols-2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--space-2xl) !important;
max-width: 1800px !important;
margin: 0 auto var(--space-2xl) auto !important;
padding: 0 var(--space-xl) !important;
}
/* Левый виджет — прижат к левому краю */
#view-dashboard > .grid.grid-cols-2 > .card:first-child {
justify-self: start !important;
width: 100% !important;
max-width: 700px !important;
}
/* Правый виджет — прижат к правому краю */
#view-dashboard > .grid.grid-cols-2 > .card:last-child {
justify-self: end !important;
width: 100% !important;
max-width: 700px !important;
}
/* === 8. ПРОГРЕСС-БАРЫ — БОЛЬШЕ И ЯРЧЕ === */
.progress {
height: 14px !important;
border-radius: var(--radius-md) !important;
margin-bottom: var(--space-lg) !important;
}
.progress-label {
font-size: 1rem !important;
margin-bottom: var(--space-sm) !important;
}
.progress-label-value {
font-size: 1.125rem !important;
font-weight: 700 !important;
}
/* === 9. АКТИВНЫЕ ПРОГНОЗЫ — КРУПНЫЕ БЛОКИ === */
#view-dashboard .card-body > .flex.items-center {
padding: var(--space-lg) !important;
margin-bottom: var(--space-lg) !important;
border-radius: var(--radius-lg) !important;
}
#view-dashboard .card-body > .flex.items-center .mono {
font-size: 2rem !important;
}
/* === 10. ПОСЛЕДНИЕ СОБЫТИЯ — ВНИЗ ЭКРАНА === */
#view-dashboard > .grid.grid-cols-2:last-of-type {
margin-top: var(--space-2xl) !important;
padding-bottom: var(--space-2xl) !important;
}
/* === 11. КНОПКИ — КРУПНЕЕ === */
.btn {
padding: var(--space-md) var(--space-xl) !important;
font-size: 1rem !important;
border-radius: var(--radius-md) !important;
}
.btn-primary {
font-size: 1.0625rem !important;
padding: var(--space-md) var(--space-xl) !important;
}
/* === 12. ТЕГИ — ЧИТАЕМЫЕ === */
.tag {
padding: var(--space-sm) var(--space-md) !important;
font-size: 0.9375rem !important;
}
/* === 13. HEADER — ШИРЕ === */
.app-header {
padding: var(--space-lg) var(--space-2xl) !important;
}
.logo-text {
font-size: 2rem !important;
}
.logo-subtitle {
font-size: 0.875rem !important;
}
/* === 14. SIDEBAR — ШИРЕ === */
.app-sidebar {
width: 320px !important;
padding: var(--space-xl) var(--space-lg) !important;
}
.menu-item {
padding: var(--space-lg) !important;
font-size: 1.0625rem !important;
}
.menu-icon {
font-size: 1.75rem !important;
}
/* === 15. СОВЕТ СИСТЕМЫ — ВЫДЕЛЯЕМ === */
#view-dashboard .card[style*="border-color: var(--border-strong)"] {
padding: var(--space-2xl) !important;
border-width: 2px !important;
}
#view-dashboard .card[style*="border-color: var(--border-strong)"] p {
font-size: 1.375rem !important;
line-height: 1.8 !important;
}
/* === 16. АДАПТИВ ДЛЯ МАЛЫХ ЭКРАНОВ === */
@media (max-width: 1200px) {
.stat-value {
font-size: 3.5rem !important;
}
#view-dashboard > .grid.grid-cols-4 {
grid-template-columns: 1fr !important;
}
#view-dashboard > .grid.grid-cols-4 > .stat-card {
justify-self: stretch !important;
max-width: none !important;
}
}
@media (max-width: 768px) {
.stat-value {
font-size: 3rem !important;
}
.stat-card {
min-height: 180px !important;
padding: var(--space-xl) var(--space-lg) !important;
}
#view-dashboard > .grid.grid-cols-2 {
grid-template-columns: 1fr !important;
}
#view-dashboard > .grid.grid-cols-2 > .card {
justify-self: stretch !important;
max-width: none !important;
}
.app-sidebar {
width: 280px !important;
}
}
</style>
<script>
(function() {
document.body.classList.add('ariadne-active');
// Переопределяем global-widther если он есть
var widther = document.querySelector('.global-widther');
if (widther) {
widther.classList.add('ariadne-override');
}
})();
</script>
2026-08-24T09:52:59Z
https://pandoraburo.ru/ssl/layouts/a9/8c8/4b7781a4db8477265eb51f31892.png
1592962
https://www.pandoraburo.ru/