Technical Specification: Free Online PPC Keyword Match Type Wrapper

Overview

A clean, single-page browser-based utility that transforms raw keyword lists into formatted lists for Pay-Per-Click (PPC) advertising campaigns (Exact, Phrase, and Broad Match).

Functional Requirements

1. Input Area: A multi-line textarea allowing users to paste a list of keywords (one per line).
2. Formatting Options: Checkboxes/toggles for:
   • Exact Match ([keyword])
   • Phrase Match ("keyword")
   • Broad Match Modifier (+keyword)
3. Real-time Processing: Results update instantly as the user types or toggles options.
4. Bulk Copy: A "Copy to Clipboard" button that captures all formatted text.
5. Clear Input: A button to reset the state.
6. Counter: Display total keywords processed for campaign planning.

UI/UX Specification

• Layout: A two-column responsive grid layout on desktop, stacking to a single column on mobile.
• Aesthetic: Premium, minimalist, light-mode only. White background (#FFFFFF), soft gray card shadows (#F3F4F6), and a primary accent color of soft indigo (#4F46E5) for interactive elements.
• Typography: Clean, system-font stack (Inter or Segoe UI) with high readability.
• Animations: Subtle fade-in effects for results and smooth button hover states (transition duration: 200ms).

Developer Directives

• Architecture: Single HTML file containing CSS and Vanilla JS. Use Tailwind CSS via CDN.
• No Storage: Strictly forbidden to use localStorage, sessionStorage, or cookies. Maintain state via memory-only JS variables.
• Modal Implementation: Do not use alert(). Use custom HTML/CSS modals for success messages (e.g., "Copied to clipboard!").
• Responsive Design: Ensure the textarea height expands correctly on mobile and remains user-friendly.
• Iframe Safe: Ensure no calls to parent windows or top-level redirects.

Color Palette

• Primary Accent: #4F46E5 (Indigo)
• Background: #F9FAFB (Cool Gray)
• Surface: #FFFFFF (White)
• Text: #111827 (Gray-900) for headers, #4B5563 (Gray-600) for body text.
• Borders: #E5E7EB (Gray-200)