722 lines
54 KiB
HTML
722 lines
54 KiB
HTML
<!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&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"/><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></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 pb-32">
|
||
<!-- Top Bar & Contextual Back Navigation -->
|
||
<div class="px-5 pt-3 pb-4 flex items-center justify-between">
|
||
<button class="inline-flex items-center gap-1.5 text-primary py-1 px-2.5 rounded-full bg-surface-container active:scale-95 transition-transform duration-150" type="button">
|
||
<span class="material-symbols-outlined text-[18px]">arrow_back</span>
|
||
<span class="font-label-md text-label-md">Back to Ranking</span>
|
||
</button>
|
||
<div class="flex items-center gap-1 text-on-surface-variant bg-surface-container px-3 py-1 rounded-full">
|
||
</div>
|
||
</div>
|
||
<!-- Editorial Header & Summary -->
|
||
<header class="px-5 pt-2 pb-5 flex flex-col gap-2">
|
||
<div class="flex items-baseline justify-between">
|
||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">All Sorted Values</h1>
|
||
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-widest bg-surface-container-high px-2.5 py-1 rounded-full">100 Cards</span>
|
||
</div>
|
||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
|
||
A bird’s-eye view of your 100 cards distributed across the 5 reflective piles. Review your intuition or gently rebalance.
|
||
</p>
|
||
<!-- Visual Density Indicator Metric Row -->
|
||
<div class="mt-3 p-4 rounded-2xl bg-surface-container flex flex-col gap-3">
|
||
<div class="flex items-center justify-between font-label-md text-label-md">
|
||
<span class="text-on-surface font-semibold flex items-center gap-1.5">
|
||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||
Distribution Profile
|
||
</span>
|
||
<span class="text-on-surface-variant" id="metric-summary">8 Core Nominees</span>
|
||
</div>
|
||
<!-- Tactile Proportional Pill Bar -->
|
||
<div class="flex h-2.5 w-full rounded-full overflow-hidden bg-surface-container-highest gap-0.5">
|
||
<div class="h-full bg-secondary transition-all" style="width: 8%" title="Most: 8%"></div>
|
||
<div class="h-full bg-secondary-container transition-all" style="width: 18%" title="Very: 18%"></div>
|
||
<div class="h-full bg-tertiary-container transition-all" style="width: 32%" title="Important: 32%"></div>
|
||
<div class="h-full bg-surface-dim transition-all" style="width: 24%" title="Somewhat: 24%"></div>
|
||
<div class="h-full bg-outline-variant transition-all" style="width: 18%" title="Not: 18%"></div>
|
||
</div>
|
||
<div class="flex justify-between items-center text-on-surface-variant font-label-sm text-label-sm pt-0.5">
|
||
<span class="">P5: 8</span>
|
||
<span class="">P4: 18</span>
|
||
<span class="">P3: 32</span>
|
||
<span class="">P2: 24</span>
|
||
<span class="">P1: 18</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- Serene Search / In-situ Query -->
|
||
<div class="px-5 mb-5">
|
||
<div class="relative flex items-center bg-surface-container rounded-2xl px-3.5 py-2.5 shadow-sm transition-all focus-within:bg-surface-container-lowest">
|
||
<span class="material-symbols-outlined text-outline text-[20px] mr-2.5">search</span>
|
||
<input class="bg-transparent text-on-surface placeholder:text-outline text-body-sm font-body-sm w-full outline-none" id="value-search" placeholder="Find where 'Creativity' or 'Peace' rests..." type="text"/>
|
||
<button class="hidden text-outline hover:text-on-surface ml-1 p-0.5" id="clear-search" type="button">
|
||
<span class="material-symbols-outlined text-[18px]">close</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Interactive Horizontal Sticky Pile Scroller -->
|
||
<nav aria-label="Pile quick jump" class="sticky top-0 z-20 bg-surface/95 backdrop-blur-md px-5 py-2.5 mb-4 flex items-center gap-2 overflow-x-auto no-scrollbar">
|
||
<a class="pile-tab active flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-secondary text-on-secondary whitespace-nowrap font-label-md text-label-md shadow-sm transition-all" href="#pile-5">
|
||
<span class="">Most</span>
|
||
<span class="px-1.5 py-0.2 rounded-full bg-on-secondary/20 text-on-secondary font-label-sm text-label-sm" id="tab-p5-count">8</span>
|
||
</a>
|
||
<a class="pile-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface whitespace-nowrap font-label-md text-label-md transition-all" href="#pile-4">
|
||
<span class="">Very</span>
|
||
<span class="px-1.5 py-0.2 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">18</span>
|
||
</a>
|
||
<a class="pile-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface whitespace-nowrap font-label-md text-label-md transition-all" href="#pile-3">
|
||
<span class="">Important</span>
|
||
<span class="px-1.5 py-0.2 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">32</span>
|
||
</a>
|
||
<a class="pile-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface whitespace-nowrap font-label-md text-label-md transition-all" href="#pile-2">
|
||
<span class="">Somewhat</span>
|
||
<span class="px-1.5 py-0.2 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">24</span>
|
||
</a>
|
||
<a class="pile-tab flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface whitespace-nowrap font-label-md text-label-md transition-all" href="#pile-1">
|
||
<span class="">Not</span>
|
||
<span class="px-1.5 py-0.2 rounded-full bg-surface-container-high text-on-surface-variant font-label-sm text-label-sm">18</span>
|
||
</a>
|
||
</nav>
|
||
<!-- Piles Container -->
|
||
<div class="px-5 flex flex-col gap-8" id="piles-list">
|
||
<!-- PILE 5: MOST IMPORTANT (CORE NOMINEES) -->
|
||
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-5">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="flex h-6 w-6 rounded-full bg-secondary text-on-secondary font-label-sm text-label-sm items-center justify-center font-bold">5</span>
|
||
<div>
|
||
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Most Important</h2>
|
||
</div>
|
||
</div>
|
||
<span class="bg-secondary-fixed text-on-secondary-fixed px-2.5 py-0.5 rounded-full font-label-sm text-label-sm font-semibold" id="p5-badge-count">8 cards</span>
|
||
</div>
|
||
<!-- Pile 5 Rich Cards -->
|
||
<div class="grid grid-cols-1 gap-3 mt-1" id="pile-5-items">
|
||
<!-- Authenticity -->
|
||
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Authenticity">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Authenticity</h3>
|
||
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Authenticity" type="button">
|
||
<span>Demote</span>
|
||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||
</button>
|
||
</div>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Living in genuine alignment with inner truth and speaking without pretense or performance.
|
||
</p>
|
||
</article>
|
||
<!-- Courage -->
|
||
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Courage">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Courage</h3>
|
||
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Courage" type="button">
|
||
<span>Demote</span>
|
||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||
</button>
|
||
</div>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Stepping directly into the unknown and acting in alignment with what is right, despite palpable fear.
|
||
</p>
|
||
</article>
|
||
<!-- Compassion -->
|
||
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Compassion">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Compassion</h3>
|
||
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Compassion" type="button">
|
||
<span>Demote</span>
|
||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||
</button>
|
||
</div>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Meeting suffering—in myself and others—with a gentle, unwavering posture of mercy and assistance.
|
||
</p>
|
||
</article>
|
||
<!-- Freedom -->
|
||
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Freedom">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Freedom</h3>
|
||
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Freedom" type="button">
|
||
<span>Demote</span>
|
||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||
</button>
|
||
</div>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Possessing agency over my time, movement, and life path without undue coercion or arbitrary constraints.
|
||
</p>
|
||
</article>
|
||
<!-- Curiosity -->
|
||
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Curiosity">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Curiosity</h3>
|
||
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Curiosity" type="button">
|
||
<span>Demote</span>
|
||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||
</button>
|
||
</div>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Approaching life, people, and puzzles with wonder, humility, and an open thirst for understanding.
|
||
</p>
|
||
</article>
|
||
<!-- Integrity -->
|
||
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Integrity">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Integrity</h3>
|
||
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Integrity" type="button">
|
||
<span>Demote</span>
|
||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||
</button>
|
||
</div>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Upholding moral wholeness and consistency in character when nobody is watching.
|
||
</p>
|
||
</article>
|
||
<!-- Connection -->
|
||
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Connection">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Connection</h3>
|
||
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Connection" type="button">
|
||
<span>Demote</span>
|
||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||
</button>
|
||
</div>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Fostering deep mutual bonds and empathy where souls are seen, understood, and cherished.
|
||
</p>
|
||
</article>
|
||
<!-- Wisdom -->
|
||
<article class="value-item bg-surface-container-low p-4 rounded-2xl shadow-sm flex flex-col gap-2 relative transition-all" data-title="Wisdom">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Wisdom</h3>
|
||
<button class="demote-btn inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-secondary font-label-md text-label-md hover:bg-secondary/10 active:bg-secondary/20 transition-colors" data-value="Wisdom" type="button">
|
||
<span>Demote</span>
|
||
<span class="material-symbols-outlined text-[16px]">expand_more</span>
|
||
</button>
|
||
</div>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Synthesizing deep experience and discernment into mindful, centered action.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
<!-- PILE 4: VERY IMPORTANT -->
|
||
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="flex h-6 w-6 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">4</span>
|
||
<div>
|
||
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Very Important</h2>
|
||
<p class="font-label-sm text-label-sm text-on-surface-variant">Strong priorities shaping everyday rhythms</p>
|
||
</div>
|
||
</div>
|
||
<span class="bg-surface-container-high text-on-surface-variant px-2.5 py-0.5 rounded-full font-label-sm text-label-sm" id="p4-badge-count">18 cards</span>
|
||
</div>
|
||
<div class="p-4 rounded-2xl bg-surface-container flex flex-col gap-3">
|
||
<div class="flex flex-wrap gap-2" id="pile-4-chips">
|
||
<!-- Values Chips with quick promote/demote indicators -->
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Creativity" type="button">
|
||
<span class="">Creativity</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Peace" type="button">
|
||
<span class="">Peace</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Autonomy" type="button">
|
||
<span class="">Autonomy</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Growth" type="button">
|
||
<span class="">Growth</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Kindness" type="button">
|
||
<span class="">Kindness</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Health" type="button">
|
||
<span class="">Health</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Gratitude" type="button">
|
||
<span class="">Gratitude</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Purpose" type="button">
|
||
<span class="">Purpose</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Joy" type="button">
|
||
<span class="">Joy</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Humor" type="button">
|
||
<span class="">Humor</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Resilience" type="button">
|
||
<span class="">Resilience</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Empathy" type="button">
|
||
<span class="">Empathy</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Self-Respect" type="button">
|
||
<span class="">Self-Respect</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Justice" type="button">
|
||
<span class="">Justice</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Generosity" type="button">
|
||
<span class="">Generosity</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Harmony" type="button">
|
||
<span class="">Harmony</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Nature" type="button">
|
||
<span class="">Nature</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
<button class="value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all" data-title="Simplicity" type="button">
|
||
<span class="">Simplicity</span>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[14px]">north</span>
|
||
</button>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="font-label-sm text-label-sm text-outline">Tap chip arrow to promote to Most Important</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- PILE 3: IMPORTANT -->
|
||
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-3">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="flex h-6 w-6 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">3</span>
|
||
<div>
|
||
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Important</h2>
|
||
<p class="font-label-sm text-label-sm text-on-surface-variant">Meaningful aspects kept in calm balance</p>
|
||
</div>
|
||
</div>
|
||
<span class="bg-surface-container-high text-on-surface-variant px-2.5 py-0.5 rounded-full font-label-sm text-label-sm" id="p3-badge-count">32 cards</span>
|
||
</div>
|
||
<div class="p-4 rounded-2xl bg-surface-container flex flex-col gap-3">
|
||
<div class="flex flex-wrap gap-2" id="pile-3-chips">
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Security">Security</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Order">Order</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Adventure">Adventure</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Discipline">Discipline</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Patience">Patience</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Loyalty">Loyalty</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Knowledge">Knowledge</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Beauty">Beauty</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Playfulness">Playfulness</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Solitude">Solitude</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Reliability">Reliability</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Honesty">Honesty</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Openness">Openness</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Mastery">Mastery</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Intimacy">Intimacy</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Balance">Balance</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Presence">Presence</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Acceptance">Acceptance</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Clarity">Clarity</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Modesty">Modesty</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Vitality">Vitality</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Insight">Insight</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Contribution">Contribution</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Depth">Depth</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Cooperation">Cooperation</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Resourcefulness">Resourcefulness</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Adaptability">Adaptability</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Spontaneity">Spontaneity</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Family">Family</span>
|
||
<span class="value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md" data-title="Community">Community</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- PILE 2: SOMEWHAT IMPORTANT -->
|
||
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-2">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="flex h-6 w-6 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">2</span>
|
||
<div>
|
||
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Somewhat Important</h2>
|
||
<p class="font-label-sm text-label-sm text-on-surface-variant">Present, but rarely leading choices</p>
|
||
</div>
|
||
</div>
|
||
<span class="bg-surface-container-high text-on-surface-variant px-2.5 py-0.5 rounded-full font-label-sm text-label-sm">24 cards</span>
|
||
</div>
|
||
<div class="p-4 rounded-2xl bg-surface-container flex flex-col gap-2">
|
||
<div class="flex flex-wrap gap-1.5 opacity-90" id="pile-2-chips">
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Comfort">Comfort</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Tradition">Tradition</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Efficiency">Efficiency</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Leisure">Leisure</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Predictability">Predictability</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Novelty">Novelty</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Ambition">Ambition</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Status">Status</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Precision">Precision</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Competition">Competition</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Thrift">Thrift</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Privacy">Privacy</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Recognition">Recognition</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Power">Power</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Popularity">Popularity</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Conformity">Conformity</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Charm">Charm</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Intensity">Intensity</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Pleasure">Pleasure</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Influence">Influence</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Formality">Formality</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Thrill">Thrill</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Reputation">Reputation</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md" data-title="Speed">Speed</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- PILE 1: NOT IMPORTANT -->
|
||
<section class="pile-group flex flex-col gap-3 scroll-mt-16" id="pile-1">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<span class="flex h-6 w-6 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">1</span>
|
||
<div>
|
||
<h2 class="font-headline-md text-headline-md text-on-surface leading-tight">Not Important</h2>
|
||
<p class="font-label-sm text-label-sm text-on-surface-variant">Consciously released from my life compass</p>
|
||
</div>
|
||
</div>
|
||
<span class="bg-surface-container-high text-on-surface-variant px-2.5 py-0.5 rounded-full font-label-sm text-label-sm">18 cards</span>
|
||
</div>
|
||
<div class="p-4 rounded-2xl bg-surface-container flex flex-col gap-2">
|
||
<div class="flex flex-wrap gap-1.5 opacity-60" id="pile-1-chips">
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Wealth">Wealth</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Fame">Fame</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Authority">Authority</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Luxury">Luxury</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Winning">Winning</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Glamour">Glamour</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Perfection">Perfection</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Control">Control</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Hierarchy">Hierarchy</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Ritual">Ritual</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Dominance">Dominance</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Appearance">Appearance</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Acquisition">Acquisition</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Strictness">Strictness</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Exclusivity">Exclusivity</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Superiority">Superiority</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Pride">Pride</span>
|
||
<span class="value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline" data-title="Publicity">Publicity</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Empty Search State Container (hidden by default) -->
|
||
<div class="hidden flex-col items-center justify-center py-12 px-4 text-center bg-surface-container rounded-2xl" id="empty-state">
|
||
<span class="material-symbols-outlined text-[36px] text-outline mb-2">sentiment_content</span>
|
||
<p class="font-headline-md text-headline-md text-on-surface">No values found</p>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1 max-w-xs">
|
||
Try searching for another keyword or clear the search to view all 100 cards.
|
||
</p>
|
||
<button class="mt-4 px-4 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md" id="reset-search-btn" type="button">
|
||
Show All Piles
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Tactile Sticky Bottom Bar -->
|
||
<aside class="fixed bottom-0 left-0 right-0 z-30 bg-surface/95 backdrop-blur-md px-5 pt-3 pb-safe shadow-xl">
|
||
<div class="max-w-md mx-auto flex flex-col gap-2 pb-3">
|
||
<button class="w-full py-3.5 px-6 rounded-full bg-primary text-on-primary font-label-lg text-label-lg flex items-center justify-center gap-2 shadow-md active:scale-[0.98] transition-transform duration-150" type="button">
|
||
<span class="">Return to Ranking</span>
|
||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
<!-- Demote Bottom Sheet Drawer -->
|
||
<div aria-hidden="true" class="fixed inset-0 z-50 pointer-events-none transition-opacity duration-300 opacity-0" id="demote-sheet-container">
|
||
<!-- Backdrop overlay -->
|
||
<div class="absolute inset-0 bg-inverse-surface/40 backdrop-blur-sm transition-opacity" id="demote-backdrop"></div>
|
||
<!-- Drawer Content -->
|
||
<div class="absolute bottom-0 left-0 right-0 bg-surface rounded-t-3xl shadow-2xl border-t border-outline-variant/30 flex flex-col max-h-[85vh] transform translate-y-full transition-transform duration-300 ease-out pb-safe" id="demote-sheet-panel">
|
||
<!-- Handle bar -->
|
||
<div class="w-full flex justify-center pt-3 pb-1">
|
||
<span class="w-10 h-1 rounded-full bg-outline-variant/60"></span>
|
||
</div>
|
||
<!-- Sheet Header -->
|
||
<div class="px-6 pt-2 pb-4 flex items-start justify-between border-b border-surface-container">
|
||
<div>
|
||
<span class="font-label-sm text-label-sm uppercase tracking-wider text-secondary font-semibold">Demote Value</span>
|
||
<h2 class="font-headline-md text-headline-md text-on-surface mt-0.5" id="demote-sheet-title">Move to pile:</h2>
|
||
</div>
|
||
<button aria-label="Close sheet" class="text-outline hover:text-on-surface p-1 rounded-full bg-surface-container active:scale-95 transition-transform" id="close-demote-sheet" type="button">
|
||
<span class="material-symbols-outlined text-[20px]">close</span>
|
||
</button>
|
||
</div>
|
||
<!-- Piles Selection List -->
|
||
<div class="px-6 py-4 flex flex-col gap-2.5 overflow-y-auto">
|
||
<!-- Destination Pile 4 -->
|
||
<button class="dest-pile-btn flex items-center justify-between p-3.5 rounded-2xl bg-surface-container-low hover:bg-surface-container active:scale-[0.99] border border-transparent hover:border-secondary/20 transition-all text-left group" data-pile="4" data-pile-name="Very Important" type="button">
|
||
<div class="flex items-center gap-3">
|
||
<span class="flex h-7 w-7 rounded-full bg-surface-container-highest text-on-surface font-label-md text-label-md items-center justify-center font-bold">4</span>
|
||
<div>
|
||
<p class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-secondary transition-colors">Pile 4: Very Important</p>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">Deeply held guide</p>
|
||
</div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[20px]">south</span>
|
||
</button>
|
||
<!-- Destination Pile 3 -->
|
||
<button class="dest-pile-btn flex items-center justify-between p-3.5 rounded-2xl bg-surface-container-low hover:bg-surface-container active:scale-[0.99] border border-transparent hover:border-secondary/20 transition-all text-left group" data-pile="3" data-pile-name="Important" type="button">
|
||
<div class="flex items-center gap-3">
|
||
<span class="flex h-7 w-7 rounded-full bg-surface-container-highest text-on-surface font-label-md text-label-md items-center justify-center font-bold">3</span>
|
||
<div>
|
||
<p class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-secondary transition-colors">Pile 3: Important</p>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">Valued aspect</p>
|
||
</div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[20px]">south</span>
|
||
</button>
|
||
<!-- Destination Pile 2 -->
|
||
<button class="dest-pile-btn flex items-center justify-between p-3.5 rounded-2xl bg-surface-container-low hover:bg-surface-container active:scale-[0.99] border border-transparent hover:border-secondary/20 transition-all text-left group" data-pile="2" data-pile-name="Somewhat Important" type="button">
|
||
<div class="flex items-center gap-3">
|
||
<span class="flex h-7 w-7 rounded-full bg-surface-container-highest text-on-surface font-label-md text-label-md items-center justify-center font-bold">2</span>
|
||
<div>
|
||
<p class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-secondary transition-colors">Pile 2: Somewhat Important</p>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">Contextual value</p>
|
||
</div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[20px]">south</span>
|
||
</button>
|
||
<!-- Destination Pile 1 -->
|
||
<button class="dest-pile-btn flex items-center justify-between p-3.5 rounded-2xl bg-surface-container-low hover:bg-surface-container active:scale-[0.99] border border-transparent hover:border-secondary/20 transition-all text-left group" data-pile="1" data-pile-name="Not Important" type="button">
|
||
<div class="flex items-center gap-3">
|
||
<span class="flex h-7 w-7 rounded-full bg-surface-container-highest text-on-surface font-label-sm text-label-sm items-center justify-center font-bold">1</span>
|
||
<div>
|
||
<p class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-secondary transition-colors">Pile 1: Not Important</p>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant">Not a current compass</p>
|
||
</div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-outline group-hover:text-secondary text-[20px]">south</span>
|
||
</button>
|
||
</div>
|
||
<div class="px-6 pt-1 pb-4 text-center">
|
||
<span class="font-label-sm text-label-sm text-outline">You can reorder or bring cards back anytime</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Notification Toast -->
|
||
<div class="fixed top-5 left-1/2 -translate-x-1/2 z-50 pointer-events-none transition-all duration-300 opacity-0 -translate-y-3" id="toast-message">
|
||
<div class="flex items-center gap-2 bg-inverse-surface text-inverse-on-surface px-4 py-2.5 rounded-full shadow-lg font-label-md text-label-md">
|
||
<span class="material-symbols-outlined text-secondary-fixed text-[18px]">check_circle</span>
|
||
<span id="toast-text">Card moved</span>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
(function() {
|
||
const searchInput = document.getElementById('value-search');
|
||
const clearBtn = document.getElementById('clear-search');
|
||
const resetBtn = document.getElementById('reset-search-btn');
|
||
const valueItems = document.querySelectorAll('.value-item');
|
||
const pileGroups = document.querySelectorAll('.pile-group');
|
||
const emptyState = document.getElementById('empty-state');
|
||
const tabs = document.querySelectorAll('.pile-tab');
|
||
|
||
// Demote Drawer Elements
|
||
const sheetContainer = document.getElementById('demote-sheet-container');
|
||
const sheetPanel = document.getElementById('demote-sheet-panel');
|
||
const sheetBackdrop = document.getElementById('demote-backdrop');
|
||
const closeSheetBtn = document.getElementById('close-demote-sheet');
|
||
const sheetTitle = document.getElementById('demote-sheet-title');
|
||
const destPileBtns = document.querySelectorAll('.dest-pile-btn');
|
||
const toast = document.getElementById('toast-message');
|
||
const toastText = document.getElementById('toast-text');
|
||
|
||
let activeCardTitle = '';
|
||
let activeCardElement = null;
|
||
|
||
function openDemoteSheet(cardTitle, cardEl) {
|
||
activeCardTitle = cardTitle;
|
||
activeCardElement = cardEl;
|
||
sheetTitle.textContent = `Move '${cardTitle}' to:`;
|
||
|
||
sheetContainer.classList.remove('pointer-events-none', 'opacity-0');
|
||
sheetContainer.classList.add('opacity-100');
|
||
sheetPanel.classList.remove('translate-y-full');
|
||
sheetPanel.classList.add('translate-y-0');
|
||
}
|
||
|
||
function closeDemoteSheet() {
|
||
sheetPanel.classList.remove('translate-y-0');
|
||
sheetPanel.classList.add('translate-y-full');
|
||
sheetContainer.classList.remove('opacity-100');
|
||
sheetContainer.classList.add('opacity-0');
|
||
setTimeout(() => {
|
||
sheetContainer.classList.add('pointer-events-none');
|
||
}, 300);
|
||
}
|
||
|
||
function showToast(msg) {
|
||
toastText.textContent = msg;
|
||
toast.classList.remove('opacity-0', '-translate-y-3');
|
||
toast.classList.add('opacity-100', 'translate-y-0');
|
||
setTimeout(() => {
|
||
toast.classList.remove('opacity-100', 'translate-y-0');
|
||
toast.classList.add('opacity-0', '-translate-y-3');
|
||
}, 2500);
|
||
}
|
||
|
||
// Attach Demote click handlers
|
||
document.querySelectorAll('.demote-btn').forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
const card = btn.closest('.value-item');
|
||
const valName = btn.getAttribute('data-value') || card.getAttribute('data-title');
|
||
openDemoteSheet(valName, card);
|
||
});
|
||
});
|
||
|
||
// Destination Pile Selection
|
||
destPileBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const destPileNum = btn.getAttribute('data-pile');
|
||
const destPileName = btn.getAttribute('data-pile-name');
|
||
|
||
if (activeCardElement) {
|
||
// Animate removal from pile 5
|
||
activeCardElement.style.transition = 'opacity 0.25s, transform 0.25s';
|
||
activeCardElement.style.opacity = '0';
|
||
activeCardElement.style.transform = 'scale(0.95)';
|
||
|
||
setTimeout(() => {
|
||
activeCardElement.remove();
|
||
|
||
// Append chip to destination pile container
|
||
const destContainer = document.getElementById(`pile-${destPileNum}-chips`);
|
||
if (destContainer) {
|
||
const newChip = document.createElement('span');
|
||
newChip.className = destPileNum === '1'
|
||
? 'value-item px-2.5 py-1 rounded-lg bg-surface-container-highest text-on-surface-variant font-label-md text-label-md line-through decoration-outline transition-all'
|
||
: destPileNum === '2'
|
||
? 'value-item px-2.5 py-1 rounded-lg bg-surface-container-high text-on-surface-variant font-label-md text-label-md transition-all'
|
||
: destPileNum === '3'
|
||
? 'value-item px-3 py-1 rounded-full bg-surface-container-low text-on-surface-variant font-label-md text-label-md transition-all'
|
||
: 'value-item group flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-container-lowest text-on-surface font-label-md text-label-md shadow-sm active:scale-95 transition-all';
|
||
newChip.setAttribute('data-title', activeCardTitle);
|
||
newChip.textContent = activeCardTitle;
|
||
destContainer.prepend(newChip);
|
||
}
|
||
|
||
// Update P5 counts
|
||
const remainingP5 = document.querySelectorAll('#pile-5-items .value-item').length;
|
||
const badge = document.getElementById('p5-badge-count');
|
||
const tabBadge = document.getElementById('tab-p5-count');
|
||
const metric = document.getElementById('metric-summary');
|
||
if (badge) badge.textContent = `${remainingP5} cards`;
|
||
if (tabBadge) tabBadge.textContent = remainingP5;
|
||
if (metric) metric.textContent = `${remainingP5} Core Nominees`;
|
||
}, 250);
|
||
}
|
||
|
||
closeDemoteSheet();
|
||
showToast(`'${activeCardTitle}' moved to Pile ${destPileNum}: ${destPileName}`);
|
||
});
|
||
});
|
||
|
||
if (sheetBackdrop) sheetBackdrop.addEventListener('click', closeDemoteSheet);
|
||
if (closeSheetBtn) closeSheetBtn.addEventListener('click', closeDemoteSheet);
|
||
|
||
function filterValues(query) {
|
||
const term = query.trim().toLowerCase();
|
||
let matchCount = 0;
|
||
|
||
if (!term) {
|
||
clearBtn.classList.add('hidden');
|
||
document.querySelectorAll('.value-item').forEach(item => item.classList.remove('hidden'));
|
||
pileGroups.forEach(group => group.classList.remove('hidden'));
|
||
emptyState.classList.add('hidden');
|
||
return;
|
||
}
|
||
|
||
clearBtn.classList.remove('hidden');
|
||
|
||
pileGroups.forEach(group => {
|
||
const itemsInGroup = group.querySelectorAll('.value-item');
|
||
let visibleInGroup = 0;
|
||
|
||
itemsInGroup.forEach(item => {
|
||
const title = (item.getAttribute('data-title') || '').toLowerCase();
|
||
const text = item.textContent.toLowerCase();
|
||
if (title.includes(term) || text.includes(term)) {
|
||
item.classList.remove('hidden');
|
||
visibleInGroup++;
|
||
matchCount++;
|
||
} else {
|
||
item.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
if (visibleInGroup === 0) {
|
||
group.classList.add('hidden');
|
||
} else {
|
||
group.classList.remove('hidden');
|
||
}
|
||
});
|
||
|
||
if (matchCount === 0) {
|
||
emptyState.classList.remove('hidden');
|
||
emptyState.classList.add('flex');
|
||
} else {
|
||
emptyState.classList.add('hidden');
|
||
emptyState.classList.remove('flex');
|
||
}
|
||
}
|
||
|
||
if (searchInput) {
|
||
searchInput.addEventListener('input', (e) => filterValues(e.target.value));
|
||
}
|
||
|
||
if (clearBtn) {
|
||
clearBtn.addEventListener('click', () => {
|
||
searchInput.value = '';
|
||
filterValues('');
|
||
searchInput.focus();
|
||
});
|
||
}
|
||
|
||
if (resetBtn) {
|
||
resetBtn.addEventListener('click', () => {
|
||
searchInput.value = '';
|
||
filterValues('');
|
||
});
|
||
}
|
||
|
||
// Tab active styling updates on click
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
tabs.forEach(t => {
|
||
t.classList.remove('bg-secondary', 'text-on-secondary');
|
||
t.classList.add('bg-surface-container', 'text-on-surface');
|
||
const badge = t.querySelector('span:last-child');
|
||
if (badge) {
|
||
badge.classList.remove('bg-on-secondary/20', 'text-on-secondary');
|
||
badge.classList.add('bg-surface-container-high', 'text-on-surface-variant');
|
||
}
|
||
});
|
||
|
||
tab.classList.add('bg-secondary', 'text-on-secondary');
|
||
tab.classList.remove('bg-surface-container', 'text-on-surface');
|
||
const activeBadge = tab.querySelector('span:last-child');
|
||
if (activeBadge) {
|
||
activeBadge.classList.add('bg-on-secondary/20', 'text-on-secondary');
|
||
activeBadge.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
|
||
}
|
||
});
|
||
});
|
||
})();
|
||
</script></main></body></html> |