dcovington
/
Campaign_Tracker
1
0
複製 0
程式碼 問題 4 合併請求 0 版本發佈 0 Wiki 活動
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 提交
2 分支
17MB
目錄樹: 6a10f82863
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 '6a10f82863'
${ noResults }
Campaign_Tracker/_bmad-output/planning-artifacts/ux-design-directions.html

453 line
15KB
原始文件 Blame 歷史記錄 

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.   <meta charset="utf-8" />

  5.   <meta name="viewport" content="width=device-width, initial-scale=1" />

  6.   <title>UX Design Directions - Campaign_Tracker App</title>

  7.   <style>

  8.     :root {

  9.       --bg: #f7f9fc;

  10.       --surface: #ffffff;

  11.       --text: #111827;

  12.       --muted: #4b5563;

  13.       --border: #d0d7e2;

  14.       --primary: #1f4e79;

  15.       --accent: #2563eb;

  16.       --ok: #2e7d32;

  17.       --warn: #b45309;

  18.       --err: #b91c1c;

  19.       --radius: 10px;

  20.     }

  21. 

  22.     * { box-sizing: border-box; }

  23.     body {

  24.       margin: 0;

  25.       background: var(--bg);

  26.       color: var(--text);

  27.       font: 14px/1.5 "Public Sans", "Segoe UI", Arial, sans-serif;

  28.     }

  29. 

  30.     .topbar {

  31.       position: sticky;

  32.       top: 0;

  33.       z-index: 10;

  34.       background: #0f172a;

  35.       color: #e5e7eb;

  36.       border-bottom: 1px solid #1f2937;

  37.       padding: 12px 18px;

  38.       display: flex;

  39.       flex-wrap: wrap;

  40.       gap: 12px;

  41.       align-items: center;

  42.       justify-content: space-between;

  43.     }

  44. 

  45.     .topbar h1 {

  46.       margin: 0;

  47.       font-size: 16px;

  48.       letter-spacing: 0.01em;

  49.       font-weight: 600;

  50.     }

  51. 

  52.     .legend {

  53.       display: flex;

  54.       gap: 8px;

  55.       flex-wrap: wrap;

  56.     }

  57. 

  58.     .pill {

  59.       border: 1px solid #334155;

  60.       border-radius: 999px;

  61.       padding: 2px 10px;

  62.       font-size: 12px;

  63.       background: #111827;

  64.       color: #cbd5e1;

  65.     }

  66. 

  67.     .wrap {

  68.       max-width: 1480px;

  69.       margin: 0 auto;

  70.       padding: 20px;

  71.       display: grid;

  72.       gap: 16px;

  73.       grid-template-columns: repeat(12, minmax(0, 1fr));

  74.     }

  75. 

  76.     .summary {

  77.       grid-column: span 12;

  78.       background: var(--surface);

  79.       border: 1px solid var(--border);

  80.       border-radius: var(--radius);

  81.       padding: 14px 16px;

  82.     }

  83. 

  84.     .summary h2 {

  85.       margin: 0 0 6px;

  86.       font-size: 16px;

  87.     }

  88. 

  89.     .grid {

  90.       grid-column: span 12;

  91.       display: grid;

  92.       grid-template-columns: repeat(2, minmax(0, 1fr));

  93.       gap: 16px;

  94.     }

  95. 

  96.     .card {

  97.       background: var(--surface);

  98.       border: 1px solid var(--border);

  99.       border-radius: var(--radius);

  100.       overflow: hidden;

  101.       box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);

  102.     }

  103. 

  104.     .card:hover {

  105.       border-color: #9fb6d6;

  106.       box-shadow: 0 8px 28px rgba(31, 78, 121, 0.15);

  107.       transform: translateY(-1px);

  108.       transition: all 0.2s ease;

  109.     }

  110. 

  111.     .card-head {

  112.       padding: 12px 14px;

  113.       border-bottom: 1px solid var(--border);

  114.       display: flex;

  115.       align-items: center;

  116.       justify-content: space-between;

  117.       gap: 8px;

  118.     }

  119. 

  120.     .card-head h3 {

  121.       margin: 0;

  122.       font-size: 14px;

  123.       font-weight: 600;

  124.     }

  125. 

  126.     .tag {

  127.       font-size: 11px;

  128.       border-radius: 999px;

  129.       border: 1px solid #c7d2fe;

  130.       background: #eef2ff;

  131.       color: #3730a3;

  132.       padding: 2px 8px;

  133.       white-space: nowrap;

  134.     }

  135. 

  136.     .preview {

  137.       background: #f8fafc;

  138.       min-height: 320px;

  139.       padding: 10px;

  140.     }

  141. 

  142.     .mock {

  143.       height: 100%;

  144.       border: 1px solid #cbd5e1;

  145.       border-radius: 8px;

  146.       background: white;

  147.       overflow: hidden;

  148.       display: grid;

  149.     }

  150. 

  151.     .mock-top {

  152.       border-bottom: 1px solid #e2e8f0;

  153.       background: #f8fafc;

  154.       height: 34px;

  155.       display: flex;

  156.       align-items: center;

  157.       padding: 0 10px;

  158.       gap: 8px;

  159.       color: #334155;

  160.       font-size: 12px;

  161.     }

  162. 

  163.     .dot {

  164.       width: 8px;

  165.       height: 8px;

  166.       border-radius: 999px;

  167.       background: #94a3b8;

  168.     }

  169. 

  170.     .body-a { grid-template-columns: 220px 1fr 280px; }

  171.     .body-b { grid-template-columns: 1fr 340px; }

  172.     .body-c { grid-template-columns: 220px 1fr; grid-template-rows: 1fr 130px; }

  173.     .body-d { grid-template-columns: 1fr; grid-template-rows: 72px 1fr; }

  174.     .body-e { grid-template-columns: 260px 1fr; }

  175.     .body-f { grid-template-columns: 1fr; }

  176. 

  177.     .pane {

  178.       border-right: 1px solid #e2e8f0;

  179.       padding: 8px;

  180.       background: #fff;

  181.     }

  182.     .pane:last-child { border-right: 0; }

  183.     .pane.soft { background: #f8fafc; }

  184.     .pane.dark {

  185.       background: #0f172a;

  186.       color: #cbd5e1;

  187.       border-right: 1px solid #1e293b;

  188.     }

  189. 

  190.     .lane {

  191.       margin-bottom: 8px;

  192.       border: 1px solid #e2e8f0;

  193.       border-radius: 6px;

  194.       padding: 6px 8px;

  195.       font-size: 12px;

  196.       background: #ffffff;

  197.     }

  198. 

  199.     .lane.ok { border-left: 4px solid var(--ok); }

  200.     .lane.warn { border-left: 4px solid var(--warn); }

  201.     .lane.err { border-left: 4px solid var(--err); }

  202. 

  203.     .data-table {

  204.       width: 100%;

  205.       border-collapse: collapse;

  206.       font-size: 12px;

  207.     }

  208.     .data-table th,

  209.     .data-table td {

  210.       border: 1px solid #e2e8f0;

  211.       padding: 4px 6px;

  212.       text-align: left;

  213.     }

  214.     .data-table th {

  215.       background: #eff6ff;

  216.       color: #1e3a8a;

  217.       font-weight: 600;

  218.     }

  219. 

  220.     .chip {

  221.       font-size: 11px;

  222.       padding: 1px 6px;

  223.       border-radius: 999px;

  224.       border: 1px solid #dbeafe;

  225.       background: #eff6ff;

  226.       color: #1d4ed8;

  227.     }

  228.     .chip.ok { background: #ecfdf5; border-color: #bbf7d0; color: #166534; }

  229.     .chip.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }

  230.     .chip.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

  231. 

  232.     .notes {

  233.       padding: 10px 14px 14px;

  234.       border-top: 1px solid var(--border);

  235.       color: #334155;

  236.       font-size: 12px;

  237.       background: #fcfdff;

  238.     }

  239.     .notes strong { color: #0f172a; }

  240. 

  241.     .footer {

  242.       grid-column: span 12;

  243.       background: var(--surface);

  244.       border: 1px solid var(--border);

  245.       border-radius: var(--radius);

  246.       padding: 12px 14px;

  247.       color: #334155;

  248.       font-size: 13px;

  249.     }

  250. 

  251.     @media (max-width: 1180px) {

  252.       .grid { grid-template-columns: 1fr; }

  253.     }

  254.   </style>

  255. </head>

  256. <body>

  257.   <header class="topbar">

  258.     <h1>Design Direction Showcase • Campaign_Tracker App</h1>

  259.     <div class="legend">

  260.       <span class="pill">PC-first</span>

  261.       <span class="pill">Ant Design Foundation</span>

  262.       <span class="pill">Dense Operations UX</span>

  263.       <span class="pill">Status + Provenance Visible</span>

  264.     </div>

  265.   </header>

  266. 

  267.   <main class="wrap">

  268.     <section class="summary">

  269.       <h2>How to Evaluate</h2>

  270.       Compare directions by layout intuitiveness, risk visibility, editing clarity, and workflow speed under deadline pressure.

  271.     </section>

  272. 

  273.     <section class="grid">

  274.       <article class="card">

  275.         <div class="card-head">

  276.           <h3>Direction 1: Operations Command Desk</h3>

  277.           <span class="tag">Tri-pane control</span>

  278.         </div>

  279.         <div class="preview">

  280.           <div class="mock" style="grid-template-rows:34px 1fr;">

  281.             <div class="mock-top"><span class="dot"></span><span class="dot"></span><span class="dot"></span> Command Desk / Election Cycle Workspace</div>

  282.             <div class="mock body-a">

  283.               <aside class="pane dark">

  284.                 <div class="lane">Municipalities</div>

  285.                 <div class="lane">Election Cycles</div>

  286.                 <div class="lane">Saved Filters</div>

  287.               </aside>

  288.               <section class="pane">

  289.                 <table class="data-table">

  290.                   <thead><tr><th>Town</th><th>Cycle</th><th>Milestone</th><th>Status</th></tr></thead>

  291.                   <tbody>

  292.                     <tr><td>Northfield</td><td>2026-Q3</td><td>Addressing</td><td><span class="chip warn">At Risk</span></td></tr>

  293.                     <tr><td>Oak Hills</td><td>2026-Q3</td><td>Sort Complete</td><td><span class="chip ok">On Track</span></td></tr>

  294.                     <tr><td>Lakeview</td><td>2026-Q3</td><td>Dispatch</td><td><span class="chip err">Blocked</span></td></tr>

  295.                   </tbody>

  296.                 </table>

  297.               </section>

  298.               <aside class="pane soft">

  299.                 <div class="lane err">Cutoff Risk Queue</div>

  300.                 <div class="lane warn">Dependency Alerts</div>

  301.                 <div class="lane">Provenance Details</div>

  302.               </aside>

  303.             </div>

  304.           </div>

  305.         </div>

  306.         <div class="notes"><strong>Best for:</strong> Maximum situational awareness and real-time risk triage.</div>

  307.       </article>

  308. 

  309.       <article class="card">

  310.         <div class="card-head">

  311.           <h3>Direction 2: Queue + Inspector</h3>

  312.           <span class="tag">Speed edits</span>

  313.         </div>

  314.         <div class="preview">

  315.           <div class="mock" style="grid-template-rows:34px 1fr;">

  316.             <div class="mock-top"><span class="dot"></span><span class="dot"></span><span class="dot"></span> Priority Queue / Detail Inspector</div>

  317.             <div class="mock body-b">

  318.               <section class="pane">

  319.                 <div class="lane warn">At-Risk: Millbrook sorting due in 18h</div>

  320.                 <div class="lane err">Blocked: Easton transport window conflict</div>

  321.                 <div class="lane ok">On Track: Pinecrest office copies</div>

  322.                 <div class="lane">Ready: Blue envelope print</div>

  323.               </section>

  324.               <aside class="pane soft">

  325.                 <div class="lane">Inline Edit Fields</div>

  326.                 <div class="lane">Safe Commit Checks</div>

  327.                 <div class="lane">Reason Code + Save</div>

  328.                 <div class="lane">Audit Trail</div>

  329.               </aside>

  330.             </div>

  331.           </div>

  332.         </div>

  333.         <div class="notes"><strong>Best for:</strong> Fast operator throughput with minimal navigation friction.</div>

  334.       </article>

  335. 

  336.       <article class="card">

  337.         <div class="card-head">

  338.           <h3>Direction 3: Spreadsheet Plus</h3>

  339.           <span class="tag">Excel-inspired</span>

  340.         </div>

  341.         <div class="preview">

  342.           <div class="mock" style="grid-template-rows:34px 1fr;">

  343.             <div class="mock-top"><span class="dot"></span><span class="dot"></span><span class="dot"></span> Grid Operations / Trusted Commit</div>

  344.             <div class="mock body-c">

  345.               <aside class="pane soft">

  346.                 <div class="lane">Column Presets</div>

  347.                 <div class="lane">Saved Views</div>

  348.                 <div class="lane">Bulk Actions</div>

  349.               </aside>

  350.               <section class="pane">

  351.                 <table class="data-table">

  352.                   <thead><tr><th>Municipality</th><th>Cycle</th><th>Envelope</th><th>Dispatch</th><th>Owner</th></tr></thead>

  353.                   <tbody>

  354.                     <tr><td>Riverside</td><td>Primary</td><td>Purple</td><td>04/07</td><td>D. Hall</td></tr>

  355.                     <tr><td>Brighton</td><td>General</td><td>Blue</td><td>04/09</td><td>M. Cole</td></tr>

  356.                     <tr><td>Auburn</td><td>General</td><td>Purple</td><td>04/08</td><td>J. Lee</td></tr>

  357.                   </tbody>

  358.                 </table>

  359.               </section>

  360.               <section class="pane" style="grid-column:2; grid-row:2;">

  361.                 <div class="lane">Validation Console</div>

  362.                 <div class="lane ok">Ready to commit 6 updates</div>

  363.               </section>

  364.             </div>

  365.           </div>

  366.         </div>

  367.         <div class="notes"><strong>Best for:</strong> Teams migrating from Access/Excel habits with low retraining cost.</div>

  368.       </article>

  369. 

  370.       <article class="card">

  371.         <div class="card-head">

  372.           <h3>Direction 4: Timeline Operations</h3>

  373.           <span class="tag">Deadline-first</span>

  374.         </div>

  375.         <div class="preview">

  376.           <div class="mock body-d">

  377.             <div class="pane soft" style="border-bottom:1px solid #e2e8f0;">

  378.               <div class="lane">Election Timeline Ribbon • D-10 to D+2</div>

  379.             </div>

  380.             <section class="pane">

  381.               <div class="lane warn">D-3: Address finalization (2 blockers)</div>

  382.               <div class="lane err">D-2: Transportation route unresolved</div>

  383.               <div class="lane ok">D-1: Office copies complete</div>

  384.               <div class="lane">D-Day: Dispatch verification checklist</div>

  385.             </section>

  386.           </div>

  387.         </div>

  388.         <div class="notes"><strong>Best for:</strong> Production-led teams where timing risk is the primary management lens.</div>

  389.       </article>

  390. 

  391.       <article class="card">

  392.         <div class="card-head">

  393.           <h3>Direction 5: Workbench + Modal Deep Work</h3>

  394.           <span class="tag">Focus workflows</span>

  395.         </div>

  396.         <div class="preview">

  397.           <div class="mock" style="grid-template-rows:34px 1fr;">

  398.             <div class="mock-top"><span class="dot"></span><span class="dot"></span><span class="dot"></span> Operations Workbench / Task Focus</div>

  399.             <div class="mock body-e">

  400.               <aside class="pane soft">

  401.                 <div class="lane">Task Stack</div>

  402.                 <div class="lane warn">Urgent (4)</div>

  403.                 <div class="lane">Due Today (11)</div>

  404.               </aside>

  405.               <section class="pane">

  406.                 <div class="lane">Primary Work Area</div>

  407.                 <div class="lane">Contextual Drawer Opens on Select</div>

  408.                 <div class="lane">Commit + Reason Code Modal</div>

  409.                 <div class="lane ok">Success Feedback With Next Action</div>

  410.               </section>

  411.             </div>

  412.           </div>

  413.         </div>

  414.         <div class="notes"><strong>Best for:</strong> Reduced cognitive load when users process one high-impact task at a time.</div>

  415.       </article>

  416. 

  417.       <article class="card">

  418.         <div class="card-head">

  419.           <h3>Direction 6: Executive Snapshot + Drilldown</h3>

  420.           <span class="tag">Overview to action</span>

  421.         </div>

  422.         <div class="preview">

  423.           <div class="mock body-f">

  424.             <section class="pane">

  425.               <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px;">

  426.                 <div class="lane ok">On Track: 124</div>

  427.                 <div class="lane warn">At Risk: 19</div>

  428.                 <div class="lane err">Blocked: 7</div>

  429.                 <div class="lane">Needs Review: 11</div>

  430.               </div>

  431.               <table class="data-table">

  432.                 <thead><tr><th>Region</th><th>Upcoming Cutoff</th><th>Primary Risk</th><th>Action</th></tr></thead>

  433.                 <tbody>

  434.                   <tr><td>North</td><td>04/07</td><td>Addressing Lag</td><td>Open Queue</td></tr>

  435.                   <tr><td>South</td><td>04/08</td><td>Route Capacity</td><td>Open Queue</td></tr>

  436.                   <tr><td>West</td><td>04/08</td><td>No blockers</td><td>Review</td></tr>

  437.                 </tbody>

  438.               </table>

  439.             </section>

  440.           </div>

  441.         </div>

  442.         <div class="notes"><strong>Best for:</strong> Leadership and admins who need rapid oversight before acting at detail level.</div>

  443.       </article>

  444.     </section>

  445. 

  446.     <section class="footer">

  447.       Recommended base candidate: <strong>Direction 1 (Operations Command Desk)</strong>, with selective adoption of Direction 3 grid affordances and Direction 2 quick inspector behavior.

  448.     </section>

  449.   </main>

  450. </body>

  451. </html>

Powered by TurnKey Linux.