Email Address Obfuscator & Spam Protector

Overview

The Email Address Obfuscator is a high-utility, browser-based tool designed to help website owners protect their contact information from automated spam harvesters. By encoding email addresses into HTML entities or dynamic JavaScript strings, this tool ensures human visitors can still contact you while making it significantly harder for bots to scrape your email.

Technical Specification

Core Functionality

• Live Input Validation: Real-time checking of the email format before obfuscation.
• Multiple Obfuscation Modes:
  • HTML Entity Encoding: Converts all characters to decimal/hex entities (e.g., a).
  • JavaScript 'mailto' Generator: A snippet that constructs the link programmatically so the email never appears in the static HTML source.
  • Rot13 / Base64 Scrambling: Provides a JavaScript-decoded version for additional obfuscation layers.
• One-Click Copy: Integrated copy-to-clipboard functionality for all output formats.
• Code Preview: Displays the final HTML or JS output in a syntax-highlighted box for easy verification.

User Interface (UI) Design

• Layout: Centered, responsive container. Top section contains a clean input field with floating label animation. Below the input, a tabbed interface (or card system) toggles between different obfuscation methods.
• Color Palette: A professional, vibrant light-mode palette:
  • Background: #f8fafc (Cool Gray)
  • Primary Accent: #2563eb (Modern Royal Blue)
  • Text: #1e293b (Dark Slate)
  • Card Background: #ffffff
  • Border/Subtle elements: #e2e8f0
• Typography: Clean, sans-serif stack (Inter or System UI) for maximum readability.

Interactions & Transitions

• Input Focus: Subtle glowing border shadow on input field.
• Tab Switching: Smooth CSS transition (fade and slide) when switching between encoding methods.
• Copy Feedback: A momentary success state animation on the copy button (changing to a checkmark icon).

Critical Developer Constraints

• Single File Requirement: Everything must reside in one .html file. CSS and JS must be embedded.
• No Persistent Storage: Do not use localStorage, cookies, or IndexedDB. If you need to track state during the session, use standard variables.
• Iframe Compatibility: Ensure no code attempts to access window.top or cookies, as this app will run in a sandboxed null-origin iframe.
• Performance: High performance is required; all encoding should happen instantaneously on the main thread.
• No External Dependencies: Use standard Web APIs. No React, Vue, or heavy frameworks. Pure JavaScript and lightweight CSS.