2 hours ago
Create a Chrome extension popup interface (fixed width around 400px, height auto/adaptive) that supports both dark mode and light mode (automatically detect system preference, with smooth transitions). **Top section - Current website info:** - Large website logo/favico on the left - Website name (prominent title) - Website type/category (e.g., "News", "Blog", "E-commerce") as a badge - Tag section: horizontal scrollable list of preset tags shown as colored pills/badges. Include an "Add tag" button/input that allows users to create new tags, preferably with a color picker for custom tag colors. **Middle section - Page content summary:** - A card with a concise text summary of the current webpage content - Below the summary, show extracted keywords as capsule/pill-shaped badges (rounded, colored, horizontal wrap) **Bottom section - Recommended bookmark folders:** - A list of recommended folders for saving the bookmark (3-5 items, accordion/expandable style) - Each folder item (radio selection - only one can be selected at a time): - Folder name (bold) - Hierarchical path (e.g., "Bookmarks Bar > Tech > AI") - Category label - Existing bookmark count - Website type ratio (e.g., small pie chart or percentage bar) - Content theme (short description) - Expandable to show more details if needed **Very bottom:** - One large prominent blue primary button spanning most of the width, labeled "Add Bookmark to Selected Folder" (with hover effect and loading state support) Use modern, clean design with Tailwind CSS classes, plenty of spacing, subtle shadows, and rounded corners. Ensure full dark/light mode compatibility. Export as React + Tailwind code.
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
