Landing Page Generator

Campaign Basics

• Brand / Program Name
• Offer Deadline (YYYY-MM-DD)
• Primary Accent (hex)
• Hero Headline
• Hero Subheadline
• Hero Image URL
  Recommended: 1600×1000 or larger, JPG.

Programs (2 cards)

• Card A

  • Badge
  • Title
  • Description
  • Value

• Card B

  • Badge
  • Title
  • Description
  • Value

Payout & Links

• $ per Resident — Water
• $ per Resident — Tea
• DEST URL (Yes →)
• Make.com Webhook URL
• UTM (source / medium / campaign)
  Use pipes “|” between values.

Operators (logo URLs)

• Comma-separated list of image URLs.

Testimonials (one per line)

• Format: Brand | “Quote” | ImageURL

Generate Code

Copy

Download .html

function formToVars(form){
  const fd = new FormData(form);
  const obj = Object.fromEntries(fd.entries());
  return obj;
}

$('#genBtn').addEventListener('click', ()=>{
  const vars = formToVars($('#genForm'));
  const html = buildTemplate(vars);
  $('#output').value = html;
});

$('#copyBtn').addEventListener('click', async ()=>{
  const t = $('#output');
  t.select(); t.setSelectionRange(0, t.value.length);
  try{ await navigator.clipboard.writeText(t.value); }catch(e){}
});

$('#downloadBtn').addEventListener('click', ()=>{
  const code = $('#output').value || '';
  const blob = new Blob([code], {type:'text/html'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'recess-landing-page.html';
  document.body.appendChild(a); a.click(); a.remove();
  setTimeout(()=>URL.revokeObjectURL(a.href), 1000);
});
})();