Account Confirmation Email Template

<!-- Control Panel -->
<div class="controls">
  <h3>📧 Email Template Customizer</h3>
  <div class="form-group">
    <label>User Name:</label>
    <input type="text" id="userName" value="John Doe">
  </div>
  <div class="form-group">
    <label>User Email:</label>
    <input type="email" id="userEmail" value="john.doe@example.com">
  </div>
  <div class="form-group">
    <label>Company Name:</label>
    <input type="text" id="companyName" value="TechCorp">
  </div>
  <div class="form-group">
    <label>Confirmation Link:</label>
    <input type="text" id="confirmLink" value="https://yourcompany.com/confirm?token=abc123xyz789">
  </div>
  <button class="update-button" onclick="updateEmail()">Update Preview</button>
</div>

<!-- Email Template -->
<div class="email-container">
  <div class="email-header">
    <div class="company-logo" id="logoText">TechCorp</div>
    <h1>Welcome to <span id="headerCompany">TechCorp</span>!</h1>
  </div>

  <div class="email-body">
    <h2>Hi <span id="displayName">John Doe</span>,</h2>

    <p>
      Thank you for signing up! We're excited to have you on board. To get started, please confirm your email address by clicking the button below.
    </p>

    <p>
      Your account email: <span class="user-email" id="displayEmail">john.doe@example.com</span>
    </p>

    <div class="cta-container">
      <a href="#" class="cta-button" id="ctaButton">Confirm Email Address</a>
    </div>

    <p class="link-text">Or copy and paste this link into your browser:</p>

    <div class="link-box">
      <a href="#" id="linkUrl">https://yourcompany.com/confirm?token=abc123xyz789</a>
    </div>

    <p class="expiry-notice">
      ⏰ This link will expire in 24 hours for security reasons.
    </p>

    <div class="security-notice">
      <p>
        <strong>🔒 Security tip:</strong> If you didn't create an account with <span id="securityCompany">TechCorp</span>, please ignore this email or contact our support team.
      </p>
    </div>
  </div>

  <div class="email-footer">
    <p class="footer-text">
      Need help? <a href="mailto:support@techcorp.com" id="supportEmail">Contact Support</a>
    </p>

    <p class="footer-copyright">
      © <span id="year"></span> <span id="footerCompany">TechCorp</span>. All rights reserved.<br>
      123 Business Street, Suite 100, City, State 12345
    </p>

    <div class="social-icons">
      <a href="#" title="Facebook">f</a>
      <a href="#" title="Twitter">𝕏</a>
      <a href="#" title="LinkedIn">in</a>
    </div>
  </div>
</div>

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f3f4f6;
      padding: 40px 20px;
    }

    .email-container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .email-header {
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      padding: 40px 30px;
      text-align: center;
    }

    .company-logo {
      height: 50px;
      margin-bottom: 20px;
      background: white;
      padding: 10px 20px;
      border-radius: 8px;
      display: inline-block;
      font-weight: bold;
      color: #2563eb;
    }

    .email-header h1 {
      color: #ffffff;
      font-size: 28px;
      font-weight: 600;
      margin: 0;
    }

    .email-body {
      padding: 40px 30px;
    }

    .email-body h2 {
      color: #1f2937;
      margin: 0 0 20px 0;
      font-size: 22px;
    }

    .email-body p {
      color: #4b5563;
      line-height: 1.6;
      margin: 0 0 20px 0;
      font-size: 16px;
    }

    .user-email {
      color: #1f2937;
      font-weight: 600;
    }

    .cta-container {
      text-align: center;
      padding: 20px 0;
      margin: 30px 0;
    }

    .cta-button {
      display: inline-block;
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      color: #ffffff;
      text-decoration: none;
      padding: 16px 40px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    }

    .link-text {
      color: #6b7280;
      font-size: 14px;
      margin: 30px 0 10px 0;
    }

    .link-box {
      background-color: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      padding: 12px;
      word-break: break-all;
      margin-bottom: 20px;
    }

    .link-box a {
      color: #2563eb;
      text-decoration: none;
      font-size: 14px;
    }

    .expiry-notice {
      color: #9ca3af;
      font-size: 13px;
      margin: 20px 0 0 0;
    }

    .security-notice {
      background-color: #fef3c7;
      border-left: 4px solid #f59e0b;
      padding: 16px;
      border-radius: 6px;
      margin: 30px 0 0 0;
    }

    .security-notice p {
      color: #92400e;
      margin: 0;
      font-size: 14px;
    }

    .email-footer {
      background-color: #f9fafb;
      padding: 30px;
      text-align: center;
      border-top: 1px solid #e5e7eb;
    }

    .footer-text {
      color: #6b7280;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .footer-text a {
      color: #2563eb;
      text-decoration: none;
    }

    .footer-copyright {
      color: #9ca3af;
      font-size: 12px;
      line-height: 1.6;
    }

    .social-icons {
      margin-top: 20px;
    }

    .social-icons a {
      display: inline-block;
      margin: 0 8px;
      width: 32px;
      height: 32px;
      background: #2563eb;
      border-radius: 50%;
      line-height: 32px;
      text-align: center;
      color: white;
      text-decoration: none;
      font-size: 16px;
      transition: transform 0.2s;
    }

    .social-icons a:hover {
      transform: scale(1.1);
    }

    .controls {
      max-width: 600px;
      margin: 0 auto 30px;
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .controls h3 {
      color: #1f2937;
      margin-bottom: 15px;
      font-size: 18px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      color: #4b5563;
      font-size: 14px;
      margin-bottom: 5px;
      font-weight: 500;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      font-size: 14px;
      font-family: inherit;
    }

    .form-group input:focus {
      outline: none;
      border-color: #2563eb;
    }

    .update-button {
      background: #2563eb;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

    .update-button:hover {
      background: #1d4ed8;
    }

    @media (max-width: 640px) {
      body {
        padding: 20px 10px;
      }

      .email-header {
        padding: 30px 20px;
      }

      .email-header h1 {
        font-size: 24px;
      }

      .email-body {
        padding: 30px 20px;
      }

      .cta-button {
        padding: 14px 30px;
        font-size: 15px;
      }
    }

    // Set current year
    document.getElementById('year').textContent = new Date().getFullYear();

    // Update email template with custom values
    function updateEmail() {
      const userName = document.getElementById('userName').value;
      const userEmail = document.getElementById('userEmail').value;
      const companyName = document.getElementById('companyName').value;
      const confirmLink = document.getElementById('confirmLink').value;

      // Update all instances
      document.getElementById('displayName').textContent = userName;
      document.getElementById('displayEmail').textContent = userEmail;
      document.getElementById('logoText').textContent = companyName;
      document.getElementById('headerCompany').textContent = companyName;
      document.getElementById('footerCompany').textContent = companyName;
      document.getElementById('securityCompany').textContent = companyName;
      
      document.getElementById('ctaButton').href = confirmLink;
      document.getElementById('linkUrl').textContent = confirmLink;
      document.getElementById('linkUrl').href = confirmLink;
      
      document.getElementById('supportEmail').href = `mailto:support@${companyName.toLowerCase()}.com`;
      document.getElementById('supportEmail').textContent = 'Contact Support';
    }

    // Function to get the email HTML (for sending via backend)
    function getEmailHTML() {
      const emailContainer = document.querySelector('.email-container');
      return emailContainer.outerHTML;
    }

    // Example: Copy HTML to clipboard
    function copyEmailHTML() {
      const html = getEmailHTML();
      navigator.clipboard.writeText(html).then(() => {
        alert('Email HTML copied to clipboard!');
      });
    }