Files
valuecards/stitch/screens/reflection-journal.html
T
2026-09-18 00:01:42 +02:00

391 lines
26 KiB
HTML

<!DOCTYPE html><html lang="en" style=""><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"><link href="https://fonts.googleapis.com" rel="preconnect"><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"><link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&amp;family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;display=swap" rel="stylesheet"><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script><script id="tailwind-config">tailwind.config = { darkMode: 'class', theme: { extend: { colors: { 'on-tertiary-container': '#e1f9db', 'surface-container': '#f1ede6', 'on-primary-container': '#ffefe1', 'primary-fixed-dim': '#d9c3ac', 'tertiary-fixed-dim': '#b5cdb0', 'surface': '#fdf9f2', 'on-secondary-fixed-variant': '#713714', 'surface-container-lowest': '#ffffff', 'error-container': '#ffdad6', 'primary': '#635341', 'outline-variant': '#d0c4ba', 'tertiary': '#465b44', 'surface-dim': '#dddad3', 'primary-container': '#7d6b58', 'outline': '#7f756d', 'on-error-container': '#93000a', 'surface-bright': '#fdf9f2', 'background': '#fdf9f2', 'secondary-container': '#feaa7f', 'tertiary-container': '#5e745c', 'surface-tint': '#6c5b49', 'on-secondary-container': '#783d1a', 'on-primary-fixed-variant': '#544433', 'on-primary-fixed': '#25190b', 'tertiary-fixed': '#d1e9cc', 'on-error': '#ffffff', 'on-secondary': '#ffffff', 'on-tertiary-fixed-variant': '#374c36', 'on-surface': '#1c1c18', 'surface-container-high': '#ece8e1', 'secondary': '#8e4d2a', 'secondary-fixed-dim': '#ffb691', 'secondary-fixed': '#ffdbcb', 'inverse-surface': '#31302c', 'inverse-on-surface': '#f4f0e9', 'on-primary': '#ffffff', 'primary-fixed': '#f6dfc7', 'on-surface-variant': '#4d453e', 'surface-container-highest': '#e6e2db', 'on-tertiary-fixed': '#0d200d', 'on-secondary-fixed': '#341100', 'on-background': '#1c1c18', 'surface-variant': '#e6e2db', 'on-tertiary': '#ffffff', 'error': '#ba1a1a', 'inverse-primary': '#d9c3ac', 'surface-container-low': '#f7f3ec' }, borderRadius: { DEFAULT: '1rem', lg: '2rem', xl: '3rem', full: '9999px' }, spacing: { 'space-xs': '0.25rem', 'margin': '1.5rem', 'gutter': '1rem', 'space-xl': '2.5rem', 'margin-mobile': '1.25rem', 'gutter-mobile': '0.75rem', 'space-sm': '0.5rem', 'space-lg': '1.5rem', 'space-md': '1rem' }, fontFamily: { 'label-lg': ['Plus Jakarta Sans'], 'label-sm': ['Plus Jakarta Sans'], 'headline-xl-mobile': ['Newsreader'], 'body-lg': ['Plus Jakarta Sans'], 'body-sm': ['Plus Jakarta Sans'], 'headline-lg-mobile': ['Newsreader'], 'headline-md': ['Newsreader'], 'headline-lg': ['Newsreader'], 'body-md': ['Plus Jakarta Sans'], 'headline-xl': ['Newsreader'], 'label-md': ['Plus Jakarta Sans'] }, fontSize: { 'label-lg': ['15px', { lineHeight: '20px', letterSpacing: '0.01em', fontWeight: '600' }], 'label-sm': ['11px', { lineHeight: '16px', letterSpacing: '0.04em', fontWeight: '600' }], 'headline-xl-mobile': ['32px', { lineHeight: '40px', letterSpacing: '-0.01em', fontWeight: '400' }], 'body-lg': ['18px', { lineHeight: '28px', fontWeight: '400' }], 'body-sm': ['14px', { lineHeight: '20px', fontWeight: '400' }], 'headline-lg-mobile': ['26px', { lineHeight: '34px', letterSpacing: '0em', fontWeight: '400' }], 'headline-md': ['22px', { lineHeight: '30px', fontWeight: '400' }], 'headline-lg': ['30px', { lineHeight: '38px', letterSpacing: '-0.01em', fontWeight: '400' }], 'body-md': ['16px', { lineHeight: '24px', fontWeight: '400' }], 'headline-xl': ['40px', { lineHeight: '48px', letterSpacing: '-0.02em', fontWeight: '400' }], 'label-md': ['13px', { lineHeight: '18px', letterSpacing: '0.02em', fontWeight: '500' }] } } } };</script><style>@layer base { html, body { width: 100vw; margin: 0; padding: 0; } body { overscroll-behavior: none; } .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); } .pt-safe { padding-top: env(safe-area-inset-top, 0px); } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } } ::-webkit-scrollbar { display: none; }</style></head><body class="bg-surface font-body-md text-body-md text-on-surface min-h-screen flex flex-col pt-safe pb-safe"><main class="flex-1 flex flex-col relative w-full bg-surface"><div class="flex flex-col w-full px-margin-mobile sm:px-margin space-y-space-lg pb-12">
<!-- Eyebrow & Stage Header -->
<header class="flex flex-col space-y-space-xs text-left pt-2">
<div class="flex items-center justify-between">
<span class="font-label-sm text-label-sm text-secondary tracking-widest uppercase bg-surface-container-high px-3 py-1 rounded-full">
Step 5 of 5 · Deep Reflection
</span>
<span class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1">
<span class="material-symbols-outlined text-[16px] text-tertiary">spa</span>
Unrushed Practice
</span>
</div>
<h1 class="font-headline-xl-mobile sm:font-headline-xl text-headline-xl-mobile sm:text-headline-xl text-on-surface mt-1">Your Core Values</h1>
</header>
<!-- Value Selector Carousel -->
<section class="flex flex-col space-y-2">
<div class="flex items-center justify-between px-1">
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Top 5 Core Anchors</span>
<span class="font-label-sm text-label-sm text-tertiary font-semibold" id="carousel-status">3 of 4 answered</span>
</div>
<div class="flex gap-2 overflow-x-auto pb-2 scrollbar-none snap-x" id="value-tabs">
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md shadow-sm transition-all">
<span class="w-2 h-2 rounded-full bg-secondary-fixed"></span>
#1 Authenticity
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-primary-container text-on-primary-container">3/4</span>
</button>
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
<span class="w-2 h-2 rounded-full bg-tertiary"></span>
#2 Courage
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">4/4</span>
</button>
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
#3 Compassion
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">2/4</span>
</button>
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
#4 Freedom
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">2/4</span>
</button>
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
#5 Curiosity
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">3/4</span>
</button>
</div>
</section>
<!-- Core Value Spotlight Card -->
<section class="bg-surface-container-low rounded-lg p-space-lg shadow-sm flex flex-col gap-4 relative overflow-hidden">
<div class="flex items-start justify-between">
<div class="flex flex-col">
<h2 class="font-headline-lg-mobile sm:font-headline-lg text-headline-lg-mobile sm:text-headline-lg text-on-surface mt-0.5">
Authenticity
</h2>
</div>
</div>
<p class="font-body-md text-body-md text-on-surface-variant italic">
"Living in genuine alignment with inner truth and speaking without pretense or performance."
</p>
</section>
<!-- Reflection Questions List (Accordions) -->
<section class="flex flex-col space-y-3" id="questions-container">
<!-- Question 1: Answered & Collapsible -->
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden cursor-pointer hover:bg-surface-container" id="card-q1">
<div class="w-full text-left p-space-lg flex items-center justify-between gap-3" onclick="openDrawer('q1')">
<div class="flex items-start gap-3 min-w-0">
<span class="w-6 h-6 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed shrink-0 mt-0.5">
<span class="material-symbols-outlined text-[15px] font-bold">check</span>
</span>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-2">
<span class="font-label-sm text-label-sm text-tertiary font-semibold uppercase tracking-wider">Answered</span>
<span class="font-label-sm text-label-sm text-outline">· Prompt 1</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface truncate sm:whitespace-normal">
What does this value mean to you?
</h3>
</div>
</div>
<span class="material-symbols-outlined text-outline">open_in_full</span>
</div>
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 flex" id="content-q1">
<div class="bg-surface-container p-space-md rounded-DEFAULT">
<p class="font-body-md text-body-md text-on-surface leading-relaxed" id="text-q1">
To me, authenticity is the quiet permission to stop curating who I am for other people's approval. It means letting my outward actions and words match what is truly happening inside, even when that makes me feel vulnerable or imperfect.
</p>
</div>
<div class="flex justify-end gap-2">
<button class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors" onclick="event.stopPropagation(); openDrawer('q1')">
<span class="material-symbols-outlined text-[14px]">edit</span>
Open Reflection
</button>
</div>
</div>
</article>
<!-- Question 2: Answered & Collapsed default -->
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden cursor-pointer hover:bg-surface-container" id="card-q2">
<div class="w-full text-left p-space-lg flex items-center justify-between gap-3" onclick="openDrawer('q2')">
<div class="flex items-start gap-3 min-w-0">
<span class="w-6 h-6 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed shrink-0 mt-0.5">
<span class="material-symbols-outlined text-[15px] font-bold">check</span>
</span>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-2">
<span class="font-label-sm text-label-sm text-tertiary font-semibold uppercase tracking-wider">Answered</span>
<span class="font-label-sm text-label-sm text-outline">· Prompt 2</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface truncate sm:whitespace-normal">
Why did you choose this as important?
</h3>
</div>
</div>
<span class="material-symbols-outlined text-outline">open_in_full</span>
</div>
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 hidden" id="content-q2">
<div class="bg-surface-container p-space-md rounded-DEFAULT">
<p class="font-body-md text-body-md text-on-surface leading-relaxed" id="text-q2">
Whenever I have betrayed my own intuition to keep the peace or satisfy someone else, an inner resentment always took root. Choosing authenticity has been my most reliable antidote to regret and burnout.
</p>
</div>
<div class="flex justify-end gap-2">
<button class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors" onclick="event.stopPropagation(); openDrawer('q2')">
<span class="material-symbols-outlined text-[14px]">edit</span>
Open Reflection
</button>
</div>
</div>
</article>
<!-- Question 3: Active / In Progress Card -->
<article class="bg-surface-container-low rounded-lg shadow-md transition-all overflow-hidden border border-outline-variant/50 cursor-pointer hover:bg-surface-container" id="card-q3" onclick="openDrawer('q3')">
<div class="w-full text-left p-space-lg flex items-center justify-between gap-3">
<div class="flex items-start gap-3 min-w-0">
<span class="w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed-variant shrink-0 mt-0.5">
<span class="material-symbols-outlined text-[15px]">edit_note</span>
</span>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-2">
<span class="font-label-sm text-label-sm text-secondary font-semibold uppercase tracking-wider">In Progress</span>
<span class="font-label-sm text-label-sm text-outline">· Prompt 3</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface">
How have you shown this value in your daily life?
</h3>
</div>
</div>
<span class="material-symbols-outlined text-secondary">open_in_full</span>
</div>
<div class="px-space-lg pb-space-lg pt-0 flex flex-col gap-3" id="content-q3">
<div class="p-space-md bg-surface rounded-DEFAULT border border-outline-variant/30">
<p class="text-on-surface font-body-md text-body-md line-clamp-2 italic text-on-surface-variant" id="text-q3">"Recently, during a project retrospective, I spoke honestly about feeling overwhelmed instead of nodding along like everything was fine..."</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-secondary flex items-center gap-1">
<span class="material-symbols-outlined text-[15px]">mode_edit</span> Tap to expand &amp; journal
</span>
<button class="px-4 py-1.5 rounded-full bg-primary text-on-primary font-label-sm text-label-sm hover:bg-primary-container transition-all shadow-sm flex items-center gap-1">
Continue writing
</button>
</div>
</div>
</article>
<!-- Question 4: Unanswered / Inviting Call to Reflect -->
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden border border-dashed border-outline-variant cursor-pointer hover:bg-surface-container" id="card-q4" onclick="openDrawer('q4')">
<div class="w-full text-left p-space-lg flex items-center justify-between gap-3">
<div class="flex items-start gap-3 min-w-0">
<span class="w-6 h-6 rounded-full bg-surface-container-highest flex items-center justify-center text-outline shrink-0 mt-0.5">
<span class="material-symbols-outlined text-[16px]">add</span>
</span>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-2">
<span class="font-label-sm text-label-sm text-outline font-semibold uppercase tracking-wider">Unanswered</span>
<span class="font-label-sm text-label-sm text-outline">· Prompt 4</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-surface">
In what ways could you be even more true to it?
</h3>
</div>
</div>
<span class="material-symbols-outlined text-outline">edit_square</span>
</div>
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 flex" id="content-q4">
<p class="font-body-sm text-body-sm text-on-surface-variant">Notice where you still mask, hold back, or seek quiet convenience over your core alignment.</p>
<div class="flex items-center justify-end gap-2 pt-1">
<button class="px-5 py-2 rounded-full bg-surface-container-highest text-on-surface font-label-md text-label-md hover:bg-surface-container-high transition-all flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">edit</span>
Start Prompt 4
</button>
</div>
</div>
</article>
</section>
<!-- Mindful Life Compass Quick-peek Card -->
<section class="bg-surface-container p-space-md rounded-lg flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-tertiary-container text-on-tertiary-container flex items-center justify-center">
<span class="material-symbols-outlined text-[20px]">explore</span>
</div>
<div class="flex flex-col">
<span class="font-label-md text-label-md text-on-surface font-semibold">Your Life Compass is Taking Shape</span>
<span class="font-body-sm text-body-sm text-on-surface-variant">14 of 20 total reflections recorded</span>
</div>
</div>
<button class="px-3 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors shrink-0">
Preview
</button>
</section>
<!-- Bottom Navigation / Floating Action Bar -->
<nav class="sticky bottom-2 z-10 bg-surface-container-lowest/90 backdrop-blur-md p-space-md rounded-lg shadow-xl flex flex-col gap-3">
<!-- Navigation Buttons -->
<div class="flex items-center gap-3">
<button class="flex-1 py-3 px-4 rounded-full bg-surface-container-high text-on-surface font-label-lg text-label-lg hover:bg-surface-container-highest transition-colors flex items-center justify-center gap-1">
<span class="material-symbols-outlined text-[18px]">arrow_back</span>
Previous
</button>
<button class="flex-[2] py-3 px-5 rounded-full bg-primary text-on-primary font-label-lg text-label-lg hover:bg-primary-container transition-all shadow-md flex items-center justify-center gap-2">
<span class="">Next: #2 Courage</span>
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</nav>
<!-- FULL-SCREEN REFLECTION DRAWER / MODAL (Occupies whole viewport: z-50 inset-0) -->
<div class="fixed inset-0 z-50 flex flex-col bg-surface text-on-surface overflow-hidden transition-all duration-300" id="reflection-drawer">
<!-- Top Navigation & Action Bar -->
<header class="w-full bg-surface/95 backdrop-blur-md border-b border-outline-variant/40 px-margin-mobile sm:px-margin pt-safe">
<div class="h-16 flex items-center justify-between">
<button class="inline-flex items-center gap-1 px-3 py-2 -ml-2 rounded-full text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md text-label-md" onclick="closeDrawer()">
<span class="material-symbols-outlined text-[22px]">close</span>
<span class="">Close</span>
</button>
<div class="flex items-center gap-1.5 text-center">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
<span class="font-label-sm text-label-sm text-secondary font-semibold uppercase tracking-wider" id="drawer-step-badge">Prompt 3 of 4</span>
</div>
<button class="px-4 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md hover:bg-primary-container transition-all shadow-sm flex items-center gap-1" onclick="saveAndCloseDrawer()">
<span class="material-symbols-outlined text-[16px]">check</span>
<span class="">Done</span>
</button>
</div>
</header>
<!-- Spacious Distraction-Free Reflection Writing Area -->
<div class="flex-1 flex flex-col overflow-y-auto px-margin-mobile sm:px-margin py-space-lg space-y- space-y-4">
<!-- Pinned Question Header in Elegant Serif Typography -->
<div class="flex flex-col space-y-2 border-b border-outline-variant/30 pb-4">
<div class="flex items-center gap-2">
<span class="font-label-sm text-label-sm text-secondary bg-surface-container-high px-2.5 py-0.5 rounded-full font-medium" id="drawer-value-tag">
Reflecting on #1 Authenticity
</span>
</div>
<h2 class="font-headline-xl-mobile sm:font-headline-xl text-headline-xl-mobile sm:text-headline-xl text-on-surface leading-tight font-normal" id="drawer-question-title">
How have you shown this value in your daily life?
</h2>
<!-- Guiding Thought / Prompt Hint -->
</div>
<!-- Spacious Writing Textarea Field -->
<div class="flex-1 flex flex-col min-h-[280px]">
<textarea class="w-full flex-1 p-space-lg bg-surface-container-lowest/80 rounded-lg text-on-surface font-body-lg text-body-lg focus:outline-none focus:ring-1 focus:ring-primary-container shadow-inner resize-none transition-all leading-relaxed placeholder:text-outline/60 border border-outline-variant/30" id="drawer-textarea" oninput="handleDrawerInput(this)" placeholder="There are no wrong answers here. Write freely without curating or judging your thoughts...">Recently, during a project retrospective, I spoke honestly about feeling overwhelmed instead of nodding along like everything was fine. It opened the door for my colleagues to share their true workload too.</textarea>
<div class="flex items-center justify-between px-2 pt-2 text-on-surface-variant">
<span class="font-label-sm text-label-sm" id="drawer-word-counter">
33 words · 214 characters
</span>
<span class="font-label-sm text-label-sm text-outline flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">spa</span> Mindful focus mode
</span>
</div>
</div>
</div>
<!-- Bottom Drawer Floating Action Bar -->
<footer class="w-full bg-surface-container-lowest/95 backdrop-blur-md border-t border-outline-variant/40 px-margin-mobile sm:px-margin py-3 pb-safe">
<div class="flex items-center justify-between gap-3">
<button class="flex-1 py-3 px-4 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md hover:bg-surface-container-highest transition-colors flex items-center justify-center gap-1.5" onclick="closeDrawer()">
<span class="material-symbols-outlined text-[18px]">close</span>
<span class="">Cancel</span>
</button>
<button class="flex-[2] py-3 px-5 rounded-full bg-primary text-on-primary font-label-md text-label-md hover:bg-primary-container transition-all shadow-md flex items-center justify-center gap-2" onclick="saveAndContinue()">
<span class="">Save &amp; Continue</span>
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</footer>
</div>
<!-- Interactive Client-side micro-interactions -->
<script>
const questionData = {
q1: {
number: "Prompt 1 of 4",
question: "What does this value mean to you?",
hint: "Define authenticity in your own rhythm and voice. What sensation or truth does it evoke when you are undisturbed?",
text: "To me, authenticity is the quiet permission to stop curating who I am for other people's approval. It means letting my outward actions and words match what is truly happening inside, even when that makes me feel vulnerable or imperfect."
},
q2: {
number: "Prompt 2 of 4",
question: "Why did you choose this as important?",
hint: "Reflect on past moments where keeping quiet or playing a role cost you peace of mind.",
text: "Whenever I have betrayed my own intuition to keep the peace or satisfy someone else, an inner resentment always took root. Choosing authenticity has been my most reliable antidote to regret and burnout."
},
q3: {
number: "Prompt 3 of 4",
question: "How have you shown this value in your daily life?",
hint: "Reflect gently on recent moments where you stayed aligned with your truth, even when convenience or approval tempted you otherwise.",
text: "Recently, during a project retrospective, I spoke honestly about feeling overwhelmed instead of nodding along like everything was fine. It opened the door for my colleagues to share their true workload too."
},
q4: {
number: "Prompt 4 of 4",
question: "In what ways could you be even more true to it?",
hint: "Notice the specific relationships, environments, or habits where you still find yourself putting on a mask.",
text: ""
}
};
let currentPromptId = 'q3';
function openDrawer(id) {
currentPromptId = id;
const data = questionData[id] || questionData.q3;
document.getElementById('drawer-step-badge').textContent = data.number;
document.getElementById('drawer-question-title').textContent = data.question;
document.getElementById('drawer-guiding-hint').textContent = `"${data.hint}"`;
const textarea = document.getElementById('drawer-textarea');
textarea.value = data.text;
handleDrawerInput(textarea);
const drawer = document.getElementById('reflection-drawer');
drawer.classList.remove('hidden');
drawer.classList.add('flex');
document.body.style.overflow = 'hidden';
}
function closeDrawer() {
const drawer = document.getElementById('reflection-drawer');
drawer.classList.add('hidden');
drawer.classList.remove('flex');
document.body.style.overflow = '';
}
function handleDrawerInput(textarea) {
const text = textarea.value.trim();
const words = text ? text.split(/\s+/).filter(Boolean).length : 0;
const chars = textarea.value.length;
const counter = document.getElementById('drawer-word-counter');
if (counter) {
counter.textContent = `${words} words · ${chars} characters`;
}
const indicator = document.getElementById('drawer-save-indicator');
if (indicator) {
indicator.innerHTML = '<span class="material-symbols-outlined text-[13px] text-secondary">sync</span> Saving draft...';
clearTimeout(window.saveTimer);
window.saveTimer = setTimeout(() => {
indicator.innerHTML = '<span class="material-symbols-outlined text-[13px] text-tertiary">cloud_done</span> Autosaved';
}, 800);
}
}
function saveAndCloseDrawer() {
const textarea = document.getElementById('drawer-textarea');
if (questionData[currentPromptId]) {
questionData[currentPromptId].text = textarea.value;
const cardText = document.getElementById('text-' + currentPromptId);
if (cardText) {
cardText.textContent = textarea.value;
}
}
closeDrawer();
}
function saveAndContinue() {
const textarea = document.getElementById('drawer-textarea');
if (questionData[currentPromptId]) {
questionData[currentPromptId].text = textarea.value;
const cardText = document.getElementById('text-' + currentPromptId);
if (cardText) {
cardText.textContent = textarea.value;
}
}
const keys = ['q1', 'q2', 'q3', 'q4'];
const nextIdx = (keys.indexOf(currentPromptId) + 1) % keys.length;
openDrawer(keys[nextIdx]);
}
</script>
</div></main>
</body></html>