225 lines
14 KiB
HTML
Executable File
225 lines
14 KiB
HTML
Executable File
<!DOCTYPE html><html lang="fr"><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 - Manual Send 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;--og:#fb923c}
|
|
*{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(--og)}
|
|
.wrap{padding:16px;max-width:1400px;margin:0 auto}
|
|
.tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
|
|
.tab{padding:8px 16px;border-radius:8px 8px 0 0;border:1px solid var(--b);border-bottom:none;background:var(--s2);color:var(--d);cursor:pointer;font-size:11px;font-weight:600;transition:.2s}
|
|
.tab.active{background:var(--s);color:var(--cy);border-color:var(--cy)}
|
|
.tab:hover{color:var(--t)}
|
|
.tab-content{display:none}.tab-content.active{display:block}
|
|
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
|
|
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
|
|
.card{background:var(--s);border:1px solid var(--b);border-radius:10px;padding:16px;margin-bottom:12px;position:relative;overflow:hidden;transition:.25s}
|
|
.card:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
|
|
.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;opacity:0;transition:.25s}.card:hover::after{opacity:.7}
|
|
.card-cy::after{background:var(--cy)}.card-gn::after{background:var(--gn)}.card-am::after{background:var(--am)}.card-rd::after{background:var(--rd)}.card-pu::after{background:var(--pu)}.card-og::after{background:var(--og)}
|
|
.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 select[multiple]{min-height:120px}
|
|
.form-row textarea{min-height:100px;font-family:'JetBrains Mono',monospace;font-size:10px}
|
|
.btn{padding:8px 16px;border-radius:8px;border:1px solid var(--b);background:var(--s2);color:var(--t);cursor:pointer;font-size:11px;font-weight:600;text-align:center;transition:.2s}.btn:hover{border-color:var(--cy);transform:translateY(-1px)}
|
|
.btn-send{background:rgba(248,113,113,.15);border-color:var(--rd);color:var(--rd);padding:14px;font-size:14px;font-weight:700;width:100%}
|
|
.btn-send:hover{background:rgba(248,113,113,.25)}
|
|
.btn-gn{background:rgba(52,211,153,.15);border-color:var(--gn);color:var(--gn)}
|
|
.btn-cy{background:rgba(34,211,238,.15);border-color:var(--cy);color:var(--cy)}
|
|
.btn-am{background:rgba(251,191,36,.15);border-color:var(--am);color:var(--am)}
|
|
.btn-pu{background:rgba(167,139,250,.15);border-color:var(--pu);color:var(--pu)}
|
|
.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)}.badge-cy{background:rgba(34,211,238,.15);color:var(--cy)}
|
|
.stat{text-align:center;padding:12px}.stat .num{font-size:24px;font-weight:700;font-family:'JetBrains Mono',monospace}.stat .lbl{font-size:9px;color:var(--d);text-transform:uppercase;margin-top:4px}
|
|
.mono{font-family:'JetBrains Mono',monospace}
|
|
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)}
|
|
.log{background:var(--bg);border:1px solid var(--b);border-radius:6px;padding:10px;font-family:'JetBrains Mono',monospace;font-size:10px;max-height:300px;overflow-y:auto;white-space:pre-wrap}
|
|
.step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:700;margin-right:8px}
|
|
.step-cy{background:rgba(34,211,238,.2);color:var(--cy);border:1px solid var(--cy)}
|
|
.step-gn{background:rgba(52,211,153,.2);color:var(--gn);border:1px solid var(--gn)}
|
|
.step-am{background:rgba(251,191,36,.2);color:var(--am);border:1px solid var(--am)}
|
|
.step-rd{background:rgba(248,113,113,.2);color:var(--rd);border:1px solid var(--rd)}
|
|
.step-pu{background:rgba(167,139,250,.2);color:var(--pu);border:1px solid var(--pu)}
|
|
.step-og{background:rgba(251,146,60,.2);color:var(--og);border:1px solid var(--og)}
|
|
.winner-tag{background:rgba(52,211,153,.15);color:var(--gn);border:1px solid var(--gn);padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600}
|
|
.method-tag{display:inline-block;background:var(--s2);border:1px solid var(--b);border-radius:4px;padding:3px 8px;font-size:9px;margin:2px;cursor:pointer;transition:.2s}
|
|
.method-tag:hover,.method-tag.selected{border-color:var(--cy);color:var(--cy);background:rgba(34,211,238,.1)}
|
|
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
|
|
.card{animation:fadeIn .4s ease both}
|
|
@media(max-width:900px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
|
|
#toast{position:fixed;bottom:20px;right:20px;padding:12px 20px;border-radius:8px;font-size:12px;font-weight:600;z-index:9999;display:none;animation:fadeIn .3s}
|
|
.toast-gn{background:rgba(52,211,153,.9);color:#000}.toast-rd{background:rgba(248,113,113,.9);color:#000}.toast-am{background:rgba(251,191,36,.9);color:#000}
|
|
</style>
|
|
<link rel="stylesheet" href="wevads-global.css?v1770777318">
|
|
</head><body>
|
|
|
|
<div class="hdr">
|
|
<div>
|
|
<h1>⚡ WEVADS • <span>Manual Send Engine</span></h1>
|
|
<p style="font-size:10px;color:var(--d);margin-top:4px">Envoi manuel par méthode — Brain-prefilled — Remplacement des crons</p>
|
|
</div>
|
|
<div style="display:flex;gap:8px;align-items:center">
|
|
<button class="btn btn-cy" onclick="loadBrainPresets()" style="padding:6px 12px">🧠 Load Brain</button>
|
|
<button class="btn btn-gn" onclick="refreshAll()" style="padding:6px 12px">🔄 Refresh</button>
|
|
<span class="badge badge-am">● MANUAL MODE</span>
|
|
<span class="mono" style="font-size:11px;color:var(--d)" id="clock"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrap">
|
|
|
|
<!-- Stats bar -->
|
|
<div class="grid4" style="margin-bottom:12px">
|
|
<div class="card card-cy"><div class="stat"><div class="num" style="color:var(--cy)" id="st-methods">14</div><div class="lbl">Send Methods</div></div></div>
|
|
<div class="card card-gn"><div class="stat"><div class="num" style="color:var(--gn)" id="st-winners">11</div><div class="lbl">Brain Winners</div></div></div>
|
|
<div class="card card-am"><div class="stat"><div class="num" style="color:var(--am)" id="st-contacts">927K</div><div class="lbl">Contacts</div></div></div>
|
|
<div class="card card-pu"><div class="stat"><div class="num" style="color:var(--pu)" id="st-offers">85</div><div class="lbl">Offers Active</div></div></div>
|
|
</div>
|
|
|
|
<!-- Tabs by Send Method -->
|
|
<div class="tabs" id="method-tabs">
|
|
<div class="tab active" onclick="switchTab('o365')">📧 O365 Graph</div>
|
|
<div class="tab" onclick="switchTab('pmta')">🔧 PMTA Direct</div>
|
|
<div class="tab" onclick="switchTab('smtp_relay')">📡 SMTP Relay</div>
|
|
<div class="tab" onclick="switchTab('gsuite')">🔷 GSuite</div>
|
|
<div class="tab" onclick="switchTab('hybrid')">🔀 Hybrid</div>
|
|
<div class="tab" onclick="switchTab('api')">🌐 API (SG/MG/SES)</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- UNIFIED SEND FORM (shared across tabs, method-specific hints) -->
|
|
<!-- ============================================================ -->
|
|
<div class="grid2">
|
|
<div>
|
|
<!-- STEP 1: Sponsor & Offer -->
|
|
<div class="card card-cy">
|
|
<h3 style="font-size:12px;margin-bottom:10px"><span class="step-num step-cy">1</span> <span style="color:var(--cy)">SPONSOR & OFFRE</span></h3>
|
|
<div class="grid2">
|
|
<div class="form-row"><label>Sponsor</label>
|
|
<select id="sel-sponsor" onchange="loadOffers()">
|
|
<option value="">— Sélectionner —</option>
|
|
<option value="1">CX3 Ads</option>
|
|
<option value="2">Double M</option>
|
|
<option value="3">Ethica Pharma</option>
|
|
</select></div>
|
|
<div class="form-row"><label>Offre</label>
|
|
<select id="sel-offer"><option value="">— Charger sponsor d'abord —</option></select></div>
|
|
</div>
|
|
<div class="form-row"><label>Tracking URL (auto-filled)</label>
|
|
<input id="in-tracking" readonly style="color:var(--cy);background:var(--bg)" placeholder="Sélectionner une offre..."></div>
|
|
<div style="font-size:9px;color:var(--d);margin-top:4px">Payout: <span id="lbl-payout" style="color:var(--gn);font-weight:700">$0.00</span></div>
|
|
</div>
|
|
|
|
<!-- STEP 2: Data / Recipients -->
|
|
<div class="card card-gn">
|
|
<h3 style="font-size:12px;margin-bottom:10px"><span class="step-num step-gn">2</span> <span style="color:var(--gn)">DATA / RECIPIENTS</span></h3>
|
|
<div class="form-row"><label>ISP Cible</label>
|
|
<select id="sel-isp" onchange="updateContactCount()">
|
|
<option value="all">Tous ISPs (927,007)</option>
|
|
<option value="hotmail">Hotmail/Outlook (303,858)</option>
|
|
<option value="gmx">GMX (176,966)</option>
|
|
<option value="tonline">T-Online (157,573)</option>
|
|
<option value="webde">Web.de (131,545)</option>
|
|
<option value="videotron">Videotron (131,386)</option>
|
|
<option value="gmail">Gmail (20,000)</option>
|
|
<option value="spectrum">Spectrum (5,679)</option>
|
|
</select></div>
|
|
<div class="grid3">
|
|
<div class="form-row"><label>Volume</label>
|
|
<select id="sel-volume">
|
|
<option value="10">10 (test)</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
<option value="500">500</option>
|
|
<option value="1000">1,000</option>
|
|
<option value="5000">5,000</option>
|
|
<option value="10000">10,000</option>
|
|
<option value="50000">50,000</option>
|
|
<option value="all">Full list</option>
|
|
</select></div>
|
|
<div class="form-row"><label>Throttle/min</label>
|
|
<input type="number" id="in-throttle" value="20" min="1" max="500"></div>
|
|
<div class="form-row"><label>Warm contacts only</label>
|
|
<select id="sel-warm"><option value="0">Non — tout</option><option value="1">Oui — warm/hot</option></select></div>
|
|
</div>
|
|
<div style="font-size:9px;color:var(--d)">Contacts disponibles: <span id="lbl-contacts" style="color:var(--gn);font-weight:700">927,007</span></div>
|
|
</div>
|
|
|
|
<!-- STEP 3: Sender Config -->
|
|
<div class="card card-am">
|
|
<h3 style="font-size:12px;margin-bottom:10px"><span class="step-num step-am">3</span> <span style="color:var(--am)">SENDER / FROM</span></h3>
|
|
<div id="method-hint" style="font-size:10px;color:var(--og);margin-bottom:8px;padding:6px;background:var(--bg);border-radius:4px">
|
|
💡 <strong>O365 Graph:</strong> Envoie via Microsoft Graph API — sélectionner un tenant O365
|
|
</div>
|
|
<div class="grid2">
|
|
<div class="form-row"><label>From Domain</label>
|
|
<select id="sel-domain">
|
|
<option value="accoff04.onmicrosoft.com">accoff04.onmicrosoft.com</option>
|
|
<option value="accoff05.onmicrosoft.com">accoff05.onmicrosoft.com</option>
|
|
<option value="culturellemejean.charity">culturellemejean.charity</option>
|
|
<option value="aafjeshade.onmicrosoft.com">aafjeshade.onmicrosoft.com</option>
|
|
<option value="bethellhutchison.onmicrosoft.com">bethellhutchison.onmicrosoft.com</option>
|
|
<option value="garnetkimble.onmicrosoft.com">garnetkimble.onmicrosoft.com</option>
|
|
<option value="jamilpeterson.onmicrosoft.com">jamilpeterson.onmicrosoft.com</option>
|
|
<option value="hobfielder.onmicrosoft.com">hobfielder.onmicrosoft.com</option>
|
|
</select></div>
|
|
<div class="form-row"><label>From Name</label>
|
|
<input id="in-fromname" value="Service Client" placeholder="Ex: Dr. Martin, Support Santé..."></div>
|
|
</div>
|
|
<div class="form-row"><label>Reply-To (optionnel)</label>
|
|
<input id="in-replyto" placeholder="noreply@domain.com"></div>
|
|
<div id="brain-winner-box" style="display:none;margin-top:8px;padding:8px;background:var(--bg);border:1px solid var(--gn);border-radius:6px">
|
|
<div style="font-size:9px;color:var(--gn);font-weight:700;margin-bottom:4px">🧠 BRAIN WINNER CONFIG</div>
|
|
<div style="font-size:10px" id="brain-winner-detail">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<!-- STEP 4: Headers -->
|
|
<div class="card card-pu">
|
|
<h3 style="font-size:12px;margin-bottom:10px"><span class="step-num step-pu">4</span> <span style="color:var(--pu)">HEADERS</span></h3>
|
|
<div class="grid2">
|
|
<div class="form-row"><label>X-Mailer</label>
|
|
<select id="sel-xmailer">
|
|
<option value="">Aucun (recommandé Exchange)</option>
|
|
<option value="Microsoft Outlook 16.0">Microsoft Outlook 16.0</option>
|
|
<option value="Thunderbird 115.0">Thunderbird 115.0</option>
|
|
<option value="Apple Mail">Apple Mail</option>
|
|
<option value="random">🎲 Random (Brain Engine)</option>
|
|
</select></div>
|
|
<div class="form-row"><label>Content-Type</label>
|
|
<select id="sel-contenttype">
|
|
<option value="text/html">text/html</option>
|
|
<option value="multipart/alternative">multipart/alternative</option>
|
|
<option value="text/plain">text/plain</option>
|
|
</select></div>
|
|
</div>
|
|
<div class="form-row"><label>Priority</label>
|
|
<select id="sel-priority">
|
|
<option value="normal">Normal</option>
|
|
<option value="high">High (1)</option>
|
|
<option value="low">Low (5)</option>
|
|
</select></div>
|
|
<div class="form-row"><label>Custom Headers (JSON)</label>
|
|
<textarea id="in-headers" placeholder='{"X-Custom": "value", "List-Unsubscribe": "<mailto:unsub@dom.com>"}'>{}</textarea></div>
|
|
</div>
|
|
|
|
<!-- STEP 5: Subject & Body -->
|
|
<div class="card card-og">
|
|
<h3 style="font-size:12px;margin-bottom:10px"><span class="step-num step-og">5</span> <span style="color:var(--og)">SUBJECT & BODY</span></h3>
|
|
<div class="form-row"><label>Subject Line</label>
|
|
<input id="in-subject" placeholder="Ex: Votre accès gratuit expire demain — {FNAME}"></div>
|
|
<div style="display:flex;gap:6px;margin-bottom:8px">
|
|
<button class="btn" style="padding:4px 10px;font-size:9px" onclick="loadCreatives()">📝 Charger Creatives DB</button>
|
|
<button class="btn btn-pu" style="padding:4px 10px;font-size:9px" onclick="genSubject()">🧠 IA Subject</button>
|
|
</div>
|
|
<div class="form-row"><label>Creative / Template</label>
|
|
<select id="sel-creative" onchange="previewCreative()">
|
|
<option value="custom">— Créer manuellement —</option>
|
|
</select></div>
|
|
<div class="form-row"><label>Body HTML</label>
|
|
<textarea id="in-body" style="min-height:180px" placeholder="<html><body>Votre contenu ici... {TRACKING_LINK} {UNSUB}</body></html>
|