full app done
This commit is contained in:
@@ -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&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"></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>
|
||||
Reference in New Issue
Block a user