MiknasTrading/.superpowers/brainstorm/1730-1779602779/content/urgency-picker.html

<h2>Required Date / Urgency — which style feels right?</h2>
<p class="subtitle">When the user clicks the field, a popup opens. Pick the style you prefer.</p>

<div class="cards" style="grid-template-columns: repeat(3, 1fr); gap: 20px;">

  <!-- Option A -->
  <div class="card" data-choice="a" onclick="toggleSelect(this)">
    <div class="card-image" style="padding:16px; background:#f8fafc;">
      <div style="font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;margin-bottom:8px;">Urgency</div>
      <div style="border:1.5px solid #3b82f6;border-radius:8px;padding:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
        <div style="font-size:11px;color:#94a3b8;margin-bottom:8px;">Select urgency level</div>
        <div style="display:flex;flex-direction:column;gap:6px;">
          <div style="background:#fee2e2;color:#dc2626;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;">🔴 Critical / Immediate</div>
          <div style="background:#ffedd5;color:#ea580c;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;">🟠 Urgent — Within 3 days</div>
          <div style="background:#fef9c3;color:#ca8a04;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;">🟡 This Week</div>
          <div style="background:#dcfce7;color:#16a34a;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;">🟢 Normal — This Month</div>
          <div style="border:1px solid #e2e8f0;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600;color:#475569;display:flex;align-items:center;gap:6px;">📅 Pick a specific date →</div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>A — Urgency Levels</h3>
      <p>Colored pills with preset labels. Optionally jump to a date picker.</p>
    </div>
  </div>

  <!-- Option B -->
  <div class="card" data-choice="b" onclick="toggleSelect(this)">
    <div class="card-image" style="padding:16px; background:#f8fafc;">
      <div style="font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;margin-bottom:8px;">Urgency</div>
      <div style="border:1.5px solid #3b82f6;border-radius:8px;padding:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
        <div style="font-size:11px;color:#94a3b8;margin-bottom:10px;">How soon is this needed?</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;">
          <div style="border:1.5px solid #dc2626;border-radius:8px;padding:8px;text-align:center;background:#fff5f5;">
            <div style="font-size:18px;">🚨</div>
            <div style="font-size:11px;font-weight:700;color:#dc2626;">Critical</div>
            <div style="font-size:10px;color:#94a3b8;">Today</div>
          </div>
          <div style="border:1.5px solid #f97316;border-radius:8px;padding:8px;text-align:center;background:#fff7ed;">
            <div style="font-size:18px;">⚡</div>
            <div style="font-size:11px;font-weight:700;color:#ea580c;">Urgent</div>
            <div style="font-size:10px;color:#94a3b8;">1–3 days</div>
          </div>
          <div style="border:1.5px solid #eab308;border-radius:8px;padding:8px;text-align:center;background:#fefce8;">
            <div style="font-size:18px;">📋</div>
            <div style="font-size:11px;font-weight:700;color:#ca8a04;">Normal</div>
            <div style="font-size:10px;color:#94a3b8;">This week</div>
          </div>
          <div style="border:1.5px solid #22c55e;border-radius:8px;padding:8px;text-align:center;background:#f0fdf4;">
            <div style="font-size:18px;">🗓️</div>
            <div style="font-size:11px;font-weight:700;color:#16a34a;">Planned</div>
            <div style="font-size:10px;color:#94a3b8;">Pick date</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>B — Icon Cards</h3>
      <p>2×2 grid of icon cards with urgency label + subtitle. Visually distinct.</p>
    </div>
  </div>

  <!-- Option C -->
  <div class="card" data-choice="c" onclick="toggleSelect(this)">
    <div class="card-image" style="padding:16px; background:#f8fafc;">
      <div style="font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;margin-bottom:8px;">Urgency</div>
      <div style="border:1.5px solid #3b82f6;border-radius:8px;padding:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
        <div style="font-size:11px;color:#94a3b8;margin-bottom:10px;">Quick select or pick a date</div>
        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;">
          <span style="background:#fee2e2;color:#dc2626;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;">🔴 Critical</span>
          <span style="background:#ffedd5;color:#ea580c;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;">⚡ Urgent</span>
          <span style="background:#fef9c3;color:#ca8a04;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;">📋 This Week</span>
          <span style="background:#dcfce7;color:#16a34a;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;">✅ Normal</span>
        </div>
        <div style="border-top:1px solid #f1f5f9;padding-top:8px;">
          <div style="font-size:10px;color:#94a3b8;margin-bottom:4px;">Or pick a specific date:</div>
          <div style="border:1px solid #e2e8f0;border-radius:6px;padding:5px 10px;font-size:11px;color:#94a3b8;background:#f8fafc;">📅 Select date…</div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>C — Chips + Date</h3>
      <p>Pill-shaped tags for quick picks, plus a date field below for exact dates.</p>
    </div>
  </div>

</div>