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
+467
View File
@@ -0,0 +1,467 @@
<!DOCTYPE html>
<html lang="en"><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><style>
body {
min-height: max(884px, 100dvh);
}
</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 pb-space-xl">
<!-- Header Intro -->
<header class="pt-space-sm pb-space-md">
<div class="flex items-center justify-between gap-gutter">
<div class="inline-flex items-center gap-space-xs px-space-sm py-0.5 rounded-full bg-surface-container text-on-surface-variant font-label-sm text-label-sm">
<span>Step 3 of 5</span>
<span class="w-1 h-1 rounded-full bg-outline"></span>
<span>Reviewing Group</span>
</div>
<button aria-label="Values guide" class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-surface-container-high transition-colors" type="button">
<span class="material-symbols-outlined text-[18px]">info</span>
</button>
</div>
<h1 class="font-headline-lg-mobile sm:font-headline-lg text-headline-lg-mobile sm:text-headline-lg text-on-surface mt-space-sm mb-space-xs">
Values Sort — Important Cards (Pile 3)
</h1>
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xl">
32 values considered meaningful, though secondary to your core anchors.
</p>
</header>
<!-- Pile Navigation Pill Track -->
<nav aria-label="Value Piles" class="w-full overflow-x-auto -mx-margin-mobile sm:-mx-margin px-margin-mobile sm:px-margin pb-space-sm pt-space-xs flex items-center gap-space-xs">
<button class="whitespace-nowrap px-space-md py-space-xs rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high transition-all flex items-center gap-1.5 font-label-md text-label-md" type="button">
<span>Most</span>
<span class="px-1.5 py-0.5 rounded-full bg-surface-container-high text-[11px] font-label-sm">8</span>
</button>
<button class="whitespace-nowrap px-space-md py-space-xs rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high transition-all flex items-center gap-1.5 font-label-md text-label-md" type="button">
<span>Very</span>
<span class="px-1.5 py-0.5 rounded-full bg-surface-container-high text-[11px] font-label-sm">18</span>
</button>
<button aria-current="page" class="whitespace-nowrap px-space-md py-space-xs rounded-full bg-primary text-on-primary shadow-sm flex items-center gap-1.5 font-label-md text-label-md" type="button">
<span>Important</span>
<span class="px-1.5 py-0.5 rounded-full bg-surface/20 text-on-primary text-[11px] font-label-sm">32</span>
</button>
<button class="whitespace-nowrap px-space-md py-space-xs rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high transition-all flex items-center gap-1.5 font-label-md text-label-md" type="button">
<span>Somewhat</span>
<span class="px-1.5 py-0.5 rounded-full bg-surface-container-high text-[11px] font-label-sm">24</span>
</button>
<button class="whitespace-nowrap px-space-md py-space-xs rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high transition-all flex items-center gap-1.5 font-label-md text-label-md" type="button">
<span>Not</span>
<span class="px-1.5 py-0.5 rounded-full bg-surface-container-high text-[11px] font-label-sm">18</span>
</button>
</nav>
<!-- Search & Domain Filter Bar -->
<section aria-label="Search and Filter" class="mt-space-sm mb-space-md flex flex-col gap-space-sm">
<div class="relative w-full">
<span class="material-symbols-outlined absolute left-space-md top-1/2 -translate-y-1/2 text-outline text-[20px] pointer-events-none">search</span>
<input class="w-full pl-11 pr-space-md py-2.5 rounded-full bg-surface-container text-on-surface placeholder:text-outline font-body-sm text-body-sm focus:outline-none focus:bg-surface-container-high transition-colors" id="value-search-input" placeholder="Search within 32 values..." type="search"/>
</div>
<!-- Domain Chips -->
<div class="flex items-center gap-space-xs overflow-x-auto pb-1" id="domain-filters">
<button class="domain-btn active whitespace-nowrap px-space-sm py-1 rounded-full bg-primary-container text-on-primary-container font-label-sm text-label-sm transition-colors" data-domain="all" type="button">
All Domains
</button>
<button class="domain-btn whitespace-nowrap px-space-sm py-1 rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high font-label-sm text-label-sm transition-colors" data-domain="Presence" type="button">
Presence (7)
</button>
<button class="domain-btn whitespace-nowrap px-space-sm py-1 rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high font-label-sm text-label-sm transition-colors" data-domain="Growth" type="button">
Growth (9)
</button>
<button class="domain-btn whitespace-nowrap px-space-sm py-1 rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high font-label-sm text-label-sm transition-colors" data-domain="Connection" type="button">
Connection (6)
</button>
<button class="domain-btn whitespace-nowrap px-space-sm py-1 rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high font-label-sm text-label-sm transition-colors" data-domain="Agency" type="button">
Agency (5)
</button>
<button class="domain-btn whitespace-nowrap px-space-sm py-1 rounded-full bg-surface-container text-on-surface-variant hover:bg-surface-container-high font-label-sm text-label-sm transition-colors" data-domain="Community" type="button">
Community (5)
</button>
</div>
</section>
<!-- Active Card List -->
<section aria-label="Important Values List" class="flex flex-col gap-space-sm" id="values-stream">
<!-- Card 1 -->
<article class="value-card bg-surface-container-low p-space-md rounded-lg shadow-sm flex flex-col gap-space-sm transition-all" data-domain="Presence" data-value-name="Equanimity">
<div class="flex items-start justify-between gap-gutter">
<div class="flex flex-col gap-1 min-w-0">
<span class="inline-block self-start px-2 py-0.5 rounded-full bg-tertiary-fixed text-on-tertiary-fixed font-label-sm text-label-sm">
Presence
</span>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">
Equanimity
</h2>
</div>
<div class="flex items-center gap-space-xs shrink-0 pt-0.5">
<button class="px-space-sm py-1.5 rounded-full bg-surface-container hover:bg-surface-container-high text-on-surface font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openPromoteDialog('Equanimity')" title="Promote to a higher priority pile" type="button">
<span class="material-symbols-outlined text-[16px] text-primary">arrow_upward</span>
<span>Promote</span>
</button>
<button class="px-space-sm py-1.5 rounded-full text-secondary hover:bg-secondary-fixed/40 font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openDemoteDrawer('Equanimity', 'Presence')" title="Demote to lower priority pile" type="button">
<span class="material-symbols-outlined text-[16px]">arrow_downward</span>
<span>Demote</span>
</button>
</div>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Maintaining inner balance and composure regardless of external turmoil or unexpected storms.
</p>
</article>
<!-- Card 2 -->
<article class="value-card bg-surface-container-low p-space-md rounded-lg shadow-sm flex flex-col gap-space-sm transition-all" data-domain="Growth" data-value-name="Curiosity">
<div class="flex items-start justify-between gap-gutter">
<div class="flex flex-col gap-1 min-w-0">
<span class="inline-block self-start px-2 py-0.5 rounded-full bg-secondary-fixed text-on-secondary-fixed font-label-sm text-label-sm">
Growth
</span>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">
Curiosity
</h2>
</div>
<div class="flex items-center gap-space-xs shrink-0 pt-0.5">
<button class="px-space-sm py-1.5 rounded-full bg-surface-container hover:bg-surface-container-high text-on-surface font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openPromoteDialog('Curiosity')" title="Promote to a higher priority pile" type="button">
<span class="material-symbols-outlined text-[16px] text-primary">arrow_upward</span>
<span>Promote</span>
</button>
<button class="px-space-sm py-1.5 rounded-full text-secondary hover:bg-secondary-fixed/40 font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openDemoteDrawer('Curiosity', 'Growth')" title="Demote to lower priority pile" type="button">
<span class="material-symbols-outlined text-[16px]">arrow_downward</span>
<span>Demote</span>
</button>
</div>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Approaching unknown frontiers with open wonder and eager inquiry rather than hasty assumptions.
</p>
</article>
<!-- Card 3 -->
<article class="value-card bg-surface-container-low p-space-md rounded-lg shadow-sm flex flex-col gap-space-sm transition-all" data-domain="Connection" data-value-name="Sincerity">
<div class="flex items-start justify-between gap-gutter">
<div class="flex flex-col gap-1 min-w-0">
<span class="inline-block self-start px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed font-label-sm text-label-sm">
Connection
</span>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">
Sincerity
</h2>
</div>
<div class="flex items-center gap-space-xs shrink-0 pt-0.5">
<button class="px-space-sm py-1.5 rounded-full bg-surface-container hover:bg-surface-container-high text-on-surface font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openPromoteDialog('Sincerity')" title="Promote to a higher priority pile" type="button">
<span class="material-symbols-outlined text-[16px] text-primary">arrow_upward</span>
<span>Promote</span>
</button>
<button class="px-space-sm py-1.5 rounded-full text-secondary hover:bg-secondary-fixed/40 font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openDemoteDrawer('Sincerity', 'Connection')" title="Demote to lower priority pile" type="button">
<span class="material-symbols-outlined text-[16px]">arrow_downward</span>
<span>Demote</span>
</button>
</div>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Living and communicating without pretense, honoring what is genuine between ourselves and others.
</p>
</article>
<!-- Card 4 -->
<article class="value-card bg-surface-container-low p-space-md rounded-lg shadow-sm flex flex-col gap-space-sm transition-all" data-domain="Agency" data-value-name="Autonomy">
<div class="flex items-start justify-between gap-gutter">
<div class="flex flex-col gap-1 min-w-0">
<span class="inline-block self-start px-2 py-0.5 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">
Agency
</span>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">
Autonomy
</h2>
</div>
<div class="flex items-center gap-space-xs shrink-0 pt-0.5">
<button class="px-space-sm py-1.5 rounded-full bg-surface-container hover:bg-surface-container-high text-on-surface font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openPromoteDialog('Autonomy')" title="Promote to a higher priority pile" type="button">
<span class="material-symbols-outlined text-[16px] text-primary">arrow_upward</span>
<span>Promote</span>
</button>
<button class="px-space-sm py-1.5 rounded-full text-secondary hover:bg-secondary-fixed/40 font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openDemoteDrawer('Autonomy', 'Agency')" title="Demote to lower priority pile" type="button">
<span class="material-symbols-outlined text-[16px]">arrow_downward</span>
<span>Demote</span>
</button>
</div>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
The freedom to direct one’s own destiny, making choices grounded in authentic personal conviction.
</p>
</article>
<!-- Card 5 -->
<article class="value-card bg-surface-container-low p-space-md rounded-lg shadow-sm flex flex-col gap-space-sm transition-all" data-domain="Community" data-value-name="Hospitality">
<div class="flex items-start justify-between gap-gutter">
<div class="flex flex-col gap-1 min-w-0">
<span class="inline-block self-start px-2 py-0.5 rounded-full bg-tertiary-fixed text-on-tertiary-fixed font-label-sm text-label-sm">
Community
</span>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">
Hospitality
</h2>
</div>
<div class="flex items-center gap-space-xs shrink-0 pt-0.5">
<button class="px-space-sm py-1.5 rounded-full bg-surface-container hover:bg-surface-container-high text-on-surface font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openPromoteDialog('Hospitality')" title="Promote to a higher priority pile" type="button">
<span class="material-symbols-outlined text-[16px] text-primary">arrow_upward</span>
<span>Promote</span>
</button>
<button class="px-space-sm py-1.5 rounded-full text-secondary hover:bg-secondary-fixed/40 font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openDemoteDrawer('Hospitality', 'Community')" title="Demote to lower priority pile" type="button">
<span class="material-symbols-outlined text-[16px]">arrow_downward</span>
<span>Demote</span>
</button>
</div>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Extending warm physical and emotional sanctuary to neighbors, wanderers, and dear companions.
</p>
</article>
<!-- Card 6 -->
<article class="value-card bg-surface-container-low p-space-md rounded-lg shadow-sm flex flex-col gap-space-sm transition-all" data-domain="Growth" data-value-name="Craftsmanship">
<div class="flex items-start justify-between gap-gutter">
<div class="flex flex-col gap-1 min-w-0">
<span class="inline-block self-start px-2 py-0.5 rounded-full bg-secondary-fixed text-on-secondary-fixed font-label-sm text-label-sm">
Growth
</span>
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">
Craftsmanship
</h2>
</div>
<div class="flex items-center gap-space-xs shrink-0 pt-0.5">
<button class="px-space-sm py-1.5 rounded-full bg-surface-container hover:bg-surface-container-high text-on-surface font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openPromoteDialog('Craftsmanship')" title="Promote to a higher priority pile" type="button">
<span class="material-symbols-outlined text-[16px] text-primary">arrow_upward</span>
<span>Promote</span>
</button>
<button class="px-space-sm py-1.5 rounded-full text-secondary hover:bg-secondary-fixed/40 font-label-md text-label-md flex items-center gap-1 transition-colors" onclick="openDemoteDrawer('Craftsmanship', 'Growth')" title="Demote to lower priority pile" type="button">
<span class="material-symbols-outlined text-[16px]">arrow_downward</span>
<span>Demote</span>
</button>
</div>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">
Devoting unhurried patience to shaping work with precision, care, and silent dedication.
</p>
</article>
</section>
<!-- Empty state for search filter (hidden by default) -->
<div class="hidden flex-col items-center justify-center text-center p-space-xl bg-surface-container-low rounded-lg mt-space-sm" id="no-results-state">
<span class="material-symbols-outlined text-outline text-3xl mb-space-xs">filter_vintage</span>
<h3 class="font-headline-md text-headline-md text-on-surface">No values matched</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Try another keyword or select All Domains above.</p>
</div>
<!-- Contemplative Sticky Bottom Summary Bar -->
<div class="sticky bottom-3 mt-space-lg w-full z-10">
<div class="w-full bg-surface-container-highest/95 backdrop-blur-md p-space-sm rounded-full shadow-md flex items-center justify-between gap-space-xs">
<button class="px-space-md py-2.5 rounded-full bg-surface-container text-on-surface hover:bg-surface-container-high font-label-md text-label-md flex items-center gap-1.5 transition-colors" onclick="reviewOtherPiles()" type="button">
<span class="material-symbols-outlined text-[18px]">view_carousel</span>
<span>Review Other Piles</span>
</button>
<button class="px-space-lg py-2.5 rounded-full bg-primary text-on-primary hover:bg-primary-container font-label-md text-label-md shadow-sm flex items-center gap-1.5 transition-colors ml-auto" onclick="returnToRankFlow()" type="button">
<span>Return to Rank Flow</span>
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</div>
<!-- Demote Bottom Sheet Drawer (Hidden initially) -->
<div class="fixed inset-0 bg-inverse-surface/40 backdrop-blur-xs opacity-0 pointer-events-none transition-opacity duration-300 z-40" id="demote-sheet-backdrop" onclick="closeDemoteDrawer()"></div>
<aside aria-labelledby="demote-sheet-title" aria-modal="true" class="fixed bottom-0 left-0 right-0 max-w-lg mx-auto bg-surface-container-low rounded-t-xl shadow-xl transform translate-y-full transition-transform duration-300 ease-out z-50 p-margin-mobile sm:p-margin flex flex-col gap-space-md" id="demote-sheet" role="dialog">
<!-- Drag Handle -->
<div class="w-12 h-1 rounded-full bg-outline-variant mx-auto -mt-1 cursor-grab" onclick="closeDemoteDrawer()"></div>
<div class="flex items-start justify-between gap-gutter">
<div>
<span class="font-label-sm text-label-sm text-secondary uppercase tracking-wider">Demote Value</span>
<h3 class="font-headline-md text-headline-md text-on-surface mt-0.5" id="demote-sheet-title">
Move “<span id="drawer-value-name">Value</span>”
</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">
Select a lower pile to place this value in gently. You can adjust this at any stage.
</p>
</div>
<button aria-label="Close sheet" class="w-9 h-9 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-surface-container-high transition-colors" onclick="closeDemoteDrawer()" type="button">
<span class="material-symbols-outlined text-[20px]">close</span>
</button>
</div>
<!-- Move Destinations -->
<div class="flex flex-col gap-space-xs pt-space-xs">
<!-- Pile 2 -->
<button class="w-full text-left p-space-md rounded-DEFAULT bg-surface hover:bg-surface-container transition-colors flex items-center justify-between" onclick="executeDemote('Pile 2: Somewhat Important')" type="button">
<div class="flex flex-col">
<div class="flex items-center gap-space-xs">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
<span class="font-label-lg text-label-lg text-on-surface">Pile 2: Somewhat Important</span>
</div>
<span class="font-body-sm text-body-sm text-on-surface-variant mt-0.5 pl-3">Holds worth, but not actively prioritized right now (24 values)</span>
</div>
<span class="material-symbols-outlined text-outline">south</span>
</button>
<!-- Pile 1 -->
<button class="w-full text-left p-space-md rounded-DEFAULT bg-surface hover:bg-surface-container transition-colors flex items-center justify-between" onclick="executeDemote('Pile 1: Not Important')" type="button">
<div class="flex flex-col">
<div class="flex items-center gap-space-xs">
<span class="w-2 h-2 rounded-full bg-outline"></span>
<span class="font-label-lg text-label-lg text-on-surface">Pile 1: Not Important</span>
</div>
<span class="font-body-sm text-body-sm text-on-surface-variant mt-0.5 pl-3">Values that rarely drive your current life choices (18 values)</span>
</div>
<span class="material-symbols-outlined text-outline">keyboard_double_arrow_down</span>
</button>
<!-- Move to custom pile -->
<button class="w-full text-center py-space-sm font-label-md text-label-md text-on-surface-variant hover:text-on-surface transition-colors mt-space-xs" onclick="executeDemote('Custom Pile Selection')" type="button">
Move to another pile…
</button>
</div>
</aside>
<!-- Notification Toast -->
<div class="fixed top-4 left-1/2 -translate-x-1/2 bg-inverse-surface text-inverse-on-surface px-space-md py-2 rounded-full shadow-lg font-body-sm text-body-sm opacity-0 pointer-events-none transition-all duration-300 z-50 flex items-center gap-2" id="toast-msg">
<span class="material-symbols-outlined text-[18px] text-tertiary-fixed">check_circle</span>
<span id="toast-text">Value moved</span>
</div>
</div>
<script>
let activeValueForDemote = null;
function openDemoteDrawer(valueName, domain) {
activeValueForDemote = valueName;
const nameHolder = document.getElementById('drawer-value-name');
if (nameHolder) nameHolder.textContent = valueName;
const sheet = document.getElementById('demote-sheet');
const backdrop = document.getElementById('demote-sheet-backdrop');
if (sheet && backdrop) {
backdrop.classList.remove('opacity-0', 'pointer-events-none');
backdrop.classList.add('opacity-100', 'pointer-events-auto');
sheet.classList.remove('translate-y-full');
sheet.classList.add('translate-y-0');
}
}
function closeDemoteDrawer() {
const sheet = document.getElementById('demote-sheet');
const backdrop = document.getElementById('demote-sheet-backdrop');
if (sheet && backdrop) {
backdrop.classList.remove('opacity-100', 'pointer-events-auto');
backdrop.classList.add('opacity-0', 'pointer-events-none');
sheet.classList.remove('translate-y-0');
sheet.classList.add('translate-y-full');
}
}
function executeDemote(targetPile) {
if (!activeValueForDemote) return;
const valName = activeValueForDemote;
closeDemoteDrawer();
// Softly remove card from UI list with animation
const cards = document.querySelectorAll('.value-card');
cards.forEach(card => {
if (card.getAttribute('data-value-name') === valName) {
card.style.opacity = '0';
card.style.transform = 'translateY(12px)';
setTimeout(() => {
card.remove();
checkRemainingCards();
}, 250);
}
});
showToast(`Moved "${valName}" to ${targetPile}`);
}
function openPromoteDialog(valName) {
showToast(`Promoted "${valName}" to Pile 4: Very Important`);
// Animate removal from Important
const cards = document.querySelectorAll('.value-card');
cards.forEach(card => {
if (card.getAttribute('data-value-name') === valName) {
card.style.opacity = '0';
card.style.transform = 'translateY(-12px)';
setTimeout(() => {
card.remove();
checkRemainingCards();
}, 250);
}
});
}
function showToast(message) {
const toast = document.getElementById('toast-msg');
const toastText = document.getElementById('toast-text');
if (!toast || !toastText) return;
toastText.textContent = message;
toast.classList.remove('opacity-0', 'pointer-events-none');
toast.classList.add('opacity-100', 'pointer-events-auto');
setTimeout(() => {
toast.classList.remove('opacity-100', 'pointer-events-auto');
toast.classList.add('opacity-0', 'pointer-events-none');
}, 2800);
}
function checkRemainingCards() {
const visibleCards = document.querySelectorAll('.value-card');
const noResults = document.getElementById('no-results-state');
if (visibleCards.length === 0 && noResults) {
noResults.classList.remove('hidden');
noResults.classList.add('flex');
}
}
function reviewOtherPiles() {
showToast("Opening pile overview overview...");
}
function returnToRankFlow() {
showToast("Returning to Values Prioritization Rank flow...");
}
// Client-side quick search & domain filtering
const searchInput = document.getElementById('value-search-input');
const domainButtons = document.querySelectorAll('.domain-btn');
let selectedDomain = 'all';
function filterCards() {
const query = (searchInput?.value || '').toLowerCase().trim();
const cards = document.querySelectorAll('.value-card');
let visibleCount = 0;
cards.forEach(card => {
const name = (card.getAttribute('data-value-name') || '').toLowerCase();
const domain = card.getAttribute('data-domain') || '';
const text = card.textContent?.toLowerCase() || '';
const matchesQuery = !query || name.includes(query) || text.includes(query);
const matchesDomain = (selectedDomain === 'all') || (domain === selectedDomain);
if (matchesQuery && matchesDomain) {
card.style.display = 'flex';
visibleCount++;
} else {
card.style.display = 'none';
}
});
const noResults = document.getElementById('no-results-state');
if (noResults) {
if (visibleCount === 0) {
noResults.classList.remove('hidden');
noResults.classList.add('flex');
} else {
noResults.classList.add('hidden');
noResults.classList.remove('flex');
}
}
}
if (searchInput) {
searchInput.addEventListener('input', filterCards);
}
domainButtons.forEach(btn => {
btn.addEventListener('click', () => {
domainButtons.forEach(b => {
b.classList.remove('bg-primary-container', 'text-on-primary-container');
b.classList.add('bg-surface-container', 'text-on-surface-variant');
});
btn.classList.add('bg-primary-container', 'text-on-primary-container');
btn.classList.remove('bg-surface-container', 'text-on-surface-variant');
selectedDomain = btn.getAttribute('data-domain') || 'all';
filterCards();
});
});
</script></main></body></html>