full app done

This commit is contained in:
davmar
2026-09-18 00:01:42 +02:00
parent 8475abeddb
commit 78fd23f69f
74 changed files with 8104 additions and 1963 deletions
+547
View File
@@ -0,0 +1,547 @@
<!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>