118 lines
6.3 KiB
HTML
118 lines
6.3 KiB
HTML
<h2>Integrations Page — Tab Layout</h2>
|
|
<p class="subtitle">Here's how the integrations page would look with WhatsApp and Email tabs. Which tab style feels right?</p>
|
|
|
|
<div class="cards">
|
|
|
|
<!-- Option A: Pill tabs -->
|
|
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#f9fafb;padding:20px;">
|
|
<div style="max-width:560px;margin:0 auto;">
|
|
<div style="margin-bottom:16px;">
|
|
<div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
|
|
<div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
|
|
</div>
|
|
<!-- Pill tabs -->
|
|
<div style="display:flex;gap:8px;margin-bottom:20px;">
|
|
<div style="padding:7px 18px;background:#111827;color:#fff;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;">
|
|
<span style="margin-right:6px;">💬</span>WhatsApp
|
|
</div>
|
|
<div style="padding:7px 18px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;">
|
|
<span style="margin-right:6px;">✉️</span>Email
|
|
</div>
|
|
</div>
|
|
<!-- Card -->
|
|
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
|
|
<div style="padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:10px;">
|
|
<div style="width:10px;height:10px;border-radius:50%;background:#22c55e;"></div>
|
|
<span style="font-size:14px;font-weight:600;color:#111827;">WhatsApp (UltraMSG)</span>
|
|
<span style="margin-left:auto;font-size:11px;color:#6b7280;background:#f3f4f6;padding:2px 8px;border-radius:999px;">Active</span>
|
|
</div>
|
|
<div style="padding:16px 20px;">
|
|
<div style="height:10px;background:#f3f4f6;border-radius:4px;width:60%;margin-bottom:8px;"></div>
|
|
<div style="height:10px;background:#f3f4f6;border-radius:4px;width:40%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>A — Pill Tabs</h3>
|
|
<p>Rounded pill-style tabs. Modern, clean. Active tab is filled dark.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option B: Underline tabs -->
|
|
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#f9fafb;padding:20px;">
|
|
<div style="max-width:560px;margin:0 auto;">
|
|
<div style="margin-bottom:16px;">
|
|
<div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
|
|
<div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
|
|
</div>
|
|
<!-- Underline tabs -->
|
|
<div style="display:flex;gap:0;border-bottom:2px solid #e5e7eb;margin-bottom:20px;">
|
|
<div style="padding:8px 20px;font-size:13px;font-weight:600;color:#111827;border-bottom:2px solid #111827;margin-bottom:-2px;cursor:pointer;">
|
|
<span style="margin-right:6px;">💬</span>WhatsApp
|
|
</div>
|
|
<div style="padding:8px 20px;font-size:13px;font-weight:500;color:#6b7280;cursor:pointer;">
|
|
<span style="margin-right:6px;">✉️</span>Email
|
|
</div>
|
|
</div>
|
|
<!-- Card -->
|
|
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
|
|
<div style="padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:10px;">
|
|
<div style="width:10px;height:10px;border-radius:50%;background:#22c55e;"></div>
|
|
<span style="font-size:14px;font-weight:600;color:#111827;">WhatsApp (UltraMSG)</span>
|
|
<span style="margin-left:auto;font-size:11px;color:#6b7280;background:#f3f4f6;padding:2px 8px;border-radius:999px;">Active</span>
|
|
</div>
|
|
<div style="padding:16px 20px;">
|
|
<div style="height:10px;background:#f3f4f6;border-radius:4px;width:60%;margin-bottom:8px;"></div>
|
|
<div style="height:10px;background:#f3f4f6;border-radius:4px;width:40%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>B — Underline Tabs</h3>
|
|
<p>Classic tab style with bottom border indicator. Matches settings pages in most ERP systems.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option C: Side nav -->
|
|
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#f9fafb;padding:20px;">
|
|
<div style="max-width:560px;margin:0 auto;">
|
|
<div style="margin-bottom:16px;">
|
|
<div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
|
|
<div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
|
|
</div>
|
|
<!-- Side nav + content -->
|
|
<div style="display:flex;gap:16px;">
|
|
<div style="width:140px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;">
|
|
<div style="padding:9px 14px;background:#111827;color:#fff;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;">
|
|
<span>💬</span>WhatsApp
|
|
</div>
|
|
<div style="padding:9px 14px;color:#374151;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;">
|
|
<span>✉️</span>Email
|
|
</div>
|
|
</div>
|
|
<div style="flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
|
|
<div style="padding:12px 16px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:8px;">
|
|
<div style="width:8px;height:8px;border-radius:50%;background:#22c55e;"></div>
|
|
<span style="font-size:13px;font-weight:600;color:#111827;">WhatsApp (UltraMSG)</span>
|
|
</div>
|
|
<div style="padding:12px 16px;">
|
|
<div style="height:8px;background:#f3f4f6;border-radius:4px;width:60%;margin-bottom:8px;"></div>
|
|
<div style="height:8px;background:#f3f4f6;border-radius:4px;width:40%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>C — Sidebar Nav</h3>
|
|
<p>Left sidebar with integration list. Scales well if more integrations are added later.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|