Technical Specification: Free Online Negative Keyword List Generator

Overview

A high-performance, browser-based utility designed for PPC professionals to generate, format, and sanitize negative keyword lists for major advertising platforms (Google Ads, Microsoft Advertising).

Core Features

• Bulk Input Processing: A flexible textarea for pasting large lists of search terms.
• Match Type Formatting: Toggles to apply specific match type formatting (Broad, Phrase, Exact) to the output list.
• Duplicate Removal: Automatic normalization and removal of duplicate terms.
• Instant Preview: A live-updated output pane showing formatted results.
• Download/Copy Options: One-click "Copy to Clipboard" and "Download as .txt" functionality.
• In-Memory Logic: All transformations occur in the browser; zero server-side processing.

UI/UX Design

• Layout:
  • Header: Clean, centered header with a descriptive H1 tag.
  • Main Area: A split-pane layout (Input Left, Output Right) for desktop; stacked for mobile.
  • Control Bar: A section between the panes containing formatting toggles (Checkbox: Enable Broad Match, Phrase Match, Exact Match) and a "Process" button.
  • Modals: Custom in-app overlays for "Copied to Clipboard" feedback (do not use browser alert()).
• Aesthetic:
  • Light Mode Only: Background #F8FAFC, cards #FFFFFF, borders #E2E8F0.
  • Typography: Sans-serif, professional typography (e.g., Inter or system UI stack).
  • Accent Colors: Primary blue #2563EB for buttons, success green #16A34A for copy feedback.

Technical Constraints & Directives

• Architecture: Must be a single HTML file containing all HTML, CSS, and vanilla JavaScript.
• No Persistence: Absolutely no localStorage, sessionStorage, or cookies. The application state must rely solely on variable memory.
• Security: Ensure the file is designed to run in a sandboxed iframe. No external calls unless required for libraries (CDN imports like Tailwind CSS are acceptable).
• Performance: Use requestAnimationFrame for UI updates to ensure the application remains responsive during large data operations.
• Responsiveness: Use CSS Flexbox/Grid for a fluid layout that scales from mobile devices up to ultra-wide desktop monitors.
• No Brand Marks: The tool must remain purely utility-focused. No fictional brand names, logos, or identifying markers.