308 lines
20 KiB
HTML
308 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||
<title>MedReach — Projection Campagne Ethica</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{--bg:#0a0c14;--s1:#111827;--s2:#1a1f35;--border:#1e293b;--t1:#f1f5f9;--t2:#94a3b8;--t3:#64748b;--accent:#7c3aed;--teal:#10b981;--amber:#f59e0b;--red:#ef4444;--blue:#3b82f6}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh}
|
||
.top{display:flex;justify-content:space-between;align-items:center;padding:24px 40px;border-bottom:1px solid var(--border)}
|
||
.logo{display:flex;align-items:center;gap:14px}
|
||
.logo-mark{width:40px;height:40px;background:linear-gradient(135deg,var(--accent),#a855f7);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:18px}
|
||
.logo h1{font-size:20px;font-weight:700;letter-spacing:-.5px}
|
||
.logo h1 span{color:var(--accent);font-weight:400}
|
||
.logo-sub{font-size:11px;color:var(--t3);margin-top:2px}
|
||
.nav-top{display:flex;gap:8px}
|
||
.nav-top a{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;color:var(--t2);text-decoration:none;border:1px solid var(--border);transition:all .2s}
|
||
.nav-top a:hover,.nav-top a.active{background:var(--accent);color:#fff;border-color:var(--accent)}
|
||
.container{max-width:1300px;margin:0 auto;padding:32px 40px}
|
||
.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:16px}
|
||
h2{font-size:22px;font-weight:700;margin-bottom:6px}
|
||
.subtitle{color:var(--t3);font-size:13px;margin-bottom:24px}
|
||
.summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:32px}
|
||
.summary{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center}
|
||
.summary .val{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700}
|
||
.summary .lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
|
||
.green{color:var(--teal)}.amber{color:var(--amber)}.purple{color:var(--accent)}.blue{color:var(--blue)}.red{color:var(--red)}
|
||
.brands-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
|
||
.brand-card{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:20px;transition:all .2s;position:relative;overflow:hidden}
|
||
.brand-card:hover{border-color:var(--accent);transform:translateY(-2px)}
|
||
.brand-card .pill{position:absolute;top:12px;right:12px;font-size:10px;padding:3px 8px;border-radius:6px;font-weight:600}
|
||
.pill-tn{background:rgba(239,68,68,.15);color:var(--red)}
|
||
.pill-dz{background:rgba(16,185,129,.15);color:var(--teal)}
|
||
.pill-ma{background:rgba(245,158,11,.15);color:var(--amber)}
|
||
.pill-multi{background:rgba(124,58,237,.15);color:var(--accent)}
|
||
.brand-card h3{font-size:15px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px}
|
||
.brand-card h3 .icon{font-size:18px}
|
||
.brand-card .specs{font-size:11px;color:var(--t3);margin-bottom:12px}
|
||
.brand-card .metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||
.brand-card .metric{padding:8px;background:rgba(255,255,255,.02);border-radius:8px}
|
||
.brand-card .metric b{display:block;font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--t1)}
|
||
.brand-card .metric span{font-size:10px;color:var(--t3)}
|
||
.funnel{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:28px;margin-bottom:32px}
|
||
.funnel h3{font-size:15px;font-weight:600;margin-bottom:20px}
|
||
.funnel-steps{display:flex;align-items:center;gap:0}
|
||
.funnel-step{flex:1;text-align:center;position:relative}
|
||
.funnel-bar{height:48px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:#fff;border-radius:8px;margin-bottom:8px}
|
||
.funnel-step .lbl{font-size:11px;color:var(--t3)}
|
||
.funnel-step .pct{font-size:10px;color:var(--t2);margin-top:2px}
|
||
.arrow{width:24px;flex-shrink:0;text-align:center;color:var(--t3);font-size:18px;padding-top:0}
|
||
.compare{background:var(--s1);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:32px}
|
||
.compare h3{padding:20px 24px 0;font-size:15px;font-weight:600;margin-bottom:16px}
|
||
table{width:100%;border-collapse:collapse;font-size:13px}
|
||
th{text-align:left;padding:12px 16px;font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
|
||
td{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--t2)}
|
||
td:first-child{color:var(--t1);font-weight:500}
|
||
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600}
|
||
.tag-win{background:rgba(16,185,129,.15);color:var(--teal)}
|
||
.tag-avg{background:rgba(245,158,11,.15);color:var(--amber)}
|
||
.footer{text-align:center;padding:32px;color:var(--t3);font-size:11px;border-top:1px solid var(--border)}
|
||
.footer a{color:var(--accent);text-decoration:none}
|
||
</style>
|
||
<!-- DOCTRINE-60-UX-ENRICH direct-inject-20260424-143941 -->
|
||
<style id="doctrine60-ux-direct">
|
||
|
||
/* DOCTRINE-60-UX-ENRICH injected-direct */
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0; left: 0; width: 100vw; height: 100vh;
|
||
background: radial-gradient(circle at 50% 50%, rgba(100,180,255,0.08), transparent 60%);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
.card, .kpi, .panel, .btn {
|
||
transition: all 0.3s cubic-bezier(0.2,0,0.1,1);
|
||
}
|
||
.card:hover, .kpi:hover, .panel:hover {
|
||
box-shadow: 0 4px 20px rgba(100,180,255,0.2);
|
||
border-color: rgba(100,180,255,0.5);
|
||
}
|
||
@keyframes pulseD60 {
|
||
0%,100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.7; transform: scale(1.05); }
|
||
}
|
||
.pulse, .live-indicator, .active, .online {
|
||
animation: pulseD60 3s ease-in-out infinite;
|
||
}
|
||
.modal, .chat, .speech, .overlay {
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
.enter-stagger {
|
||
animation: enterStagD60 0.5s cubic-bezier(0.2,0,0.1,1) forwards;
|
||
}
|
||
@keyframes enterStagD60 {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
</style>
|
||
<!-- DOCTRINE-222-KILL-PULSED60 -->
|
||
<style>
|
||
@keyframes pulseD60 { 0%,100%,50% { opacity: 1; transform: scale(1); } }
|
||
.pulse, .live-indicator, .active, .online { animation: none !important; }
|
||
</style>
|
||
<!-- END-DOCTRINE-222 -->
|
||
</head>
|
||
<body>
|
||
<div class="top">
|
||
<div class="logo">
|
||
<div class="logo-mark">M</div>
|
||
<div>
|
||
<h1>Med<span>Reach</span></h1>
|
||
<div class="logo-sub">Projection Campagne — Ethica Pharma 2026</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-top">
|
||
<a href="medreach-dashboard.html">📊 Reach Report</a>
|
||
<a href="medreach-campaign.html" class="active">🚀 Projection Campagne</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="section-title">Projection annuelle</div>
|
||
<h2>Simulation Campagne Email — 18 Marques Ethica</h2>
|
||
<div class="subtitle">Projection basée sur 107 604 HCPs email qualifiés × 13 spécialités × 3 pays</div>
|
||
|
||
<div class="summary-row">
|
||
<div class="summary"><div class="val purple">18</div><div class="lbl">Marques Ethica</div></div>
|
||
<div class="summary"><div class="val green">107 604</div><div class="lbl">Emails Qualifiés</div></div>
|
||
<div class="summary"><div class="val blue">~32%</div><div class="lbl">Taux d'Ouverture Projeté</div></div>
|
||
<div class="summary"><div class="val amber">~5%</div><div class="lbl">Taux de Clic Projeté</div></div>
|
||
</div>
|
||
|
||
<div class="section-title">Funnel de Conversion Projeté</div>
|
||
<div class="funnel">
|
||
<h3>📈 Funnel type — Campagne email mono-marque (ex: Doliprane 1g, cible Généralistes TN+DZ+MA)</h3>
|
||
<div class="funnel-steps">
|
||
<div class="funnel-step">
|
||
<div class="funnel-bar" style="background:linear-gradient(135deg,var(--accent),#a855f7)">10 344</div>
|
||
<div class="lbl">Emails Envoyés</div>
|
||
<div class="pct">Généralistes 3 pays</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="funnel-step">
|
||
<div class="funnel-bar" style="background:linear-gradient(135deg,var(--blue),#60a5fa)">10 137</div>
|
||
<div class="lbl">Délivrés Inbox</div>
|
||
<div class="pct">98% deliverability</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="funnel-step">
|
||
<div class="funnel-bar" style="background:linear-gradient(135deg,var(--teal),#34d399)">3 244</div>
|
||
<div class="lbl">Ouvertures</div>
|
||
<div class="pct">32% open rate</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="funnel-step">
|
||
<div class="funnel-bar" style="background:linear-gradient(135deg,var(--amber),#fbbf24)">517</div>
|
||
<div class="lbl">Clics</div>
|
||
<div class="pct">5% CTR</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="funnel-step">
|
||
<div class="funnel-bar" style="background:linear-gradient(135deg,#f43f5e,#fb7185)">52</div>
|
||
<div class="lbl">Conversions</div>
|
||
<div class="pct">~10% landing → action</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title">Par Marque</div>
|
||
<div class="brands-grid">
|
||
<div class="brand-card"><span class="pill pill-multi">TN · DZ · MA</span><h3><span class="icon">💊</span> Doliprane 1g</h3><div class="specs">Généraliste, Pédiatre, Rhumatologue, Orthopédiste</div><div class="metrics"><div class="metric"><b>27 424</b><span>Reach email</span></div><div class="metric"><b>8 776</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-tn">TN</span><h3><span class="icon">💊</span> Doliprane Vit C</h3><div class="specs">Généraliste, Pédiatre</div><div class="metrics"><div class="metric"><b>2 754</b><span>Reach email</span></div><div class="metric"><b>881</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-tn">TN</span><h3><span class="icon">💊</span> Doliprane Ped</h3><div class="specs">Pédiatre, Généraliste</div><div class="metrics"><div class="metric"><b>2 754</b><span>Reach email</span></div><div class="metric"><b>881</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-multi">TN · DZ · MA</span><h3><span class="icon">💊</span> Maxilase</h3><div class="specs">ORL, Généraliste, Pédiatre</div><div class="metrics"><div class="metric"><b>22 922</b><span>Reach email</span></div><div class="metric"><b>7 335</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-multi">TN · DZ</span><h3><span class="icon">💊</span> Telfast</h3><div class="specs">Allergologue, Dermatologue, Pneumologue, ORL</div><div class="metrics"><div class="metric"><b>14 069</b><span>Reach email</span></div><div class="metric"><b>4 502</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-multi">TN · DZ</span><h3><span class="icon">💊</span> Nasacort</h3><div class="specs">ORL, Allergologue, Pneumologue, Généraliste</div><div class="metrics"><div class="metric"><b>22 235</b><span>Reach email</span></div><div class="metric"><b>7 115</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-multi">MA · TN</span><h3><span class="icon">💊</span> Enterogermina</h3><div class="specs">Gastro-entérologue, Généraliste, Pédiatre</div><div class="metrics"><div class="metric"><b>16 760</b><span>Reach email</span></div><div class="metric"><b>5 363</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-ma">MA</span><h3><span class="icon">💊</span> No Spa</h3><div class="specs">Gastro-entérologue, Généraliste, Pédiatre</div><div class="metrics"><div class="metric"><b>3 680</b><span>Reach email</span></div><div class="metric"><b>1 178</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-multi">TN · DZ · MA</span><h3><span class="icon">💊</span> Aspégic</h3><div class="specs">Généraliste, Cardiologue, Rhumatologue</div><div class="metrics"><div class="metric"><b>21 119</b><span>Reach email</span></div><div class="metric"><b>6 758</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-ma">MA</span><h3><span class="icon">💊</span> Flagyl</h3><div class="specs">Gastro-entérologue, Dermatologue, Généraliste</div><div class="metrics"><div class="metric"><b>3 172</b><span>Reach email</span></div><div class="metric"><b>1 015</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-ma">MA</span><h3><span class="icon">💊</span> Uvedose</h3><div class="specs">Généraliste, Endocrinologue, Rhumatologue</div><div class="metrics"><div class="metric"><b>2 419</b><span>Reach email</span></div><div class="metric"><b>774</b><span>Ouvertures proj.</span></div></div></div>
|
||
<div class="brand-card"><span class="pill pill-ma">MA</span><h3><span class="icon">💊</span> Allegra</h3><div class="specs">Allergologue, Dermatologue, Pneumologue</div><div class="metrics"><div class="metric"><b>2 152</b><span>Reach email</span></div><div class="metric"><b>689</b><span>Ouvertures proj.</span></div></div></div>
|
||
</div>
|
||
|
||
<div class="section-title">Benchmark vs Marché</div>
|
||
<div class="compare">
|
||
<h3>📊 Comparaison avec les standards sectoriels pharma</h3>
|
||
<table>
|
||
<thead><tr><th>Indicateur</th><th>WEVAL MedReach</th><th>Benchmark Pharma (Mailchimp 2025)</th><th>Benchmark IQVIA</th><th>Statut</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Taux d'ouverture</td><td><b>28-35%</b></td><td>18-22%</td><td>20-25%</td><td><span class="tag tag-win">+56%</span></td></tr>
|
||
<tr><td>Taux de clic</td><td><b>4-6%</b></td><td>2.5-3%</td><td>3-4%</td><td><span class="tag tag-win">+67%</span></td></tr>
|
||
<tr><td>Bounce rate</td><td><b><2%</b></td><td>3-5%</td><td>2-3%</td><td><span class="tag tag-win">-60%</span></td></tr>
|
||
<tr><td>Délivrabilité inbox</td><td><b>97%+</b></td><td>85-90%</td><td>90-94%</td><td><span class="tag tag-win">+8%</span></td></tr>
|
||
<tr><td>Reach Maghreb total</td><td><b>107 604</b></td><td>—</td><td>~40-60K estimé</td><td><span class="tag tag-win">+80%</span></td></tr>
|
||
<tr><td>Couverture spécialités</td><td><b>32</b></td><td>—</td><td>15-20</td><td><span class="tag tag-win">+60%</span></td></tr>
|
||
<tr><td>Tarif /1K emails</td><td><b>~200€</b></td><td>—</td><td>300-500€</td><td><span class="tag tag-win">-50%</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div style="background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(16,185,129,.06));border:1px solid rgba(124,58,237,.2);border-radius:16px;padding:28px;text-align:center;margin-bottom:32px">
|
||
<h3 style="font-size:18px;margin-bottom:8px">Prêt à lancer ?</h3>
|
||
<p style="color:var(--t3);font-size:13px;max-width:500px;margin:0 auto 16px">107 604 HCPs qualifiés. 18 marques mappées. Infrastructure souveraine opérationnelle.</p>
|
||
<div style="display:flex;gap:12px;justify-content:center">
|
||
<a href="mailto:ymahboub@weval-consulting.com?subject=Ethica%20-%20Lancement%20campagne" style="background:var(--accent);color:#fff;padding:12px 28px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none">Planifier un call →</a>
|
||
<a href="/booking.html" style="border:1px solid var(--border);color:var(--t1);padding:12px 28px;border-radius:10px;font-weight:500;font-size:14px;text-decoration:none">Réserver un créneau</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
MedReach by <a href="https://weval-consulting.com">WEVAL Consulting</a> — Sovereign AI & Digital Marketing • Casablanca / Paris<br>
|
||
Projection au 30 mars 2026 • Taux projetés basés sur infrastructure PMTA/DKIM/SPF/DMARC dédiée
|
||
</div>
|
||
|
||
<!-- === OPUS UNIVERSAL DRILL-DOWN v1 19avr — append-only, doctrine #14 === -->
|
||
<script>
|
||
(function(){
|
||
if (window.__opusUniversalDrill) return; window.__opusUniversalDrill = true;
|
||
var d = document;
|
||
var m = d.createElement('div');
|
||
m.id = 'opus-udrill';
|
||
m.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:99995;padding:20px;cursor:pointer';
|
||
var inner = d.createElement('div');
|
||
inner.id = 'opus-udrill-in';
|
||
inner.style.cssText = 'max-width:900px;width:100%;max-height:90vh;overflow:auto;background:#0b0d15;border:1px solid rgba(99,102,241,0.35);border-radius:14px;padding:28px;cursor:default;box-shadow:0 20px 60px rgba(0,0,0,0.6);color:#e2e8f0;font:14px/1.55 Inter,system-ui,sans-serif';
|
||
inner.addEventListener('click', function(e){ e.stopPropagation(); });
|
||
m.appendChild(inner);
|
||
m.addEventListener('click', function(){ m.style.display='none'; });
|
||
d.addEventListener('keydown', function(e){ if(e.key==='Escape') m.style.display='none'; });
|
||
(d.body || d.documentElement).appendChild(m);
|
||
|
||
function openCard(card) {
|
||
// Clone card content + show close btn + increase font-size
|
||
var html = '<div style="display:flex;justify-content:flex-end;margin-bottom:14px"><button id="opus-udrill-close" style="padding:6px 14px;background:#171b2a;border:1px solid rgba(99,102,241,0.25);color:#e2e8f0;border-radius:8px;cursor:pointer;font-size:12px">✕ Fermer (Esc)</button></div>';
|
||
html += '<div style="transform-origin:top left;font-size:1.05em">' + card.outerHTML + '</div>';
|
||
inner.innerHTML = html;
|
||
d.getElementById('opus-udrill-close').onclick = function(){ m.style.display='none'; };
|
||
m.style.display = 'flex';
|
||
}
|
||
|
||
function wire(root) {
|
||
var sels = '.card,[class*="card"],.kpi,[class*="kpi"],.stat,[class*="stat"],.tile,[class*="tile"],.metric,[class*="metric"],.widget,[class*="widget"]';
|
||
var cards = root.querySelectorAll(sels);
|
||
for (var i = 0; i < cards.length; i++) {
|
||
var c = cards[i];
|
||
if (c.__opusWired) continue;
|
||
if (c.closest('button, a, input, select, textarea, #opus-udrill')) continue;
|
||
var r = c.getBoundingClientRect();
|
||
if (r.width < 60 || r.height < 40) continue;
|
||
c.__opusWired = true;
|
||
c.style.cursor = 'pointer';
|
||
c.setAttribute('role','button');
|
||
c.setAttribute('tabindex','0');
|
||
c.addEventListener('click', function(ev){
|
||
// If a more-specific drill is already active (e.g. pp-card custom), let it handle
|
||
if (ev.target.closest('[data-pp-id]') && window.__opusDrillInit) return;
|
||
if (ev.target.closest('a,button,input,select')) return;
|
||
ev.preventDefault(); ev.stopPropagation();
|
||
openCard(this);
|
||
});
|
||
c.addEventListener('keydown', function(ev){ if(ev.key==='Enter'||ev.key===' '){ev.preventDefault();openCard(this);} });
|
||
}
|
||
}
|
||
|
||
// Initial + mutation observer
|
||
var initRun = function(){ wire(d.body || d.documentElement); };
|
||
if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', initRun);
|
||
else initRun();
|
||
var mo = new MutationObserver(function(muts){
|
||
var newCard = false;
|
||
for (var i=0;i<muts.length;i++) if (muts[i].addedNodes.length) { newCard = true; break; }
|
||
if (newCard) initRun();
|
||
});
|
||
mo.observe(d.body || d.documentElement, {childList:true, subtree:true});
|
||
})();
|
||
</script>
|
||
<!-- === OPUS UNIVERSAL DRILL-DOWN END === -->
|
||
|
||
|
||
<script src="/api/a11y-auto-enhancer.js" defer></script>
|
||
<!-- WTP_UDOCK_V1 (Opus 21-avr t33b6) --><script src="/wtp-unified-dock.js" defer></script>
|
||
<script src="/opus-antioverlap-doctrine.js?v=1777045903" defer></script>
|
||
<!-- DOCTRINE-60-UX-JS --><script id="doctrine60-ux-js-direct">
|
||
|
||
// DOCTRINE-60-UX-JS staggered entrance
|
||
(function(){
|
||
if (!('IntersectionObserver' in window)) return;
|
||
const obs = new IntersectionObserver((entries) => {
|
||
entries.forEach((e, i) => {
|
||
if (e.isIntersecting) {
|
||
setTimeout(() => e.target.classList.add('enter-stagger'), i * 80);
|
||
obs.unobserve(e.target);
|
||
}
|
||
});
|
||
});
|
||
document.querySelectorAll('.card, .kpi, .panel').forEach(el => obs.observe(el));
|
||
})();
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|