full app done
This commit is contained in:
davmar
@@ -0,0 +1,214 @@
|
||||
---
|
||||
name: Mindful Values Architecture
|
||||
colors:
|
||||
surface: '#fdf9f2'
|
||||
surface-dim: '#dddad3'
|
||||
surface-bright: '#fdf9f2'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#f7f3ec'
|
||||
surface-container: '#f1ede6'
|
||||
surface-container-high: '#ece8e1'
|
||||
surface-container-highest: '#e6e2db'
|
||||
on-surface: '#1c1c18'
|
||||
on-surface-variant: '#4d453e'
|
||||
inverse-surface: '#31302c'
|
||||
inverse-on-surface: '#f4f0e9'
|
||||
outline: '#7f756d'
|
||||
outline-variant: '#d0c4ba'
|
||||
surface-tint: '#6c5b49'
|
||||
primary: '#635341'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#7d6b58'
|
||||
on-primary-container: '#ffefe1'
|
||||
inverse-primary: '#d9c3ac'
|
||||
secondary: '#8e4d2a'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#feaa7f'
|
||||
on-secondary-container: '#783d1a'
|
||||
tertiary: '#465b44'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#5e745c'
|
||||
on-tertiary-container: '#e1f9db'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#f6dfc7'
|
||||
primary-fixed-dim: '#d9c3ac'
|
||||
on-primary-fixed: '#25190b'
|
||||
on-primary-fixed-variant: '#544433'
|
||||
secondary-fixed: '#ffdbcb'
|
||||
secondary-fixed-dim: '#ffb691'
|
||||
on-secondary-fixed: '#341100'
|
||||
on-secondary-fixed-variant: '#713714'
|
||||
tertiary-fixed: '#d1e9cc'
|
||||
tertiary-fixed-dim: '#b5cdb0'
|
||||
on-tertiary-fixed: '#0d200d'
|
||||
on-tertiary-fixed-variant: '#374c36'
|
||||
background: '#fdf9f2'
|
||||
on-background: '#1c1c18'
|
||||
surface-variant: '#e6e2db'
|
||||
typography:
|
||||
headline-xl:
|
||||
fontFamily: Newsreader
|
||||
fontSize: 40px
|
||||
fontWeight: '400'
|
||||
lineHeight: 48px
|
||||
letterSpacing: -0.02em
|
||||
headline-xl-mobile:
|
||||
fontFamily: Newsreader
|
||||
fontSize: 32px
|
||||
fontWeight: '400'
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.01em
|
||||
headline-lg:
|
||||
fontFamily: Newsreader
|
||||
fontSize: 30px
|
||||
fontWeight: '400'
|
||||
lineHeight: 38px
|
||||
letterSpacing: -0.01em
|
||||
headline-lg-mobile:
|
||||
fontFamily: Newsreader
|
||||
fontSize: 26px
|
||||
fontWeight: '400'
|
||||
lineHeight: 34px
|
||||
letterSpacing: 0em
|
||||
headline-md:
|
||||
fontFamily: Newsreader
|
||||
fontSize: 22px
|
||||
fontWeight: '400'
|
||||
lineHeight: 30px
|
||||
body-lg:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 18px
|
||||
fontWeight: '400'
|
||||
lineHeight: 28px
|
||||
body-md:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
body-sm:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
label-lg:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 15px
|
||||
fontWeight: '600'
|
||||
lineHeight: 20px
|
||||
letterSpacing: 0.01em
|
||||
label-md:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 13px
|
||||
fontWeight: '500'
|
||||
lineHeight: 18px
|
||||
letterSpacing: 0.02em
|
||||
label-sm:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 11px
|
||||
fontWeight: '600'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.04em
|
||||
rounded:
|
||||
sm: 0.5rem
|
||||
DEFAULT: 1rem
|
||||
md: 1.5rem
|
||||
lg: 2rem
|
||||
xl: 3rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
gutter: 1rem
|
||||
gutter-mobile: 0.75rem
|
||||
margin: 1.5rem
|
||||
margin-mobile: 1.25rem
|
||||
space-xs: 0.25rem
|
||||
space-sm: 0.5rem
|
||||
space-md: 1rem
|
||||
space-lg: 1.5rem
|
||||
space-xl: 2.5rem
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system is crafted for deep introspection, intentional decision-making, and personal grounding. It serves individuals navigating life transitions, therapeutic exercises, and values-clarification practices. The experience is designed to feel unhurried, quietly reverent, and deeply personal—eschewing addictive loops, loud notifications, and superficial gamification in favor of sustained focus and calm contemplation.
|
||||
|
||||
The visual style blends **warm editorial minimalism** with **tactile paper-like depth**. It draws inspiration from artisanal bookbinding, linen stationery, and modern contemplative journals:
|
||||
- **Atmosphere:** Serene, grounded, deliberate, and emotionally secure.
|
||||
- **Rhythm:** Generous breathing room with relaxed vertical pacing, inviting the eye to linger and pause.
|
||||
- **Materiality:** Soft stone surfaces, delicate warm contours, and nuanced diffuse shadows that ground elements without feeling synthetic or rigid.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette is rooted in the natural world: mineral sands, quiet clay, sun-bleached stone, and muted foliage. The dynamic range avoids stark pure whites and abrasive digital blacks, fostering an environment free of eye strain and cognitive fatigue.
|
||||
|
||||
### Color Tiers & Intent
|
||||
- **Canvas Base (`#FBF9F5`):** The primary view background; evokes raw, unbleached cotton paper.
|
||||
- **Surface Elevation (`#F5F1EA`):** Neutral surface for raised cards, value tiles, and interactive sheets.
|
||||
- **Subtle Surface & Dividers (`#E8E2D8`):** Restful borders, inset surfaces, and non-intrusive separators.
|
||||
- **Primary / Earth Ground (`#7D6B58`):** A balanced warm taupe-stone that grounds primary interactive states and contemplative highlights.
|
||||
- **Secondary / Terracotta Accent (`#C87D55`):** A soft, sun-dried clay tone used selectively for active selections, progress markers, and reflective milestones.
|
||||
- **Tertiary / Sage Accent (`#6B8168`):** A muted eucalyptus green designated for affirmation states, grounded confirmations, and calm categorization.
|
||||
- **Text & Contrast (`#2C2825` Primary, `#4A443F` Secondary):** Deep espresso and soft slate hues that preserve crisp readability with none of the harshness of pure black.
|
||||
|
||||
## Typography
|
||||
|
||||
The typographic hierarchy balances literary gravitas with clean, approachable utility.
|
||||
|
||||
- **Display & Headlines (`Newsreader`):** An editorial, high-character serif that confers an intellectual, gentle, book-like presence. Headlines use standard weight and slightly negative tracking to evoke printed literary works.
|
||||
- **Body & Labels (`Plus Jakarta Sans`):** A soft, humanist geometric sans-serif that balances modern legibility with rounded, friendly terminal strokes. It delivers effortless readability across reflection prompts, explanatory texts, and compact mobile UI controls.
|
||||
- **Rhythm & Formatting:** Line heights remain generous across all tiers to safeguard vertical breathing room and prevent visual crowding during dense contemplative sessions.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout is built around spacious, open single-column and modular card streams suited for portrait handheld usage. It prioritizes focus by presenting a limited number of elements on screen at any given time.
|
||||
|
||||
### Grid & Form Factors
|
||||
- **Mobile (<640px):** Single-column layout with fluid full-width cards anchored by `1.25rem` outer canvas padding. Component stacks maintain `space-md` gaps.
|
||||
- **Tablet (640px–1024px):** Centered max-width canvas (600px for reflective sort flows, 768px for summary balance views) with `1.5rem` outer margins.
|
||||
- **Sorting Viewports:** Sorting columns or buckets utilize vertical flex stacks with `space-sm` or `space-md` separation to maintain clear tactile drop zones and distinct groupings.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Visual depth is achieved through layered warm surfaces paired with whisper-soft, colored ambient shadows rather than synthetic gray blurs.
|
||||
|
||||
- **Flat / Ground Level:** Page background (`#FBF9F5`) with no shadow.
|
||||
- **Elevated Tiles & Cards:** Surface color `#F5F1EA` wrapped in a 1px border of `#E8E2D8`, elevated by a warm, diffuse ambient shadow: `box-shadow: 0 4px 16px -2px rgba(44, 40, 37, 0.04), 0 1px 4px 0 rgba(44, 40, 37, 0.02)`.
|
||||
- **Floating Controls & Active Drags:** While dragging or floating above other content, cards subtly lift: `box-shadow: 0 12px 28px -4px rgba(44, 40, 37, 0.08), 0 2px 8px 0 rgba(44, 40, 37, 0.03)`.
|
||||
- **Borders as Tone:** In place of strong contrast lines, borders act as quiet edge definitions using `#E8E2D8` to cleanly separate panels without fragmenting the canvas.
|
||||
|
||||
## Shapes
|
||||
|
||||
The design system embraces a high-radius, organic shape language (`roundedness: 3`).
|
||||
|
||||
- **Pill Geometry:** Interactive buttons, category filters, and selection pills utilize complete capsule geometry (`rounded-full`), reinforcing physical softness and comfort in the hand.
|
||||
- **Cards & Value Containers:** Larger surfaces utilize relaxed, generous border radii (`1.5rem` to `2rem` / `rounded-xl` to `rounded-2xl`), eliminating aggressive edges and providing an organic, pebble-like quality to draggable cards.
|
||||
- **Inset Wells & Modals:** Droppable sort regions adopt matching rounded corners to establish a natural visual container for nested items.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
- **Primary:** Full capsule (`rounded-full`) pill button with a `#2C2825` or `#7D6B58` background, `#FBF9F5` typography, and generous horizontal padding (`1.75rem`). No heavy drop shadows; tactile feedback relies on soft tonal lightening on press.
|
||||
- **Secondary / Gentle:** Subtle stone pill surface (`#F5F1EA`) with a 1px `#E8E2D8` border and `#2C2825` text.
|
||||
- **Ghost / Reflective:** Borderless with `#4A443F` text, emphasizing deliberate, low-urgency actions (e.g., "Skip for now", "Pause reflection").
|
||||
|
||||
### Value Cards (Sorting Unit)
|
||||
- **Resting:** Background `#F5F1EA`, border 1px solid `#E8E2D8`, padding `space-lg`, radius `1.5rem`. Title set in `Newsreader` (`headline-md`) with an optional single-sentence descriptor below in `Plus Jakarta Sans` (`body-sm`, `#4A443F`).
|
||||
- **Dragging / Active:** Slight scale increase (1.02x) with ambient shadow lift and an accent border transition to `#C87D55`.
|
||||
|
||||
### Chips & Sort Buckets
|
||||
- **Chips:** Capsule pills with `0.5rem` vertical and `1rem` horizontal padding. Selected states transition from background `#F5F1EA` to `#E8E2D8` with text shifting to `#2C2825`.
|
||||
- **Sort Buckets (Drop Zones):** Spacious containers framed in dashed or soft solid lines of `#E8E2D8` with background `#FBF9F5`. Labelled with serene, muted headers (e.g., *Always True for Me*, *Important to Me*, *Rarely Considered*).
|
||||
|
||||
### Lists & Prompts
|
||||
- Framed in full-width soft-edged tiles or separated by subtle `#E8E2D8` hairline dividers. Touch targets remain large (`min-height: 52px`), accompanied by relaxed vertical spacing.
|
||||
|
||||
### Checkboxes & Radio Buttons
|
||||
- Rounded indicators (circular radios, `6px` radius checkboxes) using `#E8E2D8` borders that fill with muted sage (`#6B8168`) or terracotta (`#C87D55`) when selected, accompanied by a soft white icon check.
|
||||
|
||||
### Input Fields
|
||||
- Understated input panels with background `#F5F1EA`, bordered in `#E8E2D8`, rounding to `1rem`. Active focus shifts border tone smoothly to `#7D6B58` with no high-contrast glow rings.
|
||||
|
||||
### Specialized Component: Contemplative Reflection Sheet
|
||||
- A bottom sheet modal featuring a soft drag handle, `2rem` top border radii, linen-stone background (`#F5F1EA`), and generous whitespace designed specifically for writing personal rationales during deep values prioritization.
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,110 @@
|
||||
[
|
||||
{
|
||||
"id": "e3940f39a073450299cb3024914064c6",
|
||||
"slug": "welcome",
|
||||
"title": "Values Sort \u2014 Welcome (with Guide Drawer)",
|
||||
"width": "780",
|
||||
"height": "1768",
|
||||
"deviceType": "MOBILE",
|
||||
"htmlUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyNTQwYmQ5N2IwMjNiZTk5NjE2MDEzZDgzEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"screenshotUrl": "https://lh3.googleusercontent.com/aida/AEtjO1XxoE8CbYmmotxXpSsZdC3wUE-E_xSas8nAxp_8GIUsaVeT2TjBeYVAwZM64nKp2KiGgcv4OGIq2noOJzxbWuzc-L2mitY9iU_fmiwGqgff0u7RpyjXlC0eRZlhvcRybK_E_dFQ_b8Q3GBOP06crg0MlaWtIPMS9WT-WIwmui7yJkqcEDsjlJlU8reI8HinfJtzvxK1gfOfEWbLDV5gPc7T_ypo6WR-fM3lZ35FSrkH4NQoX2e-d1-DlO0",
|
||||
"htmlFile": "welcome.html",
|
||||
"htmlBytes": 17353,
|
||||
"screenshotFile": "welcome.png",
|
||||
"screenshotBytes": 35118
|
||||
},
|
||||
{
|
||||
"id": "07a9fc8b113c479db7ece5398a017a9e",
|
||||
"slug": "rank-order",
|
||||
"title": "Values Sort \u2014 Rank Order Top Values",
|
||||
"width": "780",
|
||||
"height": "4408",
|
||||
"deviceType": "MOBILE",
|
||||
"htmlUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyY2VlNWY5MzgwMjNiZWU1MjMxMjVjMzFhEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"screenshotUrl": "https://lh3.googleusercontent.com/aida/AEtjO1WpFA576TA5wf1HnZIoIBm8m5-S0M9LlUvAz8ujVYmbkVydsAdUAmtOpQKsY9nixUIwZEd5bqrDTe6ITlJfFFRhDRxkehFVmgcdAZksW9L89pME6e2gTYuO-qqFQKwD-XAXg_PDunjOg8XZeYs5p1dIVenclfxkXwSQ4Y0IIDTHtIMONRE4S07sHY7skqnnL-f2vmbEBg3ah1WyjcLXIUFIL4AINmYK-vTMCxwwsQ_ev3qhq909m7CdoQ",
|
||||
"htmlFile": "rank-order.html",
|
||||
"htmlBytes": 35244,
|
||||
"screenshotFile": "rank-order.png",
|
||||
"screenshotBytes": 2676
|
||||
},
|
||||
{
|
||||
"id": "73272c6039864978bcec444c7df2973f",
|
||||
"slug": "most-important",
|
||||
"title": "Values Sort \u2014 Most Important (with Demote Drawer)",
|
||||
"width": "780",
|
||||
"height": "6564",
|
||||
"deviceType": "MOBILE",
|
||||
"htmlUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyNzZkYjg4ZjgwNWYxMzVmZTYyMDcyNzBkEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"screenshotUrl": "https://lh3.googleusercontent.com/aida/AEtjO1Xhu39G6wcAy9suH2BL28jVCSboZ_ydBY69b4vlY9-gtnbu66RyRiHaRDF8MkiSVfcjYFtlIVfpFgyN856OBgA4qenmijh6Uii1vIm22lmUNWElTOI1GSSUyOF_NMNLN7N3HKNwLY6pc0PlrUBoB--DVbW6-RcnqfBG-CIAFWWzuOn0YEXUIbLzFLfecIwxJbbHEblBtC8m7q0RR140TUxcbtxtzHRX_km3es8xnlabSjh1DMxb3K1Efg",
|
||||
"htmlFile": "most-important.html",
|
||||
"htmlBytes": 55201,
|
||||
"screenshotFile": "most-important.png",
|
||||
"screenshotBytes": 24782
|
||||
},
|
||||
{
|
||||
"id": "8ca48b5fb47f46efb62882151cf3966d",
|
||||
"slug": "card-sorting",
|
||||
"title": "Values Sort \u2014 Card Sorting (5 Piles)",
|
||||
"width": "780",
|
||||
"height": "1768",
|
||||
"deviceType": "MOBILE",
|
||||
"htmlUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyNTNlZWY1YjEwNGU3NTljNGQwMzgyZWUzEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"screenshotUrl": "https://lh3.googleusercontent.com/aida/AEtjO1UKPd2AvYz_Ucd2ae0AXKkL1mf0yGN6F1_AxDfBFGuduAa3Glzo-QZSGEM9bnNThdbJBwaLp6-YZKG96EL79UjeMqDwutbANo2j2Xxdxyo3S-P2kEfS5WsFqdk99nTzvphFypQtiFa5uF_CftoMwJRKKFm1D8Xo3YaGT07BEPrl09YGNSZR0wytLyEJUkl9Y2epmCJMJ_NiudNMLR-JxcsXqk5XndAVRz09mkUI3A8JitbLiv6Z3QlZDSU",
|
||||
"htmlFile": "card-sorting.html",
|
||||
"htmlBytes": 18377,
|
||||
"screenshotFile": "card-sorting.png",
|
||||
"screenshotBytes": 75318
|
||||
},
|
||||
{
|
||||
"id": "12809277486904866316",
|
||||
"slug": "important-cards",
|
||||
"title": "Values Sort \u2014 Important Cards (Pile 3)",
|
||||
"width": "780",
|
||||
"height": "2766",
|
||||
"deviceType": "MOBILE",
|
||||
"htmlUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyODM5NjZmMWUwNGU3NThiMjE2MDFkYWQxEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"screenshotUrl": "https://lh3.googleusercontent.com/aida/AEtjO1XQVoRrEK9mxF3gFjm9RD-lkFg-pwyvf_kJsLOREyZzFD3UWWWPbcivFX2aIvhiewCkv3Rw4SWGxq3AtN-TbfKPD2L4R0QKA3XPc_RImmva7z66yTUJo8bvozFBpwKdHXo5vPaxqB2-UyjVDLrfiCY75WYAkp6P0BF4W3xqoRy8mWUqe5ljCtjlIwbyo2GyR66wkPSOAeUqFl6s0jLycyB7MAaiBbBPOejz27uo2xYdbppL0Bzc7XVrpeE",
|
||||
"htmlFile": "important-cards.html",
|
||||
"htmlBytes": 30492,
|
||||
"screenshotFile": "important-cards.png",
|
||||
"screenshotBytes": 47590
|
||||
},
|
||||
{
|
||||
"id": "7bb00b6022b14dd9a687b9a31ec6b1f5",
|
||||
"slug": "reflection-journal",
|
||||
"title": "Values Sort \u2014 Reflection (Full-Screen Journal Drawer)",
|
||||
"width": "780",
|
||||
"height": "3596",
|
||||
"deviceType": "MOBILE",
|
||||
"htmlUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyYWE0ZDI3M2IwMjNiZWU1MjMxMjVjMzFhEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"screenshotUrl": "https://lh3.googleusercontent.com/aida/AEtjO1UAeYCnBIII639-PoE0tFfV3LHW2yIsQ2XGm0L6YPETkrpzkMplK_QGvg-8F8PSLt_oJCS-3Uajl851y6H1IkywclVOp_OG34ANFKKEmKIyGFxXYg-XXlWWlanu_22zhpb_lhiO4auBOIFSxwwFc2NbU3b6qlsAIlBGONtInErxesAiJILt6j1yKKM1OkGJIrh4sWabbDoAfBNaJlu_hDywInGjs4j-d6SZOEvzgunjmwSjLStHmjuQoVk",
|
||||
"htmlFile": "reflection-journal.html",
|
||||
"htmlBytes": 27117,
|
||||
"screenshotFile": "reflection-journal.png",
|
||||
"screenshotBytes": 4968
|
||||
},
|
||||
{
|
||||
"id": "3064045350829608185",
|
||||
"slug": "reflect-top-values",
|
||||
"title": "Values Sort \u2014 Reflect on Top Values",
|
||||
"width": "780",
|
||||
"height": "3384",
|
||||
"deviceType": "MOBILE",
|
||||
"htmlUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyOWJmZTJmY2UwOTY4YTAzNjNmMGQ1ODhmEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"screenshotUrl": "https://lh3.googleusercontent.com/aida/AEtjO1Uwhwbp12i_K453L9y11FLMvbRC4yDVlY0fdRpaqI4rBUKKwEFBEzO2fbvVyKER5fnk5X11ceImXKtx6h37TpNJIYr6CZNuNhJc1LNKbOGiV_CO3ee7AVc0nOez48-19Q7vf8_H6Q1DlfjZj3B3v2X23in3GCgyxo5rAa-NsMkS9_G4oCvnWSIioTblp-viQRuJhyq3jIlEldpfZPkU5FQh7hr6lH9RMVXv2Pdy_sviQJK_4R2KOQJxAUc",
|
||||
"htmlFile": "reflect-top-values.html",
|
||||
"htmlBytes": 20710,
|
||||
"screenshotFile": "reflect-top-values.png",
|
||||
"screenshotBytes": 4038
|
||||
},
|
||||
{
|
||||
"id": "7247b606c08a44ef906836e5ab250fd1",
|
||||
"slug": "practice-hub",
|
||||
"title": "Values Sort \u2014 Practice Hub",
|
||||
"width": "780",
|
||||
"height": "3234",
|
||||
"deviceType": "MOBILE",
|
||||
"htmlFile": "practice-hub.html",
|
||||
"screenshotFile": "practice-hub.png"
|
||||
}
|
||||
]
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,391 @@
|
||||
<!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"><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script><script id="tailwind-config">tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"inverse-on-surface": "#f4f0e9",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed": "#f6dfc7",
|
||||
"secondary-fixed-dim": "#ffb691",
|
||||
"inverse-primary": "#d9c3ac",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary-fixed-variant": "#374c36",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary": "#8e4d2a",
|
||||
"on-primary-fixed": "#25190b",
|
||||
"on-background": "#1c1c18",
|
||||
"on-secondary-container": "#783d1a",
|
||||
"surface-dim": "#dddad3",
|
||||
"primary": "#635341",
|
||||
"on-surface": "#1c1c18",
|
||||
"background": "#fdf9f2",
|
||||
"surface-container-high": "#ece8e1",
|
||||
"on-surface-variant": "#4d453e",
|
||||
"on-primary-container": "#ffefe1",
|
||||
"surface-container": "#f1ede6",
|
||||
"on-tertiary-fixed": "#0d200d",
|
||||
"outline": "#7f756d",
|
||||
"tertiary-container": "#5e745c",
|
||||
"surface": "#fdf9f2",
|
||||
"on-error-container": "#93000a",
|
||||
"on-primary-fixed-variant": "#544433",
|
||||
"primary-container": "#7d6b58",
|
||||
"on-secondary-fixed": "#341100",
|
||||
"outline-variant": "#d0c4ba",
|
||||
"on-tertiary-container": "#e1f9db",
|
||||
"surface-container-highest": "#e6e2db",
|
||||
"secondary-container": "#feaa7f",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-low": "#f7f3ec",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-variant": "#e6e2db",
|
||||
"tertiary": "#465b44",
|
||||
"on-secondary-fixed-variant": "#713714",
|
||||
"tertiary-fixed-dim": "#b5cdb0",
|
||||
"surface-tint": "#6c5b49",
|
||||
"primary-fixed-dim": "#d9c3ac",
|
||||
"tertiary-fixed": "#d1e9cc",
|
||||
"secondary-fixed": "#ffdbcb",
|
||||
"inverse-surface": "#31302c",
|
||||
"surface-bright": "#fdf9f2"
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "1rem",
|
||||
"lg": "1.75rem",
|
||||
"xl": "2.25rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
spacing: {
|
||||
"margin-mobile": "1.25rem",
|
||||
"space-lg": "1.5rem",
|
||||
"space-md": "1rem",
|
||||
"space-xl": "2.5rem",
|
||||
"gutter-mobile": "0.75rem",
|
||||
"space-xs": "0.25rem",
|
||||
"gutter": "1rem",
|
||||
"space-sm": "0.5rem",
|
||||
"margin": "1.5rem"
|
||||
},
|
||||
fontFamily: {
|
||||
"body-sm": ["Plus Jakarta Sans", "sans-serif"],
|
||||
"headline-md": ["Newsreader", "serif"],
|
||||
"headline-xl": ["Newsreader", "serif"],
|
||||
"label-md": ["Plus Jakarta Sans", "sans-serif"],
|
||||
"headline-lg-mobile": ["Newsreader", "serif"],
|
||||
"headline-lg": ["Newsreader", "serif"],
|
||||
"label-sm": ["Plus Jakarta Sans", "sans-serif"],
|
||||
"body-lg": ["Plus Jakarta Sans", "sans-serif"],
|
||||
"body-md": ["Plus Jakarta Sans", "sans-serif"],
|
||||
"headline-xl-mobile": ["Newsreader", "serif"],
|
||||
"label-lg": ["Plus Jakarta Sans", "sans-serif"]
|
||||
},
|
||||
fontSize: {
|
||||
"body-sm": ["14px", { lineHeight: "20px", fontWeight: "400" }],
|
||||
"headline-md": ["22px", { lineHeight: "30px", fontWeight: "400" }],
|
||||
"headline-xl": ["40px", { lineHeight: "48px", letterSpacing: "-0.02em", fontWeight: "400" }],
|
||||
"label-md": ["13px", { lineHeight: "18px", letterSpacing: "0.02em", fontWeight: "500" }],
|
||||
"headline-lg-mobile": ["26px", { lineHeight: "34px", letterSpacing: "0em", fontWeight: "400" }],
|
||||
"headline-lg": ["30px", { lineHeight: "38px", letterSpacing: "-0.01em", fontWeight: "400" }],
|
||||
"label-sm": ["11px", { lineHeight: "16px", letterSpacing: "0.04em", fontWeight: "600" }],
|
||||
"body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
|
||||
"body-md": ["16px", { lineHeight: "24px", fontWeight: "400" }],
|
||||
"headline-xl-mobile": ["32px", { lineHeight: "40px", letterSpacing: "-0.01em", fontWeight: "400" }],
|
||||
"label-lg": ["15px", { lineHeight: "20px", letterSpacing: "0.01em", fontWeight: "600" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
};</script><style>
|
||||
@layer base {
|
||||
html, body {
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #fdf9f2;
|
||||
}
|
||||
body {
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
.pb-safe {
|
||||
padding-bottom: env(safe-area-inset-bottom, 16px);
|
||||
}
|
||||
.pt-safe {
|
||||
padding-top: env(safe-area-inset-top, 16px);
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.card-enter {
|
||||
animation: gentleFadeUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
.card-exit {
|
||||
animation: gentleFadeOut 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
@keyframes gentleFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(14px) scale(0.985);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes gentleFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.98);
|
||||
}
|
||||
}
|
||||
</style></head><body class="bg-surface font-body-md text-body-md text-on-surface min-h-screen flex flex-col justify-between pt-safe pb-safe selection:bg-secondary/15"><main class="flex-1 flex flex-col w-full max-w-md mx-auto px-margin-mobile justify-between"><header class="pt-2 pb-1 flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<button aria-label="Undo previous value" class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full bg-surface-container text-on-surface-variant font-label-md text-label-md transition-all active:scale-95 disabled:opacity-40 disabled:pointer-events-none hover:bg-surface-container-high" id="undo-btn" onclick="undoLastSort()">
|
||||
<span class="material-symbols-outlined text-[17px]">undo</span>
|
||||
<span class="">Previous</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-low border border-outline-variant/40">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
|
||||
<span class="font-label-sm text-label-sm text-primary uppercase tracking-wider">Stage 1 · Initial Sort</span>
|
||||
</div>
|
||||
<button aria-label="Save and exit" class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-container text-on-surface-variant transition-colors hover:bg-surface-container-high active:scale-95" onclick="saveAndExit()" title="Save & pause">
|
||||
<span class="material-symbols-outlined text-[18px]">bookmark_border</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Progress indicator -->
|
||||
<div class="mt-1.5 flex flex-col gap-1.5">
|
||||
<div class="flex items-baseline justify-between text-on-surface-variant">
|
||||
<span class="font-label-md text-label-md tracking-tight text-on-surface font-medium" id="counter-label">104 of 100 values sorted</span>
|
||||
<span class="font-label-sm text-label-sm text-outline" id="percent-label">100%</span>
|
||||
</div>
|
||||
<div class="w-full h-1 bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-container rounded-full transition-all duration-300 ease-out" id="progress-bar" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Center Hero: Single Focused Value Card -->
|
||||
<section class="my-auto py-2 flex flex-col items-center">
|
||||
<div class="w-full relative card-enter" id="card-container">
|
||||
<!-- Shadow stack aesthetic cue underneath -->
|
||||
<div class="absolute inset-x-3 -bottom-1.5 h-6 rounded-xl bg-surface-container-high/60 -z-10 transform scale-[0.98]"></div>
|
||||
<div class="absolute inset-x-6 -bottom-3 h-5 rounded-xl bg-surface-container-highest/40 -z-20 transform scale-[0.95]"></div>
|
||||
<article class="relative bg-surface-container-lowest border border-outline-variant/50 rounded-xl p-6 shadow-sm flex flex-col transition-all duration-200">
|
||||
<!-- Card Category Tag -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
|
||||
|
||||
</div>
|
||||
<!-- Value Title -->
|
||||
<h2 class="font-headline-xl text-3xl sm:text-headline-xl text-on-surface tracking-normal leading-tight mb-3" id="card-title">Compassion</h2>
|
||||
<!-- Definition Essence -->
|
||||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed mb-6 font-normal" id="card-definition">Meeting human vulnerability, struggle, and limitation with open warmth and kindness.</p>
|
||||
<!-- Contemplative Question -->
|
||||
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Bottom: 5 Reflective Piles Rating Scale & Pile Distribution -->
|
||||
<footer class="pb-1 pt-1 flex flex-col gap-3">
|
||||
<!-- Prompt guidance text -->
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant tracking-wide uppercase flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px] text-primary">layers</span>
|
||||
Assign to reflective pile
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-outline" id="pile-helper">Tap to sort</span>
|
||||
</div>
|
||||
<!-- 5 Rating Buttons / Tier Rows -->
|
||||
<div aria-label="Sort into piles 1 through 5" class="flex flex-col gap-1.5" role="group">
|
||||
<!-- Pile 5 -->
|
||||
<button class="group relative flex items-center justify-between w-full py-2.5 px-3.5 rounded-lg bg-surface-container hover:bg-surface-container-high active:scale-[0.98] border border-outline-variant/40 transition-all text-left" onclick="sortCurrentCard(5)" type="button">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 h-6 rounded-full bg-tertiary text-on-tertiary flex items-center justify-center font-label-md text-label-md font-semibold shrink-0">5</span>
|
||||
<span class="font-label-lg text-label-lg text-on-surface font-semibold group-hover:text-primary transition-colors">Most Important</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant/80">Non-negotiable core</span>
|
||||
</button>
|
||||
<!-- Pile 4 -->
|
||||
<button class="group relative flex items-center justify-between w-full py-2.5 px-3.5 rounded-lg bg-surface-container hover:bg-surface-container-high active:scale-[0.98] border border-outline-variant/40 transition-all text-left" onclick="sortCurrentCard(4)" type="button">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 h-6 rounded-full bg-surface-container-highest text-on-surface flex items-center justify-center font-label-md text-label-md font-semibold shrink-0">4</span>
|
||||
<span class="font-label-lg text-label-lg text-on-surface font-medium group-hover:text-primary transition-colors">Very Important</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant/80">Deeply held guide</span>
|
||||
</button>
|
||||
<!-- Pile 3 -->
|
||||
<button class="group relative flex items-center justify-between w-full py-2.5 px-3.5 rounded-lg bg-surface-container hover:bg-surface-container-high active:scale-[0.98] border border-outline-variant/40 transition-all text-left" onclick="sortCurrentCard(3)" type="button">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 h-6 rounded-full bg-surface-container-highest text-on-surface flex items-center justify-center font-label-md text-label-md font-semibold shrink-0">3</span>
|
||||
<span class="font-label-lg text-label-lg text-on-surface font-medium group-hover:text-primary transition-colors">Important</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant/80">Valued aspect</span>
|
||||
</button>
|
||||
<!-- Pile 2 -->
|
||||
<button class="group relative flex items-center justify-between w-full py-2.5 px-3.5 rounded-lg bg-surface-container-low hover:bg-surface-container active:scale-[0.98] border border-outline-variant/30 transition-all text-left" onclick="sortCurrentCard(2)" type="button">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 h-6 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center font-label-md text-label-md shrink-0">2</span>
|
||||
<span class="font-label-md text-label-md text-on-surface font-medium">Somewhat Important</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-outline">Contextual</span>
|
||||
</button>
|
||||
<!-- Pile 1 -->
|
||||
<button class="group relative flex items-center justify-between w-full py-2.5 px-3.5 rounded-lg bg-surface-container-low hover:bg-surface-container active:scale-[0.98] border border-outline-variant/30 transition-all text-left" onclick="sortCurrentCard(1)" type="button">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-6 h-6 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center font-label-md text-label-md shrink-0">1</span>
|
||||
<span class="font-label-md text-label-md text-on-surface font-medium">Not Important</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm text-outline">Not a current compass</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Live Pile Distribution Strip -->
|
||||
|
||||
</footer>
|
||||
</main>
|
||||
<script>
|
||||
// Contemplative Values Deck Data
|
||||
const valuesDeck = [
|
||||
{
|
||||
title: "Courage",
|
||||
domain: "Core Ground",
|
||||
icon: "nature",
|
||||
definition: "Moving forward in fidelity to truth and conviction despite fear, doubt, or external friction.",
|
||||
prompt: "How essential is this fidelity to who you choose to be each day?"
|
||||
},
|
||||
{
|
||||
title: "Authenticity",
|
||||
domain: "Inward Presence",
|
||||
icon: "self_improvement",
|
||||
definition: "Living in honest congruence with who you genuinely are, without defensive performance.",
|
||||
prompt: "Where does being fully yourself create peace and power in your life?"
|
||||
},
|
||||
{
|
||||
title: "Compassion",
|
||||
domain: "Relational",
|
||||
icon: "favorite",
|
||||
definition: "Meeting human vulnerability, struggle, and limitation with open warmth and kindness.",
|
||||
prompt: "How central is gentle empathy when things are difficult?"
|
||||
},
|
||||
{
|
||||
title: "Wisdom",
|
||||
domain: "Inquiry",
|
||||
icon: "menu_book",
|
||||
definition: "Discerning what is enduring, balanced, and essential through patient observation.",
|
||||
prompt: "Do you look to patient discernment to steer your major choices?"
|
||||
},
|
||||
{
|
||||
title: "Freedom",
|
||||
domain: "Sovereignty",
|
||||
icon: "all_inclusive",
|
||||
definition: "Spaciousness to author your own rhythm, personal boundaries, and inner cadence.",
|
||||
prompt: "How much do autonomy and breathing room shape your daily vitality?"
|
||||
},
|
||||
{
|
||||
title: "Integrity",
|
||||
domain: "Core Ground",
|
||||
icon: "shield",
|
||||
definition: "Honoring your word, ethical compass, and silent internal agreements without compromise.",
|
||||
prompt: "Does living in harmony with your conscience anchor your peace of mind?"
|
||||
},
|
||||
{
|
||||
title: "Creativity",
|
||||
domain: "Expression",
|
||||
icon: "palette",
|
||||
definition: "Generative synthesis, playfulness, and bringing novel perspective or art into form.",
|
||||
prompt: "Is making, imagining, or expressing vital to your well-being?"
|
||||
},
|
||||
{
|
||||
title: "Peace",
|
||||
domain: "Inward Presence",
|
||||
icon: "spa",
|
||||
definition: "Cultivating unshakeable interior stillness, gentle calm, and non-reactivity.",
|
||||
prompt: "How essential is quiet inner tranquility amidst worldly commotion?"
|
||||
}
|
||||
];
|
||||
|
||||
let currentIndex = 0;
|
||||
let sortedCount = 14;
|
||||
const totalCards = 100;
|
||||
const pileCounts = { 1: 2, 2: 3, 3: 5, 4: 3, 5: 1 };
|
||||
const historyStack = [];
|
||||
|
||||
function updateDisplay() {
|
||||
const cardData = valuesDeck[currentIndex % valuesDeck.length];
|
||||
const container = document.getElementById('card-container');
|
||||
|
||||
// Retain animation smoothness
|
||||
container.classList.remove('card-enter');
|
||||
void container.offsetWidth; // trigger reflow
|
||||
container.classList.add('card-enter');
|
||||
|
||||
document.getElementById('card-title').textContent = cardData.title;
|
||||
document.getElementById('card-domain').textContent = cardData.domain;
|
||||
document.getElementById('card-icon').textContent = cardData.icon;
|
||||
document.getElementById('card-definition').textContent = cardData.definition;
|
||||
document.getElementById('card-prompt').textContent = cardData.prompt;
|
||||
|
||||
document.getElementById('counter-label').textContent = `${sortedCount} of ${totalCards} values sorted`;
|
||||
const percentage = Math.min(100, Math.round((sortedCount / totalCards) * 100));
|
||||
document.getElementById('percent-label').textContent = `${percentage}%`;
|
||||
document.getElementById('progress-bar').style.width = `${percentage}%`;
|
||||
|
||||
// Update pile pill numbers
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
const el = document.getElementById(`count-${i}`);
|
||||
if (el) el.textContent = pileCounts[i];
|
||||
}
|
||||
|
||||
// Undo button state
|
||||
document.getElementById('undo-btn').disabled = historyStack.length === 0;
|
||||
}
|
||||
|
||||
function sortCurrentCard(pileNumber) {
|
||||
// Record to history for smooth undo
|
||||
historyStack.push({
|
||||
cardIndex: currentIndex,
|
||||
assignedPile: pileNumber
|
||||
});
|
||||
|
||||
pileCounts[pileNumber] = (pileCounts[pileNumber] || 0) + 1;
|
||||
sortedCount++;
|
||||
currentIndex = (currentIndex + 1) % valuesDeck.length;
|
||||
|
||||
const container = document.getElementById('card-container');
|
||||
container.classList.add('card-exit');
|
||||
setTimeout(() => {
|
||||
container.classList.remove('card-exit');
|
||||
updateDisplay();
|
||||
}, 120);
|
||||
}
|
||||
|
||||
function undoLastSort() {
|
||||
if (historyStack.length === 0) return;
|
||||
const lastAction = historyStack.pop();
|
||||
if (pileCounts[lastAction.assignedPile] > 0) {
|
||||
pileCounts[lastAction.assignedPile]--;
|
||||
}
|
||||
sortedCount = Math.max(0, sortedCount - 1);
|
||||
currentIndex = lastAction.cardIndex;
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
function saveAndExit() {
|
||||
const btn = document.getElementById('pile-helper');
|
||||
btn.textContent = "Progress saved";
|
||||
btn.classList.add('text-tertiary', 'font-semibold');
|
||||
setTimeout(() => {
|
||||
btn.textContent = "Tap to sort";
|
||||
btn.classList.remove('text-tertiary', 'font-semibold');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateDisplay();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "projects/9343387512370733994/screens/8ca48b5fb47f46efb62882151cf3966d",
|
||||
"title": "Values Sort \u2014 Card Sorting (5 Piles)",
|
||||
"screenshot": {
|
||||
"name": "projects/9343387512370733994/files/15029646364846437108",
|
||||
"downloadUrl": "https://lh3.googleusercontent.com/aida/AEtjO1UKPd2AvYz_Ucd2ae0AXKkL1mf0yGN6F1_AxDfBFGuduAa3Glzo-QZSGEM9bnNThdbJBwaLp6-YZKG96EL79UjeMqDwutbANo2j2Xxdxyo3S-P2kEfS5WsFqdk99nTzvphFypQtiFa5uF_CftoMwJRKKFm1D8Xo3YaGT07BEPrl09YGNSZR0wytLyEJUkl9Y2epmCJMJ_NiudNMLR-JxcsXqk5XndAVRz09mkUI3A8JitbLiv6Z3QlZDSU"
|
||||
},
|
||||
"htmlCode": {
|
||||
"name": "projects/9343387512370733994/files/10948046668312136526",
|
||||
"downloadUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyNTNlZWY1YjEwNGU3NTljNGQwMzgyZWUzEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"mimeType": "text/html"
|
||||
},
|
||||
"width": "780",
|
||||
"height": "1768",
|
||||
"deviceType": "MOBILE"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@@ -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>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "projects/9343387512370733994/screens/12809277486904866316",
|
||||
"title": "Values Sort \u2014 Important Cards (Pile 3)",
|
||||
"screenshot": {
|
||||
"name": "projects/9343387512370733994/files/12809277486904866801",
|
||||
"downloadUrl": "https://lh3.googleusercontent.com/aida/AEtjO1XQVoRrEK9mxF3gFjm9RD-lkFg-pwyvf_kJsLOREyZzFD3UWWWPbcivFX2aIvhiewCkv3Rw4SWGxq3AtN-TbfKPD2L4R0QKA3XPc_RImmva7z66yTUJo8bvozFBpwKdHXo5vPaxqB2-UyjVDLrfiCY75WYAkp6P0BF4W3xqoRy8mWUqe5ljCtjlIwbyo2GyR66wkPSOAeUqFl6s0jLycyB7MAaiBbBPOejz27uo2xYdbppL0Bzc7XVrpeE"
|
||||
},
|
||||
"htmlCode": {
|
||||
"name": "projects/9343387512370733994/files/12809277486904867286",
|
||||
"downloadUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyODM5NjZmMWUwNGU3NThiMjE2MDFkYWQxEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"mimeType": "text/html"
|
||||
},
|
||||
"width": "780",
|
||||
"height": "2766",
|
||||
"deviceType": "MOBILE"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@@ -0,0 +1,722 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "projects/9343387512370733994/screens/73272c6039864978bcec444c7df2973f",
|
||||
"title": "Values Sort \u2014 Most Important (with Demote Drawer)",
|
||||
"screenshot": {
|
||||
"name": "projects/9343387512370733994/screens/73272c6039864978bcec444c7df2973f/fileEntries/screenshot",
|
||||
"downloadUrl": "https://lh3.googleusercontent.com/aida/AEtjO1Xhu39G6wcAy9suH2BL28jVCSboZ_ydBY69b4vlY9-gtnbu66RyRiHaRDF8MkiSVfcjYFtlIVfpFgyN856OBgA4qenmijh6Uii1vIm22lmUNWElTOI1GSSUyOF_NMNLN7N3HKNwLY6pc0PlrUBoB--DVbW6-RcnqfBG-CIAFWWzuOn0YEXUIbLzFLfecIwxJbbHEblBtC8m7q0RR140TUxcbtxtzHRX_km3es8xnlabSjh1DMxb3K1Efg"
|
||||
},
|
||||
"htmlCode": {
|
||||
"name": "projects/9343387512370733994/screens/73272c6039864978bcec444c7df2973f/fileEntries/html",
|
||||
"downloadUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyNzZkYjg4ZjgwNWYxMzVmZTYyMDcyNzBkEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"mimeType": "text/html"
|
||||
},
|
||||
"width": "780",
|
||||
"height": "6564",
|
||||
"deviceType": "MOBILE"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,191 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "projects/9343387512370733994/screens/7247b606c08a44ef906836e5ab250fd1",
|
||||
"title": "Values Sort \u2014 Practice Hub",
|
||||
"screenshot": {
|
||||
"name": "projects/9343387512370733994/files/7801972050289016175",
|
||||
"downloadUrl": "https://lh3.googleusercontent.com/aida/AEtjO1UHEdAYHIX_yrZnosUKgBf2xJF0wQL3zTavsKvxg0OSr8wi6CA62NhoBaFMmJGpz7onY3fJBqEfn0FLm1DARm7R4FJ1Kvh-yLyufytn_LW9IJhT_HgxFUtYHE2lLfLUw0BK3O39haKwmhTXdWNkTAdlWoXmJZNRYACXJ6uXbfbXPvQsLtpT5LaQgBu30F_KmlrUqjUtsxxtzNzTEUF-GZhO8Hi-B5weq6pQ0aAppHrH13K3uxb0j6VwSiE"
|
||||
},
|
||||
"htmlCode": {
|
||||
"name": "projects/9343387512370733994/files/3785570347874661052",
|
||||
"downloadUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmI0MDNhMzc1YWIwNWYxMjlkYjE3MDRmY2VkEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"mimeType": "text/html"
|
||||
},
|
||||
"width": "780",
|
||||
"height": "3234",
|
||||
"deviceType": "MOBILE"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
@@ -0,0 +1,547 @@
|
||||
<!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 px-margin-mobile pb-12">
|
||||
<!-- Progress Header & Stage Cue -->
|
||||
<header class="flex flex-col space-y-space-sm pt-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
<span class="font-label-sm text-label-sm uppercase tracking-wider text-secondary">Stage 3 of 4 · Prioritization</span>
|
||||
</div>
|
||||
<button class="inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-full bg-surface-container text-on-surface-variant text-label-md font-label-md shadow-sm transition-transform active:scale-95" onclick="togglePileSheet()" type="button">
|
||||
<span class="material-symbols-outlined text-[16px]">layers</span>
|
||||
<span class="">View Piles (100)</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Stepper Graphic Inline Bar -->
|
||||
<div class="w-full bg-surface-container-high h-1 rounded-full overflow-hidden flex">
|
||||
<div class="bg-surface-variant w-1/4 h-full"></div>
|
||||
<div class="bg-surface-variant w-1/4 h-full"></div>
|
||||
<div class="bg-secondary w-1/4 h-full"></div>
|
||||
<div class="bg-surface-container-high w-1/4 h-full"></div>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface tracking-tight">Order Your Core Values</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">
|
||||
Drag or reorder your finalists. Let <span class="font-semibold text-secondary">#1</span> represent your non-negotiable value.</p>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Editorial Visual Inspiration Vignette -->
|
||||
|
||||
<!-- Reorderable List Container -->
|
||||
<div class="flex flex-col space-y-space-sm mt-5" id="rankList">
|
||||
<!-- Item 1 (North Star Highlight) -->
|
||||
<article class="rank-card relative rounded-lg p-4 bg-surface-container-lowest shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="1" draggable="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center font-label-md text-label-md font-bold rank-num">1</div>
|
||||
|
||||
<div class="north-star-tag inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full bg-secondary/10 text-secondary text-label-sm font-label-sm"><span class="material-symbols-outlined text-[12px]" style="font-variation-settings: 'FILL' 1;">star</span><span class="">Primary North Star</span></div></div>
|
||||
<div class="flex items-center space-x-1 text-on-surface-variant">
|
||||
|
||||
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-low active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
|
||||
</button>
|
||||
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Authenticity</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
|
||||
Living in honest alignment with who you are, without continuous performance or self-betrayal.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-outline">Pillar: Self-Alignment</span>
|
||||
<button class="font-label-sm text-label-sm text-secondary underline" onclick="openRationaleModal('Authenticity', '1')" type="button">Add personal rationale</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Item 2 -->
|
||||
|
||||
<!-- Item 3 -->
|
||||
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="3" draggable="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">2</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-on-surface-variant">
|
||||
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
|
||||
</button>
|
||||
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
|
||||
</button>
|
||||
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Compassion</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
|
||||
Meeting human frailty with gentleness, extending warmth before judgment.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-outline">Pillar: Relational</span>
|
||||
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Compassion', '3')" type="button">Add personal rationale</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Item 4 -->
|
||||
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="4" draggable="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">3</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-on-surface-variant">
|
||||
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
|
||||
</button>
|
||||
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
|
||||
</button>
|
||||
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Freedom</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
|
||||
Sovereignty over one’s calendar, bodily presence, and mental headspace.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-outline">Pillar: Independence</span>
|
||||
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Freedom', '4')" type="button">Add personal rationale</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Item 5 -->
|
||||
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="5" draggable="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">4</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-on-surface-variant">
|
||||
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
|
||||
</button>
|
||||
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
|
||||
</button>
|
||||
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Curiosity</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
|
||||
An open question kept alive without the desperate hurry to conclude.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-outline">Pillar: Growth</span>
|
||||
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Curiosity', '5')" type="button">Add personal rationale</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Item 6 -->
|
||||
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="6" draggable="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">5</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-on-surface-variant">
|
||||
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
|
||||
</button>
|
||||
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
|
||||
</button>
|
||||
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Integrity</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
|
||||
Wholeness in private conduct; matching private conviction with public stance.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-outline">Pillar: Alignment</span>
|
||||
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Integrity', '6')" type="button">Add personal rationale</button>
|
||||
</div>
|
||||
</article><article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="2" draggable="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">6</div>
|
||||
<span class="font-label-sm text-label-sm text-outline font-medium">Secondary Anchor</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-on-surface-variant">
|
||||
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
|
||||
</button>
|
||||
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
|
||||
</button>
|
||||
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Courage</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
|
||||
Entering the uncertain room, speaking the tender truth despite physical trembling.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-outline">Pillar: Action</span>
|
||||
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Courage', '2')" type="button">Add personal rationale</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Item 7 -->
|
||||
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="7" draggable="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">7</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-on-surface-variant">
|
||||
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
|
||||
</button>
|
||||
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
|
||||
</button>
|
||||
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Connection</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
|
||||
Deep, unhurried presence that allows another soul to feel seen and held.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-outline">Pillar: Relational</span>
|
||||
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Connection', '7')" type="button">Add personal rationale</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Item 8 -->
|
||||
<article class="rank-card rounded-lg p-4 bg-surface-container shadow-sm flex flex-col space-y-2 transition-all duration-200" data-id="8" draggable="true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num">8</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-on-surface-variant">
|
||||
<button aria-label="Move Up" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, -1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_up</span>
|
||||
</button>
|
||||
<button aria-label="Move Down" class="w-8 h-8 rounded-full flex items-center justify-center bg-surface-container-lowest active:bg-surface-container-high transition-colors" onclick="moveRank(this, 1)" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
|
||||
</button>
|
||||
<div class="drag-handle w-8 h-8 flex items-center justify-center cursor-grab text-outline touch-none">
|
||||
<span class="material-symbols-outlined text-[20px]">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">Creativity</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">
|
||||
The quiet joy of shaping raw experience into form, word, or tangible craft.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-outline">Pillar: Self-Expression</span>
|
||||
<button class="font-label-sm text-label-sm text-on-surface-variant underline" onclick="openRationaleModal('Creativity', '8')" type="button">Add personal rationale</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<!-- Add from sorted piles action -->
|
||||
<button class="mt-4 w-full py-3.5 px-4 rounded-lg bg-surface-container-low text-on-surface-variant flex items-center justify-center space-x-2 font-label-md text-label-md transition-colors active:bg-surface-container-high" onclick="togglePileSheet()" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">add_circle</span>
|
||||
<span class="">Pull another value from 'Important' pile</span>
|
||||
</button>
|
||||
<!-- Reflection Callout Box -->
|
||||
<div class="mt-6 rounded-lg bg-surface-container p-4 flex space-x-3.5 shadow-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-secondary/15 text-secondary flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[18px]">psychology_alt</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline-md text-[17px] text-on-surface">Gentle Inquiry</h3>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">
|
||||
Notice where inner resistance surfaces. Are you ranking what you <em>truly</em> value, or what you feel you <em>should</em> value for others?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary Reflective Imagery Accent -->
|
||||
<div class="mt-5 rounded-lg overflow-hidden bg-surface-container-low p-4 flex items-center space-x-4 shadow-sm">
|
||||
<div class="flex-1">
|
||||
<p class="font-label-sm text-label-sm text-tertiary uppercase tracking-wider font-semibold">Stage Insight</p>
|
||||
<p class="font-headline-md text-[16px] text-on-surface mt-1 leading-snug">
|
||||
"When values conflict under pressure, #1 determines your immediate direction."
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 bg-surface-container">
|
||||
<img class="w-full h-full object-cover" data-alt="Warm ceramic vessel resting beside dry meadow grass on handcrafted linen background with contemplative gentle sunlight in muted terracotta tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIibaS4hwL-2jGWWTqf_pQJzU-KHkI-0vmbMMYQ11vuGGKomTPwa3vX1M4ozxfJwuTDpCGJpxyvYwrE-yLV1HOzHdQEKL_iWpaeNnPK73O6DOoD-28XHwmzQpJ0dmwu0qfzBTCRngNOqNLG6jADnkDi4PUKSw83cpPmU3HKyRC-ZEc_QzSzyUUR0SrR9y60_IllXLFkw3fkI5c_R_XV9FqTzhjiV7b5CdPcBoopqcT6bJ5xcdhQ168">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Floating CTA Container -->
|
||||
<div class="sticky bottom-3 mt-8 bg-surface/90 backdrop-blur-md p-2 rounded-full shadow-xl flex items-center justify-between space-x-2">
|
||||
<button aria-label="How sorting works" class="w-12 h-12 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant active:scale-95 transition-transform" onclick="showHelpSnackbar()" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">help_outline</span>
|
||||
</button>
|
||||
<button class="flex-1 h-12 px-6 rounded-full bg-primary text-on-primary font-label-lg text-label-lg flex items-center justify-center space-x-2 shadow-md active:opacity-90 transition-opacity" onclick="continueToReflection()" type="button">
|
||||
<span class="">Lock & Continue</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modals and Drawers (Hidden by default) -->
|
||||
<!-- 1. Reflection / Rationale Modal Sheet -->
|
||||
<div class="fixed inset-0 z-50 bg-inverse-surface/40 backdrop-blur-sm hidden flex items-end justify-center" id="rationaleModal">
|
||||
<div class="w-full max-w-lg bg-surface-container-lowest rounded-t-xl p-margin-mobile shadow-2xl flex flex-col space-y-4 max-h-[85vh] overflow-y-auto">
|
||||
<div class="w-10 h-1 rounded-full bg-outline-variant mx-auto self-center mb-1"></div>
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span class="font-label-sm text-label-sm text-secondary uppercase font-semibold" id="modalRankBadge">Value #1</span>
|
||||
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface" id="modalValueName">Authenticity</h2>
|
||||
</div>
|
||||
<button class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant" onclick="closeRationaleModal()" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">
|
||||
Why does this value occupy this exact rank? When was the last time you honored or compromised it?
|
||||
</p>
|
||||
<textarea class="w-full p-3.5 rounded-lg bg-surface-container-low text-on-surface font-body-sm text-body-sm outline-none resize-none placeholder-outline" placeholder="Write your personal reflections or lived example here..." rows="4"></textarea>
|
||||
<div class="flex items-center justify-end space-x-2 pt-2">
|
||||
<button class="px-4 py-2.5 rounded-full bg-surface-container text-on-surface font-label-md text-label-md" onclick="closeRationaleModal()" type="button">Cancel</button>
|
||||
<button class="px-5 py-2.5 rounded-full bg-primary text-on-primary font-label-md text-label-md" onclick="saveRationale()" type="button">Save Note</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2. View All Piles Drawer -->
|
||||
<div class="fixed inset-0 z-50 bg-inverse-surface/40 backdrop-blur-sm flex items-end justify-center hidden" id="pilesSheet">
|
||||
<div class="w-full max-w-lg bg-surface-container rounded-t-xl p-margin-mobile shadow-2xl flex flex-col space-y-4 max-h-[88vh] overflow-y-auto">
|
||||
<div class="w-10 h-1 rounded-full bg-outline-variant mx-auto self-center mb-1"></div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">All 5 Sorting Piles</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">100 Original Values Distributed</p>
|
||||
</div>
|
||||
<button class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface-variant" onclick="togglePileSheet()" type="button">
|
||||
<span class="material-symbols-outlined text-[18px]">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Pile mini summaries -->
|
||||
<div class="space-y-2.5">
|
||||
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<span class="w-3 h-3 rounded-full bg-secondary"></span>
|
||||
<div>
|
||||
<p class="font-headline-md text-[17px] text-on-surface">Always True for Me (Top Tier)</p>
|
||||
<p class="font-label-sm text-label-sm text-outline">8 cards selected (Active in rank order)</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-secondary font-semibold">8</span>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<span class="w-3 h-3 rounded-full bg-tertiary"></span>
|
||||
<div>
|
||||
<p class="font-headline-md text-[17px] text-on-surface">Very Important</p>
|
||||
<p class="font-label-sm text-label-sm text-outline">Wisdom, Resilience, Humility, Patience...</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant font-semibold">18</span>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<span class="w-3 h-3 rounded-full bg-outline-variant"></span>
|
||||
<div>
|
||||
<p class="font-headline-md text-[17px] text-on-surface">Important to Me</p>
|
||||
<p class="font-label-sm text-label-sm text-outline">Craft, Adventure, Security, Precision...</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant font-semibold">32</span>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<span class="w-3 h-3 rounded-full bg-surface-variant"></span>
|
||||
<div>
|
||||
<p class="font-headline-md text-[17px] text-on-surface">Somewhat Important</p>
|
||||
<p class="font-label-sm text-label-sm text-outline">Tradition, Recognition, Predictability...</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant font-semibold">24</span>
|
||||
</div>
|
||||
<div class="p-3 bg-surface-container-lowest rounded-lg flex items-center justify-between shadow-sm">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<span class="w-3 h-3 rounded-full bg-surface-dim"></span>
|
||||
<div>
|
||||
<p class="font-headline-md text-[17px] text-on-surface">Not Central to My Life</p>
|
||||
<p class="font-label-sm text-label-sm text-outline">Authority, Fame, Conformity, Competition...</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant font-semibold">18</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-3 rounded-full bg-primary text-on-primary font-label-lg text-label-lg mt-2" onclick="togglePileSheet()" type="button">
|
||||
Return to Ordering
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toast / Feedback message container -->
|
||||
<div class="fixed top-5 left-1/2 -translate-x-1/2 z-50 bg-inverse-surface text-inverse-on-surface font-label-md text-label-md px-4 py-2 rounded-full shadow-lg transition-opacity duration-300 flex items-center space-x-2 opacity-0 pointer-events-none" id="toastMessage">
|
||||
<span class="material-symbols-outlined text-[16px] text-secondary-fixed">check_circle</span>
|
||||
<span id="toastText" class="">New hierarchy saved</span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Dynamic Reordering Functions
|
||||
function moveRank(button, direction) {
|
||||
const card = button.closest('.rank-card');
|
||||
const parent = card.parentElement;
|
||||
|
||||
if (direction === -1) {
|
||||
const prev = card.previousElementSibling;
|
||||
if (prev) {
|
||||
parent.insertBefore(card, prev);
|
||||
triggerHapticVisual(card);
|
||||
}
|
||||
} else if (direction === 1) {
|
||||
const next = card.nextElementSibling;
|
||||
if (next) {
|
||||
parent.insertBefore(next, card);
|
||||
triggerHapticVisual(card);
|
||||
}
|
||||
}
|
||||
recalculateRanks();
|
||||
}
|
||||
|
||||
function recalculateRanks() {
|
||||
const cards = document.querySelectorAll('#rankList .rank-card');
|
||||
cards.forEach((card, idx) => {
|
||||
const rankNum = idx + 1;
|
||||
const badge = card.querySelector('.rank-num');
|
||||
if (badge) {
|
||||
badge.textContent = rankNum;
|
||||
}
|
||||
|
||||
// Rank 1 gets the highlighted North Star treatment
|
||||
if (rankNum === 1) {
|
||||
card.classList.remove('bg-surface-container');
|
||||
card.classList.add('bg-surface-container-lowest');
|
||||
badge.className = 'w-7 h-7 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center font-label-md text-label-md font-bold rank-num';
|
||||
|
||||
// Ensure North Star Tag
|
||||
if (!card.querySelector('.north-star-tag')) {
|
||||
const headerLeft = card.querySelector('.flex.items-center.space-x-2\\.5');
|
||||
const tag = document.createElement('div');
|
||||
tag.className = 'north-star-tag inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full bg-secondary/10 text-secondary text-label-sm font-label-sm';
|
||||
tag.innerHTML = '<span class="material-symbols-outlined text-[12px]" style="font-variation-settings: \'FILL\' 1;">star</span><span>Primary North Star</span>';
|
||||
headerLeft.appendChild(tag);
|
||||
}
|
||||
} else {
|
||||
card.classList.add('bg-surface-container');
|
||||
card.classList.remove('bg-surface-container-lowest');
|
||||
badge.className = 'w-7 h-7 rounded-full bg-surface-container-high text-on-surface flex items-center justify-center font-label-md text-label-md rank-num';
|
||||
|
||||
const existingTag = card.querySelector('.north-star-tag');
|
||||
if (existingTag) {
|
||||
existingTag.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function triggerHapticVisual(element) {
|
||||
element.classList.add('scale-[1.01]', 'shadow-md');
|
||||
setTimeout(() => {
|
||||
element.classList.remove('scale-[1.01]', 'shadow-md');
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// Modals & Bottom Sheets
|
||||
function togglePileSheet() {
|
||||
const sheet = document.getElementById('pilesSheet');
|
||||
sheet.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
function openRationaleModal(valueName, rank) {
|
||||
document.getElementById('modalValueName').textContent = valueName;
|
||||
document.getElementById('modalRankBadge').textContent = 'Value #' + rank;
|
||||
document.getElementById('rationaleModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeRationaleModal() {
|
||||
document.getElementById('rationaleModal').classList.add('hidden');
|
||||
}
|
||||
|
||||
function saveRationale() {
|
||||
closeRationaleModal();
|
||||
showToast('Reflection note preserved');
|
||||
}
|
||||
|
||||
function continueToReflection() {
|
||||
showToast('Values hierarchy locked. Proceeding...');
|
||||
}
|
||||
|
||||
function showHelpSnackbar() {
|
||||
showToast('Drag handles or tap arrows to sort');
|
||||
}
|
||||
|
||||
function showToast(text) {
|
||||
const toast = document.getElementById('toastMessage');
|
||||
const toastText = document.getElementById('toastText');
|
||||
toastText.textContent = text;
|
||||
toast.classList.remove('opacity-0', 'pointer-events-none');
|
||||
setTimeout(() => {
|
||||
toast.classList.add('opacity-0', 'pointer-events-none');
|
||||
}, 2200);
|
||||
}
|
||||
|
||||
// Touch Drag Emulation / Simple drag sorting setup
|
||||
let draggedCard = null;
|
||||
const rankList = document.getElementById('rankList');
|
||||
|
||||
rankList.addEventListener('dragstart', (e) => {
|
||||
draggedCard = e.target.closest('.rank-card');
|
||||
if (draggedCard) {
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
draggedCard.classList.add('opacity-50');
|
||||
}
|
||||
});
|
||||
|
||||
rankList.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
const targetCard = e.target.closest('.rank-card');
|
||||
if (targetCard && targetCard !== draggedCard) {
|
||||
const rect = targetCard.getBoundingClientRect();
|
||||
const next = (e.clientY - rect.top) / (rect.bottom - rect.top) > 0.5;
|
||||
rankList.insertBefore(draggedCard, next ? targetCard.nextSibling : targetCard);
|
||||
recalculateRanks();
|
||||
}
|
||||
});
|
||||
|
||||
rankList.addEventListener('dragend', () => {
|
||||
if (draggedCard) {
|
||||
draggedCard.classList.remove('opacity-50');
|
||||
draggedCard = null;
|
||||
recalculateRanks();
|
||||
showToast('New hierarchy saved');
|
||||
}
|
||||
});
|
||||
|
||||
// Enable drag attribute on cards
|
||||
document.querySelectorAll('.rank-card').forEach(card => {
|
||||
card.setAttribute('draggable', 'true');
|
||||
});
|
||||
</script></main>
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "projects/9343387512370733994/screens/07a9fc8b113c479db7ece5398a017a9e",
|
||||
"title": "Values Sort \u2014 Rank Order Top Values",
|
||||
"screenshot": {
|
||||
"name": "projects/9343387512370733994/files/1597732408047210864",
|
||||
"downloadUrl": "https://lh3.googleusercontent.com/aida/AEtjO1WpFA576TA5wf1HnZIoIBm8m5-S0M9LlUvAz8ujVYmbkVydsAdUAmtOpQKsY9nixUIwZEd5bqrDTe6ITlJfFFRhDRxkehFVmgcdAZksW9L89pME6e2gTYuO-qqFQKwD-XAXg_PDunjOg8XZeYs5p1dIVenclfxkXwSQ4Y0IIDTHtIMONRE4S07sHY7skqnnL-f2vmbEBg3ah1WyjcLXIUFIL4AINmYK-vTMCxwwsQ_ev3qhq909m7CdoQ"
|
||||
},
|
||||
"htmlCode": {
|
||||
"name": "projects/9343387512370733994/files/15103438974169067770",
|
||||
"downloadUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyY2VlNWY5MzgwMjNiZWU1MjMxMjVjMzFhEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"mimeType": "text/html"
|
||||
},
|
||||
"width": "780",
|
||||
"height": "4408",
|
||||
"deviceType": "MOBILE"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,299 @@
|
||||
<!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 px-margin-mobile sm:px-margin space-y-space-lg pb-12">
|
||||
<!-- Eyebrow & Stage Header -->
|
||||
<header class="flex flex-col space-y-space-xs text-left pt-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm text-secondary tracking-widest uppercase bg-surface-container-high px-3 py-1 rounded-full">
|
||||
Step 5 of 5 · Deep Reflection
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-tertiary">spa</span>
|
||||
Unrushed Practice
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="font-headline-xl-mobile sm:font-headline-xl text-headline-xl-mobile sm:text-headline-xl text-on-surface mt-1">Your Core Values</h1>
|
||||
|
||||
</header>
|
||||
<!-- Value Selector Carousel -->
|
||||
<section class="flex flex-col space-y-2">
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Top 5 Core Anchors</span>
|
||||
<span class="font-label-sm text-label-sm text-tertiary font-semibold" id="carousel-status">3 of 4 answered</span>
|
||||
</div>
|
||||
<div class="flex gap-2 overflow-x-auto pb-2 scrollbar-none snap-x" id="value-tabs">
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md shadow-sm transition-all">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary-fixed"></span>
|
||||
#1 Authenticity
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-primary-container text-on-primary-container">3/4</span>
|
||||
</button>
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-tertiary"></span>
|
||||
#2 Courage
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">4/4</span>
|
||||
</button>
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
#3 Compassion
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">2/4</span>
|
||||
</button>
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
#4 Freedom
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">2/4</span>
|
||||
</button>
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
#5 Curiosity
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">3/4</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Core Value Spotlight Card -->
|
||||
<section class="bg-surface-container-low rounded-lg p-space-lg shadow-sm flex flex-col gap-4 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex flex-col">
|
||||
|
||||
<h2 class="font-headline-lg-mobile sm:font-headline-lg text-headline-lg-mobile sm:text-headline-lg text-on-surface mt-0.5">
|
||||
Authenticity
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant italic">
|
||||
"Living in genuine alignment with inner truth and speaking without pretense or performance."
|
||||
</p>
|
||||
|
||||
</section>
|
||||
<!-- Reflection Questions List (Accordions) -->
|
||||
<section class="flex flex-col space-y-3" id="questions-container">
|
||||
<!-- Question 1: Answered & Collapsible -->
|
||||
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden" id="card-q1">
|
||||
<button class="w-full text-left p-space-lg flex items-center justify-between gap-3 focus:outline-none" onclick="toggleCard('q1')">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<span class="w-6 h-6 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[15px] font-bold">check</span>
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate sm:whitespace-normal">
|
||||
What does this value mean to you?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline transition-transform duration-200 rotate-180" id="icon-q1">expand_more</span>
|
||||
</button>
|
||||
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 flex" id="content-q1">
|
||||
<div class="bg-surface-container p-space-md rounded-DEFAULT">
|
||||
<p class="font-body-md text-body-md text-on-surface leading-relaxed" id="text-q1">
|
||||
To me, authenticity is the quiet permission to stop curating who I am for other people's approval. It means letting my outward actions and words match what is truly happening inside, even when that makes me feel vulnerable or imperfect.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors" onclick="editAnswer('q1')">
|
||||
<span class="material-symbols-outlined text-[14px]">edit</span>
|
||||
Edit reflection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Question 2: Answered & Collapsed default -->
|
||||
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden" id="card-q2">
|
||||
<button class="w-full text-left p-space-lg flex items-center justify-between gap-3 focus:outline-none" onclick="toggleCard('q2')">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<span class="w-6 h-6 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[15px] font-bold">check</span>
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate sm:whitespace-normal">
|
||||
Why did you choose this as important?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline transition-transform duration-200" id="icon-q2">expand_more</span>
|
||||
</button>
|
||||
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 hidden" id="content-q2">
|
||||
<div class="bg-surface-container p-space-md rounded-DEFAULT">
|
||||
<p class="font-body-md text-body-md text-on-surface leading-relaxed" id="text-q2">
|
||||
Whenever I have betrayed my own intuition to keep the peace or satisfy someone else, an inner resentment always took root. Choosing authenticity has been my most reliable antidote to regret and burnout.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors" onclick="editAnswer('q2')">
|
||||
<span class="material-symbols-outlined text-[14px]">edit</span>
|
||||
Edit reflection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Question 3: Active / Expanded Input Field -->
|
||||
<article class="bg-surface-container-low rounded-lg shadow-md transition-all overflow-hidden" id="card-q3">
|
||||
<button class="w-full text-left p-space-lg flex items-center justify-between gap-3 focus:outline-none" onclick="toggleCard('q3')">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<span class="w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed-variant shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[15px]">edit_note</span>
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-sm text-label-sm text-secondary font-semibold uppercase tracking-wider">In Progress</span>
|
||||
<span class="font-label-sm text-label-sm text-outline">· Prompt 3</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">
|
||||
How have you shown this value in your daily life?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline transition-transform duration-200 rotate-180" id="icon-q3">expand_more</span>
|
||||
</button>
|
||||
<div class="px-space-lg pb-space-lg pt-0 flex flex-col gap-3" id="content-q3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<textarea class="w-full p-space-md bg-surface rounded-DEFAULT text-on-surface font-body-md text-body-md focus:outline-none shadow-inner resize-none transition-colors" id="textarea-q3" oninput="handleInput(this)" placeholder="Reflect gently on recent moments where this was present..." rows="4">Recently, during a project retrospective, I spoke honestly about feeling overwhelmed instead of nodding along like everything was fine. It opened the door for my colleagues to share their true workload too.</textarea>
|
||||
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2 pt-1">
|
||||
<button class="px-5 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md hover:bg-primary-container transition-all shadow-sm" onclick="saveReflection('q3')">
|
||||
Save Reflection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Question 4: Unanswered / Inviting Call to Reflect -->
|
||||
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden" id="card-q4">
|
||||
<button class="w-full text-left p-space-lg flex items-center justify-between gap-3 focus:outline-none" onclick="toggleCard('q4')">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<span class="w-6 h-6 rounded-full bg-surface-container-highest flex items-center justify-center text-outline shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[16px]">add</span>
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-sm text-label-sm text-outline font-semibold uppercase tracking-wider">Unanswered</span>
|
||||
<span class="font-label-sm text-label-sm text-outline">· Prompt 4</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">
|
||||
In what ways could you be even more true to it?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline transition-transform duration-200 rotate-180" id="icon-q4">expand_more</span>
|
||||
</button>
|
||||
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 flex" id="content-q4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<textarea class="w-full p-space-md bg-surface rounded-DEFAULT text-on-surface font-body-md text-body-md focus:outline-none shadow-inner resize-none transition-colors" id="textarea-q4" oninput="handleInput(this)" placeholder="Notice the areas where you still mask or hold back. Write your reflections here..." rows="3"></textarea>
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant" id="counter-q4">
|
||||
0 words
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2 pt-1">
|
||||
<button class="px-5 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md hover:bg-primary-container transition-all shadow-sm" onclick="saveReflection('q4')">
|
||||
Save Reflection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<!-- Mindful Life Compass Quick-peek Card -->
|
||||
<section class="bg-surface-container p-space-md rounded-lg flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-tertiary-container text-on-tertiary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[20px]">explore</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-md text-label-md text-on-surface font-semibold">Your Life Compass is Taking Shape</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface-variant">14 of 20 total reflections recorded</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="px-3 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors shrink-0">
|
||||
Preview
|
||||
</button>
|
||||
</section>
|
||||
<!-- Bottom Navigation / Floating Action Bar -->
|
||||
<nav class="sticky bottom-2 z-10 bg-surface-container-lowest/90 backdrop-blur-md p-space-md rounded-lg shadow-xl flex flex-col gap-3">
|
||||
<!-- Progress Indicator Bar -->
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex-1 py-3 px-4 rounded-full bg-surface-container-high text-on-surface font-label-lg text-label-lg hover:bg-surface-container-highest transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_back</span>
|
||||
Previous
|
||||
</button>
|
||||
<button class="flex-[2] py-3 px-5 rounded-full bg-primary text-on-primary font-label-lg text-label-lg hover:bg-primary-container transition-all shadow-md flex items-center justify-center gap-2">
|
||||
<span class="">Next: #2 Courage</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Interactive Client-side micro-interactions -->
|
||||
<script>
|
||||
function toggleCard(id) {
|
||||
const content = document.getElementById('content-' + id);
|
||||
const icon = document.getElementById('icon-' + id);
|
||||
|
||||
if (!content) return;
|
||||
|
||||
const isHidden = content.classList.contains('hidden');
|
||||
if (isHidden) {
|
||||
content.classList.remove('hidden');
|
||||
content.classList.add('flex');
|
||||
icon.classList.add('rotate-180');
|
||||
} else {
|
||||
content.classList.add('hidden');
|
||||
content.classList.remove('flex');
|
||||
icon.classList.remove('rotate-180');
|
||||
}
|
||||
}
|
||||
|
||||
function handleInput(textarea) {
|
||||
const words = textarea.value.trim().split(/\s+/).filter(Boolean).length;
|
||||
const id = textarea.id.replace('textarea-', '');
|
||||
const counter = document.getElementById('counter-' + id);
|
||||
if (counter) {
|
||||
counter.textContent = `${words} words · Editing`;
|
||||
}
|
||||
}
|
||||
|
||||
function saveReflection(id) {
|
||||
const textarea = document.getElementById('textarea-' + id);
|
||||
const counter = document.getElementById('counter-' + id);
|
||||
if (textarea && counter) {
|
||||
const words = textarea.value.trim().split(/\s+/).filter(Boolean).length;
|
||||
counter.textContent = `${words} words · Saved just now`;
|
||||
}
|
||||
}
|
||||
|
||||
function editAnswer(id) {
|
||||
const content = document.getElementById('content-' + id);
|
||||
const textElem = document.getElementById('text-' + id);
|
||||
if (!content || !textElem) return;
|
||||
|
||||
const currentText = textElem.textContent.trim();
|
||||
content.innerHTML = `
|
||||
<div class="flex flex-col gap-2">
|
||||
<textarea
|
||||
id="textarea-${id}"
|
||||
rows="3"
|
||||
class="w-full p-space-md bg-surface rounded-DEFAULT text-on-surface font-body-md text-body-md focus:outline-none shadow-inner resize-none"
|
||||
oninput="handleInput(this)"
|
||||
>${currentText}</textarea>
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant" id="counter-${id}">Editing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2 pt-1">
|
||||
<button onclick="location.reload()" class="px-5 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md shadow-sm">
|
||||
Update Reflection
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
</div></main>
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "projects/9343387512370733994/screens/3064045350829608185",
|
||||
"title": "Values Sort \u2014 Reflect on Top Values",
|
||||
"screenshot": {
|
||||
"name": "projects/9343387512370733994/files/3064045350829606144",
|
||||
"downloadUrl": "https://lh3.googleusercontent.com/aida/AEtjO1Uwhwbp12i_K453L9y11FLMvbRC4yDVlY0fdRpaqI4rBUKKwEFBEzO2fbvVyKER5fnk5X11ceImXKtx6h37TpNJIYr6CZNuNhJc1LNKbOGiV_CO3ee7AVc0nOez48-19Q7vf8_H6Q1DlfjZj3B3v2X23in3GCgyxo5rAa-NsMkS9_G4oCvnWSIioTblp-viQRuJhyq3jIlEldpfZPkU5FQh7hr6lH9RMVXv2Pdy_sviQJK_4R2KOQJxAUc"
|
||||
},
|
||||
"htmlCode": {
|
||||
"name": "projects/9343387512370733994/files/3064045350829608199",
|
||||
"downloadUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyOWJmZTJmY2UwOTY4YTAzNjNmMGQ1ODhmEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"mimeType": "text/html"
|
||||
},
|
||||
"width": "780",
|
||||
"height": "3384",
|
||||
"deviceType": "MOBILE"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,391 @@
|
||||
<!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 px-margin-mobile sm:px-margin space-y-space-lg pb-12">
|
||||
<!-- Eyebrow & Stage Header -->
|
||||
<header class="flex flex-col space-y-space-xs text-left pt-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label-sm text-label-sm text-secondary tracking-widest uppercase bg-surface-container-high px-3 py-1 rounded-full">
|
||||
Step 5 of 5 · Deep Reflection
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px] text-tertiary">spa</span>
|
||||
Unrushed Practice
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="font-headline-xl-mobile sm:font-headline-xl text-headline-xl-mobile sm:text-headline-xl text-on-surface mt-1">Your Core Values</h1>
|
||||
</header>
|
||||
<!-- Value Selector Carousel -->
|
||||
<section class="flex flex-col space-y-2">
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Top 5 Core Anchors</span>
|
||||
<span class="font-label-sm text-label-sm text-tertiary font-semibold" id="carousel-status">3 of 4 answered</span>
|
||||
</div>
|
||||
<div class="flex gap-2 overflow-x-auto pb-2 scrollbar-none snap-x" id="value-tabs">
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md shadow-sm transition-all">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary-fixed"></span>
|
||||
#1 Authenticity
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-primary-container text-on-primary-container">3/4</span>
|
||||
</button>
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-tertiary"></span>
|
||||
#2 Courage
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">4/4</span>
|
||||
</button>
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
#3 Compassion
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">2/4</span>
|
||||
</button>
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
#4 Freedom
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">2/4</span>
|
||||
</button>
|
||||
<button class="snap-start flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-container-highest font-label-md text-label-md transition-colors">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
#5 Curiosity
|
||||
<span class="font-label-sm text-label-sm px-1.5 py-0.5 rounded-full bg-surface-container text-on-surface-variant">3/4</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Core Value Spotlight Card -->
|
||||
<section class="bg-surface-container-low rounded-lg p-space-lg shadow-sm flex flex-col gap-4 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex flex-col">
|
||||
<h2 class="font-headline-lg-mobile sm:font-headline-lg text-headline-lg-mobile sm:text-headline-lg text-on-surface mt-0.5">
|
||||
Authenticity
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant italic">
|
||||
"Living in genuine alignment with inner truth and speaking without pretense or performance."
|
||||
</p>
|
||||
</section>
|
||||
<!-- Reflection Questions List (Accordions) -->
|
||||
<section class="flex flex-col space-y-3" id="questions-container">
|
||||
<!-- Question 1: Answered & Collapsible -->
|
||||
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden cursor-pointer hover:bg-surface-container" id="card-q1">
|
||||
<div class="w-full text-left p-space-lg flex items-center justify-between gap-3" onclick="openDrawer('q1')">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<span class="w-6 h-6 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[15px] font-bold">check</span>
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-sm text-label-sm text-tertiary font-semibold uppercase tracking-wider">Answered</span>
|
||||
<span class="font-label-sm text-label-sm text-outline">· Prompt 1</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate sm:whitespace-normal">
|
||||
What does this value mean to you?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline">open_in_full</span>
|
||||
</div>
|
||||
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 flex" id="content-q1">
|
||||
<div class="bg-surface-container p-space-md rounded-DEFAULT">
|
||||
<p class="font-body-md text-body-md text-on-surface leading-relaxed" id="text-q1">
|
||||
To me, authenticity is the quiet permission to stop curating who I am for other people's approval. It means letting my outward actions and words match what is truly happening inside, even when that makes me feel vulnerable or imperfect.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors" onclick="event.stopPropagation(); openDrawer('q1')">
|
||||
<span class="material-symbols-outlined text-[14px]">edit</span>
|
||||
Open Reflection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Question 2: Answered & Collapsed default -->
|
||||
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden cursor-pointer hover:bg-surface-container" id="card-q2">
|
||||
<div class="w-full text-left p-space-lg flex items-center justify-between gap-3" onclick="openDrawer('q2')">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<span class="w-6 h-6 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[15px] font-bold">check</span>
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-sm text-label-sm text-tertiary font-semibold uppercase tracking-wider">Answered</span>
|
||||
<span class="font-label-sm text-label-sm text-outline">· Prompt 2</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface truncate sm:whitespace-normal">
|
||||
Why did you choose this as important?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline">open_in_full</span>
|
||||
</div>
|
||||
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 hidden" id="content-q2">
|
||||
<div class="bg-surface-container p-space-md rounded-DEFAULT">
|
||||
<p class="font-body-md text-body-md text-on-surface leading-relaxed" id="text-q2">
|
||||
Whenever I have betrayed my own intuition to keep the peace or satisfy someone else, an inner resentment always took root. Choosing authenticity has been my most reliable antidote to regret and burnout.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors" onclick="event.stopPropagation(); openDrawer('q2')">
|
||||
<span class="material-symbols-outlined text-[14px]">edit</span>
|
||||
Open Reflection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Question 3: Active / In Progress Card -->
|
||||
<article class="bg-surface-container-low rounded-lg shadow-md transition-all overflow-hidden border border-outline-variant/50 cursor-pointer hover:bg-surface-container" id="card-q3" onclick="openDrawer('q3')">
|
||||
<div class="w-full text-left p-space-lg flex items-center justify-between gap-3">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<span class="w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed-variant shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[15px]">edit_note</span>
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-sm text-label-sm text-secondary font-semibold uppercase tracking-wider">In Progress</span>
|
||||
<span class="font-label-sm text-label-sm text-outline">· Prompt 3</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">
|
||||
How have you shown this value in your daily life?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-secondary">open_in_full</span>
|
||||
</div>
|
||||
<div class="px-space-lg pb-space-lg pt-0 flex flex-col gap-3" id="content-q3">
|
||||
<div class="p-space-md bg-surface rounded-DEFAULT border border-outline-variant/30">
|
||||
<p class="text-on-surface font-body-md text-body-md line-clamp-2 italic text-on-surface-variant" id="text-q3">"Recently, during a project retrospective, I spoke honestly about feeling overwhelmed instead of nodding along like everything was fine..."</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<span class="font-label-sm text-label-sm text-secondary flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px]">mode_edit</span> Tap to expand & journal
|
||||
</span>
|
||||
<button class="px-4 py-1.5 rounded-full bg-primary text-on-primary font-label-sm text-label-sm hover:bg-primary-container transition-all shadow-sm flex items-center gap-1">
|
||||
Continue writing
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Question 4: Unanswered / Inviting Call to Reflect -->
|
||||
<article class="bg-surface-container-low rounded-lg shadow-sm transition-all overflow-hidden border border-dashed border-outline-variant cursor-pointer hover:bg-surface-container" id="card-q4" onclick="openDrawer('q4')">
|
||||
<div class="w-full text-left p-space-lg flex items-center justify-between gap-3">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<span class="w-6 h-6 rounded-full bg-surface-container-highest flex items-center justify-center text-outline shrink-0 mt-0.5">
|
||||
<span class="material-symbols-outlined text-[16px]">add</span>
|
||||
</span>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-sm text-label-sm text-outline font-semibold uppercase tracking-wider">Unanswered</span>
|
||||
<span class="font-label-sm text-label-sm text-outline">· Prompt 4</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">
|
||||
In what ways could you be even more true to it?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline">edit_square</span>
|
||||
</div>
|
||||
<div class="px-space-lg pb-space-lg pt-0 flex-col gap-3 flex" id="content-q4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Notice where you still mask, hold back, or seek quiet convenience over your core alignment.</p>
|
||||
<div class="flex items-center justify-end gap-2 pt-1">
|
||||
<button class="px-5 py-2 rounded-full bg-surface-container-highest text-on-surface font-label-md text-label-md hover:bg-surface-container-high transition-all flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">edit</span>
|
||||
Start Prompt 4
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<!-- Mindful Life Compass Quick-peek Card -->
|
||||
<section class="bg-surface-container p-space-md rounded-lg flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-tertiary-container text-on-tertiary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[20px]">explore</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-md text-label-md text-on-surface font-semibold">Your Life Compass is Taking Shape</span>
|
||||
<span class="font-body-sm text-body-sm text-on-surface-variant">14 of 20 total reflections recorded</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="px-3 py-1.5 rounded-full bg-surface-container-high text-on-surface font-label-sm text-label-sm hover:bg-surface-container-highest transition-colors shrink-0">
|
||||
Preview
|
||||
</button>
|
||||
</section>
|
||||
<!-- Bottom Navigation / Floating Action Bar -->
|
||||
<nav class="sticky bottom-2 z-10 bg-surface-container-lowest/90 backdrop-blur-md p-space-md rounded-lg shadow-xl flex flex-col gap-3">
|
||||
<!-- Navigation Buttons -->
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex-1 py-3 px-4 rounded-full bg-surface-container-high text-on-surface font-label-lg text-label-lg hover:bg-surface-container-highest transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_back</span>
|
||||
Previous
|
||||
</button>
|
||||
<button class="flex-[2] py-3 px-5 rounded-full bg-primary text-on-primary font-label-lg text-label-lg hover:bg-primary-container transition-all shadow-md flex items-center justify-center gap-2">
|
||||
<span class="">Next: #2 Courage</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- FULL-SCREEN REFLECTION DRAWER / MODAL (Occupies whole viewport: z-50 inset-0) -->
|
||||
<div class="fixed inset-0 z-50 flex flex-col bg-surface text-on-surface overflow-hidden transition-all duration-300" id="reflection-drawer">
|
||||
<!-- Top Navigation & Action Bar -->
|
||||
<header class="w-full bg-surface/95 backdrop-blur-md border-b border-outline-variant/40 px-margin-mobile sm:px-margin pt-safe">
|
||||
<div class="h-16 flex items-center justify-between">
|
||||
<button class="inline-flex items-center gap-1 px-3 py-2 -ml-2 rounded-full text-on-surface-variant hover:bg-surface-container-high transition-colors font-label-md text-label-md" onclick="closeDrawer()">
|
||||
<span class="material-symbols-outlined text-[22px]">close</span>
|
||||
<span class="">Close</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-1.5 text-center">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
<span class="font-label-sm text-label-sm text-secondary font-semibold uppercase tracking-wider" id="drawer-step-badge">Prompt 3 of 4</span>
|
||||
</div>
|
||||
<button class="px-4 py-2 rounded-full bg-primary text-on-primary font-label-md text-label-md hover:bg-primary-container transition-all shadow-sm flex items-center gap-1" onclick="saveAndCloseDrawer()">
|
||||
<span class="material-symbols-outlined text-[16px]">check</span>
|
||||
<span class="">Done</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Spacious Distraction-Free Reflection Writing Area -->
|
||||
<div class="flex-1 flex flex-col overflow-y-auto px-margin-mobile sm:px-margin py-space-lg space-y- space-y-4">
|
||||
<!-- Pinned Question Header in Elegant Serif Typography -->
|
||||
<div class="flex flex-col space-y-2 border-b border-outline-variant/30 pb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-label-sm text-label-sm text-secondary bg-surface-container-high px-2.5 py-0.5 rounded-full font-medium" id="drawer-value-tag">
|
||||
Reflecting on #1 Authenticity
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<h2 class="font-headline-xl-mobile sm:font-headline-xl text-headline-xl-mobile sm:text-headline-xl text-on-surface leading-tight font-normal" id="drawer-question-title">
|
||||
How have you shown this value in your daily life?
|
||||
</h2>
|
||||
<!-- Guiding Thought / Prompt Hint -->
|
||||
|
||||
</div>
|
||||
<!-- Spacious Writing Textarea Field -->
|
||||
<div class="flex-1 flex flex-col min-h-[280px]">
|
||||
<textarea class="w-full flex-1 p-space-lg bg-surface-container-lowest/80 rounded-lg text-on-surface font-body-lg text-body-lg focus:outline-none focus:ring-1 focus:ring-primary-container shadow-inner resize-none transition-all leading-relaxed placeholder:text-outline/60 border border-outline-variant/30" id="drawer-textarea" oninput="handleDrawerInput(this)" placeholder="There are no wrong answers here. Write freely without curating or judging your thoughts...">Recently, during a project retrospective, I spoke honestly about feeling overwhelmed instead of nodding along like everything was fine. It opened the door for my colleagues to share their true workload too.</textarea>
|
||||
<div class="flex items-center justify-between px-2 pt-2 text-on-surface-variant">
|
||||
<span class="font-label-sm text-label-sm" id="drawer-word-counter">
|
||||
33 words · 214 characters
|
||||
</span>
|
||||
<span class="font-label-sm text-label-sm text-outline flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">spa</span> Mindful focus mode
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Drawer Floating Action Bar -->
|
||||
<footer class="w-full bg-surface-container-lowest/95 backdrop-blur-md border-t border-outline-variant/40 px-margin-mobile sm:px-margin py-3 pb-safe">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<button class="flex-1 py-3 px-4 rounded-full bg-surface-container-high text-on-surface font-label-md text-label-md hover:bg-surface-container-highest transition-colors flex items-center justify-center gap-1.5" onclick="closeDrawer()">
|
||||
<span class="material-symbols-outlined text-[18px]">close</span>
|
||||
<span class="">Cancel</span>
|
||||
</button>
|
||||
<button class="flex-[2] py-3 px-5 rounded-full bg-primary text-on-primary font-label-md text-label-md hover:bg-primary-container transition-all shadow-md flex items-center justify-center gap-2" onclick="saveAndContinue()">
|
||||
<span class="">Save & Continue</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Interactive Client-side micro-interactions -->
|
||||
<script>
|
||||
const questionData = {
|
||||
q1: {
|
||||
number: "Prompt 1 of 4",
|
||||
question: "What does this value mean to you?",
|
||||
hint: "Define authenticity in your own rhythm and voice. What sensation or truth does it evoke when you are undisturbed?",
|
||||
text: "To me, authenticity is the quiet permission to stop curating who I am for other people's approval. It means letting my outward actions and words match what is truly happening inside, even when that makes me feel vulnerable or imperfect."
|
||||
},
|
||||
q2: {
|
||||
number: "Prompt 2 of 4",
|
||||
question: "Why did you choose this as important?",
|
||||
hint: "Reflect on past moments where keeping quiet or playing a role cost you peace of mind.",
|
||||
text: "Whenever I have betrayed my own intuition to keep the peace or satisfy someone else, an inner resentment always took root. Choosing authenticity has been my most reliable antidote to regret and burnout."
|
||||
},
|
||||
q3: {
|
||||
number: "Prompt 3 of 4",
|
||||
question: "How have you shown this value in your daily life?",
|
||||
hint: "Reflect gently on recent moments where you stayed aligned with your truth, even when convenience or approval tempted you otherwise.",
|
||||
text: "Recently, during a project retrospective, I spoke honestly about feeling overwhelmed instead of nodding along like everything was fine. It opened the door for my colleagues to share their true workload too."
|
||||
},
|
||||
q4: {
|
||||
number: "Prompt 4 of 4",
|
||||
question: "In what ways could you be even more true to it?",
|
||||
hint: "Notice the specific relationships, environments, or habits where you still find yourself putting on a mask.",
|
||||
text: ""
|
||||
}
|
||||
};
|
||||
|
||||
let currentPromptId = 'q3';
|
||||
|
||||
function openDrawer(id) {
|
||||
currentPromptId = id;
|
||||
const data = questionData[id] || questionData.q3;
|
||||
|
||||
document.getElementById('drawer-step-badge').textContent = data.number;
|
||||
document.getElementById('drawer-question-title').textContent = data.question;
|
||||
document.getElementById('drawer-guiding-hint').textContent = `"${data.hint}"`;
|
||||
|
||||
const textarea = document.getElementById('drawer-textarea');
|
||||
textarea.value = data.text;
|
||||
handleDrawerInput(textarea);
|
||||
|
||||
const drawer = document.getElementById('reflection-drawer');
|
||||
drawer.classList.remove('hidden');
|
||||
drawer.classList.add('flex');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
const drawer = document.getElementById('reflection-drawer');
|
||||
drawer.classList.add('hidden');
|
||||
drawer.classList.remove('flex');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function handleDrawerInput(textarea) {
|
||||
const text = textarea.value.trim();
|
||||
const words = text ? text.split(/\s+/).filter(Boolean).length : 0;
|
||||
const chars = textarea.value.length;
|
||||
|
||||
const counter = document.getElementById('drawer-word-counter');
|
||||
if (counter) {
|
||||
counter.textContent = `${words} words · ${chars} characters`;
|
||||
}
|
||||
|
||||
const indicator = document.getElementById('drawer-save-indicator');
|
||||
if (indicator) {
|
||||
indicator.innerHTML = '<span class="material-symbols-outlined text-[13px] text-secondary">sync</span> Saving draft...';
|
||||
clearTimeout(window.saveTimer);
|
||||
window.saveTimer = setTimeout(() => {
|
||||
indicator.innerHTML = '<span class="material-symbols-outlined text-[13px] text-tertiary">cloud_done</span> Autosaved';
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
|
||||
function saveAndCloseDrawer() {
|
||||
const textarea = document.getElementById('drawer-textarea');
|
||||
if (questionData[currentPromptId]) {
|
||||
questionData[currentPromptId].text = textarea.value;
|
||||
const cardText = document.getElementById('text-' + currentPromptId);
|
||||
if (cardText) {
|
||||
cardText.textContent = textarea.value;
|
||||
}
|
||||
}
|
||||
closeDrawer();
|
||||
}
|
||||
|
||||
function saveAndContinue() {
|
||||
const textarea = document.getElementById('drawer-textarea');
|
||||
if (questionData[currentPromptId]) {
|
||||
questionData[currentPromptId].text = textarea.value;
|
||||
const cardText = document.getElementById('text-' + currentPromptId);
|
||||
if (cardText) {
|
||||
cardText.textContent = textarea.value;
|
||||
}
|
||||
}
|
||||
|
||||
const keys = ['q1', 'q2', 'q3', 'q4'];
|
||||
const nextIdx = (keys.indexOf(currentPromptId) + 1) % keys.length;
|
||||
openDrawer(keys[nextIdx]);
|
||||
}
|
||||
</script>
|
||||
</div></main>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "projects/9343387512370733994/screens/7bb00b6022b14dd9a687b9a31ec6b1f5",
|
||||
"title": "Values Sort \u2014 Reflection (Full-Screen Journal Drawer)",
|
||||
"screenshot": {
|
||||
"name": "projects/9343387512370733994/files/15389870381633265971",
|
||||
"downloadUrl": "https://lh3.googleusercontent.com/aida/AEtjO1UAeYCnBIII639-PoE0tFfV3LHW2yIsQ2XGm0L6YPETkrpzkMplK_QGvg-8F8PSLt_oJCS-3Uajl851y6H1IkywclVOp_OG34ANFKKEmKIyGFxXYg-XXlWWlanu_22zhpb_lhiO4auBOIFSxwwFc2NbU3b6qlsAIlBGONtInErxesAiJILt6j1yKKM1OkGJIrh4sWabbDoAfBNaJlu_hDywInGjs4j-d6SZOEvzgunjmwSjLStHmjuQoVk"
|
||||
},
|
||||
"htmlCode": {
|
||||
"name": "projects/9343387512370733994/files/2406486854586640137",
|
||||
"downloadUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyYWE0ZDI3M2IwMjNiZWU1MjMxMjVjMzFhEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"mimeType": "text/html"
|
||||
},
|
||||
"width": "780",
|
||||
"height": "3596",
|
||||
"deviceType": "MOBILE"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
@@ -0,0 +1,223 @@
|
||||
<!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 px-margin-mobile pb-space-lg select-none">
|
||||
<!-- Top Subtle Brand Navigation -->
|
||||
<header class="flex items-center justify-between w-full pt-space-xs pb-space-md">
|
||||
<div class="flex items-center gap-space-sm">
|
||||
<img alt="Values Sort Emblem" class="w-8 h-8 rounded-full shadow-sm object-cover" src="https://lh3.googleusercontent.com/aida/AEtjO1VxhUd_UEQbNaJg7xz-AiOrtZWLiZw7oiFfgI1iGc4Ag2ZSYEnTYF5NR-_fX5fUGLeepg5mkonGjOR6YHa8M8yyNFuATrjW9mPC6x2-vKmbEJcHjBBLGkpOS7K6xhYyywXBgsdSreZcpJKeqZnLlO4wl5TMdHrEjkAUmiOLwouqlqtRx9PwJhZ26tf1an8bI8c8QO6wdhCvMD1L757xSkIFnXkAyvRbwt-YkTQcykj8FJaDytqPf0zYxA">
|
||||
<span class="font-label-sm text-label-sm tracking-widest uppercase text-on-surface-variant">VALUES SORT</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Central Tactile Cards Composition -->
|
||||
<section class="relative w-full py-space-sm flex items-center justify-center overflow-hidden my-space-xs">
|
||||
<!-- Ambient organic gradient glow -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-primary/5 via-tertiary/5 to-transparent rounded-lg blur-2xl pointer-events-none"></div>
|
||||
<div class="relative w-full max-w-[320px] h-[210px] flex items-center justify-center">
|
||||
<!-- Background Card 1 (Left Tilt: Curiosity) -->
|
||||
<div class="absolute w-[180px] h-[135px] rounded-lg p-space-md bg-surface-container shadow-sm -rotate-12 -translate-x-12 translate-y-3 transition-transform duration-500 ease-out hover:-rotate-14 hover:-translate-y-1">
|
||||
<span class="font-label-sm text-label-sm text-outline uppercase tracking-wider block mb-1">Inquiry</span>
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface mb-1 leading-none">Curiosity</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant text-[11px] leading-tight line-clamp-2">Seeking wonder, exploring questions without immediate answers.</p>
|
||||
</div>
|
||||
<!-- Background Card 2 (Right Tilt: Connection) -->
|
||||
<div class="absolute w-[180px] h-[135px] rounded-lg p-space-md bg-surface-container shadow-sm rotate-12 translate-x-12 translate-y-2 transition-transform duration-500 ease-out hover:rotate-14 hover:-translate-y-1">
|
||||
<span class="font-label-sm text-label-sm text-outline uppercase tracking-wider block mb-1">Belonging</span>
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface mb-1 leading-none">Connection</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant text-[11px] leading-tight line-clamp-2">Nurturing deep kinship and seeing others as they truly are.</p>
|
||||
</div>
|
||||
<!-- Foreground Card 3 (Elevated Hero Card: Authenticity) -->
|
||||
<div class="relative z-10 w-[210px] h-[155px] rounded-lg p-space-md bg-surface-container-lowest shadow-md rotate-1 translate-y-1 transition-transform duration-500 hover:rotate-0 hover:scale-105 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-sm text-label-sm text-secondary tracking-widest uppercase">Core Ground</span>
|
||||
<span class="material-symbols-outlined text-[16px] text-primary" style="font-variation-settings: "FILL" 1;">spa</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface mb-1">Authenticity</h3>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant leading-snug">Living in honest alignment with who you are, without performance.</p>
|
||||
<div class="mt-3 flex items-center gap-1.5">
|
||||
<span class="h-1 w-6 rounded-full bg-secondary"></span>
|
||||
<span class="h-1 w-1.5 rounded-full bg-surface-container-highest"></span>
|
||||
<span class="h-1 w-1.5 rounded-full bg-surface-container-highest"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Editorial Headline & Thoughtful Copy -->
|
||||
<section class="flex flex-col text-center px-1 mt-space-sm mb-space-md">
|
||||
<h1 class="font-headline-xl-mobile text-headline-xl-mobile text-on-surface tracking-tight mb-space-xs">
|
||||
Discover what matters most to you
|
||||
</h1>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed px-1">
|
||||
Through a gentle, guided card-sort practice, clarify your intrinsic values and illuminate the principles that guide your everyday decisions.
|
||||
</p>
|
||||
<!-- Introspective Trust & Rhythm Metadata -->
|
||||
<div class="flex items-center justify-center flex-wrap gap-x-2 gap-y-1 mt-space-md text-on-surface-variant font-label-md text-label-md">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px] text-tertiary">schedule</span>
|
||||
<span class="">10–15 min</span>
|
||||
</div>
|
||||
<span class="text-outline-variant">•</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px] text-tertiary">pace</span>
|
||||
<span class="">Self-paced</span>
|
||||
</div>
|
||||
<span class="text-outline-variant">•</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px] text-tertiary">lock</span>
|
||||
<span class="">Private & reflective</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Primary Actions / Grounded CTAs -->
|
||||
<footer class="mt-auto flex flex-col gap-space-xs pt-space-xs">
|
||||
<button class="w-full py-2.5 px-4 rounded-full bg-transparent text-on-surface-variant font-label-md text-label-md active:bg-surface-container transition-colors flex items-center justify-center gap-1.5" id="open-sheet-btn" type="button">
|
||||
<span class="">How this practice works</span>
|
||||
<span class="material-symbols-outlined text-[18px]">info</span>
|
||||
</button><button class="w-full py-3.5 px-6 rounded-full bg-primary text-on-primary font-label-lg text-label-lg shadow-sm active:scale-[0.985] active:bg-primary-container transition-all flex items-center justify-center gap-2" id="start-btn" style="opacity: 1;" type="button">
|
||||
<span class="">Begin Reflection</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
<!-- Anchored quiet psychological micro-copy -->
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Serene Bottom Sheet / Explanation Drawer Modal -->
|
||||
<div aria-labelledby="sheet-title" aria-modal="true" class="fixed inset-0 z-50 pointer-events-none flex flex-col justify-end transition-opacity duration-300 opacity-0" id="explanation-sheet-container" role="dialog">
|
||||
<!-- Backdrop -->
|
||||
<div class="absolute inset-0 bg-inverse-surface/40 backdrop-blur-[2px] transition-opacity duration-300 cursor-pointer opacity-0" id="sheet-backdrop"></div>
|
||||
<!-- Sheet Panel -->
|
||||
<div class="relative w-full max-w-lg mx-auto bg-surface rounded-t-[2rem] p-space-lg shadow-2xl transition-transform duration-300 ease-out transform translate-y-full flex flex-col max-h-[85vh] overflow-y-auto border-t border-outline-variant/30" id="sheet-panel">
|
||||
<!-- Drag Handle Indicator -->
|
||||
<div class="w-10 h-1 rounded-full bg-outline-variant/60 mx-auto mb-space-md shrink-0"></div>
|
||||
<!-- Sheet Header -->
|
||||
<div class="flex items-center justify-between pb-space-sm border-b border-outline-variant/20 mb-space-md">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[20px] text-tertiary" style="font-variation-settings: 'FILL' 1;">nature_people</span>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface" id="sheet-title">The Practice of Sorting</h3>
|
||||
</div>
|
||||
<button aria-label="Close details" class="w-8 h-8 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-container active:scale-95 transition-all" id="close-sheet-btn" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Explanation Steps -->
|
||||
<div class="flex flex-col gap-space-md">
|
||||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
|
||||
Grounded in contemplative psychology, this sorting practice helps clarify the core tenets that give your life meaning and direction.
|
||||
</p>
|
||||
<ol class="space-y-space-md my-space-xs">
|
||||
<!-- Step 1 -->
|
||||
<li class="flex items-start gap-space-sm">
|
||||
<div class="w-6 h-6 rounded-full bg-surface-container-high text-primary font-label-md text-label-md flex items-center justify-center shrink-0 mt-0.5 font-semibold">
|
||||
1
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h4 class="font-label-lg text-label-lg text-on-surface font-semibold">One card at a time</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mt-0.5">
|
||||
Review cards with diverse values one at a time, checking in with your intuition without overthinking.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Step 2 -->
|
||||
<li class="flex items-start gap-space-sm">
|
||||
<div class="w-6 h-6 rounded-full bg-surface-container-high text-secondary font-label-md text-label-md flex items-center justify-center shrink-0 mt-0.5 font-semibold">
|
||||
2
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h4 class="font-label-lg text-label-lg text-on-surface font-semibold">Sort into intuitive piles</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mt-0.5">
|
||||
Sort each into: <strong class="font-medium text-on-surface">‘Always Important’</strong>, <strong class="font-medium text-on-surface">‘Sometimes Important’</strong>, and <strong class="font-medium text-on-surface">‘Not as Important’</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Step 3 -->
|
||||
<li class="flex items-start gap-space-sm">
|
||||
<div class="w-6 h-6 rounded-full bg-surface-container-high text-tertiary font-label-md text-label-md flex items-center justify-center shrink-0 mt-0.5 font-semibold">
|
||||
3
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h4 class="font-label-lg text-label-lg text-on-surface font-semibold">Distill your top 5</h4>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mt-0.5">
|
||||
Narrow down to your core top 5 values to illuminate and guide your daily decisions with clarity.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="bg-surface-container-low rounded-lg p-space-sm px-space-md border border-outline-variant/30 flex items-center gap-space-sm mt-space-xs">
|
||||
<span class="material-symbols-outlined text-[18px] text-tertiary shrink-0">spa</span>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant italic">
|
||||
There are no right or wrong answers—only your authentic presence.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Action inside sheet -->
|
||||
<button class="mt-space-sm w-full py-3 px-6 rounded-full bg-primary text-on-primary font-label-lg text-label-lg shadow-sm active:bg-primary-container transition-all flex items-center justify-center gap-2" id="sheet-start-btn" type="button">
|
||||
<span>Got it, let's begin</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
const openBtn = document.getElementById('open-sheet-btn');
|
||||
const closeBtn = document.getElementById('close-sheet-btn');
|
||||
const sheetContainer = document.getElementById('explanation-sheet-container');
|
||||
const sheetBackdrop = document.getElementById('sheet-backdrop');
|
||||
const sheetPanel = document.getElementById('sheet-panel');
|
||||
const sheetStartBtn = document.getElementById('sheet-start-btn');
|
||||
const startBtn = document.getElementById('start-btn');
|
||||
|
||||
function openSheet() {
|
||||
sheetContainer.classList.remove('pointer-events-none');
|
||||
sheetContainer.classList.add('pointer-events-auto', 'opacity-100');
|
||||
sheetContainer.classList.remove('opacity-0');
|
||||
|
||||
sheetBackdrop.classList.remove('opacity-0');
|
||||
sheetBackdrop.classList.add('opacity-100');
|
||||
|
||||
sheetPanel.classList.remove('translate-y-full');
|
||||
sheetPanel.classList.add('translate-y-0');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeSheet() {
|
||||
sheetBackdrop.classList.remove('opacity-100');
|
||||
sheetBackdrop.classList.add('opacity-0');
|
||||
|
||||
sheetPanel.classList.remove('translate-y-0');
|
||||
sheetPanel.classList.add('translate-y-full');
|
||||
|
||||
setTimeout(() => {
|
||||
sheetContainer.classList.remove('pointer-events-auto', 'opacity-100');
|
||||
sheetContainer.classList.add('pointer-events-none', 'opacity-0');
|
||||
document.body.style.overflow = '';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
if (openBtn) openBtn.addEventListener('click', openSheet);
|
||||
if (closeBtn) closeBtn.addEventListener('click', closeSheet);
|
||||
if (sheetBackdrop) sheetBackdrop.addEventListener('click', closeSheet);
|
||||
|
||||
if (sheetStartBtn) {
|
||||
sheetStartBtn.addEventListener('click', () => {
|
||||
closeSheet();
|
||||
if (startBtn) {
|
||||
startBtn.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (startBtn) {
|
||||
startBtn.addEventListener('click', () => {
|
||||
startBtn.style.opacity = '0.85';
|
||||
setTimeout(() => {
|
||||
startBtn.style.opacity = '1';
|
||||
}, 150);
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard support (Escape to close)
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !sheetContainer.classList.contains('pointer-events-none')) {
|
||||
closeSheet();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script></main>
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "projects/9343387512370733994/screens/e3940f39a073450299cb3024914064c6",
|
||||
"title": "Values Sort \u2014 Welcome (with Guide Drawer)",
|
||||
"screenshot": {
|
||||
"name": "projects/9343387512370733994/files/13321085336226512739",
|
||||
"downloadUrl": "https://lh3.googleusercontent.com/aida/AEtjO1XxoE8CbYmmotxXpSsZdC3wUE-E_xSas8nAxp_8GIUsaVeT2TjBeYVAwZM64nKp2KiGgcv4OGIq2noOJzxbWuzc-L2mitY9iU_fmiwGqgff0u7RpyjXlC0eRZlhvcRybK_E_dFQ_b8Q3GBOP06crg0MlaWtIPMS9WT-WIwmui7yJkqcEDsjlJlU8reI8HinfJtzvxK1gfOfEWbLDV5gPc7T_ypo6WR-fM3lZ35FSrkH4NQoX2e-d1-DlO0"
|
||||
},
|
||||
"htmlCode": {
|
||||
"name": "projects/9343387512370733994/files/24632818105687442",
|
||||
"downloadUrl": "https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ7Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpaCiVodG1sXzAwMDY1YmIyNTQwYmQ5N2IwMjNiZTk5NjE2MDEzZDgzEgsSBxD_iY311x0YAZIBIwoKcHJvamVjdF9pZBIVQhM5MzQzMzg3NTEyMzcwNzMzOTk0&filename=&opi=89354086",
|
||||
"mimeType": "text/html"
|
||||
},
|
||||
"width": "780",
|
||||
"height": "1768",
|
||||
"deviceType": "MOBILE"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Reference in New Issue
Block a user