| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8" /> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| | <title>Image Ad Essentials</title> |
| | <link rel="stylesheet" href="styles.css" /> |
| | |
| | <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| | <link |
| | href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" |
| | rel="stylesheet" |
| | /> |
| | </head> |
| | <body> |
| | |
| | <div class="blob blob-1"></div> |
| | <div class="blob blob-2"></div> |
| |
|
| | <div class="container"> |
| | |
| | <header class="header"> |
| | <div class="logo"> |
| | <span class="logo-icon">✦</span> |
| | </div> |
| | <h1 class="title">Image Ad Essentials</h1> |
| | <p class="subtitle">Generate psychology-driven ad angles & concepts for your ad campaigns</p> |
| | </header> |
| |
|
| | |
| | <div class="card form-card"> |
| | <form id="researchForm"> |
| | |
| | <div class="field"> |
| | <label for="productUrl">Product URL <span class="label-hint">(optional — fills category, description & target audience)</span></label> |
| | <div class="url-input-group"> |
| | <input |
| | type="url" |
| | id="productUrl" |
| | placeholder="https://amalfa.in/products/..." |
| | class="url-input" |
| | /> |
| | <button type="button" class="scrape-btn" id="scrapeBtn"> |
| | <span class="scrape-btn-text">Scrape & Fill</span> |
| | <span class="scrape-btn-loader hidden"> |
| | <span class="spinner"></span> |
| | </span> |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="field"> |
| | <label>Target Audience <span class="label-hint">(select one or more — or use Scrape & Fill above)</span></label> |
| | <div class="multiselect" id="audienceMultiselect"> |
| | <div class="multiselect-selected" id="selectedAudiences"> |
| | <span class="multiselect-placeholder">Loading audiences…</span> |
| | </div> |
| | <div class="multiselect-dropdown hidden" id="audienceDropdown"> |
| | <input type="text" class="multiselect-search" id="audienceSearch" placeholder="Search audiences…" /> |
| | <div class="multiselect-options" id="audienceOptions"></div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="field"> |
| | <label for="productCategory">Product Category</label> |
| | <input |
| | type="text" |
| | id="productCategory" |
| | placeholder="e.g. Ring, Bangles, Necklace" |
| | required |
| | /> |
| | </div> |
| |
|
| | |
| | <div class="field"> |
| | <label for="productDescription">Product Description</label> |
| | <textarea |
| | id="productDescription" |
| | rows="3" |
| | placeholder="e.g. Gold-plated minimalist ring with CZ stones, anti-tarnish coating" |
| | required |
| | ></textarea> |
| | </div> |
| |
|
| | |
| | <div class="field"> |
| | <label for="conceptsCount">Number of concepts & angles <span class="label-hint">(triggers to generate)</span></label> |
| | <input |
| | type="number" |
| | id="conceptsCount" |
| | min="1" |
| | max="15" |
| | value="5" |
| | placeholder="e.g. 5" |
| | /> |
| | </div> |
| |
|
| | |
| | <div class="field"> |
| | <label>AI Method</label> |
| | <div class="toggle-group"> |
| | <button type="button" class="toggle-btn active" data-method="gpt"> |
| | <span class="toggle-icon">⚡</span> GPT |
| | </button> |
| | <button type="button" class="toggle-btn" data-method="claude"> |
| | <span class="toggle-icon">🧠</span> Claude |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <button type="submit" class="submit-btn" id="submitBtn"> |
| | <span class="btn-text">Generate Ad Essentials</span> |
| | <span class="btn-loader hidden"> |
| | <span class="spinner"></span> |
| | Generating… |
| | </span> |
| | </button> |
| | </form> |
| | </div> |
| |
|
| | |
| | <div id="errorBanner" class="error-banner hidden"></div> |
| |
|
| | |
| | <div id="results" class="results hidden"></div> |
| | </div> |
| |
|
| | <script src="script.js"></script> |
| | </body> |
| | </html> |
| |
|
