html-ad-generator-mcp
Version:
MCP server for generating HTML ad templates from JSON input for Google Ads and Meta Ads
217 lines (197 loc) • 10.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Meta Ad Preview</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f0f2f5;padding:20px}
.container{max-width:500px;margin:auto}
.ad-preview,.controls{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);margin-bottom:20px;padding:20px}
.ad-header{display:flex;align-items:center;margin-bottom:15px;border-bottom:1px solid #e4e6eb;padding-bottom:15px}
.profile-pic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:10px;overflow:hidden}
.profile-pic img{width:100%;height:100%;object-fit:cover}
.profile-info h3{font-size:15px;margin-bottom:2px}
.profile-info span{font-size:13px;color:#65676b}
.ad-image{width:100%;aspect-ratio:1/1;background:#f1f1f1;border-radius:8px;margin-bottom:15px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-image img{width:100%;height:100%;object-fit:cover}
.ad-headline{font-size:18px;font-weight:bold;margin-bottom:8px}
.ad-description{font-size:13px;color:#65676b;margin-bottom:8px}
.ad-text{font-size:15px;line-height:1.4;margin-bottom:12px}
.ad-cta{display:inline-block;background:#1877f2;color:#fff;padding:12px 24px;border-radius:6px;text-decoration:none;font-weight:600;width:100%;text-align:center}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-weight:600;margin-bottom:8px}
.form-group input,.form-group textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-family:inherit}
.form-group textarea{resize:vertical;min-height:60px}
.char-count{font-size:12px;color:#65676b;margin-top:5px}
/* Editable dropdown styles */
.editable-dropdown{position:relative}
.editable-dropdown input{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-family:inherit}
.editable-dropdown textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-family:inherit;resize:vertical;min-height:80px}
.dropdown-options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 6px 6px;max-height:150px;overflow-y:auto;z-index:1000;display:none}
.dropdown-option{padding:10px;cursor:pointer;font-size:14px;border-bottom:1px solid #f0f0f0}
.dropdown-option:hover{background:#f8f9fa}
.dropdown-option:last-child{border-bottom:none}
.dropdown-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:#666;font-size:12px}
/* Social actions styles - text only */
.ad-actions{
display:flex;
justify-content:space-around;
margin-top:15px;
padding-top:10px;
border-top:1px solid #e4e6eb;
}
.ad-action{
display:flex;
align-items:center;
color:#65676b;
font-size:15px;
cursor:pointer;
flex:1;
justify-content:center;
padding:8px 12px;
border-radius:6px;
transition:background-color 0.2s;
font-weight:600;
}
.ad-action:hover{
background-color:#f2f3f5;
}
</style>
</head>
<body>
<div class="container">
<div class="ad-preview">
<div class="ad-header">
<div class="profile-pic">
<img src="https://via.placeholder.com/40" alt="Business Logo" id="profile-image">
</div>
<div class="profile-info">
<h3 id="business-name">Business Name</h3>
<span id="business-type">Sponsored • Business Type</span>
</div>
</div>
<div class="ad-image">
<img src="https://via.placeholder.com/500x500?text=Ad+Image" alt="Ad Image" id="main-image">
</div>
<div>
<h1 class="ad-headline" id="headline-preview">Ad Headline</h1>
<p class="ad-description" id="description-preview">Ad Description</p>
<div>
<p class="ad-text" id="text-preview">Primary ad text content goes here. This is the main message of your advertisement.</p>
</div>
<a href="#" class="ad-cta" id="cta-preview">Call to Action</a>
<!-- Social actions with text only -->
<div class="ad-actions">
<div class="ad-action">Like</div>
<div class="ad-action">Comment</div>
<div class="ad-action">Share</div>
</div>
</div>
</div>
<div class="controls">
<div class="form-group">
<label>Primary Text</label>
<div class="editable-dropdown">
<textarea id="primary-text" placeholder="Enter primary text..." style="min-height:80px">Primary ad text content goes here. This is the main message of your advertisement.</textarea>
<div class="dropdown-toggle" onclick="toggleDropdown('text-options')">▼</div>
<div class="dropdown-options" id="text-options">
<div class="dropdown-option" onclick="selectOption('primary-text', this)">Primary ad text content goes here. This is the main message of your advertisement.</div>
<div class="dropdown-option" onclick="selectOption('primary-text', this)">Discover amazing products and services. Limited time offers available now. Don't miss out on these exclusive deals!</div>
<div class="dropdown-option" onclick="selectOption('primary-text', this)">Experience the best quality and service. Our products are designed to meet your needs. Shop now and save big!</div>
</div>
</div>
<div class="char-count" id="text-count">75 characters (max 125)</div>
</div>
<div class="form-group">
<label>Headline</label>
<div class="editable-dropdown">
<input type="text" id="headline-text" value="Ad Headline" />
<div class="dropdown-toggle" onclick="toggleDropdown('headline-options')">▼</div>
<div class="dropdown-options" id="headline-options">
<div class="dropdown-option" onclick="selectOption('headline-text', this)">Ad Headline</div>
<div class="dropdown-option" onclick="selectOption('headline-text', this)">Special Offer</div>
<div class="dropdown-option" onclick="selectOption('headline-text', this)">Limited Time Deal</div>
</div>
</div>
<div class="char-count" id="headline-count">12 characters (max 40)</div>
</div>
<div class="form-group">
<label>Description</label>
<div class="editable-dropdown">
<input type="text" id="description-text" value="Ad Description" />
<div class="dropdown-toggle" onclick="toggleDropdown('description-options')">▼</div>
<div class="dropdown-options" id="description-options">
<div class="dropdown-option" onclick="selectOption('description-text', this)">Ad Description</div>
<div class="dropdown-option" onclick="selectOption('description-text', this)">Limited time only</div>
<div class="dropdown-option" onclick="selectOption('description-text', this)">New arrivals available now</div>
</div>
</div>
<div class="char-count" id="description-count">15 characters (max 30)</div>
</div>
<div class="form-group">
<label>Call-to-Action</label>
<div class="editable-dropdown">
<input type="text" id="cta-text" value="Call to Action" />
<div class="dropdown-toggle" onclick="toggleDropdown('cta-options')">▼</div>
<div class="dropdown-options" id="cta-options">
<div class="dropdown-option" onclick="selectOption('cta-text', this)">Call to Action</div>
<div class="dropdown-option" onclick="selectOption('cta-text', this)">Shop now</div>
<div class="dropdown-option" onclick="selectOption('cta-text', this)">Learn more</div>
<div class="dropdown-option" onclick="selectOption('cta-text', this)">Get offer</div>
</div>
</div>
</div>
</div>
</div>
<script>
function updatePreview(){
document.getElementById('text-preview').textContent=document.getElementById('primary-text').value;
document.getElementById('headline-preview').textContent=document.getElementById('headline-text').value;
document.getElementById('description-preview').textContent=document.getElementById('description-text').value;
document.getElementById('cta-preview').textContent=document.getElementById('cta-text').value;
const textLength = document.getElementById('primary-text').value.length;
document.getElementById('text-count').textContent = textLength + ' characters (max 125)';
const headlineLength = document.getElementById('headline-text').value.length;
document.getElementById('headline-count').textContent = headlineLength + ' characters (max 40)';
const descriptionLength = document.getElementById('description-text').value.length;
document.getElementById('description-count').textContent = descriptionLength + ' characters (max 30)';
}
function toggleDropdown(optionsId) {
// Close all other dropdowns
document.querySelectorAll('.dropdown-options').forEach(dropdown => {
if (dropdown.id !== optionsId) {
dropdown.style.display = 'none';
}
});
// Toggle the current dropdown
const options = document.getElementById(optionsId);
options.style.display = options.style.display === 'block' ? 'none' : 'block';
}
function selectOption(inputId, optionElement) {
const input = document.getElementById(inputId);
input.value = optionElement.textContent;
// Hide the dropdown
optionElement.parentElement.style.display = 'none';
// Update preview
updatePreview();
// Focus the input for further editing if needed
input.focus();
}
// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
if (!event.target.closest('.editable-dropdown')) {
document.querySelectorAll('.dropdown-options').forEach(dropdown => {
dropdown.style.display = 'none';
});
}
});
// Add event listeners for real-time updates
['primary-text','headline-text','description-text','cta-text'].forEach(id=>{
document.getElementById(id).addEventListener('input',updatePreview);
});
updatePreview();
</script>
</body>
</html>