Files
valuecards/stitch/screens/important-cards.html
2026-09-18 00:01:42 +02:00

467 lines
30 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"><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>