admin/pinkudex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
pinkudex/mockups/toolbar-naming-mockups.html
T
admin 7e2c2ff89c Initial commit
2026-05-26 22:46:00 +02:00

242 lines
11 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pinkudex · Toolbar naming — 10 suggestions</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; }
.legend {
margin: 18px 0 24px; padding: 14px 18px;
background: var(--bg-1); border: 1px solid var(--border);
border-radius: 12px; display: grid; grid-template-columns: 50px 1fr; gap: 8px 14px;
font-size: 13px; color: var(--fg-dim);
}
.legend dt { font-family: ui-monospace, monospace; color: var(--cyan); font-weight: 600; }
.legend dd { margin: 0; }
.legend strong { color: var(--fg); }
.row {
border: 1px solid var(--border); border-radius: 14px; background: var(--bg-1);
padding: 14px 18px; margin-bottom: 14px;
display: grid; grid-template-columns: 36px 1fr 1fr; gap: 14px; align-items: center;
}
.row .num {
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--violet));
display: grid; place-items: center;
font-weight: 700; font-size: 12px; color: #0a0710;
}
.row .toolbar {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.row .desc { color: var(--fg-dim); font-size: 12px; line-height: 1.5; }
.row .desc em { color: var(--fg); font-style: normal; font-weight: 500; }
.pill {
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); white-space: nowrap;
}
.pill.all { background: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.4); color: var(--cyan); }
.pill.disabled { opacity: 0.5; }
.pill svg { width: 14px; height: 14px; opacity: 0.85; }
.pill .cv { font-size: 10px; opacity: 0.5; margin-left: 2px; }
.pick {
margin: 24px 0 12px; padding: 14px 18px;
border-radius: 12px; background: rgba(52,211,153,0.07);
border: 1px solid rgba(52,211,153,0.25);
color: var(--mint); font-size: 13px;
}
.pick strong { color: var(--mint); }
</style>
</head>
<body>
<div class="page">
<div class="page-header">
<h1>Toolbar naming — 10 suggestions</h1>
<p>Five buttons need distinct labels. Each row below tries a different naming strategy. Currently both #3 and #4 read as "Status", which is the bug.</p>
</div>
<dl class="legend">
<dt>Slot 1</dt>
<dd><strong>All / clear-all</strong> — resets every filter back to default.</dd>
<dt>Slot 2</dt>
<dd><strong>Multi-entity filter</strong> — actresses, studios, series, genres, collections, tags, categories.</dd>
<dt>Slot 3</dt>
<dd><strong>Engagement axes</strong> — watched, rated, has-collection, has-tags (binary tri-state per axis).</dd>
<dt>Slot 4</dt>
<dd><strong>Mark filter</strong> — VIP / Favorite / Owned / Unmarked (multi-select).</dd>
<dt>Slot 5</dt>
<dd><strong>Mark action</strong> — applies a mark to the current selection (disabled when nothing selected).</dd>
</dl>
<!-- 1 -->
<div class="row">
<div class="num">1</div>
<div class="toolbar">
<span class="pill all">All</span>
<span class="pill">📁 Browse <span class="cv">▾</span></span>
<span class="pill">⏱ Activity <span class="cv">▾</span></span>
<span class="pill">★ Stars <span class="cv">▾</span></span>
<span class="pill disabled">✏ Apply <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Browse / Activity / Stars / Apply</em><br/>"Browse" = entity drill-in. "Activity" = how you've engaged. "Stars" = curated marks. "Apply" = the verb. Compact, distinctive.</div>
</div>
<!-- 2 -->
<div class="row">
<div class="num">2</div>
<div class="toolbar">
<span class="pill all">All</span>
<span class="pill">🏷 Tags &amp; People <span class="cv">▾</span></span>
<span class="pill">⏱ State <span class="cv">▾</span></span>
<span class="pill">◆ Marks <span class="cv">▾</span></span>
<span class="pill disabled">✏ Mark As <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Tags &amp; People / State / Marks / Mark As</em><br/>Most literal. Slot 2 says exactly what's inside; "Marks" (filter) and "Mark As" (verb) read as a noun/verb pair.</div>
</div>
<!-- 3 -->
<div class="row">
<div class="num">3</div>
<div class="toolbar">
<span class="pill all">Reset</span>
<span class="pill">🔍 Filter <span class="cv">▾</span></span>
<span class="pill">⏱ Watched &amp; Rated <span class="cv">▾</span></span>
<span class="pill">◆ Highlights <span class="cv">▾</span></span>
<span class="pill disabled">✏ Mark As <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Filter / Watched &amp; Rated / Highlights / Mark As</em><br/>Slot 3 spells out the two engagement axes that matter most. "Highlights" is curated/standout flavor for VIP/Fav/Owned.</div>
</div>
<!-- 4 -->
<div class="row">
<div class="num">4</div>
<div class="toolbar">
<span class="pill all">All</span>
<span class="pill">🔗 Match <span class="cv">▾</span></span>
<span class="pill">⏱ Progress <span class="cv">▾</span></span>
<span class="pill">◆ Tier <span class="cv">▾</span></span>
<span class="pill disabled">✏ Set <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Match / Progress / Tier / Set</em><br/>Single-word everything. "Tier" reframes VIP/Fav/Owned as quality bands. Tight but more abstract.</div>
</div>
<!-- 5 -->
<div class="row">
<div class="num">5</div>
<div class="toolbar">
<span class="pill all">All</span>
<span class="pill">🏷 Filter By <span class="cv">▾</span></span>
<span class="pill">⏱ Engagement <span class="cv">▾</span></span>
<span class="pill">◆ Marks <span class="cv">▾</span></span>
<span class="pill disabled">✏ Mark As <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Filter By / Engagement / Marks / Mark As</em><br/>Keep "Filter By" (current). Rename slot 3 → "Engagement" (covers watched/rated/tagged/in collection). "Marks"/"Mark As" pair handles the rest.</div>
</div>
<!-- 6 -->
<div class="row">
<div class="num">6</div>
<div class="toolbar">
<span class="pill all">All</span>
<span class="pill">🔗 Connections <span class="cv">▾</span></span>
<span class="pill">⏱ Behavior <span class="cv">▾</span></span>
<span class="pill">◆ Highlights <span class="cv">▾</span></span>
<span class="pill disabled">✏ Apply Marks <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Connections / Behavior / Highlights / Apply Marks</em><br/>Conceptual: who-what-when. "Connections" reads as relationships (people, studios). "Apply Marks" makes the verb explicit.</div>
</div>
<!-- 7 -->
<div class="row">
<div class="num">7</div>
<div class="toolbar">
<span class="pill all">Show All</span>
<span class="pill">📂 Categories <span class="cv">▾</span></span>
<span class="pill">⏱ Activity <span class="cv">▾</span></span>
<span class="pill">◆ Marks <span class="cv">▾</span></span>
<span class="pill disabled">✏ Mark Selected <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Categories / Activity / Marks / Mark Selected</em><br/>"Categories" is broad; "Mark Selected" tells you exactly what gets the action. Risk: "Categories" overlaps with the actress-categories nav item.</div>
</div>
<!-- 8 -->
<div class="row">
<div class="num">8</div>
<div class="toolbar">
<span class="pill all">All</span>
<span class="pill">🔍 Filter <span class="cv">▾</span></span>
<span class="pill">⏱ Watch State <span class="cv">▾</span></span>
<span class="pill">◆ Marks <span class="cv">▾</span></span>
<span class="pill disabled">✏ Mark As <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Filter / Watch State / Marks / Mark As</em><br/>Drops "By", picks up the watched-flavor of slot 3 since that's its most-used axis.</div>
</div>
<!-- 9 -->
<div class="row">
<div class="num">9</div>
<div class="toolbar">
<span class="pill all">All</span>
<span class="pill">🔗 Match <span class="cv">▾</span></span>
<span class="pill">⏱ State <span class="cv">▾</span></span>
<span class="pill">◆ Picks <span class="cv">▾</span></span>
<span class="pill disabled">✏ Mark As <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Match / State / Picks / Mark As</em><br/>"Picks" reframes VIP/Fav/Owned as user picks (curated). One-word everything; clean toolbar look.</div>
</div>
<!-- 10 -->
<div class="row">
<div class="num">10</div>
<div class="toolbar">
<span class="pill all">All</span>
<span class="pill">🏷 Filter By <span class="cv">▾</span></span>
<span class="pill">⏱ How <span class="cv">▾</span></span>
<span class="pill">◆ What <span class="cv">▾</span></span>
<span class="pill disabled">✏ Mark As <span class="cv">▾</span></span>
</div>
<div class="desc"><em>Filter By / How / What / Mark As</em><br/>Pithy: "How" you've engaged (watched/rated) vs "What" it is (VIP/Owned). Cute but might be too clever to be discoverable on first look.</div>
</div>
<div class="pick">
<strong>My pick: #2 — All / Tags &amp; People / State / Marks / Mark As.</strong> Most literal labels, no ambiguity, "Marks" + "Mark As" is a clean noun/verb pair. <strong>Runner-up: #5</strong> if you want to keep "Filter By" — swap slot 3 to "Engagement" for clarity.
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink