Merge branch 'worktree-agent-adbc35a5' into Develop
# Conflicts: # .planning/STATE.md # drizzle-pg/meta/0002_snapshot.json # drizzle-pg/meta/_journal.json # src/db/schema.ts
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
<h2>Catalog Browse & Search Experience</h2>
|
||||
<p class="subtitle">How should users find gear in the global catalog?</p>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Search-First</h3>
|
||||
<p style="margin-bottom:12px;">Big search bar dominates. Tags below as quick filters. Type naturally: "waterproof handlebar bag under 200g". Results appear as you type.</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Global Catalog — Search-First</div>
|
||||
<div class="mockup-body" style="padding: 20px;">
|
||||
<div style="display:flex; gap:8px; margin-bottom:16px;">
|
||||
<input class="mock-input" placeholder="Search gear... e.g. 'waterproof handlebar bag under 200g'" style="flex:1; font-size:15px; padding:10px 14px;">
|
||||
</div>
|
||||
<div style="display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;">
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Bikepacking</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Bags</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Waterproof</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Ultralight</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Shelter</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Cooking</span>
|
||||
</div>
|
||||
<div style="color:#9ca3af; font-size:13px; margin-bottom:16px;">Type to search or click tags to filter</div>
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:start;">
|
||||
<div>
|
||||
<div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
|
||||
<div style="color:#6b7280; font-size:12px;">Handlebar Bag</div>
|
||||
</div>
|
||||
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.6</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:16px; margin-top:10px; font-size:12px; color:#6b7280;">
|
||||
<span>128g</span>
|
||||
<span>$85</span>
|
||||
<span>24 owners</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;">
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">bikepacking</span>
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">handlebar</span>
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">waterproof</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:start;">
|
||||
<div>
|
||||
<div style="font-weight:600; font-size:14px;">Apidura Racing HB Pack</div>
|
||||
<div style="color:#6b7280; font-size:12px;">Handlebar Bag</div>
|
||||
</div>
|
||||
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.4</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:16px; margin-top:10px; font-size:12px; color:#6b7280;">
|
||||
<span>105g</span>
|
||||
<span>$72</span>
|
||||
<span>18 owners</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;">
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">bikepacking</span>
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">handlebar</span>
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">ultralight</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons" style="margin-top:12px;">
|
||||
<div class="pros"><h4>Pros</h4><ul><li>Natural language friendly</li><li>Fast for users who know what they want</li><li>Tags as quick filters below search</li></ul></div>
|
||||
<div class="cons"><h4>Cons</h4><ul><li>Empty state before typing</li><li>Browsing requires typing first</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Browse-First with Search</h3>
|
||||
<p style="margin-bottom:12px;">Category tiles for discovery with trending items. Search bar prominent but browsing is the default. Great for "I don't know exactly what I need yet."</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Global Catalog — Browse-First</div>
|
||||
<div class="mockup-body" style="padding: 20px;">
|
||||
<div style="display:flex; gap:8px; margin-bottom:16px;">
|
||||
<input class="mock-input" placeholder="Search gear..." style="flex:1; font-size:15px; padding:10px 14px;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">Popular Categories</div>
|
||||
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;">
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">🎒</div>
|
||||
<div style="font-size:13px; font-weight:500;">Bags</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">342 items</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">🏕️</div>
|
||||
<div style="font-size:13px; font-weight:500;">Shelter</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">128 items</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">🍳</div>
|
||||
<div style="font-size:13px; font-weight:500;">Cooking</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">94 items</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">🚲</div>
|
||||
<div style="font-size:13px; font-weight:500;">Bike Parts</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">215 items</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">💡</div>
|
||||
<div style="font-size:13px; font-weight:500;">Lights</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">67 items</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">🧭</div>
|
||||
<div style="font-size:13px; font-weight:500;">Navigation</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">43 items</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">Trending</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
|
||||
<div>
|
||||
<div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
|
||||
<div style="font-size:12px; color:#6b7280;">128g · $85 · ★ 4.6</div>
|
||||
</div>
|
||||
<div style="font-size:12px; color:#6b7280;">24 owners</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center;">
|
||||
<div>
|
||||
<div style="font-weight:600; font-size:14px;">Ortlieb Fork-Pack</div>
|
||||
<div style="font-size:12px; color:#6b7280;">310g · $55 · ★ 4.3</div>
|
||||
</div>
|
||||
<div style="font-size:12px; color:#6b7280;">19 owners</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons" style="margin-top:12px;">
|
||||
<div class="pros"><h4>Pros</h4><ul><li>Great for discovery and browsing</li><li>Never an empty state</li><li>Shows what's popular in the community</li></ul></div>
|
||||
<div class="cons"><h4>Cons</h4><ul><li>Categories need curation</li><li>Slower for targeted searches</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,128 @@
|
||||
<h2>Catalog Browse & Search Experience</h2>
|
||||
<p class="subtitle">How should users find gear in the global catalog?</p>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Search-First</h3>
|
||||
<div class="mockup" style="margin-top: 12px;">
|
||||
<div class="mockup-header">Global Catalog</div>
|
||||
<div class="mockup-body" style="padding: 20px;">
|
||||
<div style="display:flex; gap:8px; margin-bottom:16px;">
|
||||
<input class="mock-input" placeholder="Search gear... e.g. 'waterproof handlebar bag under 200g'" style="flex:1; font-size:15px; padding:10px 14px;">
|
||||
</div>
|
||||
<div style="display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;">
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Bikepacking</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Bags</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Waterproof</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Ultralight</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Sim Racing</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280;">Wheels</span>
|
||||
</div>
|
||||
<div style="color:#9ca3af; font-size:13px; margin-bottom:12px;">Type to search or click tags to filter</div>
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:start;">
|
||||
<div>
|
||||
<div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
|
||||
<div style="color:#6b7280; font-size:12px;">Handlebar Bag</div>
|
||||
</div>
|
||||
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.6</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:16px; margin-top:10px; font-size:12px; color:#6b7280;">
|
||||
<span>128g</span>
|
||||
<span>$85</span>
|
||||
<span>24 owners</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;">
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">bikepacking</span>
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">handlebar</span>
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">waterproof</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:start;">
|
||||
<div>
|
||||
<div style="font-weight:600; font-size:14px;">Apidura Racing HB Pack</div>
|
||||
<div style="color:#6b7280; font-size:12px;">Handlebar Bag</div>
|
||||
</div>
|
||||
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.4</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:16px; margin-top:10px; font-size:12px; color:#6b7280;">
|
||||
<span>105g</span>
|
||||
<span>$72</span>
|
||||
<span>18 owners</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;">
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">bikepacking</span>
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">handlebar</span>
|
||||
<span style="padding:2px 8px; border-radius:99px; background:#eff6ff; font-size:11px; color:#3b82f6;">ultralight</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons" style="margin-top:12px;">
|
||||
<div class="pros"><h4>Pros</h4><ul><li>Natural language friendly</li><li>Fast for users who know what they want</li><li>Tags as quick filters below search</li></ul></div>
|
||||
<div class="cons"><h4>Cons</h4><ul><li>Empty state can feel blank</li><li>Browsing requires typing first</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Browse-First with Search</h3>
|
||||
<div class="mockup" style="margin-top: 12px;">
|
||||
<div class="mockup-header">Global Catalog</div>
|
||||
<div class="mockup-body" style="padding: 20px;">
|
||||
<div style="display:flex; gap:8px; margin-bottom:16px;">
|
||||
<input class="mock-input" placeholder="Search gear..." style="flex:1; font-size:15px; padding:10px 14px;">
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">Popular Categories</div>
|
||||
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;">
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">🎒</div>
|
||||
<div style="font-size:13px; font-weight:500;">Bags</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">342 items</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">🏕️</div>
|
||||
<div style="font-size:13px; font-weight:500;">Shelter</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">128 items</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:10px; padding:12px; text-align:center; cursor:pointer;">
|
||||
<div style="font-size:20px; margin-bottom:4px;">🎮</div>
|
||||
<div style="font-size:13px; font-weight:500;">Sim Gear</div>
|
||||
<div style="font-size:11px; color:#9ca3af;">89 items</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">Trending</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
|
||||
<div>
|
||||
<div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
|
||||
<div style="font-size:12px; color:#6b7280;">128g · $85 · ★ 4.6</div>
|
||||
</div>
|
||||
<div style="font-size:12px; color:#6b7280;">24 owners</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center;">
|
||||
<div>
|
||||
<div style="font-weight:600; font-size:14px;">Fanatec DD Pro</div>
|
||||
<div style="font-size:12px; color:#6b7280;">2.4kg · $350 · ★ 4.8</div>
|
||||
</div>
|
||||
<div style="font-size:12px; color:#6b7280;">31 owners</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons" style="margin-top:12px;">
|
||||
<div class="pros"><h4>Pros</h4><ul><li>Great for discovery — see what's popular</li><li>Categories give structure without complexity</li><li>Never an empty state</li></ul></div>
|
||||
<div class="cons"><h4>Cons</h4><ul><li>More complex landing page</li><li>Categories need curation</li></ul></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
172
.superpowers/brainstorm/1268660-1775403447/content/fab-flow.html
Normal file
172
.superpowers/brainstorm/1268660-1775403447/content/fab-flow.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<h2>Add Item Flow — From FAB to Search to Results</h2>
|
||||
<p class="subtitle">The journey from clicking + to finding gear</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>Step 1: FAB Menu</h3>
|
||||
<p class="subtitle">Click + → two options appear above the button</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Collection View</div>
|
||||
<div class="mockup-body" style="padding:20px; min-height:280px; position:relative; background:#f9fafb;">
|
||||
<!-- Fake collection content -->
|
||||
<div style="opacity:0.4;">
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-bottom:8px; background:white;">
|
||||
<div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
|
||||
<div style="font-size:12px; color:#6b7280;">128g · Bags</div>
|
||||
</div>
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-bottom:8px; background:white;">
|
||||
<div style="font-weight:600; font-size:14px;">MSR Hubba NX</div>
|
||||
<div style="font-size:12px; color:#6b7280;">1,540g · Shelter</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAB with popup menu -->
|
||||
<div style="position:absolute; bottom:20px; right:20px; text-align:right;">
|
||||
<div style="background:white; border:1px solid #e5e7eb; border-radius:12px; padding:6px; margin-bottom:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1); display:inline-block;">
|
||||
<div style="padding:10px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px; color:#374151;">
|
||||
<span style="font-size:16px;">📦</span> Add to Collection
|
||||
</div>
|
||||
<div style="height:1px; background:#e5e7eb; margin:2px 0;"></div>
|
||||
<div style="padding:10px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px; color:#374151;">
|
||||
<span style="font-size:16px;">🔍</span> Start New Thread
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:56px; height:56px; background:#374151; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; box-shadow:0 2px 8px rgba(0,0,0,0.2); margin-left:auto;">+</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Step 2: Search Overlay</h3>
|
||||
<p class="subtitle">After choosing an action, a search overlay appears</p>
|
||||
<div class="options">
|
||||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Floating Search Bar</h3>
|
||||
<p style="margin-bottom:12px;">Compact overlay centered on screen. Feels quick and light.</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Search Overlay — Floating</div>
|
||||
<div class="mockup-body" style="padding:20px; min-height:220px; position:relative; background:#f9fafb;">
|
||||
<!-- Dimmed background -->
|
||||
<div style="position:absolute; inset:0; background:rgba(0,0,0,0.3); border-radius:0 0 8px 8px;"></div>
|
||||
<!-- Floating search -->
|
||||
<div style="position:relative; max-width:480px; margin:40px auto 0; background:white; border-radius:16px; padding:20px; box-shadow:0 8px 30px rgba(0,0,0,0.15);">
|
||||
<div style="font-size:13px; font-weight:600; color:#6b7280; margin-bottom:10px;">Adding to Collection</div>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<input class="mock-input" placeholder="Search gear..." style="flex:1; font-size:15px; padding:10px 14px;">
|
||||
<button class="mock-button" style="padding:10px 20px;">Search</button>
|
||||
</div>
|
||||
<div style="margin-top:12px; font-size:12px; color:#9ca3af;">Search the catalog or press Enter to see results</div>
|
||||
<div style="margin-top:10px; display:flex; gap:6px; flex-wrap:wrap;">
|
||||
<span style="padding:3px 10px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">Bags</span>
|
||||
<span style="padding:3px 10px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">Shelter</span>
|
||||
<span style="padding:3px 10px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">Lights</span>
|
||||
<span style="padding:3px 10px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">Cooking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Full-Screen Search</h3>
|
||||
<p style="margin-bottom:12px;">Takes over the screen. More room for instant suggestions and recent searches.</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Search Overlay — Full Screen</div>
|
||||
<div class="mockup-body" style="padding:0; min-height:280px; background:white;">
|
||||
<div style="padding:16px 20px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; gap:12px;">
|
||||
<span style="color:#9ca3af; cursor:pointer; font-size:18px;">←</span>
|
||||
<input class="mock-input" placeholder="Search gear..." style="flex:1; font-size:16px; padding:10px 14px; border:none; background:#f9fafb;">
|
||||
</div>
|
||||
<div style="padding:16px 20px;">
|
||||
<div style="font-size:12px; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px;">Quick Tags</div>
|
||||
<div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;">
|
||||
<span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Bags</span>
|
||||
<span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Shelter</span>
|
||||
<span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Lights</span>
|
||||
<span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Cooking</span>
|
||||
<span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Bike Parts</span>
|
||||
<span style="padding:6px 14px; border-radius:99px; background:#f3f4f6; font-size:13px; color:#6b7280; cursor:pointer;">Waterproof</span>
|
||||
</div>
|
||||
<div style="font-size:12px; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px;">Adding to Collection</div>
|
||||
<div style="font-size:13px; color:#6b7280;">Type to search the gear catalog, or <span style="color:#3b82f6; cursor:pointer;">add manually</span> if your item isn't listed.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Step 3: Results (always full screen)</h3>
|
||||
<p class="subtitle">After hitting Enter/Search, full results page with actions</p>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Search Results — "handlebar bag"</div>
|
||||
<div class="mockup-body" style="padding:0; background:white;">
|
||||
<div style="padding:12px 20px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; gap:12px;">
|
||||
<span style="color:#9ca3af; cursor:pointer; font-size:18px;">←</span>
|
||||
<div style="flex:1; background:#f3f4f6; border-radius:8px; padding:8px 14px; font-size:14px; color:#374151;">handlebar bag</div>
|
||||
</div>
|
||||
<div style="padding:12px 20px;">
|
||||
<div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;">
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#dbeafe; font-size:12px; color:#2563eb;">handlebar</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">+ waterproof</span>
|
||||
<span style="padding:4px 12px; border-radius:99px; background:#f3f4f6; font-size:12px; color:#6b7280; cursor:pointer;">+ ultralight</span>
|
||||
</div>
|
||||
<div style="font-size:12px; color:#9ca3af; margin-bottom:12px;">12 results</div>
|
||||
|
||||
<!-- Result cards -->
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<div style="font-weight:600; font-size:14px;">Revelate Designs Pika</div>
|
||||
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.6</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:16px; margin-top:4px; font-size:12px; color:#6b7280;">
|
||||
<span>128g</span><span>$85</span><span>24 owners</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mock-button" style="padding:6px 14px; font-size:13px; background:#374151; color:white;">+ Add</button>
|
||||
</div>
|
||||
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<div style="font-weight:600; font-size:14px;">Apidura Racing HB Pack</div>
|
||||
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.4</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:16px; margin-top:4px; font-size:12px; color:#6b7280;">
|
||||
<span>105g</span><span>$72</span><span>18 owners</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mock-button" style="padding:6px 14px; font-size:13px; background:#374151; color:white;">+ Add</button>
|
||||
</div>
|
||||
|
||||
<div style="border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<div style="font-weight:600; font-size:14px;">Ortlieb Handlebar-Pack QR</div>
|
||||
<div style="background:#fef3c7; color:#92400e; font-size:11px; padding:2px 8px; border-radius:99px;">★ 4.2</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:16px; margin-top:4px; font-size:12px; color:#6b7280;">
|
||||
<span>340g</span><span>$95</span><span>31 owners</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mock-button" style="padding:6px 14px; font-size:13px; background:#374151; color:white;">+ Add</button>
|
||||
</div>
|
||||
|
||||
<!-- Not found option -->
|
||||
<div style="border:2px dashed #d1d5db; border-radius:12px; padding:16px; margin-top:16px; text-align:center;">
|
||||
<div style="font-size:14px; font-weight:500; color:#6b7280;">Can't find what you're looking for?</div>
|
||||
<div style="font-size:13px; color:#9ca3af; margin-top:4px;">Add it manually and submit it to the catalog for review</div>
|
||||
<button class="mock-button" style="margin-top:10px; padding:8px 20px; font-size:13px;">Add Manually</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1775407587614}
|
||||
Reference in New Issue
Block a user