docs(fase-5): plan mobile UX rewrite ("Monolith Editorial")
- Add plan/fase-5-mobile-ux.md with 7-chunk breakdown:
5.0 mobile tests (Playwright mobile-shell/masthead/swipe-delete + Vitest helpers)
5.1 responsive shell (MobileTopBar + BottomTabBar + MobileDrawer)
5.2 ScreenMasthead + px-4/md:px-6 pass
5.3 /lists mobile cards
5.4 /lists/[id] rows + red-zone swipe-delete
5.5 undoQueue store + UndoToast
5.6 scrollable frequency chips
5.7 tasks/notes/search shell + masthead
5.Z verify 211 + new M-series green
- Explicit gap analysis vs. current app + deliberate exclusions
(no priority badges, no voice search, no fake meta like "Dairy · Weekly")
- Index design/ directory: Stitch mockups per screen (mobile + desktop variants),
plus the "Monolith Editorial" DESIGN.md directing tonal shifts, masthead
typography, glassmorphism, and the no-line rule
- Relocate DESIGN.md under design/slate_collective/DESIGN.md (old entry point) —
the current design direction lives at design/DESIGN.md
- Reference design/ from CLAUDE.md + add Fase 5 to README phase index
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -8,11 +8,12 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
|
||||
|
||||
## Project Status
|
||||
|
||||
**Fase 0 complete. Fase 1 complete. Fase 2a complete. Fase 2b complete (Realtime + offline queue + Modo Compra). Fase 3 complete (Tareas + Notas). Fase 4 partially complete (global search + RLS audit). 211 tests green: 34 pgTAP + 140 Vitest integration + 6 Vitest unit + 31 Playwright. 2 skipped (Realtime presence — upstream bug in `supabase/realtime` `handle_out/3`, reactivate when fixed). PWA install/push/rate-limit/JWT rotation deferred to a prod-deploy sprint. ✅**
|
||||
**Fase 0 complete. Fase 1 complete. Fase 2a complete. Fase 2b complete (Realtime + offline queue + Modo Compra). Fase 3 complete (Tareas + Notas). Fase 4 partially complete (global search + RLS audit). Fase 5 planned (mobile UX rewrite — "Monolith Editorial"; see `plan/fase-5-mobile-ux.md`). 211 tests green: 34 pgTAP + 140 Vitest integration + 6 Vitest unit + 31 Playwright. 2 skipped (Realtime presence — upstream bug in `supabase/realtime` `handle_out/3`, reactivate when fixed). PWA install/push/rate-limit/JWT rotation deferred to a prod-deploy sprint. ✅**
|
||||
|
||||
- `README.md` — full development plan, confirmed tech stack, Justfile reference, and technical warnings
|
||||
- `analysis/analisis-funcional.md` — complete functional specification (domain model, use cases, data models, business rules)
|
||||
- `plan/fase-*.md` — phase-by-phase implementation plans (Fase 0 through Fase 4)
|
||||
- `plan/fase-*.md` — phase-by-phase implementation plans (Fase 0 through Fase 5)
|
||||
- `design/DESIGN.md` + `design/*/screen.png` — "Monolith Editorial" direction + per-screen Stitch mockups (desktop + mobile variants). Consult before changing UI.
|
||||
|
||||
### Fase 1 — what has been built
|
||||
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
| Fase 2b — Realtime y Modo Compra | ✅ Completa (presence bloqueado por bug upstream de `supabase/realtime`) |
|
||||
| Fase 3 — Tareas y Notas | ✅ Completa |
|
||||
| Fase 4 — Búsqueda y Pulido | 🟡 Búsqueda + RLS audit completos; PWA install/push/rate-limit/JWT rotation diferidos a sprint de deploy |
|
||||
| Fase 5 — Rediseño UX Mobile | ⏳ Plan propuesto ("Monolith Editorial") — pendiente de implementación |
|
||||
| Suite de tests (pgTAP + Vitest + Playwright) | ✅ 211 tests verdes (34 pgTAP + 140 integración + 6 unit + 31 E2E), ejecutables con `just test-all` |
|
||||
|
||||
---
|
||||
@@ -39,8 +40,11 @@ Las fases ya cerradas (0, 1, 2a) reflejan este patrón retroactivamente: la secc
|
||||
| Fase 2b | [fase-2b-realtime-modo-compra.md](plan/fase-2b-realtime-modo-compra.md) | 2–3 semanas |
|
||||
| Fase 3 | [fase-3-tareas-notas.md](plan/fase-3-tareas-notas.md) | 1–2 semanas |
|
||||
| Fase 4 | [fase-4-busqueda-pulido.md](plan/fase-4-busqueda-pulido.md) | 1 semana |
|
||||
| Fase 5 | [fase-5-mobile-ux.md](plan/fase-5-mobile-ux.md) | 1–2 semanas |
|
||||
|
||||
**Total estimado: 9–13 semanas**
|
||||
**Total estimado: 10–15 semanas (con Fase 5 mobile)**
|
||||
|
||||
Los mockups de referencia viven en [`design/`](design/) (organizados por pantalla — ver `design/DESIGN.md` para la dirección "Monolith Editorial").
|
||||
|
||||
---
|
||||
|
||||
|
||||
191
design/DESIGN.md
Normal file
191
design/DESIGN.md
Normal file
@@ -0,0 +1,191 @@
|
||||
# Design System Specification
|
||||
|
||||
|
||||
|
||||
## 1. Overview & Creative North Star: "The Monolith Editorial"
|
||||
|
||||
The creative direction for this design system is **The Monolith Editorial**. We are moving away from the "busy" aesthetics of modern SaaS and toward a disciplined, high-end editorial experience. The goal is to create a sense of permanent, quiet authority. By stripping away all accent colors and relying on a monochromatic slate palette, we force the user to focus on content, structure, and intent.
|
||||
|
||||
|
||||
|
||||
The "Template" look is avoided through **Intentional Negative Space** and **Tonal Depth**. We do not use lines to separate ideas; we use the weight of the typography and the shift of the background. It is a system that feels carved rather than assembled.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 2. Colors & Tonal Architecture
|
||||
|
||||
The palette is strictly monochromatic, utilizing a "Slate" foundation to provide a cooling, sophisticated atmosphere.
|
||||
|
||||
|
||||
|
||||
### Core Palette
|
||||
|
||||
- **Background**: `#f7f9fb` (Light) / `#020617` (Dark)
|
||||
|
||||
- **Primary (Action)**: `#000000` (Light) / `#ffffff` (Dark) — *Note: Primary actions invert the surface.*
|
||||
|
||||
- **Destructive**: `#ba1a1a` (The only color allowed to break the monochrome seal).
|
||||
|
||||
|
||||
|
||||
### The "No-Line" Rule
|
||||
|
||||
**Explicit Instruction:** Designers are prohibited from using 1px solid borders to section off major UI areas. To define boundaries, you must use background shifts.
|
||||
|
||||
- Use `surface-container-low` for secondary content areas.
|
||||
|
||||
- Use `surface-container-highest` for high-priority nested components.
|
||||
|
||||
- Sectioning is achieved via a 32px–48px vertical gap or a subtle change in the background hex, never a line.
|
||||
|
||||
|
||||
|
||||
### Surface Hierarchy & Nesting
|
||||
|
||||
Treat the UI as stacked sheets of gallery-grade paper.
|
||||
|
||||
1. **Base Layer:** `surface` (The foundation).
|
||||
|
||||
2. **Raised Layer:** `surface-container-low` (For subtle grouping).
|
||||
|
||||
3. **Focus Layer:** `surface-container-lowest` (For cards and interactive modules to "pop" via tonal contrast).
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 3. Typography: The Inter Hierarchy
|
||||
|
||||
We use **Inter** exclusively. To achieve an editorial feel, we rely on extreme contrast between `headline-lg` and `label-sm`.
|
||||
|
||||
|
||||
|
||||
| Level | Size | Weight | Case | Spacing |
|
||||
|
||||
| :--- | :--- | :--- | :--- | :--- |
|
||||
|
||||
| **Display-LG** | 3.5rem | 600 | Default | -0.02em |
|
||||
|
||||
| **Title-LG** | 20px | 600 | Default | -0.01em |
|
||||
|
||||
| **Header (Label-MD)** | 13px | 600 | Uppercase | +0.05em |
|
||||
|
||||
| **Body-LG** | 16px | 400 | Default | Normal |
|
||||
|
||||
| **Meta (Label-SM)** | 13px | 400 | Default | Normal |
|
||||
|
||||
|
||||
|
||||
**Editorial Note:** Always pair an Uppercase Label-MD header directly above a Title-LG to create a "Masthead" effect for sections.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
|
||||
Traditional drop shadows are largely forbidden. Hierarchy must be achieved through **Tonal Layering**.
|
||||
|
||||
|
||||
|
||||
- **The Layering Principle:** Instead of a shadow, place a `surface-container-lowest` card on a `surface-container-low` background. The slight shift in slate value creates a "natural" lift.
|
||||
|
||||
- **Ambient Shadows:** For floating elements like Sheets or Dialogs, use a "Ghost Shadow": `0px 20px 40px rgba(15, 23, 42, 0.06)`. It should feel like a soft glow, not a dark stain.
|
||||
|
||||
- **Glassmorphism:** For the "Sticky Bottom Input," use a backdrop-blur of `12px` and a semi-transparent `surface` color (80% opacity). This ensures the content "flows" under the interface, maintaining a sense of depth.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 5. Components
|
||||
|
||||
All components follow a 4px base grid and a `rounded-md` (0.375rem) corner radius.
|
||||
|
||||
|
||||
|
||||
### Buttons (Inversion Logic)
|
||||
|
||||
- **Primary:** `bg-slate-900 text-slate-50` (Light Mode). This "Inversion" is the signature interactive state.
|
||||
|
||||
- **Destructive:** `bg-red-500 text-white`. Reserved only for irreversible actions.
|
||||
|
||||
- **Ghost:** No background, `text-slate-500`. On hover, shift to `surface-raised`.
|
||||
|
||||
|
||||
|
||||
### Input Fields & Sticky Input
|
||||
|
||||
- **The Monolith Input:** A sticky bottom container with `backdrop-blur`. No border; only a subtle `surface-raised` background.
|
||||
|
||||
- **Chips:** `rounded-full`, `bg-slate-200`. When active, they invert to `bg-slate-900 text-white`.
|
||||
|
||||
|
||||
|
||||
### Lists & Swipe Actions
|
||||
|
||||
- **Forbid Dividers:** Do not use lines between list items. Use 12px of vertical padding (`py-3`) to create separation through whitespace.
|
||||
|
||||
- **Swipe-to-Delete:** The "Red Zone" emerges from behind the item. As the user swipes, the background transitions into `red-500` with a white Lucide `trash-2` icon.
|
||||
|
||||
|
||||
|
||||
### Shopping Mode Components
|
||||
|
||||
- **Large Tap Targets:** Increase minimum hit area to 56px.
|
||||
|
||||
- **Presence Avatars:** 24px circles with a 2px `surface` border, overlapped horizontally to show collaboration.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
|
||||
|
||||
### Do
|
||||
|
||||
- **Do** use uppercase labels with letter-spacing for all category headers.
|
||||
|
||||
- **Do** use `slate-500` for meta-text to create a visual "recession" of less important data.
|
||||
|
||||
- **Do** maximize the use of the `2xl` max-width container on desktop to ensure the "Editorial" line lengths remain readable.
|
||||
|
||||
- **Do** use Lucide icons at 1.5 stroke width to match the weight of Inter's medium-weight characters.
|
||||
|
||||
|
||||
|
||||
### Don't
|
||||
|
||||
- **Don't** use a 1px border to separate the sidebar from the main content. Use a background color shift.
|
||||
|
||||
- **Don't** use any colors outside of the Slate and Red-500 palette. No "Success Green" or "Warning Orange." Use icons and text to convey state.
|
||||
|
||||
- **Don't** use standard "drop shadows" on cards. If it doesn't pop via tonal shift, the layout needs more whitespace, not more shadow.
|
||||
|
||||
- **Don't** use "Slate-900" for body text. Use "Slate-900" only for titles; use "Slate-800" or "Slate-700" for long-form reading to reduce eye strain.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 7. Layout Philosophy
|
||||
|
||||
- **Desktop (lg+):** The left sidebar is a fixed Monolith. It stays `surface-raised` while the main content area remains `surface`.
|
||||
|
||||
- **Mobile:** The bottom tab bar utilizes Glassmorphism. Navigation icons should be `slate-400`, switching to `slate-900` when active. No text labels on mobile tabs; the icons must be clear enough to stand alone.
|
||||
239
design/colectivo_design_reference.html
Normal file
239
design/colectivo_design_reference.html
Normal file
@@ -0,0 +1,239 @@
|
||||
# DESIGN.md
|
||||
|
||||
Design reference for the Colectivo app. Stack: SvelteKit + shadcn-svelte + Tailwind CSS.
|
||||
|
||||
---
|
||||
|
||||
## Visual Style
|
||||
|
||||
### Direction
|
||||
|
||||
Clean and minimal. Content is the UI — no decorative elements, no gradients, no shadows unless they carry meaning. Generous whitespace. Every element earns its place.
|
||||
|
||||
### Color
|
||||
|
||||
Monochromatic slate palette. No accent color — contrast and weight carry hierarchy.
|
||||
|
||||
```
|
||||
--background: slate-50 / slate-950
|
||||
--surface: white / slate-900
|
||||
--surface-raised: slate-100 / slate-800
|
||||
--border: slate-200 / slate-700
|
||||
--text-primary: slate-900 / slate-50
|
||||
--text-secondary: slate-500 / slate-400
|
||||
--text-disabled: slate-300 / slate-600
|
||||
--destructive: red-500 / red-400 ← only color in the UI
|
||||
```
|
||||
|
||||
Interactive elements (buttons, checkboxes, active states) use `slate-900` on light and `slate-50` on dark — inverting the surface. The only true color is destructive red.
|
||||
|
||||
### Typography
|
||||
|
||||
Font: **Inter** (or `system-ui` as fallback — acceptable on iOS/macOS).
|
||||
|
||||
| Role | Size | Weight |
|
||||
|---|---|---|
|
||||
| Screen title | 20px | 600 |
|
||||
| Section header | 13px | 600, uppercase, tracked |
|
||||
| Body / list item | 16px | 400 |
|
||||
| Secondary / meta | 13px | 400 |
|
||||
| Input | 16px | 400 — prevents iOS zoom on focus |
|
||||
|
||||
Line height: 1.5 for body, 1.2 for headings. No text smaller than 13px.
|
||||
|
||||
### Spacing
|
||||
|
||||
Base unit: 4px (Tailwind default). Prefer multiples of 4. Common values:
|
||||
|
||||
- List item padding: `px-4 py-3`
|
||||
- Screen horizontal margin: `px-4` (mobile), `px-6` (desktop)
|
||||
- Section gap: `gap-6`
|
||||
- Bottom nav safe area: always account for `env(safe-area-inset-bottom)`
|
||||
|
||||
### Iconography
|
||||
|
||||
**Lucide** (ships with shadcn-svelte). Size `20px` inline, `24px` for nav and primary actions. Stroke width `1.5`. Never fill icons.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
Class-based (`dark` on `<html>`). Respect `prefers-color-scheme` on first load, then persist user preference in `localStorage`. shadcn-svelte's CSS variable system handles theming — no additional setup needed per component.
|
||||
|
||||
---
|
||||
|
||||
## Component Library
|
||||
|
||||
**shadcn-svelte** — copy-paste components built on bits-ui + Tailwind. No runtime dependency, full ownership of component code.
|
||||
|
||||
### Conventions
|
||||
|
||||
- Copy components into `apps/web/src/lib/components/ui/` (shadcn-svelte default)
|
||||
- App-specific compositions go in `apps/web/src/lib/components/` (e.g. `ItemRow.svelte`, `ListCard.svelte`)
|
||||
- Never modify shadcn-svelte primitives directly — compose or wrap them
|
||||
- Use shadcn-svelte's `cn()` utility for conditional classes
|
||||
|
||||
### Key components to install
|
||||
|
||||
| Component | Used for |
|
||||
|---|---|
|
||||
| `Button` | All actions |
|
||||
| `Input` | Add item, search, forms |
|
||||
| `Checkbox` | Shopping items, tasks |
|
||||
| `Sheet` | Mobile bottom drawers (item edit, member invite) |
|
||||
| `Dialog` | Confirmations (delete list, dissolve collective) |
|
||||
| `Popover` | Presence avatars tooltip, note color picker |
|
||||
| `Badge` | Status labels (archived, completed) |
|
||||
| `Separator` | Section dividers |
|
||||
| `Skeleton` | Loading states |
|
||||
| `Sonner` | Toast notifications (sync errors, member joined) |
|
||||
|
||||
---
|
||||
|
||||
## Layout & Navigation
|
||||
|
||||
### App Shell
|
||||
|
||||
Two-column on desktop, single-column on mobile.
|
||||
|
||||
```
|
||||
Mobile Desktop (lg+)
|
||||
┌─────────────────────┐ ┌──────────┬──────────────────────┐
|
||||
│ Header │ │ │ Header │
|
||||
├─────────────────────┤ │ ├──────────────────────┤
|
||||
│ │ │ Nav │ │
|
||||
│ Content │ │ Sidebar │ Content │
|
||||
│ │ │ │ │
|
||||
├─────────────────────┤ │ │ │
|
||||
│ Bottom Nav │ └──────────┴──────────────────────┘
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
### Navigation
|
||||
|
||||
**Mobile:** fixed bottom tab bar, 4 tabs. Respects `safe-area-inset-bottom`.
|
||||
**Desktop (`lg+`):** left sidebar, always visible.
|
||||
|
||||
| Tab | Icon | Route |
|
||||
|---|---|---|
|
||||
| Lists | `shopping-cart` | `/lists` |
|
||||
| Tasks | `check-square` | `/tasks` |
|
||||
| Notes | `file-text` | `/notes` |
|
||||
| Search | `search` | `/search` |
|
||||
|
||||
Collective switcher and user avatar live in the header (mobile) / top of sidebar (desktop).
|
||||
|
||||
### Screen Structure
|
||||
|
||||
Every screen follows the same skeleton:
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ ← Back Screen Title ⋯ │ ← Header: title + optional action menu
|
||||
├─────────────────────────────┤
|
||||
│ │
|
||||
│ Main content │ ← Scrollable
|
||||
│ │
|
||||
├─────────────────────────────┤
|
||||
│ [ + Add item... ] │ ← Sticky bottom input (list/task screens)
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
### Responsive Breakpoints
|
||||
|
||||
Use Tailwind defaults: `sm` (640), `md` (768), `lg` (1024). The sidebar appears at `lg`. Content max-width: `max-w-2xl` centered on large screens.
|
||||
|
||||
---
|
||||
|
||||
## UX Patterns
|
||||
|
||||
### Optimistic Updates
|
||||
|
||||
All mutations update the local store immediately before the server responds. On error, revert and show a toast. Never block the UI waiting for a network response.
|
||||
|
||||
### Offline Indicator
|
||||
|
||||
A slim bar at the top of the content area (not the header) when offline:
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ No connection · Saving locally │ ← slate-800 bg, slate-100 text, 36px tall
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
Disappears immediately when connection is restored. No animation — just mounts/unmounts.
|
||||
|
||||
### Add Item Input
|
||||
|
||||
Sticky to the bottom of list and task screens. On focus, shows frequency suggestions above it:
|
||||
|
||||
```
|
||||
┌──────────────────────────────┐
|
||||
│ Milk · Bread · Eggs │ ← Frequency chips (top 5, scrollable row)
|
||||
├──────────────────────────────┤
|
||||
│ 🔍 Add item... [+] │ ← Input + confirm button
|
||||
└──────────────────────────────┘
|
||||
```
|
||||
|
||||
- Chips are horizontally scrollable, `text-sm`, `rounded-full`, `border` style
|
||||
- Tapping a chip fills the input; the user can still edit before confirming
|
||||
- While typing, chips are replaced by prefix-filtered suggestions (max 10, vertical list)
|
||||
- Confirm with the `+` button or `Enter`
|
||||
|
||||
### Swipe to Delete
|
||||
|
||||
On list items and tasks. Swipe left reveals a red destructive zone:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ ☐ Whole milk 1L ░░░░░░ │ ← item sliding left
|
||||
│ [Del] │ ← red zone, icon only
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
Full swipe confirms deletion immediately (no dialog). Partial swipe snaps back. A toast with "Undo" appears for 4 seconds.
|
||||
|
||||
### Drag & Drop Reordering
|
||||
|
||||
Handle on the left side of each item (visible on long-press on mobile, always visible on desktop). Use `svelte-dnd-action`. During drag: item has `shadow-md`, others compress slightly to show insertion point.
|
||||
|
||||
### Shopping Session Mode
|
||||
|
||||
Full-screen takeover. Clean, distraction-free:
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ ✕ Compra semanal 👤👤 │ ← close + presence avatars
|
||||
├─────────────────────────────┤
|
||||
│ ☐ Whole milk 1L │
|
||||
│ ☐ Bread │ ← large tap targets (min 56px height)
|
||||
│ ☐ Eggs 12 uds │
|
||||
│ ──────── Checked ──────── │ ← divider, auto-scrolled below
|
||||
│ ☑ Butter 250g │ ← muted, struck through
|
||||
├─────────────────────────────┤
|
||||
│ Finish shopping │ ← full-width button
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
- No bottom nav, no sidebar — only the list
|
||||
- Items checked during the session slide down past the divider automatically
|
||||
- Presence avatars are `size-7`, overlap slightly if multiple members present
|
||||
|
||||
### Confirmations
|
||||
|
||||
**Destructive, hard-to-reverse actions** (delete list, remove member, dissolve collective): use a `Dialog` with explicit confirmation text. No shortcut.
|
||||
|
||||
**Soft deletions** (single item, single task): swipe with undo toast — no dialog.
|
||||
|
||||
### Empty States
|
||||
|
||||
Simple, text-only. No illustrations.
|
||||
|
||||
```
|
||||
No lists yet.
|
||||
Tap + to create one.
|
||||
```
|
||||
|
||||
Two lines max. Secondary text color. Centered in the content area.
|
||||
|
||||
### Loading States
|
||||
|
||||
Use `Skeleton` components that match the shape of the content (list rows, not spinners). Spinner only for full-screen blocking operations (login, initial data fetch).
|
||||
246
design/grocery_list_crud/code.html
Normal file
246
design/grocery_list_crud/code.html
Normal file
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,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": {
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container": "#eceef0",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface": "#f7f9fb",
|
||||
"on-primary": "#dae2fd",
|
||||
"tertiary": "#7d000f",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-surface": "#191c1e",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"background": "#f7f9fb",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-surface-variant": "#474747",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"on-error-container": "#410002",
|
||||
"on-primary-container": "#ffffff",
|
||||
"outline": "#777777",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"primary-container": "#333b50",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary": "#505f76"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.swipe-reveal {
|
||||
clip-path: inset(0 0 0 15%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-white">
|
||||
<!-- SideNavBar Anchor -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
|
||||
<div class="mb-12 px-2">
|
||||
<h1 class="text-xl font-semibold tracking-tighter text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400 mt-1">The Monolith Editorial</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-2">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Home</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md text-slate-900 dark:text-white font-semibold" href="#">
|
||||
<span class="material-symbols-outlined">list_alt</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">My Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Shared</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Pantry</span>
|
||||
</a>
|
||||
<div class="pt-8 mt-8 border-t border-slate-200/0">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-auto px-2 flex items-center gap-3">
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full grayscale object-cover" data-alt="Professional portrait of a curator in a minimalist art gallery setting, soft cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8NCwueEiqM3xRmAaHO7D0d1WVXbCFX8Adj2KLyhXWYx4aiviqOGElFB1_zeEHgNzn82r1gduX73pRMJr0jKKePNBi-GJOj4Ip0VIn5N0aBxGq9UEh3HFckbaMYIJltDWk0Q8F2iRJckUWVkRQfMwjqja3g5_kn3-HQIIqKoWiSTeaDIuCJ-qFH9GjNBSlwcXDBVGM7STEa_zvRJMNVmP6sifR6NP9a7FqjmB7UsXVfGAIfmF3p-wgl4l8BtULSG9Q-niTOwmTaOek"/>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-semibold text-slate-900">Julian Voss</span>
|
||||
<span class="text-[10px] text-slate-400">Editor-in-Chief</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Wrapper -->
|
||||
<main class="ml-64 min-h-screen flex flex-col bg-surface relative">
|
||||
<!-- TopNavBar Anchor -->
|
||||
<header class="flex justify-between items-center w-full px-12 py-10 bg-surface">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-500 mb-1">Active Ledger</span>
|
||||
<h2 class="text-2xl font-semibold text-slate-900">Grocery List</h2>
|
||||
</div>
|
||||
<!-- Presence Avatars -->
|
||||
<div class="flex -space-x-2 ml-4">
|
||||
<img alt="Collaborator 1" class="w-7 h-7 rounded-full border-2 border-surface object-cover grayscale" data-alt="Close-up portrait of a designer with glasses in a bright studio environment, modern editorial style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0eRUROmFcjE8Kzk9zsM9bzJQNnOTvBIfMdm16VR-GvHWI4ZzdoIqyMWd9nCjlz8kGvPiTxe6XKtrB55v4hIgyq2oNJMea_-wCIUc1pt8j3QI_3c-Pis1vTdsK_zMly7r-HnAIvceIzLBVZP28tCX7648-MlxF1p2DsZs7NQZeigU3onCzUychQdFW48Pw4dr9DQQgL4sXH1foh_DWmjg5J3g7X5WXFRZNPrNeWImPcOMImAtimeCe3wfBIy6isOajg0BVIPUGAuaH"/>
|
||||
<img alt="Collaborator 2" class="w-7 h-7 rounded-full border-2 border-surface object-cover grayscale" data-alt="Portrait of a young creative professional woman with a minimalist aesthetic, warm natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhzT61n3rWO0T1OLsXd-CX2q33i5jw9tTpXT3QWFts2l9re6oaRFMdd2C6QUQ7tWVtqyD0HRnv_JCcU4HS6u_qG3txMLpOCSZNIJHzyG8JuSx_mgM_IDuxKwd7HAy2mOqhdi8oA9c61wfWtf26dAwTlHLM2IbABje2k1ZDl2gbstHfv1K3M9PyQ-mZnqHggHfmx8I3r0tV-OXeYxfGxpH0PjR5LIu1mRAX_J4jx2o8UB5Ujd7b_ASvIq594fdRUroyS7V2ocUT6H1Y"/>
|
||||
<div class="w-7 h-7 rounded-full border-2 border-surface bg-slate-200 flex items-center justify-center text-[10px] font-bold text-slate-600">+1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:opacity-70 transition-opacity flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-900">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- List Content (The Canvas) -->
|
||||
<div class="flex-1 px-12 pb-48 max-w-4xl">
|
||||
<!-- Category: Produce -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-4">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-400">Section 01</span>
|
||||
<h3 class="text-lg font-semibold text-slate-900">Produce</h3>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Honeycrisp Apples</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">6 Units</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Organic Baby Spinach</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">2 Bags</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: Dairy -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-4">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-400">Section 02</span>
|
||||
<h3 class="text-lg font-semibold text-slate-900">Dairy</h3>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<!-- Swipe-to-delete demonstration -->
|
||||
<div class="relative overflow-hidden rounded-lg group">
|
||||
<div class="absolute inset-0 bg-red-500 flex items-center justify-end px-6">
|
||||
<span class="material-symbols-outlined text-white">restore_from_trash</span>
|
||||
</div>
|
||||
<div class="relative flex items-center py-4 px-2 bg-surface hover:bg-surface-container-low transition-colors transform -translate-x-12">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800 font-medium">Whole milk 1L</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">2 Cartons</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Salted Butter</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">250g</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: Bakery -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-4">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-400">Section 03</span>
|
||||
<h3 class="text-lg font-semibold text-slate-900">Bakery</h3>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Sourdough Loaf</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">1 Unit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Sticky Bottom Input Shell -->
|
||||
<div class="fixed bottom-0 left-64 right-0 p-8 z-40">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Frequency Chips -->
|
||||
<div class="flex flex-wrap gap-2 mb-4 justify-center">
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Milk</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-xs font-semibold uppercase tracking-widest transition-colors">Bread</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Eggs</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Coffee</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Apples</button>
|
||||
</div>
|
||||
<!-- The Monolith Input -->
|
||||
<div class="bg-surface/80 backdrop-blur-xl p-2 rounded-xl flex items-center gap-3 shadow-2xl shadow-slate-200">
|
||||
<div class="flex-1 relative">
|
||||
<input class="w-full bg-slate-100 border-none rounded-lg py-4 px-6 focus:ring-2 focus:ring-slate-900 text-slate-900 placeholder:text-slate-400 font-medium" placeholder="Add Item (e.g. Greek Yogurt 500g)" type="text"/>
|
||||
<div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest mr-2">Cmd + N</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-slate-900 text-white p-4 rounded-lg flex items-center justify-center hover:scale-[0.98] transition-transform">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design/grocery_list_crud/screen.png
Normal file
BIN
design/grocery_list_crud/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
254
design/grocery_list_mobile/code.html
Normal file
254
design/grocery_list_mobile/code.html
Normal file
@@ -0,0 +1,254 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-container": "#eceef0",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"surface": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"inverse-surface": "#2d3133",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary": "#505f76",
|
||||
"on-surface": "#191c1e",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"tertiary": "#7d000f",
|
||||
"outline": "#777777",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-primary-container": "#ffffff",
|
||||
"on-error-container": "#410002",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"primary-fixed": "#565e74",
|
||||
"secondary-fixed-dim": "#9cacc5"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.ease-monolith { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface antialiased">
|
||||
<!-- Top Navigation Anchor -->
|
||||
<header class="w-full sticky top-0 bg-[#f7f9fb] dark:bg-[#020617] flex items-center justify-between px-6 py-4 z-50">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-slate-900 dark:text-slate-50 hover:bg-slate-200/50 p-2 rounded-md transition-colors" data-icon="menu">menu</button>
|
||||
<h1 class="text-xl font-bold tracking-tighter text-slate-900 dark:text-slate-50">MONOLITH</h1>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="font-['Inter'] font-semibold tracking-[-0.01em] uppercase text-[13px] text-slate-900 dark:text-slate-50">Lists</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-2xl mx-auto px-6 pb-40">
|
||||
<!-- Section Header -->
|
||||
<div class="mt-8 mb-6">
|
||||
<span class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500">Current Inventory</span>
|
||||
<h2 class="text-[20px] font-semibold text-slate-900 mt-1">Grocery List</h2>
|
||||
</div>
|
||||
<!-- Unified List -->
|
||||
<div class="space-y-3">
|
||||
<!-- Item Row -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-lowest rounded-md transition-transform duration-200 ease-in-out group">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[16px] font-normal text-slate-800">Whole milk 1L</span>
|
||||
<span class="text-[13px] text-slate-500">Dairy • Weekly</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 bg-surface-container-low p-1 rounded-md">
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-slate-200 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="remove">remove</span>
|
||||
</button>
|
||||
<span class="w-6 text-center font-semibold text-[14px]">2</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-slate-200 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item Row -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-lowest rounded-md">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[16px] font-normal text-slate-800">Organic Sourdough</span>
|
||||
<span class="text-[13px] text-slate-500">Bakery</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 bg-surface-container-low p-1 rounded-md">
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-slate-200 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="remove">remove</span>
|
||||
</button>
|
||||
<span class="w-6 text-center font-semibold text-[14px]">1</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-slate-200 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item Row -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-lowest rounded-md">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[16px] font-normal text-slate-800">Large Brown Eggs</span>
|
||||
<span class="text-[13px] text-slate-500">Dairy • 12ct</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 bg-surface-container-low p-1 rounded-md">
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-slate-200 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="remove">remove</span>
|
||||
</button>
|
||||
<span class="w-6 text-center font-semibold text-[14px]">1</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-slate-200 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item Row -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-lowest rounded-md opacity-60">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<input checked="" class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[16px] font-normal text-slate-800 line-through">Avocado (Ripe)</span>
|
||||
<span class="text-[13px] text-slate-500">Produce</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 bg-surface-container-low p-1 rounded-md">
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-slate-200 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="remove">remove</span>
|
||||
</button>
|
||||
<span class="w-6 text-center font-semibold text-[14px]">3</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-slate-200 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Sticky Bottom Input & Frequency Chips -->
|
||||
<div class="fixed bottom-0 left-0 right-0 z-50 pb-8 pt-4 px-6 bg-surface/80 backdrop-blur-xl">
|
||||
<div class="max-w-2xl mx-auto space-y-4">
|
||||
<!-- Frequency Chips -->
|
||||
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar pb-2">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 mr-2 shrink-0">Frequency</span>
|
||||
<button class="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-[13px] font-medium rounded-full whitespace-nowrap transition-colors">Milk</button>
|
||||
<button class="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-[13px] font-medium rounded-full whitespace-nowrap transition-colors">Bread</button>
|
||||
<button class="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-[13px] font-medium rounded-full whitespace-nowrap transition-colors">Eggs</button>
|
||||
<button class="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-[13px] font-medium rounded-full whitespace-nowrap transition-colors">Coffee</button>
|
||||
<button class="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-[13px] font-medium rounded-full whitespace-nowrap transition-colors">Butter</button>
|
||||
</div>
|
||||
<!-- Input Module -->
|
||||
<div class="bg-surface-container-low rounded-md p-2 flex items-center gap-2 shadow-[0px_20px_40px_rgba(15,23,42,0.06)]">
|
||||
<div class="flex-1 px-3">
|
||||
<input class="w-full bg-transparent border-none focus:ring-0 text-[16px] placeholder:text-slate-400 p-0" placeholder="Add item..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 bg-surface-container-highest rounded px-1 py-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center text-slate-600 hover:text-slate-900">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="remove">remove</span>
|
||||
</button>
|
||||
<span class="w-6 text-center text-[14px] font-semibold">1</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center text-slate-600 hover:text-slate-900">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="bg-slate-900 text-slate-50 w-10 h-10 flex items-center justify-center rounded-md hover:scale-95 transition-transform duration-200 ease-in-out">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="keyboard_return">keyboard_return</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden Navigation Drawer (Instruction: Navigation hidden in sidebar) -->
|
||||
<div class="fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] dark:bg-[#020617] h-full w-80 translate-x-[-100%] transition-transform duration-300 ease-monolith shadow-[0px_20px_40px_rgba(15,23,42,0.06)] group">
|
||||
<div class="px-8 mb-10 flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="Professional portrait of a man with clean studio lighting and neutral background for an editorial profile" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmx0pXAEFtFArdYeIc_I6bM11g0g-XAXtwDlqqQdhQ_5jgvwDCSmKgdyxpH3b9op5BUHOLEpOjTen6SA2NYbJd8TgvM44aqmrw3LYm9plcs04RKZZIi-tAmJxkUr6a3eHllJ0CocmsAGywivc_EYyyH_nKq-dZvo3jryxh4cfNHQDQnvmxSfH_g_QArM7R_xfvOdYwNF6cd9h4fiPATt9X9v2lQmNxz3rsKVBf4g299IwLByi0nanUnkLaMKHsDH7cs8hED5WMFORt"/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-900 dark:text-slate-50">Editorial Lead</h3>
|
||||
<p class="text-[13px] text-slate-500">monolith.editorial@app.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<div class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md mx-4 my-1 px-4 py-3 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Lists</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Tasks</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Notes</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Search</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors mt-auto">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">User Settings</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/grocery_list_mobile/screen.png
Normal file
BIN
design/grocery_list_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
261
design/grocery_list_simplified/code.html
Normal file
261
design/grocery_list_simplified/code.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,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": {
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container": "#eceef0",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface": "#f7f9fb",
|
||||
"on-primary": "#dae2fd",
|
||||
"tertiary": "#7d000f",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-surface": "#191c1e",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"background": "#f7f9fb",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-surface-variant": "#474747",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"on-error-container": "#410002",
|
||||
"on-primary-container": "#ffffff",
|
||||
"outline": "#777777",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"primary-container": "#333b50",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary": "#505f76"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.swipe-reveal {
|
||||
clip-path: inset(0 0 0 15%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-white">
|
||||
<!-- SideNavBar Anchor -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
|
||||
<div class="mb-12 px-2">
|
||||
<h1 class="text-xl font-semibold tracking-tighter text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400 mt-1">The Monolith Editorial</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-2">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Home</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md text-slate-900 dark:text-white font-semibold" href="#">
|
||||
<span class="material-symbols-outlined">list_alt</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">My Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Shared</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Pantry</span>
|
||||
</a>
|
||||
<div class="pt-8 mt-8 border-t border-slate-200/0">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-auto px-2 flex items-center gap-3">
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full grayscale object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8NCwueEiqM3xRmAaHO7D0d1WVXbCFX8Adj2KLyhXWYx4aiviqOGElFB1_zeEHgNzn82r1gduX73pRMJr0jKKePNBi-GJOj4Ip0VIn5N0aBxGq9UEh3HFckbaMYIJltDWk0Q8F2iRJckUWVkRQfMwjqja3g5_kn3-HQIIqKoWiSTeaDIuCJ-qFH9GjNBSlwcXDBVGM7STEa_zvRJMNVmP6sifR6NP9a7FqjmB7UsXVfGAIfmF3p-wgl4l8BtULSG9Q-niTOwmTaOek"/>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-semibold text-slate-900">Julian Voss</span>
|
||||
<span class="text-[10px] text-slate-400">Editor-in-Chief</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Wrapper -->
|
||||
<main class="ml-64 min-h-screen flex flex-col bg-surface relative">
|
||||
<!-- TopNavBar Anchor -->
|
||||
<header class="flex justify-between items-center w-full px-12 py-10 bg-surface">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-500 mb-1">Active Ledger</span>
|
||||
<h2 class="text-2xl font-semibold text-slate-900">Grocery List</h2>
|
||||
</div>
|
||||
<!-- Presence Avatars -->
|
||||
<div class="flex -space-x-2 ml-4">
|
||||
<img alt="Collaborator 1" class="w-7 h-7 rounded-full border-2 border-surface object-cover grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0eRUROmFcjE8Kzk9zsM9bzJQNnOTvBIfMdm16VR-GvHWI4ZzdoIqyMWd9nCjlz8kGvPiTxe6XKtrB55v4hIgyq2oNJMea_-wCIUc1pt8j3QI_3c-Pis1vTdsK_zMly7r-HnAIvceIzLBVZP28tCX7648-MlxF1p2DsZs7NQZeigU3onCzUychQdFW48Pw4dr9DQQgL4sXH1foh_DWmjg5J3g7X5WXFRZNPrNeWImPcOMImAtimeCe3wfBIy6isOajg0BVIPUGAuaH"/>
|
||||
<img alt="Collaborator 2" class="w-7 h-7 rounded-full border-2 border-surface object-cover grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhzT61n3rWO0T1OLsXd-CX2q33i5jw9tTpXT3QWFts2l9re6oaRFMdd2C6QUQ7tWVtqyD0HRnv_JCcU4HS6u_qG3txMLpOCSZNIJHzyG8JuSx_mgM_IDuxKwd7HAy2mOqhdi8oA9c61wfWtf26dAwTlHLM2IbABje2k1ZDl2gbstHfv1K3M9PyQ-mZnqHggHfmx8I3r0tV-OXeYxfGxpH0PjR5LIu1mRAX_J4jx2o8UB5Ujd7b_ASvIq594fdRUroyS7V2ocUT6H1Y"/>
|
||||
<div class="w-7 h-7 rounded-full border-2 border-surface bg-slate-200 flex items-center justify-center text-[10px] font-bold text-slate-600">+1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:opacity-70 transition-opacity flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-900">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- List Content (The Canvas) -->
|
||||
<div class="flex-1 px-12 pb-48 max-w-4xl">
|
||||
<!-- Unified List -->
|
||||
<div class="space-y-1">
|
||||
<!-- Item 1 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Honeycrisp Apples</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">6</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Organic Baby Spinach</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">2</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 3 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800 font-medium">Whole milk 1L</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">2</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 4 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Salted Butter</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">1</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 5 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Sourdough Loaf</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">1</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Bottom Input Shell -->
|
||||
<div class="fixed bottom-0 left-64 right-0 p-8 z-40">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Frequency Chips -->
|
||||
<div class="flex flex-wrap gap-2 mb-4 justify-center">
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Milk</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-xs font-semibold uppercase tracking-widest transition-colors">Bread</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Eggs</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Coffee</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Apples</button>
|
||||
</div>
|
||||
<!-- The Monolith Input -->
|
||||
<div class="bg-surface/80 backdrop-blur-xl p-2 rounded-xl flex items-center gap-3 shadow-2xl shadow-slate-200">
|
||||
<div class="flex-1 relative">
|
||||
<input class="w-full bg-slate-100 border-none rounded-lg py-4 px-6 focus:ring-2 focus:ring-slate-900 text-slate-900 placeholder:text-slate-400 font-medium" placeholder="Add Item (e.g. Greek Yogurt 500g)" type="text"/>
|
||||
<div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest mr-2">Cmd + N</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-slate-900 text-white p-4 rounded-lg flex items-center justify-center hover:scale-[0.98] transition-transform">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design/grocery_list_simplified/screen.png
Normal file
BIN
design/grocery_list_simplified/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
261
design/grocery_list_with_quick_quantity_controls/code.html
Normal file
261
design/grocery_list_with_quick_quantity_controls/code.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,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": {
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container": "#eceef0",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface": "#f7f9fb",
|
||||
"on-primary": "#dae2fd",
|
||||
"tertiary": "#7d000f",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-surface": "#191c1e",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"background": "#f7f9fb",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-surface-variant": "#474747",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"on-error-container": "#410002",
|
||||
"on-primary-container": "#ffffff",
|
||||
"outline": "#777777",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"primary-container": "#333b50",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary": "#505f76"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.swipe-reveal {
|
||||
clip-path: inset(0 0 0 15%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-white">
|
||||
<!-- SideNavBar Anchor -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
|
||||
<div class="mb-12 px-2">
|
||||
<h1 class="text-xl font-semibold tracking-tighter text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400 mt-1">The Monolith Editorial</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-2">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Home</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md text-slate-900 dark:text-white font-semibold" href="#">
|
||||
<span class="material-symbols-outlined">list_alt</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">My Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Shared</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Pantry</span>
|
||||
</a>
|
||||
<div class="pt-8 mt-8 border-t border-slate-200/0">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-auto px-2 flex items-center gap-3">
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full grayscale object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8NCwueEiqM3xRmAaHO7D0d1WVXbCFX8Adj2KLyhXWYx4aiviqOGElFB1_zeEHgNzn82r1gduX73pRMJr0jKKePNBi-GJOj4Ip0VIn5N0aBxGq9UEh3HFckbaMYIJltDWk0Q8F2iRJckUWVkRQfMwjqja3g5_kn3-HQIIqKoWiSTeaDIuCJ-qFH9GjNBSlwcXDBVGM7STEa_zvRJMNVmP6sifR6NP9a7FqjmB7UsXVfGAIfmF3p-wgl4l8BtULSG9Q-niTOwmTaOek"/>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-semibold text-slate-900">Julian Voss</span>
|
||||
<span class="text-[10px] text-slate-400">Editor-in-Chief</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Wrapper -->
|
||||
<main class="ml-64 min-h-screen flex flex-col bg-surface relative">
|
||||
<!-- TopNavBar Anchor -->
|
||||
<header class="flex justify-between items-center w-full px-12 py-10 bg-surface">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-500 mb-1">Active Ledger</span>
|
||||
<h2 class="text-2xl font-semibold text-slate-900">Grocery List</h2>
|
||||
</div>
|
||||
<!-- Presence Avatars -->
|
||||
<div class="flex -space-x-2 ml-4">
|
||||
<img alt="Collaborator 1" class="w-7 h-7 rounded-full border-2 border-surface object-cover grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0eRUROmFcjE8Kzk9zsM9bzJQNnOTvBIfMdm16VR-GvHWI4ZzdoIqyMWd9nCjlz8kGvPiTxe6XKtrB55v4hIgyq2oNJMea_-wCIUc1pt8j3QI_3c-Pis1vTdsK_zMly7r-HnAIvceIzLBVZP28tCX7648-MlxF1p2DsZs7NQZeigU3onCzUychQdFW48Pw4dr9DQQgL4sXH1foh_DWmjg5J3g7X5WXFRZNPrNeWImPcOMImAtimeCe3wfBIy6isOajg0BVIPUGAuaH"/>
|
||||
<img alt="Collaborator 2" class="w-7 h-7 rounded-full border-2 border-surface object-cover grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhzT61n3rWO0T1OLsXd-CX2q33i5jw9tTpXT3QWFts2l9re6oaRFMdd2C6QUQ7tWVtqyD0HRnv_JCcU4HS6u_qG3txMLpOCSZNIJHzyG8JuSx_mgM_IDuxKwd7HAy2mOqhdi8oA9c61wfWtf26dAwTlHLM2IbABje2k1ZDl2gbstHfv1K3M9PyQ-mZnqHggHfmx8I3r0tV-OXeYxfGxpH0PjR5LIu1mRAX_J4jx2o8UB5Ujd7b_ASvIq594fdRUroyS7V2ocUT6H1Y"/>
|
||||
<div class="w-7 h-7 rounded-full border-2 border-surface bg-slate-200 flex items-center justify-center text-[10px] font-bold text-slate-600">+1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:opacity-70 transition-opacity flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-900">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- List Content (The Canvas) -->
|
||||
<div class="flex-1 px-12 pb-48 max-w-4xl">
|
||||
<!-- Unified List -->
|
||||
<div class="space-y-1">
|
||||
<!-- Item 1 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Honeycrisp Apples</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">6</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Organic Baby Spinach</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">2</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 3 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800 font-medium">Whole milk 1L</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">2</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 4 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Salted Butter</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">1</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 5 -->
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Sourdough Loaf</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">remove</span>
|
||||
</button>
|
||||
<span class="text-sm font-semibold text-slate-900 tabular-nums">1</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm text-slate-400">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Bottom Input Shell -->
|
||||
<div class="fixed bottom-0 left-64 right-0 p-8 z-40">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Frequency Chips -->
|
||||
<div class="flex flex-wrap gap-2 mb-4 justify-center">
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Milk</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-xs font-semibold uppercase tracking-widest transition-colors">Bread</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Eggs</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Coffee</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Apples</button>
|
||||
</div>
|
||||
<!-- The Monolith Input -->
|
||||
<div class="bg-surface/80 backdrop-blur-xl p-2 rounded-xl flex items-center gap-3 shadow-2xl shadow-slate-200">
|
||||
<div class="flex-1 relative">
|
||||
<input class="w-full bg-slate-100 border-none rounded-lg py-4 px-6 focus:ring-2 focus:ring-slate-900 text-slate-900 placeholder:text-slate-400 font-medium pr-40" placeholder="Add Item (e.g. Greek Yogurt 500g)" type="text"/>
|
||||
<div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest mr-2">Cmd + N</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-slate-900 text-white p-4 rounded-lg flex items-center justify-center hover:scale-[0.98] transition-transform">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design/grocery_list_with_quick_quantity_controls/screen.png
Normal file
BIN
design/grocery_list_with_quick_quantity_controls/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
238
design/lists_mobile/code.html
Normal file
238
design/lists_mobile/code.html
Normal file
@@ -0,0 +1,238 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Colectivo | Lists</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-container": "#eceef0",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"surface": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"inverse-surface": "#2d3133",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary": "#505f76",
|
||||
"on-surface": "#191c1e",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"tertiary": "#7d000f",
|
||||
"outline": "#777777",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-primary-container": "#ffffff",
|
||||
"on-error-container": "#410002",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"primary-fixed": "#565e74",
|
||||
"secondary-fixed-dim": "#9cacc5"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||
font-size: 20px;
|
||||
}
|
||||
.ease-monolith {
|
||||
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-white">
|
||||
<!-- TopAppBar from JSON -->
|
||||
<header class="w-full sticky top-0 bg-[#f7f9fb] dark:bg-[#020617] flex items-center justify-between px-6 py-4 z-50">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-slate-900 dark:text-slate-50 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors p-2 rounded-md active:scale-95 duration-200 ease-in-out">
|
||||
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
||||
</button>
|
||||
<span class="text-xl font-bold tracking-tighter text-slate-900 dark:text-slate-50">MONOLITH</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden bg-slate-200">
|
||||
<img alt="Profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional woman with editorial lighting, clean neutral background, minimalist aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCbCrRW3Era9N3FIsMxqvO-YmJf5OvZX76hnkYfnVBps143KNktQm8PF-v6i83DRNZ8eVjs2eo8Kb_2HlF41FVpvfhnG6p6cRqjecSPhc46bT1xO6M5RDC1QSYLODiOPjR4bNqM0y4D6CFSywRVruOfBv4ctbawEZZeDKmuS2XaDO08dlJT0QOjrWpjVSh-8iLllRKszXUiB0EjigZxfdmvW-MaMkaHK7U3THA5ONCL4qriUEhIODWqJJxRWGzF25ei0DRNW4GUWYG1"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-2xl mx-auto px-6 pt-12 pb-32">
|
||||
<!-- Masthead Section -->
|
||||
<div class="mb-12">
|
||||
<p class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 mb-2">Workspace</p>
|
||||
<h1 class="text-[3.5rem] font-semibold leading-[1.1] tracking-[-0.02em] text-slate-900">Shared Lists</h1>
|
||||
</div>
|
||||
<!-- Bento Grid / Cards Layout -->
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- Home Card -->
|
||||
<div class="group bg-surface-container-lowest rounded-md p-6 flex flex-col justify-between min-h-[160px] cursor-pointer transition-all duration-300 hover:bg-slate-100/50">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-3 bg-slate-100 rounded-md">
|
||||
<span class="material-symbols-outlined text-slate-900" data-icon="home">home</span>
|
||||
</div>
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-white overflow-hidden bg-slate-300">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait headshot of a person" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_EezR-DC5OmqTBaaaXasbuY5ASmxMKhWPaz2SBll4-r4P4gHCOKEYz3CMarnvcmAZZdD8PAog6lXp08EYbV4P41PMXwecadsa1CPuO2tpd8xtx6aD49odApJtBvm2lqTqGUDfFT0E2v_11Kappmghm5lSoa0Ye-BU0DqcWqV7s3EIpPsQ30bQULj0nPt1DcW3g8UCP1BZgBCxivnrScI2zzBmSlLHAuaKsEio3sqwg4bYTlcjpPZySTeV4aT8foTP5PsF5dwE_pLF"/>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-white overflow-hidden bg-slate-300">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait headshot of a person" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3QwvwOrhEM3uAE8xEwdRpG54LxH3w663RAKBkZ8U9zH0E3XymKJVjbSYhvCHjSeQowhF5Q4U3zTBZPffoEouRQySldQtEnIgEq6R-2nMhvQRraigk4C8hse5DIwSmTQgB0V672qdZURlIShkEs8w6fHVTEWeQ00T_H-6PyGTxS_5Pv29NzlLqetjJqXxWGygAsadu1d1h9cQzYvC9sFNa12IGzDE4Y7jjvcB_Ow4qwawxMayjesqGi15kvs8v19emz_15hozmWjRN"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-slate-900">Home</h2>
|
||||
<p class="text-slate-500 text-[13px]">12 items · Shared with Family</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Office Card -->
|
||||
<div class="group bg-surface-container-lowest rounded-md p-6 flex flex-col justify-between min-h-[160px] cursor-pointer transition-all duration-300 hover:bg-slate-100/50">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-3 bg-slate-100 rounded-md">
|
||||
<span class="material-symbols-outlined text-slate-900" data-icon="work">work</span>
|
||||
</div>
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-white overflow-hidden bg-slate-300">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait headshot of a person" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyruwqsZvHd_IqbsoIl2YnXBkjbiLVsBem1QH_lwJqH0CnraxujSnFd1FPpqbK8VnZu4sSVAnpeWjdNO32GVJIFMYM1O93TnOnUjDyqmu_1kMzUvyxG1-tmka0dGmvur6cYrQo8TP0sbO4MK2j953ow7eZYCWg6kI9Cix0YPREORmWCgIxbLOmArvR3MD9zb_ae1Tx9TpvXpalzZLSIFGolVkH_W1sDzVMlzyrQaFgwnoknNsk1Ot5qh4xTqhZdjbw7PZFpAaNKBaK"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-slate-900">Office</h2>
|
||||
<p class="text-slate-500 text-[13px]">28 items · Shared with Editorial Team</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Party Card -->
|
||||
<div class="group bg-surface-container-lowest rounded-md p-6 flex flex-col justify-between min-h-[180px] cursor-pointer transition-all duration-300 hover:bg-slate-100/50">
|
||||
<div class="p-3 bg-slate-100 rounded-md self-start">
|
||||
<span class="material-symbols-outlined text-slate-900" data-icon="celebration">celebration</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-slate-900">Party</h2>
|
||||
<p class="text-slate-500 text-[13px]">8 items</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Travel Card -->
|
||||
<div class="group bg-surface-container-lowest rounded-md p-6 flex flex-col justify-between min-h-[180px] cursor-pointer transition-all duration-300 hover:bg-slate-100/50">
|
||||
<div class="p-3 bg-slate-100 rounded-md self-start">
|
||||
<span class="material-symbols-outlined text-slate-900" data-icon="flight">flight</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-slate-900">Travel</h2>
|
||||
<p class="text-slate-500 text-[13px]">42 items</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Sticky Bottom Input -->
|
||||
<div class="fixed bottom-0 left-0 right-0 p-6 z-40">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="relative backdrop-blur-xl bg-white/80 dark:bg-slate-900/80 rounded-md shadow-[0px_20px_40px_rgba(15,23,42,0.06)] flex items-center p-2">
|
||||
<div class="flex-shrink-0 pl-4 pr-2">
|
||||
<span class="material-symbols-outlined text-slate-400" data-icon="add">add</span>
|
||||
</div>
|
||||
<input class="w-full bg-transparent border-none focus:ring-0 text-slate-900 placeholder:text-slate-400 font-body py-3" placeholder="Create a new shared list..." type="text"/>
|
||||
<button class="bg-slate-900 text-slate-50 px-5 py-2.5 rounded-md font-semibold text-sm transition-transform active:scale-95 duration-200">
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden Drawer Placeholder (accessible via Menu) -->
|
||||
<!-- Applying "NavigationDrawer" styles from JSON to a hidden state overlay -->
|
||||
<div class="fixed inset-0 bg-slate-900/20 backdrop-blur-sm z-[55] pointer-events-none opacity-0 transition-opacity"></div>
|
||||
<aside class="fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] dark:bg-[#020617] h-full w-80 rounded-r-none shadow-[0px_20px_40px_rgba(15,23,42,0.06)] -translate-x-full transition-transform duration-300 ease-monolith">
|
||||
<!-- Header Profile -->
|
||||
<div class="px-8 mb-10 flex flex-col items-start">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden mb-4 bg-slate-200">
|
||||
<img class="w-full h-full object-cover" data-alt="Editorial Lead profile photo" src="https://lh3.googleusercontent.com/aida-public/AB6AXuChb1EYlD2CCvSH8KtRccYf9aelP511eXObO9vL8i_jKI-qCYryVtptc2Arf8nHzh3wnRAhCD2G-2YJiv35wl1yWeUl_vYwjVQSfoHOUI9uTpEspcDUXbmDEBFd8WYR2FD7mYHU4kf-MbakJCS70f2tgzDTNuFRyRWQ8tCqDIcEYGcBG6lxn3OtF6fpBxgLv9MmqIKVLAQIb2Zq0Deh9KowONqsANp03ihxbe4AgGxMR3DfYCJGcon-XkrxPcmtPVzohsi0KYmD9tq9"/>
|
||||
</div>
|
||||
<h3 class="font-bold text-slate-900 dark:text-slate-50 text-lg">Editorial Lead</h3>
|
||||
<p class="text-slate-500 text-sm">monolith.editorial@app.com</p>
|
||||
</div>
|
||||
<!-- Navigation items from JSON -->
|
||||
<nav class="flex flex-col flex-1 overflow-y-auto no-scrollbar">
|
||||
<!-- Active item -->
|
||||
<a class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md mx-4 my-1 px-4 py-3 flex items-center gap-4 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Lists</span>
|
||||
</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Tasks</span>
|
||||
</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Notes</span>
|
||||
</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Search</span>
|
||||
</a>
|
||||
<div class="mt-auto border-t border-slate-100 pt-4">
|
||||
<a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">User Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
</body></html>
|
||||
BIN
design/lists_mobile/screen.png
Normal file
BIN
design/lists_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
240
design/lists_view/code.html
Normal file
240
design/lists_view/code.html
Normal file
@@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary": "#505f76",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed": "#565e74",
|
||||
"primary": "#000000",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-surface": "#191c1e",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-primary": "#dae2fd",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#333b50",
|
||||
"on-error-container": "#410002",
|
||||
"background": "#f7f9fb",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"outline": "#777777",
|
||||
"surface": "#f7f9fb",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"on-surface-variant": "#474747",
|
||||
"error-container": "#ffdad6",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary": "#7d000f",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"surface-tint": "#565e74",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-background": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.editorial-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen flex overflow-hidden">
|
||||
<!-- SideNavBar (Desktop Only) -->
|
||||
<aside class="hidden lg:flex flex-col border-r-0 h-full w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-950 z-40">
|
||||
<div class="px-6 py-8">
|
||||
<div class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50 mb-8">Colectivo</div>
|
||||
<nav class="space-y-1">
|
||||
<!-- Lists - ACTIVE -->
|
||||
<a class="flex items-center px-3 py-2 text-slate-900 dark:text-slate-50 font-semibold hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md group" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="shopping_cart">shopping_cart</span>
|
||||
<span class="text-[13px]">Lists</span>
|
||||
</a>
|
||||
<!-- Tasks - INACTIVE -->
|
||||
<a class="flex items-center px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md group" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="check_box">check_box</span>
|
||||
<span class="text-[13px]">Tasks</span>
|
||||
</a>
|
||||
<!-- Notes - INACTIVE -->
|
||||
<a class="flex items-center px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md group" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="description">description</span>
|
||||
<span class="text-[13px]">Notes</span>
|
||||
</a>
|
||||
<!-- Search - INACTIVE -->
|
||||
<a class="flex items-center px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md group" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="search">search</span>
|
||||
<span class="text-[13px]">Search</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="mt-auto p-6 flex items-center gap-3 bg-slate-100 dark:bg-slate-900">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-300 overflow-hidden">
|
||||
<img alt="User Profile" data-alt="minimalist close-up profile portrait of a woman in soft natural lighting against a neutral grey wall" src="https://lh3.googleusercontent.com/aida-public/AB6AXuByd5zweph9EJziITl_1tkAUJf1B6EkJkbfUIwptDicZGUB8ljjLeTxh1dvd42NoEvGm96gX-U2KgXGKP_5LYLlamM9vQdxprgVcSwLmOahr5_YOspVhJAhtRtKoHwBlTvisyxERNLKRW55XiDp3Sg_FwUzQxXTNiy0X0KtxXROgj2SnZjdebH7lmLmbrMd3tmYp9M4FEUegwTQBdR29qFaZ2KWsvzJW-b3xai1NKJibEsaHDjKZaviisnjFmGgl56goM_Wsgos4X_P"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[13px] font-semibold text-slate-900 dark:text-slate-50">Shared Workspace</div>
|
||||
<div class="text-[11px] text-slate-500">Colectivo</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 lg:ml-64 relative flex flex-col h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex justify-between items-center h-14 px-4 lg:px-8 w-full sticky top-0 bg-slate-50 dark:bg-slate-950 z-30">
|
||||
<div class="lg:hidden text-xl font-semibold text-slate-900 dark:text-slate-50">Colectivo</div>
|
||||
<div class="hidden lg:block"></div> <!-- Spacer for center alignment logic -->
|
||||
<div class="text-[20px] font-semibold tracking-tight text-slate-900 dark:text-slate-50">Lists</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 opacity-80 active:opacity-100 transition-opacity">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-50" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<div class="flex-1 overflow-y-auto bg-surface px-4 lg:px-12 py-10 pb-32">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="editorial-label text-slate-500 mb-2">Workspace Overview</div>
|
||||
<h1 class="text-[3.5rem] font-semibold tracking-[-0.02em] leading-tight mb-12 text-slate-900">Shared Lists</h1>
|
||||
<!-- Asymmetric Bento-style Layout for Lists -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Home List Card -->
|
||||
<div class="col-span-1 md:col-span-2 group cursor-pointer bg-surface-container-lowest p-8 rounded-md hover:bg-slate-100 transition-colors">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold mb-1 text-slate-900">Home</h3>
|
||||
<p class="text-slate-500 text-sm">12 items · Updated 2h ago</p>
|
||||
</div>
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
||||
<img alt="User" data-alt="professional headshot of a man with soft lighting and neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnYadmJQpD5pfp9ByeZsXE-3GEuEPn4f43l7T91ohUGlijBM-YVjwDZg23Qe-1v0xxUNgGKuZaUlwS0RyycCzjfFVncz5mNua6CBgjH4LgnnJMDStjigTgOgkpvJA1ohqZ7AeGJU-XQ75U7MwflX3A9_S8bPC8gHkw-g_CU9_FZg8-ciFoZSF7p9wWHANYBButTdVozInh82fhkhFlOfY4pfv4EFvTpocEcubea1GB6yq4xm6CIAR8yRV1sNroDDSNvFUorUPI75Aw"/>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-200 overflow-hidden">
|
||||
<img alt="User" data-alt="minimalist profile portrait of a woman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDLsyt4yPDiQkevQp8h_SthOcgknQPIWd32ubNK-PWFdVMsnhxc0BcmTzoaMrDiFzMX1U_IU-zYNSW4uqEvJVpJbRtcfQtwxEA2dky2AxnQZP6wiIiTOljTxlYYNj05s0ZlbUA202TxEjaAsLnloWKrDvlFPMlPmPzz_VFm_h5busuy_2mCkwCDZlpqk77rwlAQ0LYvVk66deJmKL-yLHcn8M7vftXbpAw5JazsT5y1MD6-ygVTIc1sWR1r1O6DKZPvZkOEoYL4DhNd"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 flex gap-2">
|
||||
<span class="rounded-full bg-slate-200 px-3 py-1 text-[11px] font-semibold text-slate-700">GROCERIES</span>
|
||||
<span class="rounded-full bg-slate-200 px-3 py-1 text-[11px] font-semibold text-slate-700">HOUSEHOLD</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Office List Card -->
|
||||
<div class="group cursor-pointer bg-surface-container-low p-8 rounded-md hover:bg-slate-100 transition-colors">
|
||||
<div class="flex flex-col h-full justify-between">
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold mb-1 text-slate-900">Office</h3>
|
||||
<p class="text-slate-500 text-sm">8 items</p>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-900 text-white flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="work">work</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Party List Card -->
|
||||
<div class="group cursor-pointer bg-surface-container-low p-8 rounded-md hover:bg-slate-100 transition-colors">
|
||||
<div class="flex flex-col h-full justify-between">
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold mb-1 text-slate-900">Party</h3>
|
||||
<p class="text-slate-500 text-sm">24 items</p>
|
||||
</div>
|
||||
<div class="mt-12 flex items-center justify-between">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-200 text-slate-900 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="celebration">celebration</span>
|
||||
</div>
|
||||
<span class="text-error font-semibold text-xs tracking-widest uppercase">High Priority</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Travel List Card (Small Content) -->
|
||||
<div class="col-span-1 md:col-span-2 group cursor-pointer bg-surface-container-lowest p-6 rounded-md hover:bg-slate-100 transition-colors flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-slate-100 rounded-md flex items-center justify-center text-slate-400">
|
||||
<span class="material-symbols-outlined" data-icon="flight_takeoff">flight_takeoff</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-slate-900">Travel</h3>
|
||||
<p class="text-slate-500 text-xs">5 items · Draft</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="arrow_forward">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Add List Input (Monolith Design) -->
|
||||
<div class="fixed bottom-0 left-0 lg:left-64 right-0 p-4 lg:p-8 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl z-50 border-t border-slate-200/20">
|
||||
<div class="max-w-3xl mx-auto flex items-center gap-4 bg-surface-container-low px-6 py-4 rounded-md">
|
||||
<span class="material-symbols-outlined text-slate-400" data-icon="add">add</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 w-full text-slate-900 placeholder-slate-400 font-medium" placeholder="Create a new shared list..." type="text"/>
|
||||
<button class="bg-slate-900 text-slate-50 px-5 py-2 rounded-md font-semibold text-sm hover:scale-[0.98] transition-transform">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BottomNavBar (Mobile Only) -->
|
||||
<nav class="lg:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center h-16 px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-t border-slate-200/20">
|
||||
<button class="flex flex-col items-center text-slate-900 active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center text-slate-400 active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined" data-icon="check_box">check_box</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center text-slate-400 active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center text-slate-400 active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
</button>
|
||||
</nav>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design/lists_view/screen.png
Normal file
BIN
design/lists_view/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
219
design/notes_mobile/code.html
Normal file
219
design/notes_mobile/code.html
Normal file
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Monolith Editorial - Notes</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-container": "#eceef0",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"surface": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"inverse-surface": "#2d3133",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary": "#505f76",
|
||||
"on-surface": "#191c1e",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"tertiary": "#7d000f",
|
||||
"outline": "#777777",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-primary-container": "#ffffff",
|
||||
"on-error-container": "#410002",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"primary-fixed": "#565e74",
|
||||
"secondary-fixed-dim": "#9cacc5"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.375rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.ease-monolith { transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
|
||||
body { background-color: #f7f9fb; font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-on-surface selection:bg-slate-200">
|
||||
<!-- Top Navigation Bar (Shared Component - Monolith TopAppBar) -->
|
||||
<header class="bg-[#f7f9fb] dark:bg-[#020617] w-full sticky top-0 z-50">
|
||||
<div class="flex items-center justify-between px-6 py-4 w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-slate-900 dark:text-slate-50 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors p-1 rounded-md">
|
||||
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
||||
</button>
|
||||
<h1 class="text-xl font-bold tracking-tighter text-slate-900 dark:text-slate-50">MONOLITH</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-['Inter'] font-semibold tracking-[-0.01em] uppercase text-[13px] text-slate-500">NOTES</span>
|
||||
<div class="h-8 w-8 rounded-full bg-slate-200 overflow-hidden">
|
||||
<img alt="User Profile" data-alt="portrait of a professional male editor in a minimal studio setting with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAFcr-63ujo_eQEgTXPCMmEbNLqV0HD58FbvZvhkv9KO4yAo0EhxmepiHMWHA7l5rMvXc-5WTQYYADEBk0ziFbv1wB8oegChYIgJ569YRpE61JdnEdSxGkPqva0lcCpyfUpcKSxqvt7fI7FyF1LW2sYrHnh2TQxmn5q8mf4-1UXpHAxhOEpdT2xJGgvru6eDbtcuwS_mD61jAdGmfk02TkpS8nn8F25FI5E2RpK4OZtOyoUPi8bngiwO6o6OzpqrnVFlL8eOSEpkwEl"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="max-w-2xl mx-auto px-6 pt-8 pb-32">
|
||||
<!-- Editorial Masthead Section -->
|
||||
<section class="mb-12">
|
||||
<p class="font-['Inter'] font-semibold tracking-widest uppercase text-[13px] text-slate-500 mb-1">REPOSITORY</p>
|
||||
<h2 class="text-[32px] font-semibold tracking-tight text-slate-900 leading-tight">Project Intelligence</h2>
|
||||
</section>
|
||||
<!-- Meeting Notes Section -->
|
||||
<section class="space-y-10 mb-16">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-900">Meeting Notes</span>
|
||||
<span class="text-[13px] text-slate-500">4 ENTRIES</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- Card 1 -->
|
||||
<article class="bg-surface-container-lowest p-6 rounded-md group transition-all duration-200 active:scale-[0.98]">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<h3 class="text-lg font-semibold text-slate-900 leading-snug">Quarterly Content Strategy Alignment</h3>
|
||||
<span class="material-symbols-outlined text-slate-400 text-[20px]" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-4">Discussed the shift towards high-fidelity editorial pieces for Q4. Focus on long-form interviews and architectural photography...</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] font-medium text-slate-400">OCT 12, 2023</span>
|
||||
<div class="flex -space-x-2">
|
||||
<div class="h-5 w-5 rounded-full border-2 border-white overflow-hidden bg-slate-100">
|
||||
<img alt="avatar" data-alt="professional woman portrait with natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXVjk5Aa3BTzUYi9pYMf9l_1sINxb38eYzWPuU_Ksniim-BNro_2op7Tt9FsPz2bpgsGr4XE45mKrTCUJ9qIeCdp9gfhN6Ga9hUePDaW9rDm0dIu-5qIwtHx0-wINivDLDC2UJScBDsEZ2v5Bgcc2ZcQzkLLGlGGc_pp_LwlYjRe4Z8AoC66aaD_pmFffiOP35mmOkLVrgnydv_uhNeoikT0TawvhwsfSRqGF1c0QDYwqgbveq4NBPbli0z5SXzHZ149Ef-xTbaEEb"/>
|
||||
</div>
|
||||
<div class="h-5 w-5 rounded-full border-2 border-white overflow-hidden bg-slate-100">
|
||||
<img alt="avatar" data-alt="man smiling portrait soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCdsQZdbUliOJhALtO43b1E2Li6xioL6sTu3MNPoa0QRZ8-vEL1c1bgLmx-3QXXrm4E29UF0uAGOD3ZKVZUf23b8_pfA8KlwjefTZEXPDtc2BnSvzIQzkaZowj7MUTjTPZPrw81AlFVVYd9x7I53UXfYJ-gTHfmCWGksal_-evoN9J7iku42f33-OF76vm4Y1ItrGElaPs7W0z3XGykcICS5Kp8CmPOx5G__l7_M_JUIjQL8Lm99NkcQM3OoHKa1NSdLB4P-xcBpzaj"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Card 2 -->
|
||||
<article class="bg-surface-container-lowest p-6 rounded-md group transition-all duration-200 active:scale-[0.98]">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<h3 class="text-lg font-semibold text-slate-900 leading-snug">Client Feedback: Horizon Project</h3>
|
||||
<span class="material-symbols-outlined text-slate-400 text-[20px]" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-4">Client prefers the monochrome direction but requested more emphasis on white space in the mobile viewport. Typography is approved.</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12px] font-medium text-slate-400">OCT 10, 2023</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Project Ideas Section (Asymmetric Bento Variation) -->
|
||||
<section class="space-y-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-900">Project Ideas</span>
|
||||
<span class="material-symbols-outlined text-slate-400" data-icon="add">add</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div class="bg-slate-900 text-slate-50 p-6 rounded-md">
|
||||
<span class="font-['Inter'] font-semibold uppercase text-[10px] tracking-widest text-slate-400 block mb-2">PRIORITY</span>
|
||||
<h3 class="text-xl font-semibold mb-3 tracking-tight">The Brutalist Collection</h3>
|
||||
<p class="text-slate-300 text-sm leading-relaxed">A digital archive of 1970s concrete architecture transformed into a high-contrast photography book.</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-6 rounded-md">
|
||||
<h3 class="text-lg font-semibold text-slate-900 mb-2">Sustainable Print Media</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed">Exploring recycled paper stocks that maintain tactile luxury for the Monolith print edition.</p>
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<span class="bg-slate-100 text-slate-500 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Research</span>
|
||||
<span class="bg-slate-100 text-slate-500 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Supply Chain</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Sticky Monolith Input (Glassmorphism) -->
|
||||
<div class="fixed bottom-0 left-0 w-full p-4 z-40">
|
||||
<div class="max-w-2xl mx-auto backdrop-blur-xl bg-white/80 dark:bg-[#020617]/80 rounded-full shadow-[0px_20px_40px_rgba(15,23,42,0.06)] flex items-center px-2 py-2">
|
||||
<button class="h-10 w-10 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="attach_file">attach_file</span>
|
||||
</button>
|
||||
<input class="flex-1 bg-transparent border-none focus:ring-0 text-slate-900 placeholder:text-slate-400 text-sm px-2" placeholder="Capture a new thought..." type="text"/>
|
||||
<button class="bg-slate-900 text-slate-50 h-10 px-6 rounded-full text-xs font-bold uppercase tracking-widest transition-transform active:scale-95">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden Sidebar (Reference logic for future interaction) -->
|
||||
<nav class="hidden fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] dark:bg-[#020617] h-full w-80 shadow-[0px_20px_40px_rgba(15,23,42,0.06)]">
|
||||
<div class="px-8 mb-12">
|
||||
<div class="h-12 w-12 rounded-full overflow-hidden mb-4">
|
||||
<img alt="User Profile" data-alt="professional male portrait studio setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAWGvlCjZrzp4_VFSWBT-9QY0bxQrEDB0n0z9swI60-KqaYjefpKT3bxewCI1Ve2wrn4TmdXcyLj7_ulJWn8Tm6xuKo69Vd2SZ0ehHVatzUQN2XxXlbB5YeYbLQdVGeU_3_vVN67bcBQh0Dl_ls0Lp98IGFigdxec5T9susUyVIhi6G8Xxoy1t_l57IJTX5DayNLOz2XoUjqQuamk0mPPbjDP175k_I67ean7uLlC-6D5d-ZAhUniyKV-J67mbAO6nZyFYfxqh19UkZ"/>
|
||||
</div>
|
||||
<h4 class="font-bold text-slate-900">Editorial Lead</h4>
|
||||
<p class="text-sm text-slate-500">monolith.editorial@app.com</p>
|
||||
</div>
|
||||
<ul class="flex-1 space-y-1">
|
||||
<li><a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-md transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span> Lists</a>
|
||||
</li>
|
||||
<li><a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-md transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span> Tasks</a>
|
||||
</li>
|
||||
<li><a class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md mx-4 my-1 px-4 py-3 flex items-center gap-4 transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span> Notes</a>
|
||||
</li>
|
||||
<li><a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-md transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span> Search</a>
|
||||
</li>
|
||||
<li><a class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 flex items-center gap-4 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-md transition-all" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span> User Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
design/notes_mobile/screen.png
Normal file
BIN
design/notes_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
260
design/notes_view/code.html
Normal file
260
design/notes_view/code.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Colectivo | Notes</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-background": "#191c1e",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary": "#7d000f",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"secondary": "#505f76",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"surface-container": "#eceef0",
|
||||
"on-surface-variant": "#474747",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#333b50",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"tertiary-container": "#da3437",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"surface-tint": "#565e74",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-surface": "#191c1e",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface": "#f7f9fb",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"outline": "#777777",
|
||||
"on-error-container": "#410002",
|
||||
"primary": "#000000"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.editorial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface">
|
||||
<!-- SideNavBar (Desktop) -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
|
||||
<div class="mb-10 px-2">
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[13px] text-slate-500 uppercase tracking-widest mt-1">Personal Workspace</p>
|
||||
</div>
|
||||
<button class="mb-8 w-full bg-slate-900 text-slate-50 py-3 rounded-md font-semibold text-sm transition-opacity active:opacity-80">
|
||||
New Entry
|
||||
</button>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span class="text-sm">Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span class="text-sm">Tasks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-900 dark:text-slate-50 font-semibold border-r-2 border-slate-900 dark:border-slate-50 bg-slate-200/50 dark:bg-slate-800/50 rounded-l-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="text-sm">Notes</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span class="text-sm">Search</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="text-sm">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span class="text-sm">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar (Main Header) -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md flex justify-between items-center px-8 z-40 border-b border-slate-100 dark:border-slate-800">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-500">Workspace /</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-900">Notes</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-4 text-slate-500">
|
||||
<button class="material-symbols-outlined hover:text-slate-900 transition-colors" data-icon="notifications">notifications</button>
|
||||
<button class="material-symbols-outlined hover:text-slate-900 transition-colors" data-icon="apps">apps</button>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden bg-slate-200">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional woman with a minimalist aesthetic and soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDeJLr9mf2Uv-tRtBivLcWlh01nh3RRobcUz47SyEJxtBOKp7vph1ZGjWa-OtMkmT_drgJbXSNzgdzWe5Se3F_HWzYYH53S2Nr9UjduTJXG6a6lntf_J6TtWPTYsC7DUEdT7X598SOo0qGhzbj4gjsyDYxclnja9LgzF1FJ9SIhMywekoTN54rhSRnUC5e_vJSCbtOidnuj4Jp-ZYJZEHxBmQ1fP3PjDfIwkKupCa4pCYh3iSPo8hVwuxQKOE3208K74h-3y47m2UrM"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="max-w-6xl mx-auto px-12 py-16">
|
||||
<!-- Category: MEETING NOTES -->
|
||||
<section class="mb-20">
|
||||
<header class="mb-8">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400 mb-1">Category</p>
|
||||
<h2 class="text-20px font-semibold text-slate-900">MEETING NOTES</h2>
|
||||
</header>
|
||||
<div class="editorial-grid">
|
||||
<!-- Note Card -->
|
||||
<div class="group bg-surface-container-lowest p-8 rounded-md transition-all hover:bg-white hover:shadow-sm cursor-pointer border-l-4 border-slate-900">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 24, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">Q4 Product Roadmap Alignment</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
Discussed the core pillars for the upcoming quarter. Priority remains on user retention through the Monolith UI update. Key stakeholders agreed on the phased rollout strategy...
|
||||
</p>
|
||||
<div class="flex -space-x-2">
|
||||
<img class="w-6 h-6 rounded-full border-2 border-white" data-alt="Portrait of a creative professional in a bright studio environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD9sLg2dV3zUC4KSFx-dXTzP14s4q3ooR0PfejwR05ZL9bFtqWZCgIpGaBIh1hMid2ttsQGa8PB4yzgq7cKqfr9ZT168Rp5fytm_okUbAwmRIR31DbfrJI-QxyvdctDirxRGUy2SHio4qsYqAwd31fZzFdkh0vpUWUkUfAyhCHd2OwuDbN75nFbQCnNF5xFIJOblBqB10sJ-n2OBFpgJduvNeVvEZdz_k8vVqEK0iItT_Wx5X4jrDkb-og1n7hxVM0NNAupiRrhaR3J"/>
|
||||
<img class="w-6 h-6 rounded-full border-2 border-white" data-alt="Close up of a smiling woman with glasses in a minimalist workspace" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBc0JqnTvk9r8KjfCKAIvfLb9oDopBHZJlrAsC6nQPI6MvdJAwC-6D1m5Kev48iAY6JVUo_ye0dL6DMgpIQGAMknTIap44lh4bluz-rW8OyGQksfVpdDNOxOzh-kx9NQGRFb1Em617-47dCDeqUdZyw-IbYFNYK39xLOaPvSlGr3QsxbZ7Sn8De0VckFd6DHvrzb1szDjUCuJC-4_jsy6Ot1vRKy-7IIrtZY3rx3nPfQZ-t88Ir4AiWf85cstIU1Y2hIVhEkZP5H4lb"/>
|
||||
<div class="w-6 h-6 rounded-full bg-slate-100 border-2 border-white flex items-center justify-center text-[10px] font-bold text-slate-400">+2</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note Card -->
|
||||
<div class="group bg-surface-container-low p-8 rounded-md transition-all hover:bg-white hover:shadow-sm cursor-pointer border-l-4 border-transparent hover:border-slate-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 22, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">Sprint Retro: Project Apollo</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
High velocity maintained. Challenges with the animation engine identified. Action item: Sarah to review the CSS transitions by Friday...
|
||||
</p>
|
||||
</div>
|
||||
<!-- Note Card -->
|
||||
<div class="group bg-surface-container-low p-8 rounded-md transition-all hover:bg-white hover:shadow-sm cursor-pointer border-l-4 border-transparent hover:border-slate-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 19, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">Weekly Sync: Marketing</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
Focus on the editorial campaign launching next month. The "Quiet Authority" theme is resonating well with early test groups...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: PROJECT IDEAS -->
|
||||
<section class="mb-32">
|
||||
<header class="mb-8">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400 mb-1">Category</p>
|
||||
<h2 class="text-20px font-semibold text-slate-900">PROJECT IDEAS</h2>
|
||||
</header>
|
||||
<div class="editorial-grid">
|
||||
<!-- Note Card (Image Accent) -->
|
||||
<div class="group relative bg-surface-container-highest overflow-hidden rounded-md transition-all hover:shadow-lg cursor-pointer">
|
||||
<div class="h-32 w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover grayscale opacity-40 group-hover:opacity-60 transition-opacity" data-alt="Abstract minimalist architecture with sharp lines and deep shadows on a bright white surface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGkG6a0PGOFSzTFXQ4rMKs5pJoaeC4nF-wEEZSqVvpJNoSGj5FyQ9qOEyQM8S6wdSQemIALiSSdAFCckJhNW2JJ0T__fYqH8sfPaz6DRh_71kK5NgYVqDYo0rCR70lrb1WncAjxIjEvM1orv4nKf5BZQ7w9RYQvQeKGKxhU5kIs-kkNc15Mz9KCZ5YcV4gtelc5d4_AJfTok7NK2OnUij815lSL0b7iaxS02vRC1XAmiwqbMKzHFxUsZ8VbhVCnPQTYNfeY9wD48l0"/>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 15, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900" data-icon="lightbulb">lightbulb</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">Minimalist Portfolio Concept</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed line-clamp-2">
|
||||
Experimenting with 0% saturation and extreme negative space for the upcoming creative showcase...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note Card -->
|
||||
<div class="group bg-surface-container-low p-8 rounded-md transition-all hover:bg-white hover:shadow-sm cursor-pointer border-l-4 border-transparent hover:border-slate-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 12, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">AI Driven Content Curation</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
Using natural language processing to automatically categorize and tag editorial snippets within the workspace...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Sticky Bottom Input (Monolith Design) -->
|
||||
<div class="fixed bottom-0 right-0 w-[calc(100%-16rem)] p-8 z-50">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl rounded-xl shadow-[0px_20px_40px_rgba(15,23,42,0.08)] border border-slate-100/50 p-3 flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="add_circle">add_circle</span>
|
||||
</button>
|
||||
<input class="flex-1 bg-transparent border-none focus:ring-0 text-slate-800 placeholder-slate-400 text-sm py-2" placeholder="Capture a new thought..." type="text"/>
|
||||
<div class="flex items-center gap-2 pr-2">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-slate-900 transition-colors p-2" data-icon="tag">tag</button>
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-slate-900 transition-colors p-2" data-icon="attachment">attachment</button>
|
||||
<button class="bg-slate-900 text-slate-50 px-4 py-2 rounded-md text-xs font-bold uppercase tracking-wider transition-transform active:scale-95 ml-2">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Navigation Overlay (Suppressed as per rules for desktop focus, but available) -->
|
||||
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg px-6 py-4 flex justify-around items-center border-t border-slate-100 z-50">
|
||||
<button class="material-symbols-outlined text-slate-400" data-icon="format_list_bulleted">format_list_bulleted</button>
|
||||
<button class="material-symbols-outlined text-slate-400" data-icon="check_circle">check_circle</button>
|
||||
<button class="material-symbols-outlined text-slate-900" data-icon="description">description</button>
|
||||
<button class="material-symbols-outlined text-slate-400" data-icon="search">search</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/notes_view/screen.png
Normal file
BIN
design/notes_view/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
251
design/search_mobile/code.html
Normal file
251
design/search_mobile/code.html
Normal file
@@ -0,0 +1,251 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,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": {
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-container": "#eceef0",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"surface": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"inverse-surface": "#2d3133",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary": "#505f76",
|
||||
"on-surface": "#191c1e",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"tertiary": "#7d000f",
|
||||
"outline": "#777777",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-primary-container": "#ffffff",
|
||||
"on-error-container": "#410002",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"primary-fixed": "#565e74",
|
||||
"secondary-fixed-dim": "#9cacc5"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.375rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.ease-monolith { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface">
|
||||
<!-- Top Navigation Anchor (from JSON) -->
|
||||
<header class="w-full sticky top-0 bg-[#f7f9fb] z-50">
|
||||
<div class="flex items-center justify-between px-6 py-4 w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-slate-900 cursor-pointer">menu</span>
|
||||
<h1 class="text-xl font-bold tracking-tighter text-slate-900">MONOLITH</h1>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden bg-slate-200">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="Professional editorial headshot of a woman with minimalist style, clean lighting, and neutral grey background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuALTh2K4V88FdGjNLi_k6yPmkhh61jneZKuhk_arotiUd_qmGlnJt5Rk6kAaA_sRGwfEAy4JY5PG87AReDv0cA3edJ_Sa7RWX8COwfOuOwC42LqTP9dShb8DVc4bUq6dbyLYDssp8Cg-5PiVi5GdejrCvBdrTjxBHXpX7whcx51eQxgdXZudo8o4BrcwcWltFU_EaoxRgzMj-edSwzRuUqyI6GpE0uNeEeL4HAXckLSlDPkchAY6nSWTE1m5-5xYXZq24ApuwLr8oJS"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-screen-md mx-auto px-6 pb-24">
|
||||
<!-- Search Header Section -->
|
||||
<section class="mt-8 mb-12">
|
||||
<p class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 mb-2">Omni-Search</p>
|
||||
<h2 class="text-[32px] font-bold tracking-tight text-slate-900 leading-none">Find Anything.</h2>
|
||||
<!-- Monolith Input Field -->
|
||||
<div class="mt-8 relative group">
|
||||
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-slate-400">search</span>
|
||||
</div>
|
||||
<input class="w-full h-16 pl-14 pr-6 bg-surface-container-low border-none rounded-md focus:ring-2 focus:ring-slate-900 text-[16px] transition-all duration-200 placeholder:text-slate-400" placeholder="Search through records..." type="text" value="Project Q4"/>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Search Results: Categorized -->
|
||||
<div class="space-y-12">
|
||||
<!-- Category: Lists -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 flex justify-between items-center">
|
||||
Lists
|
||||
<span class="text-[11px] bg-slate-200 px-2 py-0.5 rounded-full text-slate-700">2 Matches</span>
|
||||
</h3>
|
||||
<div class="space-y-1">
|
||||
<!-- Result Card -->
|
||||
<div class="group flex items-center p-4 bg-surface-container-lowest rounded-md hover:bg-slate-100 transition-colors cursor-pointer">
|
||||
<div class="w-10 h-10 flex items-center justify-center bg-slate-100 rounded-md mr-4 text-slate-600">
|
||||
<span class="material-symbols-outlined">format_list_bulleted</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-[16px] font-semibold text-slate-900">Project Q4 - Strategy</h4>
|
||||
<p class="text-[13px] text-slate-500">Last updated 2 days ago • Editorial Team</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</div>
|
||||
<div class="group flex items-center p-4 bg-surface-container-lowest rounded-md hover:bg-slate-100 transition-colors cursor-pointer">
|
||||
<div class="w-10 h-10 flex items-center justify-center bg-slate-100 rounded-md mr-4 text-slate-600">
|
||||
<span class="material-symbols-outlined">format_list_bulleted</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-[16px] font-semibold text-slate-900">Project Q4 - Budget Allocations</h4>
|
||||
<p class="text-[13px] text-slate-500">Last updated yesterday • Finance</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category: Tasks -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 flex justify-between items-center">
|
||||
Tasks
|
||||
<span class="text-[11px] bg-slate-200 px-2 py-0.5 rounded-full text-slate-700">1 Match</span>
|
||||
</h3>
|
||||
<div class="group flex items-center p-4 bg-surface-container-lowest rounded-md hover:bg-slate-100 transition-colors cursor-pointer">
|
||||
<div class="w-10 h-10 flex items-center justify-center bg-slate-100 rounded-md mr-4 text-slate-600">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-[16px] font-semibold text-slate-900">Approve Project Q4 wireframes</h4>
|
||||
<p class="text-[13px] text-slate-500">Due tomorrow • High Priority</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 transition-opacity">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category: Notes -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-['Inter'] font-semibold tracking-[0.05em] uppercase text-[13px] text-slate-500 flex justify-between items-center">
|
||||
Notes
|
||||
<span class="text-[11px] bg-slate-200 px-2 py-0.5 rounded-full text-slate-700">3 Matches</span>
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<!-- Bento-style Card -->
|
||||
<div class="p-6 bg-surface-container-lowest rounded-md hover:bg-slate-100 transition-colors cursor-pointer group">
|
||||
<div class="flex justify-between mb-4">
|
||||
<span class="material-symbols-outlined text-slate-400">description</span>
|
||||
<span class="text-[12px] font-medium text-slate-400">Oct 12, 2023</span>
|
||||
</div>
|
||||
<h4 class="text-[18px] font-bold text-slate-900 mb-2">Project Q4: Kickoff Meeting</h4>
|
||||
<p class="text-[14px] text-slate-600 line-clamp-2">Discussion regarding the new visual hierarchy and editorial-first approach for the monolith system...</p>
|
||||
</div>
|
||||
<div class="p-6 bg-surface-container-low rounded-md hover:bg-slate-200/50 transition-colors cursor-pointer group">
|
||||
<div class="flex justify-between mb-4">
|
||||
<span class="material-symbols-outlined text-slate-400">description</span>
|
||||
<span class="text-[12px] font-medium text-slate-400">Sep 28, 2023</span>
|
||||
</div>
|
||||
<h4 class="text-[18px] font-bold text-slate-900 mb-2">Stakeholder Feedback - Q4</h4>
|
||||
<p class="text-[14px] text-slate-600 line-clamp-2">Initial feedback focuses on the elimination of borders and reliance on tonal shifts for sectioning...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Glassmorphism Bottom Navigation (Responsive Pivot) -->
|
||||
<nav class="fixed bottom-0 left-0 right-0 h-20 bg-surface/80 backdrop-blur-xl md:hidden z-50 flex items-center justify-around px-8">
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">format_list_bulleted</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-900 transition-colors scale-110" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">search</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Sidebar Navigation Shell (Hidden as per request, visible on large screens) -->
|
||||
<aside class="hidden md:flex fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] w-80 shadow-[0px_20px_40px_rgba(15,23,42,0.06)]">
|
||||
<div class="px-8 mb-10 flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-md bg-slate-900 flex items-center justify-center">
|
||||
<span class="text-white font-bold text-xl">M</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold text-slate-900 leading-tight">Editorial Lead</span>
|
||||
<span class="text-[12px] text-slate-500">monolith.editorial@app.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center text-slate-600 hover:bg-slate-200 mx-4 my-1 px-4 py-3 rounded-md transition-colors font-['Inter'] text-[16px]" href="#">
|
||||
<span class="material-symbols-outlined mr-4">format_list_bulleted</span> Lists
|
||||
</a>
|
||||
<a class="flex items-center text-slate-600 hover:bg-slate-200 mx-4 my-1 px-4 py-3 rounded-md transition-colors font-['Inter'] text-[16px]" href="#">
|
||||
<span class="material-symbols-outlined mr-4">check_circle</span> Tasks
|
||||
</a>
|
||||
<a class="flex items-center text-slate-600 hover:bg-slate-200 mx-4 my-1 px-4 py-3 rounded-md transition-colors font-['Inter'] text-[16px]" href="#">
|
||||
<span class="material-symbols-outlined mr-4">description</span> Notes
|
||||
</a>
|
||||
<!-- Active State -->
|
||||
<a class="flex items-center bg-slate-900 text-slate-50 mx-4 my-1 px-4 py-3 rounded-md transition-all ease-monolith font-['Inter'] text-[16px]" href="#">
|
||||
<span class="material-symbols-outlined mr-4" style="font-variation-settings: 'FILL' 1;">search</span> Search
|
||||
</a>
|
||||
<a class="flex items-center text-slate-600 hover:bg-slate-200 mx-4 my-1 px-4 py-3 rounded-md transition-colors font-['Inter'] text-[16px]" href="#">
|
||||
<span class="material-symbols-outlined mr-4">settings</span> User Settings
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-8 mt-auto">
|
||||
<div class="p-4 bg-slate-100 rounded-md">
|
||||
<p class="text-[12px] text-slate-500 font-medium uppercase tracking-wider mb-2">Storage Usage</p>
|
||||
<div class="w-full bg-slate-200 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-slate-900 h-full w-[65%]"></div>
|
||||
</div>
|
||||
<p class="mt-2 text-[11px] text-slate-400">8.2 GB of 12 GB used</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</body></html>
|
||||
BIN
design/search_mobile/screen.png
Normal file
BIN
design/search_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
282
design/search_page/code.html
Normal file
282
design/search_page/code.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-background": "#191c1e",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary": "#7d000f",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"secondary": "#505f76",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"surface-container": "#eceef0",
|
||||
"on-surface-variant": "#474747",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#333b50",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"tertiary-container": "#da3437",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"surface-tint": "#565e74",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-surface": "#191c1e",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface": "#f7f9fb",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"outline": "#777777",
|
||||
"on-error-container": "#410002",
|
||||
"primary": "#000000"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface antialiased">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
|
||||
<div class="mb-12">
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[13px] font-normal text-slate-500">Personal Workspace</p>
|
||||
</div>
|
||||
<button class="mb-8 bg-slate-900 text-slate-50 py-3 px-4 rounded-md text-sm font-semibold flex items-center justify-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
New Entry
|
||||
</button>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<!-- Navigation Items -->
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">format_list_bulleted</span>
|
||||
<span class="text-[14px]">Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
<span class="text-[14px]">Tasks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
<span class="text-[14px]">Notes</span>
|
||||
</a>
|
||||
<!-- Active Search Tab -->
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-900 dark:text-slate-50 font-semibold border-r-2 border-slate-900 dark:border-slate-50 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
<span class="text-[14px]">Search</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-8 border-t border-slate-100 dark:border-slate-800 space-y-1">
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 hover:text-slate-700 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[18px]">settings</span>
|
||||
<span class="text-[14px]">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 hover:text-slate-700 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[18px]">help_outline</span>
|
||||
<span class="text-[14px]">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md flex justify-between items-center px-8 z-40 border-b border-slate-100 dark:border-slate-800">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400">Directory</span>
|
||||
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-900 dark:text-slate-50">Search Results</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-transform active:scale-100 scale-95">notifications</button>
|
||||
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-transform active:scale-100 scale-95">apps</button>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200 overflow-hidden">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="close-up portrait of a professional individual with soft studio lighting and a clean neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAcqS49711lkA9-XFrP3HUPslSllhGhqgehHEIzoCZqvdYl7MUCu7FTXtaRly-jBzL4SBzO3ab7s1nYmPYi1X6hKW6vUNmXCSwzYsnOs-YLpxy9WL77RIoLI9VYGDpqosuVQbMOoXab7TwhgwUK1E9qBt76fFGqJgaTmdcc_odpIv3lWTt-vggwrjbzS0pgE94E_IMH9vP11nmoB3PlJjhhGDJvwnPmCBVeqxK4y6bl4MwDunbP6vmvDetMK06CYl0UGavsEL8dfr3C"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="max-w-5xl mx-auto px-8 py-12">
|
||||
<!-- Hero Search Input -->
|
||||
<div class="mb-16">
|
||||
<div class="relative group">
|
||||
<span class="absolute left-0 top-1/2 -translate-y-1/2 material-symbols-outlined text-slate-400 text-3xl">search</span>
|
||||
<input class="w-full bg-transparent border-none border-b-2 border-slate-100 focus:ring-0 focus:border-slate-900 text-5xl font-semibold tracking-tight text-slate-900 dark:text-slate-50 pl-12 py-4 transition-colors" placeholder="Search anything..." type="text" value="Design"/>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-3">
|
||||
<span class="px-3 py-1 bg-slate-900 text-slate-50 rounded-full text-xs font-medium">All Results</span>
|
||||
<span class="px-3 py-1 bg-surface-container-low text-slate-500 rounded-full text-xs font-medium hover:bg-slate-200 transition-colors cursor-pointer">Last 7 Days</span>
|
||||
<span class="px-3 py-1 bg-surface-container-low text-slate-500 rounded-full text-xs font-medium hover:bg-slate-200 transition-colors cursor-pointer">Attachments</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Content Grid -->
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Notes Section (Editorial Highlight) -->
|
||||
<div class="col-span-12 lg:col-span-8 space-y-6">
|
||||
<div class="flex flex-col gap-1 mb-2">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400">Notes</span>
|
||||
<h2 class="text-2xl font-semibold text-slate-900">Design thoughts</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Note Card 1 -->
|
||||
<div class="group bg-surface-container-low p-6 rounded-md hover:bg-surface-container-high transition-colors cursor-pointer">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="material-symbols-outlined text-slate-400">description</span>
|
||||
<span class="text-xs text-slate-400">2h ago</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-900 mb-2">Interface Heuristics</h3>
|
||||
<p class="text-sm text-slate-600 leading-relaxed mb-4">Exploring the relationship between negative space and cognitive load in minimalist editorial layouts...</p>
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-300 overflow-hidden">
|
||||
<img alt="Avatar" data-alt="closeup of person's face in soft daylight" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGQZuvNWbAKwkoR3TeHoXXUQxjsuGC75wJ3XxAq2S26zsnQqG7HQczIoZsLyA4y_DjfddhyH1Xx2OJDe3SjcR5-UeJ1pLHNEkHG9aR5ZIfXTrJPZxiCRqg1UCp5gEOzPnb702V8KSj62_ON5ggI-aI5HAXGkUVU5yIiuT_olVsczd-6hZr9ES6ixR31Rx76JoNEc1YpjzqoYg7029LBCWPO6kMhZQCFQcUtuOdkOTImFsaLKB09K4ANvRoq5QuBNHP2HBR82BxnClX"/>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-400 overflow-hidden">
|
||||
<img alt="Avatar" data-alt="professional woman portrait in modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8DPH9HKbmLvYvJT49yJAMJxKRjjhQUWtFcSWRuQ5sKOBdkI_z7lWLX2NQALQNzwwfb3Uv8hcj74tPE9KL2XkxpTtQwnMfLn-4nih5ArfJMXGx-xtFDTNnPmd8OaOebl1d4Tk41PIqNskKQ_HV28G9I2BN2tyTp7THlZa5k4yUJ_vOwt_WqrcuuWwVikhQAXF-nZVy_ThSfXBtpfjj0ZY1UVpVi1YS3rwy8WLH61J7crj7Ao_e6MohDtvMB1PsWd0BPaO0oJ7Ljj8x"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note Card 2 -->
|
||||
<div class="group bg-surface-container-low p-6 rounded-md hover:bg-surface-container-high transition-colors cursor-pointer">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="material-symbols-outlined text-slate-400">description</span>
|
||||
<span class="text-xs text-slate-400">Yesterday</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-900 mb-2">Monolith System</h3>
|
||||
<p class="text-sm text-slate-600 leading-relaxed mb-4">Core principles for the new design system focusing on slate palettes and glassmorphism anchors...</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-0.5 bg-slate-200 text-slate-600 rounded text-[10px] font-bold uppercase">System</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Visual Search Result -->
|
||||
<div class="relative h-64 w-full rounded-md overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-slate-900/40 group-hover:bg-slate-900/20 transition-colors duration-500 z-10"></div>
|
||||
<img alt="Design inspiration" class="w-full h-full object-cover scale-105 group-hover:scale-100 transition-transform duration-700" data-alt="minimalist architecture interior with clean white walls concrete floors and dramatic sunlight casting sharp shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAqyPQcg_4qsjEiUWQmrDC_aYKzOS6Rh-FalQPpkM7tZMPiQtXHmbTNucxCBBj4A-d61Reg2m_tl4htElpo_SElfSnDVWyqczXkKfbZuTrWdk6HKUyE0fs4t7Fw0qsaSqBfYck8f3PVxqiYY51uqkeYv7CjY449NLgCZ8i4BEOOkzScLC2lemT8HeuWETEzy7KPIlCfzlrfuc2lDA4tS4Ecwxr0nHVVgYh-GCsS3C3FD04JLBGgyLb8f9bZffw34ATsJwAT9atfATxs"/>
|
||||
<div class="absolute bottom-6 left-6 z-20">
|
||||
<span class="text-[11px] font-bold uppercase tracking-widest text-white/70 mb-1 block">Visual Inspiration</span>
|
||||
<h3 class="text-2xl font-bold text-white tracking-tight">Editorial Spatial Study</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Tasks & Lists -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-12">
|
||||
<!-- Tasks Section -->
|
||||
<section>
|
||||
<div class="flex flex-col gap-1 mb-6">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400">Tasks</span>
|
||||
<h2 class="text-xl font-semibold text-slate-900">Active Items</h2>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4 py-3 group cursor-pointer border-b border-transparent hover:border-slate-100 transition-all">
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-slate-900 transition-colors">check_box</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-slate-900">Fix navigation bug</p>
|
||||
<p class="text-xs text-slate-500">Colectivo Mobile App</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 py-3 group cursor-pointer border-b border-transparent hover:border-slate-100 transition-all">
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-slate-900 transition-colors">check_box_outline_blank</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-slate-900">Finalize search UI</p>
|
||||
<p class="text-xs text-slate-500">Workspace V2</p>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-red-500 uppercase">High</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Lists Section -->
|
||||
<section>
|
||||
<div class="flex flex-col gap-1 mb-6">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400">Lists</span>
|
||||
<h2 class="text-xl font-semibold text-slate-900">Collections</h2>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="p-4 bg-surface-container-low rounded-md flex items-center justify-between hover:bg-slate-200/50 transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-slate-900">shopping_cart</span>
|
||||
<span class="text-sm font-semibold">Grocery list</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-400">12 items</span>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-container-low rounded-md flex items-center justify-between hover:bg-slate-200/50 transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-slate-900">bookmarks</span>
|
||||
<span class="text-sm font-semibold">Reading list</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-400">4 items</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quick Action Card -->
|
||||
<div class="p-8 bg-slate-900 rounded-md text-slate-50">
|
||||
<span class="material-symbols-outlined text-4xl mb-4 text-slate-400">bolt</span>
|
||||
<h4 class="text-lg font-bold mb-2">Search Insights</h4>
|
||||
<p class="text-sm text-slate-400 mb-6 leading-relaxed">Search is indexing 452 items across your workspace. Use keyboard shortcuts to browse faster.</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-1 bg-slate-800 rounded text-[10px] font-mono border border-slate-700">CMD</span>
|
||||
<span class="px-2 py-1 bg-slate-800 rounded text-[10px] font-mono border border-slate-700">K</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Glassmorphic Search Bottom Anchor -->
|
||||
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 w-full max-w-lg px-6 z-50">
|
||||
<div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl rounded-full p-2 shadow-[0px_20px_40px_rgba(15,23,42,0.08)] flex items-center gap-2">
|
||||
<div class="flex-1 flex items-center px-4 gap-3">
|
||||
<span class="material-symbols-outlined text-slate-400">auto_awesome</span>
|
||||
<span class="text-sm text-slate-500">Ask AI about your workspace...</span>
|
||||
</div>
|
||||
<button class="bg-slate-900 text-white w-10 h-10 rounded-full flex items-center justify-center hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/search_page/screen.png
Normal file
BIN
design/search_page/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
258
design/settings_1/code.html
Normal file
258
design/settings_1/code.html
Normal file
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Colectivo - Settings</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"on-background": "#191c1e",
|
||||
"surface": "#f7f9fb",
|
||||
"surface-container": "#eceef0",
|
||||
"secondary": "#505f76",
|
||||
"tertiary": "#7d000f",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary-container": "#333b50",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"surface-tint": "#565e74",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-primary": "#dae2fd",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-surface": "#191c1e",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"background": "#f7f9fb",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"primary": "#000000",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-error-container": "#410002",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"outline": "#777777",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"surface-dim": "#d8dadc",
|
||||
"outline-variant": "#c6c6c6"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface antialiased">
|
||||
<!-- Predicted SideNavBar Component -->
|
||||
<nav class="bg-slate-100 dark:bg-slate-900 h-full w-64 fixed left-0 top-0 flex flex-col justify-between p-6 z-20">
|
||||
<div>
|
||||
<!-- Header Section -->
|
||||
<div class="mb-10">
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">Household</h1>
|
||||
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-500 mt-1">Collaborative Space</p>
|
||||
</div>
|
||||
<!-- Navigation Tabs -->
|
||||
<div class="space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Tasks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Notes</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Search</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Section -->
|
||||
<div class="space-y-1">
|
||||
<a class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md flex items-center gap-3 px-3 py-2 transition-colors duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-wider">Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Area -->
|
||||
<div class="ml-64 min-h-screen">
|
||||
<!-- Predicted TopAppBar Component -->
|
||||
<header class="bg-slate-50 dark:bg-slate-950 sticky top-0 z-10 flex justify-between items-center px-8 py-4 ml-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="flex items-center justify-center w-10 h-10 hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-slate-900 dark:text-slate-50">arrow_back</span>
|
||||
</button>
|
||||
<h2 class="text-[20px] font-semibold text-slate-900 dark:text-slate-50">Settings</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 text-slate-500 hover:opacity-80"><span class="material-symbols-outlined">notifications</span></button>
|
||||
<button class="p-2 text-slate-500 hover:opacity-80"><span class="material-symbols-outlined">help_outline</span></button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Settings Canvas -->
|
||||
<main class="max-w-3xl mx-auto px-8 py-16">
|
||||
<div class="flex flex-col space-y-16">
|
||||
<!-- Avatar Section -->
|
||||
<section class="space-y-8">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-16 h-16 rounded-full bg-slate-700 flex items-center justify-center text-white font-semibold text-lg">
|
||||
AG
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<button class="text-slate-900 font-semibold text-sm hover:underline text-left">Change avatar</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Avatar Picker Segmented Control -->
|
||||
<div class="bg-surface-container-low p-1 rounded-md inline-flex w-full max-w-md">
|
||||
<button class="flex-1 py-2 text-[13px] font-semibold rounded-md bg-white text-slate-900 shadow-sm">Initials</button>
|
||||
<button class="flex-1 py-2 text-[13px] font-semibold text-slate-500 hover:text-slate-900 transition-colors">Emoji</button>
|
||||
<button class="flex-1 py-2 text-[13px] font-semibold text-slate-500 hover:text-slate-900 transition-colors">Photo</button>
|
||||
</div>
|
||||
<!-- Emoji Grid -->
|
||||
<div class="bg-surface-container-low p-6 rounded-md">
|
||||
<div class="grid grid-cols-8 gap-4">
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 bg-white rounded-md shadow-sm">🐸</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🐼</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🦊</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🐨</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🦁</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🐯</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🐻</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🦋</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🌵</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🌻</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍀</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🌈</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">⭐</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🔥</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">💎</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎯</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎸</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎹</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎨</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">📚</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">✈️</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🏔️</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🌊</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎭</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍕</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍜</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍣</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">☕</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍎</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🥑</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🍓</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎂</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🏠</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🚲</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🛹</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">⚽</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🏄</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🧘</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🎮</button>
|
||||
<button class="text-2xl hover:scale-110 transition-transform p-2 hover:bg-white rounded-md">🤿</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Display Name Section -->
|
||||
<section class="space-y-4">
|
||||
<label class="text-[13px] font-semibold tracking-[0.15em] text-slate-500 block uppercase">DISPLAY NAME</label>
|
||||
<div class="space-y-2">
|
||||
<input class="w-full bg-surface-container-low border-none rounded-md px-4 py-3 text-slate-900 focus:ring-2 focus:ring-slate-900 transition-all outline-none text-base" type="text" value="Ana García"/>
|
||||
<p class="text-[13px] text-slate-400">Changes saved automatically</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Language Section -->
|
||||
<section class="space-y-4">
|
||||
<label class="text-[13px] font-semibold tracking-[0.15em] text-slate-500 block uppercase">LANGUAGE</label>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-6 py-2 bg-slate-900 text-slate-50 rounded-md text-sm font-semibold">English</button>
|
||||
<button class="px-6 py-2 bg-transparent text-slate-500 hover:bg-surface-container-low rounded-md text-sm font-semibold transition-colors">Español</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Account Section -->
|
||||
<section class="space-y-4">
|
||||
<label class="text-[13px] font-semibold tracking-[0.15em] text-slate-500 block uppercase">ACCOUNT</label>
|
||||
<a class="group block p-5 bg-surface-container-low rounded-md hover:bg-surface-container transition-colors" href="#">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-slate-900 font-semibold flex items-center gap-1">
|
||||
Email & password
|
||||
<span class="material-symbols-outlined text-base">arrow_forward</span>
|
||||
</p>
|
||||
<p class="text-[13px] text-slate-500 mt-1">Managed in Keycloak</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-slate-900 transition-colors">open_in_new</span>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
<!-- Danger Zone -->
|
||||
<section class="space-y-4 pt-8">
|
||||
<label class="text-[13px] font-semibold tracking-[0.15em] text-red-500 block uppercase">DANGER ZONE</label>
|
||||
<button class="px-6 py-3 border border-red-500/20 text-red-500 hover:bg-red-500/5 rounded-md text-sm font-semibold transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm">delete</span>
|
||||
Delete account
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/settings_1/screen.png
Normal file
BIN
design/settings_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
262
design/settings_2/code.html
Normal file
262
design/settings_2/code.html
Normal file
@@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Colectivo Settings</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-primary": "#bec6e0",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"surface-container": "#eceef0",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"surface-tint": "#565e74",
|
||||
"tertiary": "#7d000f",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"tertiary-container": "#da3437",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-background": "#191c1e",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"on-surface": "#191c1e",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"primary": "#000000",
|
||||
"surface-dim": "#d8dadc",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-surface-variant": "#474747",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"secondary": "#505f76",
|
||||
"on-error-container": "#410002",
|
||||
"on-primary": "#dae2fd",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-error": "#ffffff",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"on-primary-container": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"background": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"surface": "#f7f9fb",
|
||||
"outline": "#777777"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface flex min-h-screen">
|
||||
<!-- Shared SideNavBar -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-950 flex flex-col py-8 px-4 z-20">
|
||||
<div class="mb-12 px-2">
|
||||
<h1 class="text-xl font-semibold uppercase tracking-widest text-slate-900 dark:text-slate-50">The Monolith</h1>
|
||||
<p class="text-xs text-slate-500 font-medium mt-1">Collaborative Space</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<!-- Inactive -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 font-medium hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span>Lists</span>
|
||||
</a>
|
||||
<!-- Inactive -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 font-medium hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span>Tasks</span>
|
||||
</a>
|
||||
<!-- Inactive -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 font-medium hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span>Notes</span>
|
||||
</a>
|
||||
<!-- Inactive -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 font-medium hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors duration-200 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto px-2 flex items-center gap-3 pt-4">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="minimalist household avatar icon with geometric shapes in monochromatic grey" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDbWbkHnNMCQbWAobU-xC3H3mzv9lWEth-HWwdVtQ-WbM8oEA3Iuuou-Is4OdxVOshnjkR1gK_O8f4hfIrDWf4LmUDWWnBbbH7kI25e42GIDqJIsx3N-_OgkZv6vzyNyYyP0kC6SKuVu-F2kzoEXl68dumKKBb7wrHXs1CLTul6j82ZZrrAsqcgZHZqZTmnal7q0g5oD-0kEx-5Drn-9Z0yd8ix9-nkZQg0wyubNAwxeI42rylzFd85W9SupXTdcB44cT0u_DKbtgoa"/>
|
||||
</div>
|
||||
<div class="text-sm font-semibold text-slate-900">Household</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 ml-64 min-h-screen bg-surface">
|
||||
<!-- Shared TopAppBar -->
|
||||
<header class="flex justify-between items-center w-full pl-8 pr-8 py-6 sticky top-0 bg-surface/80 backdrop-blur-md z-10">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-colors" data-icon="arrow_back">arrow_back</button>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold uppercase tracking-widest text-slate-500 leading-none">Colectivo</span>
|
||||
<h2 class="font-['Inter'] text-2xl font-semibold text-slate-900 leading-tight">Settings</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined opacity-80 hover:opacity-100 text-slate-900" data-icon="notifications">notifications</button>
|
||||
<button class="material-symbols-outlined opacity-80 hover:opacity-100 text-slate-900" data-icon="account_circle">account_circle</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Settings Container -->
|
||||
<div class="max-w-2xl mx-auto py-12 px-6">
|
||||
<!-- Avatar Section -->
|
||||
<section class="flex flex-col items-center mb-16">
|
||||
<div class="relative group">
|
||||
<div class="w-24 h-24 rounded-full bg-slate-700 flex items-center justify-center text-2xl font-semibold text-white mb-4">
|
||||
AG
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">Change avatar</button>
|
||||
</section>
|
||||
<!-- Segmented Control & Emoji Grid -->
|
||||
<section class="mb-16">
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="bg-surface-container-low p-1 rounded-lg flex gap-1">
|
||||
<button class="px-6 py-1.5 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">Initials</button>
|
||||
<button class="px-6 py-1.5 text-sm font-semibold bg-white text-slate-900 rounded-md shadow-sm">Emoji</button>
|
||||
<button class="px-6 py-1.5 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">Photo</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low rounded-xl p-6">
|
||||
<div class="grid grid-cols-8 gap-4 justify-items-center">
|
||||
<!-- Emoji Grid -->
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🐸</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🐼</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🦊</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🐨</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🦁</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🐯</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🐻</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🦋</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🌵</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🌻</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🍀</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🌈</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">⭐</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🔥</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">💎</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🎯</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🎸</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🎨</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">📚</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">✈️</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🏔️</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🌊</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🍕</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🍜</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🍣</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">☕</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🍎</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🥑</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🏠</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🚲</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">⚽</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🎮</button>
|
||||
<button class="text-2xl hover:scale-125 transition-transform">🤿</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Form Section: Display Name -->
|
||||
<section class="mb-12">
|
||||
<header class="mb-3">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-500">DISPLAY NAME</span>
|
||||
</header>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-low border-none rounded-md px-4 py-3 text-slate-900 focus:ring-2 focus:ring-slate-900 transition-all font-medium" type="text" value="Ana García"/>
|
||||
</div>
|
||||
<p class="mt-2 text-[13px] text-slate-400">Changes saved automatically</p>
|
||||
</section>
|
||||
<!-- Form Section: Language -->
|
||||
<section class="mb-16">
|
||||
<header class="mb-3">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-500">LANGUAGE</span>
|
||||
</header>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-5 py-2 rounded-full bg-slate-900 text-white text-sm font-medium">English</button>
|
||||
<button class="px-5 py-2 rounded-full bg-surface-container-low text-slate-500 hover:bg-slate-200 transition-colors text-sm font-medium">Español</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Form Section: Account -->
|
||||
<section class="mb-16">
|
||||
<header class="mb-3">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-500">ACCOUNT</span>
|
||||
</header>
|
||||
<div class="bg-surface-container-low rounded-xl p-6 group cursor-pointer hover:bg-surface-container-high transition-colors">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-base font-semibold text-slate-900">Email & password <span class="ml-1 text-slate-400">→</span></p>
|
||||
<p class="text-[13px] text-slate-500 mt-0.5">Managed in Keycloak</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="lock">lock</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Danger Zone -->
|
||||
<section class="pt-8 border-t border-transparent">
|
||||
<header class="mb-4">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-red-500">DANGER ZONE</span>
|
||||
</header>
|
||||
<div class="bg-red-50/50 dark:bg-red-950/10 p-6 rounded-xl">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="pr-8">
|
||||
<h4 class="text-sm font-semibold text-slate-900">Delete Account</h4>
|
||||
<p class="text-[13px] text-slate-500 mt-1 leading-relaxed">Permanently delete your profile and all associated data. This action is irreversible.</p>
|
||||
</div>
|
||||
<button class="px-4 py-2 text-sm font-semibold text-red-500 hover:bg-red-500 hover:text-white transition-all duration-200 rounded-md">Delete account</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Glassmorphic Search / Tool (Optional enhancement for 'The Monolith' feel) -->
|
||||
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 w-[400px] hidden md:flex items-center bg-white/80 backdrop-blur-xl px-4 py-3 rounded-full shadow-2xl z-50 border border-slate-100">
|
||||
<span class="material-symbols-outlined text-slate-400" data-icon="command">keyboard_command_key</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm flex-1 placeholder-slate-400 text-slate-900" placeholder="Search settings or tools..." type="text"/>
|
||||
<div class="flex gap-1">
|
||||
<span class="px-1.5 py-0.5 rounded bg-slate-100 text-[10px] font-bold text-slate-500">⌘</span>
|
||||
<span class="px-1.5 py-0.5 rounded bg-slate-100 text-[10px] font-bold text-slate-500">K</span>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/settings_2/screen.png
Normal file
BIN
design/settings_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
210
design/shopping_session_1/code.html
Normal file
210
design/shopping_session_1/code.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Colectivo - Shopping Session</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary": "#505f76",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed": "#565e74",
|
||||
"primary": "#000000",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-surface": "#191c1e",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-primary": "#dae2fd",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#333b50",
|
||||
"on-error-container": "#410002",
|
||||
"background": "#f7f9fb",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"outline": "#777777",
|
||||
"surface": "#f7f9fb",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"on-surface-variant": "#474747",
|
||||
"error-container": "#ffdad6",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary": "#7d000f",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"surface-tint": "#565e74",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-background": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface selection:bg-slate-200">
|
||||
<!-- Shopping Session Header -->
|
||||
<header class="sticky top-0 z-40 bg-surface/80 backdrop-blur-xl flex justify-between items-center h-16 px-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="flex items-center justify-center w-10 h-10 -ml-2 text-slate-900 active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined text-2xl">close</span>
|
||||
</button>
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900">Compra semanal</h1>
|
||||
</div>
|
||||
<!-- Presence Avatars -->
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait of a young woman with a friendly expression in soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBuiajlGpJ58EHg6U1cJmoIbhDPPmTK52pA7ESu6mENnJ7kYam0DzV8i-XwjIATEBBX0Po2kCssCR9Hum120lFkeCeqTxUNtVtnbJ_i6K6z0dKwcwjpY78xxhdVtQ0d9A2pERSHrLUKTduSTRjfA2-62yvg3pUruGxhcMGTBTYnfovlBAh3h28C5EiNNsmmt9WvZvylSs3SYyUF--9IQnoM2o-b4P68SRfpW3GHMhla5T1mxUROu_JnOCAodesYM6AOfkhFVO7WjiAH"/>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait of a smiling man with clean minimalist aesthetic and soft shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDN3-1EK1PYMbJnnqUv-q7VtJUNFUJ9DHSMEjxu6m3OI-480NZ-jabSYygkzIvoEEkEgr9ziN1viVBmJriK3x9Eyz4ECh6WxzKpFzYRTO_F2YPs42BGMz4ZdhqRv_BCN_CLCOw1_fSNAqQo0CYXPa8RzRmK7L4m_hBJ8HJBov9inRKzO669GpZ3Rgq6289vvhbyBp9JiZsWNfQQDNvBl_sLrwr-UQiO99u_cmjuYVT3gXbCsHXO2pSE5YYPwkX1xCqftXxdFY5DUPdE"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-2xl mx-auto px-6 pb-32 pt-4">
|
||||
<!-- Active Items Section -->
|
||||
<section class="space-y-2">
|
||||
<header class="mb-4">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-500">To buy</p>
|
||||
</header>
|
||||
<!-- Item: Whole milk -->
|
||||
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-medium">Whole milk 1L</p>
|
||||
<p class="text-xs text-slate-400">Dairy • Essential</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 text-slate-400">
|
||||
<span class="material-symbols-outlined text-xl">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item: Bread -->
|
||||
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-medium">Bread</p>
|
||||
<p class="text-xs text-slate-400">Bakery • Fresh</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 text-slate-400">
|
||||
<span class="material-symbols-outlined text-xl">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item: Eggs 12 uds -->
|
||||
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-medium">Eggs 12 uds</p>
|
||||
<p class="text-xs text-slate-400">Protein • Large</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 text-slate-400">
|
||||
<span class="material-symbols-outlined text-xl">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item: Avocados -->
|
||||
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-medium">Avocados</p>
|
||||
<p class="text-xs text-slate-400">Produce • Pack of 3</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 text-slate-400">
|
||||
<span class="material-symbols-outlined text-xl">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Divider & Checked Items -->
|
||||
<section class="mt-12 space-y-2">
|
||||
<header class="mb-4 flex items-center gap-4">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-400">Checked</p>
|
||||
<div class="h-[1px] flex-grow bg-slate-200"></div>
|
||||
</header>
|
||||
<!-- Checked Item: Butter 250g -->
|
||||
<div class="flex items-center opacity-40 grayscale min-h-[56px] px-4">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input checked="" class="w-6 h-6 rounded border-slate-300 text-slate-400 focus:ring-slate-400" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-normal line-through">Butter 250g</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Checked Item: Olive Oil -->
|
||||
<div class="flex items-center opacity-40 grayscale min-h-[56px] px-4">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input checked="" class="w-6 h-6 rounded border-slate-300 text-slate-400 focus:ring-slate-400" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-normal line-through">Olive Oil 1L</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Asymmetric Context Card -->
|
||||
<aside class="mt-16 p-8 bg-slate-100 rounded-2xl relative overflow-hidden">
|
||||
<div class="relative z-10 max-w-xs">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-500 mb-2">Budget Status</p>
|
||||
<p class="text-2xl font-semibold text-slate-900 tracking-tight">You are within the weekly limit.</p>
|
||||
<p class="mt-4 text-slate-500 text-sm leading-relaxed">Based on your Colectivo history, this session is 12% cheaper than last Tuesday.</p>
|
||||
</div>
|
||||
<!-- Decorative Element -->
|
||||
<div class="absolute -right-12 -bottom-12 w-48 h-48 bg-slate-200 rounded-full blur-3xl opacity-50"></div>
|
||||
</aside>
|
||||
</main>
|
||||
<!-- Bottom Action Bar -->
|
||||
<div class="fixed bottom-0 left-0 w-full p-6 bg-surface/80 backdrop-blur-xl z-50">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<button class="w-full h-14 bg-slate-900 text-slate-50 rounded-xl font-semibold tracking-tight transition-all active:scale-95 flex items-center justify-center gap-2 shadow-xl shadow-slate-900/10">
|
||||
<span>Finish shopping</span>
|
||||
<span class="material-symbols-outlined text-lg">check_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/shopping_session_1/screen.png
Normal file
BIN
design/shopping_session_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
201
design/shopping_session_2/code.html
Normal file
201
design/shopping_session_2/code.html
Normal file
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Colectivo - Shopping Session</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary": "#505f76",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed": "#565e74",
|
||||
"primary": "#000000",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-surface": "#191c1e",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-primary": "#dae2fd",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#333b50",
|
||||
"on-error-container": "#410002",
|
||||
"background": "#f7f9fb",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"outline": "#777777",
|
||||
"surface": "#f7f9fb",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"on-surface-variant": "#474747",
|
||||
"error-container": "#ffdad6",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary": "#7d000f",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"surface-tint": "#565e74",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-background": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface selection:bg-slate-200">
|
||||
<!-- Shopping Session Header -->
|
||||
<header class="sticky top-0 z-40 bg-surface/80 backdrop-blur-xl flex justify-between items-center h-16 px-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="flex items-center justify-center w-10 h-10 -ml-2 text-slate-900 active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined text-2xl">close</span>
|
||||
</button>
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900">Compra semanal</h1>
|
||||
</div>
|
||||
<!-- Presence Avatars -->
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait of a young woman with a friendly expression in soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBuiajlGpJ58EHg6U1cJmoIbhDPPmTK52pA7ESu6mENnJ7kYam0DzV8i-XwjIATEBBX0Po2kCssCR9Hum120lFkeCeqTxUNtVtnbJ_i6K6z0dKwcwjpY78xxhdVtQ0d9A2pERSHrLUKTduSTRjfA2-62yvg3pUruGxhcMGTBTYnfovlBAh3h28C5EiNNsmmt9WvZvylSs3SYyUF--9IQnoM2o-b4P68SRfpW3GHMhla5T1mxUROu_JnOCAodesYM6AOfkhFVO7WjiAH"/>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait of a smiling man with clean minimalist aesthetic and soft shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDN3-1EK1PYMbJnnqUv-q7VtJUNFUJ9DHSMEjxu6m3OI-480NZ-jabSYygkzIvoEEkEgr9ziN1viVBmJriK3x9Eyz4ECh6WxzKpFzYRTO_F2YPs42BGMz4ZdhqRv_BCN_CLCOw1_fSNAqQo0CYXPa8RzRmK7L4m_hBJ8HJBov9inRKzO669GpZ3Rgq6289vvhbyBp9JiZsWNfQQDNvBl_sLrwr-UQiO99u_cmjuYVT3gXbCsHXO2pSE5YYPwkX1xCqftXxdFY5DUPdE"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-2xl mx-auto px-6 pb-32 pt-4">
|
||||
<!-- Active Items Section -->
|
||||
<section class="space-y-2">
|
||||
<header class="mb-4">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-500">To buy</p>
|
||||
</header>
|
||||
<!-- Item: Whole milk -->
|
||||
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-medium">Whole milk 1L</p>
|
||||
<p class="text-xs text-slate-400">Dairy • Essential</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 text-slate-400">
|
||||
<span class="material-symbols-outlined text-xl">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item: Bread -->
|
||||
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-medium">Bread</p>
|
||||
<p class="text-xs text-slate-400">Bakery • Fresh</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 text-slate-400">
|
||||
<span class="material-symbols-outlined text-xl">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item: Eggs 12 uds -->
|
||||
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-medium">Eggs 12 uds</p>
|
||||
<p class="text-xs text-slate-400">Protein • Large</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 text-slate-400">
|
||||
<span class="material-symbols-outlined text-xl">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item: Avocados -->
|
||||
<div class="group flex items-center bg-surface-container-lowest rounded-xl min-h-[56px] px-4 transition-colors active:bg-slate-100">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input class="w-6 h-6 rounded border-slate-300 text-slate-900 focus:ring-slate-900" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-medium">Avocados</p>
|
||||
<p class="text-xs text-slate-400">Produce • Pack of 3</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 text-slate-400">
|
||||
<span class="material-symbols-outlined text-xl">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Divider & Checked Items -->
|
||||
<section class="mt-12 space-y-2">
|
||||
<header class="mb-4 flex items-center gap-4">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-widest text-slate-400">Checked</p>
|
||||
<div class="h-[1px] flex-grow bg-slate-200"></div>
|
||||
</header>
|
||||
<!-- Checked Item: Butter 250g -->
|
||||
<div class="flex items-center opacity-40 grayscale min-h-[56px] px-4">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input checked="" class="w-6 h-6 rounded border-slate-300 text-slate-400 focus:ring-slate-400" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-normal line-through">Butter 250g</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Checked Item: Olive Oil -->
|
||||
<div class="flex items-center opacity-40 grayscale min-h-[56px] px-4">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<input checked="" class="w-6 h-6 rounded border-slate-300 text-slate-400 focus:ring-slate-400" type="checkbox"/>
|
||||
</div>
|
||||
<div class="flex-grow py-4">
|
||||
<p class="text-slate-900 font-normal line-through">Olive Oil 1L</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Asymmetric Context Card -->
|
||||
</main>
|
||||
<!-- Bottom Action Bar -->
|
||||
<div class="fixed bottom-0 left-0 w-full p-6 bg-surface/80 backdrop-blur-xl z-50">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<button class="w-full h-14 bg-slate-900 text-slate-50 rounded-xl font-semibold tracking-tight transition-all active:scale-95 flex items-center justify-center gap-2 shadow-xl shadow-slate-900/10">
|
||||
<span>Finish shopping</span>
|
||||
<span class="material-symbols-outlined text-lg">check_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/shopping_session_2/screen.png
Normal file
BIN
design/shopping_session_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
213
design/shopping_session_mobile/code.html
Normal file
213
design/shopping_session_mobile/code.html
Normal file
@@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,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": {
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-container": "#eceef0",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"surface": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"inverse-surface": "#2d3133",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary": "#505f76",
|
||||
"on-surface": "#191c1e",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"tertiary": "#7d000f",
|
||||
"outline": "#777777",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-primary-container": "#ffffff",
|
||||
"on-error-container": "#410002",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"primary-fixed": "#565e74",
|
||||
"secondary-fixed-dim": "#9cacc5"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.presence-overlap > *:not(:first-child) {
|
||||
margin-left: -8px;
|
||||
}
|
||||
.editorial-shadow {
|
||||
box-shadow: 0px 20px 40px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-white">
|
||||
<main class="min-h-screen flex flex-col max-w-2xl mx-auto bg-surface">
|
||||
<header class="sticky top-0 z-50 bg-surface flex items-center justify-between px-6 py-6 h-20">
|
||||
<button aria-label="Close Shopping Session" class="w-12 h-12 flex items-center justify-center rounded-md hover:bg-surface-container-low transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface" data-icon="close">close</span>
|
||||
</button>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[11px] font-semibold tracking-[0.1em] uppercase text-on-surface-variant mb-0.5">Shopping Session</span>
|
||||
<div class="flex presence-overlap">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="Portrait of a young woman with a focused expression, clean studio lighting, high-end editorial style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDywoIZ0BD8js1PTqR6BT0E8n9z2wRbyKJQf9c9lmwL1J7tKg5ta58g6m9PbkHteeBGybbyXDmRHbVplgAEps7Yagkmb1mhsuGWvHYZuzYxeUAQV-5flfSf91GApzmsCZhByIXZnDJwvbCgUEXn0KLAfo6bvUaFKNneDkv0cJ4CO7JREAaozTENLhqGaWnkEz64Mj86EDn4SutuSX_DaDnrXnneqrraFeKBNYkeI4tIeb5nuz62rLk7HIfERQo-B4R4wsrM8PE70sLj"/>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="Portrait of a man with short hair, soft natural window light, minimalist background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-jKDcc2wTPWfQPgLEzUKlXqQLM7lMRpOV25sGUue7P2NT8kfO4QTub28OmQck1oT-XrHTrCvJFEm30CXHctDgkGQ0KOg4SFLCqmbAnONfeYtX879sI3a6GVRwzbVe183lnd9NUHdYgV6-XJxflUDvhMBj1KbpObCD50D8t8VEK6cnzSGJgDFMExfr8IMZpH8244UnfpkS4F-0-NdbalioBtl7EhkCYUeJNSjSZKXvSPkSxtB27pWFGRu2DvRvvdZr_2Mba6nOhBha"/>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-200 flex items-center justify-center text-[10px] font-bold text-slate-600">
|
||||
+2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-surface-variant" data-icon="shopping_bag">shopping_bag</span>
|
||||
</div>
|
||||
</header>
|
||||
<section class="flex-1 px-6 pt-4 pb-32">
|
||||
<div class="mb-10">
|
||||
<span class="block text-[13px] font-semibold tracking-[0.05em] uppercase text-on-surface-variant mb-1">Active List</span>
|
||||
<h1 class="text-3xl font-semibold tracking-[-0.02em] text-primary">WEEKLY PROVISIONS</h1>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="group flex items-center min-h-[72px] bg-surface-container-lowest rounded-md px-4 editorial-shadow border border-transparent hover:border-slate-200 transition-all">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded border-2 border-slate-300 group-active:scale-95 transition-transform"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight">Organic Heirloom Tomatoes</span>
|
||||
<span class="text-[13px] text-slate-500">2.5 lbs • Produce</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-14 h-14 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="drag_indicator">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center min-h-[72px] bg-surface-container-lowest rounded-md px-4 editorial-shadow transition-all">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded border-2 border-slate-300"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight">Artisan Sourdough Batard</span>
|
||||
<span class="text-[13px] text-slate-500">1 unit • Bakery</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-14 h-14 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="drag_indicator">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center min-h-[72px] bg-surface-container-lowest rounded-md px-4 editorial-shadow transition-all">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded border-2 border-slate-300"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight">Cold Pressed Olive Oil</span>
|
||||
<span class="text-[13px] text-slate-500">500ml • Pantry</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-14 h-14 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="drag_indicator">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center min-h-[72px] bg-surface-container-lowest rounded-md px-4 editorial-shadow transition-all">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded border-2 border-slate-300"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight">Maldon Sea Salt Flakes</span>
|
||||
<span class="text-[13px] text-slate-500">250g • Pantry</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-14 h-14 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="drag_indicator">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 mb-6">
|
||||
<div class="flex items-center gap-4 opacity-50">
|
||||
<span class="text-[13px] font-semibold tracking-[0.05em] uppercase text-on-surface-variant shrink-0">Checked</span>
|
||||
<div class="h-[1px] w-full bg-slate-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 opacity-60 grayscale">
|
||||
<div class="flex items-center min-h-[72px] bg-surface-container-low rounded-md px-4">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded bg-slate-900 text-white">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="check">check</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight line-through">Sparkling Mineral Water</span>
|
||||
<span class="text-[13px] text-slate-500">Case of 12 • Beverages</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center min-h-[72px] bg-surface-container-low rounded-md px-4">
|
||||
<div class="flex-1 flex items-center gap-4">
|
||||
<div class="w-7 h-7 flex items-center justify-center rounded bg-slate-900 text-white">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="check">check</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-base font-medium text-slate-800 leading-tight line-through">Fresh Sweet Basil</span>
|
||||
<span class="text-[13px] text-slate-500">1 Bunch • Produce</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="fixed bottom-0 left-0 right-0 max-w-2xl mx-auto p-6 bg-surface/80 backdrop-blur-xl">
|
||||
<button class="w-full h-16 bg-slate-900 text-slate-50 rounded-md flex items-center justify-center gap-3 active:scale-[0.98] transition-transform">
|
||||
<span class="text-[16px] font-semibold tracking-wide">Finish shopping</span>
|
||||
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</footer>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design/shopping_session_mobile/screen.png
Normal file
BIN
design/shopping_session_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
@@ -1,37 +1,37 @@
|
||||
# Design System Specification
|
||||
|
||||
|
||||
## 1. Overview & Creative North Star: "The Monolith Editorial"
|
||||
The creative direction for this design system is **The Monolith Editorial**. We are moving away from the "busy" aesthetics of modern SaaS and toward a disciplined, high-end editorial experience. The goal is to create a sense of permanent, quiet authority. By stripping away all accent colors and relying on a monochromatic slate palette, we force the user to focus on content, structure, and intent.
|
||||
|
||||
|
||||
The "Template" look is avoided through **Intentional Negative Space** and **Tonal Depth**. We do not use lines to separate ideas; we use the weight of the typography and the shift of the background. It is a system that feels carved rather than assembled.
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 2. Colors & Tonal Architecture
|
||||
The palette is strictly monochromatic, utilizing a "Slate" foundation to provide a cooling, sophisticated atmosphere.
|
||||
|
||||
|
||||
### Core Palette
|
||||
- **Background**: `#f7f9fb` (Light) / `#020617` (Dark)
|
||||
- **Primary (Action)**: `#000000` (Light) / `#ffffff` (Dark) — *Note: Primary actions invert the surface.*
|
||||
- **Destructive**: `#ba1a1a` (The only color allowed to break the monochrome seal).
|
||||
|
||||
|
||||
### The "No-Line" Rule
|
||||
**Explicit Instruction:** Designers are prohibited from using 1px solid borders to section off major UI areas. To define boundaries, you must use background shifts.
|
||||
- Use `surface-container-low` for secondary content areas.
|
||||
- Use `surface-container-highest` for high-priority nested components.
|
||||
- Sectioning is achieved via a 32px–48px vertical gap or a subtle change in the background hex, never a line.
|
||||
|
||||
|
||||
### Surface Hierarchy & Nesting
|
||||
Treat the UI as stacked sheets of gallery-grade paper.
|
||||
1. **Base Layer:** `surface` (The foundation).
|
||||
2. **Raised Layer:** `surface-container-low` (For subtle grouping).
|
||||
3. **Focus Layer:** `surface-container-lowest` (For cards and interactive modules to "pop" via tonal contrast).
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 3. Typography: The Inter Hierarchy
|
||||
We use **Inter** exclusively. To achieve an editorial feel, we rely on extreme contrast between `headline-lg` and `label-sm`.
|
||||
|
||||
|
||||
| Level | Size | Weight | Case | Spacing |
|
||||
| :--- | :--- | :--- | :--- | :--- |
|
||||
| **Display-LG** | 3.5rem | 600 | Default | -0.02em |
|
||||
@@ -39,58 +39,58 @@ We use **Inter** exclusively. To achieve an editorial feel, we rely on extreme c
|
||||
| **Header (Label-MD)** | 13px | 600 | Uppercase | +0.05em |
|
||||
| **Body-LG** | 16px | 400 | Default | Normal |
|
||||
| **Meta (Label-SM)** | 13px | 400 | Default | Normal |
|
||||
|
||||
|
||||
**Editorial Note:** Always pair an Uppercase Label-MD header directly above a Title-LG to create a "Masthead" effect for sections.
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
Traditional drop shadows are largely forbidden. Hierarchy must be achieved through **Tonal Layering**.
|
||||
|
||||
|
||||
- **The Layering Principle:** Instead of a shadow, place a `surface-container-lowest` card on a `surface-container-low` background. The slight shift in slate value creates a "natural" lift.
|
||||
- **Ambient Shadows:** For floating elements like Sheets or Dialogs, use a "Ghost Shadow": `0px 20px 40px rgba(15, 23, 42, 0.06)`. It should feel like a soft glow, not a dark stain.
|
||||
- **Glassmorphism:** For the "Sticky Bottom Input," use a backdrop-blur of `12px` and a semi-transparent `surface` color (80% opacity). This ensures the content "flows" under the interface, maintaining a sense of depth.
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 5. Components
|
||||
All components follow a 4px base grid and a `rounded-md` (0.375rem) corner radius.
|
||||
|
||||
|
||||
### Buttons (Inversion Logic)
|
||||
- **Primary:** `bg-slate-900 text-slate-50` (Light Mode). This "Inversion" is the signature interactive state.
|
||||
- **Destructive:** `bg-red-500 text-white`. Reserved only for irreversible actions.
|
||||
- **Ghost:** No background, `text-slate-500`. On hover, shift to `surface-raised`.
|
||||
|
||||
|
||||
### Input Fields & Sticky Input
|
||||
- **The Monolith Input:** A sticky bottom container with `backdrop-blur`. No border; only a subtle `surface-raised` background.
|
||||
- **Chips:** `rounded-full`, `bg-slate-200`. When active, they invert to `bg-slate-900 text-white`.
|
||||
|
||||
|
||||
### Lists & Swipe Actions
|
||||
- **Forbid Dividers:** Do not use lines between list items. Use 12px of vertical padding (`py-3`) to create separation through whitespace.
|
||||
- **Swipe-to-Delete:** The "Red Zone" emerges from behind the item. As the user swipes, the background transitions into `red-500` with a white Lucide `trash-2` icon.
|
||||
|
||||
|
||||
### Shopping Mode Components
|
||||
- **Large Tap Targets:** Increase minimum hit area to 56px.
|
||||
- **Presence Avatars:** 24px circles with a 2px `surface` border, overlapped horizontally to show collaboration.
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
|
||||
### Do
|
||||
- **Do** use uppercase labels with letter-spacing for all category headers.
|
||||
- **Do** use `slate-500` for meta-text to create a visual "recession" of less important data.
|
||||
- **Do** maximize the use of the `2xl` max-width container on desktop to ensure the "Editorial" line lengths remain readable.
|
||||
- **Do** use Lucide icons at 1.5 stroke width to match the weight of Inter's medium-weight characters.
|
||||
|
||||
|
||||
### Don't
|
||||
- **Don't** use a 1px border to separate the sidebar from the main content. Use a background color shift.
|
||||
- **Don't** use any colors outside of the Slate and Red-500 palette. No "Success Green" or "Warning Orange." Use icons and text to convey state.
|
||||
- **Don't** use standard "drop shadows" on cards. If it doesn't pop via tonal shift, the layout needs more whitespace, not more shadow.
|
||||
- **Don't** use "Slate-900" for body text. Use "Slate-900" only for titles; use "Slate-800" or "Slate-700" for long-form reading to reduce eye strain.
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 7. Layout Philosophy
|
||||
- **Desktop (lg+):** The left sidebar is a fixed Monolith. It stays `surface-raised` while the main content area remains `surface`.
|
||||
- **Mobile:** The bottom tab bar utilizes Glassmorphism. Navigation icons should be `slate-400`, switching to `slate-900` when active. No text labels on mobile tabs; the icons must be clear enough to stand alone.
|
||||
259
design/tasks_mobile/code.html
Normal file
259
design/tasks_mobile/code.html
Normal file
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-container": "#eceef0",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"surface": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"inverse-surface": "#2d3133",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary": "#505f76",
|
||||
"on-surface": "#191c1e",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"tertiary": "#7d000f",
|
||||
"outline": "#777777",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-primary-container": "#ffffff",
|
||||
"on-error-container": "#410002",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"primary-fixed": "#565e74",
|
||||
"secondary-fixed-dim": "#9cacc5"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.ease-monolith {
|
||||
transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-[#f7f9fb] dark:bg-[#020617] text-slate-900 dark:text-slate-50 w-full sticky top-0 z-50 flex items-center justify-between px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors p-2 rounded-md">
|
||||
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
||||
</button>
|
||||
<h1 class="text-xl font-bold tracking-tighter text-slate-900 dark:text-slate-50">MONOLITH</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors p-2 rounded-md">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="max-w-2xl mx-auto px-6 pt-8 pb-32">
|
||||
<div class="mb-12">
|
||||
<span class="font-headline font-semibold tracking-[0.05em] uppercase text-[13px] text-secondary">Task Manager</span>
|
||||
<h2 class="text-4xl font-semibold tracking-tight text-primary mt-1">Productivity</h2>
|
||||
</div>
|
||||
<!-- Section: High Priority -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-6">
|
||||
<span class="font-headline font-semibold tracking-[0.05em] uppercase text-[13px] text-tertiary">Urgent Action</span>
|
||||
<h3 class="text-xl font-semibold tracking-[-0.01em] text-primary">High Priority</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<!-- Task Card -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-md flex items-start gap-4 transition-all hover:bg-surface-container-low group">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Review Q3 Revenue Projections</h4>
|
||||
<p class="text-sm text-secondary mt-1">Ensure alignment with current growth trajectory before board meeting.</p>
|
||||
<div class="flex items-center gap-3 mt-3">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-wider bg-tertiary-container/10 text-tertiary px-2 py-0.5 rounded">Due Today</span>
|
||||
<span class="text-[11px] text-outline font-medium">Finance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Task Card -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-md flex items-start gap-4 transition-all hover:bg-surface-container-low group">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Finalize Acquisition Terms</h4>
|
||||
<p class="text-sm text-secondary mt-1">Review legal documents for Project Phoenix.</p>
|
||||
<div class="flex items-center gap-3 mt-3 text-secondary">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="attach_file">attach_file</span>
|
||||
<span class="text-[11px] font-medium uppercase tracking-wider">3 Attachments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section: Product Development -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-6">
|
||||
<span class="font-headline font-semibold tracking-[0.05em] uppercase text-[13px] text-secondary">Roadmap</span>
|
||||
<h3 class="text-xl font-semibold tracking-[-0.01em] text-primary">Product Development</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-surface-container-lowest p-5 rounded-md flex items-start gap-4 transition-all hover:bg-surface-container-low">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Implement Bento Grid Components</h4>
|
||||
<p class="text-sm text-secondary mt-1">Modular layout system for the main dashboard views.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 rounded-md flex items-start gap-4 transition-all hover:bg-surface-container-low">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Define Tonal Layering Spec</h4>
|
||||
<p class="text-sm text-secondary mt-1">Documenting the no-line rule for design-engineering handoff.</p>
|
||||
<div class="flex -space-x-2 mt-4">
|
||||
<div class="w-7 h-7 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait of a professional creative woman with short hair in natural morning light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRyRcaHyH2_pACB82fgL600bz8HSk-DBnErdlc7fAuuWlp0runfDwuKzYE7uXDcmCX95G7ly9LS14w05mjCmQPBa_08FrTXUqi0M2QJICAWF43M70gT0_7_L4ZztPGlNdKkdL9S7Ai7ZonDAo2BVIP3nYTqsz5OZPgbijqy-vhNUNN49U9QD0XEQandEmLM_z2ltsnTgt0ZubUnQ56rybuUtq5ehjR2wfTKb6x1bsMcyraH8dlhyYyGwyaWah16Wlc4Ilvjk7XsoqL"/>
|
||||
</div>
|
||||
<div class="w-7 h-7 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="headshot of a focused male product manager in a minimal office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZ9VvHQs7z_UKDWn0VpTDHCCuoEBLmBx-hIRcDqqNeHUrpFEYok56yU5mNfIUo1SD-cFWH4FgSG6gSmAecXUu_j1AYPLVhixheYNt0LHI6gzcYMM4SnQgQYaI6kfTVZrraqm_iugVw02Ab-Gmbe0ye07BoWz1ilkm58XL8H5de54ALBcjdNvGBkV1pn4EGG8V3Lw30TNtKScITPkcq07zI05JFcrJbq_GfsDyNgKvXuLjQa1_-2UJ99P-ovDPhFGAxVIi43aKS4oQ5"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section: Backlog -->
|
||||
<section>
|
||||
<div class="mb-6">
|
||||
<span class="font-headline font-semibold tracking-[0.05em] uppercase text-[13px] text-secondary">Future Focused</span>
|
||||
<h3 class="text-xl font-semibold tracking-[-0.01em] text-primary">Backlog</h3>
|
||||
</div>
|
||||
<div class="space-y-3 opacity-80">
|
||||
<div class="bg-surface-container-low p-5 rounded-md flex items-start gap-4">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Explore VR Interface Paradigms</h4>
|
||||
<p class="text-sm text-secondary mt-1">Research phase for spatial editorial content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-5 rounded-md flex items-start gap-4">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Legacy CSS Audit</h4>
|
||||
<p class="text-sm text-secondary mt-1">Removing unused utility classes from v1.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Sticky Bottom Input -->
|
||||
<div class="fixed bottom-0 left-0 right-0 z-50">
|
||||
<div class="bg-surface/80 backdrop-blur-xl px-6 py-6 border-none shadow-[0px_-10px_30px_rgba(15,23,42,0.04)]">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<!-- Quick Chips -->
|
||||
<div class="flex gap-2 mb-4">
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-xs font-semibold hover:bg-slate-900 hover:text-white transition-colors">Daily</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-xs font-semibold hover:bg-slate-900 hover:text-white transition-colors">Weekly</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-xs font-semibold hover:bg-slate-900 hover:text-white transition-colors">Urgent</button>
|
||||
</div>
|
||||
<!-- Input Field -->
|
||||
<div class="relative flex items-center bg-surface-container-low rounded-md px-4 py-3 group transition-all focus-within:bg-surface-container-high">
|
||||
<span class="material-symbols-outlined text-outline group-focus-within:text-primary transition-colors" data-icon="add">add</span>
|
||||
<input class="w-full bg-transparent border-none focus:ring-0 text-primary placeholder:text-outline text-base ml-2" placeholder="Add task to Tasks..." type="text"/>
|
||||
<button class="ml-2 p-1 text-primary-fixed hover:text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="arrow_upward">arrow_upward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden NavigationDrawer (Structural Placeholder) -->
|
||||
<div class="fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] dark:bg-[#020617] h-full w-80 rounded-r-none shadow-[0px_20px_40px_rgba(15,23,42,0.06)] transform -translate-x-full transition-transform duration-300 ease-monolith">
|
||||
<div class="px-8 mb-12">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="professional editorial lead portrait with clean background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6_GWLgnPuE73WUEf4U-WmrM8sd41FnEcrwSJMcoHDHyCLeEVT3ymT5k3jEUWR3OwgVrTfgIDz9ACSxY-dYPWFf02g4803-LXx051H68U6-yNCrRIXXKx2Hy3lQ-8Szu397lu6JzWshaDtNT_5ePrEcQeo2k-7sz3MyMd8nklKvGMkJhdnbL464viJ2lq20y_pvt4CBCxwqWvQxXS8GBxtuOB1ta5ZSIzeDpJxhVsjKiiXiN6OW17lhlk2oihqn77idqxDXpEbKoJb"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-slate-900 dark:text-slate-50">Editorial Lead</div>
|
||||
<div class="text-[13px] text-slate-500">monolith.editorial@app.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center gap-4 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Lists</span>
|
||||
</div>
|
||||
<div class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md mx-4 my-1 px-4 py-3 flex items-center gap-4 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Tasks</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center gap-4 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Notes</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center gap-4 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Search</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center gap-4 cursor-pointer mt-auto">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">User Settings</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/tasks_mobile/screen.png
Normal file
BIN
design/tasks_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
256
design/tasks_view/code.html
Normal file
256
design/tasks_view/code.html
Normal file
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary": "#505f76",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed": "#565e74",
|
||||
"primary": "#000000",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-surface": "#191c1e",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-primary": "#dae2fd",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#333b50",
|
||||
"on-error-container": "#410002",
|
||||
"background": "#f7f9fb",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container": "#eceef0",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"outline": "#777777",
|
||||
"surface": "#f7f9fb",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"on-surface-variant": "#474747",
|
||||
"error-container": "#ffdad6",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary": "#7d000f",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"surface-tint": "#565e74",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-background": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface antialiased selection:bg-slate-200">
|
||||
<aside class="hidden lg:flex flex-col border-r-0 h-full w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-950 z-40">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center text-white text-xs font-bold">C</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-medium">Shared Workspace</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md scale-95 duration-150 ease-in-out group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">shopping_cart</span>
|
||||
<span class="text-[13px] normal-case">Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-900 dark:text-slate-50 font-semibold bg-slate-200/50 dark:bg-slate-800/50 rounded-md scale-95 duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">check_box</span>
|
||||
<span class="text-[13px] normal-case">Tasks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md scale-95 duration-150 ease-in-out group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">description</span>
|
||||
<span class="text-[13px] normal-case">Notes</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md scale-95 duration-150 ease-in-out group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">search</span>
|
||||
<span class="text-[13px] normal-case">Search</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="mt-auto p-6 border-t border-slate-200/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="professional portrait of a creative director in a minimalist studio with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQ6aSavkZyVTuU4XnJejAjUgex0Z6akdteALzjOo1-wAfhEx6ZNxQ3BWWjlCy3NSGSs8qcuR0hB3RscX13XawCVHkJqbg8zpLYSEfqffDLdVQi2ev_-OsQxTW1mMI2yzB48zHdJvwdBUvbk7i4Ec7_2neByGxfFhhUUVjuSeMrjngqFAKtcOByUnFw7X7joXyg93G5K_NtReENJBW5Hwd1KZxdbwZDAiW6-quqOyWEUmv2U4F-KxXvjL85xjHEly8GU1m3AeyrvdV2"/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs font-semibold text-slate-900 truncate">Alex Rivera</p>
|
||||
<p class="text-[10px] text-slate-500 truncate">Pro Plan</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-400 text-[18px]">settings</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="lg:ml-64 min-h-screen flex flex-col relative pb-32">
|
||||
<header class="sticky top-0 z-30 bg-slate-50/90 backdrop-blur-md flex justify-between items-center h-14 px-4 lg:px-12 w-full">
|
||||
<div class="flex items-center gap-4 lg:hidden">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
<span class="text-lg font-bold">Colectivo</span>
|
||||
</div>
|
||||
<div class="hidden lg:block">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-400 mb-0.5">Project Atlas</p>
|
||||
<h2 class="text-xl font-semibold text-slate-900 tracking-tight">Tasks</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex -space-x-2 mr-4">
|
||||
<img class="w-6 h-6 rounded-full border-2 border-slate-50 object-cover" data-alt="portrait of a man with glasses smiling in a bright office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbuQiMzOaaE_DIq4WEyWsj-vicDlV1NKtgWk36mWJhLZVPUGNEu4Y9iyPx9-QG6Rzvhd3e-qzw13oJbKnztNkuJPonJPNyibE99sde22SHj-mZa6CW1mswmC_cFlZP2Vg9uWnyLI-Ma5bIBOd3lQebVXym1GemjzWCRBxzohu4MHGZvX6Lv-i8S3zxcQTQJL7x5DBf07NHRLblbPCqwU838sveBlr24dUN3yTfpw_2lBoLz88OQPeOpJjW2g-prx2jaO5yc0GbXK4U"/>
|
||||
<img class="w-6 h-6 rounded-full border-2 border-slate-50 object-cover" data-alt="portrait of a woman laughing in a garden with warm golden sunlight" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOJMxmAKi84xZwAmIsTVFR3I6dDakUqS1dEsUuMwjt47PTqwc5odkmXCf9Z4JxyeR1HsehHId5BeXiGueOyKGQFLKauHSbGb7okscCeJh3EhHHwwHvQZW5EcYtXPe0nfp5k-z5Pq6ARIK9ovfp6bls10dv0087W7R7FWEGluLpu2j5BUge1fj6jFDw25S1amcmGVDyvfvBtGq6ioHrMDVpWkhU7Efq9nplBENr9g53dK6zaK1rKMuCaLxir25whfdQSVCPq4wcTknh"/>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-slate-50 bg-slate-200 flex items-center justify-center text-[10px] font-bold">+3</div>
|
||||
</div>
|
||||
<button class="p-2 text-slate-500 hover:text-slate-900 transition-colors opacity-80 active:opacity-100">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<section class="max-w-4xl w-full mx-auto px-6 py-8 flex-grow">
|
||||
<div class="mb-10">
|
||||
<h3 class="text-[13px] font-semibold uppercase tracking-widest text-slate-400 mb-4">High Priority</h3>
|
||||
<div class="space-y-1">
|
||||
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100 hover:shadow-sm">
|
||||
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing mr-4 transition-opacity text-[20px]">drag_indicator</span>
|
||||
<div class="flex-grow flex items-center gap-4">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-slate-900/10" type="checkbox"/>
|
||||
<span class="text-[15px] text-slate-800 font-medium">Finalize Q4 strategy deck for stakeholders</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<span class="text-[11px] font-semibold text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full uppercase tracking-wider">Today</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100 hover:shadow-sm">
|
||||
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab mr-4 text-[20px]">drag_indicator</span>
|
||||
<div class="flex-grow flex items-center gap-4">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900" type="checkbox"/>
|
||||
<span class="text-[15px] text-slate-800 font-medium">Coordinate with design on monolith brand tokens</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<span class="text-[11px] font-semibold text-slate-400 px-2 py-0.5 uppercase tracking-wider">Urgent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10">
|
||||
<h3 class="text-[13px] font-semibold uppercase tracking-widest text-slate-400 mb-4">Product Development</h3>
|
||||
<div class="space-y-1">
|
||||
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
|
||||
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab mr-4 text-[20px]">drag_indicator</span>
|
||||
<div class="flex-grow flex items-center gap-4">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900" type="checkbox"/>
|
||||
<span class="text-[15px] text-slate-800 font-medium">Core API Integration</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-12 border-l-2 border-slate-100 pl-4 space-y-1">
|
||||
<div class="group flex items-center py-2 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
|
||||
<div class="flex-grow flex items-center gap-4">
|
||||
<input class="w-4 h-4 rounded border-slate-300 text-slate-900" type="checkbox"/>
|
||||
<span class="text-[14px] text-slate-600">Review documentation for Auth endpoints</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center py-2 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
|
||||
<div class="flex-grow flex items-center gap-4">
|
||||
<input checked="" class="w-4 h-4 rounded border-slate-300 text-slate-900" type="checkbox"/>
|
||||
<span class="text-[14px] text-slate-400 line-through">Map database schema to editorial structure</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
|
||||
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab mr-4 text-[20px]">drag_indicator</span>
|
||||
<div class="flex-grow flex items-center gap-4">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900" type="checkbox"/>
|
||||
<span class="text-[15px] text-slate-800 font-medium">User testing: Editorial workflow</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-[13px] font-semibold uppercase tracking-widest text-slate-400 mb-4">Backlog</h3>
|
||||
<div class="space-y-1">
|
||||
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
|
||||
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab mr-4 text-[20px]">drag_indicator</span>
|
||||
<div class="flex-grow flex items-center gap-4">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900" type="checkbox"/>
|
||||
<span class="text-[15px] text-slate-800 font-medium">Update dependency libraries</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div class="fixed bottom-0 left-0 right-0 lg:left-64 z-50 p-4 lg:p-8">
|
||||
<div class="max-w-3xl mx-auto space-y-4">
|
||||
<div class="flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 rounded-full text-[11px] font-semibold uppercase tracking-wider transition-all bg-slate-900 text-white scale-100">Daily</button>
|
||||
<button class="px-4 py-1.5 rounded-full text-[11px] font-semibold uppercase tracking-wider transition-all bg-slate-200 text-slate-600 hover:bg-slate-300">Weekly</button>
|
||||
<button class="px-4 py-1.5 rounded-full text-[11px] font-semibold uppercase tracking-wider transition-all bg-slate-200 text-slate-600 hover:bg-slate-300">Urgent</button>
|
||||
</div>
|
||||
<div class="bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl rounded-2xl shadow-[0px_20px_40px_rgba(15,23,42,0.12)] border border-slate-200/50 dark:border-slate-800/50 p-2 flex items-center gap-3">
|
||||
<div class="p-2 ml-1">
|
||||
<span class="material-symbols-outlined text-slate-400">add_circle</span>
|
||||
</div>
|
||||
<input class="flex-grow bg-transparent border-none focus:ring-0 text-[15px] placeholder:text-slate-400 py-3" placeholder="Add task to Tasks..." type="text"/>
|
||||
<button class="bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-semibold hover:bg-black transition-colors mr-1">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="lg:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center h-16 px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-t border-slate-200/20 dark:border-slate-800/20">
|
||||
<a class="text-slate-400 active:scale-90 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-[26px]">shopping_cart</span>
|
||||
</a>
|
||||
<a class="text-slate-900 active:scale-90 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-[26px]" style="font-variation-settings: 'FILL' 1;">check_box</span>
|
||||
</a>
|
||||
<a class="text-slate-400 active:scale-90 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-[26px]">description</span>
|
||||
</a>
|
||||
<a class="text-slate-400 active:scale-90 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined text-[26px]">search</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body></html>
|
||||
BIN
design/tasks_view/screen.png
Normal file
BIN
design/tasks_view/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
220
design/user_settings/code.html
Normal file
220
design/user_settings/code.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,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": {
|
||||
"tertiary-container": "#da3437",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"outline": "#777777",
|
||||
"secondary": "#505f76",
|
||||
"on-background": "#191c1e",
|
||||
"surface-tint": "#565e74",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#7d000f",
|
||||
"primary": "#000000",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"on-primary": "#dae2fd",
|
||||
"background": "#f7f9fb",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-error": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container": "#eceef0",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-surface": "#191c1e",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-error-container": "#410002",
|
||||
"on-surface-variant": "#474747",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"surface": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"on-primary-container": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface">
|
||||
<!-- SideNavBar (Monolith Sidebar) -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 gap-8">
|
||||
<div class="px-8">
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-white">Colectivo</h1>
|
||||
<p class="font-inter uppercase tracking-wider text-[11px] font-semibold text-slate-400 mt-1">Household Workspace</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-2">
|
||||
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span>Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span>Tasks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span>Notes</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto space-y-2">
|
||||
<!-- Active Navigation Logic: Settings is currently active -->
|
||||
<a class="flex items-center gap-3 py-2 text-slate-900 dark:text-white border-l-2 border-slate-900 dark:border-white pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 text-slate-500 dark:text-slate-400 pl-4 font-inter uppercase tracking-wider text-[13px] font-semibold hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span>Help</span>
|
||||
</a>
|
||||
<div class="px-8 mt-6">
|
||||
<button class="w-full bg-slate-900 dark:bg-white text-slate-50 dark:text-slate-900 text-[13px] font-semibold uppercase tracking-widest py-3 rounded-md transition-all active:scale-95">
|
||||
Add Member
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 flex items-center justify-between px-8 ml-64 bg-slate-50 dark:bg-slate-900">
|
||||
<h2 class="text-lg font-bold tracking-tighter text-slate-900 dark:text-white uppercase">Settings</h2>
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="material-symbols-outlined text-slate-500 hover:text-slate-900 cursor-pointer transition-opacity" data-icon="notifications">notifications</span>
|
||||
<span class="material-symbols-outlined text-slate-500 hover:text-slate-900 cursor-pointer transition-opacity" data-icon="grid_view">grid_view</span>
|
||||
<div class="h-8 w-8 rounded-full bg-slate-700 flex items-center justify-center text-[11px] font-bold text-white uppercase overflow-hidden">
|
||||
AG
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 p-12 lg:p-24 max-w-5xl mx-auto">
|
||||
<div class="space-y-24">
|
||||
<!-- Profile Section -->
|
||||
<section class="flex flex-col items-center justify-center space-y-4">
|
||||
<div class="w-24 h-24 rounded-full bg-slate-700 flex items-center justify-center text-2xl font-semibold text-white shadow-sm ring-4 ring-white">
|
||||
AG
|
||||
</div>
|
||||
<button class="text-[13px] font-semibold uppercase tracking-widest text-slate-500 hover:text-slate-900 transition-colors">
|
||||
Change avatar
|
||||
</button>
|
||||
</section>
|
||||
<!-- Grid Layout for Settings Groups -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-20 gap-y-16">
|
||||
<!-- Display Name & Emoji Picker Group -->
|
||||
<div class="space-y-12">
|
||||
<!-- Display Name -->
|
||||
<div class="space-y-4">
|
||||
<label class="block text-[13px] font-semibold uppercase tracking-widest text-slate-500">Display Name</label>
|
||||
<input class="w-full bg-surface-container-low border-0 rounded-md py-4 px-4 text-slate-900 font-medium focus:ring-2 focus:ring-slate-900/5 transition-all" type="text" value="Ana García"/>
|
||||
</div>
|
||||
<!-- Emoji Picker -->
|
||||
<div class="space-y-4">
|
||||
<label class="block text-[13px] font-semibold uppercase tracking-widest text-slate-500">Status Icon</label>
|
||||
<div class="grid grid-cols-6 gap-3 p-4 bg-surface-container-low rounded-md">
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🐸</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🐼</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🦊</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🐨</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🦁</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🌵</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🌻</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">⭐</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🔥</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🎨</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">📚</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🍕</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🍜</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🍣</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🏠</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🚲</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">⚽</button>
|
||||
<button class="text-xl hover:scale-125 transition-transform p-1">🎮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Language & Account Group -->
|
||||
<div class="space-y-12">
|
||||
<!-- Language Selection -->
|
||||
<div class="space-y-4">
|
||||
<label class="block text-[13px] font-semibold uppercase tracking-widest text-slate-500">Language</label>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-6 py-2 rounded-full bg-slate-900 text-white text-[13px] font-semibold">English</button>
|
||||
<button class="px-6 py-2 rounded-full bg-surface-container-low text-slate-500 hover:text-slate-900 transition-colors text-[13px] font-semibold">Español</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Account Section -->
|
||||
<div class="space-y-4">
|
||||
<label class="block text-[13px] font-semibold uppercase tracking-widest text-slate-500">Account</label>
|
||||
<a class="group flex items-center justify-between p-4 bg-surface-container-low rounded-md hover:bg-surface-container-high transition-colors" href="#">
|
||||
<span class="text-slate-900 font-medium">Email & password</span>
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:translate-x-1 transition-transform" data-icon="arrow_forward">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Danger Zone Section -->
|
||||
<section class="pt-12 border-t-0">
|
||||
<div class="bg-surface-container-low p-8 rounded-md flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-[13px] font-bold uppercase tracking-widest text-red-500">Danger Zone</h3>
|
||||
<p class="text-slate-500 text-[13px] mt-1">Permanently remove your account and all associated data.</p>
|
||||
</div>
|
||||
<button class="px-6 py-3 border border-red-500/20 text-red-500 text-[13px] font-semibold uppercase tracking-widest rounded-md hover:bg-red-500 hover:text-white transition-all active:scale-95">
|
||||
Delete account
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Glassmorphism Floating FAB (Contextual suppression check: Suppressed on Settings) -->
|
||||
</body></html>
|
||||
BIN
design/user_settings/screen.png
Normal file
BIN
design/user_settings/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
163
plan/fase-5-mobile-ux.md
Normal file
163
plan/fase-5-mobile-ux.md
Normal file
@@ -0,0 +1,163 @@
|
||||
### Fase 5 — Rediseño UX Mobile ("Monolith Editorial")
|
||||
**Estado: ⏳ Plan propuesto**
|
||||
**Duración estimada: 1–2 semanas**
|
||||
**Objetivo: reescribir la capa de presentación para que el app sea mobile-first, siguiendo las mockups de Stitch en `design/*/screen.png` y la dirección "Monolith Editorial" de `design/DESIGN.md`.**
|
||||
|
||||
Esta fase sigue TDD: **primero los tests, al final la verificación.** Toda la cobertura funcional actual (211 tests) debe seguir verde. Los nuevos tests cubren responsive breakpoints y el shell mobile.
|
||||
|
||||
---
|
||||
|
||||
#### 0. Brecha entre el estado actual y la dirección de diseño
|
||||
|
||||
**Lo que ya funciona a favor del plan:**
|
||||
- Modo Compra ya es full-screen overlay con z-50 (`/lists/[id]/session`) — compatible mobile.
|
||||
- Sticky bottom input con glassmorphism básico en `/lists/[id]` y `/tasks/[id]`.
|
||||
- Tokens de diseño en `app.css` (RGB triplets + `rgb(var(--token) / <alpha>)`) compatibles con la paleta slate.
|
||||
- Swipe-to-delete touch en `/lists/[id]` para items (parcial — sin zona roja animada ni toast de "undo").
|
||||
|
||||
**Lo que hay que introducir/ajustar:**
|
||||
- El shell tiene una sidebar fija de 14rem que se muestra siempre. En mobile hay que ocultarla y mostrar **top-bar con hamburger + bottom tab bar con glassmorphism**.
|
||||
- Ningún header tiene el tratamiento de **masthead editorial** (uppercase label + big title) que piden las mockups (`WORKSPACE / Shared Lists`, `CURRENT INVENTORY / Grocery List`, etc.).
|
||||
- Las cards de listas en `/lists` son genéricas; la mockup mobile las quiere **con icono, meta ("12 items · Shared with Family") y avatares de presencia overlapping**.
|
||||
- Swipe-to-delete no tiene zona roja con fade + toast con undo (ver §UX Patterns en `design/colectivo_design_reference.html`).
|
||||
- Chips de frecuencia no son horizontalmente scrollables en mobile.
|
||||
- Headers de sección (todas las pantallas) usan `text-xs uppercase tracking-wide` pero sin el pairing masthead.
|
||||
- Padding actual `px-6` no escala: mobile pide `px-4`, desktop `px-6`.
|
||||
|
||||
**Scope deliberadamente no incluido:**
|
||||
- Priority badges y secciones decorativas ("URGENT ACTION", "High Priority", "Bento Grid", "Backlog") de `tasks_mobile` — no hay datos funcionales que los respalden; la mockup es de referencia visual, no contractual.
|
||||
- "SAVE" manual en notas (seguimos con autosave).
|
||||
- Mic/voice search en `search_mobile` (fuera de alcance).
|
||||
- Meta ficticia tipo "Dairy • Weekly" en ítems de la compra — el modelo no tiene categorías.
|
||||
|
||||
---
|
||||
|
||||
#### 5.0 Tests primero — escribir antes de implementar
|
||||
|
||||
**Playwright (`apps/web/tests/e2e/`):**
|
||||
|
||||
- [ ] `mobile-shell.test.ts`:
|
||||
- M-01: en viewport 375×812 (iPhone 13), la sidebar NO es visible.
|
||||
- M-02: en viewport 375×812, el bottom tab bar es visible con 4 iconos (lists/tasks/notes/search) y el icono de la ruta activa tiene `aria-current="page"`.
|
||||
- M-03: tap en el hamburger abre un drawer con el collective switcher + settings + logout.
|
||||
- M-04: en viewport 1280×800, la sidebar SÍ es visible y el bottom tab bar NO aparece.
|
||||
- [ ] `mobile-masthead.test.ts`:
|
||||
- M-05: cada ruta (`/lists`, `/tasks`, `/notes`, `/search`) muestra un elemento con `data-testid="masthead-label"` (uppercase) + `data-testid="masthead-title"` (big).
|
||||
- [ ] `mobile-swipe-delete.test.ts`:
|
||||
- M-06: en `/lists/[id]` con viewport mobile, simulate touch swipe-left en un item → se revela la zona roja con aria-label "Delete item".
|
||||
- M-07: full-swipe dispara el delete; toast con botón "Undo" restaura el ítem si se pulsa en < 4s.
|
||||
|
||||
**Vitest (`apps/web/src/lib/...`):**
|
||||
|
||||
- [ ] `swipe.test.ts` — helper de estado del swipe (offset → revealed → committed) aislado para testeo sin DOM.
|
||||
- [ ] `undoQueue.test.ts` — cola de deletes con TTL de 4s que puede cancelarse.
|
||||
|
||||
**Nota:** los 211 tests existentes deben seguir pasando tras el rediseño. Ese es el verdadero smoke de regresión — no añadimos tests funcionales nuevos que dupliquen lo que ya hay.
|
||||
|
||||
---
|
||||
|
||||
#### 5.1 Shell responsive
|
||||
|
||||
- [ ] `apps/web/src/lib/components/layout/MobileTopBar.svelte`:
|
||||
- Hamburger (izq) + wordmark "Colectivo" (centro) + avatar (der)
|
||||
- Visible solo en `md:hidden`
|
||||
- Sticky top con glassmorphism (`backdrop-blur-xl bg-surface/80`)
|
||||
- [ ] `apps/web/src/lib/components/layout/BottomTabBar.svelte`:
|
||||
- 4 items: Lists, Tasks, Notes, Search. Solo iconos (sin texto).
|
||||
- Glassmorphism igual que la top bar.
|
||||
- Respeta `env(safe-area-inset-bottom)` con `pb-[env(safe-area-inset-bottom)]`.
|
||||
- Active: `text-slate-900` / inactive: `text-slate-400`.
|
||||
- Visible solo en `md:hidden`.
|
||||
- [ ] `apps/web/src/lib/components/layout/MobileDrawer.svelte`:
|
||||
- Se abre al tocar el hamburger.
|
||||
- Contiene: collective switcher (con lista de colectivos + emoji), botón "Manage collective", enlace a Settings, Sign out.
|
||||
- Backdrop con click-outside close + trap focus.
|
||||
- Usa CSS transform (no re-mount) para evitar pérdida de estado.
|
||||
- [ ] `apps/web/src/routes/(app)/+layout.svelte`:
|
||||
- Extraer la sidebar actual a `DesktopSidebar.svelte`, renderizar solo `md:flex`.
|
||||
- Renderizar `<MobileTopBar />` + `<main>` + `<BottomTabBar />` en mobile.
|
||||
- Main scroll area con `pb-20` en mobile para dejar espacio al bottom bar.
|
||||
|
||||
#### 5.2 Masthead editorial + responsive padding
|
||||
|
||||
- [ ] Extraer un componente `ScreenMasthead.svelte`:
|
||||
```svelte
|
||||
<!-- props: label, title -->
|
||||
<p data-testid="masthead-label" class="text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary">{label}</p>
|
||||
<h1 data-testid="masthead-title" class="text-[28px] md:text-[32px] font-semibold tracking-[-0.02em] text-text-primary">{title}</h1>
|
||||
```
|
||||
- [ ] Aplicar en `/lists` (`WORKSPACE` / `Shopping Lists`), `/tasks` (`TASK MANAGER` / `Productivity` o `Tareas`), `/notes` (`REPOSITORY` / `Notes`), `/search` (`OMNI-SEARCH` / `Find Anything.`).
|
||||
- [ ] Reemplazar `px-6` genérico por `px-4 md:px-6` en contenedores principales.
|
||||
- [ ] Reemplazar `max-w` ausente por `max-w-2xl mx-auto` en pantallas de lectura (notes, search results) para mantener longitudes editoriales en pantallas grandes.
|
||||
|
||||
#### 5.3 Rediseño de `/lists` mobile
|
||||
|
||||
- [ ] Cards con el tratamiento de la mockup `lists_mobile`:
|
||||
- Icono grande (emoji / lucide) arriba-izq
|
||||
- Título + línea meta (`{n} items · {member_count} members` o `Active` si vacío)
|
||||
- Avatares de presencia overlapping (usa `collectiveMembers` ya cargado; máximo 3, "+N" si más)
|
||||
- Sin shadow — separa por `bg-surface-raised` sobre `bg-background`
|
||||
- [ ] Card "featured" (primera lista activa) a ancho completo; resto en grid 2×2 en mobile.
|
||||
- [ ] Sticky input conserva `Plus` + `Create` button como en la mockup.
|
||||
|
||||
#### 5.4 Rediseño de `/lists/[id]` mobile
|
||||
|
||||
- [ ] Top-bar contextual: back arrow + nombre de la lista (truncado) + menú 3-dots.
|
||||
- [ ] Fila de ítem:
|
||||
- Checkbox 24px a la izq
|
||||
- Nombre (body-lg) + meta opcional `{unit}` debajo si existe
|
||||
- Qty stepper a la derecha (`– N +`) siempre visible en mobile (quitar hover-only actual)
|
||||
- Handle de drag (GripVertical) oculto en mobile — se activa con long-press
|
||||
- [ ] Swipe-to-delete "zona roja":
|
||||
- Touch-move left → translate X y revela `bg-red-500 text-white` con icono `Trash2` a la derecha
|
||||
- Threshold 48px = snap abierto; >72% del ancho = commit delete
|
||||
- Post-delete: toast con "Undo" durante 4s (ver `undoQueue`)
|
||||
- Reutilizar lógica existente y añadir animación de color + el componente de toast
|
||||
|
||||
#### 5.5 Toast con "Undo" para deletes suaves
|
||||
|
||||
- [ ] `apps/web/src/lib/stores/undoQueue.ts`:
|
||||
- `scheduleUndoable({ label, restore, commit })` devuelve `id`
|
||||
- TTL 4s; si nadie llama `undo(id)`, ejecuta `commit`; si llama `undo`, ejecuta `restore`
|
||||
- [ ] `apps/web/src/lib/components/UndoToast.svelte`:
|
||||
- Monta al fondo de la pantalla (encima del bottom bar en mobile)
|
||||
- Muestra label + botón "Undo"
|
||||
- Escucha el store y desaparece cuando la cola se vacía
|
||||
- [ ] Integrar en: delete de item (lists), delete de task, send-to-trash de nota.
|
||||
|
||||
#### 5.6 Chips de frecuencia scrollables
|
||||
|
||||
- [ ] `ItemSuggestions.svelte`: wrapper con `overflow-x-auto flex-nowrap` en mobile, grid en desktop.
|
||||
- [ ] Hacer los chips `rounded-full bg-slate-200 dark:bg-slate-800` según DESIGN.md §5.
|
||||
|
||||
#### 5.7 Adaptar `/tasks`, `/notes`, `/search` al shell + masthead
|
||||
|
||||
- [ ] `/tasks`: masthead `TASK MANAGER` / `Tareas`. Quitar priority badges de las mockups (no están en el modelo). Mantener secciones "Pendientes / Completadas" con animación flip.
|
||||
- [ ] `/notes`: masthead `REPOSITORY` / `Notes` + contador `{n} ENTRIES`. Listado en una columna mobile; grid masonry solo en `md+`.
|
||||
- [ ] `/search`: masthead `OMNI-SEARCH` / `Find Anything.`. Las secciones ya tienen `data-testid="search-group-*"` — solo añadir badge "{n} MATCHES" junto al header.
|
||||
|
||||
#### 5.Z Verificación final — todos los tests verdes
|
||||
|
||||
- [ ] `just test-all` → 0 failures (los 211 actuales siguen verdes + los nuevos mobile tests)
|
||||
- [ ] Validación visual en DevTools iPhone 13 (375×812) + Pixel 7 (412×915) + Desktop (1280×800)
|
||||
- [ ] `loginAs(USERS.borja)` en Playwright con viewport mobile emulado — el shell mobile debe estar activo automáticamente.
|
||||
|
||||
---
|
||||
|
||||
### Plan de ejecución (orden sugerido)
|
||||
|
||||
1. **5.0 Tests primero** — escribir los mobile tests aunque inicialmente fallen.
|
||||
2. **5.1 Shell responsive** — sin esto, nada más es testable en mobile.
|
||||
3. **5.5 UndoQueue + UndoToast** — dependencia de 5.4.
|
||||
4. **5.2 Masthead + padding** — trivial, desbloquea los tests M-05.
|
||||
5. **5.3 / 5.4 / 5.6** — ajustes por pantalla.
|
||||
6. **5.7** — pulido de tasks/notes/search con el shell.
|
||||
7. **5.Z Verificación** — correr toda la suite, snapshot visual, commit.
|
||||
|
||||
### Criterio de aceptación
|
||||
|
||||
- En viewport ≤ 768px: sidebar oculta, bottom tab bar + top bar visibles, drawer abre con el switcher.
|
||||
- Todas las pantallas tienen el par masthead (label uppercase + title big).
|
||||
- Swipe-left en un item revela la zona roja; full-swipe borra con toast de undo.
|
||||
- Los 211 tests funcionales siguen verdes. Los nuevos mobile tests (M-01..M-07) pasan.
|
||||
- Validado manualmente en DevTools en 3 viewports.
|
||||
Reference in New Issue
Block a user