159 lines
15 KiB
HTML
Executable File
159 lines
15 KiB
HTML
Executable File
<!DOCTYPE html><html lang="fr" data-theme="dark"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>WEVADS • AI Copywriter</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{--bg:#060a14;--s:#0c1220;--s2:#111827;--b:#1e293b;--t:#e2e8f0;--d:#64748b;--cy:#22d3ee;--gn:#34d399;--am:#fbbf24;--rd:#f87171;--pu:#a78bfa;--bl:#60a5fa;--pk:#f472b6}
|
|
*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--t);font-family:'DM Sans',sans-serif;font-size:11px}
|
|
.hdr{background:var(--s);border-bottom:1px solid var(--b);padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
|
|
.hdr h1{font-size:16px;font-weight:700}.hdr h1 span{color:var(--pu)}
|
|
.wrap{padding:16px;max-width:1400px;margin:0 auto}
|
|
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
|
|
.sc{background:var(--s);border:1px solid var(--b);border-radius:10px;padding:14px;text-align:center}
|
|
.sc .n{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700}.sc .l{font-size:9px;text-transform:uppercase;color:var(--d);margin-top:4px;letter-spacing:.5px}
|
|
.tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--b)}.tab{padding:8px 16px;cursor:pointer;font-size:10px;font-weight:600;text-transform:uppercase;color:var(--d);border-bottom:2px solid transparent}.tab:hover{color:var(--t)}.tab.active{color:var(--pu);border-color:var(--pu)}
|
|
.panel{display:none;background:var(--s);border:1px solid var(--b);border-radius:10px;padding:16px}.panel.active{display:block}
|
|
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
.form-row{margin-bottom:10px}.form-row label{display:block;font-size:9px;text-transform:uppercase;color:var(--d);margin-bottom:4px;letter-spacing:.5px}
|
|
.form-row input,.form-row select,.form-row textarea{width:100%;background:var(--s2);border:1px solid var(--b);color:var(--t);padding:8px;border-radius:6px;font-size:11px;font-family:'DM Sans',sans-serif}
|
|
.form-row textarea{min-height:120px;resize:vertical}
|
|
.btn{padding:8px 16px;border-radius:6px;border:1px solid var(--b);background:var(--s2);color:var(--t);cursor:pointer;font-size:10px;font-weight:600}.btn:hover{border-color:var(--pu)}
|
|
.btn-pu{background:rgba(167,139,250,.15);border-color:var(--pu);color:var(--pu)}
|
|
.preview{background:var(--bg);border:1px solid var(--b);border-radius:8px;padding:16px}
|
|
.preview-subj{font-size:14px;font-weight:700;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--b)}
|
|
.preview-body{font-size:11px;line-height:1.6;color:var(--d)}
|
|
.template{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;cursor:pointer;transition:.2s}.template:hover{border-color:var(--pu)}
|
|
.template-name{font-weight:600;font-size:11px;margin-bottom:4px}.template-desc{font-size:9px;color:var(--d)}
|
|
.badge{font-size:8px;padding:2px 6px;border-radius:3px;font-weight:600}
|
|
.badge-pu{background:rgba(167,139,250,.15);color:var(--pu)}.badge-gn{background:rgba(52,211,153,.15);color:var(--gn)}.badge-am{background:rgba(251,191,36,.15);color:var(--am)}
|
|
table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;color:var(--d);text-transform:uppercase;font-size:9px;padding:6px 8px;border-bottom:1px solid var(--b)}td{padding:6px 8px;border-bottom:1px solid rgba(30,41,59,.3)}
|
|
.var-tag{display:inline-block;background:rgba(34,211,238,.1);color:var(--cy);padding:2px 6px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:9px;margin:2px}
|
|
@media(max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}.grid2{grid-template-columns:1fr}}
|
|
</style><style>.light{--bg:#f0f2f5;--s:#ffffff;--s2:#f8fafc;--b:#e2e8f0;--t:#1e293b;--d:#64748b}.light input,.light select,.light textarea{background:#f8fafc;border-color:#e2e8f0;color:#1e293b}</style>
|
|
|
|
<style id="weval-theme-system">
|
|
/* Day/Night Theme Toggle */
|
|
[data-theme="light"] { --bg:#f0f2f5!important; --s:#ffffff!important; --s2:#f8fafc!important; --b:#e2e8f0!important; --t:#1e293b!important; --d:#64748b!important; }
|
|
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
|
|
background:#f8fafc!important; border-color:#e2e8f0!important; color:#1e293b!important;
|
|
}
|
|
[data-theme="light"] .hdr, [data-theme="light"] header, [data-theme="light"] nav {
|
|
background:#ffffff!important; border-color:#e2e8f0!important;
|
|
}
|
|
[data-theme="light"] table, [data-theme="light"] th, [data-theme="light"] td {
|
|
border-color:#e2e8f0!important;
|
|
}
|
|
[data-theme="light"] th { background:#f8fafc!important; }
|
|
[data-theme="light"] .sc, [data-theme="light"] .card, [data-theme="light"] [class*="card"] {
|
|
background:#ffffff!important; border-color:#e2e8f0!important;
|
|
}
|
|
.weval-theme-btn {
|
|
position:fixed; bottom:16px; right:16px; z-index:9999;
|
|
width:40px; height:40px; border-radius:50%;
|
|
border:1px solid var(--b, #1e293b);
|
|
background:var(--s, #0c1220);
|
|
color:var(--t, #e2e8f0);
|
|
cursor:pointer; font-size:18px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
box-shadow:0 2px 8px rgba(0,0,0,0.3);
|
|
transition:all 0.2s;
|
|
}
|
|
.weval-theme-btn:hover { transform:scale(1.1); }
|
|
</style>
|
|
</head><body>
|
|
<div class="hdr"><div><h1>✍️ WEVADS • <button id="theme-toggle" onclick="toggleTheme()" style="background:var(--s2,#111827);border:1px solid var(--b,#1e293b);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font-size:13px;color:var(--t,#e2e8f0);transition:all .3s" title="Jour/Nuit">🌙</button><span id="clock"></span></div></div>
|
|
<div class="wrap">
|
|
<div class="stats">
|
|
<div class="sc"><div class="n" style="color:var(--pu)">2,847</div><div class="l">Sujets générés</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--gn)">34.2%</div><div class="l">Taux ouverture moy.</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--cy)">156</div><div class="l">Templates actifs</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--am)">8</div><div class="l">Langues supportées</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--bl)">12</div><div class="l">A/B tests actifs</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--pk)">4.2x</div><div class="l">ROI copywriting IA</div></div>
|
|
</div>
|
|
<div class="tabs">
|
|
<div class="tab active" onclick="showTab('generate')">Générer</div>
|
|
<div class="tab" onclick="showTab('templates')">Templates</div>
|
|
<div class="tab" onclick="showTab('ab')">A/B Testing</div>
|
|
<div class="tab" onclick="showTab('history')">Historique</div>
|
|
</div>
|
|
<div class="panel active" id="tab-generate">
|
|
<div class="grid2">
|
|
<div>
|
|
<h3 style="font-size:12px;margin-bottom:10px;color:var(--pu)">📝 Paramètres de génération</h3>
|
|
<div class="form-row"><label>Type de contenu</label><select><option>Sujet + Corps email</option><option>Sujet uniquement</option><option>Corps uniquement</option><option>CTA (Call-to-Action)</option><option>Landing page headline</option></select></div>
|
|
<div class="form-row"><label>Industrie / Niche</label><select><option>E-commerce / Retail</option><option>Finance / Banque</option><option>Santé / Pharma</option><option>Tech / SaaS</option><option>Immobilier</option><option>Formation / Education</option><option>Voyage / Tourisme</option><option>B2B Services</option></select></div>
|
|
<div class="form-row"><label>Langue</label><select><option>Français</option><option>Allemand</option><option>Anglais</option><option>Espagnol</option><option>Italien</option><option>Néerlandais</option><option>Portugais</option><option>Arabe</option></select></div>
|
|
<div class="form-row"><label>Ton</label><select><option>Professionnel</option><option>Amical / Casual</option><option>Urgent / FOMO</option><option>Informatif</option><option>Luxe / Premium</option><option>Humoristique</option></select></div>
|
|
<div class="form-row"><label>Offre / Produit (description courte)</label><textarea placeholder="Ex: Réduction -50% sur collection hiver, livraison gratuite...">Offre exclusive -40% sur toute la collection, livraison gratuite France, code WINTER40</textarea></div>
|
|
<div class="form-row"><label>Variables personnalisation</label><div><span class="var-tag">{{prenom}}</span><span class="var-tag">{{nom}}</span><span class="var-tag">{{ville}}</span><span class="var-tag">{{entreprise}}</span><span class="var-tag">{{date}}</span><span class="var-tag">{{montant}}</span></div></div>
|
|
<div class="form-row"><label>Nombre de variantes</label><select><option>3 variantes</option><option>5 variantes</option><option>10 variantes</option></select></div>
|
|
<button class="btn btn-pu" style="width:100%;padding:10px" onclick="generateCopy()">🤖 Générer avec HAMID IA</button>
|
|
</div>
|
|
<div>
|
|
<h3 style="font-size:12px;margin-bottom:10px;color:var(--cy)">👁 Aperçu généré</h3>
|
|
<div id="preview-area">
|
|
<div class="preview" style="margin-bottom:10px">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px"><span class="badge badge-pu">Variante A</span><span style="color:var(--gn);font-size:9px">Score: 87/100</span></div>
|
|
<div class="preview-subj">{{prenom}}, votre offre exclusive expire ce soir ⏰</div>
|
|
<div class="preview-body">Bonjour {{prenom}},<br><br>Nous avons réservé une offre spéciale rien que pour vous : <strong>-40% sur toute la collection</strong> avec le code WINTER40.<br><br>Livraison gratuite en France — mais attention, cette offre expire à minuit.<br><br>👉 <a style="color:var(--cy)">Découvrir ma sélection</a></div>
|
|
</div>
|
|
<div class="preview" style="margin-bottom:10px">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px"><span class="badge badge-am">Variante B</span><span style="color:var(--gn);font-size:9px">Score: 82/100</span></div>
|
|
<div class="preview-subj">-40% 🔥 Dernières heures pour en profiter</div>
|
|
<div class="preview-body">{{prenom}},<br><br>Plus que quelques heures pour profiter de notre vente flash : 40% de réduction sur tout + livraison offerte.<br><br>Code : WINTER40<br><br>Ne laissez pas passer cette opportunité.</div>
|
|
</div>
|
|
<div class="preview">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px"><span class="badge badge-gn">Variante C</span><span style="color:var(--am);font-size:9px">Score: 74/100</span></div>
|
|
<div class="preview-subj">Votre cadeau vous attend, {{prenom}} 🎁</div>
|
|
<div class="preview-body">Cher(e) {{prenom}},<br><br>En tant que client privilégié, vous bénéficiez d'une remise exceptionnelle de 40%.<br><br>Utilisez le code WINTER40 avant minuit.<br><br>Cordialement,<br>L'équipe</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="tab-templates">
|
|
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
|
|
<div class="template"><div class="template-name">🔥 FOMO Urgence</div><div class="template-desc">Sujets avec urgence, compte à rebours, stock limité</div><span class="badge badge-pu">42 variantes</span></div>
|
|
<div class="template"><div class="template-name">🎁 Offre Spéciale</div><div class="template-desc">Réductions, cadeaux, codes promo personnalisés</div><span class="badge badge-gn">38 variantes</span></div>
|
|
<div class="template"><div class="template-name">📰 Newsletter</div><div class="template-desc">Contenu informatif, actualités, conseils</div><span class="badge badge-am">24 variantes</span></div>
|
|
<div class="template"><div class="template-name">🤝 B2B Outreach</div><div class="template-desc">Prospection professionnelle, partenariats</div><span class="badge badge-pu">18 variantes</span></div>
|
|
<div class="template"><div class="template-name">🛒 Abandon Panier</div><div class="template-desc">Relance panier, incentives retour</div><span class="badge badge-gn">15 variantes</span></div>
|
|
<div class="template"><div class="template-name">⭐ Fidélisation</div><div class="template-desc">Anniversaire, points fidélité, VIP</div><span class="badge badge-am">12 variantes</span></div>
|
|
<div class="template"><div class="template-name">📣 Lancement Produit</div><div class="template-desc">Teaser, reveal, early access</div><span class="badge badge-pu">10 variantes</span></div>
|
|
<div class="template"><div class="template-name">🔄 Réactivation</div><div class="template-desc">Win-back, inactifs, dernière chance</div><span class="badge badge-gn">8 variantes</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="tab-ab">
|
|
<h3 style="font-size:12px;margin-bottom:10px">🧪 Tests A/B actifs</h3>
|
|
<table><thead><tr><th>Campagne</th><th>Variante A</th><th>Variante B</th><th>Open A</th><th>Open B</th><th>Winner</th><th>Status</th></tr></thead><tbody>
|
|
<tr><td>Winter Sale FR</td><td>Votre offre expire ce soir ⏰</td><td>-40% dernières heures 🔥</td><td style="color:var(--gn)">38.2%</td><td>31.5%</td><td style="color:var(--gn)">A (+6.7%)</td><td><span class="badge badge-gn">TERMINÉ</span></td></tr>
|
|
<tr><td>B2B Tech DE</td><td>Ihre exklusive Einladung</td><td>Kostenlos testen: 14 Tage</td><td>24.1%</td><td style="color:var(--gn)">29.8%</td><td style="color:var(--gn)">B (+5.7%)</td><td><span class="badge badge-gn">TERMINÉ</span></td></tr>
|
|
<tr><td>Pharma IT</td><td>Novità: sconto 30%</td><td>Il tuo regalo ti aspetta 🎁</td><td>22.4%</td><td>23.1%</td><td style="color:var(--d)">~Égalité</td><td><span class="badge badge-am">EN COURS</span></td></tr>
|
|
</tbody></table>
|
|
</div>
|
|
<div class="panel" id="tab-history">
|
|
<h3 style="font-size:12px;margin-bottom:10px">📋 Dernières générations</h3>
|
|
<table><thead><tr><th>Date</th><th>Type</th><th>Langue</th><th>Niche</th><th>Variantes</th><th>Meilleur score</th></tr></thead><tbody>
|
|
<tr><td>08/02 00:01</td><td>Sujet+Corps</td><td>FR</td><td>E-commerce</td><td>3</td><td style="color:var(--gn)">87/100</td></tr>
|
|
<tr><td>07/02 22:30</td><td>Sujet</td><td>DE</td><td>B2B Tech</td><td>5</td><td style="color:var(--gn)">82/100</td></tr>
|
|
<tr><td>07/02 20:15</td><td>Corps</td><td>IT</td><td>Pharma</td><td>3</td><td style="color:var(--am)">71/100</td></tr>
|
|
<tr><td>07/02 18:40</td><td>CTA</td><td>ES</td><td>Voyage</td><td>10</td><td style="color:var(--gn)">89/100</td></tr>
|
|
</tbody></table>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function showTab(id){document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));document.getElementById('tab-'+id).classList.add('active');event.target.classList.add('active')}
|
|
function generateCopy(){var btn=event.target;btn.textContent='⏳ Génération en cours...';btn.disabled=true;setTimeout(function(){btn.textContent='🤖 Générer avec HAMID IA';btn.disabled=false},2000)}
|
|
setInterval(function(){document.getElementById('clock').textContent=new Date().toLocaleTimeString('fr-FR')},1000);
|
|
</script><script>function toggleTheme(){var b=document.body,t=document.getElementById("theme-toggle");if(b.classList.contains("light")){b.classList.remove("light");t.textContent="🌙";localStorage.setItem("wevads-theme","dark")}else{b.classList.add("light");t.textContent="☀️";localStorage.setItem("wevads-theme","light")}}if(localStorage.getItem("wevads-theme")==="light"){document.body.classList.add("light");var tb=document.getElementById("theme-toggle");if(tb)tb.textContent="☀️"}</script><script src="arsenal-common.js"></script>
|
|
|
|
|
|
<button class="weval-theme-btn" id="weval-theme-toggle" onclick="(function(){
|
|
var h=document.documentElement;
|
|
var c=h.getAttribute('data-theme')||'dark';
|
|
var n=c==='dark'?'light':'dark';
|
|
h.setAttribute('data-theme',n);
|
|
localStorage.setItem('weval-theme',n);
|
|
document.getElementById('weval-theme-toggle').textContent=n==='dark'?'☀️':'🌙';
|
|
})()">☀️</button>
|
|
</script>
|