Free Online HTML Email Signature Generator & Customizer

Product Specification: Responsive HTML Email Signature Generator

1. Overview

A browser-based, single-file utility that allows users to generate professional HTML email signatures. The application provides a visual builder experience where users input their contact details, and the system renders a live preview of the signature while generating the raw HTML code for copy-pasting.

2. Core Features

• Real-time Live Preview: A side-by-side or stacked container showing an instant rendering of the signature as the user types.
• Customizable Fields:
  • Name, Job Title, Company Name.
  • Contact info: Phone number, Email address, Website URL.
  • Image support: Input field for image source URL (logo or headshot).
  • Social Media: Toggleable buttons for LinkedIn, Twitter/X, Instagram, and Facebook with URL input fields.
• Layout Presets: Three simple toggle buttons to switch between alignment styles (Left-aligned text/image, Image-left/Text-right, Centered).
• Copy to Clipboard: One-click functionality to copy the raw HTML code. A secondary button to 'Copy Preview' allows users to copy the rendered DOM directly for pasting into rich-text editors (like Gmail settings).
• Reset Functionality: Clear all fields to start a new signature.

3. UI Layout

• Header: Clean, minimalist title and brief instruction text.
• Main Interface (Split View):
  • Left Panel (Inputs): A scrollable, clean card containing labeled input groups (Name, Title, etc.) using modern, high-contrast typography.
  • Right Panel (Preview): A persistent 'preview card' that renders the signature. Use a 'checkerboard' or subtle grey background to visualize the signature's footprint.
• Action Bar: Below the panels, primary buttons for 'Copy HTML Code' and 'Reset'.
• Mobile Behavior: On screens below 768px, the layout stacks vertically, with the Preview card pinned to the top for immediate feedback.

4. Aesthetics & Design

• Color Palette:
  • Background: #FFFFFF (White) and #F9FAFB (Subtle grey for cards).
  • Primary Accent: #2563EB (Professional Blue) for buttons and links.
  • Text: #1F2937 (Dark Grey) for readability; #6B7280 (Medium Grey) for labels.
  • Borders: #E5E7EB (Light Grey).
• Typography: System font stack (Inter, Segoe UI, Roboto) for a native look.
• Interactions: Subtle, smooth transitions on hover (300ms ease-in-out). Inputs should have a crisp border-focus effect.

5. Technical Constraints & Directives

• Single-File Architecture: All CSS, HTML, and JS must reside in one file. Use a CDN for Tailwind CSS (e.g., <script src="https://cdn.tailwindcss.com"></script>).
• In-Memory State: Do NOT use localStorage. Use standard JS object variables to track form state. If the user refreshes, the state resets.
• No Popups: Use hidden CSS div elements or simple modal toggles for 'Copied to Clipboard' feedback. Do not use alert().
• Iframe Safe: Ensure no calls to external storage or restricted window features. All scripts must be vanilla ES6+.
• Accessibility: Ensure high color contrast ratios and appropriate aria-label tags on all inputs for screen readers.