103 lines
5.7 KiB
HTML
103 lines
5.7 KiB
HTML
<h2>Section 1 - Product posture and navigation skeleton</h2>
|
|
<p class="subtitle">Recommended direction: lightweight enterprise feel, task-driven home, fast actions for field users.</p>
|
|
|
|
<div class="section">
|
|
<div class="label">Core idea</div>
|
|
<p>The app should feel like a practical field workbench, not a dashboard-first admin system. The first screen answers: what needs my attention right now, and what can I do in one tap?</p>
|
|
</div>
|
|
|
|
<div class="split">
|
|
<div class="mockup">
|
|
<div class="mockup-header">Home / Task-driven workbench</div>
|
|
<div class="mockup-body">
|
|
<div style="background:#0f172a;color:#fff;border-radius:18px;padding:16px 16px 14px;margin-bottom:14px;">
|
|
<div style="font-size:12px;opacity:.75;margin-bottom:6px;">Project A / Site Operations</div>
|
|
<div style="font-size:24px;font-weight:700;line-height:1.2;">3 items need attention today</div>
|
|
<div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
|
|
<span style="background:rgba(255,255,255,.14);padding:6px 10px;border-radius:999px;font-size:12px;">2 hazards pending</span>
|
|
<span style="background:rgba(255,255,255,.14);padding:6px 10px;border-radius:999px;font-size:12px;">1 log missing</span>
|
|
</div>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;">
|
|
<div style="border:1px solid #dbe4ee;border-radius:16px;padding:14px;background:#fff;">
|
|
<div style="font-size:12px;color:#64748b;">Quick action</div>
|
|
<div style="font-size:16px;font-weight:700;margin-top:6px;">Report hazard</div>
|
|
</div>
|
|
<div style="border:1px solid #dbe4ee;border-radius:16px;padding:14px;background:#fff;">
|
|
<div style="font-size:12px;color:#64748b;">Quick action</div>
|
|
<div style="font-size:16px;font-weight:700;margin-top:6px;">Write log</div>
|
|
</div>
|
|
</div>
|
|
<div style="border:1px solid #dbe4ee;border-radius:18px;padding:14px;background:#fff;margin-bottom:10px;">
|
|
<div style="font-size:12px;color:#64748b;margin-bottom:8px;">My queue</div>
|
|
<div style="display:flex;justify-content:space-between;gap:8px;font-weight:600;"><span>Scaffold issue / Zone B</span><span style="color:#b45309;">Pending</span></div>
|
|
<div style="font-size:13px;color:#64748b;margin-top:6px;">Assigned 10 min ago</div>
|
|
</div>
|
|
<div style="border:1px solid #dbe4ee;border-radius:18px;padding:14px;background:#fff;">
|
|
<div style="font-size:12px;color:#64748b;margin-bottom:8px;">Recent updates</div>
|
|
<div style="font-size:14px;">Resolved power box issue</div>
|
|
<div style="font-size:13px;color:#64748b;margin-top:6px;">Today 14:30</div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-around;margin-top:16px;padding-top:12px;border-top:1px solid #e2e8f0;color:#475569;font-size:12px;">
|
|
<strong style="color:#0f172a;">Home</strong>
|
|
<span>Hazards</span>
|
|
<span>Logs</span>
|
|
<span>Me</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">Hazard detail / Action panel</div>
|
|
<div class="mockup-body">
|
|
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;">
|
|
<div>
|
|
<div style="font-size:12px;color:#64748b;">Hazard #HZ-023</div>
|
|
<div style="font-size:21px;font-weight:700;line-height:1.25;margin-top:4px;">Temporary cable exposed near lift</div>
|
|
</div>
|
|
<div style="background:#fef3c7;color:#92400e;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;">Pending</div>
|
|
</div>
|
|
<div style="height:120px;border-radius:16px;background:linear-gradient(135deg,#cbd5e1,#e2e8f0);margin-bottom:12px;"></div>
|
|
<div style="display:grid;gap:10px;margin-bottom:12px;">
|
|
<div style="border:1px solid #dbe4ee;border-radius:14px;padding:12px;background:#fff;">
|
|
<div style="font-size:12px;color:#64748b;">Location</div>
|
|
<div style="font-weight:600;margin-top:4px;">Material entrance, east side</div>
|
|
</div>
|
|
<div style="border:1px solid #dbe4ee;border-radius:14px;padding:12px;background:#fff;">
|
|
<div style="font-size:12px;color:#64748b;">Current next step</div>
|
|
<div style="font-weight:600;margin-top:4px;">Assign responsible person</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:10px;">
|
|
<div style="flex:1;background:#0f172a;color:#fff;border-radius:14px;padding:12px 14px;text-align:center;font-weight:700;">Assign</div>
|
|
<div style="flex:1;background:#fff;border:1px solid #cbd5e1;border-radius:14px;padding:12px 14px;text-align:center;font-weight:700;color:#0f172a;">Resolve</div>
|
|
</div>
|
|
<div style="margin-top:14px;padding-top:12px;border-top:1px solid #e2e8f0;font-size:13px;color:#64748b;">Timeline stays below the main action area instead of competing with it.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="approve" onclick="toggleSelect(this)">
|
|
<div class="letter">A</div>
|
|
<div class="content">
|
|
<h3>Structure looks right</h3>
|
|
<p>Keep the task-driven home and action-first detail layout.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="more-dashboard" onclick="toggleSelect(this)">
|
|
<div class="letter">B</div>
|
|
<div class="content">
|
|
<h3>Need more dashboard feeling</h3>
|
|
<p>Add stronger overview and summary signals on the home screen.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="more-simple" onclick="toggleSelect(this)">
|
|
<div class="letter">C</div>
|
|
<div class="content">
|
|
<h3>Need even lighter mobile feel</h3>
|
|
<p>Reduce blocks and make the pages feel simpler and faster.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|