Files
2026-09-18 00:01:42 +02:00

547 lines
34 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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"></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 pb-12">
<!-- Progress Header & Stage Cue -->
<header class="flex flex-col space-y-space-sm pt-2">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-1.5">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
<span class="font-label-sm text-label-sm uppercase tracking-wider text-secondary">Stage 3 of 4 · Prioritization</span>
</div>
<button class="inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface-variant text-label-md font-label-md shadow-sm transition-transform active:scale-95" onclick="togglePileSheet()" type="button">
<span class="material-symbols-outlined text-[16px]">layers</span>
<span class="">View Piles (100)</span>
</button>
</div>
<!-- Stepper Graphic Inline Bar -->
<div class="w-full bg-surface-container-high h-1 rounded-full overflow-hidden flex">
<div class="bg-surface-variant w-1/4 h-full"></div>
<div class="bg-surface-variant w-1/4 h-full"></div>
<div class="bg-secondary w-1/4 h-full"></div>
<div class="bg-surface-container-high w-1/4 h-full"></div>
</div>
<div class="pt-2">
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface tracking-tight">Order Your Core Values</h1>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">
Drag or reorder your finalists. Let <span class="font-semibold text-secondary">#1</span> represent your non-negotiable value.</p>
</div>
</header>
<!-- Editorial Visual Inspiration Vignette -->
<!-- Reorderable List Container -->
<div class="flex flex-col space-y-space-sm mt-5" id="rankList">
<!-- Item 1 (North Star Highlight) -->
<article class="rank-card relative rounded-lg p-4 bg-surface-container-lowest shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="1" draggable="true">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-7 h-7 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center font-label-md text-label-md font-bold rank-num">1</div>
<div class="north-star-tag inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full bg-secondary/10 text-secondary text-label-sm font-label-sm"><span class="material-symbols-outlined text-[12px]" style="font-variation-settings: 'FILL' 1;">star</span><span class="">Primary North Star</span></div></div>
<div class="flex items-center space-x-1 text-on-surface-variant">
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-low active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
</button>
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
</div>
</div>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Authenticity</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
Living in honest alignment with who you are, without continuous performance or self-betrayal.
</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-outline">Pillar: Self-Alignment</span>
<button class="font-label-sm text-label-sm text-secondary underline" onclick="openRationaleModal('Authenticity', '1')" type="button">Add personal rationale</button>
</div>
</article>
<!-- Item 2 -->
<!-- Item 3 -->
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="3" draggable="true">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">2</div>
</div>
<div class="flex items-center space-x-1 text-on-surface-variant">
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
</button>
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
</button>
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
</div>
</div>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Compassion</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
Meeting human frailty with gentleness, extending warmth before judgment.
</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-outline">Pillar: Relational</span>
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Compassion', '3')" type="button">Add personal rationale</button>
</div>
</article>
<!-- Item 4 -->
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="4" draggable="true">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">3</div>
</div>
<div class="flex items-center space-x-1 text-on-surface-variant">
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
</button>
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
</button>
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
</div>
</div>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Freedom</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
Sovereignty over one’s calendar, bodily presence, and mental headspace.
</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-outline">Pillar: Independence</span>
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Freedom', '4')" type="button">Add personal rationale</button>
</div>
</article>
<!-- Item 5 -->
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="5" draggable="true">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">4</div>
</div>
<div class="flex items-center space-x-1 text-on-surface-variant">
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
</button>
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
</button>
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
</div>
</div>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Curiosity</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
An open question kept alive without the desperate hurry to conclude.
</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-outline">Pillar: Growth</span>
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Curiosity', '5')" type="button">Add personal rationale</button>
</div>
</article>
<!-- Item 6 -->
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="6" draggable="true">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">5</div>
</div>
<div class="flex items-center space-x-1 text-on-surface-variant">
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
</button>
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
</button>
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
</div>
</div>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Integrity</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
Wholeness in private conduct; matching private conviction with public stance.
</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-outline">Pillar: Alignment</span>
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Integrity', '6')" type="button">Add personal rationale</button>
</div>
</article><article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="2" draggable="true">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">6</div>
<span class="font-label-sm text-label-sm text-outline font-medium">Secondary Anchor</span>
</div>
<div class="flex items-center space-x-1 text-on-surface-variant">
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
</button>
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
</button>
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
</div>
</div>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Courage</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
Entering the uncertain room, speaking the tender truth despite physical trembling.
</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-outline">Pillar: Action</span>
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Courage', '2')" type="button">Add personal rationale</button>
</div>
</article>
<!-- Item 7 -->
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="7" draggable="true">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">7</div>
</div>
<div class="flex items-center space-x-1 text-on-surface-variant">
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
</button>
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
</button>
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
</div>
</div>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Connection</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
Deep, unhurried presence that allows another soul to feel seen and held.
</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-outline">Pillar: Relational</span>
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Connection', '7')" type="button">Add personal rationale</button>
</div>
</article>
<!-- Item 8 -->
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="8" draggable="true">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2.5">
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">8</div>
</div>
<div class="flex items-center space-x-1 text-on-surface-variant">
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
</button>
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
</button>
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
</div>
</div>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Creativity</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
The quiet joy of shaping raw experience into form, word, or tangible craft.
</p>
</div>
<div class="flex items-center justify-between pt-1">
<span class="font-label-sm text-label-sm text-outline">Pillar: Self-Expression</span>
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Creativity', '8')" type="button">Add personal rationale</button>
</div>
</article>
</div>
<!-- Add from sorted piles action -->
<button class="mt-4 w-full py-3.5 px-4 rounded-lg bg-surface-container-low text-on-surface-variant flex items-center justify-center space-x-2 font-label-md text-label-md transition-colors active:bg-surface-container-high" onclick="togglePileSheet()" type="button">
<span class="material-symbols-outlined text-[18px]">add_circle</span>
<span class="">Pull another value from 'Important' pile</span>
</button>
<!-- Reflection Callout Box -->
<div class="mt-6 rounded-lg bg-surface-container p-4 flex space-x-3.5 shadow-sm">
<div class="w-8 h-8 rounded-full bg-secondary/15 text-secondary flex items-center justify-center flex-shrink-0 mt-0.5">
<span class="material-symbols-outlined text-[18px]">psychology_alt</span>
</div>
<div class="flex-1">
<h3 class="font-headline-md text-[17px] text-on-surface">Gentle Inquiry</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">
Notice where inner resistance surfaces. Are you ranking what you <em>truly</em> value, or what you feel you <em>should</em> value for others?
</p>
</div>
</div>
<!-- Secondary Reflective Imagery Accent -->
<div class="mt-5 rounded-lg overflow-hidden bg-surface-container-low p-4 flex items-center space-x-4 shadow-sm">
<div class="flex-1">
<p class="font-label-sm text-label-sm text-tertiary uppercase tracking-wider font-semibold">Stage Insight</p>
<p class="font-headline-md text-[16px] text-on-surface mt-1 leading-snug">
"When values conflict under pressure, #1 determines your immediate direction."
</p>
</div>
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 bg-surface-container">
<img class="w-full h-full object-cover" data-alt="Warm ceramic vessel resting beside dry meadow grass on handcrafted linen background with contemplative gentle sunlight in muted terracotta tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIibaS4hwL-2jGWWTqf_pQJzU-KHkI-0vmbMMYQ11vuGGKomTPwa3vX1M4ozxfJwuTDpCGJpxyvYwrE-yLV1HOzHdQEKL_iWpaeNnPK73O6DOoD-28XHwmzQpJ0dmwu0qfzBTCRngNOqNLG6jADnkDi4PUKSw83cpPmU3HKyRC-ZEc_QzSzyUUR0SrR9y60_IllXLFkw3fkI5c_R_XV9FqTzhjiV7b5CdPcBoopqcT6bJ5xcdhQ168">
</div>
</div>
<!-- Bottom Floating CTA Container -->
<div class="sticky bottom-3 mt-8 bg-surface/90 backdrop-blur-md p-2 rounded-full shadow-xl flex items-center justify-between space-x-2">
<button aria-label="How sorting works" class="w-12 h-12 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant active:scale-95 transition-transform" onclick="showHelpSnackbar()" type="button">
<span class="material-symbols-outlined text-[20px]">help_outline</span>
</button>
<button class="flex-1 h-12 px-6 rounded-full bg-primary text-on-primary font-label-lg text-label-lg flex items-center justify-center space-x-2 shadow-md active:opacity-90 transition-opacity" onclick="continueToReflection()" type="button">
<span class="">Lock &amp; Continue</span>
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
<!-- Modals and Drawers (Hidden by default) -->
<!-- 1. Reflection / Rationale Modal Sheet -->
<div class="fixed inset-0 z-50 bg-inverse-surface/40 backdrop-blur-sm hidden flex items-end justify-center" id="rationaleModal">
<div class="w-full max-w-lg bg-surface-container-lowest rounded-t-xl p-margin-mobile shadow-2xl flex flex-col space-y-4 max-h-[85vh] overflow-y-auto">
<div class="w-10 h-1 rounded-full bg-outline-variant mx-auto self-center mb-1"></div>
<div class="flex justify-between items-start">
<div>
<span class="font-label-sm text-label-sm text-secondary uppercase font-semibold" id="modalRankBadge">Value #1</span>
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface" id="modalValueName">Authenticity</h2>
</div>
<button class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant" onclick="closeRationaleModal()" type="button">
<span class="material-symbols-outlined text-[18px]">close</span>
</button>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Why does this value occupy this exact rank? When was the last time you honored or compromised it?
</p>
<textarea class="w-full p-3.5 rounded-lg bg-surface-container-low text-on-surface font-body-sm text-body-sm outline-none resize-none placeholder-outline" placeholder="Write your personal reflections or lived example here..." rows="4"></textarea>
<div class="flex items-center justify-end space-x-2 pt-2">
<button class="px-4 py-2.5 rounded-full bg-surface-container text-on-surface font-label-md text-label-md" onclick="closeRationaleModal()" type="button">Cancel</button>
<button class="px-5 py-2.5 rounded-full bg-primary text-on-primary font-label-md text-label-md" onclick="saveRationale()" type="button">Save Note</button>
</div>
</div>
</div>
<!-- 2. View All Piles Drawer -->
<div class="fixed inset-0 z-50 bg-inverse-surface/40 backdrop-blur-sm flex items-end justify-center hidden" id="pilesSheet">
<div class="w-full max-w-lg bg-surface-container rounded-t-xl p-margin-mobile shadow-2xl flex flex-col space-y-4 max-h-[88vh] overflow-y-auto">
<div class="w-10 h-1 rounded-full bg-outline-variant mx-auto self-center mb-1"></div>
<div class="flex justify-between items-center">
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">All 5 Sorting Piles</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant">100 Original Values Distributed</p>
</div>
<button class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant" onclick="togglePileSheet()" type="button">
<span class="material-symbols-outlined text-[18px]">close</span>
</button>
</div>
<!-- Pile mini summaries -->
<div class="space-y-2.5">
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
<div class="flex items-center space-x-2.5">
<span class="w-3 h-3 rounded-full bg-secondary"></span>
<div>
<p class="font-headline-md text-[17px] text-on-surface">Always True for Me (Top Tier)</p>
<p class="font-label-sm text-label-sm text-outline">8 cards selected (Active in rank order)</p>
</div>
</div>
<span class="font-label-md text-label-md text-secondary font-semibold">8</span>
</div>
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
<div class="flex items-center space-x-2.5">
<span class="w-3 h-3 rounded-full bg-tertiary"></span>
<div>
<p class="font-headline-md text-[17px] text-on-surface">Very Important</p>
<p class="font-label-sm text-label-sm text-outline">Wisdom, Resilience, Humility, Patience...</p>
</div>
</div>
<span class="font-label-md text-label-md text-on-surface-variant font-semibold">18</span>
</div>
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
<div class="flex items-center space-x-2.5">
<span class="w-3 h-3 rounded-full bg-outline-variant"></span>
<div>
<p class="font-headline-md text-[17px] text-on-surface">Important to Me</p>
<p class="font-label-sm text-label-sm text-outline">Craft, Adventure, Security, Precision...</p>
</div>
</div>
<span class="font-label-md text-label-md text-on-surface-variant font-semibold">32</span>
</div>
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
<div class="flex items-center space-x-2.5">
<span class="w-3 h-3 rounded-full bg-surface-variant"></span>
<div>
<p class="font-headline-md text-[17px] text-on-surface">Somewhat Important</p>
<p class="font-label-sm text-label-sm text-outline">Tradition, Recognition, Predictability...</p>
</div>
</div>
<span class="font-label-md text-label-md text-on-surface-variant font-semibold">24</span>
</div>
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
<div class="flex items-center space-x-2.5">
<span class="w-3 h-3 rounded-full bg-surface-dim"></span>
<div>
<p class="font-headline-md text-[17px] text-on-surface">Not Central to My Life</p>
<p class="font-label-sm text-label-sm text-outline">Authority, Fame, Conformity, Competition...</p>
</div>
</div>
<span class="font-label-md text-label-md text-on-surface-variant font-semibold">18</span>
</div>
</div>
<button class="w-full py-3 rounded-full bg-primary text-on-primary font-label-lg text-label-lg mt-2" onclick="togglePileSheet()" type="button">
Return to Ordering
</button>
</div>
</div>
<!-- Toast / Feedback message container -->
<div class="fixed top-5 left-1/2 -translate-x-1/2 z-50 bg-inverse-surface text-inverse-on-surface font-label-md text-label-md px-4 py-2 rounded-full shadow-lg transition-opacity duration-300 flex items-center space-x-2 opacity-0 pointer-events-none" id="toastMessage">
<span class="material-symbols-outlined text-[16px] text-secondary-fixed">check_circle</span>
<span id="toastText" class="">New hierarchy saved</span>
</div>
</div>
<script>
// Dynamic Reordering Functions
function moveRank(button, direction) {
const card = button.closest('.rank-card');
const parent = card.parentElement;
if (direction === -1) {
const prev = card.previousElementSibling;
if (prev) {
parent.insertBefore(card, prev);
triggerHapticVisual(card);
}
} else if (direction === 1) {
const next = card.nextElementSibling;
if (next) {
parent.insertBefore(next, card);
triggerHapticVisual(card);
}
}
recalculateRanks();
}
function recalculateRanks() {
const cards = document.querySelectorAll('#rankList .rank-card');
cards.forEach((card, idx) => {
const rankNum = idx + 1;
const badge = card.querySelector('.rank-num');
if (badge) {
badge.textContent = rankNum;
}
// Rank 1 gets the highlighted North Star treatment
if (rankNum === 1) {
card.classList.remove('bg-surface-container');
card.classList.add('bg-surface-container-lowest');
badge.className = 'w-7 h-7 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center font-label-md text-label-md font-bold rank-num';
// Ensure North Star Tag
if (!card.querySelector('.north-star-tag')) {
const headerLeft = card.querySelector('.flex.items-center.space-x-2\\.5');
const tag = document.createElement('div');
tag.className = 'north-star-tag inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full bg-secondary/10 text-secondary text-label-sm font-label-sm';
tag.innerHTML = '<span class="material-symbols-outlined text-[12px]" style="font-variation-settings: \'FILL\' 1;">star</span><span>Primary North Star</span>';
headerLeft.appendChild(tag);
}
} else {
card.classList.add('bg-surface-container');
card.classList.remove('bg-surface-container-lowest');
badge.className = 'w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num';
const existingTag = card.querySelector('.north-star-tag');
if (existingTag) {
existingTag.remove();
}
}
});
}
function triggerHapticVisual(element) {
element.classList.add('scale-[1.01]', 'shadow-md');
setTimeout(() => {
element.classList.remove('scale-[1.01]', 'shadow-md');
}, 200);
}
// Modals & Bottom Sheets
function togglePileSheet() {
const sheet = document.getElementById('pilesSheet');
sheet.classList.toggle('hidden');
}
function openRationaleModal(valueName, rank) {
document.getElementById('modalValueName').textContent = valueName;
document.getElementById('modalRankBadge').textContent = 'Value #' + rank;
document.getElementById('rationaleModal').classList.remove('hidden');
}
function closeRationaleModal() {
document.getElementById('rationaleModal').classList.add('hidden');
}
function saveRationale() {
closeRationaleModal();
showToast('Reflection note preserved');
}
function continueToReflection() {
showToast('Values hierarchy locked. Proceeding...');
}
function showHelpSnackbar() {
showToast('Drag handles or tap arrows to sort');
}
function showToast(text) {
const toast = document.getElementById('toastMessage');
const toastText = document.getElementById('toastText');
toastText.textContent = text;
toast.classList.remove('opacity-0', 'pointer-events-none');
setTimeout(() => {
toast.classList.add('opacity-0', 'pointer-events-none');
}, 2200);
}
// Touch Drag Emulation / Simple drag sorting setup
let draggedCard = null;
const rankList = document.getElementById('rankList');
rankList.addEventListener('dragstart', (e) => {
draggedCard = e.target.closest('.rank-card');
if (draggedCard) {
e.dataTransfer.effectAllowed = 'move';
draggedCard.classList.add('opacity-50');
}
});
rankList.addEventListener('dragover', (e) => {
e.preventDefault();
const targetCard = e.target.closest('.rank-card');
if (targetCard && targetCard !== draggedCard) {
const rect = targetCard.getBoundingClientRect();
const next = (e.clientY - rect.top) / (rect.bottom - rect.top) > 0.5;
rankList.insertBefore(draggedCard, next ? targetCard.nextSibling : targetCard);
recalculateRanks();
}
});
rankList.addEventListener('dragend', () => {
if (draggedCard) {
draggedCard.classList.remove('opacity-50');
draggedCard = null;
recalculateRanks();
showToast('New hierarchy saved');
}
});
// Enable drag attribute on cards
document.querySelectorAll('.rank-card').forEach(card => {
card.setAttribute('draggable', 'true');
});
</script></main>
</body></html>