admin
480 lines
21 KiB
HTML
480 lines
21 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Pinkudex · Combined Mark popover — variants</title>
|
|
<style>
|
|
:root {
|
|
--bg-0: #0a0710;
|
|
--bg-1: #14101e;
|
|
--bg-2: #1c1729;
|
|
--fg: #e8e6f0;
|
|
--fg-dim: #a8a4b8;
|
|
--fg-muted: #6e6a80;
|
|
--cyan: #22d3ee;
|
|
--violet: #a78bfa;
|
|
--mint: #34d399;
|
|
--coral: #fb7185;
|
|
--amber: #fbbf24;
|
|
--glass: rgba(255,255,255,0.04);
|
|
--glass-strong: rgba(255,255,255,0.08);
|
|
--border: rgba(255,255,255,0.08);
|
|
--border-strong: rgba(255,255,255,0.18);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg-0);
|
|
color: var(--fg);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
line-height: 1.45;
|
|
}
|
|
.page { max-width: 1300px; margin: 0 auto; padding: 24px; }
|
|
.page-header {
|
|
margin-bottom: 24px;
|
|
padding: 16px 20px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(167,139,250,0.05));
|
|
border: 1px solid var(--border);
|
|
}
|
|
.page-header h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
|
|
.page-header p { margin: 0; color: var(--fg-dim); font-size: 13px; }
|
|
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
|
.grid.full { grid-template-columns: 1fr; }
|
|
|
|
.variant {
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
background: var(--bg-1);
|
|
overflow: hidden;
|
|
}
|
|
.variant-head {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--glass);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.variant-num {
|
|
width: 26px; height: 26px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--cyan), var(--violet));
|
|
display: grid; place-items: center;
|
|
font-weight: 700; font-size: 12px; color: #0a0710;
|
|
flex-shrink: 0;
|
|
}
|
|
.variant-title { font-size: 15px; font-weight: 600; }
|
|
.variant-desc { color: var(--fg-dim); font-size: 12px; }
|
|
.variant-body {
|
|
padding: 28px;
|
|
background: var(--bg-0);
|
|
min-height: 420px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.toolbar {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
background: var(--bg-1); padding: 8px 10px;
|
|
border: 1px solid var(--border); border-radius: 12px;
|
|
}
|
|
.pill-btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 6px 12px; border-radius: 999px;
|
|
background: var(--glass); border: 1px solid var(--border-strong);
|
|
font-size: 13px; color: var(--fg-dim);
|
|
cursor: pointer;
|
|
}
|
|
.pill-btn:hover { background: var(--glass-strong); color: var(--fg); }
|
|
.pill-btn.active {
|
|
background: rgba(34,211,238,0.12);
|
|
border-color: rgba(34,211,238,0.4);
|
|
color: var(--cyan);
|
|
}
|
|
.badge {
|
|
background: var(--cyan); color: #0a0710;
|
|
font-size: 10px; font-weight: 700;
|
|
padding: 1px 6px; border-radius: 999px;
|
|
font-family: ui-monospace, monospace;
|
|
}
|
|
|
|
.menu {
|
|
background: var(--bg-1);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 12px;
|
|
box-shadow: 0 16px 40px rgba(0,0,0,0.5);
|
|
overflow: hidden;
|
|
width: 280px;
|
|
}
|
|
.menu-section-h {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 10px 14px 6px;
|
|
font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
|
|
color: var(--fg-muted);
|
|
}
|
|
.menu-section-h .meta { font-family: ui-monospace, monospace; }
|
|
.menu-row {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
.menu-row:hover { background: var(--glass); }
|
|
.menu-row.active { background: var(--glass-strong); }
|
|
.menu-row .ico { width: 16px; height: 16px; display: inline-grid; place-items: center; }
|
|
.menu-row .ico svg { width: 14px; height: 14px; }
|
|
.menu-row .label { flex: 1; }
|
|
.menu-row .check { color: var(--cyan); }
|
|
.menu-row .count { color: var(--fg-muted); font-family: ui-monospace, monospace; font-size: 11px; }
|
|
.menu-divider { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
|
|
.menu-row.disabled { opacity: 0.4; cursor: not-allowed; }
|
|
|
|
.vip { color: var(--cyan); }
|
|
.fav { color: var(--amber); }
|
|
.own { color: var(--violet); }
|
|
.mint { color: var(--mint); }
|
|
.muted { color: var(--fg-muted); }
|
|
|
|
.swatch-cyan { background: rgba(34,211,238,0.18); color: var(--cyan); }
|
|
.swatch-amber { background: rgba(251,191,36,0.18); color: var(--amber); }
|
|
.swatch-violet { background: rgba(167,139,250,0.18); color: var(--violet); }
|
|
.swatch-fg { background: rgba(168,164,184,0.18); color: var(--fg-dim); }
|
|
.swatch {
|
|
width: 22px; height: 22px; border-radius: 6px;
|
|
display: grid; place-items: center;
|
|
}
|
|
|
|
.pills-row { display: flex; gap: 6px; padding: 10px 12px; flex-wrap: wrap; }
|
|
.quick-pill {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 5px 10px; border-radius: 999px;
|
|
background: var(--bg-2); border: 1px solid var(--border);
|
|
font-size: 12px; cursor: pointer;
|
|
}
|
|
.quick-pill svg { width: 12px; height: 12px; }
|
|
.quick-pill.cyan { color: var(--cyan); border-color: rgba(34,211,238,0.4); }
|
|
.quick-pill.amber { color: var(--amber); border-color: rgba(251,191,36,0.4); }
|
|
.quick-pill.violet { color: var(--violet); border-color: rgba(167,139,250,0.4); }
|
|
.quick-pill.muted { color: var(--fg-dim); }
|
|
|
|
.ctx-row {
|
|
color: var(--fg-muted); font-size: 11px; font-family: ui-monospace, monospace;
|
|
padding: 8px 14px; border-bottom: 1px solid var(--border);
|
|
background: rgba(255,255,255,0.02);
|
|
}
|
|
|
|
.toggle-track {
|
|
display: inline-flex; padding: 3px;
|
|
background: var(--bg-2); border: 1px solid var(--border);
|
|
border-radius: 999px; gap: 2px;
|
|
}
|
|
.toggle-track .opt {
|
|
padding: 4px 12px; font-size: 11px; border-radius: 999px;
|
|
color: var(--fg-muted); cursor: pointer;
|
|
}
|
|
.toggle-track .opt.active { background: var(--glass-strong); color: var(--fg); }
|
|
|
|
.scenario-label {
|
|
text-align: center; color: var(--fg-muted); font-size: 11px;
|
|
margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em;
|
|
}
|
|
.stack { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 320px; }
|
|
|
|
.picked {
|
|
margin: 24px 0 0; padding: 12px 16px;
|
|
border-radius: 10px; background: rgba(52,211,153,0.07);
|
|
border: 1px solid rgba(52,211,153,0.25);
|
|
color: var(--mint); font-size: 13px;
|
|
}
|
|
|
|
/* tiny inline svg helpers */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="page-header">
|
|
<h1>Combined Mark popover — variants</h1>
|
|
<p>Single button in the toolbar. Top half always filters; bottom half marks the current selection. When nothing is selected, the lower half disables itself but stays visible — so the mental model is "Mark" = both verbs in one place. Three layouts:</p>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
|
|
<!-- ──────────── Variant A ──────────── -->
|
|
<div class="variant">
|
|
<div class="variant-head">
|
|
<div class="variant-num">A</div>
|
|
<div>
|
|
<div class="variant-title">Two clearly labeled sections</div>
|
|
<div class="variant-desc">"Filter to…" on top, "Mark selected as…" on bottom. Selection count shown as a section meta.</div>
|
|
</div>
|
|
</div>
|
|
<div class="variant-body">
|
|
|
|
<div class="stack">
|
|
<div class="scenario-label">No selection</div>
|
|
<div class="toolbar">
|
|
<button class="pill-btn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
|
|
Mark
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:11px;height:11px;opacity:0.6"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="menu">
|
|
<div class="menu-section-h"><span>Filter to</span><span class="meta">all</span></div>
|
|
<div class="menu-row active">
|
|
<span class="swatch swatch-fg">●</span>
|
|
<span class="label">All covers</span>
|
|
<span class="check">✓</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-cyan">◆</span>
|
|
<span class="label">VIP</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-amber">★</span>
|
|
<span class="label">Favorite</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-violet">▣</span>
|
|
<span class="label">Owned</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-fg">⊖</span>
|
|
<span class="label">Unmarked</span>
|
|
</div>
|
|
<hr class="menu-divider" />
|
|
<div class="menu-section-h"><span>Mark selected as</span><span class="meta muted">no selection</span></div>
|
|
<div class="menu-row disabled">
|
|
<span class="swatch swatch-cyan">◆</span>
|
|
<span class="label">VIP</span>
|
|
</div>
|
|
<div class="menu-row disabled">
|
|
<span class="swatch swatch-amber">★</span>
|
|
<span class="label">Favorite</span>
|
|
</div>
|
|
<div class="menu-row disabled">
|
|
<span class="swatch swatch-violet">▣</span>
|
|
<span class="label">Owned</span>
|
|
</div>
|
|
<div class="menu-row disabled">
|
|
<span class="swatch swatch-fg">⊖</span>
|
|
<span class="label">Unmark</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stack">
|
|
<div class="scenario-label">12 selected</div>
|
|
<div class="toolbar">
|
|
<button class="pill-btn active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
|
|
Mark
|
|
<span class="badge">12</span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:11px;height:11px;opacity:0.6"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="menu">
|
|
<div class="menu-section-h"><span>Filter to</span><span class="meta">all</span></div>
|
|
<div class="menu-row active">
|
|
<span class="swatch swatch-fg">●</span>
|
|
<span class="label">All covers</span>
|
|
<span class="check">✓</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-cyan">◆</span>
|
|
<span class="label">VIP</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-amber">★</span>
|
|
<span class="label">Favorite</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-violet">▣</span>
|
|
<span class="label">Owned</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-fg">⊖</span>
|
|
<span class="label">Unmarked</span>
|
|
</div>
|
|
<hr class="menu-divider" />
|
|
<div class="menu-section-h"><span>Mark 12 selected as</span><span class="meta">— mixed</span></div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-cyan">◆</span>
|
|
<span class="label">VIP</span>
|
|
<span class="count">3 / 12</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-amber">★</span>
|
|
<span class="label">Favorite</span>
|
|
<span class="count">0 / 12</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-violet">▣</span>
|
|
<span class="label">Owned</span>
|
|
<span class="count">7 / 12</span>
|
|
</div>
|
|
<div class="menu-row">
|
|
<span class="swatch swatch-fg">⊖</span>
|
|
<span class="label">Unmark all</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──────────── Variant B ──────────── -->
|
|
<div class="variant">
|
|
<div class="variant-head">
|
|
<div class="variant-num">B</div>
|
|
<div>
|
|
<div class="variant-title">Two-column "Filter | Mark As"</div>
|
|
<div class="variant-desc">Side-by-side columns share the same icons. Eye-tracking left for filter, right for action. Compact.</div>
|
|
</div>
|
|
</div>
|
|
<div class="variant-body">
|
|
|
|
<div class="stack">
|
|
<div class="scenario-label">12 selected</div>
|
|
<div class="toolbar">
|
|
<button class="pill-btn active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
|
|
Mark
|
|
<span class="badge">12</span>
|
|
</button>
|
|
</div>
|
|
<div class="menu" style="width: 360px;">
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); font-size: 10px; text-transform: uppercase; letter-spacing:0.06em; color: var(--fg-muted);">
|
|
<div style="padding: 10px 14px;">Filter</div>
|
|
<div style="padding: 10px 14px; border-left: 1px solid var(--border);">Mark 12 As</div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr;">
|
|
<div>
|
|
<div class="menu-row active"><span class="swatch swatch-cyan">◆</span><span class="label">VIP</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-amber">★</span><span class="label">Fav</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-violet">▣</span><span class="label">Owned</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-fg">⊖</span><span class="label">Unmarked</span></div>
|
|
<div class="menu-row muted"><span class="swatch swatch-fg">●</span><span class="label">Reset</span></div>
|
|
</div>
|
|
<div style="border-left: 1px solid var(--border);">
|
|
<div class="menu-row"><span class="swatch swatch-cyan">◆</span><span class="label">VIP</span><span class="count">3</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-amber">★</span><span class="label">Fav</span><span class="count">0</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-violet">▣</span><span class="label">Owned</span><span class="count">7</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-fg">⊖</span><span class="label">Unmark</span></div>
|
|
<div class="menu-row" style="opacity:0;pointer-events:none;"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stack">
|
|
<div class="scenario-label">No selection</div>
|
|
<div class="toolbar">
|
|
<button class="pill-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg> Mark</button>
|
|
</div>
|
|
<div class="menu" style="width: 360px;">
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); font-size: 10px; text-transform: uppercase; letter-spacing:0.06em; color: var(--fg-muted);">
|
|
<div style="padding: 10px 14px;">Filter</div>
|
|
<div style="padding: 10px 14px; border-left: 1px solid var(--border);">Mark as <span style="text-transform:none; color: var(--fg-muted);">— select first</span></div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr;">
|
|
<div>
|
|
<div class="menu-row active"><span class="swatch swatch-fg">●</span><span class="label">All</span><span class="check">✓</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-cyan">◆</span><span class="label">VIP</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-amber">★</span><span class="label">Fav</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-violet">▣</span><span class="label">Owned</span></div>
|
|
<div class="menu-row"><span class="swatch swatch-fg">⊖</span><span class="label">Unmarked</span></div>
|
|
</div>
|
|
<div style="border-left: 1px solid var(--border);">
|
|
<div class="menu-row disabled"><span class="swatch swatch-cyan">◆</span><span class="label">VIP</span></div>
|
|
<div class="menu-row disabled"><span class="swatch swatch-amber">★</span><span class="label">Fav</span></div>
|
|
<div class="menu-row disabled"><span class="swatch swatch-violet">▣</span><span class="label">Owned</span></div>
|
|
<div class="menu-row disabled"><span class="swatch swatch-fg">⊖</span><span class="label">Unmark</span></div>
|
|
<div class="menu-row" style="opacity:0;pointer-events:none;"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ──────────── Variant C — full width ──────────── -->
|
|
<div class="grid full" style="margin-top: 24px;">
|
|
<div class="variant">
|
|
<div class="variant-head">
|
|
<div class="variant-num">C</div>
|
|
<div>
|
|
<div class="variant-title">Mode toggle on top, then a single icon row</div>
|
|
<div class="variant-desc">A compact pill-toggle ("Filter" ↔ "Mark As") flips the verb. Below: one row of icons, big and clickable. The selected count is the trigger badge. When nothing is selected, "Mark As" tab is disabled.</div>
|
|
</div>
|
|
</div>
|
|
<div class="variant-body" style="gap: 60px;">
|
|
|
|
<div class="stack">
|
|
<div class="scenario-label">12 selected · "Mark As" tab</div>
|
|
<div class="toolbar">
|
|
<button class="pill-btn active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
|
|
Mark
|
|
<span class="badge">12</span>
|
|
</button>
|
|
</div>
|
|
<div class="menu" style="width: 320px;">
|
|
<div style="display:flex; justify-content: center; padding: 12px;">
|
|
<div class="toggle-track">
|
|
<span class="opt">Filter</span>
|
|
<span class="opt active">Mark 12 As</span>
|
|
</div>
|
|
</div>
|
|
<hr class="menu-divider" style="margin: 0;" />
|
|
<div class="pills-row" style="justify-content: center; padding: 16px 12px;">
|
|
<button class="quick-pill cyan">◆ VIP <span class="count">3</span></button>
|
|
<button class="quick-pill amber">★ Fav <span class="count">0</span></button>
|
|
<button class="quick-pill violet">▣ Owned <span class="count">7</span></button>
|
|
<button class="quick-pill muted">⊖ Unmark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stack">
|
|
<div class="scenario-label">No selection · "Filter" tab</div>
|
|
<div class="toolbar">
|
|
<button class="pill-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg> Mark</button>
|
|
</div>
|
|
<div class="menu" style="width: 320px;">
|
|
<div style="display:flex; justify-content: center; padding: 12px;">
|
|
<div class="toggle-track">
|
|
<span class="opt active">Filter</span>
|
|
<span class="opt" style="opacity: 0.4;">Mark As</span>
|
|
</div>
|
|
</div>
|
|
<hr class="menu-divider" style="margin: 0;" />
|
|
<div class="pills-row" style="justify-content: center; padding: 16px 12px;">
|
|
<button class="quick-pill" style="background: var(--glass-strong); color: var(--fg);">● All</button>
|
|
<button class="quick-pill cyan">◆ VIP</button>
|
|
<button class="quick-pill amber">★ Fav</button>
|
|
<button class="quick-pill violet">▣ Owned</button>
|
|
<button class="quick-pill muted">⊖ Unmarked</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picked">
|
|
<strong>My pick: A</strong> — labeled sections beat hidden modes. The user always sees both verbs at once, no toggling, no "is it filter mode or mark mode" confusion. Selection count appears in the section header so it's obvious which half acts on what. Tri-state counts ("3 / 12") on the action rows mirror the right-click context menu pattern you already use.
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|