Email Template Builder

<!-- PRESETS -->
<div class="et-section">
  <div class="et-section-title">Preset Templates</div>
  <div class="et-presets">
    <button class="et-preset-btn" onclick="etApplyPreset('newsletter')">Newsletter</button>
    <button class="et-preset-btn" onclick="etApplyPreset('announcement')">Announcement</button>
    <button class="et-preset-btn" onclick="etApplyPreset('welcome')">Welcome Email</button>
    <button class="et-preset-btn" onclick="etApplyPreset('receipt')">Receipt / Order</button>
  </div>
</div>

<!-- HEADER -->
<div class="et-section">
  <div class="et-section-title">Header</div>
  <div class="et-toggle-row">
    <label class="et-toggle"><input type="checkbox" id="et-show-logo" checked onchange="etUpdate()"><span class="et-toggle-slider"></span></label>
    <label for="et-show-logo">Show Logo</label>
  </div>
  <div class="et-field" id="et-logo-field">
    <label>Logo URL</label>
    <input type="url" id="et-logo-url" placeholder="https://example.com/logo.png" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>Logo Alt Text</label>
    <input type="text" id="et-logo-alt" value="Company Logo" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>Header Background</label>
    <div class="et-color-row">
      <input type="color" id="et-header-bg-pick" value="#6366f1" oninput="etSyncColor('header-bg')">
      <input type="text" id="et-header-bg" value="#6366f1" oninput="etSyncPick('header-bg');etUpdate()">
    </div>
  </div>
  <div class="et-field">
    <label>Header Text / Logo Padding</label>
    <input type="text" id="et-header-text" value="Your Company" oninput="etUpdate()">
  </div>
</div>

<!-- HERO IMAGE -->
<div class="et-section">
  <div class="et-section-title">Hero Image</div>
  <div class="et-toggle-row">
    <label class="et-toggle"><input type="checkbox" id="et-show-hero" onchange="etUpdate()"><span class="et-toggle-slider"></span></label>
    <label for="et-show-hero">Show Hero Image</label>
  </div>
  <div class="et-field">
    <label>Hero Image URL</label>
    <input type="url" id="et-hero-url" placeholder="https://example.com/hero.jpg" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>Hero Alt Text</label>
    <input type="text" id="et-hero-alt" value="Hero Image" oninput="etUpdate()">
  </div>
</div>

<!-- CONTENT -->
<div class="et-section">
  <div class="et-section-title">Content</div>
  <div class="et-field">
    <label>Heading</label>
    <input type="text" id="et-heading" value="Welcome to Our Newsletter" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>Body Text</label>
    <textarea id="et-body" oninput="etUpdate()">Thank you for subscribing! We're excited to share the latest updates, tips, and news with you. Stay tuned for great content coming your way.</textarea>
  </div>
</div>

<!-- CTA BUTTON -->
<div class="et-section">
  <div class="et-section-title">CTA Button</div>
  <div class="et-toggle-row">
    <label class="et-toggle"><input type="checkbox" id="et-show-cta" checked onchange="etUpdate()"><span class="et-toggle-slider"></span></label>
    <label for="et-show-cta">Show Button</label>
  </div>
  <div class="et-field">
    <label>Button Text</label>
    <input type="text" id="et-cta-text" value="Read More" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>Button URL</label>
    <input type="url" id="et-cta-url" value="https://example.com" oninput="etUpdate()">
  </div>
  <div class="et-field">
    <label>Button Color</label>
    <div class="et-color-row">
      <input type="color" id="et-btn-bg-pick" value="#6366f1" oninput="etSyncColor('btn-bg')">
      <input type="text" id="et-btn-bg" value="#6366f1" oninput="etSyncPick('btn-bg');etUpdate()">
    </div>
  </div>
  <div class="et-field">
    <label>Button Text Color</label>
    <div class="et-color-row">
      <input type="color" id="et-btn-color-pick" value="#ffffff" oninput="etSyncColor('btn-color')">
      <input type="text" id="et-btn-color" value="#ffffff" oninput="etSyncPick('btn-color');etUpdate()">
    </div>
  </div>
</div>

<!-- STYLE -->
<div class="et-section">
  <div class="et-section-title">Style</div>
  <div class="et-field">
    <label>Font Family</label>
    <select id="et-font" onchange="etUpdate()">
      <option value="Arial, Helvetica, sans-serif">Arial (safe)</option>
      <option value="'Georgia', Times, serif">Georgia (serif)</option>
      <option value="'Trebuchet MS', sans-serif">Trebuchet MS</option>
      <option value="Verdana, Geneva, sans-serif">Verdana</option>
      <option value="'Courier New', Courier, monospace">Courier New (mono)</option>
    </select>
  </div>
  <div class="et-field">
    <label>Body Background</label>
    <div class="et-color-row">
      <input type="color" id="et-body-bg-pick" value="#f4f4f5" oninput="etSyncColor('body-bg')">
      <input type="text" id="et-body-bg" value="#f4f4f5" oninput="etSyncPick('body-bg');etUpdate()">
    </div>
  </div>
  <div class="et-field">
    <label>Card Background</label>
    <div class="et-color-row">
      <input type="color" id="et-card-bg-pick" value="#ffffff" oninput="etSyncColor('card-bg')">
      <input type="text" id="et-card-bg" value="#ffffff" oninput="etSyncPick('card-bg');etUpdate()">
    </div>
  </div>
  <div class="et-field">
    <label>Text Color</label>
    <div class="et-color-row">
      <input type="color" id="et-text-color-pick" value="#374151" oninput="etSyncColor('text-color')">
      <input type="text" id="et-text-color" value="#374151" oninput="etSyncPick('text-color');etUpdate()">
    </div>
  </div>
</div>

<!-- FOOTER -->
<div class="et-section">
  <div class="et-section-title">Footer</div>
  <div class="et-field">
    <label>Footer Text</label>
    <textarea id="et-footer" oninput="etUpdate()">© 2025 Your Company. All rights reserved.

123 Main Street, City, Country Unsubscribe | Privacy Policy