Spaces:

build-small-hackathon
/

Kintsugi-Garden

Paused

App Files Files Community

Kintsugi-Garden / frontend /journal.html

ai-sherpa

Soul Map: rail signature + overlay dialog markup

f92a868 verified about 1 month ago

Raw

History Blame Contribute Delete

11.7 kB

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>The Kintsugi Garden — journal</title>
	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
	<link rel="stylesheet" href="/static/journal.css">
	</head>
	<body>

	<header class="j-band">
	<div class="j-mark">
	<img src="/favicon.svg" alt="The Kintsugi Garden" width="36" height="36">
	</div>
	<div class="j-title">
	<h1>The Kintsugi Garden — journal</h1>
	<p>The gold gathers across days.</p>
	</div>
	</header>

	<main class="j-shell">

	<aside class="j-sidebar" aria-label="Past entries">
	<div class="j-side-action">
	<button id="j-new-btn" type="button">＋ New reflection</button>
	</div>
	<div id="j-entries-list">
	<div class="j-empty">No entries yet. Write one to begin.</div>
	</div>
	<div class="j-side-footer">
	<button id="j-export-btn" type="button">⤓ Export all as JSON</button>
	<p class="j-footer-note">
	Stored only in this browser. Clearing site data removes everything.
	</p>
	</div>

	<!-- About the Garden: framing material in the sidebar footer so it
	sits out of the writing surface but stays in reach. The "Why
	this exists" paragraphs are the in-app surface of WHY.md at
	the repo root — keep them in sync if the manifesto changes. -->
	<section class="j-about" aria-labelledby="j-about-heading">
	<h2 id="j-about-heading">About the Garden</h2>
	<details class="j-about-item">
	<summary>Why this exists</summary>
	<div class="j-about-body">
	<p>Most tools for the inner life assume something is broken in you, and offer to fix it. The Kintsugi Garden assumes the opposite — that the cracked, dreaming, recurring places in your inner story are where meaning actually gathers, and the work is to trace them in gold, not patch them over.</p>
	<p>We built this because the digital tools available for symbolic, contemplative work mostly fall into two camps: clinical (CBT worksheets, mood loggers — useful, but flatten the symbolic) and mystical (oracle apps, dream-interpretation services — sincere, but skip the rigor). Neither holds the in-between space where most adults actually live: dreams worth listening to, transitions worth naming, patterns worth watching, with no diagnosis required.</p>
	<p>The Garden holds that space. It will not tell you what your dream means. It will not predict your future, prescribe a practice, or speak with spiritual authority. It will offer back what you brought — organised, mirrored, and named in archetypal vocabulary borrowed honestly from Jungian tradition — and a Soul Map that quietly notices what keeps returning.</p>
	<p>The gold is already in the cracks. The app's job is only to make it easier to see.</p>
	</div>
	</details>
	<details class="j-about-item">
	<summary>How it works</summary>
	<div class="j-about-body">
	<p>Write a dream, a journal entry, or whatever feeling is asking to be looked at. Pick the entry type — it tunes the reading.</p>
	<p>When you <strong>Reflect</strong>, a small model reads your text symbolically and offers four lenses: the reading itself, the <strong>Shadow</strong> it touches, the <strong>Individuation</strong> it may invite, and a contemplative <strong>Question</strong>.</p>
	<p>The <strong>Mandala</strong> holds the visual echo. The <strong>Soul Map</strong> accumulates recurring symbols and themes across this session — your inner pattern, gathering over time.</p>
	</div>
	</details>
	<details class="j-about-item">
	<summary>Watch the 3-minute demo</summary>
	<div class="j-about-body">
	<p>A short tour of the Garden — the reflection loop, the mandala, and the Soul Map gathering symbols across entries.</p>
	<video
	id="kg-demo-video"
	class="j-demo-video"
	controls preload="metadata"
	width="100%"
	src="https://huggingface.co/spaces/build-small-hackathon/Kintsugi-Garden/resolve/main/video/render/kintsugi-garden-demo.mp4">
	Sorry, your browser doesn't support embedded videos.
	</video>
	</div>
	</details>
	</section>
	</aside>

	<!-- Demo video lightbox: on play, the inline <video> pauses and the
	dialog opens with a cloned <video> at ~50% viewport. ESC or
	backdrop click closes; currentTime syncs back to the inline copy. -->
	<dialog id="kg-demo-dialog" class="j-demo-dialog">
	<button type="button" class="j-demo-close" id="kg-demo-close" aria-label="Close demo video">×</button>
	<video
	id="kg-demo-video-large"
	controls
	preload="metadata"
	src="https://huggingface.co/spaces/build-small-hackathon/Kintsugi-Garden/resolve/main/video/render/kintsugi-garden-demo.mp4">
	</video>
	</dialog>

	<!-- Archetype glossary lightbox: opened by clicking any archetype name in
	the Soul Map. Populated from frontend/glossary-data.js by journal.js.
	The <video> is shown only for the genuine-Jung archetypes that have
	one; otherwise the entry is text-only. -->
	<dialog id="kg-glossary-dialog" class="j-glossary-dialog" aria-labelledby="kg-gloss-title">
	<button type="button" class="j-demo-close" id="kg-gloss-close" aria-label="Close glossary entry">×</button>
	<div class="j-gloss-inner">
	<h2 id="kg-gloss-title" class="j-gloss-title"></h2>
	<span id="kg-gloss-badge" class="j-gloss-badge"></span>
	<p id="kg-gloss-def" class="j-gloss-def"></p>
	<div id="kg-gloss-video-wrap" class="j-gloss-video-wrap" hidden>
	<video id="kg-gloss-video" controls preload="metadata"></video>
	</div>
	<p id="kg-gloss-cite" class="j-gloss-cite"></p>
	</div>
	</dialog>

	<!-- Soul Map overlay: opened from the rail signature / expand control.
	Mirrors the kg-demo-dialog / kg-glossary-dialog native <dialog>
	pattern (showModal + Escape/backdrop/× close, focus restored).
	Holds the large labeled star SVG and the Symbols/Themes text list
	(soulRow output) as the accessible companion — no data or glossary
	link is lost for screen-reader / keyboard users. -->
	<dialog id="kg-soulmap-dialog" class="j-soulmap-dialog" aria-labelledby="kg-soulmap-title">
	<button type="button" class="j-demo-close" id="kg-soulmap-close" aria-label="Close Soul Map">×</button>
	<div class="j-soulmap-dialog-inner">
	<h2 id="kg-soulmap-title" class="j-soulmap-dialog-title">Soul Map</h2>
	<div id="kg-soulmap-overlay-star" class="j-soulmap-overlay-star"></div>
	<div class="j-soulmap-dialog-lists">
	<h3 class="j-soulmap-sub">Symbols</h3>
	<div id="j-soulmap-symbols" class="j-soulmap-section">
	<p class="j-soulmap-empty">No symbols gathered yet.</p>
	</div>
	<h3 class="j-soulmap-sub">Themes</h3>
	<div id="j-soulmap-themes" class="j-soulmap-section">
	<p class="j-soulmap-empty">No themes gathered yet.</p>
	</div>
	</div>
	</div>
	</dialog>

	<section class="j-main">

	<form id="j-compose" autocomplete="off" novalidate>
	<label class="j-field-label" for="j-entry-text">Your entry</label>
	<textarea id="j-entry-text" rows="4"
	placeholder="I dreamt of a forest with a river running gold..."
	required></textarea>

	<div class="j-controls">
	<label>
	<span class="j-field-label">Type</span>
	<select id="j-type">
	<option>Dream</option>
	<option>Journal</option>
	<option>Vision</option>
	<option>Transition</option>
	<option>Other</option>
	</select>
	</label>
	<label>
	<span class="j-field-label">Depth</span>
	<input id="j-depth" type="range" min="1" max="3" value="2">
	</label>
	<label class="j-checkbox">
	<input type="checkbox" id="j-grounded">
	<span>Grounded Jungian</span>
	</label>
	<label class="j-checkbox">
	<input type="checkbox" id="j-include-q" checked>
	<span>Include question</span>
	</label>
	<button type="submit" id="j-submit" class="j-primary">Reflect →</button>
	</div>

	<p class="j-hint">⌘↩ / Ctrl-↩ to submit</p>
	</form>

	<div id="j-reading-panel">
	<div class="j-reading-head" hidden id="j-reading-head">
	<span class="j-reading-date" id="j-reading-date"></span>
	<span class="j-entry-chip" id="j-reading-chip"></span>
	<button type="button" class="j-reading-back" id="j-reading-back" hidden>
	← back to compose
	</button>
	</div>

	<div class="j-quoted" id="j-quoted" hidden></div>

	<div id="j-error" class="j-error" hidden></div>

	<section class="j-section" data-heading="Mirror" hidden>
	<h2>Mirror</h2><div class="j-section-body"></div>
	</section>
	<section class="j-section" data-heading="Key Symbols" hidden>
	<h2>Key Symbols</h2><div class="j-section-body"></div>
	</section>
	<section class="j-section" data-heading="Archetypal Themes" hidden>
	<h2>Archetypal Themes</h2><div class="j-section-body"></div>
	</section>
	<section class="j-section" data-heading="Shadow Pattern" hidden>
	<h2>Shadow Pattern</h2><div class="j-section-body"></div>
	</section>
	<section class="j-section" data-heading="Individuation Signal" hidden>
	<h2>Individuation Signal</h2><div class="j-section-body"></div>
	</section>
	<section class="j-section" data-heading="Gentle Question" hidden>
	<h2>Gentle Question</h2><div class="j-section-body"></div>
	</section>

	<figure id="j-mandala-wrap" hidden>
	<img id="j-mandala" alt="">
	<figcaption>The mandala for this reflection.</figcaption>
	</figure>

	<div class="j-placeholder" id="j-placeholder">
	Select an entry on the left, or write a new one.
	</div>
	</div>
	</section>

	<!-- Soul Map: the right rail. A view of accumulated symbols + themes
	across all localStorage entries. The data shape is built client-side
	from `e.symbols[]` on each saved reading (see journal.js
	buildSoulMapData) and mirrors update_soul_map() in app.py — keep
	the two in sync. -->
	<aside class="j-soulmap" aria-label="Soul Map">
	<div class="j-soulmap-inner">
	<h2 class="j-soulmap-heading">Soul Map</h2>
	<p class="j-soulmap-intro">
	Symbols and themes that have returned across your entries.
	</p>

	<button type="button" id="j-soulmap-signature" class="j-soulmap-signature"
	aria-haspopup="dialog" aria-label="Soul Map — open full constellation">
	<span id="j-soulmap-sig-svg" class="j-soulmap-sig-svg"></span>
	<span id="j-soulmap-caption" class="j-soulmap-caption"></span>
	<span class="j-soulmap-expand" aria-hidden="true">⤢ Expand</span>
	</button>
	</div>
	</aside>
	</main>

	<script type="module" src="/static/journal.js"></script>
	</body>
	</html>