admin/pinkudex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
admin
2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockups/filter-merged-mockup.html
+352
View File
@@ -0,0 +1,352 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pinkudex · Merged Filter (Marks + Watch State + Has…)</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: 1100px; 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; }
.page-header strong { color: var(--fg); }
/* Toolbar */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 999px;
background: var(--glass); border: 1px solid var(--border-strong);
font-size: 13px; color: var(--fg-dim);
min-width: 140px; justify-content: space-between;
white-space: nowrap;
}
.pill .lbl { display: inline-flex; align-items: center; gap: 6px; }
.pill .cv { font-size: 10px; opacity: 0.5; }
.pill.all { background: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.4); color: var(--cyan); min-width: auto; }
.pill.disabled { opacity: 0.45; }
.pill.active-cyan {
background: rgba(34,211,238,0.10);
border-color: rgba(34,211,238,0.4);
color: var(--cyan);
}
.badge {
display: inline-grid; place-items: center;
min-width: 18px; height: 18px;
border-radius: 999px;
background: var(--cyan); color: #0a0710;
font-family: ui-monospace, monospace;
font-size: 10px; font-weight: 700;
padding: 0 4px;
margin-left: 4px;
}
/* Popover */
.panel {
width: 460px;
background: var(--bg-0);
border: 1px solid var(--border-strong);
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0,0,0,0.6);
overflow: hidden;
margin-top: 8px;
}
.section { padding: 14px 16px; }
.section + .section { border-top: 1px solid var(--border); }
.section-h {
display: flex; align-items: center; justify-content: space-between;
font-family: ui-monospace, monospace;
font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--cyan);
margin-bottom: 10px;
}
.section-h .left { display: inline-flex; align-items: center; gap: 6px; }
.section-h .left .ico { display: inline-grid; place-items: center; }
.section-h .left .ico svg { width: 12px; height: 12px; }
.section-h .count {
color: var(--cyan); font-weight: 700; margin-left: 4px;
}
.section-h .reset {
color: var(--fg-muted); font-family: ui-monospace, monospace;
cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.section-h .reset:hover { color: var(--fg); background: var(--glass); }
.section-h .reset.dim { opacity: 0.4; pointer-events: none; }
.section-foot {
display: flex; justify-content: flex-end;
margin-top: 8px;
}
.section-foot .reset {
color: var(--fg-muted); font-family: ui-monospace, monospace;
font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.section-foot .reset:hover { color: var(--fg); background: var(--glass); }
.section-foot .reset.dim { opacity: 0.4; pointer-events: none; }
/* Marks: checkbox rows */
.check-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: 13px;
color: var(--fg-dim);
}
.check-row:hover { background: var(--glass); color: var(--fg); }
.check-row.on.cyan { background: rgba(34,211,238,0.10); color: var(--cyan); }
.check-row.on.amber { background: rgba(251,191,36,0.10); color: var(--amber); }
.check-row.on.violet { background: rgba(167,139,250,0.10); color: var(--violet); }
.check-row.on.muted { background: var(--glass-strong); color: var(--fg); }
.cb {
width: 16px; height: 16px; border-radius: 4px;
display: grid; place-items: center;
border: 1px solid var(--border-strong);
font-size: 10px; flex-shrink: 0;
}
.cb.on.cyan { background: rgba(34,211,238,0.30); border-color: var(--cyan); color: var(--cyan); }
.cb.on.amber { background: rgba(251,191,36,0.25); border-color: var(--amber); color: var(--amber); }
.cb.on.violet { background: rgba(167,139,250,0.30); border-color: var(--violet); color: var(--violet); }
.cb.on.muted { background: rgba(168,164,184,0.30); border-color: var(--fg-dim); color: var(--fg); }
.check-row .ico { display: inline-grid; place-items: center; }
.check-row .ico svg { width: 14px; height: 14px; }
.check-row .ico.cyan { color: var(--cyan); }
.check-row .ico.amber { color: var(--amber); }
.check-row .ico.violet { color: var(--violet); }
.check-row .ico.muted { color: var(--fg-muted); }
.check-row .name { flex: 1; }
.mark-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mark-grid .check-row { padding: 6px 6px; gap: 6px; font-size: 12px; }
.mark-grid .check-row .name { white-space: nowrap; }
/* Tri-state axis */
.axis { margin-bottom: 10px; }
.axis:last-child { margin-bottom: 0; }
.axis-h {
display: flex; align-items: center; gap: 6px;
font-family: ui-monospace, monospace;
font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--cyan);
margin-bottom: 4px;
}
.axis-h svg { width: 12px; height: 12px; }
.axis-options {
display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.axis-options .opt {
flex: 1; text-align: center; padding: 6px 8px;
font-size: 11px; font-family: ui-monospace, monospace;
color: var(--fg-muted);
border-right: 1px solid var(--border);
cursor: pointer;
white-space: nowrap;
}
.axis-options .opt:last-child { border-right: 0; }
.axis-options .opt:hover { background: var(--glass); color: var(--fg); }
.axis-options .opt.on {
background: rgba(34,211,238,0.20);
color: var(--cyan);
font-weight: 700;
}
/* Footer */
.footer {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 16px;
background: var(--bg-1);
border-top: 1px solid var(--border);
font-family: ui-monospace, monospace;
font-size: 11px;
color: var(--fg-muted);
}
.footer .reset-all { color: var(--cyan); cursor: pointer; }
.footer .reset-all:hover { text-decoration: underline; }
.footer .reset-all.dim { opacity: 0.4; pointer-events: none; }
/* Scenarios layout */
.scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.scenario { display: flex; flex-direction: column; align-items: center; gap: 0; }
.scenario-label { color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.pick {
margin: 32px 0 12px; padding: 14px 18px;
border-radius: 12px; background: rgba(34,211,238,0.07);
border: 1px solid rgba(34,211,238,0.25);
color: var(--cyan); font-size: 13px;
}
.pick strong { color: var(--cyan); }
.pick em { color: var(--fg); font-style: normal; }
.pick ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; color: var(--fg-dim); }
</style>
</head>
<body>
<div class="page">
<div class="page-header">
<h1>Merged Filter · Marks + Watch State + Has…</h1>
<p>One <strong>Filter</strong> button replaces today's separate <strong>State</strong> and <strong>Filter</strong> popovers. Three sections so the labels stay honest: Tags/Collection are presence facets, not activities. Cyan accent throughout (theme primary), no coral.</p>
</div>
<div class="scenarios">
<!-- Scenario A: empty -->
<div class="scenario">
<div class="scenario-label">Nothing active</div>
<div class="toolbar">
<span class="pill all">ALL</span>
<span class="pill"><span class="lbl">📁 Browse</span><span class="cv">▾</span></span>
<span class="pill"><span class="lbl">🔖 Filter</span><span class="cv">▾</span></span>
<span class="pill disabled"><span class="lbl">🏷 Mark As</span><span class="cv">▾</span></span>
</div>
<div class="panel">
<div class="section">
<div class="mark-grid">
<div class="check-row"><span class="cb">&nbsp;</span><span class="ico cyan">◆</span><span class="name">VIP</span></div>
<div class="check-row"><span class="cb">&nbsp;</span><span class="ico amber">★</span><span class="name">Favorite</span></div>
<div class="check-row"><span class="cb">&nbsp;</span><span class="ico violet">▣</span><span class="name">Owned</span></div>
<div class="check-row"><span class="cb">&nbsp;</span><span class="ico muted">⊖</span><span class="name">Unmarked</span></div>
</div> </div>
<div class="section">
<div class="axis">
<div class="axis-h">👁 Watched</div>
<div class="axis-options">
<div class="opt on">ALL</div>
<div class="opt">Watched</div>
<div class="opt">Unwatched</div>
</div>
</div>
<div class="axis">
<div class="axis-h">★ Rated</div>
<div class="axis-options">
<div class="opt on">ALL</div>
<div class="opt">Rated</div>
<div class="opt">No Rating</div>
</div>
</div> </div>
<div class="section">
<div class="axis">
<div class="axis-h">📂 Collection</div>
<div class="axis-options">
<div class="opt on">ALL</div>
<div class="opt">Has</div>
<div class="opt">Missing</div>
</div>
</div>
<div class="axis">
<div class="axis-h">🏷 Tags</div>
<div class="axis-options">
<div class="opt on">ALL</div>
<div class="opt">Has</div>
<div class="opt">Missing</div>
</div>
</div> </div>
<div class="footer">
<span>no filters set</span>
<span class="reset-all dim">Reset All</span>
</div>
</div>
</div>
<!-- Scenario B: cross-cutting active -->
<div class="scenario">
<div class="scenario-label">VIP + Owned + Watched + No Tags</div>
<div class="toolbar">
<span class="pill all">ALL</span>
<span class="pill"><span class="lbl">📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active-cyan"><span class="lbl">🔖 Filter <span class="badge">4</span></span><span class="cv">▾</span></span>
<span class="pill disabled"><span class="lbl">🏷 Mark As</span><span class="cv">▾</span></span>
</div>
<div class="panel">
<div class="section">
<div class="mark-grid">
<div class="check-row on cyan"><span class="cb on cyan">✓</span><span class="ico cyan">◆</span><span class="name">VIP</span></div>
<div class="check-row"><span class="cb">&nbsp;</span><span class="ico amber">★</span><span class="name">Favorite</span></div>
<div class="check-row on violet"><span class="cb on violet">✓</span><span class="ico violet">▣</span><span class="name">Owned</span></div>
<div class="check-row"><span class="cb">&nbsp;</span><span class="ico muted">⊖</span><span class="name">Unmarked</span></div>
</div> </div>
<div class="section">
<div class="axis">
<div class="axis-h">👁 Watched</div>
<div class="axis-options">
<div class="opt">ALL</div>
<div class="opt on">Watched</div>
<div class="opt">Unwatched</div>
</div>
</div>
<div class="axis">
<div class="axis-h">★ Rated</div>
<div class="axis-options">
<div class="opt on">ALL</div>
<div class="opt">Rated</div>
<div class="opt">No Rating</div>
</div>
</div> </div>
<div class="section">
<div class="axis">
<div class="axis-h">📂 Collection</div>
<div class="axis-options">
<div class="opt on">ALL</div>
<div class="opt">Has</div>
<div class="opt">Missing</div>
</div>
</div>
<div class="axis">
<div class="axis-h">🏷 Tags</div>
<div class="axis-options">
<div class="opt">ALL</div>
<div class="opt">Has</div>
<div class="opt on">Missing</div>
</div>
</div> </div>
<div class="footer">
<span>4 filters · 2 marks · 1 watch · 1 has</span>
<span class="reset-all">Reset All</span>
</div>
</div>
</div>
</div>
<div class="pick">
<strong>Notes</strong>
<ul>
<li><em>Three sections</em>: Marks (multi-select OR), Watch State (tri-state per axis), Has… (tri-state presence per axis). Each section AND'd against the others.</li>
<li><em>Single cyan accent</em> for the popover chrome — no coral. Per-row colors stay (cyan VIP, amber Favorite, violet Owned) so individual marks remain visually distinct.</li>
<li><em>One badge</em> on the Filter pill totals everything; footer breaks it down.</li>
<li><em>Per-section reset</em> link in each header; <em>Reset All</em> in the footer for the nuclear option.</li>
<li>You can now express composite queries directly: "VIP + Watched", "Favorite + No Tags", etc. — what triggered this.</li>
</ul>
</div>
</div>
</body>
</html>