Free Online Drag-and-Drop Tier List Maker

Technical Specification: Browser-Based Tier List Maker

Core Functionality

• Client-Side Image Processing: Users upload images from their local machine. Images are rendered into an 'unsorted' holding area.
• Drag-and-Drop Interface: Utilize the native HTML5 Drag and Drop API or a lightweight touch-friendly library to move items from the holding area into specific tiers and between rows.
• Customizable Tiers: Users can dynamically rename tiers (e.g., 'S-Tier', 'A-Tier', 'Trash') and change the label background color using a color picker.
• Dynamic Row Management: Ability to add, delete, or reorder tier rows.
• Export Utility: Capture the rendered HTML area as an image using the Canvas API to generate a downloadable PNG.

UI Layout

• Header: Contains the tool title, an 'Export as PNG' primary button, a 'Clear All' button, and a 'Settings' toggle for layout configurations.
• Unsorted Area: A grid-based 'bucket' at the bottom of the screen where images are first loaded.
• Tier Board: A vertical stack of horizontal rows. Each row has a colored label on the left and a droppable zone on the right.
• No-Footer/No-Dark-Mode: The application will maintain a clean, high-contrast light mode UI only. No footer elements are permitted.

Aesthetics & Color Palette

• Primary Palette: Clean, crisp white background (#FFFFFF) with neutral light gray grid lines (#E0E0E0).
• Tier Labels: Preset vibrant colors for standard tiers (e.g., Red for S-Tier, Orange for A-Tier, Yellow for B-Tier, Green for C-Tier) with white text.
• Typography: Clean sans-serif fonts (e.g., Inter or Roboto) for high readability.

Animations & Micro-interactions

• Drag State: Elements should scale up slightly (1.05x) while being dragged to provide clear visual feedback.
• Drop Feedback: A subtle highlight (border glow) on the drop target when an item is hovered over a row.
• Transition: Smooth layout transitions when reordering rows.

Technical Constraints

• Responsive Design: The tier list board must be responsive. On mobile, the row width adjusts, and the holding area can be toggled or scrolled horizontally.
• Self-Contained: The entire application (HTML, CSS, JS) must be inside a single HTML file. No external dependencies (like React or Vue). CDN links are permitted only if strictly necessary and kept to a minimum.
• Iframe Ready: The design must work perfectly inside a sandboxed iframe, with no external links that break out of the frame.