cc4143d3ea
Adds a 5-step negative-mood reflection flow with an evidence-examination step, Socratic templated questions that back-reference prior answers, and a deterministic cognitive-distortion detector that routes the perspective- check prompt to a distortion-specific reframe. Includes CBT plan docs, flowchart, stats research notes, and MCP config. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1016 lines
28 KiB
HTML
1016 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Guided Reflection Flow — Reflect App</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,500;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg: #0c0c0f;
|
||
--surface: #16161b;
|
||
--surface-raised: #1e1e25;
|
||
--border: #2a2a35;
|
||
--text: #e8e6f0;
|
||
--text-dim: #8a889a;
|
||
--text-muted: #5a586a;
|
||
|
||
/* Mood path colors */
|
||
--positive: #4ade80;
|
||
--positive-bg: rgba(74, 222, 128, 0.08);
|
||
--positive-border: rgba(74, 222, 128, 0.2);
|
||
--neutral: #a78bfa;
|
||
--neutral-bg: rgba(167, 139, 250, 0.08);
|
||
--neutral-border: rgba(167, 139, 250, 0.2);
|
||
--negative: #f97066;
|
||
--negative-bg: rgba(249, 112, 102, 0.08);
|
||
--negative-border: rgba(249, 112, 102, 0.2);
|
||
|
||
/* Accents */
|
||
--gold: #f5c842;
|
||
--gold-bg: rgba(245, 200, 66, 0.06);
|
||
--blue: #60a5fa;
|
||
--blue-bg: rgba(96, 165, 250, 0.06);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'DM Sans', sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ─── Noise texture overlay ─── */
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
opacity: 0.025;
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 60px 32px 100px;
|
||
}
|
||
|
||
/* ─── Header ─── */
|
||
header {
|
||
text-align: center;
|
||
margin-bottom: 64px;
|
||
animation: fadeUp 0.8s ease both;
|
||
}
|
||
|
||
header .badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
background: var(--gold-bg);
|
||
border: 1px solid rgba(245, 200, 66, 0.15);
|
||
border-radius: 100px;
|
||
padding: 6px 14px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: clamp(28px, 4vw, 40px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
header p {
|
||
font-size: 16px;
|
||
color: var(--text-dim);
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ─── Legend ─── */
|
||
.legend {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 32px;
|
||
margin-bottom: 56px;
|
||
flex-wrap: wrap;
|
||
animation: fadeUp 0.8s ease 0.15s both;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.legend-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* ─── Entry Point ─── */
|
||
.entry-point {
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
animation: fadeUp 0.8s ease 0.25s both;
|
||
}
|
||
|
||
.entry-node {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: var(--surface-raised);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 16px 28px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.entry-node .icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* ─── Connector Lines ─── */
|
||
.connector {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 4px 0;
|
||
animation: fadeUp 0.6s ease 0.3s both;
|
||
}
|
||
|
||
.connector .line {
|
||
width: 2px;
|
||
height: 32px;
|
||
background: var(--border);
|
||
border-radius: 1px;
|
||
}
|
||
|
||
.connector-branch {
|
||
position: relative;
|
||
height: 48px;
|
||
margin: 0 auto;
|
||
max-width: 900px;
|
||
animation: fadeUp 0.6s ease 0.35s both;
|
||
}
|
||
|
||
.connector-branch::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
width: 2px;
|
||
height: 20px;
|
||
background: var(--border);
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.connector-branch::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 20px;
|
||
left: calc(16.66% + 16px);
|
||
right: calc(16.66% + 16px);
|
||
height: 2px;
|
||
background: var(--border);
|
||
}
|
||
|
||
/* ─── Decision Diamond ─── */
|
||
.decision {
|
||
text-align: center;
|
||
margin: 8px 0;
|
||
animation: fadeUp 0.6s ease 0.3s both;
|
||
}
|
||
|
||
.diamond {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: auto;
|
||
padding: 12px 24px;
|
||
background: var(--surface);
|
||
border: 1.5px solid var(--gold);
|
||
border-radius: 12px;
|
||
transform: none;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--gold);
|
||
letter-spacing: 0.02em;
|
||
box-shadow: 0 0 20px rgba(245, 200, 66, 0.06);
|
||
}
|
||
|
||
/* ─── Three Paths ─── */
|
||
.paths {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
animation: fadeUp 0.8s ease 0.4s both;
|
||
}
|
||
|
||
.path {
|
||
border-radius: 20px;
|
||
border: 1px solid;
|
||
overflow: hidden;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.path:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.path.positive {
|
||
background: var(--positive-bg);
|
||
border-color: var(--positive-border);
|
||
}
|
||
.path.positive:hover { box-shadow: 0 8px 32px rgba(74, 222, 128, 0.08); }
|
||
|
||
.path.neutral {
|
||
background: var(--neutral-bg);
|
||
border-color: var(--neutral-border);
|
||
}
|
||
.path.neutral:hover { box-shadow: 0 8px 32px rgba(167, 139, 250, 0.08); }
|
||
|
||
.path.negative {
|
||
background: var(--negative-bg);
|
||
border-color: var(--negative-border);
|
||
}
|
||
.path.negative:hover { box-shadow: 0 8px 32px rgba(249, 112, 102, 0.08); }
|
||
|
||
.path-header {
|
||
padding: 20px 20px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.path-header .mood-icon {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.path-header .path-title {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.path-header .path-technique {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
opacity: 0.6;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.path-moods {
|
||
padding: 6px 20px 16px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.path-steps {
|
||
padding: 0 16px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* ─── Individual Step ─── */
|
||
.step {
|
||
background: rgba(0, 0, 0, 0.25);
|
||
border-radius: 12px;
|
||
padding: 12px 14px;
|
||
position: relative;
|
||
}
|
||
|
||
.step-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.positive .step-label { color: var(--positive); }
|
||
.neutral .step-label { color: var(--neutral); }
|
||
.negative .step-label { color: var(--negative); }
|
||
|
||
.step-text {
|
||
font-size: 12.5px;
|
||
color: var(--text-dim);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.step-text em {
|
||
font-style: italic;
|
||
color: var(--text);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.step-text code {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10.5px;
|
||
background: rgba(255,255,255,0.06);
|
||
padding: 1px 5px;
|
||
border-radius: 4px;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.step .tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
padding: 3px 8px;
|
||
border-radius: 6px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.tag.new {
|
||
color: var(--gold);
|
||
background: rgba(245, 200, 66, 0.1);
|
||
border: 1px solid rgba(245, 200, 66, 0.15);
|
||
}
|
||
|
||
.tag.adaptive {
|
||
color: var(--blue);
|
||
background: var(--blue-bg);
|
||
border: 1px solid rgba(96, 165, 250, 0.15);
|
||
}
|
||
|
||
/* ─── Chips ─── */
|
||
.chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid rgba(255,255,255,0.04);
|
||
}
|
||
|
||
.chip {
|
||
font-size: 9.5px;
|
||
font-weight: 500;
|
||
padding: 3px 8px;
|
||
border-radius: 100px;
|
||
white-space: nowrap;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.positive .chip {
|
||
color: var(--positive);
|
||
background: rgba(74, 222, 128, 0.08);
|
||
border: 1px solid rgba(74, 222, 128, 0.12);
|
||
}
|
||
|
||
.neutral .chip {
|
||
color: var(--neutral);
|
||
background: rgba(167, 139, 250, 0.08);
|
||
border: 1px solid rgba(167, 139, 250, 0.12);
|
||
}
|
||
|
||
.negative .chip {
|
||
color: var(--negative);
|
||
background: rgba(249, 112, 102, 0.08);
|
||
border: 1px solid rgba(249, 112, 102, 0.12);
|
||
}
|
||
|
||
.chips-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 8px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
width: 100%;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.chips .more {
|
||
font-size: 9px;
|
||
color: var(--text-muted);
|
||
padding: 3px 6px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.no-chips {
|
||
font-size: 9.5px;
|
||
color: var(--text-muted);
|
||
font-style: italic;
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid rgba(255,255,255,0.04);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* ─── Step connector dots ─── */
|
||
.step-connector {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.step-connector .dots {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 3px;
|
||
}
|
||
|
||
.step-connector .dot {
|
||
width: 3px;
|
||
height: 3px;
|
||
border-radius: 50%;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.positive .step-connector .dot { background: var(--positive); }
|
||
.neutral .step-connector .dot { background: var(--neutral); }
|
||
.negative .step-connector .dot { background: var(--negative); }
|
||
|
||
/* ─── Distortion Branch ─── */
|
||
.distortion-branch {
|
||
background: rgba(0, 0, 0, 0.35);
|
||
border: 1px dashed rgba(249, 112, 102, 0.2);
|
||
border-radius: 12px;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.distortion-branch .db-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--negative);
|
||
margin-bottom: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.distortion-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4px;
|
||
}
|
||
|
||
.distortion-item {
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
padding: 4px 8px;
|
||
background: rgba(249, 112, 102, 0.04);
|
||
border-radius: 6px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.distortion-item strong {
|
||
color: var(--text-dim);
|
||
font-weight: 600;
|
||
font-size: 9.5px;
|
||
}
|
||
|
||
/* ─── Convergence / Save ─── */
|
||
.convergence {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
animation: fadeUp 0.8s ease 0.5s both;
|
||
}
|
||
|
||
.convergence-line {
|
||
position: relative;
|
||
height: 48px;
|
||
margin: 0 auto;
|
||
max-width: 900px;
|
||
}
|
||
|
||
.convergence-line::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(16.66% + 16px);
|
||
right: calc(16.66% + 16px);
|
||
height: 2px;
|
||
background: var(--border);
|
||
}
|
||
|
||
.convergence-line::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
width: 2px;
|
||
height: 100%;
|
||
background: var(--border);
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.save-section {
|
||
text-align: center;
|
||
animation: fadeUp 0.8s ease 0.55s both;
|
||
}
|
||
|
||
.save-node {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: var(--surface-raised);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 20px 32px;
|
||
max-width: 340px;
|
||
}
|
||
|
||
.save-node .save-title {
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.save-steps {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
text-align: left;
|
||
width: 100%;
|
||
}
|
||
|
||
.save-step {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.save-step .save-icon {
|
||
flex-shrink: 0;
|
||
width: 18px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ─── AI Feedback ─── */
|
||
.ai-section {
|
||
text-align: center;
|
||
margin-top: 8px;
|
||
animation: fadeUp 0.8s ease 0.6s both;
|
||
}
|
||
|
||
.ai-node {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(96, 165, 250, 0.08));
|
||
border: 1px solid rgba(167, 139, 250, 0.2);
|
||
border-radius: 16px;
|
||
padding: 16px 28px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.ai-node .sparkle {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.ai-details {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-top: 8px;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ─── Footer ─── */
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 72px;
|
||
padding-top: 32px;
|
||
border-top: 1px solid var(--border);
|
||
animation: fadeUp 0.8s ease 0.65s both;
|
||
}
|
||
|
||
.footer p {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.footer .mono {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
}
|
||
|
||
/* ─── Animations ─── */
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(16px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* ─── Responsive ─── */
|
||
@media (max-width: 768px) {
|
||
.paths {
|
||
grid-template-columns: 1fr;
|
||
max-width: 400px;
|
||
}
|
||
.connector-branch, .convergence-line {
|
||
display: none;
|
||
}
|
||
.legend { gap: 16px; }
|
||
.container { padding: 32px 16px 64px; }
|
||
.distortion-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<header>
|
||
<div class="badge">Updated Flow</div>
|
||
<h1>Guided Reflection Flow</h1>
|
||
<p>Adaptive CBT-aligned questioning. Each question builds on the previous answer using Socratic back-reference.</p>
|
||
</header>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background: var(--positive)"></div>
|
||
Positive path
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background: var(--neutral)"></div>
|
||
Neutral path
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background: var(--negative)"></div>
|
||
Negative path
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background: var(--gold)"></div>
|
||
New feature
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background: var(--blue)"></div>
|
||
Adaptive (uses prior answer)
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Entry Point -->
|
||
<div class="entry-point">
|
||
<div class="entry-node">
|
||
<span class="icon">📝</span>
|
||
User logs a mood
|
||
</div>
|
||
</div>
|
||
|
||
<div class="connector"><div class="line"></div></div>
|
||
|
||
<!-- Pre-intensity -->
|
||
<div class="entry-point">
|
||
<div class="entry-node" style="border-color: rgba(245, 200, 66, 0.3); background: var(--gold-bg);">
|
||
<span class="icon">📊</span>
|
||
<div>
|
||
<div style="font-weight: 600; font-size: 14px;">Intensity Rating (pre)</div>
|
||
<div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">How strong is this feeling? 0–10 slider</div>
|
||
</div>
|
||
<span class="tag new" style="margin: 0;">New</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="connector"><div class="line"></div></div>
|
||
|
||
<!-- Decision -->
|
||
<div class="decision">
|
||
<div class="diamond">Mood category?</div>
|
||
</div>
|
||
|
||
<!-- Branch lines -->
|
||
<div class="connector-branch"></div>
|
||
|
||
<!-- Three Paths -->
|
||
<div class="paths">
|
||
|
||
<!-- POSITIVE PATH -->
|
||
<div class="path positive">
|
||
<div class="path-header">
|
||
<span class="mood-icon">☀️</span>
|
||
<span class="path-title">Positive</span>
|
||
<span class="path-technique">BA</span>
|
||
</div>
|
||
<div class="path-moods">Great / Good · 3 questions</div>
|
||
<div class="path-steps">
|
||
|
||
<div class="step">
|
||
<div class="step-label">Activity</div>
|
||
<div class="step-text">What did you do today that contributed to this feeling?</div>
|
||
<div class="no-chips">No chips — open-ended situational</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label">Awareness</div>
|
||
<div class="step-text">What thought or moment stands out the most?</div>
|
||
<div class="chips">
|
||
<div class="chips-label">Predefined chips</div>
|
||
<span class="chip">A conversation</span>
|
||
<span class="chip">Accomplished something</span>
|
||
<span class="chip">Felt calm</span>
|
||
<span class="chip">Laughed</span>
|
||
<span class="chip">Grateful for someone</span>
|
||
<span class="chip">Small win</span>
|
||
<span class="more">+6 more</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label">Planning</div>
|
||
<div class="step-text">How could you bring more of <em>"<code>%@</code> Q2 answer"</em> into your days?</div>
|
||
<span class="tag adaptive">Adaptive</span>
|
||
<div class="chips">
|
||
<div class="chips-label">Predefined chips</div>
|
||
<span class="chip">More of this</span>
|
||
<span class="chip">Time with people</span>
|
||
<span class="chip">Get outside</span>
|
||
<span class="chip">Stay active</span>
|
||
<span class="chip">Keep routine</span>
|
||
<span class="chip">Practice gratitude</span>
|
||
<span class="more">+6 more</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NEUTRAL PATH -->
|
||
<div class="path neutral">
|
||
<div class="path-header">
|
||
<span class="mood-icon">☁️</span>
|
||
<span class="path-title">Neutral</span>
|
||
<span class="path-technique">ACT</span>
|
||
</div>
|
||
<div class="path-moods">Average · 4 questions</div>
|
||
<div class="path-steps">
|
||
|
||
<div class="step">
|
||
<div class="step-label">Awareness</div>
|
||
<div class="step-text">What feeling has been sitting with you today?</div>
|
||
<div class="chips">
|
||
<div class="chips-label">Predefined chips</div>
|
||
<span class="chip">Boredom</span>
|
||
<span class="chip">Restlessness</span>
|
||
<span class="chip">Uncertainty</span>
|
||
<span class="chip">Numbness</span>
|
||
<span class="chip">Indifference</span>
|
||
<span class="chip">Distraction</span>
|
||
<span class="more">+6 more</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label">Thought</div>
|
||
<div class="step-text">What thought is connected to <em>"<code>%@</code> Q1 feeling"</em>?</div>
|
||
<span class="tag adaptive">Adaptive</span>
|
||
<div class="no-chips">No chips — specific thought capture</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label">Defusion</div>
|
||
<div class="step-text">Is <em>"<code>%@</code> Q2 thought"</em> something you know to be true, or something your mind is telling you?</div>
|
||
<span class="tag adaptive">Adaptive</span>
|
||
<div class="chips">
|
||
<div class="chips-label">Predefined chips</div>
|
||
<span class="chip">Just a thought</span>
|
||
<span class="chip">Mind storytelling</span>
|
||
<span class="chip">Thought will pass</span>
|
||
<span class="chip">Giving it too much weight</span>
|
||
<span class="chip">Not helpful</span>
|
||
<span class="more">+3 more</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label">Values</div>
|
||
<div class="step-text">What matters to you about tomorrow?</div>
|
||
<div class="chips">
|
||
<div class="chips-label">Predefined chips</div>
|
||
<span class="chip">Be present</span>
|
||
<span class="chip">Connect with someone</span>
|
||
<span class="chip">Move my body</span>
|
||
<span class="chip">Meaningful work</span>
|
||
<span class="chip">Be kind to myself</span>
|
||
<span class="more">+4 more</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NEGATIVE PATH -->
|
||
<div class="path negative">
|
||
<div class="path-header">
|
||
<span class="mood-icon">⛈️</span>
|
||
<span class="path-title">Negative</span>
|
||
<span class="path-technique">CBT</span>
|
||
</div>
|
||
<div class="path-moods">Bad / Horrible · 5 questions</div>
|
||
<div class="path-steps">
|
||
|
||
<div class="step">
|
||
<div class="step-label">Situation</div>
|
||
<div class="step-text">What happened today that affected your mood?</div>
|
||
<span class="tag new">+ specificity probe</span>
|
||
<div class="no-chips">No chips — open-ended situational</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label">Automatic Thought</div>
|
||
<div class="step-text">When you think about <em>"<code>%@</code> Q1 situation"</em>, what thought kept coming back?</div>
|
||
<span class="tag adaptive">Adaptive</span>
|
||
<div class="chips">
|
||
<div class="chips-label">Predefined chips</div>
|
||
<span class="chip">I'm not good enough</span>
|
||
<span class="chip">Nothing goes right</span>
|
||
<span class="chip">It's all my fault</span>
|
||
<span class="chip">I can't handle this</span>
|
||
<span class="chip">No one understands</span>
|
||
<span class="chip">I should have…</span>
|
||
<span class="more">+6 more</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<!-- Distortion Branch -->
|
||
<div class="distortion-branch">
|
||
<div class="db-label">
|
||
<span>🔍</span> Distortion detection on Q2 answer
|
||
<span class="tag new" style="margin: 0;">New</span>
|
||
</div>
|
||
<div class="distortion-grid">
|
||
<div class="distortion-item"><strong>Overgeneralization</strong><br>"always, never, everyone"</div>
|
||
<div class="distortion-item"><strong>Should Statement</strong><br>"should have, must, have to"</div>
|
||
<div class="distortion-item"><strong>Labeling</strong><br>"I'm a failure, I'm stupid"</div>
|
||
<div class="distortion-item"><strong>Personalization</strong><br>"my fault, because of me"</div>
|
||
<div class="distortion-item"><strong>Catastrophizing</strong><br>"will never, ruined, disaster"</div>
|
||
<div class="distortion-item"><strong>Mind Reading</strong><br>"hates me, judging me"</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label" style="color: var(--gold);">Perspective Check → tailored to distortion</div>
|
||
<div class="step-text">
|
||
Distortion-specific reframe of <em>"<code>%@</code> Q2 thought"</em><br>
|
||
<span style="font-size: 10.5px; color: var(--text-muted); line-height: 1.6; display: block; margin-top: 4px;">
|
||
e.g. overgeneralization → "Can you think of one counter-example?"<br>
|
||
e.g. labeling → "Is that something you <em>are</em>, or something you <em>did</em>?"<br>
|
||
fallback → "What would you tell a friend who had this thought?"
|
||
</span>
|
||
</div>
|
||
<div style="display: flex; gap: 4px; margin-top: 6px;">
|
||
<span class="tag adaptive">Adaptive</span>
|
||
<span class="tag new">New routing</span>
|
||
</div>
|
||
<div class="chips">
|
||
<div class="chips-label">Predefined chips (compassionate reframes)</div>
|
||
<span class="chip">Being too hard on yourself</span>
|
||
<span class="chip">One bad day</span>
|
||
<span class="chip">Better than you think</span>
|
||
<span class="chip">OK to struggle</span>
|
||
<span class="chip">This feeling will pass</span>
|
||
<span class="more">+3 more</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label">Evidence</div>
|
||
<div class="step-text">What evidence supports <em>"<code>%@</code> Q2 thought"</em>, and what challenges it?</div>
|
||
<div style="display: flex; gap: 4px; margin-top: 6px;">
|
||
<span class="tag adaptive">Adaptive</span>
|
||
<span class="tag new">New step</span>
|
||
</div>
|
||
<div class="no-chips">No chips — free-text exploration of both sides</div>
|
||
</div>
|
||
|
||
<div class="step-connector"><div class="dots"><span class="dot"></span><span class="dot"></span></div></div>
|
||
|
||
<div class="step">
|
||
<div class="step-label">Reframe</div>
|
||
<div class="step-text">Looking at <em>"<code>%@</code> Q2 thought"</em> again — what's a more balanced way to see it?</div>
|
||
<span class="tag adaptive">Adaptive</span>
|
||
<div class="chips">
|
||
<div class="chips-label">Predefined chips (cognitive reframes + grounding)</div>
|
||
<span class="chip">Worst case vs likely case</span>
|
||
<span class="chip">Facts vs feelings</span>
|
||
<span class="chip">Will it matter in a week?</span>
|
||
<span class="chip">I've gotten through before</span>
|
||
<span class="chip">Just one chapter</span>
|
||
<span class="more">+6 more</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Convergence -->
|
||
<div class="convergence">
|
||
<div class="convergence-line"></div>
|
||
</div>
|
||
|
||
<!-- Post-intensity -->
|
||
<div class="entry-point" style="animation-delay: 0.5s;">
|
||
<div class="entry-node" style="border-color: rgba(245, 200, 66, 0.3); background: var(--gold-bg);">
|
||
<span class="icon">📊</span>
|
||
<div>
|
||
<div style="font-weight: 600; font-size: 14px;">Intensity Rating (post)</div>
|
||
<div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">Now, how strong is this feeling? 0–10 slider</div>
|
||
</div>
|
||
<span class="tag new" style="margin: 0;">New</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="connector"><div class="line"></div></div>
|
||
|
||
<!-- Save -->
|
||
<div class="save-section">
|
||
<div class="save-node">
|
||
<div class="save-title">Save Reflection</div>
|
||
<div class="save-steps">
|
||
<div class="save-step">
|
||
<span class="save-icon">💾</span>
|
||
<span>Persist resolved question text + answers as JSON</span>
|
||
</div>
|
||
<div class="save-step">
|
||
<span class="save-icon">🏷</span>
|
||
<span>AI tag extraction (Foundation Models, async)</span>
|
||
</div>
|
||
<div class="save-step">
|
||
<span class="save-icon">📊</span>
|
||
<span>Store pre/post intensity + detected distortion</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="connector"><div class="line"></div></div>
|
||
|
||
<!-- AI Feedback -->
|
||
<div class="ai-section">
|
||
<div class="ai-node">
|
||
<span class="sparkle">✨</span>
|
||
AI Reflection Feedback
|
||
</div>
|
||
<div class="ai-details">
|
||
Foundation Models · References intensity shift & distortion type · Personality-pack aware
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="footer">
|
||
<p>Reflect · Guided Reflection · CBT-Aligned Adaptive Flow</p>
|
||
<p class="mono" style="margin-top: 6px;">
|
||
Phase 1a (templating) + Phase 1b (intensity) + Phase 1d (specificity) + Phase 2 (distortion detection + evidence step)
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|