Email Signature Maker

A professional, browser-based email signature generator with live preview. Create beautiful HTML email signatures compatible with Gmail, Apple Mail (macOS), and iOS Mail.

✨ Features

• Live Preview - See your signature update in real-time as you type

• Company Branding - Add your logo, company name, and website

• Personal Details - Include your name, job title, phone number, and LinkedIn profile

• One-Click Copy - Copy your signature to clipboard with preserved HTML formatting

• Dark Mode Preview - Toggle between light and dark backgrounds to see how your signature looks

• Email Client Instructions - Built-in guide for importing signatures into Gmail, macOS Mail, and iOS Mail

• Responsive Design - Works beautifully on desktop and mobile devices

• No Dependencies - Pure HTML, CSS, and JavaScript - no frameworks required

  

🚀 Quick Start

Option 1: Open Directly

Simply open index.html in your web browser - no server required!

# On Windows
start index.html

# On macOS
open index.html

# On Linux
xdg-open index.html

Option 2: Use a Local Server

For development, you can use any local server:

# Using Python 3
python -m http.server 8080

# Using Node.js (npx)
npx serve .

# Using PHP
php -S localhost:8080

Then navigate to http://localhost:8080 in your browser.

📝 How to Use

1. Enter Company Branding (optional)

   • Paste your company logo URL (direct link to PNG, JPG, or SVG)
   • Enter your company name
   • Add your company website URL

2. Fill in Your Details

   • Enter your full name
   • Add your job title
   • Include your phone number
   • Paste your LinkedIn profile URL

3. Preview Your Signature

   • Watch the live preview update as you type
   • Toggle dark mode to see how it looks on different backgrounds

4. Copy and Import

   • Click the "Copy Signature" button
   • Click "How to Import?" for step-by-step instructions for your email client

📧 Supported Email Clients

Email Client	HTML Support	Notes
Gmail	✅ Full	Go to Settings → Signature
macOS Mail	✅ Full	Go to Mail → Settings → Signatures
iOS Mail	⚠️ Limited	HTML may be simplified
Outlook	✅ Full	Paste in signature settings

🎨 Customization

The signature uses a clean, professional design with:

• Font: Arial (universal email compatibility)
• Colors: Warm muted palette (#2d2a26 primary, #6b6560 secondary)
• LinkedIn Icon: Hosted externally for email client compatibility

To customize the design, edit the CSS variables in styles.css:

:root {
  --color-accent: #c17f59; /* Primary accent color */
  --color-text-primary: #2d2a26; /* Main text color */
  --color-text-secondary: #6b6560; /* Secondary text color */
  /* ... more variables */
}

📁 Project Structure

signature-maker/
├── index.html    # Main HTML structure and UI
├── styles.css    # All styling and responsive design
├── app.js        # Application logic and signature generation
└── README.md     # This file

🔧 Technical Details

• No Build Process - Just static HTML, CSS, and JavaScript
• Clipboard API - Uses modern ClipboardItem API for HTML copying with fallback
• HTML Email Best Practices - Table-based layout for maximum email client compatibility
• XSS Prevention - All user input is properly escaped before rendering
• Accessibility - ARIA labels, keyboard navigation, and focus management

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

📄 License

MIT License - feel free to use this project for personal or commercial purposes.

---

⭐ If this project helps you, please give it a star!