Dave
2d87cd505b
Added .superpowers directory to .gitignore to prevent tracking of specific Pocketbase data. Updated Next.js configuration to enable standalone output for optimized Docker image builds, reducing the need for the full node_modules tree.
123 lines
No EOL
6.4 KiB
HTML
123 lines
No EOL
6.4 KiB
HTML
<h2>Which direction for the Projects screen?</h2>
|
|
<p class="subtitle">Same real data (WF, RJBULK, Mega Infrastructure) — three different visual treatments. Click the one that's closest to what you want, even if it's not perfect yet.</p>
|
|
|
|
<style>
|
|
.pm-tile { border: 1px solid #2a2a32; border-radius: 10px; padding: 12px; background: #1c1c22; }
|
|
.pm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
|
|
.pm-name { font-size: 13px; font-weight: 600; color: #eee; }
|
|
.pm-sub { font-size: 11px; color: #8a8a94; margin-top: 2px; }
|
|
.pm-group { margin-bottom: 14px; }
|
|
.pm-group-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a94; margin-bottom: 6px; }
|
|
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.pm-pill { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: #3a2a20; color: #e2a25a; }
|
|
.pm-bar-track { height: 4px; border-radius: 2px; background: #2a2a32; margin-top: 8px; overflow: hidden; }
|
|
.pm-bar-fill { height: 100%; border-radius: 2px; }
|
|
.pm-banner { border-radius: 10px 10px 0 0; padding: 8px 12px; font-size: 11px; font-weight: 600; color: #fff; }
|
|
.pm-banner-body { border: 1px solid #2a2a32; border-top: none; border-radius: 0 0 10px 10px; padding: 10px; background: #1c1c22; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
</style>
|
|
|
|
<div class="cards">
|
|
|
|
<div class="card" data-choice="minimal" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="padding:14px; background:#111116;">
|
|
<div class="pm-group">
|
|
<div class="pm-group-label"><span class="pm-dot" style="background:#3d7bd9"></span>WF</div>
|
|
<div class="pm-grid">
|
|
<div class="pm-tile" style="border-left:3px solid #3d7bd9;">
|
|
<div class="pm-name">WFDash Web App</div>
|
|
<div class="pm-sub">6 open cards</div>
|
|
</div>
|
|
<div class="pm-tile" style="border-left:3px solid #3d7bd9;">
|
|
<div class="pm-name">WFDASH Driver App</div>
|
|
<div class="pm-sub">0 open cards</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pm-group">
|
|
<div class="pm-group-label"><span class="pm-dot" style="background:#c96a3f"></span>RJBULK</div>
|
|
<div class="pm-grid">
|
|
<div class="pm-tile" style="border-left:3px solid #c96a3f;">
|
|
<div class="pm-name">RJ Bulk App</div>
|
|
<div class="pm-sub">0 open cards</div>
|
|
</div>
|
|
<div class="pm-tile" style="border-left:3px solid #c96a3f; opacity:0.75;">
|
|
<div class="pm-name">Diesel Depot App</div>
|
|
<div class="pm-sub">Prototype · 0 open</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>A — Minimal & Spacious</h3>
|
|
<p>Client colour moves to a left-edge stripe on the tile itself, instead of a separate dot on both the header and the tile. Less border noise, more whitespace, one clean line of status text instead of pills.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="rich" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="padding:14px; background:#111116;">
|
|
<div class="pm-group">
|
|
<div class="pm-group-label"><span class="pm-dot" style="background:#3d7bd9"></span>WF</div>
|
|
<div class="pm-grid">
|
|
<div class="pm-tile">
|
|
<div class="pm-name">WFDash Web App</div>
|
|
<div class="pm-sub">6 open · 2 due this week</div>
|
|
<div class="pm-bar-track"><div class="pm-bar-fill" style="width:64%; background:#3d7bd9;"></div></div>
|
|
</div>
|
|
<div class="pm-tile">
|
|
<div class="pm-name">WFDASH Driver App</div>
|
|
<div class="pm-sub">No activity yet</div>
|
|
<div class="pm-bar-track"><div class="pm-bar-fill" style="width:4%; background:#4a4a55;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pm-group">
|
|
<div class="pm-group-label"><span class="pm-dot" style="background:#c96a3f"></span>RJBULK</div>
|
|
<div class="pm-grid">
|
|
<div class="pm-tile">
|
|
<div class="pm-name">RJ Bulk App <span class="pm-pill">Prototype</span></div>
|
|
<div class="pm-sub">No activity yet</div>
|
|
<div class="pm-bar-track"><div class="pm-bar-fill" style="width:0%;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>B — Richer Data Cards</h3>
|
|
<p>Each tile becomes a tiny dashboard preview: a progress bar and a status line ("2 due this week", "No activity yet") instead of a bare number. More useful at a glance, more visually busy.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="banner" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="padding:14px; background:#111116;">
|
|
<div class="pm-banner" style="background:#3d7bd9;">WF</div>
|
|
<div class="pm-banner-body" style="margin-bottom:14px;">
|
|
<div class="pm-tile" style="border:none; background:transparent; padding:4px;">
|
|
<div class="pm-name">WFDash Web App</div>
|
|
<div class="pm-sub">6 open cards</div>
|
|
</div>
|
|
<div class="pm-tile" style="border:none; background:transparent; padding:4px;">
|
|
<div class="pm-name">WFDASH Driver App</div>
|
|
<div class="pm-sub">0 open cards</div>
|
|
</div>
|
|
</div>
|
|
<div class="pm-banner" style="background:#c96a3f;">RJBULK</div>
|
|
<div class="pm-banner-body">
|
|
<div class="pm-tile" style="border:none; background:transparent; padding:4px;">
|
|
<div class="pm-name">RJ Bulk App</div>
|
|
<div class="pm-sub">0 open cards</div>
|
|
</div>
|
|
<div class="pm-tile" style="border:none; background:transparent; padding:4px;">
|
|
<div class="pm-name">Diesel Depot App <span class="pm-pill">Prototype</span></div>
|
|
<div class="pm-sub">0 open cards</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>C — Coloured Client Banners</h3>
|
|
<p>Each client gets a solid-colour header bar instead of a small dot + label. Strongest visual separation between clients at a glance across a long list; tiles underneath stay flat and simple since the banner already carries the identity.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="subtitle" style="margin-top:16px;">These are rough — spacing, exact colours and card size are easy to tune once we pick a direction. You can also mix ideas from more than one (e.g. banners from C with the progress bar from B).</p> |