191 lines
16 KiB
HTML
191 lines
16 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"></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-10">
|
||
<!-- Status Strip / Ambient Top Bar -->
|
||
<div class="px-margin-mobile pt-3 pb-2 flex items-center justify-between">
|
||
<div class="flex items-center gap-space-xs">
|
||
<span class="w-2 h-2 rounded-full bg-tertiary animate-pulse"></span>
|
||
<span class="font-label-sm text-label-sm uppercase tracking-wider text-on-surface-variant">Values Sort Hub</span>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- Introspective Hero Greeting -->
|
||
<div class="px-margin-mobile mt-4 mb-5">
|
||
<div class="flex items-center gap-2 mb-1.5">
|
||
<span class="material-symbols-outlined text-[18px] text-primary" style="font-variation-settings: "FILL" 1;">spa</span>
|
||
|
||
</div>
|
||
<h1 class="font-headline-xl-mobile text-headline-xl-mobile text-on-surface tracking-tight">Your values landscape</h1>
|
||
|
||
</div>
|
||
<!-- Central Compass Status Card -->
|
||
<div class="px-margin-mobile mb-6"><div class="bg-surface-container-low rounded-lg p-5 shadow-sm border border-outline-variant/30 flex flex-col gap-3.5"><div class="flex items-center justify-between"><div class="flex items-center gap-2"><span class="material-symbols-outlined text-[18px] text-secondary" style="font-variation-settings: "FILL" 1;">stars</span><h2 class="font-headline-md text-headline-md text-on-surface font-normal">Your Core Values</h2></div></div><p class="font-body-sm text-body-sm text-on-surface-variant">The foundational principles selected as your highest inner compass:</p><div class="flex flex-wrap gap-2 pt-1"><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md shadow-sm"><span class="w-4 h-4 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-label-sm text-[10px]">1</span> Authenticity</span><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md shadow-sm"><span class="w-4 h-4 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-label-sm text-[10px]">2</span> Courage</span><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md shadow-sm"><span class="w-4 h-4 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-label-sm text-[10px]">3</span> Compassion</span><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md shadow-sm"><span class="w-4 h-4 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-label-sm text-[10px]">4</span> Freedom</span><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md shadow-sm"><span class="w-4 h-4 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-label-sm text-[10px]">5</span> Curiosity</span><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md shadow-sm"><span class="w-4 h-4 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-label-sm text-[10px]">6</span> Integrity</span><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md shadow-sm"><span class="w-4 h-4 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-label-sm text-[10px]">7</span> Connection</span><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md shadow-sm"><span class="w-4 h-4 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-label-sm text-[10px]">8</span> Wisdom</span></div></div></div>
|
||
<!-- Gateway Cards Section -->
|
||
<div class="px-margin-mobile flex flex-col gap-4">
|
||
<div class="flex items-center justify-between px-1">
|
||
|
||
|
||
</div>
|
||
<!-- Gateway 1: All Sorted Values -->
|
||
<button class="w-full text-left bg-surface-container-low active:bg-surface-container rounded-lg p-5 shadow-sm transition-all flex flex-col gap-3 group" type="button">
|
||
<div class="flex items-start justify-between w-full">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center text-primary group-hover:scale-105 transition-transform">
|
||
<span class="material-symbols-outlined text-[22px]">layers</span>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center gap-2">
|
||
<h2 class="font-headline-md text-headline-md text-on-surface font-normal">All Sorted Values</h2>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-primary group-hover:translate-x-1 transition-transform mt-1">arrow_forward</span>
|
||
</div>
|
||
|
||
<div class="pt-2 flex items-center justify-between">
|
||
|
||
|
||
</div>
|
||
</button>
|
||
<!-- Gateway 2: Order Top Values -->
|
||
<button class="w-full text-left bg-surface-container-low active:bg-surface-container rounded-lg p-5 shadow-sm transition-all flex flex-col gap-3 group" type="button">
|
||
<div class="flex items-start justify-between w-full">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center text-secondary group-hover:scale-105 transition-transform">
|
||
<span class="material-symbols-outlined text-[22px]">format_list_numbered</span>
|
||
</div>
|
||
<div>
|
||
<h2 class="font-headline-md text-headline-md text-on-surface font-normal">Order Top Values</h2>
|
||
<span class="inline-block mt-0.5 bg-secondary-fixed/50 px-2.5 py-0.5 rounded-full font-label-sm text-label-sm text-on-secondary-fixed-variant">
|
||
8 Nominees · #1 Authenticity
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-primary group-hover:translate-x-1 transition-transform mt-1">arrow_forward</span>
|
||
</div>
|
||
|
||
|
||
</button>
|
||
<!-- Gateway 3: Reflect (Journal) -->
|
||
<button class="w-full text-left bg-surface-container-low active:bg-surface-container rounded-lg p-5 shadow-sm transition-all flex flex-col gap-3 group" type="button">
|
||
<div class="flex items-start justify-between w-full">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center text-tertiary group-hover:scale-105 transition-transform">
|
||
<span class="material-symbols-outlined text-[22px]" style="font-variation-settings: "FILL" 1;">edit_note</span>
|
||
</div>
|
||
<div>
|
||
<h2 class="font-headline-md text-headline-md text-on-surface font-normal">Reflect & Inquire</h2>
|
||
<span class="inline-block mt-0.5 bg-tertiary-fixed/60 px-2.5 py-0.5 rounded-full font-label-sm text-label-sm text-on-tertiary-fixed-variant">
|
||
14 of 20 Answered (70%)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-primary group-hover:translate-x-1 transition-transform mt-1">arrow_forward</span>
|
||
</div>
|
||
|
||
<!-- Mini Progress bar inside card -->
|
||
<div class="w-full bg-surface-container-highest rounded-full h-1.5 mt-1 overflow-hidden">
|
||
<div class="bg-tertiary h-full rounded-full" style="width: 70%;"></div>
|
||
</div>
|
||
<div class="pt-1 flex items-center justify-between">
|
||
|
||
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<!-- Contemplative Breathing Quote / Ambient Breakpoint -->
|
||
<div class="px-margin-mobile mt-8 mb-4">
|
||
|
||
</div>
|
||
<!-- Practice Lifecycle Management Section -->
|
||
<div class="px-margin-mobile mt-4 flex flex-col items-center">
|
||
<div class="w-full pt-4 flex flex-col items-center text-center">
|
||
<button class="w-full py-3.5 px-6 rounded-full bg-surface-container-high hover:bg-surface-dim active:scale-[0.99] text-on-surface font-label-lg text-label-lg transition-all flex items-center justify-center gap-2 shadow-sm" id="openResetBtn" type="button">
|
||
<span class="material-symbols-outlined text-[18px] text-outline">restart_alt</span>
|
||
Finish Practice (Reset All)
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- Mindful Confirmation Drawer Modal -->
|
||
<div class="fixed inset-0 bg-inverse-surface/40 backdrop-blur-sm z-40 transition-opacity duration-300 flex items-end justify-center opacity-0 pointer-events-none" id="resetDrawerBackdrop">
|
||
<div class="w-full max-w-md bg-surface-container-low rounded-t-xl p-6 shadow-xl transform transition-transform duration-300 ease-out z-50 flex flex-col translate-y-full" id="resetDrawerSheet">
|
||
<!-- Soft drag bar pill -->
|
||
<div class="w-12 h-1.5 rounded-full bg-surface-variant mx-auto mb-4"></div>
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<div class="w-10 h-10 rounded-full bg-error-container/50 flex items-center justify-center text-error">
|
||
<span class="material-symbols-outlined text-[22px]">hourglass_empty</span>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-headline-md text-headline-md text-on-surface">Reset Entire Practice?</h3>
|
||
<span class="font-label-sm text-label-sm text-on-surface-variant">Clean slate contemplation</span>
|
||
</div>
|
||
</div>
|
||
<p class="font-body-md text-body-md text-on-surface-variant my-3 leading-relaxed">
|
||
This deliberate action will clear all 5 categorized piles, your prioritized 1–8 hierarchy, and stored reflection notes. You will begin this mindful exploration from the initial deck.
|
||
</p>
|
||
<div class="bg-surface-container p-3.5 rounded-lg mb-6 flex items-start gap-2.5">
|
||
<span class="material-symbols-outlined text-[18px] text-secondary mt-0.5">lightbulb</span>
|
||
<span class="font-body-sm text-body-sm text-on-surface-variant">
|
||
Tip: You can pause here and revisit your values whenever you need clarity in daily choices without resetting.
|
||
</span>
|
||
</div>
|
||
<!-- Action Buttons -->
|
||
<div class="flex flex-col gap-2.5">
|
||
<button class="w-full py-3.5 rounded-full bg-primary text-on-primary font-label-lg text-label-lg active:bg-primary-container transition-colors shadow-sm" id="confirmResetBtn" type="button">
|
||
Yes, Reset All 100 Cards
|
||
</button>
|
||
<button class="w-full py-3 rounded-full bg-surface-container hover:bg-surface-container-high text-on-surface font-label-md text-label-md transition-colors" id="cancelResetBtn" type="button">
|
||
Keep My Current Landscape
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
(function() {
|
||
const openBtn = document.getElementById('openResetBtn');
|
||
const closeBtn = document.getElementById('cancelResetBtn');
|
||
const confirmBtn = document.getElementById('confirmResetBtn');
|
||
const backdrop = document.getElementById('resetDrawerBackdrop');
|
||
const sheet = document.getElementById('resetDrawerSheet');
|
||
|
||
function openDrawer() {
|
||
backdrop.classList.remove('pointer-events-none');
|
||
backdrop.classList.remove('opacity-0');
|
||
backdrop.classList.add('opacity-100');
|
||
sheet.classList.remove('translate-y-full');
|
||
sheet.classList.add('translate-y-0');
|
||
}
|
||
|
||
function closeDrawer() {
|
||
backdrop.classList.add('opacity-0');
|
||
backdrop.classList.remove('opacity-100');
|
||
sheet.classList.remove('translate-y-0');
|
||
sheet.classList.add('translate-y-full');
|
||
setTimeout(() => {
|
||
backdrop.classList.add('pointer-events-none');
|
||
}, 300);
|
||
}
|
||
|
||
if (openBtn) openBtn.addEventListener('click', openDrawer);
|
||
if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
|
||
if (backdrop) {
|
||
backdrop.addEventListener('click', (e) => {
|
||
if (e.target === backdrop) closeDrawer();
|
||
});
|
||
}
|
||
|
||
if (confirmBtn) {
|
||
confirmBtn.addEventListener('click', () => {
|
||
confirmBtn.innerHTML = '<span class="material-symbols-outlined text-[18px] animate-spin">refresh</span> Resetting Sanctuary...';
|
||
setTimeout(() => {
|
||
closeDrawer();
|
||
confirmBtn.textContent = 'Yes, Reset All 100 Cards';
|
||
}, 900);
|
||
});
|
||
}
|
||
})();
|
||
</script></main>
|
||
|
||
</body></html> |