v2: Live Flask app — real Gemini AI demos, Nano Banana image gen, real £19.4M data dashboard
- Flask + gunicorn backend replacing static nginx - 3 live AI demos powered by Gemini 2.5 Flash - Nano Banana + Nano Banana Pro for product image generation - Real JV ecommerce dashboard (728K orders, 230K customers, 4MB data) - AI Infrastructure Proposal + Offer pages - Live product scraper for justvitamins.co.uk + competitor pages - API: /api/scrape, /api/generate-pack, /api/competitor-xray, /api/pdp-surgeon, /api/generate-images
This commit is contained in:
149
static/css/style.css
Normal file
149
static/css/style.css
Normal file
@@ -0,0 +1,149 @@
|
||||
/* JustVitamin × QuikCue — Live AI Engine */
|
||||
:root{--bg:#060a0f;--card:#0d1320;--card2:#111c2e;--border:#172035;--border2:#213050;--text:#e4eaf0;--text2:#8da0be;--muted:#506480;--accent:#10b981;--accent2:#34d399;--red:#ef4444;--red2:#fca5a5;--blue:#3b82f6;--purple:#8b5cf6;--gold:#f59e0b;--cyan:#06b6d4;--glow:rgba(16,185,129,.12)}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
html{scroll-behavior:smooth;scroll-padding-top:70px}
|
||||
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
|
||||
|
||||
/* Nav */
|
||||
nav{position:sticky;top:0;z-index:100;background:rgba(6,10,15,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:.7rem 1.5rem}
|
||||
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
|
||||
.logo{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--accent);text-decoration:none}.logo .x{color:var(--muted);font-weight:400}
|
||||
.nav-links{display:flex;gap:.2rem}.nav-links a{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--text2);text-decoration:none;padding:.35rem .6rem;border-radius:6px;transition:.15s}.nav-links a:hover{color:var(--text);background:var(--card)}
|
||||
|
||||
.page{max-width:1100px;margin:0 auto;padding:0 1.5rem}
|
||||
|
||||
/* Hero */
|
||||
.hero{padding:4.5rem 0 3rem;position:relative}
|
||||
.hero::before{content:'';position:absolute;top:-30%;right:-15%;width:600px;height:600px;background:radial-gradient(circle,var(--glow),transparent 70%);pointer-events:none}
|
||||
.hero>*{position:relative;z-index:1}
|
||||
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:600;color:var(--accent);margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}
|
||||
.pill{font-size:.65rem;background:rgba(16,185,129,.2);color:var(--accent2);padding:.2rem .6rem;border-radius:99px;border:1px solid rgba(16,185,129,.3);animation:pulse 2s infinite}
|
||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
|
||||
h1{font-size:clamp(2.2rem,5.5vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin-bottom:1rem}
|
||||
.gr{background:linear-gradient(135deg,var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
||||
.sub{font-size:1.1rem;color:var(--text2);line-height:1.7;max-width:620px;margin-bottom:1.5rem}.sub strong{color:var(--text)}
|
||||
.sub-sm{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
|
||||
.stats{display:flex;gap:2.5rem;margin-top:2.5rem;flex-wrap:wrap}
|
||||
.stat{display:flex;flex-direction:column;gap:.1rem}
|
||||
.stat .val{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:800;color:var(--accent)}
|
||||
.stat .lbl{font-size:.75rem;color:var(--muted);font-weight:500}
|
||||
|
||||
/* Buttons */
|
||||
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
|
||||
.btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;padding:.65rem 1.3rem;border-radius:9px;text-decoration:none;cursor:pointer;border:none;transition:.2s}
|
||||
.btn.cta{background:var(--red);color:#fff}.btn.cta:hover{background:#f87171;transform:translateY(-2px);box-shadow:0 8px 25px rgba(239,68,68,.2)}
|
||||
.btn.cta.lg{font-size:1rem;padding:.9rem 2rem;border-radius:11px}
|
||||
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(16,185,129,.25)}.btn.ghost:hover{background:var(--glow)}
|
||||
.btn.outline{background:transparent;color:var(--text2);border:1px solid var(--border2)}.btn.outline:hover{color:var(--text);border-color:var(--muted)}
|
||||
.note{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);margin-top:.5rem}.note a{color:var(--accent);text-decoration:none}
|
||||
|
||||
/* Demo sections */
|
||||
.demo{padding:4rem 0;border-top:1px solid var(--border)}
|
||||
.demo h2{font-size:clamp(1.5rem,4vw,2rem);font-weight:700;margin-bottom:.5rem}
|
||||
.badge{font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:700;padding:.25rem .65rem;border-radius:6px;display:inline-block;margin-bottom:.75rem}
|
||||
.badge.red{background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.25)}
|
||||
.badge.blue{background:rgba(59,130,246,.15);color:var(--blue);border:1px solid rgba(59,130,246,.25)}
|
||||
.badge.purple{background:rgba(139,92,246,.15);color:var(--purple);border:1px solid rgba(139,92,246,.25)}
|
||||
|
||||
/* Input cards */
|
||||
.input-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin:1.5rem 0}
|
||||
.input-row{display:flex;gap:.75rem;align-items:flex-end}
|
||||
.input-group{flex:1;display:flex;flex-direction:column;gap:.3rem}
|
||||
.input-group label{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
|
||||
.input-group input{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:.65rem 1rem;color:var(--text);font-size:.88rem;outline:none;transition:.2s;width:100%}
|
||||
.input-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
|
||||
.btn-gen{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;padding:.65rem 1.4rem;border:none;border-radius:8px;color:#fff;cursor:pointer;white-space:nowrap;transition:.2s}
|
||||
.btn-gen.red{background:var(--red)}.btn-gen.blue{background:var(--blue)}.btn-gen.purple{background:var(--purple)}
|
||||
.btn-gen:hover{opacity:.9;transform:translateY(-1px)}
|
||||
.btn-gen:disabled{opacity:.5;cursor:not-allowed}
|
||||
.btn-gen.loading{position:relative;color:rgba(255,255,255,.6)}
|
||||
.btn-gen.loading::after{content:'';display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin-left:.5rem}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
|
||||
/* Step bar */
|
||||
.step-bar{display:flex;gap:.75rem;margin-top:1rem}
|
||||
.step{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;position:relative;overflow:hidden}
|
||||
.step .step-label{font-size:.7rem;color:var(--muted);font-weight:600;display:block}
|
||||
.step .step-status{font-size:.75rem;font-weight:600;color:var(--text2)}
|
||||
.step.active .step-status{color:var(--cyan)}
|
||||
.step.done .step-status{color:var(--accent)}
|
||||
.step.error .step-status{color:var(--red)}
|
||||
.step::after{content:'';position:absolute;bottom:0;left:0;height:2px;width:0;transition:.3s}
|
||||
.step.active::after{width:100%;background:var(--cyan);animation:pulse 1.2s infinite}
|
||||
.step.done::after{width:100%;background:var(--accent)}
|
||||
.step.error::after{width:100%;background:var(--red)}
|
||||
|
||||
/* Output */
|
||||
.output{margin-top:1.5rem}.hidden{display:none}
|
||||
|
||||
.output-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
|
||||
.chip{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:.35rem .7rem;font-size:.72rem;color:var(--text2)}.chip strong{color:var(--cyan)}
|
||||
|
||||
/* Asset grid */
|
||||
.asset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:.75rem}
|
||||
.asset-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1.2rem;animation:fadeUp .4s ease both}
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
|
||||
.asset-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
|
||||
.asset-type{font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.15rem .45rem;border-radius:4px}
|
||||
.asset-type.hero{background:rgba(239,68,68,.12);color:var(--red)}
|
||||
.asset-type.pdp{background:rgba(16,185,129,.12);color:var(--accent)}
|
||||
.asset-type.ad{background:rgba(245,158,11,.12);color:var(--gold)}
|
||||
.asset-type.email{background:rgba(59,130,246,.12);color:var(--blue)}
|
||||
.asset-type.video{background:rgba(139,92,246,.12);color:var(--purple)}
|
||||
.asset-type.blog{background:rgba(236,72,153,.12);color:#ec4899}
|
||||
.asset-type.seo{background:rgba(99,102,241,.12);color:#6366f1}
|
||||
.asset-type.a11y{background:rgba(107,114,128,.12);color:#9ca3af}
|
||||
.asset-num{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--muted)}
|
||||
.asset-body{font-size:.84rem;color:var(--text2);line-height:1.65}
|
||||
.asset-body strong{color:var(--text)}.asset-body ul{list-style:none;margin-top:.4rem}.asset-body li{padding-left:.9rem;position:relative;margin-bottom:.25rem}.asset-body li::before{content:'›';position:absolute;left:0;color:var(--accent);font-weight:700}
|
||||
|
||||
/* Image section */
|
||||
.img-section{margin-top:1.5rem}.img-section h3{font-size:1.1rem;font-weight:700;margin-bottom:.35rem}
|
||||
.img-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem;margin-top:.75rem}
|
||||
.img-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
|
||||
.img-card img{width:100%;aspect-ratio:1;object-fit:cover}
|
||||
.img-card.wide img{aspect-ratio:16/9}
|
||||
.img-card .caption{padding:.75rem 1rem;font-size:.78rem;color:var(--text2)}.img-card .caption strong{color:var(--text)}
|
||||
|
||||
/* Split screen */
|
||||
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;min-height:400px}
|
||||
.split-left{background:#0d0a0a;padding:1.5rem;border-right:1px solid var(--border)}
|
||||
.split-right{background:var(--card);padding:1.5rem}
|
||||
.split-label{font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .5rem;border-radius:4px;display:inline-block;margin-bottom:.75rem}
|
||||
.split-label.bad{background:rgba(239,68,68,.15);color:var(--red)}
|
||||
.split-label.good{background:rgba(16,185,129,.15);color:var(--accent)}
|
||||
.xray-item{margin-bottom:1.1rem}
|
||||
.xray-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
|
||||
.xray-val{font-size:.86rem;color:var(--text2);line-height:1.6}.xray-val strong{color:var(--text)}
|
||||
.xray-val.gap{color:var(--red);font-weight:600}
|
||||
.xray-tactics{list-style:none}.xray-tactics li{font-size:.84rem;color:var(--text2);padding-left:1.2rem;position:relative;margin-bottom:.35rem}.xray-tactics li::before{content:'';position:absolute;left:0;top:.5rem;width:6px;height:6px;border-radius:50%;background:var(--red)}
|
||||
.improved-hero{background:var(--bg);border:1px solid rgba(16,185,129,.2);border-radius:10px;padding:1.25rem;margin-bottom:1rem}
|
||||
.improved-hero h4{font-size:1.05rem;font-weight:700;color:var(--accent2);margin-bottom:.5rem;line-height:1.3}
|
||||
.improved-hero p{font-size:.84rem;color:var(--text2);line-height:1.6}
|
||||
.diff-list{list-style:none;margin-top:.75rem}.diff-list li{padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.84rem;display:flex;gap:.5rem}.diff-list li:last-child{border:none}
|
||||
.diff-list .icon{flex-shrink:0}.diff-list .txt{color:var(--text2)}.diff-list .txt strong{color:var(--text)}
|
||||
.compliance{margin-top:1rem;padding:.75rem 1rem;background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.15);border-radius:8px}
|
||||
.compliance h5{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--red);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
|
||||
.compliance ul{list-style:none}.compliance li{font-size:.78rem;color:#f87171;padding-left:.8rem;position:relative;margin-bottom:.2rem}.compliance li::before{content:'✕';position:absolute;left:0;font-weight:700}
|
||||
|
||||
/* Toggles */
|
||||
.toggle-group{display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap}
|
||||
.toggle{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:600;padding:.45rem .9rem;border:1px solid var(--border2);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;transition:.2s}
|
||||
.toggle:hover{border-color:var(--text2);color:var(--text)}
|
||||
.toggle.active{background:var(--glow);border-color:var(--accent);color:var(--accent)}
|
||||
|
||||
/* Annotation */
|
||||
.ann{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--accent);background:var(--glow);padding:.15rem .4rem;border-radius:4px;display:inline-block;margin:.25rem 0}
|
||||
.highlight{background:var(--glow);border-left:2px solid var(--accent);padding:.25rem .5rem;margin:.3rem 0;display:block;border-radius:0 4px 4px 0;font-size:.84rem;color:var(--text2)}
|
||||
|
||||
/* CTA */
|
||||
.cta-section{text-align:center;padding:5rem 0}
|
||||
.cta-section h2{margin-bottom:.5rem}
|
||||
|
||||
/* Footer */
|
||||
footer{padding:1.5rem 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted)}
|
||||
footer a{color:var(--accent);text-decoration:none}
|
||||
|
||||
/* Responsive */
|
||||
@media(max-width:800px){.input-row{flex-direction:column}.btn-gen{width:100%}.split{grid-template-columns:1fr}.split-left{border-right:none;border-bottom:1px solid var(--border)}.stats{gap:1.25rem}.step-bar{flex-direction:column;gap:.4rem}footer{flex-direction:column;gap:.3rem;text-align:center}}
|
||||
@media(max-width:500px){.nav-links a{font-size:.68rem;padding:.25rem .4rem}.btn-row{flex-direction:column}.btn{width:100%;justify-content:center}}
|
||||
909
static/dashboard/index.html
Normal file
909
static/dashboard/index.html
Normal file
@@ -0,0 +1,909 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JV Ecommerce — Dynamic Performance Report</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
|
||||
<style>
|
||||
:root{--bg:#0a0e1a;--card:#111827;--card2:#1a2235;--border:#1e293b;--text:#e2e8f0;--muted:#64748b;--accent:#6366f1;--accent2:#818cf8;--green:#10b981;--red:#ef4444;--yellow:#f59e0b;--purple:#a855f7;--cyan:#06b6d4;--pink:#ec4899}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:14px}
|
||||
.container{max-width:1440px;margin:0 auto;padding:32px 24px}
|
||||
header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:20px;flex-wrap:wrap;gap:16px}
|
||||
h1{font-size:24px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
||||
.header-meta{text-align:right;color:var(--muted);font-size:12px}
|
||||
h2{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
|
||||
h3{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px}
|
||||
|
||||
/* Date filter bar */
|
||||
.filter-bar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:20px;flex-wrap:wrap}
|
||||
.filter-bar label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
|
||||
.filter-bar select,.filter-bar input{background:var(--card2);border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:6px;font-size:13px;font-family:inherit}
|
||||
.filter-bar input[type="month"]{cursor:pointer}
|
||||
.filter-bar select:focus,.filter-bar input:focus{outline:none;border-color:var(--accent)}
|
||||
.filter-btn{background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:.2s}
|
||||
.filter-btn:hover{background:var(--accent2)}
|
||||
.filter-btn.reset{background:transparent;border:1px solid var(--border);color:var(--muted)}
|
||||
.filter-btn.reset:hover{border-color:var(--accent);color:var(--text)}
|
||||
.filter-active{display:inline-block;padding:4px 10px;background:rgba(99,102,241,.15);color:var(--accent2);border-radius:4px;font-size:11px;font-weight:600}
|
||||
.filter-info{font-size:11px;color:var(--muted);margin-left:auto}
|
||||
|
||||
.tabs{display:flex;gap:4px;margin-bottom:28px;background:var(--card);padding:4px;border-radius:10px;border:1px solid var(--border)}
|
||||
.tab{padding:10px 24px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:.2s;flex:1;text-align:center}
|
||||
.tab:hover{color:var(--text)}
|
||||
.tab.active{background:var(--accent);color:#fff}
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:28px}
|
||||
.kpi{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px}
|
||||
.kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
|
||||
.kpi-value{font-size:24px;font-weight:700;letter-spacing:-.5px}
|
||||
.kpi-sub{font-size:11px;color:var(--muted);margin-top:2px}
|
||||
.kpi-value.green{color:var(--green)}.kpi-value.red{color:var(--red)}.kpi-value.accent{color:var(--accent2)}
|
||||
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
|
||||
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:28px}
|
||||
@media(max-width:1000px){.grid-2,.grid-3{grid-template-columns:1fr}}
|
||||
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:20px}
|
||||
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
|
||||
.chart-box{position:relative;height:280px}
|
||||
.chart-tall{height:350px}
|
||||
table{width:100%;border-collapse:collapse;font-size:12px}
|
||||
th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);color:var(--muted);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;background:var(--card)}
|
||||
td{padding:7px 10px;border-bottom:1px solid rgba(30,41,59,.5)}
|
||||
tr:hover td{background:rgba(99,102,241,.04)}
|
||||
.num{text-align:right;font-variant-numeric:tabular-nums;font-family:'SF Mono','Fira Code',monospace;font-size:12px}
|
||||
.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--yellow)}.purple{color:var(--purple)}.cyan{color:var(--cyan)}.pink{color:var(--pink)}
|
||||
.insight{background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(6,182,212,.05));border-left:3px solid var(--accent);padding:14px 18px;border-radius:0 10px 10px 0;margin-bottom:14px;font-size:13px}
|
||||
.insight strong{color:var(--accent2)}
|
||||
.insight.warn{border-left-color:var(--yellow);background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.02))}
|
||||
.insight.warn strong{color:var(--yellow)}
|
||||
.insight.good{border-left-color:var(--green);background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.02))}
|
||||
.insight.good strong{color:var(--green)}
|
||||
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
|
||||
.compare-col{padding:24px;text-align:center}
|
||||
.compare-col:first-child{border-right:1px solid var(--border)}
|
||||
.compare-title{font-size:14px;font-weight:700;margin-bottom:16px}
|
||||
.compare-stat{margin-bottom:12px}
|
||||
.compare-stat-label{font-size:11px;color:var(--muted);text-transform:uppercase}
|
||||
.compare-stat-value{font-size:22px;font-weight:700}
|
||||
.section-title{font-size:16px;font-weight:600;margin:28px 0 16px;padding-top:16px;border-top:1px solid var(--border)}
|
||||
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase}
|
||||
.badge-green{background:rgba(16,185,129,.15);color:var(--green)}
|
||||
.badge-red{background:rgba(239,68,68,.15);color:var(--red)}
|
||||
.badge-yellow{background:rgba(245,158,11,.15);color:var(--yellow)}
|
||||
.scrollable{max-height:400px;overflow-y:auto}
|
||||
.highlight-row{background:rgba(99,102,241,.06)!important}
|
||||
.footer{text-align:center;color:var(--muted);font-size:11px;padding:32px 0 16px;border-top:1px solid var(--border);margin-top:40px}
|
||||
.loading{text-align:center;padding:80px;color:var(--muted);font-size:16px}
|
||||
.loading .spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-right:12px;vertical-align:middle}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.presets{display:flex;gap:6px;flex-wrap:wrap}
|
||||
.preset-btn{background:var(--card2);border:1px solid var(--border);color:var(--muted);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;transition:.2s}
|
||||
.preset-btn:hover,.preset-btn.active{border-color:var(--accent);color:var(--accent2);background:rgba(99,102,241,.1)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div>
|
||||
<h1>JV Vitamins — Ecommerce Performance Report</h1>
|
||||
<div style="color:var(--muted);font-size:13px;margin-top:4px">Dynamic analysis with date filtering — data loaded from CSV export</div>
|
||||
</div>
|
||||
<div class="header-meta">
|
||||
<div id="dateRange"></div>
|
||||
<div id="orderCount"></div>
|
||||
<div id="reportDate"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Date Filter Bar -->
|
||||
<div class="filter-bar">
|
||||
<label>📅 Date Range:</label>
|
||||
<input type="month" id="startDate">
|
||||
<span style="color:var(--muted)">to</span>
|
||||
<input type="month" id="endDate">
|
||||
<button class="filter-btn" onclick="applyFilter()">Apply Filter</button>
|
||||
<button class="filter-btn reset" onclick="resetFilter()">Reset</button>
|
||||
<div class="presets">
|
||||
<button class="preset-btn" onclick="setPreset('last12')">Last 12 Months</button>
|
||||
<button class="preset-btn" onclick="setPreset('last24')">Last 24 Months</button>
|
||||
<button class="preset-btn" onclick="setPreset('ytd')">YTD</button>
|
||||
<button class="preset-btn" onclick="setPreset('2024')">2024</button>
|
||||
<button class="preset-btn" onclick="setPreset('2023')">2023</button>
|
||||
<button class="preset-btn" onclick="setPreset('2020')">2020</button>
|
||||
<button class="preset-btn" onclick="setPreset('all')" id="presetAll">All Time</button>
|
||||
</div>
|
||||
<div class="filter-info" id="filterInfo"></div>
|
||||
</div>
|
||||
|
||||
<div id="loadingMsg" class="loading"><span class="spinner"></span>Loading data…</div>
|
||||
|
||||
<div id="mainContent" style="display:none">
|
||||
<div class="tabs">
|
||||
<div class="tab active" onclick="showPanel('exec',this)">Executive Summary</div>
|
||||
<div class="tab" onclick="showPanel('growth',this)">Growth & Channels</div>
|
||||
<div class="tab" onclick="showPanel('products',this)">Products</div>
|
||||
<div class="tab" onclick="showPanel('shipping',this)">Free Shipping Analysis</div>
|
||||
<div class="tab" onclick="showPanel('customers',this)">Customers</div>
|
||||
</div>
|
||||
|
||||
<!-- EXECUTIVE -->
|
||||
<div id="exec" class="panel active">
|
||||
<div class="kpi-grid" id="kpiGrid"></div>
|
||||
<div id="execInsights"></div>
|
||||
<div class="grid-2">
|
||||
<div class="card"><div class="card-header"><h3>Revenue & Orders — Monthly</h3></div><div class="chart-box chart-tall"><canvas id="revOrdersChart"></canvas></div></div>
|
||||
<div class="card"><div class="card-header"><h3>AOV Trend</h3></div><div class="chart-box chart-tall"><canvas id="aovTrendChart"></canvas></div></div>
|
||||
</div>
|
||||
<div class="grid-2">
|
||||
<div class="card"><div class="card-header"><h3>New vs Returning Customer Revenue</h3></div><div class="chart-box"><canvas id="newRetChart"></canvas></div></div>
|
||||
<div class="card"><div class="card-header"><h3>Yearly Performance</h3></div><div class="chart-box"><canvas id="yearlyChart"></canvas></div></div>
|
||||
</div>
|
||||
<div class="grid-2">
|
||||
<div class="card"><div class="card-header"><h3>Orders by Day of Week</h3></div><div class="chart-box"><canvas id="dowChart"></canvas></div></div>
|
||||
<div class="card"><div class="card-header"><h3>Payment Processor Split</h3></div><div class="chart-box"><canvas id="payChart"></canvas></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GROWTH -->
|
||||
<div id="growth" class="panel">
|
||||
<div class="card"><div class="card-header"><h3>Channel Performance</h3></div><div class="scrollable"><table id="channelTable"></table></div></div>
|
||||
<div class="grid-2">
|
||||
<div class="card"><div class="card-header"><h3>Channel Revenue Trend</h3></div><div class="chart-box chart-tall"><canvas id="channelTrendChart"></canvas></div></div>
|
||||
<div class="card"><div class="card-header"><h3>Channel Mix Over Time</h3></div><div class="chart-box chart-tall"><canvas id="channelMixChart"></canvas></div></div>
|
||||
</div>
|
||||
<div class="section-title">Discount Analysis</div>
|
||||
<div class="card"><table id="discountCompare"></table></div>
|
||||
<div class="card"><div class="card-header"><h3>Top 20 Discount Codes</h3></div><div class="scrollable"><table id="discountTable"></table></div></div>
|
||||
</div>
|
||||
|
||||
<!-- PRODUCTS -->
|
||||
<div id="products" class="panel">
|
||||
<div class="card"><div class="card-header"><h3>Product Categories</h3></div><div class="scrollable"><table id="catTable"></table></div></div>
|
||||
<div class="grid-2">
|
||||
<div class="card"><div class="card-header"><h3>Revenue by Category</h3></div><div class="chart-box chart-tall"><canvas id="catChart"></canvas></div></div>
|
||||
<div class="card"><div class="card-header"><h3>Margin % by Category</h3></div><div class="chart-box chart-tall"><canvas id="catMarginChart"></canvas></div></div>
|
||||
</div>
|
||||
<div class="card"><div class="card-header"><h3>Top 50 Products</h3></div><div class="scrollable" style="max-height:600px"><table id="prodTable"></table></div></div>
|
||||
<div class="card"><div class="card-header"><h3>Frequently Bought Together</h3></div><table id="crossSellTable"></table></div>
|
||||
</div>
|
||||
|
||||
<!-- SHIPPING -->
|
||||
<div id="shipping" class="panel">
|
||||
<h2 style="margin-bottom:20px">Free Shipping Hypothesis Testing</h2>
|
||||
<div id="shipInsights"></div>
|
||||
<div class="kpi-grid" id="shipKpis"></div>
|
||||
<div class="card">
|
||||
<div class="card-header"><h3>Head-to-Head: Free Shipping vs Paid Shipping Orders</h3></div>
|
||||
<div class="compare-grid" id="shipCompare"></div>
|
||||
</div>
|
||||
<div class="grid-2">
|
||||
<div class="card"><div class="card-header"><h3>Order Value Distribution</h3></div><div class="chart-box chart-tall"><canvas id="aovDistChart"></canvas></div></div>
|
||||
<div class="card"><div class="card-header"><h3>Shipping Cost & Free Ship % by Order Value</h3></div><div class="chart-box chart-tall"><canvas id="shipByAovChart"></canvas></div></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header"><h3>Free Shipping Threshold Scenarios</h3></div>
|
||||
<p style="color:var(--muted);font-size:12px;margin-bottom:14px">What happens if you offer free shipping above a minimum order value?</p>
|
||||
<table id="thresholdTable"></table>
|
||||
</div>
|
||||
<div class="grid-2">
|
||||
<div class="card"><div class="card-header"><h3>Free Shipping % Over Time</h3></div><div class="chart-box"><canvas id="shipTrendChart"></canvas></div></div>
|
||||
<div class="card"><div class="card-header"><h3>Free Shipping % by Channel</h3></div><div class="chart-box"><canvas id="shipChannelChart"></canvas></div></div>
|
||||
</div>
|
||||
<div class="card"><div class="card-header"><h3>Delivery Methods Breakdown</h3></div><div class="scrollable"><table id="deliveryTable"></table></div></div>
|
||||
</div>
|
||||
|
||||
<!-- CUSTOMERS -->
|
||||
<div id="customers" class="panel">
|
||||
<div class="grid-2">
|
||||
<div class="card"><div class="card-header"><h3>Customer Segments</h3></div><div class="chart-box"><canvas id="custSegChart"></canvas></div></div>
|
||||
<div class="card"><div class="card-header"><h3>Top Countries</h3></div><div class="chart-box"><canvas id="countryChart"></canvas></div></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header"><h3>Cohort Retention (Monthly)</h3></div>
|
||||
<div class="scrollable" style="max-height:500px"><table id="cohortTable"></table></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer" id="footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// GLOBALS
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
let RAW = null; // full dataset from JSON
|
||||
let FSTART = null; // filter start YYYY-MM
|
||||
let FEND = null; // filter end YYYY-MM
|
||||
const COLORS = ['#6366f1','#10b981','#f59e0b','#ef4444','#a855f7','#06b6d4','#ec4899','#84cc16','#f97316','#14b8a6'];
|
||||
const charts = {}; // chart instances for cleanup
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// UTILITIES
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function fmt(n,d=0){if(n==null||isNaN(n))return'-';return new Intl.NumberFormat('en-GB',{minimumFractionDigits:d,maximumFractionDigits:d}).format(n)}
|
||||
function gbp(n){if(n==null||isNaN(n))return'-';return '\u00a3'+fmt(n,2)}
|
||||
function pct(n){return n==null?'-':fmt(n,1)+'%'}
|
||||
function mc(n){return n>=60?'green':n>=40?'yellow':'red'}
|
||||
|
||||
function showPanel(id,el){
|
||||
document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
|
||||
document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
|
||||
document.getElementById(id).classList.add('active');
|
||||
el.classList.add('active');
|
||||
}
|
||||
|
||||
function destroyChart(id){
|
||||
if(charts[id]){charts[id].destroy();delete charts[id];}
|
||||
}
|
||||
|
||||
const cDef={responsive:true,maintainAspectRatio:false,animation:{duration:300},plugins:{legend:{labels:{color:'#64748b',font:{size:11}}}},scales:{x:{grid:{color:'rgba(30,41,59,.5)'},ticks:{color:'#64748b',font:{size:10},maxRotation:45}},y:{grid:{color:'rgba(30,41,59,.5)'},ticks:{color:'#64748b',font:{size:10}}}}};
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// DATA FILTERING
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function inRange(ym){
|
||||
if(!FSTART && !FEND) return true;
|
||||
if(FSTART && ym < FSTART) return false;
|
||||
if(FEND && ym > FEND) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function filterArr(arr, ymKey='YearMonth'){
|
||||
return arr.filter(r => inRange(r[ymKey]));
|
||||
}
|
||||
|
||||
// Weighted average helper
|
||||
function wavg(arr, valKey, weightKey){
|
||||
let sumW = 0, sumVW = 0;
|
||||
arr.forEach(r => {
|
||||
const w = r[weightKey] || 0;
|
||||
const v = r[valKey];
|
||||
if(v != null && !isNaN(v)){
|
||||
sumW += w;
|
||||
sumVW += v * w;
|
||||
}
|
||||
});
|
||||
return sumW > 0 ? sumVW / sumW : 0;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// DATE FILTER UI
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function applyFilter(){
|
||||
const s = document.getElementById('startDate').value;
|
||||
const e = document.getElementById('endDate').value;
|
||||
FSTART = s || null;
|
||||
FEND = e || null;
|
||||
document.querySelectorAll('.preset-btn').forEach(b=>b.classList.remove('active'));
|
||||
buildAll();
|
||||
}
|
||||
|
||||
function resetFilter(){
|
||||
FSTART = null; FEND = null;
|
||||
document.getElementById('startDate').value = '';
|
||||
document.getElementById('endDate').value = '';
|
||||
document.querySelectorAll('.preset-btn').forEach(b=>b.classList.remove('active'));
|
||||
document.getElementById('presetAll').classList.add('active');
|
||||
buildAll();
|
||||
}
|
||||
|
||||
function setPreset(key){
|
||||
document.querySelectorAll('.preset-btn').forEach(b=>b.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
const now = new Date();
|
||||
const cy = now.getFullYear();
|
||||
const cm = String(now.getMonth()+1).padStart(2,'0');
|
||||
switch(key){
|
||||
case 'last12': {
|
||||
const d = new Date(now); d.setMonth(d.getMonth()-12);
|
||||
FSTART = d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0');
|
||||
FEND = null; break;
|
||||
}
|
||||
case 'last24': {
|
||||
const d = new Date(now); d.setMonth(d.getMonth()-24);
|
||||
FSTART = d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0');
|
||||
FEND = null; break;
|
||||
}
|
||||
case 'ytd': FSTART = cy+'-01'; FEND = null; break;
|
||||
case '2024': FSTART = '2024-01'; FEND = '2024-12'; break;
|
||||
case '2023': FSTART = '2023-01'; FEND = '2023-12'; break;
|
||||
case '2020': FSTART = '2020-01'; FEND = '2020-12'; break;
|
||||
case 'all': FSTART = null; FEND = null; break;
|
||||
}
|
||||
document.getElementById('startDate').value = FSTART || '';
|
||||
document.getElementById('endDate').value = FEND || '';
|
||||
buildAll();
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// BUILD ALL SECTIONS
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function buildAll(){
|
||||
const fm = filterArr(RAW.monthly);
|
||||
updateFilterInfo(fm);
|
||||
buildExec(fm);
|
||||
buildGrowth(fm);
|
||||
buildProducts();
|
||||
buildShipping(fm);
|
||||
buildCustomers(fm);
|
||||
}
|
||||
|
||||
function updateFilterInfo(fm){
|
||||
const totalOrders = fm.reduce((s,r)=>s+r.orders, 0);
|
||||
const rangeText = FSTART || FEND
|
||||
? `Filtered: ${FSTART||'start'} → ${FEND||'latest'}`
|
||||
: `All Time: ${RAW.meta.dateMin} to ${RAW.meta.dateMax}`;
|
||||
document.getElementById('dateRange').textContent = rangeText;
|
||||
document.getElementById('orderCount').textContent = `${fmt(totalOrders)} valid orders in range`;
|
||||
document.getElementById('reportDate').textContent = `Data generated ${RAW.meta.generatedAt?.split('T')[0] || ''}`;
|
||||
document.getElementById('filterInfo').innerHTML = FSTART || FEND
|
||||
? `<span class="filter-active">🔍 Filter Active: ${fm.length} months</span>`
|
||||
: `${fm.length} months loaded`;
|
||||
document.getElementById('footer').innerHTML = `
|
||||
JV Vitamins Ecommerce Analysis · Data: ${fmt(RAW.meta.totalRawOrders)} orders (${fmt(RAW.meta.totalValidOrders)} valid) · ${RAW.meta.dateMin} — ${RAW.meta.dateMax}<br>
|
||||
<span style="color:var(--yellow)">Note: Order line data coverage ${RAW.meta.lineDataCoverage}%. Orderlines capped at Excel 1M row limit.</span>
|
||||
`;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// EXECUTIVE SUMMARY
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function buildExec(fm){
|
||||
const totalRev = fm.reduce((s,r) => s + r.revenue, 0);
|
||||
const totalOrders = fm.reduce((s,r) => s + r.orders, 0);
|
||||
const avgAOV = totalOrders > 0 ? totalRev / totalOrders : 0;
|
||||
const totalCustomers = RAW.meta.uniqueCustomers; // approximate for filtered
|
||||
const totalShipping = fm.reduce((s,r) => s + (r.totalShipping||0), 0);
|
||||
const totalNewCust = fm.reduce((s,r) => s + r.newCustomers, 0);
|
||||
const avgMargin = wavg(fm, 'avgMargin', 'orders');
|
||||
const freeShipPct = fm.reduce((s,r) => s + (r.freeShipOrders||0), 0) / (totalOrders||1) * 100;
|
||||
const discountPct = fm.reduce((s,r) => s + (r.discountOrders||0), 0) / (totalOrders||1) * 100;
|
||||
const avgItems = fm.reduce((s,r) => s + (r.totalItems||0), 0) / (totalOrders||1);
|
||||
|
||||
// New vs returning revenue from newReturningMonthly
|
||||
const nrFiltered = filterArr(RAW.newReturningMonthly);
|
||||
const newRev = nrFiltered.filter(r=>r.IsNewCustomer===1).reduce((s,r)=>s+r.revenue,0);
|
||||
const retRev = nrFiltered.filter(r=>r.IsNewCustomer===0).reduce((s,r)=>s+r.revenue,0);
|
||||
const retOrders = nrFiltered.filter(r=>r.IsNewCustomer===0).reduce((s,r)=>s+r.orders,0);
|
||||
const repeatRevPct = totalRev > 0 ? retRev / totalRev * 100 : 0;
|
||||
|
||||
const kpis = [
|
||||
{l:'Gross Revenue', v:gbp(totalRev), s:FSTART||FEND?'Filtered period':'All time', c:''},
|
||||
{l:'Valid Orders', v:fmt(totalOrders), s:`${fm.length} months`, c:''},
|
||||
{l:'AOV (Mean)', v:gbp(avgAOV), s:`${fmt(avgItems,1)} items/order`, c:'accent'},
|
||||
{l:'Avg Gross Margin', v:pct(avgMargin), s:`${RAW.meta.lineDataCoverage}% data coverage`, c:'green'},
|
||||
{l:'Shipping Revenue', v:gbp(totalShipping), s:`${pct(freeShipPct)} orders ship free`, c:''},
|
||||
{l:'Discounted Orders', v:pct(discountPct), s:`of orders used a code`, c:'yellow'},
|
||||
{l:'Returning Revenue', v:gbp(retRev), s:`${pct(repeatRevPct)} of total`, c:'green'},
|
||||
{l:'New Customers', v:fmt(totalNewCust), s:`First orders in range`, c:'cyan'},
|
||||
];
|
||||
document.getElementById('kpiGrid').innerHTML = kpis.map(k =>
|
||||
`<div class="kpi"><div class="kpi-label">${k.l}</div><div class="kpi-value ${k.c}">${k.v}</div><div class="kpi-sub">${k.s}</div></div>`
|
||||
).join('');
|
||||
|
||||
// Insights
|
||||
const latestYear = fm.filter(r=>r.YearMonth>='2025-01');
|
||||
const prevYear = fm.filter(r=>r.YearMonth>='2024-01'&&r.YearMonth<='2024-12');
|
||||
const lyRev = latestYear.reduce((s,r)=>s+r.revenue,0);
|
||||
const pyRev = prevYear.reduce((s,r)=>s+r.revenue,0);
|
||||
const yoyChange = pyRev > 0 ? ((lyRev - pyRev) / pyRev * 100) : 0;
|
||||
|
||||
document.getElementById('execInsights').innerHTML = `
|
||||
<div class="insight ${avgMargin >= 55 ? 'good' : 'warn'}"><strong>Avg Margin ${pct(avgMargin)}:</strong> ${avgMargin >= 55 ? 'Healthy margins across the product range.' : 'Margins are under pressure — review product costs and pricing.'}</div>
|
||||
<div class="insight"><strong>Returning customer revenue:</strong> ${pct(repeatRevPct)} of revenue comes from repeat buyers. ${repeatRevPct > 40 ? 'Strong loyalty base to leverage.' : 'Opportunity to improve retention.'}</div>
|
||||
<div class="insight ${avgItems < 2 ? 'warn' : 'good'}"><strong>Items per order: ${fmt(avgItems,1)}.</strong> ${avgItems < 2 ? 'Most orders are single-item. Bundling and cross-sell could lift AOV.' : 'Good cross-sell rate.'}</div>
|
||||
`;
|
||||
|
||||
// Revenue + Orders chart
|
||||
destroyChart('revOrdersChart');
|
||||
charts['revOrdersChart'] = new Chart(document.getElementById('revOrdersChart'), {
|
||||
type:'line', data:{labels:fm.map(r=>r.YearMonth), datasets:[
|
||||
{label:'Revenue',data:fm.map(r=>r.revenue),borderColor:'#6366f1',backgroundColor:'#6366f133',fill:true,tension:.3,pointRadius:0,yAxisID:'y'},
|
||||
{label:'Orders',data:fm.map(r=>r.orders),borderColor:'#10b981',tension:.3,pointRadius:0,yAxisID:'y1'}
|
||||
]}, options:{...cDef,scales:{...cDef.scales,
|
||||
y:{...cDef.scales.y,position:'left',ticks:{...cDef.scales.y.ticks,callback:v=>'\u00a3'+fmt(v/1000)+'k'}},
|
||||
y1:{grid:{display:false},ticks:{color:'#10b981',font:{size:10}},position:'right'}
|
||||
}}
|
||||
});
|
||||
|
||||
// AOV chart
|
||||
destroyChart('aovTrendChart');
|
||||
charts['aovTrendChart'] = new Chart(document.getElementById('aovTrendChart'), {
|
||||
type:'line', data:{labels:fm.map(r=>r.YearMonth), datasets:[
|
||||
{label:'Mean AOV',data:fm.map(r=>r.aov),borderColor:'#a855f7',tension:.3,pointRadius:0}
|
||||
]}, options:{...cDef,plugins:{...cDef.plugins,legend:{display:false}},
|
||||
scales:{...cDef.scales,y:{...cDef.scales.y,ticks:{...cDef.scales.y.ticks,callback:v=>'\u00a3'+v}}}}
|
||||
});
|
||||
|
||||
// New vs Returning
|
||||
destroyChart('newRetChart');
|
||||
const nrByMonth = {};
|
||||
nrFiltered.forEach(r => {
|
||||
if(!nrByMonth[r.YearMonth]) nrByMonth[r.YearMonth] = {new:0,ret:0};
|
||||
if(r.IsNewCustomer) nrByMonth[r.YearMonth].new = r.revenue;
|
||||
else nrByMonth[r.YearMonth].ret = r.revenue;
|
||||
});
|
||||
const nrLabels = Object.keys(nrByMonth).sort();
|
||||
charts['newRetChart'] = new Chart(document.getElementById('newRetChart'), {
|
||||
type:'bar', data:{labels:nrLabels, datasets:[
|
||||
{label:'New Customer Revenue',data:nrLabels.map(l=>nrByMonth[l].new),backgroundColor:'#06b6d4cc'},
|
||||
{label:'Returning Revenue',data:nrLabels.map(l=>nrByMonth[l].ret),backgroundColor:'#6366f1cc'}
|
||||
]}, options:{...cDef,scales:{...cDef.scales,x:{...cDef.scales.x,stacked:true},y:{...cDef.scales.y,stacked:true,ticks:{callback:v=>'\u00a3'+fmt(v/1000)+'k'}}}}
|
||||
});
|
||||
|
||||
// Yearly
|
||||
destroyChart('yearlyChart');
|
||||
const yearAgg = {};
|
||||
fm.forEach(r => {
|
||||
const y = r.YearMonth.substring(0,4);
|
||||
if(!yearAgg[y]) yearAgg[y] = {revenue:0, orders:0};
|
||||
yearAgg[y].revenue += r.revenue;
|
||||
yearAgg[y].orders += r.orders;
|
||||
});
|
||||
const years = Object.keys(yearAgg).sort();
|
||||
charts['yearlyChart'] = new Chart(document.getElementById('yearlyChart'), {
|
||||
type:'bar', data:{labels:years, datasets:[
|
||||
{label:'Revenue',data:years.map(y=>yearAgg[y].revenue),backgroundColor:'#6366f1cc',yAxisID:'y'},
|
||||
{label:'Orders',data:years.map(y=>yearAgg[y].orders),type:'line',borderColor:'#10b981',pointRadius:2,yAxisID:'y1'}
|
||||
]}, options:{...cDef,scales:{...cDef.scales,
|
||||
y:{...cDef.scales.y,ticks:{callback:v=>'\u00a3'+fmt(v/1000000,1)+'M'}},
|
||||
y1:{grid:{display:false},ticks:{color:'#10b981',font:{size:10},callback:v=>fmt(v/1000)+'k'},position:'right'}
|
||||
}}
|
||||
});
|
||||
|
||||
// Day of week
|
||||
destroyChart('dowChart');
|
||||
const dowFiltered = filterArr(RAW.dowMonthly);
|
||||
const dowAgg = {};
|
||||
const dowOrder = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
|
||||
dowFiltered.forEach(r => {
|
||||
if(!dowAgg[r.DayOfWeek]) dowAgg[r.DayOfWeek] = {orders:0, revenue:0};
|
||||
dowAgg[r.DayOfWeek].orders += r.orders;
|
||||
dowAgg[r.DayOfWeek].revenue += r.revenue;
|
||||
});
|
||||
charts['dowChart'] = new Chart(document.getElementById('dowChart'), {
|
||||
type:'bar', data:{labels:dowOrder, datasets:[{data:dowOrder.map(d=>(dowAgg[d]||{orders:0}).orders),backgroundColor:COLORS.slice(0,7).map(c=>c+'cc')}]},
|
||||
options:{...cDef,plugins:{legend:{display:false}}}
|
||||
});
|
||||
|
||||
// Payment
|
||||
destroyChart('payChart');
|
||||
const payFiltered = filterArr(RAW.paymentMonthly);
|
||||
const payAgg = {};
|
||||
payFiltered.forEach(r => {
|
||||
const k = (r.PaymentProcessor||'Unknown').toUpperCase();
|
||||
if(!payAgg[k]) payAgg[k] = 0;
|
||||
payAgg[k] += r.orders;
|
||||
});
|
||||
const payEntries = Object.entries(payAgg).sort((a,b)=>b[1]-a[1]).slice(0,8);
|
||||
charts['payChart'] = new Chart(document.getElementById('payChart'), {
|
||||
type:'doughnut', data:{labels:payEntries.map(e=>e[0]),datasets:[{data:payEntries.map(e=>e[1]),backgroundColor:COLORS}]},
|
||||
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'right',labels:{color:'#64748b'}}}}
|
||||
});
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// GROWTH & CHANNELS
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function buildGrowth(fm){
|
||||
const chFiltered = filterArr(RAW.channelMonthly);
|
||||
// Aggregate channels
|
||||
const chAgg = {};
|
||||
chFiltered.forEach(r => {
|
||||
const k = r.ReferrerSource;
|
||||
if(!chAgg[k]) chAgg[k] = {orders:0,revenue:0,sumAOV:0,sumItems:0,newCust:0,freeship:0,disc:0};
|
||||
chAgg[k].orders += r.orders;
|
||||
chAgg[k].revenue += r.revenue;
|
||||
chAgg[k].sumAOV += r.avgAOV * r.orders;
|
||||
chAgg[k].sumItems += r.avgItems * r.orders;
|
||||
chAgg[k].newCust += r.newPct * r.orders;
|
||||
chAgg[k].freeship += r.freeShipPct * r.orders;
|
||||
chAgg[k].disc += r.discountPct * r.orders;
|
||||
});
|
||||
const channels = Object.entries(chAgg).map(([k,v])=>({
|
||||
name:k, orders:v.orders, revenue:v.revenue,
|
||||
avgAOV:v.orders?v.sumAOV/v.orders:0, avgItems:v.orders?v.sumItems/v.orders:0,
|
||||
newPct:v.orders?v.newCust/v.orders*100:0, freeShipPct:v.orders?v.freeship/v.orders*100:0,
|
||||
discountPct:v.orders?v.disc/v.orders*100:0
|
||||
})).sort((a,b)=>b.revenue-a.revenue);
|
||||
|
||||
let h='<thead><tr><th>Channel</th><th class="num">Orders</th><th class="num">Revenue</th><th class="num">AOV</th><th class="num">Items/Order</th><th class="num">% New</th><th class="num">% Discounted</th><th class="num">% Free Ship</th></tr></thead><tbody>';
|
||||
channels.forEach(c=>{
|
||||
h+=`<tr><td><strong>${c.name}</strong></td><td class="num">${fmt(c.orders)}</td><td class="num">${gbp(c.revenue)}</td><td class="num">${gbp(c.avgAOV)}</td><td class="num">${fmt(c.avgItems,1)}</td><td class="num">${pct(c.newPct)}</td><td class="num">${pct(c.discountPct)}</td><td class="num">${pct(c.freeShipPct)}</td></tr>`;
|
||||
});
|
||||
document.getElementById('channelTable').innerHTML=h+'</tbody>';
|
||||
|
||||
// Channel trend (top 4)
|
||||
const top4 = channels.slice(0,4).map(c=>c.name);
|
||||
const cmByChannel = {};
|
||||
top4.forEach(ch=>{cmByChannel[ch]={}});
|
||||
chFiltered.forEach(r=>{if(cmByChannel[r.ReferrerSource]) cmByChannel[r.ReferrerSource][r.YearMonth]=r.revenue});
|
||||
const cmLabels = [...new Set(chFiltered.map(r=>r.YearMonth))].sort();
|
||||
|
||||
destroyChart('channelTrendChart');
|
||||
charts['channelTrendChart'] = new Chart(document.getElementById('channelTrendChart'),{
|
||||
type:'line',data:{labels:cmLabels,datasets:top4.map((ch,i)=>({
|
||||
label:ch,data:cmLabels.map(l=>cmByChannel[ch][l]||0),borderColor:COLORS[i],tension:.3,pointRadius:0
|
||||
}))},options:{...cDef,scales:{...cDef.scales,y:{...cDef.scales.y,ticks:{callback:v=>'\u00a3'+fmt(v/1000)+'k'}}}}
|
||||
});
|
||||
|
||||
destroyChart('channelMixChart');
|
||||
charts['channelMixChart'] = new Chart(document.getElementById('channelMixChart'),{
|
||||
type:'bar',data:{labels:cmLabels,datasets:top4.map((ch,i)=>({
|
||||
label:ch,data:cmLabels.map(l=>cmByChannel[ch][l]||0),backgroundColor:COLORS[i]+'aa'
|
||||
}))},options:{...cDef,scales:{...cDef.scales,x:{...cDef.scales.x,stacked:true},y:{...cDef.scales.y,stacked:true,ticks:{callback:v=>'\u00a3'+fmt(v/1000)+'k'}}}}
|
||||
});
|
||||
|
||||
// Discount compare
|
||||
const discFiltered = filterArr(RAW.discountMonthly);
|
||||
const discAgg = {0:{count:0,sumAOV:0,sumItems:0,sumMargin:0,sumShip:0,rev:0},1:{count:0,sumAOV:0,sumItems:0,sumMargin:0,sumShip:0,rev:0}};
|
||||
discFiltered.forEach(r=>{
|
||||
const k = r.HasDiscount;
|
||||
discAgg[k].count += r.count;
|
||||
discAgg[k].sumAOV += r.avgAOV * r.count;
|
||||
discAgg[k].sumItems += r.avgItems * r.count;
|
||||
discAgg[k].sumMargin += r.avgMargin * r.count;
|
||||
discAgg[k].sumShip += r.avgShipping * r.count;
|
||||
discAgg[k].rev += r.revenue;
|
||||
});
|
||||
let dh='<thead><tr><th>Segment</th><th class="num">Orders</th><th class="num">Avg AOV</th><th class="num">Avg Items</th><th class="num">Avg Margin %</th><th class="num">Avg Shipping</th></tr></thead><tbody>';
|
||||
[0,1].forEach(k=>{
|
||||
const d = discAgg[k];
|
||||
const n = d.count||1;
|
||||
dh+=`<tr><td>${k?'With Discount Code':'No Discount'}</td><td class="num">${fmt(d.count)}</td><td class="num">${gbp(d.sumAOV/n)}</td><td class="num">${fmt(d.sumItems/n,1)}</td><td class="num ${mc(d.sumMargin/n)}">${pct(d.sumMargin/n)}</td><td class="num">${gbp(d.sumShip/n)}</td></tr>`;
|
||||
});
|
||||
document.getElementById('discountCompare').innerHTML=dh+'</tbody>';
|
||||
|
||||
// Top discount codes
|
||||
const dcFiltered = filterArr(RAW.discountCodesMonthly);
|
||||
const dcAgg = {};
|
||||
dcFiltered.forEach(r=>{
|
||||
if(!dcAgg[r.DiscountCode]) dcAgg[r.DiscountCode]={uses:0,revenue:0,sumAOV:0,sumDiscPct:0};
|
||||
dcAgg[r.DiscountCode].uses += r.uses;
|
||||
dcAgg[r.DiscountCode].revenue += r.revenue;
|
||||
dcAgg[r.DiscountCode].sumAOV += r.avgAOV * r.uses;
|
||||
dcAgg[r.DiscountCode].sumDiscPct += (r.avgDiscountPct||0) * r.uses;
|
||||
});
|
||||
const dcSorted = Object.entries(dcAgg).map(([k,v])=>({code:k,...v,avgAOV:v.sumAOV/(v.uses||1),avgDiscPct:v.sumDiscPct/(v.uses||1)})).sort((a,b)=>b.uses-a.uses).slice(0,20);
|
||||
let ch2='<thead><tr><th>Code</th><th class="num">Uses</th><th class="num">Revenue</th><th class="num">AOV</th><th class="num">Avg Disc %</th></tr></thead><tbody>';
|
||||
dcSorted.forEach(c=>{
|
||||
ch2+=`<tr><td><code>${c.code}</code></td><td class="num">${fmt(c.uses)}</td><td class="num">${gbp(c.revenue)}</td><td class="num">${gbp(c.avgAOV)}</td><td class="num">${pct(c.avgDiscPct)}</td></tr>`;
|
||||
});
|
||||
document.getElementById('discountTable').innerHTML=ch2+'</tbody>';
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// PRODUCTS
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function buildProducts(){
|
||||
// Categories
|
||||
const catFiltered = filterArr(RAW.categoryMonthly);
|
||||
const catAgg = {};
|
||||
catFiltered.forEach(r=>{
|
||||
if(!catAgg[r.Category]) catAgg[r.Category]={totalRevenue:0,totalRevenueExVAT:0,totalCost:0,totalQty:0,orderCount:0,uniqueProducts:0};
|
||||
catAgg[r.Category].totalRevenue += r.totalRevenue;
|
||||
catAgg[r.Category].totalRevenueExVAT += r.totalRevenueExVAT;
|
||||
catAgg[r.Category].totalCost += r.totalCost;
|
||||
catAgg[r.Category].totalQty += r.totalQty;
|
||||
catAgg[r.Category].orderCount += r.orderCount;
|
||||
catAgg[r.Category].uniqueProducts = Math.max(catAgg[r.Category].uniqueProducts, r.uniqueProducts||0);
|
||||
});
|
||||
const cats = Object.entries(catAgg).map(([k,v])=>{
|
||||
const margin = v.totalRevenueExVAT - v.totalCost;
|
||||
const marginPct = v.totalRevenueExVAT > 0 ? margin / v.totalRevenueExVAT * 100 : 0;
|
||||
return {name:k,...v,margin,marginPct};
|
||||
}).sort((a,b)=>b.totalRevenue-a.totalRevenue);
|
||||
|
||||
let h='<thead><tr><th>Category</th><th class="num">Revenue</th><th class="num">Units</th><th class="num">Orders</th><th class="num">COGS</th><th class="num">Margin</th><th class="num">Margin %</th></tr></thead><tbody>';
|
||||
cats.forEach(c=>{
|
||||
h+=`<tr><td><strong>${c.name}</strong></td><td class="num">${gbp(c.totalRevenue)}</td><td class="num">${fmt(c.totalQty)}</td><td class="num">${fmt(c.orderCount)}</td><td class="num">${gbp(c.totalCost)}</td><td class="num">${gbp(c.margin)}</td><td class="num ${mc(c.marginPct)}">${pct(c.marginPct)}</td></tr>`;
|
||||
});
|
||||
document.getElementById('catTable').innerHTML=h+'</tbody>';
|
||||
|
||||
// Category charts
|
||||
const top10 = cats.slice(0,10);
|
||||
destroyChart('catChart');
|
||||
charts['catChart'] = new Chart(document.getElementById('catChart'),{
|
||||
type:'bar',data:{labels:top10.map(c=>c.name),datasets:[{data:top10.map(c=>c.totalRevenue),backgroundColor:COLORS.map(c=>c+'cc')}]},
|
||||
options:{...cDef,indexAxis:'y',plugins:{legend:{display:false}},scales:{...cDef.scales,x:{...cDef.scales.x,ticks:{callback:v=>'\u00a3'+fmt(v/1000)+'k'}}}}
|
||||
});
|
||||
destroyChart('catMarginChart');
|
||||
charts['catMarginChart'] = new Chart(document.getElementById('catMarginChart'),{
|
||||
type:'bar',data:{labels:top10.map(c=>c.name),datasets:[{data:top10.map(c=>c.marginPct),backgroundColor:top10.map(c=>c.marginPct>=60?'#10b981cc':c.marginPct>=40?'#f59e0bcc':'#ef4444cc')}]},
|
||||
options:{...cDef,indexAxis:'y',plugins:{legend:{display:false}},scales:{...cDef.scales,x:{...cDef.scales.x,max:100,ticks:{callback:v=>v+'%'}}}}
|
||||
});
|
||||
|
||||
// Products
|
||||
const prodFiltered = filterArr(RAW.productMonthly);
|
||||
const prodAgg = {};
|
||||
prodFiltered.forEach(r=>{
|
||||
const k = r.Description+'|||'+r.SKUDescription;
|
||||
if(!prodAgg[k]) prodAgg[k]={desc:r.Description,sku:r.SKUDescription,cat:r.Category,totalRevenue:0,totalRevenueExVAT:0,totalCost:0,totalQty:0,orderCount:0};
|
||||
prodAgg[k].totalRevenue += r.totalRevenue;
|
||||
prodAgg[k].totalRevenueExVAT += r.totalRevenueExVAT;
|
||||
prodAgg[k].totalCost += r.totalCost;
|
||||
prodAgg[k].totalQty += r.totalQty;
|
||||
prodAgg[k].orderCount += r.orderCount;
|
||||
});
|
||||
const prods = Object.values(prodAgg).map(v=>{
|
||||
const margin = v.totalRevenueExVAT - v.totalCost;
|
||||
const marginPct = v.totalRevenueExVAT > 0 ? margin / v.totalRevenueExVAT * 100 : 0;
|
||||
return {...v,margin,marginPct};
|
||||
}).sort((a,b)=>b.totalRevenue-a.totalRevenue).slice(0,50);
|
||||
|
||||
let ph='<thead><tr><th>#</th><th>Product</th><th>Variant</th><th>Category</th><th class="num">Revenue</th><th class="num">Units</th><th class="num">Orders</th><th class="num">COGS</th><th class="num">Margin %</th></tr></thead><tbody>';
|
||||
prods.forEach((p,i)=>{
|
||||
ph+=`<tr><td>${i+1}</td><td>${p.desc}</td><td>${p.sku}</td><td><span class="badge badge-green">${p.cat}</span></td><td class="num">${gbp(p.totalRevenue)}</td><td class="num">${fmt(p.totalQty)}</td><td class="num">${fmt(p.orderCount)}</td><td class="num">${gbp(p.totalCost)}</td><td class="num ${mc(p.marginPct)}">${pct(p.marginPct)}</td></tr>`;
|
||||
});
|
||||
document.getElementById('prodTable').innerHTML=ph+'</tbody>';
|
||||
|
||||
// Cross-sell (static — not filterable by date)
|
||||
let cs='<thead><tr><th>#</th><th>Product A</th><th>Product B</th><th class="num">Times Bought Together</th></tr></thead><tbody>';
|
||||
(RAW.crossSell||[]).forEach((p,i)=>{
|
||||
cs+=`<tr><td>${i+1}</td><td>${p.product1}</td><td>${p.product2}</td><td class="num">${fmt(p.count)}</td></tr>`;
|
||||
});
|
||||
document.getElementById('crossSellTable').innerHTML=cs+'</tbody>';
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// SHIPPING
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function buildShipping(fm){
|
||||
// Shipping comparison
|
||||
const scFiltered = filterArr(RAW.shippingCompMonthly);
|
||||
const scAgg = {0:{count:0,sumAOV:0,sumItems:0,sumMargin:0,sumNew:0,sumDisc:0,sumShip:0},
|
||||
1:{count:0,sumAOV:0,sumItems:0,sumMargin:0,sumNew:0,sumDisc:0,sumShip:0}};
|
||||
scFiltered.forEach(r=>{
|
||||
const k = r.IsFreeShipping;
|
||||
scAgg[k].count += r.count;
|
||||
scAgg[k].sumAOV += r.avgAOV * r.count;
|
||||
scAgg[k].sumItems += r.avgItems * r.count;
|
||||
scAgg[k].sumMargin += r.avgMargin * r.count;
|
||||
scAgg[k].sumNew += r.newPct * r.count;
|
||||
scAgg[k].sumDisc += r.discountPct * r.count;
|
||||
scAgg[k].sumShip += r.avgShipping * r.count;
|
||||
});
|
||||
const free = scAgg[1], paid = scAgg[0];
|
||||
const fn = free.count||1, pn = paid.count||1;
|
||||
|
||||
const totalShipRev = fm.reduce((s,r)=>s+(r.totalShipping||0),0);
|
||||
const totalOrders = fm.reduce((s,r)=>s+r.orders,0);
|
||||
const freeShipPct = free.count / (totalOrders||1) * 100;
|
||||
|
||||
// KPIs
|
||||
const shipKpis = [
|
||||
{l:'Total Shipping Revenue',v:gbp(totalShipRev),s:`${fmt(paid.count)} paid orders`,c:''},
|
||||
{l:'Free Shipping Rate',v:pct(freeShipPct),s:`${fmt(free.count)} free orders`,c:'green'},
|
||||
{l:'Avg Shipping (Paid)',v:gbp(paid.sumShip/pn),s:'Per paid-shipping order',c:'yellow'},
|
||||
{l:'Avg Shipping (All)',v:gbp(totalShipRev/(totalOrders||1)),s:'Across all orders',c:''},
|
||||
];
|
||||
document.getElementById('shipKpis').innerHTML = shipKpis.map(k =>
|
||||
`<div class="kpi"><div class="kpi-label">${k.l}</div><div class="kpi-value ${k.c}">${k.v}</div><div class="kpi-sub">${k.s}</div></div>`
|
||||
).join('');
|
||||
|
||||
// Insights
|
||||
document.getElementById('shipInsights').innerHTML = `
|
||||
<div class="insight"><strong>Current state:</strong> ${pct(freeShipPct)} of orders ship free. Total shipping revenue: ${gbp(totalShipRev)}.</div>
|
||||
<div class="insight ${free.sumAOV/fn < paid.sumAOV/pn ? 'warn' : ''}"><strong>AOV comparison:</strong> Free-shipping orders avg ${gbp(free.sumAOV/fn)} vs paid shipping ${gbp(paid.sumAOV/pn)}. ${free.sumAOV/fn < paid.sumAOV/pn ? 'Free shipping orders have lower AOV.' : 'Free shipping orders have higher AOV.'}</div>
|
||||
<div class="insight good"><strong>Margin comparison:</strong> Free-shipping margin ${pct(free.sumMargin/fn)} vs paid ${pct(paid.sumMargin/pn)}.</div>
|
||||
`;
|
||||
|
||||
// Comparison
|
||||
document.getElementById('shipCompare').innerHTML = `
|
||||
<div class="compare-col">
|
||||
<div class="compare-title green">🆓 Free Shipping</div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">Orders</div><div class="compare-stat-value">${fmt(free.count)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">AOV (Mean)</div><div class="compare-stat-value">${gbp(free.sumAOV/fn)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">Items / Order</div><div class="compare-stat-value">${fmt(free.sumItems/fn,1)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">Gross Margin</div><div class="compare-stat-value green">${pct(free.sumMargin/fn)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">% New Customers</div><div class="compare-stat-value">${pct(free.sumNew/fn)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">% Discounted</div><div class="compare-stat-value">${pct(free.sumDisc/fn)}</div></div>
|
||||
</div>
|
||||
<div class="compare-col">
|
||||
<div class="compare-title yellow">📦 Paid Shipping</div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">Orders</div><div class="compare-stat-value">${fmt(paid.count)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">AOV (Mean)</div><div class="compare-stat-value">${gbp(paid.sumAOV/pn)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">Items / Order</div><div class="compare-stat-value">${fmt(paid.sumItems/pn,1)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">Gross Margin</div><div class="compare-stat-value yellow">${pct(paid.sumMargin/pn)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">% New Customers</div><div class="compare-stat-value">${pct(paid.sumNew/pn)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">% Discounted</div><div class="compare-stat-value">${pct(paid.sumDisc/pn)}</div></div>
|
||||
<div class="compare-stat"><div class="compare-stat-label">Avg Shipping Paid</div><div class="compare-stat-value red">${gbp(paid.sumShip/pn)}</div></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// AOV Distribution
|
||||
const aovFiltered = filterArr(RAW.aovMonthly);
|
||||
const aovAgg = {};
|
||||
aovFiltered.forEach(r=>{
|
||||
if(!aovAgg[r.AOVBucket]) aovAgg[r.AOVBucket]={count:0,revenue:0,sumShip:0,sumFree:0};
|
||||
aovAgg[r.AOVBucket].count += r.count;
|
||||
aovAgg[r.AOVBucket].revenue += r.revenue;
|
||||
aovAgg[r.AOVBucket].sumShip += r.avgShipping * r.count;
|
||||
aovAgg[r.AOVBucket].sumFree += r.pctFreeShip * r.count;
|
||||
});
|
||||
const bucketOrder = ['<5','5-10','10-15','15-20','20-25','25-30','30-35','35-40','40-50','50-60','60-75','75-100','100-150','150-200','200-500','500+'];
|
||||
const aovBuckets = bucketOrder.filter(b=>aovAgg[b]&&aovAgg[b].count>0).map(b=>({
|
||||
bucket:b,...aovAgg[b],
|
||||
avgShipping:aovAgg[b].sumShip/(aovAgg[b].count||1),
|
||||
pctFreeShip:aovAgg[b].sumFree/(aovAgg[b].count||1)
|
||||
}));
|
||||
|
||||
destroyChart('aovDistChart');
|
||||
charts['aovDistChart'] = new Chart(document.getElementById('aovDistChart'),{
|
||||
type:'bar',data:{labels:aovBuckets.map(a=>'£'+a.bucket),datasets:[{label:'Orders',data:aovBuckets.map(a=>a.count),backgroundColor:aovBuckets.map(a=>{const v=parseFloat(a.bucket);return v>=25&&v<40?'#6366f1cc':'#334155cc'})}]},
|
||||
options:{...cDef,plugins:{legend:{display:false}}}
|
||||
});
|
||||
|
||||
const aovSig = aovBuckets.filter(a=>a.count>100);
|
||||
destroyChart('shipByAovChart');
|
||||
charts['shipByAovChart'] = new Chart(document.getElementById('shipByAovChart'),{
|
||||
type:'bar',data:{labels:aovSig.map(a=>'£'+a.bucket),datasets:[
|
||||
{label:'Avg Shipping £',data:aovSig.map(a=>a.avgShipping),backgroundColor:'#ef4444aa',yAxisID:'y'},
|
||||
{label:'% Free Shipping',data:aovSig.map(a=>a.pctFreeShip*100),backgroundColor:'#10b981aa',yAxisID:'y1'}
|
||||
]},options:{...cDef,scales:{...cDef.scales,y:{...cDef.scales.y,position:'left',ticks:{callback:v=>'£'+v}},y1:{grid:{display:false},ticks:{color:'#10b981',callback:v=>v+'%'},position:'right',max:100}}}
|
||||
});
|
||||
|
||||
// Threshold analysis
|
||||
const thFiltered = filterArr(RAW.thresholdMonthly);
|
||||
const thAgg = {totalOrders:0, totalShipRev:0};
|
||||
[15,20,25,30,35,40,50].forEach(t=>{thAgg['t'+t]={eligible:0,shipAbsorbed:0,near:0,sumNearGap:0}});
|
||||
thFiltered.forEach(r=>{
|
||||
thAgg.totalOrders += r.totalOrders;
|
||||
thAgg.totalShipRev += r.totalShippingRev;
|
||||
[15,20,25,30,35,40,50].forEach(t=>{
|
||||
thAgg['t'+t].eligible += r['t'+t+'_eligible']||0;
|
||||
thAgg['t'+t].shipAbsorbed += r['t'+t+'_shipAbsorbed']||0;
|
||||
thAgg['t'+t].near += r['t'+t+'_near']||0;
|
||||
thAgg['t'+t].sumNearGap += (r['t'+t+'_nearGap']||0) * (r['t'+t+'_near']||0);
|
||||
});
|
||||
});
|
||||
let th='<thead><tr><th>Scenario</th><th class="num">Orders Qualifying</th><th class="num">% of Total</th><th class="num">Shipping Cost Absorbed</th><th class="num">Remaining Ship Rev</th><th class="num">Near-Threshold Orders</th><th class="num">Avg Gap to Qualify</th></tr></thead><tbody>';
|
||||
th+=`<tr><td><strong>🟢 Current</strong></td><td class="num">${fmt(free.count)}</td><td class="num">${pct(freeShipPct)}</td><td class="num">-</td><td class="num">${gbp(thAgg.totalShipRev)}</td><td class="num">-</td><td class="num">-</td></tr>`;
|
||||
[15,20,25,30,35,40,50].forEach(t=>{
|
||||
const d = thAgg['t'+t];
|
||||
const hl = [25,30,35].includes(t) ? 'class="highlight-row"' : '';
|
||||
th+=`<tr ${hl}><td><strong>🟡 Free ship ≥£${t}</strong></td><td class="num">${fmt(d.eligible)}</td><td class="num">${pct(d.eligible/(thAgg.totalOrders||1)*100)}</td><td class="num red">${gbp(d.shipAbsorbed)}</td><td class="num">${gbp(thAgg.totalShipRev - d.shipAbsorbed)}</td><td class="num cyan">${fmt(d.near)}</td><td class="num">${d.near>0?gbp(d.sumNearGap/d.near):'-'}</td></tr>`;
|
||||
});
|
||||
document.getElementById('thresholdTable').innerHTML=th+'</tbody>';
|
||||
|
||||
// Shipping trend
|
||||
destroyChart('shipTrendChart');
|
||||
charts['shipTrendChart'] = new Chart(document.getElementById('shipTrendChart'),{
|
||||
type:'line',data:{labels:fm.map(r=>r.YearMonth),datasets:[
|
||||
{label:'% Free Shipping',data:fm.map(r=>r.freeShipPct*100),borderColor:'#10b981',tension:.3,pointRadius:0},
|
||||
{label:'Avg Shipping/Order',data:fm.map(r=>r.avgShipping),borderColor:'#ef4444',tension:.3,pointRadius:0,yAxisID:'y1'}
|
||||
]},options:{...cDef,scales:{...cDef.scales,y:{...cDef.scales.y,ticks:{callback:v=>v+'%'}},y1:{grid:{display:false},ticks:{color:'#ef4444',callback:v=>'£'+v},position:'right'}}}
|
||||
});
|
||||
|
||||
// Shipping by channel
|
||||
destroyChart('shipChannelChart');
|
||||
const chFiltered2 = filterArr(RAW.channelMonthly);
|
||||
const chShipAgg = {};
|
||||
chFiltered2.forEach(r=>{
|
||||
if(!chShipAgg[r.ReferrerSource]) chShipAgg[r.ReferrerSource]={orders:0,freeOrders:0};
|
||||
chShipAgg[r.ReferrerSource].orders += r.orders;
|
||||
chShipAgg[r.ReferrerSource].freeOrders += r.freeShipPct * r.orders;
|
||||
});
|
||||
const chShip = Object.entries(chShipAgg).filter(([k,v])=>v.orders>500).map(([k,v])=>({name:k,pct:v.freeOrders/v.orders*100})).sort((a,b)=>b.pct-a.pct);
|
||||
charts['shipChannelChart'] = new Chart(document.getElementById('shipChannelChart'),{
|
||||
type:'bar',data:{labels:chShip.map(c=>c.name),datasets:[{label:'% Free Shipping',data:chShip.map(c=>c.pct),backgroundColor:COLORS.map(c=>c+'cc')}]},
|
||||
options:{...cDef,plugins:{legend:{display:false}},scales:{...cDef.scales,y:{...cDef.scales.y,max:100,ticks:{callback:v=>v+'%'}}}}
|
||||
});
|
||||
|
||||
// Delivery methods
|
||||
const delFiltered = filterArr(RAW.deliveryMonthly);
|
||||
const delAgg = {};
|
||||
delFiltered.forEach(r=>{
|
||||
if(!delAgg[r.DeliveryMethod]) delAgg[r.DeliveryMethod]={orders:0,revenue:0,sumShip:0,sumAOV:0};
|
||||
delAgg[r.DeliveryMethod].orders += r.orders;
|
||||
delAgg[r.DeliveryMethod].revenue += r.revenue;
|
||||
delAgg[r.DeliveryMethod].sumShip += r.avgShipping * r.orders;
|
||||
delAgg[r.DeliveryMethod].sumAOV += r.avgAOV * r.orders;
|
||||
});
|
||||
const dels = Object.entries(delAgg).map(([k,v])=>({name:k,...v,avgShipping:v.sumShip/(v.orders||1),avgAOV:v.sumAOV/(v.orders||1)})).sort((a,b)=>b.orders-a.orders);
|
||||
let dh='<thead><tr><th>Delivery Method</th><th class="num">Orders</th><th class="num">Revenue</th><th class="num">Avg Shipping</th><th class="num">Avg AOV</th></tr></thead><tbody>';
|
||||
dels.forEach(d=>{
|
||||
const isFree = d.name.toLowerCase().includes('free');
|
||||
dh+=`<tr><td>${isFree?'🆓 ':'📦 '}${d.name}</td><td class="num">${fmt(d.orders)}</td><td class="num">${gbp(d.revenue)}</td><td class="num">${gbp(d.avgShipping)}</td><td class="num">${gbp(d.avgAOV)}</td></tr>`;
|
||||
});
|
||||
document.getElementById('deliveryTable').innerHTML=dh+'</tbody>';
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// CUSTOMERS
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function buildCustomers(fm){
|
||||
// Customer segments (approximate from filter)
|
||||
const nrFiltered = filterArr(RAW.newReturningMonthly);
|
||||
const newOrders = nrFiltered.filter(r=>r.IsNewCustomer===1).reduce((s,r)=>s+r.orders,0);
|
||||
const retOrders = nrFiltered.filter(r=>r.IsNewCustomer===0).reduce((s,r)=>s+r.orders,0);
|
||||
|
||||
destroyChart('custSegChart');
|
||||
charts['custSegChart'] = new Chart(document.getElementById('custSegChart'),{
|
||||
type:'doughnut',data:{labels:['New Customer Orders','Returning Customer Orders'],
|
||||
datasets:[{data:[newOrders,retOrders],backgroundColor:['#64748b','#6366f1']}]},
|
||||
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{color:'#64748b'}}}}
|
||||
});
|
||||
|
||||
// Countries
|
||||
destroyChart('countryChart');
|
||||
const cFiltered = filterArr(RAW.countryMonthly);
|
||||
const countryAgg = {};
|
||||
cFiltered.forEach(r=>{
|
||||
if(!countryAgg[r.CustomerCountry]) countryAgg[r.CustomerCountry]={orders:0,revenue:0};
|
||||
countryAgg[r.CustomerCountry].orders += r.orders;
|
||||
countryAgg[r.CustomerCountry].revenue += r.revenue;
|
||||
});
|
||||
const countries = Object.entries(countryAgg).map(([k,v])=>({name:k,...v})).sort((a,b)=>b.orders-a.orders).slice(0,10);
|
||||
charts['countryChart'] = new Chart(document.getElementById('countryChart'),{
|
||||
type:'bar',data:{labels:countries.map(c=>c.name),datasets:[{data:countries.map(c=>c.orders),backgroundColor:COLORS.map(c=>c+'cc')}]},
|
||||
options:{...cDef,indexAxis:'y',plugins:{legend:{display:false}}}
|
||||
});
|
||||
|
||||
// Cohort retention
|
||||
const cohorts = (RAW.cohortRetention||[]).filter(c=>{
|
||||
if(c.size < 100) return false;
|
||||
// Filter cohorts within date range if applicable
|
||||
if(FSTART && c.cohort < FSTART) return false;
|
||||
if(FEND && c.cohort > FEND) return false;
|
||||
return true;
|
||||
});
|
||||
let ch='<thead><tr><th>Cohort</th><th class="num">Size</th>';
|
||||
for(let i=0;i<=12;i++) ch+=`<th class="num">M${i}</th>`;
|
||||
ch+='</tr></thead><tbody>';
|
||||
cohorts.forEach(c=>{
|
||||
ch+=`<tr><td>${c.cohort}</td><td class="num">${fmt(c.size)}</td>`;
|
||||
for(let i=0;i<=12;i++){
|
||||
const v = c['m'+i];
|
||||
if(v==null){ch+='<td class="num" style="color:#334155">-</td>';continue;}
|
||||
const bg = v>50?'rgba(16,185,129,.3)':v>20?'rgba(16,185,129,.15)':v>10?'rgba(16,185,129,.07)':'transparent';
|
||||
ch+=`<td class="num" style="background:${bg}">${pct(v)}</td>`;
|
||||
}
|
||||
ch+='</tr>';
|
||||
});
|
||||
document.getElementById('cohortTable').innerHTML=ch+'</tbody>';
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// LOAD DATA
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async function loadData(){
|
||||
try {
|
||||
const res = await fetch('jv_data.json');
|
||||
if(!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||||
RAW = await res.json();
|
||||
|
||||
// Sort monthly data
|
||||
RAW.monthly.sort((a,b) => a.YearMonth.localeCompare(b.YearMonth));
|
||||
|
||||
// Set date picker min/max
|
||||
const allMonths = RAW.monthly.map(r=>r.YearMonth);
|
||||
document.getElementById('startDate').min = allMonths[0];
|
||||
document.getElementById('startDate').max = allMonths[allMonths.length-1];
|
||||
document.getElementById('endDate').min = allMonths[0];
|
||||
document.getElementById('endDate').max = allMonths[allMonths.length-1];
|
||||
|
||||
document.getElementById('loadingMsg').style.display = 'none';
|
||||
document.getElementById('mainContent').style.display = 'block';
|
||||
document.getElementById('presetAll').classList.add('active');
|
||||
|
||||
buildAll();
|
||||
} catch(err) {
|
||||
document.getElementById('loadingMsg').innerHTML = `
|
||||
<div style="color:var(--red);font-size:16px;margin-bottom:12px">⚠ Failed to load data</div>
|
||||
<div style="color:var(--muted);font-size:13px">${err.message}</div>
|
||||
<div style="color:var(--muted);font-size:12px;margin-top:12px">
|
||||
Make sure <code>jv_data.json</code> is in the same folder as this HTML file.<br>
|
||||
Run <code>python preprocess_jv_data.py</code> first to generate it.<br>
|
||||
Then serve via a local server: <code>python -m http.server 8000</code>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
static/dashboard/jv_data.json
Normal file
1
static/dashboard/jv_data.json
Normal file
File diff suppressed because one or more lines are too long
402
static/js/app.js
Normal file
402
static/js/app.js
Normal file
@@ -0,0 +1,402 @@
|
||||
/* JustVitamin × QuikCue — Live AI Demos */
|
||||
|
||||
const $ = s => document.querySelector(s);
|
||||
const esc = s => { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; };
|
||||
|
||||
function setStep(id, cls, text) {
|
||||
const el = $(id);
|
||||
if (!el) return;
|
||||
el.parentElement.className = `step ${cls}`;
|
||||
el.innerHTML = text;
|
||||
}
|
||||
|
||||
function setBtn(id, loading, text) {
|
||||
const btn = $(id);
|
||||
btn.disabled = loading;
|
||||
btn.classList.toggle('loading', loading);
|
||||
btn.textContent = text;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// DEMO A — One Product → 12 Assets + Images
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
let demoA_product = null;
|
||||
|
||||
async function runDemoA() {
|
||||
const url = $('#demoA-url').value.trim();
|
||||
if (!url) return;
|
||||
|
||||
setBtn('#demoA-btn', true, 'Working...');
|
||||
$('#demoA-output').classList.add('hidden');
|
||||
['#a-s1','#a-s2','#a-s3'].forEach(s => setStep(s, '', 'Waiting'));
|
||||
|
||||
// Step 1: Scrape
|
||||
setStep('#a-s1', 'active', '<span class="spinner"></span> Scraping...');
|
||||
try {
|
||||
const r = await fetch('/api/scrape', {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({url})
|
||||
});
|
||||
const product = await r.json();
|
||||
if (product.error) throw new Error(product.error);
|
||||
demoA_product = product;
|
||||
setStep('#a-s1', 'done', `✓ ${esc(product.title.substring(0,35))}...`);
|
||||
} catch(e) {
|
||||
setStep('#a-s1', 'error', `✗ ${esc(e.message)}`);
|
||||
setBtn('#demoA-btn', false, '🔴 Generate the Whole Pack');
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 2: AI pack + Step 3: Images (parallel)
|
||||
setStep('#a-s2', 'active', '<span class="spinner"></span> Gemini generating 12 assets...');
|
||||
setStep('#a-s3', 'active', '<span class="spinner"></span> Nano Banana generating images...');
|
||||
|
||||
const packP = fetch('/api/generate-pack', {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify(demoA_product)
|
||||
}).then(r => r.json());
|
||||
|
||||
const imgP = fetch('/api/generate-images', {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify(demoA_product)
|
||||
}).then(r => r.json());
|
||||
|
||||
// Handle pack
|
||||
try {
|
||||
const pack = await packP;
|
||||
if (pack.error) throw new Error(pack.error);
|
||||
setStep('#a-s2', 'done', `✓ 12 assets generated (${pack._generation_time})`);
|
||||
renderAssetPack(pack);
|
||||
$('#demoA-output').classList.remove('hidden');
|
||||
} catch(e) {
|
||||
setStep('#a-s2', 'error', `✗ ${esc(e.message)}`);
|
||||
}
|
||||
|
||||
// Handle images
|
||||
try {
|
||||
const imgs = await imgP;
|
||||
if (imgs.error) throw new Error(imgs.error);
|
||||
setStep('#a-s3', 'done', `✓ Images generated (${imgs._generation_time})`);
|
||||
renderImages(imgs);
|
||||
} catch(e) {
|
||||
setStep('#a-s3', 'error', `✗ ${esc(e.message)}`);
|
||||
}
|
||||
|
||||
setBtn('#demoA-btn', false, '✓ Done — Run Again');
|
||||
}
|
||||
|
||||
function renderAssetPack(pack) {
|
||||
const meta = $('#demoA-meta');
|
||||
meta.innerHTML = `
|
||||
<span class="chip">🧠 <strong>Model:</strong> Gemini 2.5 Flash</span>
|
||||
<span class="chip">⏱ <strong>Time:</strong> ${esc(pack._generation_time)}</span>
|
||||
<span class="chip">📦 <strong>Product:</strong> ${esc(pack._product_title)}</span>
|
||||
`;
|
||||
|
||||
const grid = $('#demoA-assets');
|
||||
let cards = '';
|
||||
let n = 0;
|
||||
|
||||
// Hero angles
|
||||
(pack.hero_angles || []).forEach((a, i) => {
|
||||
n++;
|
||||
cards += assetCard('hero', `Hero Angle`, n, `<strong>"${esc(a.headline)}"</strong><ul><li>Target: ${esc(a.target_desire)}</li><li>Best for: ${esc(a.best_for)}</li></ul>`, i*80);
|
||||
});
|
||||
|
||||
// PDP Copy
|
||||
if (pack.pdp_copy) {
|
||||
n++;
|
||||
const bullets = (pack.pdp_copy.bullets||[]).map(b => `<li>${esc(b)}</li>`).join('');
|
||||
cards += assetCard('pdp', 'PDP Copy', n, `<strong>${esc(pack.pdp_copy.headline)}</strong><ul>${bullets}</ul>`, n*80);
|
||||
n++;
|
||||
const faqs = (pack.pdp_copy.faq||[]).map(f => `<strong>Q: ${esc(f.q)}</strong><br>A: ${esc(f.a)}<br><br>`).join('');
|
||||
cards += assetCard('pdp', 'FAQ Block', n, faqs, n*80);
|
||||
}
|
||||
|
||||
// Ad hooks
|
||||
if (pack.ad_hooks) {
|
||||
n++;
|
||||
const hooks = pack.ad_hooks.map(h => `<li><strong>${esc(h)}</strong></li>`).join('');
|
||||
cards += assetCard('ad', '5 Ad Hooks', n, `<ul>${hooks}</ul>`, n*80);
|
||||
}
|
||||
|
||||
// Email subjects
|
||||
if (pack.email_subjects) {
|
||||
n++;
|
||||
const emails = pack.email_subjects.map(e => `<strong>${esc(e.subject)}</strong><br><em style="color:var(--muted)">${esc(e.preview)}</em><br><br>`).join('');
|
||||
cards += assetCard('email', 'Email Subjects', n, emails, n*80);
|
||||
}
|
||||
|
||||
// TikTok
|
||||
if (pack.tiktok_script) {
|
||||
n++;
|
||||
const t = pack.tiktok_script;
|
||||
cards += assetCard('video', 'TikTok Script', n, `
|
||||
<strong>${esc(t.title)}</strong><br><br>
|
||||
<em>[0-3s]</em> ${esc(t.hook_0_3s)}<br>
|
||||
<em>[3-12s]</em> ${esc(t.body_3_12s)}<br>
|
||||
<em>[12-15s]</em> ${esc(t.cta_12_15s)}<br><br>
|
||||
<span class="ann">${esc(t.why_it_works)}</span>
|
||||
`, n*80);
|
||||
}
|
||||
|
||||
// Blog
|
||||
if (pack.blog_outline) {
|
||||
n++;
|
||||
const b = pack.blog_outline;
|
||||
const secs = (b.sections||[]).map(s => `<li>${esc(s)}</li>`).join('');
|
||||
cards += assetCard('blog', 'Blog Outline', n, `
|
||||
<strong>${esc(b.title)}</strong><ul>${secs}</ul>
|
||||
<span class="ann">SEO: "${esc(b.seo_keyword)}" — ${esc(b.monthly_searches)} mo/searches</span>
|
||||
`, n*80);
|
||||
}
|
||||
|
||||
// Meta SEO
|
||||
if (pack.meta_seo) {
|
||||
n++;
|
||||
const m = pack.meta_seo;
|
||||
cards += assetCard('seo', 'Meta SEO', n, `
|
||||
<strong>Title:</strong> ${esc(m.title)}<br><br>
|
||||
<strong>Description:</strong> ${esc(m.description)}<br><br>
|
||||
<span class="ann">${m.title_chars || '?'} chars title / ${m.desc_chars || '?'} chars desc</span>
|
||||
`, n*80);
|
||||
}
|
||||
|
||||
// Alt text
|
||||
if (pack.alt_text) {
|
||||
n++;
|
||||
const alts = pack.alt_text.map(a => `<strong>${esc(a.image_type)}:</strong><br>Alt: ${esc(a.alt)}<br>File: <code style="color:var(--accent);font-size:.78rem">${esc(a.filename)}</code><br><br>`).join('');
|
||||
cards += assetCard('a11y', 'Alt Text + Filenames', n, alts, n*80);
|
||||
}
|
||||
|
||||
// A/B Variants
|
||||
if (pack.ab_variants) {
|
||||
n++;
|
||||
const vars = pack.ab_variants.map(v => `<strong>${esc(v.label)}:</strong> ${esc(v.copy)}<br><br>`).join('');
|
||||
cards += assetCard('ad', 'A/B Variants', n, vars + '<span class="ann">Test all — let data pick the winner</span>', n*80);
|
||||
}
|
||||
|
||||
grid.innerHTML = cards;
|
||||
}
|
||||
|
||||
function assetCard(type, label, num, content, delay) {
|
||||
return `<div class="asset-card" style="animation-delay:${delay}ms">
|
||||
<div class="asset-card-head"><span class="asset-type ${type}">${label}</span><span class="asset-num">#${num}</span></div>
|
||||
<div class="asset-body">${content}</div></div>`;
|
||||
}
|
||||
|
||||
function renderImages(imgs) {
|
||||
const grid = $('#demoA-img-grid');
|
||||
const section = $('#demoA-images');
|
||||
let html = '';
|
||||
const styles = [
|
||||
{key:'hero', label:'Hero Banner', desc:'Nano Banana Pro', wide:true},
|
||||
{key:'lifestyle', label:'Lifestyle Shot', desc:'Nano Banana'},
|
||||
{key:'benefits', label:'Benefits Visual', desc:'Nano Banana Pro'},
|
||||
];
|
||||
styles.forEach(s => {
|
||||
const data = imgs[s.key];
|
||||
if (data && data.filename) {
|
||||
html += `<div class="img-card ${s.wide?'wide':''}">
|
||||
<img src="/generated/${data.filename}" alt="${s.label}" loading="lazy">
|
||||
<div class="caption"><strong>${s.label}</strong> — ${s.desc} · ${data.model||''}</div></div>`;
|
||||
}
|
||||
});
|
||||
if (html) {
|
||||
grid.innerHTML = html;
|
||||
section.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// DEMO B — Competitor X-Ray
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
async function runDemoB() {
|
||||
const url = $('#demoB-url').value.trim();
|
||||
if (!url) return;
|
||||
|
||||
setBtn('#demoB-btn', true, 'Scanning...');
|
||||
$('#demoB-output').classList.add('hidden');
|
||||
setStep('#b-s1', 'active', '<span class="spinner"></span> Scraping competitor...');
|
||||
setStep('#b-s2', '', 'Waiting');
|
||||
|
||||
try {
|
||||
const r = await fetch('/api/competitor-xray', {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({url})
|
||||
});
|
||||
const data = await r.json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
|
||||
setStep('#b-s1', 'done', `✓ Scraped: ${esc((data._scrape_data?.title||'').substring(0,30))}...`);
|
||||
setStep('#b-s2', 'done', `✓ Analysis complete (${data._generation_time})`);
|
||||
|
||||
renderXray(data);
|
||||
$('#demoB-output').classList.remove('hidden');
|
||||
setBtn('#demoB-btn', false, '✓ Done — Try Another');
|
||||
} catch(e) {
|
||||
setStep('#b-s1', 'error', `✗ ${esc(e.message)}`);
|
||||
setBtn('#demoB-btn', false, '🔍 X-Ray This Competitor');
|
||||
}
|
||||
}
|
||||
|
||||
function renderXray(data) {
|
||||
// Left — competitor analysis
|
||||
const tactics = (data.top_5_tactics||[]).map(t =>
|
||||
`<li><strong>${esc(t.tactic)}</strong> — ${esc(t.explanation)}</li>`
|
||||
).join('');
|
||||
|
||||
$('#demoB-left').innerHTML = `
|
||||
<span class="split-label bad">❌ ${esc(data.competitor_name || 'Competitor')}</span>
|
||||
<div class="xray-item"><div class="xray-label">What they're really selling</div>
|
||||
<div class="xray-val"><strong>${esc(data.what_theyre_selling)}</strong></div></div>
|
||||
<div class="xray-item"><div class="xray-label">Top 5 Persuasion Tactics</div>
|
||||
<ol class="xray-tactics">${tactics}</ol></div>
|
||||
<div class="xray-item"><div class="xray-label">Weakest Claim / Gap</div>
|
||||
<div class="xray-val gap">⚠️ ${esc(data.weakest_claim)}</div></div>
|
||||
`;
|
||||
|
||||
// Right — JV improved
|
||||
const hero = data.jv_hero_section || {};
|
||||
const diffs = (data.differentiators||[]).map(d =>
|
||||
`<li><span class="icon">🎯</span><span class="txt"><strong>${esc(d.point)}</strong> — ${esc(d.proof_idea)}</span></li>`
|
||||
).join('');
|
||||
const donts = (data.do_not_say||[]).map(d => `<li>${esc(d)}</li>`).join('');
|
||||
|
||||
$('#demoB-right').innerHTML = `
|
||||
<span class="split-label good">✓ Just Vitamins — Upgraded</span>
|
||||
<div class="improved-hero">
|
||||
<h4>${esc(hero.headline)}</h4>
|
||||
<p>${esc(hero.body)}</p>
|
||||
<p style="margin-top:.5rem;color:var(--accent);font-weight:600">${esc(hero.value_prop)}</p>
|
||||
</div>
|
||||
<div class="xray-item"><div class="xray-label">3 Differentiators + Proof Ideas</div>
|
||||
<ul class="diff-list">${diffs}</ul></div>
|
||||
<div class="compliance"><h5>⚠️ Do Not Say — Compliance</h5><ul>${donts}</ul></div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// DEMO C — PDP Surgeon
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
let demoC_product = null;
|
||||
let demoC_cache = {};
|
||||
|
||||
async function runDemoC() {
|
||||
const url = $('#demoC-url').value.trim();
|
||||
if (!url) return;
|
||||
|
||||
setBtn('#demoC-btn', true, 'Working...');
|
||||
$('#demoC-output').classList.add('hidden');
|
||||
demoC_cache = {};
|
||||
setStep('#c-s1', 'active', '<span class="spinner"></span> Scraping product...');
|
||||
setStep('#c-s2', '', 'Waiting');
|
||||
|
||||
// Step 1: Scrape
|
||||
try {
|
||||
const r = await fetch('/api/scrape', {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({url})
|
||||
});
|
||||
const product = await r.json();
|
||||
if (product.error) throw new Error(product.error);
|
||||
demoC_product = product;
|
||||
setStep('#c-s1', 'done', `✓ ${esc(product.title.substring(0,35))}...`);
|
||||
} catch(e) {
|
||||
setStep('#c-s1', 'error', `✗ ${esc(e.message)}`);
|
||||
setBtn('#demoC-btn', false, '🎨 Scrape & Rewrite');
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 2: AI rewrite (default style)
|
||||
const active = document.querySelector('#demoC-toggles .toggle.active');
|
||||
const style = active?.dataset.style || 'balanced';
|
||||
await rewriteStyle(style);
|
||||
|
||||
setBtn('#demoC-btn', false, '✓ Done — Change URL');
|
||||
}
|
||||
|
||||
async function switchDemoC(style, btn) {
|
||||
document.querySelectorAll('#demoC-toggles .toggle').forEach(t => t.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
if (!demoC_product) return;
|
||||
await rewriteStyle(style);
|
||||
}
|
||||
|
||||
async function rewriteStyle(style) {
|
||||
if (demoC_cache[style]) {
|
||||
renderSurgeon(demoC_product, demoC_cache[style]);
|
||||
return;
|
||||
}
|
||||
|
||||
setStep('#c-s2', 'active', `<span class="spinner"></span> Gemini rewriting as ${style}...`);
|
||||
|
||||
try {
|
||||
const r = await fetch('/api/pdp-surgeon', {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({product: demoC_product, style})
|
||||
});
|
||||
const result = await r.json();
|
||||
if (result.error) throw new Error(result.error);
|
||||
demoC_cache[style] = result;
|
||||
setStep('#c-s2', 'done', `✓ ${style} rewrite (${result._generation_time})`);
|
||||
renderSurgeon(demoC_product, result);
|
||||
$('#demoC-output').classList.remove('hidden');
|
||||
} catch(e) {
|
||||
setStep('#c-s2', 'error', `✗ ${esc(e.message)}`);
|
||||
}
|
||||
}
|
||||
|
||||
function renderSurgeon(product, result) {
|
||||
// Left — current
|
||||
const bullets = (product.benefits||[]).map(b => `<li>${esc(b)}</li>`).join('');
|
||||
$('#demoC-left').innerHTML = `
|
||||
<span class="split-label bad">✕ Current PDP</span>
|
||||
<h4 style="font-size:1rem;margin-bottom:.5rem">${esc(product.title)}</h4>
|
||||
<p style="font-size:.84rem;color:var(--muted);margin-bottom:.75rem">${esc(product.subtitle)}</p>
|
||||
<p style="font-size:1.2rem;font-weight:800;color:var(--accent);margin-bottom:.5rem">${esc(product.price)} <span style="font-size:.78rem;color:var(--muted);font-weight:400">${esc(product.quantity)}</span></p>
|
||||
<ul style="list-style:none;margin-bottom:1rem">${bullets.replace(/<li>/g, '<li style="padding:.3rem 0;font-size:.84rem;color:var(--text2)">')}</ul>
|
||||
<p style="font-size:.84rem;color:var(--muted);line-height:1.6">${esc((product.description||'').substring(0,400))}...</p>
|
||||
`;
|
||||
|
||||
// Right — rewritten
|
||||
const rBullets = (result.bullets||[]).map(b =>
|
||||
`<div class="highlight">${esc(b.text)}</div><span class="ann">↑ ${esc(b.annotation)}</span>`
|
||||
).join('');
|
||||
|
||||
$('#demoC-right').innerHTML = `
|
||||
<span class="split-label good">✓ AI-Rewritten — ${esc(result.style||'balanced').toUpperCase()}</span>
|
||||
<h4 style="font-size:1rem;margin-bottom:.25rem">${esc(result.title)}</h4>
|
||||
<span class="ann">↑ SEO-optimised title</span>
|
||||
<p style="font-size:.84rem;color:var(--accent2);margin:.5rem 0">${esc(result.subtitle)}</p>
|
||||
|
||||
<div class="highlight" style="font-weight:600">${esc(result.hero_copy)}</div>
|
||||
<span class="ann">↑ ${esc(result.hero_annotation)}</span>
|
||||
|
||||
<div style="margin-top:.75rem">${rBullets}</div>
|
||||
|
||||
<div style="margin-top:.75rem;padding:.6rem .8rem;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.15);border-radius:8px;font-size:.84rem;color:var(--gold)">⭐ ${esc(result.social_proof)}</div>
|
||||
<span class="ann">↑ ${esc(result.social_proof_annotation)}</span>
|
||||
|
||||
<div style="margin-top:.75rem;font-size:1.05rem;font-weight:800;color:var(--accent)">${esc(result.price_reframe)}</div>
|
||||
<span class="ann">↑ ${esc(result.price_annotation)}</span>
|
||||
|
||||
<p style="margin-top:.75rem;font-size:.84rem;color:var(--text2);font-style:italic">${esc(result.usage_instruction)}</p>
|
||||
<span class="ann">↑ ${esc(result.usage_annotation)}</span>
|
||||
|
||||
<div style="margin-top:1rem;text-align:center">
|
||||
<button style="background:var(--accent);color:#060a0f;border:none;padding:.7rem 2rem;border-radius:8px;font-size:.9rem;font-weight:700;cursor:pointer">${esc(result.cta_text || 'Add to Basket')}</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Smooth scroll nav
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||||
a.addEventListener('click', e => {
|
||||
const t = document.querySelector(a.getAttribute('href'));
|
||||
if (t) { e.preventDefault(); t.scrollIntoView({behavior:'smooth'}); }
|
||||
});
|
||||
});
|
||||
722
static/offer/index.html
Normal file
722
static/offer/index.html
Normal file
@@ -0,0 +1,722 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Proposal — Internal AI Infrastructure | Just Vitamins</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||||
:root{--bg:#050810;--bg2:#0a0f1e;--card:#0d1322;--card2:#111a2e;--card3:#162038;--border:#1a2545;--border2:#253560;--text:#e8ecf4;--text2:#b8c4dc;--muted:#5a6d94;--accent:#6366f1;--accent2:#818cf8;--accent3:#a5b4fc;--green:#10b981;--green2:#34d399;--cyan:#06b6d4;--cyan2:#22d3ee;--purple:#a855f7;--pink:#ec4899;--yellow:#f59e0b;--orange:#f97316;--red:#ef4444;--red2:#f87171}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
html{scroll-behavior:smooth}
|
||||
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:15px;overflow-x:hidden}
|
||||
|
||||
/* Progress bar */
|
||||
.progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--cyan),var(--green));z-index:1000;transition:width .15s;width:0}
|
||||
|
||||
/* Floating nav */
|
||||
.nav{position:fixed;top:16px;right:24px;z-index:999;display:flex;gap:4px;padding:4px;background:rgba(10,15,30,.85);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;opacity:0;transform:translateY(-10px);transition:.4s;font-size:12px}
|
||||
.nav.show{opacity:1;transform:translateY(0)}
|
||||
.nav a{padding:6px 14px;color:var(--muted);text-decoration:none;border-radius:7px;transition:.2s;font-weight:500}
|
||||
.nav a:hover,.nav a.active{color:var(--text);background:var(--card2)}
|
||||
|
||||
/* Orbs */
|
||||
.orb{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;opacity:.3}
|
||||
.orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,.18),transparent 70%);top:-200px;right:-200px;animation:of 22s ease-in-out infinite}
|
||||
.orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(16,185,129,.12),transparent 70%);bottom:-150px;left:-150px;animation:of 28s ease-in-out infinite reverse}
|
||||
@keyframes of{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-40px)}66%{transform:translate(-20px,30px)}}
|
||||
|
||||
.wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 28px}
|
||||
|
||||
/* Sections */
|
||||
section{padding:90px 0;opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
|
||||
section.vis{opacity:1;transform:none}
|
||||
|
||||
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent)}
|
||||
|
||||
/* Hero */
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:100px 0 80px}
|
||||
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);border-radius:100px;font-size:11px;font-weight:600;color:var(--accent3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:28px;width:fit-content}
|
||||
.hero-badge .dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s ease-in-out infinite}
|
||||
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}
|
||||
.hero h1{font-size:clamp(34px,5vw,52px);font-weight:800;line-height:1.08;letter-spacing:-1.5px;margin-bottom:20px}
|
||||
.hero .grad{background:linear-gradient(135deg,var(--accent2),var(--cyan),var(--green2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||||
.hero-sub{font-size:17px;color:var(--text2);max-width:580px;margin-bottom:48px}
|
||||
.hero-sub strong{color:var(--text)}
|
||||
|
||||
/* Alert stat row */
|
||||
.alert-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
|
||||
@media(max-width:640px){.alert-stats{grid-template-columns:1fr}}
|
||||
.alert-stat{padding:20px;background:var(--card);border:1px solid var(--border);border-radius:12px;text-align:center;position:relative;overflow:hidden}
|
||||
.alert-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
|
||||
.alert-stat.red::before{background:var(--red)}
|
||||
.alert-stat.amber::before{background:var(--yellow)}
|
||||
.alert-stat.grey::before{background:var(--muted)}
|
||||
.alert-stat .val{font-size:32px;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-1px;line-height:1.2}
|
||||
.alert-stat.red .val{color:var(--red2)}
|
||||
.alert-stat.amber .val{color:var(--yellow)}
|
||||
.alert-stat.grey .val{color:var(--muted)}
|
||||
.alert-stat .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:4px}
|
||||
|
||||
/* Section headers */
|
||||
.snum{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);font-weight:500;letter-spacing:2px;margin-bottom:8px;display:flex;align-items:center;gap:12px}
|
||||
.snum::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border2),transparent)}
|
||||
.stitle{font-size:clamp(26px,3.5vw,34px);font-weight:700;letter-spacing:-.8px;margin-bottom:12px;line-height:1.2}
|
||||
.sdesc{color:var(--text2);font-size:15px;max-width:560px;margin-bottom:44px}
|
||||
.sdesc strong{color:var(--text)}
|
||||
|
||||
/* Charts */
|
||||
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
|
||||
@media(max-width:700px){.chart-row{grid-template-columns:1fr}}
|
||||
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px}
|
||||
.chart-card h4{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:16px}
|
||||
.chart-box{position:relative;height:220px}
|
||||
|
||||
/* Insight callout */
|
||||
.callout{padding:18px 22px;border-radius:12px;font-size:14px;margin-bottom:16px;display:flex;align-items:flex-start;gap:14px}
|
||||
.callout .ico{font-size:20px;flex-shrink:0;margin-top:1px}
|
||||
.callout.red{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18);color:var(--red2)}
|
||||
.callout.green{background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.18);color:var(--green2)}
|
||||
.callout.blue{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.18);color:var(--accent3)}
|
||||
.callout.amber{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);color:var(--yellow)}
|
||||
.callout strong{font-weight:700}
|
||||
|
||||
/* Channel donut */
|
||||
.channel-section{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center;margin-bottom:32px}
|
||||
@media(max-width:700px){.channel-section{grid-template-columns:1fr}}
|
||||
.channel-chart-box{height:240px;position:relative}
|
||||
.channel-facts{display:flex;flex-direction:column;gap:12px}
|
||||
.channel-fact{padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:13px;color:var(--text2)}
|
||||
.channel-fact strong{color:var(--text)}
|
||||
.channel-fact .highlight{color:var(--red2);font-weight:700}
|
||||
|
||||
/* Scope/pillar cards */
|
||||
.pillar{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;margin-bottom:16px;position:relative;overflow:hidden;transition:.3s;cursor:default}
|
||||
.pillar:hover{border-color:var(--border2);box-shadow:0 6px 32px rgba(0,0,0,.25)}
|
||||
.pillar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
|
||||
.pillar.p1::before{background:linear-gradient(90deg,var(--accent),var(--cyan))}
|
||||
.pillar.p2::before{background:linear-gradient(90deg,var(--purple),var(--pink))}
|
||||
.pillar.p3::before{background:linear-gradient(90deg,var(--green),var(--cyan))}
|
||||
.pillar.p4::before{background:linear-gradient(90deg,var(--pink),var(--orange))}
|
||||
.pillar-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;cursor:pointer}
|
||||
.pillar-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
|
||||
.pillar-icon.i1{background:rgba(99,102,241,.12)}.pillar-icon.i2{background:rgba(168,85,247,.12)}.pillar-icon.i3{background:rgba(16,185,129,.12)}.pillar-icon.i4{background:rgba(236,72,153,.12)}
|
||||
.pillar-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
|
||||
.pillar-name{font-size:18px;font-weight:700}
|
||||
.pillar-toggle{margin-left:auto;font-size:18px;color:var(--muted);transition:.3s}
|
||||
.pillar.open .pillar-toggle{transform:rotate(45deg);color:var(--accent2)}
|
||||
.pillar-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
|
||||
.pillar.open .pillar-body{max-height:400px}
|
||||
.pillar-items{list-style:none;padding-top:16px}
|
||||
.pillar-items li{display:flex;gap:10px;padding:8px 0;font-size:13px;color:var(--text2);border-bottom:1px solid rgba(26,37,69,.5)}
|
||||
.pillar-items li:last-child{border:none}
|
||||
.pillar-items li .ck{color:var(--green);font-weight:700;font-size:12px;margin-top:2px}
|
||||
|
||||
/* ROI Calculator */
|
||||
.roi-calc{background:var(--card);border:1px solid var(--accent);border-radius:16px;padding:32px;position:relative;overflow:hidden}
|
||||
.roi-calc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--cyan),var(--green))}
|
||||
.roi-calc h3{font-size:18px;font-weight:700;margin-bottom:4px}
|
||||
.roi-calc .sub{font-size:13px;color:var(--muted);margin-bottom:28px}
|
||||
.slider-row{margin-bottom:28px}
|
||||
.slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--text2)}
|
||||
.slider-label .slider-val{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--accent2);font-size:16px}
|
||||
input[type=range]{width:100%;height:6px;-webkit-appearance:none;background:var(--card3);border-radius:3px;outline:none}
|
||||
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--accent3);box-shadow:0 0 12px rgba(99,102,241,.4)}
|
||||
.roi-output{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
|
||||
@media(max-width:700px){.roi-output{grid-template-columns:1fr 1fr}}
|
||||
.roi-metric{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center}
|
||||
.roi-metric .rv{font-size:24px;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-1px}
|
||||
.roi-metric .rv.green{color:var(--green2)}
|
||||
.roi-metric .rv.cyan{color:var(--cyan2)}
|
||||
.roi-metric .rv.accent{color:var(--accent3)}
|
||||
.roi-metric .rl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px;font-weight:600}
|
||||
.roi-assumptions{margin-top:20px;padding:14px 18px;background:var(--bg2);border-radius:8px;font-size:11px;color:var(--muted);line-height:1.8}
|
||||
.roi-assumptions strong{color:var(--text2)}
|
||||
|
||||
/* De-risk */
|
||||
.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||||
@media(max-width:640px){.risk-grid{grid-template-columns:1fr}}
|
||||
.risk-card{padding:20px;background:var(--card);border:1px solid var(--border);border-radius:12px;display:flex;gap:14px;transition:.3s}
|
||||
.risk-card:hover{border-color:var(--border2)}
|
||||
.risk-card .ri{font-size:22px;flex-shrink:0}
|
||||
.risk-card .rt{font-size:14px;font-weight:600;margin-bottom:2px}
|
||||
.risk-card .rd{font-size:12px;color:var(--muted);line-height:1.5}
|
||||
|
||||
/* Timeline */
|
||||
.tl{position:relative;padding-left:36px}
|
||||
.tl::before{content:'';position:absolute;left:13px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),var(--cyan),var(--green),var(--purple));border-radius:2px}
|
||||
.tl-item{position:relative;margin-bottom:32px;padding:20px 24px;background:var(--card);border:1px solid var(--border);border-radius:12px;transition:.3s}
|
||||
.tl-item:hover{border-color:var(--border2);transform:translateX(4px)}
|
||||
.tl-item:last-child{margin-bottom:0}
|
||||
.tl-dot{position:absolute;left:-31px;top:24px;width:10px;height:10px;border-radius:50%;border:2px solid;background:var(--bg)}
|
||||
.tl-item:nth-child(1) .tl-dot{border-color:var(--accent);box-shadow:0 0 10px rgba(99,102,241,.5)}
|
||||
.tl-item:nth-child(2) .tl-dot{border-color:var(--cyan);box-shadow:0 0 10px rgba(6,182,212,.5)}
|
||||
.tl-item:nth-child(3) .tl-dot{border-color:var(--green);box-shadow:0 0 10px rgba(16,185,129,.5)}
|
||||
.tl-item:nth-child(4) .tl-dot{border-color:var(--purple);box-shadow:0 0 10px rgba(168,85,247,.5)}
|
||||
.tl-wk{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
|
||||
.tl-item:nth-child(1) .tl-wk{color:var(--accent2)}
|
||||
.tl-item:nth-child(2) .tl-wk{color:var(--cyan)}
|
||||
.tl-item:nth-child(3) .tl-wk{color:var(--green)}
|
||||
.tl-item:nth-child(4) .tl-wk{color:var(--purple)}
|
||||
.tl-title{font-size:16px;font-weight:700;margin-bottom:4px}
|
||||
.tl-desc{font-size:13px;color:var(--muted)}
|
||||
.tl-ckpt{display:inline-block;margin-top:8px;padding:3px 10px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:6px;font-size:11px;color:var(--green2);font-weight:600}
|
||||
.tl-total{margin-top:28px;padding:14px 20px;background:var(--card2);border:1px solid var(--border);border-radius:10px;text-align:center;font-size:14px;font-weight:600}
|
||||
.tl-total span{font-family:'JetBrains Mono',monospace;color:var(--accent2)}
|
||||
|
||||
/* Investment options */
|
||||
@media(max-width:700px){#invest .opt{margin-bottom:16px} #invest>section>div:first-of-type{grid-template-columns:1fr!important}}
|
||||
.opt{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;position:relative;overflow:hidden;transition:.3s}
|
||||
.opt:hover{border-color:var(--border2)}
|
||||
.opt.rec{border-color:var(--accent);background:linear-gradient(135deg,var(--card),rgba(99,102,241,.04))}
|
||||
.opt.rec::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--cyan))}
|
||||
.opt-badge{position:absolute;top:12px;right:12px;padding:3px 10px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:1px}
|
||||
.opt-name{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:12px}
|
||||
.opt-price{font-size:36px;font-weight:800;letter-spacing:-1.5px;margin-bottom:2px;font-family:'JetBrains Mono',monospace}
|
||||
.opt-price .cur{font-size:18px;font-weight:600;opacity:.5;vertical-align:top;line-height:2.2}
|
||||
.opt.rec .opt-price{color:var(--accent3)}
|
||||
.opt-sub{font-size:12px;color:var(--muted);margin-bottom:20px}
|
||||
.opt-list{list-style:none}
|
||||
.opt-list li{font-size:13px;padding:6px 0;color:var(--text2);display:flex;gap:8px}
|
||||
.opt-list li .c{color:var(--green);font-weight:700;font-size:11px;margin-top:2px}
|
||||
.opt-list li .x{color:var(--muted);font-size:11px;margin-top:2px}
|
||||
.opt-list li.disabled{color:var(--muted);opacity:.5}
|
||||
|
||||
.cost-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px 28px;margin-bottom:20px}
|
||||
.cost-box h4{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:16px}
|
||||
.cost-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(26,37,69,.5);font-size:14px;color:var(--text2)}
|
||||
.cost-row:last-child{border:none}
|
||||
.cost-row .cv{font-family:'JetBrains Mono',monospace;font-weight:600}
|
||||
.cost-row.total{border-top:1px solid var(--border2);border-bottom:none;padding-top:14px;margin-top:4px;color:var(--text);font-weight:700}
|
||||
.cost-row.total .cv{color:var(--green2);font-size:16px}
|
||||
|
||||
/* Decision / CTA */
|
||||
.cta-box{background:linear-gradient(135deg,var(--card),var(--card2));border:1px solid var(--border);border-radius:20px;padding:48px;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--cyan),var(--green),transparent)}
|
||||
.cta-title{font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
|
||||
.cta-desc{color:var(--muted);font-size:14px;margin-bottom:32px;max-width:440px;margin-left:auto;margin-right:auto}
|
||||
.cta-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px;text-align:center}
|
||||
@media(max-width:640px){.cta-steps{grid-template-columns:1fr}}
|
||||
.cta-step{padding:16px;background:var(--bg2);border-radius:10px}
|
||||
.cta-step .num{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:var(--accent2);margin-bottom:4px}
|
||||
.cta-step .txt{font-size:12px;color:var(--muted)}
|
||||
.cta-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:linear-gradient(135deg,var(--accent),#4f46e5);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:.3s;text-decoration:none;box-shadow:0 4px 24px rgba(99,102,241,.3)}
|
||||
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,102,241,.45)}
|
||||
.cta-footer{margin-top:16px;font-size:12px;color:var(--muted)}
|
||||
|
||||
/* Board summary */
|
||||
.board{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:32px}
|
||||
.board h3{font-size:14px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
||||
.board h3 .tag{padding:3px 10px;background:rgba(99,102,241,.12);color:var(--accent2);border-radius:4px;font-size:10px;text-transform:uppercase;letter-spacing:1px}
|
||||
.board ol{list-style:none;counter-reset:b}
|
||||
.board ol li{counter-increment:b;padding:10px 0;border-bottom:1px solid rgba(26,37,69,.4);font-size:13px;color:var(--text2);display:flex;gap:12px}
|
||||
.board ol li:last-child{border:none}
|
||||
.board ol li::before{content:counter(b);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--accent);background:rgba(99,102,241,.1);width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
|
||||
|
||||
/* FAQ */
|
||||
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
|
||||
.faq-q{padding:16px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;transition:.2s}
|
||||
.faq-q:hover{background:var(--card2)}
|
||||
.faq-q .arrow{color:var(--muted);transition:.3s;font-size:16px}
|
||||
.faq-item.open .faq-q .arrow{transform:rotate(45deg);color:var(--accent2)}
|
||||
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
|
||||
.faq-item.open .faq-a{max-height:300px}
|
||||
.faq-a-inner{padding:0 20px 16px;font-size:13px;color:var(--muted);line-height:1.7}
|
||||
|
||||
/* Footer */
|
||||
.page-footer{text-align:center;padding:40px 0;border-top:1px solid var(--border);color:var(--muted);font-size:11px;margin-top:40px}
|
||||
|
||||
@media(max-width:640px){
|
||||
.wrap{padding:0 16px}
|
||||
section{padding:60px 0}
|
||||
.hero{padding:80px 0 60px}
|
||||
}
|
||||
@media print{
|
||||
.orb,.nav,.progress{display:none!important}
|
||||
section{opacity:1!important;transform:none!important;padding:30px 0!important;page-break-inside:avoid}
|
||||
body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
|
||||
*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="progress" id="prog"></div>
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
|
||||
<nav class="nav" id="nav">
|
||||
<a href="#data">Data</a>
|
||||
<a href="#solution">Solution</a>
|
||||
<a href="#impact">Impact</a>
|
||||
<a href="#invest">Investment</a>
|
||||
<a href="#decide">Decide</a>
|
||||
</nav>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<!-- ══════════════ HERO ══════════════ -->
|
||||
<section class="hero" id="top">
|
||||
<div class="hero-badge"><span class="dot"></span>Proposal — Just Vitamins</div>
|
||||
<h1>Reverse the acquisition<br>decline. Build <span class="grad">owned AI<br>infrastructure.</span></h1>
|
||||
<p class="hero-sub">Your repeat customers love you. But <strong>new customer discovery is collapsing</strong>. This proposal installs the content engine and commerce channels to fix that — infrastructure you own, not an agency dependency.</p>
|
||||
|
||||
<div class="alert-stats">
|
||||
<div class="alert-stat red">
|
||||
<div class="val" data-count="-84">0%</div>
|
||||
<div class="lbl">New Customer Decline</div>
|
||||
</div>
|
||||
<div class="alert-stat amber">
|
||||
<div class="val" data-count="-42">0%</div>
|
||||
<div class="lbl">Revenue from Peak</div>
|
||||
</div>
|
||||
<div class="alert-stat grey">
|
||||
<div class="val">97.4%</div>
|
||||
<div class="lbl">Channel Dependency (Google + Organic)</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ THE DATA ══════════════ -->
|
||||
<section id="data">
|
||||
<div class="snum">01 — YOUR DATA</div>
|
||||
<h2 class="stitle">The Numbers Don't Lie</h2>
|
||||
<p class="sdesc">We analysed <strong>728,018 orders</strong> spanning 20 years. Two trends dominate everything else.</p>
|
||||
|
||||
<div class="chart-row">
|
||||
<div class="chart-card">
|
||||
<h4>Revenue Trend (£)</h4>
|
||||
<div class="chart-box"><canvas id="revChart"></canvas></div>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h4>New Customer Acquisition</h4>
|
||||
<div class="chart-box"><canvas id="custChart"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="callout green">
|
||||
<span class="ico">💪</span>
|
||||
<div><strong>Your product is not the problem.</strong> AOV has climbed from £26 → £35. Repeat rate sits at 37% — well above DTC average. Customers who find you, stay. The product drives loyalty.</div>
|
||||
</div>
|
||||
<div class="callout red">
|
||||
<span class="ico">🚨</span>
|
||||
<div><strong>Discovery is the problem.</strong> New customer volume has collapsed 84% — from 24,600/year in 2020 to under 4,000 in 2025. You're not losing customers. You're failing to find new ones.</div>
|
||||
</div>
|
||||
|
||||
<div class="snum" style="margin-top:48px">THE ROOT CAUSE</div>
|
||||
<h2 class="stitle" style="font-size:24px;margin-bottom:28px">97% Channel Dependency</h2>
|
||||
|
||||
<div class="channel-section">
|
||||
<div class="chart-card" style="padding:20px">
|
||||
<div class="channel-chart-box"><canvas id="chChart"></canvas></div>
|
||||
</div>
|
||||
<div class="channel-facts">
|
||||
<div class="channel-fact"><strong>Organic + Google Ads = <span class="highlight">97.4%</span></strong> of all orders. If Google changes an algorithm, you lose the business.</div>
|
||||
<div class="channel-fact"><strong>Facebook: 0.1%.</strong> TikTok: 0%. Instagram: 0%. You have <strong>zero social commerce</strong> presence in 2025.</div>
|
||||
<div class="channel-fact"><strong>No AI content pipeline.</strong> Competitors are producing 10x the content at a fraction of the cost. Every month without these channels = lost addressable revenue.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="callout amber">
|
||||
<span class="ico">⏳</span>
|
||||
<div><strong>Cost of waiting:</strong> Based on your data, the addressable revenue gap from missing channels is estimated at <strong>£5,000–£10,000 per month</strong>. Every month without action widens the gap. <em style="font-size:12px">(See interactive model below)</em></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ SOLUTION ══════════════ -->
|
||||
<section id="solution">
|
||||
<div class="snum">02 — WHAT WE'LL BUILD</div>
|
||||
<h2 class="stitle">Four Pillars. You Own All of It.</h2>
|
||||
<p class="sdesc">Modular infrastructure — built once, extended over time. No agency lock-in.</p>
|
||||
|
||||
<div class="pillar p1 open" onclick="togglePillar(this)">
|
||||
<div class="pillar-head">
|
||||
<div class="pillar-icon i1">🏗️</div>
|
||||
<div><div class="pillar-lbl">Pillar 1</div><div class="pillar-name">Infrastructure Layer</div></div>
|
||||
<div class="pillar-toggle">+</div>
|
||||
</div>
|
||||
<div class="pillar-body"><ul class="pillar-items">
|
||||
<li><span class="ck">✓</span>Dedicated cloud server — fully isolated, your data never leaves</li>
|
||||
<li><span class="ck">✓</span>Containerised deployment — reliable, portable, zero vendor lock-in</li>
|
||||
<li><span class="ck">✓</span>Automated backups, SSL, uptime monitoring</li>
|
||||
<li><span class="ck">✓</span>Automation backbone ready for future tools (support inbox, dashboards, email flows)</li>
|
||||
</ul></div>
|
||||
</div>
|
||||
|
||||
<div class="pillar p2" onclick="togglePillar(this)">
|
||||
<div class="pillar-head">
|
||||
<div class="pillar-icon i2">🎨</div>
|
||||
<div><div class="pillar-lbl">Pillar 2</div><div class="pillar-name">AI Media Factory</div></div>
|
||||
<div class="pillar-toggle">+</div>
|
||||
</div>
|
||||
<div class="pillar-body"><ul class="pillar-items">
|
||||
<li><span class="ck">✓</span>Automated script generation — on-brand, conversion-focused copy at scale</li>
|
||||
<li><span class="ck">✓</span>AI image generation workflows — product, lifestyle & social-native visuals</li>
|
||||
<li><span class="ck">✓</span>AI UGC-style video workflows — creator-feel content without the creator cost</li>
|
||||
<li><span class="ck">✓</span>Structured content library output — organised, tagged, ready to deploy</li>
|
||||
</ul></div>
|
||||
</div>
|
||||
|
||||
<div class="pillar p3" onclick="togglePillar(this)">
|
||||
<div class="pillar-head">
|
||||
<div class="pillar-icon i3">📊</div>
|
||||
<div><div class="pillar-lbl">Pillar 3</div><div class="pillar-name">Commerce Optimisation Engine</div></div>
|
||||
<div class="pillar-toggle">+</div>
|
||||
</div>
|
||||
<div class="pillar-body"><ul class="pillar-items">
|
||||
<li><span class="ck">✓</span>Review mining → objections, messaging angles, product insights</li>
|
||||
<li><span class="ck">✓</span>Competitor structure analysis — pricing, positioning, content gaps</li>
|
||||
<li><span class="ck">✓</span>PDP improvement framework — data-driven product page recommendations</li>
|
||||
<li><span class="ck">✓</span>Blog/PDP → social repurposing — turn existing content into channel-native posts</li>
|
||||
<li><span class="ck">✓</span>No mass AI publishing — all output is SEO-safe and human-reviewed</li>
|
||||
</ul></div>
|
||||
</div>
|
||||
|
||||
<div class="pillar p4" onclick="togglePillar(this)">
|
||||
<div class="pillar-head">
|
||||
<div class="pillar-icon i4">🎵</div>
|
||||
<div><div class="pillar-lbl">Pillar 4</div><div class="pillar-name">TikTok Shop Setup</div></div>
|
||||
<div class="pillar-toggle">+</div>
|
||||
</div>
|
||||
<div class="pillar-body"><ul class="pillar-items">
|
||||
<li><span class="ck">✓</span>Full TikTok Shop integration with Shopify</li>
|
||||
<li><span class="ck">✓</span>3–5 hero product optimisation — titles, descriptions, creative</li>
|
||||
<li><span class="ck">✓</span>Product storytelling structure — hooks, narratives, format frameworks</li>
|
||||
</ul></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ IMPACT MODEL ══════════════ -->
|
||||
<section id="impact">
|
||||
<div class="snum">03 — PROJECTED IMPACT</div>
|
||||
<h2 class="stitle">What Could This Be Worth?</h2>
|
||||
<p class="sdesc">Adjust the slider to model the impact. All calculations use <strong>your actual metrics</strong>.</p>
|
||||
|
||||
<div class="roi-calc">
|
||||
<h3>Interactive Revenue Model</h3>
|
||||
<div class="sub">Based on your 2025 AOV (£35.02) and repeat rate (37.3%)</div>
|
||||
|
||||
<div class="slider-row">
|
||||
<div class="slider-label">
|
||||
<span>New customers per month from social/TikTok channels</span>
|
||||
<span class="slider-val" id="sliderVal">100</span>
|
||||
</div>
|
||||
<input type="range" id="roiSlider" min="25" max="400" value="100" step="25" oninput="calcROI()">
|
||||
<div style="display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:4px">
|
||||
<span>Conservative (25)</span><span>Moderate (100–200)</span><span>Aggressive (400)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="roi-output">
|
||||
<div class="roi-metric"><div class="rv green" id="roiMonthly">£3,502</div><div class="rl">Monthly New Revenue</div></div>
|
||||
<div class="roi-metric"><div class="rv green" id="roiAnnual">£73,151</div><div class="rl">Annual Rev (with LTV)</div></div>
|
||||
<div class="roi-metric"><div class="rv accent" id="roiMultiple">5.9x</div><div class="rl">Year 1 ROI</div></div>
|
||||
<div class="roi-metric"><div class="rv cyan" id="roiPayback">2.1 mo</div><div class="rl">Payback Period</div></div>
|
||||
</div>
|
||||
|
||||
<div class="roi-assumptions">
|
||||
<strong>Assumptions:</strong> AOV = £35.02 (your 2025 actual) · Repeat rate = 37.3% (your actual) · Avg 2 repeat purchases in first year · Year 1 cost = £4,000 build + £500×12 infra + £200×12 AI tools = £12,400 · Conservative — does not include organic uplift from PDP/blog optimisation or existing channel improvements
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="callout blue" style="margin-top:24px">
|
||||
<span class="ico">💡</span>
|
||||
<div><strong>Anti-objection:</strong> Even at the most conservative setting (25 new customers/month), the infrastructure pays for itself within 7 months. This is not a bet — it's a math problem. And these projections exclude any improvement to your existing Google/Organic channels from PDP optimisation.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ DE-RISK ══════════════ -->
|
||||
<section id="derisk">
|
||||
<div class="snum">04 — HOW WE DE-RISK THIS</div>
|
||||
<h2 class="stitle">Controls & Guarantees</h2>
|
||||
<p class="sdesc">We've designed every gate to protect you.</p>
|
||||
|
||||
<div class="risk-grid">
|
||||
<div class="risk-card"><div class="ri">🚦</div><div><div class="rt">Week 4 Checkpoint</div><div class="rd">Full review before any ongoing commitment. If you're not satisfied with the build, walk away.</div></div></div>
|
||||
<div class="risk-card"><div class="ri">🔒</div><div><div class="rt">No Mass AI Publishing</div><div class="rd">All content is human-reviewed. No SEO risk. No brand safety issues. Structure-led, not spam.</div></div></div>
|
||||
<div class="risk-card"><div class="ri">🚪</div><div><div class="rt">30-Day Exit Clause</div><div class="rd">Monthly infrastructure can be cancelled with 30 days' notice. No lock-in contracts.</div></div></div>
|
||||
<div class="risk-card"><div class="ri">🏛️</div><div><div class="rt">Brand Owns Everything</div><div class="rd">Your server. Your data. Your workflows. Your content. Full admin access from day one.</div></div></div>
|
||||
<div class="risk-card"><div class="ri">📊</div><div><div class="rt">Weekly Reporting</div><div class="rd">Clear updates each week during build. Measurable checkpoints at each phase.</div></div></div>
|
||||
<div class="risk-card"><div class="ri">🛡️</div><div><div class="rt">No Org Change Needed</div><div class="rd">This sits behind your existing Shopify store. No team restructuring. No process overhaul.</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ TIMELINE ══════════════ -->
|
||||
<section id="timeline">
|
||||
<div class="snum">05 — TIMELINE</div>
|
||||
<h2 class="stitle">Build Schedule</h2>
|
||||
<p class="sdesc">From approval to fully operational.</p>
|
||||
|
||||
<div class="tl">
|
||||
<div class="tl-item"><div class="tl-dot"></div>
|
||||
<div class="tl-wk">Week 1</div>
|
||||
<div class="tl-title">Infrastructure Deployed</div>
|
||||
<div class="tl-desc">Cloud server provisioned, containers configured, SSL and monitoring active.</div>
|
||||
<div class="tl-ckpt">✓ Checkpoint: Server live, admin access granted</div>
|
||||
</div>
|
||||
<div class="tl-item"><div class="tl-dot"></div>
|
||||
<div class="tl-wk">Week 2</div>
|
||||
<div class="tl-title">Shopify + TikTok Connected</div>
|
||||
<div class="tl-desc">Store integrations wired, TikTok Shop configured, optimisation workflows loaded.</div>
|
||||
<div class="tl-ckpt">✓ Checkpoint: TikTok Shop live with 3–5 products</div>
|
||||
</div>
|
||||
<div class="tl-item"><div class="tl-dot"></div>
|
||||
<div class="tl-wk">Week 3</div>
|
||||
<div class="tl-title">AI Media Workflows Live</div>
|
||||
<div class="tl-desc">Script generation, image creation, and UGC-style video pipelines operational.</div>
|
||||
<div class="tl-ckpt">✓ Checkpoint: First AI content batch produced</div>
|
||||
</div>
|
||||
<div class="tl-item"><div class="tl-dot"></div>
|
||||
<div class="tl-wk">Week 4</div>
|
||||
<div class="tl-title">Testing, Documentation, Handover</div>
|
||||
<div class="tl-desc">Full system testing, documentation delivery, team walkthrough. You're in control.</div>
|
||||
<div class="tl-ckpt">✓ Gate: Full review — proceed or exit before ongoing commitment</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl-total">Total delivery: <span>3–4 weeks</span> from approval</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ INVESTMENT ══════════════ -->
|
||||
<section id="invest">
|
||||
<div class="snum">06 — INVESTMENT</div>
|
||||
<h2 class="stitle">Investment</h2>
|
||||
<p class="sdesc">One price. All four pillars. No hidden fees.</p>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px">
|
||||
<div class="opt rec" style="border-radius:16px">
|
||||
<div class="opt-name">One-Time Build</div>
|
||||
<div class="opt-price"><span class="cur">£</span>4,000</div>
|
||||
<div class="opt-sub">Full infrastructure build & deployment</div>
|
||||
<ul class="opt-list" style="margin-top:16px">
|
||||
<li><span class="c">✓</span>Infrastructure Layer (dedicated server, containers, SSL, backups)</li>
|
||||
<li><span class="c">✓</span>AI Media Factory (scripts, images, UGC-style video workflows)</li>
|
||||
<li><span class="c">✓</span>Commerce Optimisation Engine (review mining, PDP, competitor analysis)</li>
|
||||
<li><span class="c">✓</span>TikTok Shop Setup (integration + 3–5 product optimisation)</li>
|
||||
<li><span class="c">✓</span>Full documentation & team handover</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="opt" style="border-radius:16px;display:flex;flex-direction:column;justify-content:center">
|
||||
<div class="opt-name">Monthly Infrastructure</div>
|
||||
<div class="opt-price"><span class="cur">£</span>500</div>
|
||||
<div class="opt-sub">Server, maintenance & monitoring</div>
|
||||
<ul class="opt-list" style="margin-top:16px">
|
||||
<li><span class="c">✓</span>Dedicated server hosting</li>
|
||||
<li><span class="c">✓</span>Automated backups & SSL</li>
|
||||
<li><span class="c">✓</span>Uptime monitoring</li>
|
||||
<li><span class="c">✓</span>30-day exit clause — no lock-in</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cost-box">
|
||||
<h4>Estimated Monthly Running Costs</h4>
|
||||
<div class="cost-row"><span>Infrastructure & maintenance</span><span class="cv">£500</span></div>
|
||||
<div class="cost-row"><span>AI tool subscriptions (paid directly by brand)</span><span class="cv">£100–300</span></div>
|
||||
<div class="cost-row total"><span>Estimated Total Monthly</span><span class="cv">£600–800</span></div>
|
||||
</div>
|
||||
|
||||
<div class="callout blue">
|
||||
<span class="ico">📌</span>
|
||||
<div><strong>Context:</strong> £4,000 is less than one month's estimated lost revenue from the acquisition gap. Monthly cost is equivalent to one day's worth of Google Ads spend. This is infrastructure that compounds — every workflow added makes the next one cheaper.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ DECISION ══════════════ -->
|
||||
<section id="decide">
|
||||
<div class="snum">07 — DECISION</div>
|
||||
<h2 class="stitle">Next Step</h2>
|
||||
|
||||
<div class="cta-box">
|
||||
<div class="cta-title">What We Need From You</div>
|
||||
<p class="cta-desc">Three things to get started. Nothing else.</p>
|
||||
<div class="cta-steps">
|
||||
<div class="cta-step"><div class="num">1</div><div class="txt">Confirm approval<br>to begin build</div></div>
|
||||
<div class="cta-step"><div class="num">2</div><div class="txt">Provide Shopify &<br>TikTok access</div></div>
|
||||
<div class="cta-step"><div class="num">3</div><div class="txt">15-minute kickoff call<br>to align priorities</div></div>
|
||||
</div>
|
||||
<a class="cta-btn" href="mailto:">Approve & Start Build →</a>
|
||||
<div class="cta-footer">Build begins within 48 hours of approval. Week 4 gate before any ongoing commitment.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ BOARD SUMMARY ══════════════ -->
|
||||
<section id="board">
|
||||
<div class="snum">APPENDIX</div>
|
||||
<h2 class="stitle" style="font-size:22px">Board Decision Summary</h2>
|
||||
<p class="sdesc">Forward this to anyone who needs to approve.</p>
|
||||
|
||||
<div class="board">
|
||||
<h3>Decision Summary <span class="tag">Internal Use</span></h3>
|
||||
<ol>
|
||||
<li>New customer acquisition has declined <strong>84%</strong> (24,600 → 3,900/year) since 2020, driving a <strong>42% revenue decline</strong> from peak (£1.82M → £1.05M).</li>
|
||||
<li>Product-market fit is strong: 37% repeat rate, AOV increasing from £26 → £35. The decline is a <strong>discovery problem, not a product problem</strong>.</li>
|
||||
<li><strong>97.4% of revenue depends on two channels</strong> (Google Organic + Google Ads). Zero social commerce presence. This is a single point of failure.</li>
|
||||
<li>Proposal: Install <strong>owned AI infrastructure</strong> for content automation, TikTok Shop, PDP optimisation, and competitor insight extraction. Not an agency dependency — brand owns all assets.</li>
|
||||
<li>Investment: <strong>£4,000 one-time</strong> + £500/mo infrastructure + £100–300/mo AI tools. Estimated total ongoing: £600–800/month.</li>
|
||||
<li>Timeline: <strong>Fully operational in 3–4 weeks</strong> with weekly checkpoints. Week 4 review gate before ongoing commitment.</li>
|
||||
<li>Risk controls: No mass AI publishing (SEO-safe), 30-day exit clause on monthly, brand retains all access/data/code, weekly reporting during build.</li>
|
||||
<li>Recommendation: <strong>Approve build (£4,000 one-time)</strong>. Measurable Week 4 checkpoint: infrastructure live, first AI content batch produced, TikTok Shop configured with 3–5 products. Conservative ROI shows payback within 2–7 months.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ══════════════ FAQ ══════════════ -->
|
||||
<section id="faq">
|
||||
<div class="snum">QUESTIONS</div>
|
||||
<h2 class="stitle" style="font-size:22px;margin-bottom:24px">Anticipated Questions</h2>
|
||||
|
||||
<div class="faq-item" onclick="toggleFaq(this)"><div class="faq-q">Is AI-generated content good enough for our brand?<span class="arrow">+</span></div><div class="faq-a"><div class="faq-a-inner">Yes — with the right controls. All output is structure-led and human-reviewed before publishing. We do not mass-publish AI content. The system generates drafts and options; your team approves what goes live. This is the same approach used by premium DTC brands globally.</div></div></div>
|
||||
|
||||
<div class="faq-item" onclick="toggleFaq(this)"><div class="faq-q">Will this actually bring new customers?<span class="arrow">+</span></div><div class="faq-a"><div class="faq-a-inner">The infrastructure creates the capability to reach customers on channels you're currently absent from (TikTok, social, content-driven discovery). Your product already converts and retains — the gap is solely in discovery. Even modest new-channel performance (25–50 new customers/month) delivers positive ROI within months.</div></div></div>
|
||||
|
||||
<div class="faq-item" onclick="toggleFaq(this)"><div class="faq-q">What if it doesn't work?<span class="arrow">+</span></div><div class="faq-a"><div class="faq-a-inner">Week 4 is a formal review gate. If you're not satisfied with the build, there's no ongoing commitment. Monthly infrastructure has a 30-day exit clause. The one-time build cost covers real infrastructure you retain regardless — server, workflows, content library, TikTok Shop configuration.</div></div></div>
|
||||
|
||||
<div class="faq-item" onclick="toggleFaq(this)"><div class="faq-q">Who manages this after handover?<span class="arrow">+</span></div><div class="faq-a"><div class="faq-a-inner">The system is designed to be low-maintenance. Documentation covers all workflows. Day-to-day content generation is semi-automated — your team reviews outputs, not builds pipelines. The £500/mo infrastructure fee covers server maintenance, monitoring, and backups.</div></div></div>
|
||||
|
||||
<div class="faq-item" onclick="toggleFaq(this)"><div class="faq-q">What access do you need?<span class="arrow">+</span></div><div class="faq-a"><div class="faq-a-inner">Shopify collaborator access (not owner), TikTok Shop credentials, and any brand guidelines/assets you have. We do not need payment processor access, customer PII, or admin-level Shopify permissions.</div></div></div>
|
||||
|
||||
<div class="faq-item" onclick="toggleFaq(this)"><div class="faq-q">Is our data secure?<span class="arrow">+</span></div><div class="faq-a"><div class="faq-a-inner">Your infrastructure runs on a dedicated server — not shared. SSL encrypted, automated backups, and the brand has full admin access. No data is shared with third parties. You own the server and everything on it.</div></div></div>
|
||||
|
||||
<div class="faq-item" onclick="toggleFaq(this)"><div class="faq-q">How is this different from hiring an agency?<span class="arrow">+</span></div><div class="faq-a"><div class="faq-a-inner">An agency charges monthly for services and you own nothing when you leave. This is a one-time infrastructure build — you own the server, the workflows, the content, and the integrations. The £500/mo covers hosting and maintenance only. If you cancel, you keep the infrastructure and can self-host.</div></div></div>
|
||||
</section>
|
||||
|
||||
<div class="page-footer">
|
||||
Prepared for Just Vitamins · March 2026 · Confidential<br>
|
||||
Data source: 728,018 validated orders · Nov 2005 — Jan 2026
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ══════ SCROLL OBSERVER ══════
|
||||
const obs = new IntersectionObserver(e => {
|
||||
e.forEach(en => { if(en.isIntersecting) en.target.classList.add('vis'); });
|
||||
}, {threshold:.08, rootMargin:'0px 0px -30px 0px'});
|
||||
document.querySelectorAll('section').forEach(s => obs.observe(s));
|
||||
document.getElementById('top').classList.add('vis');
|
||||
|
||||
// ══════ PROGRESS BAR + NAV ══════
|
||||
const prog = document.getElementById('prog');
|
||||
const nav = document.getElementById('nav');
|
||||
window.addEventListener('scroll', () => {
|
||||
const h = document.documentElement.scrollHeight - window.innerHeight;
|
||||
prog.style.width = (window.scrollY / h * 100) + '%';
|
||||
nav.classList.toggle('show', window.scrollY > 600);
|
||||
});
|
||||
|
||||
// ══════ ANIMATED COUNTERS ══════
|
||||
const counted = new Set();
|
||||
const counterObs = new IntersectionObserver(e => {
|
||||
e.forEach(en => {
|
||||
if (!en.isIntersecting || counted.has(en.target)) return;
|
||||
counted.add(en.target);
|
||||
const target = parseInt(en.target.dataset.count);
|
||||
const duration = 1200;
|
||||
const start = performance.now();
|
||||
function tick(now) {
|
||||
const p = Math.min((now - start) / duration, 1);
|
||||
const ease = 1 - Math.pow(1 - p, 3);
|
||||
const val = Math.round(target * ease);
|
||||
en.target.textContent = val + '%';
|
||||
if (p < 1) requestAnimationFrame(tick);
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
});
|
||||
}, {threshold:.5});
|
||||
document.querySelectorAll('[data-count]').forEach(el => counterObs.observe(el));
|
||||
|
||||
// ══════ CHARTS ══════
|
||||
const cBase = {responsive:true,maintainAspectRatio:false,animation:{duration:600},plugins:{legend:{display:false}},scales:{x:{grid:{color:'rgba(26,37,69,.4)'},ticks:{color:'#5a6d94',font:{size:10}}},y:{grid:{color:'rgba(26,37,69,.4)'},ticks:{color:'#5a6d94',font:{size:10}}}}};
|
||||
|
||||
// Revenue chart
|
||||
new Chart(document.getElementById('revChart'), {
|
||||
type:'line',
|
||||
data:{
|
||||
labels:['2018','2019','2020','2021','2022','2023','2024','2025'],
|
||||
datasets:[{
|
||||
data:[1654002,1545674,1820963,1775174,1514505,1378510,1244661,1047850],
|
||||
borderColor:'#6366f1',backgroundColor:'rgba(99,102,241,.1)',fill:true,tension:.4,pointRadius:4,pointBackgroundColor:'#6366f1',
|
||||
pointBorderColor:'#0d1322',pointBorderWidth:2,borderWidth:2.5
|
||||
}]
|
||||
},
|
||||
options:{...cBase,scales:{...cBase.scales,y:{...cBase.scales.y,ticks:{...cBase.scales.y.ticks,callback:v=>'£'+Math.round(v/1000)+'k'}}},
|
||||
plugins:{...cBase.plugins,tooltip:{callbacks:{label:ctx=>'£'+ctx.raw.toLocaleString()}}}}
|
||||
});
|
||||
|
||||
// New customer chart
|
||||
new Chart(document.getElementById('custChart'), {
|
||||
type:'bar',
|
||||
data:{
|
||||
labels:['2018','2019','2020','2021','2022','2023','2024','2025'],
|
||||
datasets:[{
|
||||
data:[20219,11874,24666,20309,16404,9869,6338,3941],
|
||||
backgroundColor:['#6366f1cc','#6366f1cc','#10b981cc','#6366f1cc','#f59e0bcc','#ef4444cc','#ef4444cc','#ef4444cc'],
|
||||
borderRadius:6,borderSkipped:false
|
||||
}]
|
||||
},
|
||||
options:{...cBase,plugins:{...cBase.plugins,tooltip:{callbacks:{label:ctx=>ctx.raw.toLocaleString()+' new customers'}}}}
|
||||
});
|
||||
|
||||
// Channel donut
|
||||
new Chart(document.getElementById('chChart'), {
|
||||
type:'doughnut',
|
||||
data:{
|
||||
labels:['Organic','Google Ads','Webgains','Email','Bing','Social/Other'],
|
||||
datasets:[{
|
||||
data:[50.5,31.2,10.4,5.6,2.2,0.1],
|
||||
backgroundColor:['#6366f1','#818cf8','#a855f7','#06b6d4','#64748b','#ef4444'],
|
||||
borderWidth:0,spacing:2
|
||||
}]
|
||||
},
|
||||
options:{responsive:true,maintainAspectRatio:false,cutout:'65%',
|
||||
plugins:{legend:{position:'bottom',labels:{color:'#5a6d94',font:{size:10},padding:12,usePointStyle:true,pointStyleWidth:8}},
|
||||
tooltip:{callbacks:{label:ctx=>ctx.label+': '+ctx.raw+'%'}}}}
|
||||
});
|
||||
|
||||
// ══════ ROI CALCULATOR ══════
|
||||
function calcROI() {
|
||||
const n = parseInt(document.getElementById('roiSlider').value);
|
||||
document.getElementById('sliderVal').textContent = n;
|
||||
const aov = 35.02;
|
||||
const repeatRate = 0.373;
|
||||
const avgRepeats = 2;
|
||||
const ltv = aov * (1 + repeatRate * avgRepeats);
|
||||
const monthlyRev = n * aov;
|
||||
const annualRev = n * 12 * ltv;
|
||||
const year1Cost = 4000 + 500*12 + 200*12;
|
||||
const roi = annualRev / year1Cost;
|
||||
const payback = year1Cost / (monthlyRev * (1 + repeatRate));
|
||||
document.getElementById('roiMonthly').textContent = '£' + Math.round(monthlyRev).toLocaleString();
|
||||
document.getElementById('roiAnnual').textContent = '£' + Math.round(annualRev).toLocaleString();
|
||||
document.getElementById('roiMultiple').textContent = roi.toFixed(1) + 'x';
|
||||
document.getElementById('roiPayback').textContent = payback.toFixed(1) + ' mo';
|
||||
}
|
||||
calcROI();
|
||||
|
||||
// ══════ PILLAR TOGGLE ══════
|
||||
function togglePillar(el) { el.classList.toggle('open'); }
|
||||
|
||||
// ══════ FAQ TOGGLE ══════
|
||||
function toggleFaq(el) { el.classList.toggle('open'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1045
static/proposal/index.html
Normal file
1045
static/proposal/index.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user