Files
wevads-platform/public/offer-engine.html
2026-02-26 04:53:11 +01:00

186 lines
16 KiB
HTML
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="fr" data-theme="dark"><head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>WEVADS - Offer Engine</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;--or:#fb923c}
*{margin:0;padding:0;box-sizing:border-box}body{background:#060a14;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(--or)}
.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}
.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(--or);border-color:var(--or)}
.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}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.offer-card{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:14px;transition:.2s}.offer-card:hover{border-color:var(--or)}
.offer-name{font-weight:700;font-size:13px;margin-bottom:4px}.offer-type{font-size:9px;color:var(--d);text-transform:uppercase}
.offer-metrics{display:flex;gap:12px;margin-top:8px;font-size:10px}
.offer-metric{text-align:center}.offer-metric .v{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px}.offer-metric .k{font-size:8px;color:var(--d);text-transform:uppercase}
.form-row{margin-bottom:10px}.form-row label{display:block;font-size:9px;text-transform:uppercase;color:var(--d);margin-bottom:4px}
.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}
.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(--or)}
.btn-or{background:rgba(251,146,60,.15);border-color:var(--or);color:var(--or)}
.badge{font-size:8px;padding:2px 6px;border-radius:3px;font-weight:600}
.badge-gn{background:rgba(52,211,153,.15);color:var(--gn)}.badge-am{background:rgba(251,191,36,.15);color:var(--am)}.badge-rd{background:rgba(248,113,113,.15);color:var(--rd)}
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)}
.lp-preview{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid var(--b);border-radius:8px;padding:20px;text-align:center}
.lp-preview h2{font-size:18px;margin-bottom:6px}.lp-preview .cta{background:var(--or);color:#e2e8f0;padding:8px 20px;border-radius:6px;font-weight:700;display:inline-block;margin-top:10px}
@media(max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}.grid2,.grid3{grid-template-columns:1fr}}
.sc,.card,[class*="stat-card"]{transition:all .25s ease;position:relative;overflow:hidden}
.sc:hover,.card:hover,[class*="stat-card"]:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sc::after,.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--cy,#22d3ee);opacity:0;transition:opacity .25s}
.sc:hover::after,.card:hover::after{opacity:.7}
.btn,.button,[class*="btn-"]{transition:all .2s ease}
.btn:hover,.button:hover{transform:translateY(-1px)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sc,.card{animation:fadeIn .4s ease both}
.sc:nth-child(2),.card:nth-child(2){animation-delay:.05s}
.sc:nth-child(3),.card:nth-child(3){animation-delay:.1s}
.sc:nth-child(4),.card:nth-child(4){animation-delay:.15s}
.sc:nth-child(5),.card:nth-child(5){animation-delay:.2s}
.sc:nth-child(6),.card:nth-child(6){animation-delay:.25s}
</style><style>.light{--bg:#f0f2f5;--s:#0c1220;--s2:#060a14;--b:#1e293b;--t:#e2e8f0;--d:#64748b}.light input,.light select,.light textarea{background:#060a14;border-color:#e2e8f0;color:#e2e8f0}</style>
<style id="weval-theme-system">
/* Day/Night Theme Toggle */
[data-theme="light"] { --bg:#f0f2f5!important; --s:#0c1220!important; --s2:#060a14!important; --b:#1e293b!important; --t:#e2e8f0!important; --d:#64748b!important; }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
background:#060a14!important; border-color:#e2e8f0!important; color:#e2e8f0!important;
}
[data-theme="light"] .hdr, [data-theme="light"] header, [data-theme="light"] nav {
background:#0c1220!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:#060a14!important; }
[data-theme="light"] .sc, [data-theme="light"] .card, [data-theme="light"] [class*="card"] {
background:#0c1220!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, #1e293b);
cursor:pointer; font-size:18px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,.3);
transition:all 0.2s;
}
.weval-theme-btn:hover { transform:scale(1.1); }
.wv-status{position:fixed;top:12px;right:140px;z-index:9998;background:rgba(52,211,153,.15);border:1px solid #34d399;border-radius:12px;padding:3px 10px;color:#34d399;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace}
</style>
<link rel="stylesheet" href="wevads-global.css?v1770777318">
</head><body>
<div class="hdr"><div><h1>🎯 WEVADS • <span id="clock"></span></div></div>
<div class="wrap">
<div class="stats">
<div class="sc"><div class="n" style="color:var(--or)">24</div><div class="l">Offres actives</div></div>
<div class="sc"><div class="n" style="color:var(--gn)">8.4%</div><div class="l">Taux conversion</div></div>
<div class="sc"><div class="n" style="color:var(--cy)">42</div><div class="l">Landing pages</div></div>
<div class="sc"><div class="n" style="color:var(--am)">156K</div><div class="l">Clics 7j</div></div>
<div class="sc"><div class="n" style="color:var(--bl)">€12.4K</div><div class="l">Revenue 7j</div></div>
<div class="sc"><div class="n" style="color:var(--pk)">3.8x</div><div class="l">ROI moyen</div></div>
</div>
<div class="tabs">
<div class="tab active" onclick="showTab('offers')">Offres</div>
<div class="tab" onclick="showTab('create')">Créer</div>
<div class="tab" onclick="showTab('landing')">Landing Pages</div>
<div class="tab" onclick="showTab('perf')">Performance</div>
</div>
<div class="panel active" id="tab-offers">
<div class="grid3">
<div class="offer-card"><div style="display:flex;justify-content:space-between"><div class="offer-name">🔥 Winter Sale -40%</div><span class="badge badge-gn">LIVE</span></div><div class="offer-type">E-commerce • FR DE IT</div><div class="offer-metrics"><div class="offer-metric"><div class="v" style="color:var(--gn)">12.4%</div><div class="k">Conv.</div></div><div class="offer-metric"><div class="v" style="color:var(--cy)">45K</div><div class="k">Clics</div></div><div class="offer-metric"><div class="v" style="color:var(--or)">€4.2K</div><div class="k">Rev.</div></div></div></div>
<div class="offer-card"><div style="display:flex;justify-content:space-between"><div class="offer-name">💊 Pharma Free Trial</div><span class="badge badge-gn">LIVE</span></div><div class="offer-type">Santé • DE AT CH</div><div class="offer-metrics"><div class="offer-metric"><div class="v" style="color:var(--gn)">8.7%</div><div class="k">Conv.</div></div><div class="offer-metric"><div class="v" style="color:var(--cy)">28K</div><div class="k">Clics</div></div><div class="offer-metric"><div class="v" style="color:var(--or)">€3.1K</div><div class="k">Rev.</div></div></div></div>
<div class="offer-card"><div style="display:flex;justify-content:space-between"><div class="offer-name">🏠 Immobilier Premium</div><span class="badge badge-gn">LIVE</span></div><div class="offer-type">Immobilier • FR BE</div><div class="offer-metrics"><div class="offer-metric"><div class="v" style="color:var(--gn)">5.2%</div><div class="k">Conv.</div></div><div class="offer-metric"><div class="v" style="color:var(--cy)">18K</div><div class="k">Clics</div></div><div class="offer-metric"><div class="v" style="color:var(--or)">€2.8K</div><div class="k">Rev.</div></div></div></div>
<div class="offer-card"><div style="display:flex;justify-content:space-between"><div class="offer-name">📚 Formation IA</div><span class="badge badge-am">PAUSE</span></div><div class="offer-type">Education • FR</div><div class="offer-metrics"><div class="offer-metric"><div class="v" style="color:var(--am)">3.1%</div><div class="k">Conv.</div></div><div class="offer-metric"><div class="v" style="color:var(--cy)">8K</div><div class="k">Clics</div></div><div class="offer-metric"><div class="v" style="color:var(--or)">€890</div><div class="k">Rev.</div></div></div></div>
<div class="offer-card"><div style="display:flex;justify-content:space-between"><div class="offer-name">✈️ Voyage Maroc -30%</div><span class="badge badge-gn">LIVE</span></div><div class="offer-type">Voyage • FR DE GB</div><div class="offer-metrics"><div class="offer-metric"><div class="v" style="color:var(--gn)">9.8%</div><div class="k">Conv.</div></div><div class="offer-metric"><div class="v" style="color:var(--cy)">32K</div><div class="k">Clics</div></div><div class="offer-metric"><div class="v" style="color:var(--or)">€5.6K</div><div class="k">Rev.</div></div></div></div>
<div class="offer-card" style="border-style:dashed;text-align:center;display:flex;align-items:center;justify-content:center;color:var(--d);cursor:pointer"><div> Nouvelle offre</div></div>
</div>
</div>
<div class="panel" id="tab-create">
<div class="grid2">
<div>
<h3 style="font-size:12px;margin-bottom:10px;color:var(--or)">🎯 Nouvelle offre</h3>
<div class="form-row"><label>Nom de l'offre</label><input placeholder="Ex: Summer Flash Sale -50%"></div>
<div class="form-row"><label>Type</label><select><option>Réduction %</option><option>Réduction montant</option><option>Livraison gratuite</option><option>Essai gratuit</option><option>Bundle / Pack</option><option>Cashback</option></select></div>
<div class="form-row"><label>Valeur</label><input placeholder="Ex: 40% ou 20€"></div>
<div class="form-row"><label>Pays cibles</label><select multiple style="min-height:80px"><option selected>France</option><option selected>Allemagne</option><option>Italie</option><option>Espagne</option><option>UK</option><option>Belgique</option><option>Suisse</option><option>Pays-Bas</option></select></div>
<div class="form-row"><label>URL destination</label><input placeholder="https://"></div>
<div class="form-row"><label>Date expiration</label><input type="datetime-local"></div>
<div class="form-row"><label>Rotation automatique</label><select><option>Oui — Alterner avec autres offres actives</option><option>Non — Fixe</option></select></div>
<button class="btn btn-or" style="width:100%;padding:10px">🚀 Créer l'offre</button>
</div>
<div>
<h3 style="font-size:12px;margin-bottom:10px;color:var(--cy)">👁 Aperçu Landing Page</h3>
<div class="lp-preview">
<div style="font-size:10px;color:var(--am);margin-bottom:8px">⏰ OFFRE LIMITÉE</div>
<h2>-40% sur toute la collection</h2>
<div style="font-size:12px;color:var(--d);margin-top:6px">Livraison gratuite • Code: WINTER40</div>
<div class="cta">J'en profite maintenant →</div>
<div style="font-size:9px;color:var(--d);margin-top:12px">📊 Tracking: Opens, Clicks, Conversions, Revenue</div>
</div>
</div>
</div>
</div>
<div class="panel" id="tab-landing">
<h3 style="font-size:12px;margin-bottom:10px">🌐 Landing Pages</h3>
<table><thead><tr><th>Page</th><th>Offre liée</th><th>URL</th><th>Visites 7j</th><th>Conv.</th><th>Status</th></tr></thead><tbody>
<tr><td>Winter Sale FR</td><td>Winter Sale -40%</td><td style="color:var(--cy)">lp.weval.ma/winter-fr</td><td>24,500</td><td style="color:var(--gn)">12.4%</td><td><span class="badge badge-gn">LIVE</span></td></tr>
<tr><td>Pharma DE</td><td>Free Trial</td><td style="color:var(--cy)">lp.weval.ma/pharma-de</td><td>18,200</td><td style="color:var(--gn)">8.7%</td><td><span class="badge badge-gn">LIVE</span></td></tr>
<tr><td>Immo FR</td><td>Immobilier Premium</td><td style="color:var(--cy)">lp.weval.ma/immo-fr</td><td>9,800</td><td>5.2%</td><td><span class="badge badge-gn">LIVE</span></td></tr>
<tr><td>Maroc Travel</td><td>Voyage -30%</td><td style="color:var(--cy)">lp.weval.ma/maroc</td><td>32,100</td><td style="color:var(--gn)">9.8%</td><td><span class="badge badge-gn">LIVE</span></td></tr>
</tbody></table>
</div>
<div class="panel" id="tab-perf">
<h3 style="font-size:12px;margin-bottom:10px">📊 Performance par offre (7j)</h3>
<table><thead><tr><th>Offre</th><th>Envois</th><th>Opens</th><th>Clics</th><th>Conv.</th><th>Revenue</th><th>ROI</th></tr></thead><tbody>
<tr><td>Winter Sale -40%</td><td>125,000</td><td>38.2%</td><td>12.4%</td><td style="color:var(--gn)">8.4%</td><td style="color:var(--or)">€4,200</td><td style="color:var(--gn)">4.2x</td></tr>
<tr><td>Pharma Free Trial</td><td>85,000</td><td>32.1%</td><td>9.8%</td><td style="color:var(--gn)">6.7%</td><td style="color:var(--or)">€3,100</td><td style="color:var(--gn)">3.8x</td></tr>
<tr><td>Voyage Maroc</td><td>95,000</td><td>35.4%</td><td>11.2%</td><td style="color:var(--gn)">9.8%</td><td style="color:var(--or)">€5,600</td><td style="color:var(--gn)">5.1x</td></tr>
<tr><td>Immobilier</td><td>45,000</td><td>28.6%</td><td>7.4%</td><td>5.2%</td><td style="color:var(--or)">€2,800</td><td style="color:var(--gn)">3.2x</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')}
setInterval(function(){document.getElementById('clock').textContent=new Date().toLocaleTimeString('fr-FR')},1000);
</script><script>}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?v1770777318"></script>
</script>
<script>
var _API="/api/offer-engine.php";
async function _autoLoad(){
try{
var r=await fetch(_API+"?action=status");
var d=await r.json();
if(!d)return;
var src=d.data||d;
if(typeof src==="object"&&!Array.isArray(src)){
var entries=Object.entries(src);
var statEls=document.querySelectorAll(".st .n,.kpi-value,.stat-value,[id^=k],[id^=s-]");
statEls.forEach(function(el,idx){
if(idx<entries.length){
var v=entries[idx][1];
if(typeof v==="number")v=v.toLocaleString();
if(typeof v==="string"||typeof v==="number")el.textContent=v;
}
});
}
var si=document.querySelector(".status-dot,.live-dot,[class*=live]");
if(si)si.style.color="#22c55e";
}catch(e){console.error("AutoLoad:",e)}
}
_autoLoad();
setInterval(_autoLoad,30000);
</script>
</body></html>