152 lines
7.7 KiB
HTML
152 lines
7.7 KiB
HTML
<h2>Pick a layout direction for /my/projects</h2>
|
|
<p class="subtitle">Click a card to select. We'll iterate on the chosen direction next.</p>
|
|
|
|
<style>
|
|
.preview-page { background: #f3f4f6; padding: 14px; border-radius: 6px; min-height: 240px; font-size: 12px; }
|
|
.preview-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#6b7280;}
|
|
.preview-head .crumbs { display:flex; gap:6px; align-items:center;}
|
|
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600;}
|
|
.pill.green { background:#dcfce7; color:#166534;}
|
|
.pill.blue { background:#dbeafe; color:#1d4ed8;}
|
|
.pill.amber { background:#fef3c7; color:#92400e;}
|
|
.pill.gray { background:#e5e7eb; color:#374151;}
|
|
|
|
/* Option A: card grid */
|
|
.a-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px;}
|
|
.a-card { background:white; border:1px solid #d8dadd; border-radius:8px; padding:10px; }
|
|
.a-card .a-title { font-weight:600; color:#111827; margin-bottom:4px;}
|
|
.a-card .a-meta { display:flex; justify-content:space-between; align-items:center; color:#6b7280; font-size:10px;}
|
|
.a-bar { height:4px; background:#e5e7eb; border-radius:99px; margin-top:6px; overflow:hidden;}
|
|
.a-bar > span { display:block; height:100%; background:#22c55e;}
|
|
|
|
/* Option B: enhanced rows */
|
|
.b-row { display:flex; align-items:center; padding:9px 12px; background:white; border:1px solid #d8dadd; border-radius:6px; margin-bottom:4px;}
|
|
.b-row .icon { width:28px; height:28px; border-radius:6px; background:#dbeafe; display:flex;align-items:center;justify-content:center; color:#1d4ed8; font-weight:700; margin-right:10px; font-size:11px;}
|
|
.b-row .name { flex-grow:1; font-weight:600; color:#111827;}
|
|
.b-row .stats { display:flex; gap:6px;}
|
|
.b-row .barwrap { width:80px; height:4px; background:#e5e7eb; border-radius:99px; margin-right:8px;}
|
|
.b-row .barwrap > span { display:block; height:100%; background:#22c55e;}
|
|
|
|
/* Option C: kanban columns */
|
|
.c-cols { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px;}
|
|
.c-col { background:#fafafa; border:1px solid #e5e7eb; border-radius:8px; padding:8px;}
|
|
.c-col h4 { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; margin:0 0 8px;}
|
|
.c-card { background:white; border:1px solid #d8dadd; border-radius:6px; padding:8px; margin-bottom:6px; font-size:11px;}
|
|
.c-card .ct { font-weight:600; color:#111827; margin-bottom:2px;}
|
|
.c-card .cm { color:#6b7280; font-size:10px;}
|
|
</style>
|
|
|
|
<div class="cards">
|
|
|
|
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div class="preview-page">
|
|
<div class="preview-head">
|
|
<span class="crumbs">🏠 / Projects</span>
|
|
<span>Sort: Name ▾</span>
|
|
</div>
|
|
<div class="a-grid">
|
|
<div class="a-card">
|
|
<div class="a-title">S29824</div>
|
|
<div class="a-meta"><span class="pill blue">50 tasks</span><span>62%</span></div>
|
|
<div class="a-bar"><span style="width:62%"></span></div>
|
|
</div>
|
|
<div class="a-card">
|
|
<div class="a-title">Customer Care</div>
|
|
<div class="a-meta"><span class="pill gray">0 tasks</span><span>—</span></div>
|
|
<div class="a-bar"><span style="width:0%"></span></div>
|
|
</div>
|
|
<div class="a-card">
|
|
<div class="a-title">Field Service</div>
|
|
<div class="a-meta"><span class="pill gray">0 tasks</span><span>—</span></div>
|
|
<div class="a-bar"><span style="width:0%"></span></div>
|
|
</div>
|
|
<div class="a-card">
|
|
<div class="a-title">S29824 - Internal</div>
|
|
<div class="a-meta"><span class="pill blue">1 task</span><span>0%</span></div>
|
|
<div class="a-bar"><span style="width:0%"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>A — Card grid</h3>
|
|
<p>Each project is a card with name, task count, % complete, and a tiny progress bar. 2-up on desktop, 1-up on mobile. Most "modern dashboard" feel.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div class="preview-page">
|
|
<div class="preview-head">
|
|
<span class="crumbs">🏠 / Projects</span>
|
|
<span>Sort: Name ▾</span>
|
|
</div>
|
|
<div class="b-row">
|
|
<div class="icon">S2</div>
|
|
<div class="name">S29824</div>
|
|
<div class="barwrap"><span style="width:62%"></span></div>
|
|
<div class="stats"><span class="pill green">62%</span><span class="pill blue">50</span></div>
|
|
</div>
|
|
<div class="b-row">
|
|
<div class="icon" style="background:#fef3c7;color:#92400e">CC</div>
|
|
<div class="name">Customer Care</div>
|
|
<div class="barwrap"><span style="width:0%"></span></div>
|
|
<div class="stats"><span class="pill gray">0%</span><span class="pill gray">0</span></div>
|
|
</div>
|
|
<div class="b-row">
|
|
<div class="icon" style="background:#dcfce7;color:#166534">FS</div>
|
|
<div class="name">Field Service</div>
|
|
<div class="barwrap"><span style="width:0%"></span></div>
|
|
<div class="stats"><span class="pill gray">0%</span><span class="pill gray">0</span></div>
|
|
</div>
|
|
<div class="b-row">
|
|
<div class="icon">S2</div>
|
|
<div class="name">S29824 - Internal</div>
|
|
<div class="barwrap"><span style="width:0%"></span></div>
|
|
<div class="stats"><span class="pill amber">0%</span><span class="pill blue">1</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>B — Enhanced rows</h3>
|
|
<p>Same vertical list, but each row gets an avatar/initials chip, inline progress bar, and badge stats. Closest to the current page; quickest to scan with many projects.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div class="preview-page">
|
|
<div class="preview-head">
|
|
<span class="crumbs">🏠 / Projects</span>
|
|
<span>Group: Status ▾</span>
|
|
</div>
|
|
<div class="c-cols">
|
|
<div class="c-col">
|
|
<h4>● Active</h4>
|
|
<div class="c-card"><div class="ct">S29824</div><div class="cm">50 tasks · 62%</div></div>
|
|
<div class="c-card"><div class="ct">S29824 - Internal</div><div class="cm">1 task · 0%</div></div>
|
|
</div>
|
|
<div class="c-col">
|
|
<h4>● Idle</h4>
|
|
<div class="c-card"><div class="ct">Customer Care</div><div class="cm">0 tasks</div></div>
|
|
<div class="c-card"><div class="ct">Field Service</div><div class="cm">0 tasks</div></div>
|
|
<div class="c-card"><div class="ct">Internal</div><div class="cm">0 tasks</div></div>
|
|
</div>
|
|
<div class="c-col">
|
|
<h4>● Done</h4>
|
|
<div style="color:#9ca3af;font-size:10px;text-align:center;padding:16px 0">Nothing here yet</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>C — Status columns (kanban-ish)</h3>
|
|
<p>Projects grouped into columns by activity (Active / Idle / Done). Visually striking but unusual for a customer portal where users mainly browse to drill into one project.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="subtitle" style="margin-top:18px">My recommendation: <b>A — Card grid</b>. It's the most "modern" feel you asked for, scales gracefully to a few or many projects, and gives room for the data we already compute (task counts, % done, hours). B is a strong runner-up if you have lots of projects (20+); C feels overengineered for a portal landing page.</p>
|