Design a fully working, production-grade inline Context Selection feature inside the existing Superfuel Workflow page (dark theme). The page must match the screenshot exactly: left sidebar, a header with the workflow title “Add Competitor Keywords to the Bullet Points,” and a numbered vertical list of workflow steps. Add a fully functional Select Context button on Step 1 (“Get ASIN from Context”) that expands an inline Context Selection Panel beneath Step 1 (not a separate page or full-screen drawer). The panel must support three tabs: Manual Input, Search & Filters, Saved Contexts. Use the Superfuel x shadcn style: Inter font, 8px grid, dark palette (background #0B0C0F, panel #131417, borders #2B2C2F, text #E6E6E6, secondary text #A0A3A8, accent #2563EB), 8px radii, subtle shadows, and 150ms ease motion. All copy must match the tone: concise, factual, and technical.
9839720
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Superfuel | Add Competitor Keywords Workflow</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-[#0B0C0F] text-[#E6E6E6] font-inter"> | |
| <div class="flex h-screen"> | |
| <!-- Left Sidebar --> | |
| <div class="w-64 bg-[#131417] border-r border-[#2B2C2F] p-4"> | |
| <div class="flex items-center mb-8"> | |
| <i data-feather="zap" class="text-[#2563EB] mr-2"></i> | |
| <h2 class="font-semibold">Superfuel</h2> | |
| </div> | |
| <nav> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center p-2 rounded hover:bg-[#1E1F23]"> | |
| <i data-feather="home" class="w-4 h-4 mr-2 text-[#A0A3A8]"></i> | |
| <span>Dashboard</span> | |
| </li> | |
| <li class="flex items-center p-2 rounded bg-[#1E1F23]"> | |
| <i data-feather="layers" class="w-4 h-4 mr-2 text-[#2563EB]"></i> | |
| <span class="font-medium">Workflows</span> | |
| </li> | |
| <li class="flex items-center p-2 rounded hover:bg-[#1E1F23]"> | |
| <i data-feather="database" class="w-4 h-4 mr-2 text-[#A0A3A8]"></i> | |
| <span>Data Sources</span> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <header class="border-b border-[#2B2C2F] p-4"> | |
| <h1 class="text-xl font-semibold">Add Competitor Keywords to the Bullet Points</h1> | |
| </header> | |
| <main class="p-6 max-w-4xl mx-auto"> | |
| <div class="space-y-6"> | |
| <!-- Step 1 --> | |
| <div class="bg-[#131417] rounded-lg border border-[#2B2C2F] overflow-hidden"> | |
| <div class="p-4 flex items-start"> | |
| <div class="bg-[#2563EB] text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium">Get ASIN from Context</h3> | |
| <p class="text-sm text-[#A0A3A8] mt-1">Context: Not selected</p> | |
| </div> | |
| <button id="selectContextBtn" class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 ease-in-out"> | |
| Select Context | |
| </button> | |
| </div> | |
| <!-- Context Selection Panel (Initially hidden) --> | |
| <div id="contextPanel" class="mt-4 hidden"> | |
| <div class="bg-[#1A1C21] rounded-lg border border-[#2B2C2F] overflow-hidden"> | |
| <!-- Tabs --> | |
| <div class="flex border-b border-[#2B2C2F]"> | |
| <button data-tab="manual" class="tab-btn px-4 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-[#22242A] active-tab"> | |
| Manual Input | |
| </button> | |
| <button data-tab="search" class="tab-btn px-4 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-[#22242A]"> | |
| Search & Filters | |
| </button> | |
| <button data-tab="saved" class="tab-btn px-4 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-[#22242A]"> | |
| Saved Contexts | |
| </button> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="p-4"> | |
| <!-- Manual Input Tab --> | |
| <div id="manualTab" class="tab-content"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Enter ASINs (comma, space, or newline separated)</label> | |
| <textarea id="asinInput" class="w-full bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-2 text-sm h-32" placeholder="B08PP5MSVB, B09XYZ1234..."></textarea> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-[#A0A3A8]">or</span> | |
| <button class="ml-2 text-sm text-[#2563EB] hover:underline">Upload CSV file</button> | |
| </div> | |
| <button id="parseBtn" class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium"> | |
| Parse & Preview | |
| </button> | |
| </div> | |
| <!-- Preview Section (Initially hidden) --> | |
| <div id="previewSection" class="mt-4 hidden"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h4 class="font-medium">Preview (50 of <span id="totalValidCount">0</span> valid products)</h4> | |
| <div class="flex items-center space-x-2"> | |
| <button id="selectAllBtn" class="text-sm text-[#2563EB] hover:underline">Select All</button> | |
| <button id="deselectAllBtn" class="text-sm text-[#2563EB] hover:underline">Deselect All</button> | |
| </div> | |
| </div> | |
| <div id="previewGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-h-96 overflow-y-auto"> | |
| <!-- Product cards will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search & Filters Tab (Initially hidden) --> | |
| <div id="searchTab" class="tab-content hidden"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Search products</label> | |
| <div class="relative"> | |
| <input type="text" class="w-full bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-2 text-sm" placeholder="Search by title, brand, or ASIN..."> | |
| <i data-feather="search" class="absolute right-2 top-2.5 text-[#A0A3A8] w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium mb-2">Quick Filters</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="chip-btn bg-[#1E1F23] hover:bg-[#22242A] px-3 py-1 rounded-full text-sm border border-[#2B2C2F]"> | |
| Top 10% by Sales (30d) | |
| </button> | |
| <button class="chip-btn bg-[#1E1F23] hover:bg-[#22242A] px-3 py-1 rounded-full text-sm border border-[#2B2C2F]"> | |
| Bottom 5% CVR (30d) | |
| </button> | |
| <button class="chip-btn bg-[#1E1F23] hover:bg-[#22242A] px-3 py-1 rounded-full text-sm border border-[#2B2C2F]"> | |
| Sales = 0 (30d) | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium mb-2">Custom Filters</h4> | |
| <div class="bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-3 space-y-3"> | |
| <div class="flex items-center space-x-2"> | |
| <select class="bg-[#131417] border border-[#2B2C2F] rounded-md p-1.5 text-sm flex-1"> | |
| <option>Sales (30d)</option> | |
| <option>CVR (30d)</option> | |
| <option>Ad Clicks (30d)</option> | |
| </select> | |
| <select class="bg-[#131417] border border-[#2B2C2F] rounded-md p-1.5 text-sm w-24"> | |
| <option>=</option> | |
| <option>></option> | |
| <option><</option> | |
| <option>Top %</option> | |
| <option>Bottom %</option> | |
| </select> | |
| <input type="text" class="bg-[#131417] border border-[#2B2C2F] rounded-md p-1.5 text-sm w-16"> | |
| <button class="text-[#A0A3A8] hover:text-[#E6E6E6]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <button class="text-sm text-[#2563EB] hover:underline flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add Condition | |
| </button> | |
| </div> | |
| </div> | |
| <button class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium mt-2"> | |
| Preview Matching Products | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Saved Contexts Tab (Initially hidden) --> | |
| <div id="savedTab" class="tab-content hidden"> | |
| <div class="space-y-3"> | |
| <p class="text-sm text-[#A0A3A8]">No saved contexts yet. Create one by saving a selection.</p> | |
| <!-- Example saved context card --> | |
| <div class="bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-3 hidden"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Top Sellers 30D</h4> | |
| <p class="text-sm text-[#A0A3A8]">423 products • Last used Oct 12, 2025</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-[#A0A3A8] hover:text-[#E6E6E6]"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-[#A0A3A8] hover:text-[#E6E6E6]"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex mt-2 space-x-1"> | |
| <div class="w-8 h-8 bg-[#2B2C2F] rounded"></div> | |
| <div class="w-8 h-8 bg-[#2B2C2F] rounded"></div> | |
| <div class="w-8 h-8 bg-[#2B2C2F] rounded"></div> | |
| </div> | |
| <button class="mt-3 w-full bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium"> | |
| Apply | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="bg-[#1A1C21] border-t border-[#2B2C2F] p-3 sticky bottom-0"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm"> | |
| <span id="selectedCountText">Selected: 0 products</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="saveContextCheckbox" class="mr-2"> | |
| <label for="saveContextCheckbox" class="text-sm">Save as</label> | |
| <input type="text" id="contextNameInput" class="ml-2 bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-1 text-sm w-40 hidden"> | |
| </div> | |
| <button class="text-sm px-3 py-1.5 rounded-md border border-[#2B2C2F] hover:bg-[#22242A]"> | |
| Cancel | |
| </button> | |
| <button id="applySelectionBtn" class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium"> | |
| Apply Selection | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-[#131417] rounded-lg border border-[#2B2C2F]"> | |
| <div class="p-4 flex items-start"> | |
| <div class="bg-[#2B2C2F] text-[#A0A3A8] rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</div> | |
| <div> | |
| <h3 class="font-medium">Extract competitor bullet points</h3> | |
| <p class="text-sm text-[#A0A3A8] mt-1">Configure extraction settings</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-[#131417] rounded-lg border border-[#2B2C2F]"> | |
| <div class="p-4 flex items-start"> | |
| <div class="bg-[#2B2C2F] text-[#A0A3A8] rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</div> | |
| <div> | |
| <h3 class="font-medium">Add keywords to your bullet points</h3> | |
| <p class="text-sm text-[#A0A3A8] mt-1">Select target ASINs and configure insertion</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Toast Notification (Hidden by default) --> | |
| <div id="toast" class="fixed bottom-4 right-4 bg-[#131417] border border-[#2B2C2F] rounded-md p-3 shadow-lg hidden"> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2"></i> | |
| <span id="toastMessage">Context applied successfully</span> | |
| </div> | |
| </div> | |
| <!-- Confirmation Modal (Hidden by default) --> | |
| <div id="confirmModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-[#131417] rounded-lg border border-[#2B2C2F] p-6 max-w-md w-full"> | |
| <h3 class="font-medium text-lg mb-3">Confirm Large Selection</h3> | |
| <p class="text-sm text-[#A0A3A8] mb-4">You're about to apply a selection of <span id="modalCount">5,000</span> products. This may take a while to process.</p> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Type "CONFIRM" to continue</label> | |
| <input type="text" id="confirmInput" class="w-full bg-[#1E1F23] border border-[#2B2C2F] rounded-md p-2 text-sm"> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelConfirmBtn" class="text-sm px-3 py-1.5 rounded-md border border-[#2B2C2F] hover:bg-[#22242A]"> | |
| Cancel | |
| </button> | |
| <button id="proceedConfirmBtn" class="bg-[#2563EB] hover:bg-[#1E55D5] text-white px-3 py-1.5 rounded-md text-sm font-medium disabled:opacity-50" disabled> | |
| Proceed | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |