Technical Specification: Free Online Campaign URL Builder

This application is a streamlined, single-file utility designed to generate campaign tracking parameters (UTM codes) for marketing URLs. The focus is on precision, ease of use, and a clean, professional aesthetic.

1. Core Features

• Live URL Construction: Real-time generation as the user types.
• Parametric Inputs: Fields for Website URL, Campaign Source, Medium, Name, Term, and Content.
• One-Click Copy: A prominent action button to copy the finished URL to the clipboard.
• Validation: Automatic validation to ensure the base URL is formatted correctly.
• URL Encoding: Automatic encoding of special characters to ensure link reliability.
• Mobile Optimization: Fully responsive layout that stacks inputs on smaller screens.

2. UI/UX Specification

• Header: Simple, descriptive H1 title with a brief subtitle explanation.
• Main Tool Area: A two-column layout on desktop: Left side contains input fields (labeled clearly), right side features a persistent 'Live Preview' card.
• Output Section: A clearly defined output box with syntax highlighting (gray background) and a 'Copy to Clipboard' button with an 'active' state animation (change to success green).
• Visual Style:
  • Colors: Primary: #2563eb (Blue), Background: #f8fafc (Light Gray/White), Text: #1e293b (Slate).
  • Typography: Sans-serif, clean font (e.g., Inter, system-ui).
  • Components: Rounded corners (8px radius) on all input fields and cards. Soft, subtle shadows (0 1px 3px rgba(0,0,0,0.1)).

3. Technical Implementation Details

• Architecture: Single-file Vanilla HTML, CSS, and JavaScript. CSS will be provided via Tailwind CSS CDN.
• No-Storage Policy: CRITICAL: Do NOT use localStorage, sessionStorage, or cookies. State must be managed purely within the DOM/Javascript runtime. If the page is refreshed, the inputs reset.
• No-Popup Policy: Do not use alert() or confirm(). All feedback (e.g., "Link Copied!") should be a temporary toast notification or UI state change within the page.
• Iframe Compatibility: The app should not attempt to access top.window, parent, or external cookies. It operates as a self-contained, sandboxed unit.
• Performance: Use window.addEventListener('input', ...) to trigger updates rather than buttons, ensuring immediate feedback.

4. Development Directives

• Use encodeURIComponent() for all dynamic inputs to ensure generated URLs are valid and browser-safe.
• Ensure all links (if any) have target="_blank" and rel="noopener noreferrer".
• Include a 'Clear Form' button that resets inputs to initial empty states.
• The 'Copy' button must provide visual confirmation using a temporary CSS class for success (e.g., changing background color to green for 2 seconds).