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:
21
Dockerfile
21
Dockerfile
@@ -1,4 +1,17 @@
|
||||
FROM nginx:alpine
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY html/ /usr/share/nginx/html/
|
||||
EXPOSE 80
|
||||
FROM python:3.11-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install deps
|
||||
COPY requirements.txt .
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
# Copy app
|
||||
COPY . .
|
||||
|
||||
# Create generated dir
|
||||
RUN mkdir -p /app/generated
|
||||
|
||||
EXPOSE 5050
|
||||
|
||||
CMD ["gunicorn", "-b", "0.0.0.0:5050", "-w", "2", "--timeout", "120", "--access-logfile", "-", "app:app"]
|
||||
|
||||
328
ai_engine.py
Normal file
328
ai_engine.py
Normal file
@@ -0,0 +1,328 @@
|
||||
"""AI engine — Gemini for copy, Nano Banana / Nano Banana Pro for imagery.
|
||||
|
||||
Models used:
|
||||
Text: gemini-2.5-flash — all copy generation
|
||||
Image: gemini-2.5-flash-image — Nano Banana (fast lifestyle shots)
|
||||
Image: gemini-3-pro-image-preview — Nano Banana Pro (premium hero/product shots)
|
||||
|
||||
Powers:
|
||||
Demo A: generate_asset_pack() — 1 product → 12 marketing assets
|
||||
Demo B: competitor_xray() — competitor URL → analysis + JV upgrade
|
||||
Demo C: pdp_surgeon() — existing copy → style variants
|
||||
PDP: optimise_pdp_copy() — full PDP rewrite
|
||||
Images: generate_all_images() — Nano Banana product imagery
|
||||
"""
|
||||
|
||||
import os, json, hashlib, re
|
||||
from pathlib import Path
|
||||
from google import genai
|
||||
from google.genai import types
|
||||
|
||||
GEMINI_KEY = os.environ.get("GEMINI_API_KEY", "")
|
||||
client = genai.Client(api_key=GEMINI_KEY) if GEMINI_KEY else None
|
||||
|
||||
GEN_DIR = Path(__file__).parent / "generated"
|
||||
GEN_DIR.mkdir(exist_ok=True)
|
||||
|
||||
TEXT_MODEL = "gemini-2.5-flash"
|
||||
IMG_FAST = "gemini-2.5-flash-image" # Nano Banana
|
||||
IMG_PRO = "gemini-3-pro-image-preview" # Nano Banana Pro
|
||||
|
||||
|
||||
def _call_gemini(prompt: str, temperature: float = 0.7) -> dict:
|
||||
"""Call Gemini text model, return parsed JSON."""
|
||||
if not client:
|
||||
return {"error": "GEMINI_API_KEY not configured"}
|
||||
response = client.models.generate_content(
|
||||
model=TEXT_MODEL,
|
||||
contents=prompt,
|
||||
config=types.GenerateContentConfig(
|
||||
temperature=temperature,
|
||||
response_mime_type="application/json",
|
||||
),
|
||||
)
|
||||
try:
|
||||
return json.loads(response.text)
|
||||
except json.JSONDecodeError:
|
||||
match = re.search(r'\{.*\}', response.text, re.DOTALL)
|
||||
if match:
|
||||
return json.loads(match.group())
|
||||
return {"error": "Failed to parse AI response", "raw": response.text[:500]}
|
||||
|
||||
|
||||
def _generate_image(prompt: str, model: str = IMG_PRO) -> tuple:
|
||||
"""Generate image via Nano Banana. Returns (filename, mime_type) or ('','')."""
|
||||
if not client:
|
||||
return ("", "")
|
||||
|
||||
cache_key = hashlib.md5(f"{model}:{prompt}".encode()).hexdigest()[:14]
|
||||
# Check cache
|
||||
for ext in ("png", "jpg", "jpeg"):
|
||||
cached = GEN_DIR / f"{cache_key}.{ext}"
|
||||
if cached.exists():
|
||||
return (cached.name, f"image/{ext}")
|
||||
|
||||
try:
|
||||
response = client.models.generate_content(
|
||||
model=model,
|
||||
contents=prompt,
|
||||
config=types.GenerateContentConfig(
|
||||
response_modalities=["IMAGE", "TEXT"],
|
||||
),
|
||||
)
|
||||
for part in response.candidates[0].content.parts:
|
||||
if part.inline_data and part.inline_data.data:
|
||||
mime = part.inline_data.mime_type or "image/png"
|
||||
ext = "jpg" if "jpeg" in mime or "jpg" in mime else "png"
|
||||
filename = f"{cache_key}.{ext}"
|
||||
(GEN_DIR / filename).write_bytes(part.inline_data.data)
|
||||
return (filename, mime)
|
||||
except Exception as e:
|
||||
print(f"[img-gen] {model} error: {e}")
|
||||
return ("", "")
|
||||
|
||||
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
# DEMO A — One Product → 12 Assets
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
|
||||
def generate_asset_pack(product: dict) -> dict:
|
||||
prompt = f"""You are a world-class ecommerce copywriter and marketing strategist for Just Vitamins (justvitamins.co.uk), a trusted UK vitamin brand — 4.8★ Trustpilot, 230,000+ customers, 20 years trading.
|
||||
|
||||
PRODUCT DATA:
|
||||
- Title: {product.get('title','')}
|
||||
- Subtitle: {product.get('subtitle','')}
|
||||
- Price: {product.get('price','')} for {product.get('quantity','')}
|
||||
- Per unit: {product.get('per_unit_cost','')}
|
||||
- Benefits: {json.dumps(product.get('benefits',[]))}
|
||||
- Description: {product.get('description','')[:1500]}
|
||||
- EFSA Health Claims: {json.dumps(product.get('health_claims',[]))}
|
||||
- Category: {product.get('category','')}
|
||||
|
||||
Generate a COMPLETE 12-asset marketing pack. Be specific to THIS product.
|
||||
|
||||
Return JSON:
|
||||
{{
|
||||
"hero_angles": [
|
||||
{{"headline":"…","target_desire":"…","best_for":"…"}},
|
||||
{{"headline":"…","target_desire":"…","best_for":"…"}},
|
||||
{{"headline":"…","target_desire":"…","best_for":"…"}}
|
||||
],
|
||||
"pdp_copy": {{
|
||||
"headline":"…",
|
||||
"bullets":["…","…","…","…","…"],
|
||||
"faq":[{{"q":"…","a":"…"}},{{"q":"…","a":"…"}},{{"q":"…","a":"…"}}]
|
||||
}},
|
||||
"ad_hooks":["…","…","…","…","…"],
|
||||
"email_subjects":[
|
||||
{{"subject":"…","preview":"…"}},
|
||||
{{"subject":"…","preview":"…"}},
|
||||
{{"subject":"…","preview":"…"}}
|
||||
],
|
||||
"tiktok_script":{{
|
||||
"title":"…",
|
||||
"hook_0_3s":"…",
|
||||
"body_3_12s":"…",
|
||||
"cta_12_15s":"…",
|
||||
"why_it_works":"…"
|
||||
}},
|
||||
"blog_outline":{{
|
||||
"title":"…",
|
||||
"sections":["…","…","…","…","…"],
|
||||
"seo_keyword":"…",
|
||||
"monthly_searches":"…"
|
||||
}},
|
||||
"meta_seo":{{
|
||||
"title":"…","description":"…","title_chars":0,"desc_chars":0
|
||||
}},
|
||||
"alt_text":[
|
||||
{{"image_type":"Hero product shot","alt":"…","filename":"…"}},
|
||||
{{"image_type":"Lifestyle image","alt":"…","filename":"…"}}
|
||||
],
|
||||
"ab_variants":[
|
||||
{{"label":"Rational","copy":"…"}},
|
||||
{{"label":"Emotional","copy":"…"}},
|
||||
{{"label":"Social Proof","copy":"…"}}
|
||||
]
|
||||
}}
|
||||
|
||||
RULES: EFSA claims must be accurate. Email subjects <50 chars. Meta title <60 chars, description <160 chars. UK English."""
|
||||
return _call_gemini(prompt, 0.75)
|
||||
|
||||
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
# DEMO B — Competitor X-Ray
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
|
||||
def competitor_xray(competitor_data: dict) -> dict:
|
||||
prompt = f"""You are a competitive intelligence analyst for Just Vitamins (justvitamins.co.uk) — trusted UK supplement brand, 20 yrs, 4.8★ Trustpilot, 230K+ customers, eco bio-pouch packaging.
|
||||
|
||||
COMPETITOR PAGE:
|
||||
- URL: {competitor_data.get('url','')}
|
||||
- Title: {competitor_data.get('title','')}
|
||||
- Brand: {competitor_data.get('brand','')}
|
||||
- Price: {competitor_data.get('price','')}
|
||||
- Meta: {competitor_data.get('meta_description','')}
|
||||
- Description: {competitor_data.get('description','')[:2000]}
|
||||
- Bullets: {json.dumps(competitor_data.get('bullets',[])[:10])}
|
||||
- Page extract: {competitor_data.get('raw_text','')[:2000]}
|
||||
|
||||
Perform a deep competitive analysis. Output JSON:
|
||||
{{
|
||||
"competitor_name":"…",
|
||||
"what_theyre_selling":"One sentence — what they're REALLY selling (emotional promise, not product)",
|
||||
"top_5_tactics":[
|
||||
{{"tactic":"…","explanation":"…"}},
|
||||
{{"tactic":"…","explanation":"…"}},
|
||||
{{"tactic":"…","explanation":"…"}},
|
||||
{{"tactic":"…","explanation":"…"}},
|
||||
{{"tactic":"…","explanation":"…"}}
|
||||
],
|
||||
"weakest_claim":"Their most vulnerable claim / biggest gap",
|
||||
"jv_hero_section":{{
|
||||
"headline":"Killer headline positioning JV as better",
|
||||
"body":"2-3 sentences of copy that beats them without naming them",
|
||||
"value_prop":"Single most powerful reason to choose JV"
|
||||
}},
|
||||
"differentiators":[
|
||||
{{"point":"…","proof_idea":"Specific content or test idea to prove it"}},
|
||||
{{"point":"…","proof_idea":"…"}},
|
||||
{{"point":"…","proof_idea":"…"}}
|
||||
],
|
||||
"do_not_say":["Compliance note 1","…","…","…"]
|
||||
}}
|
||||
|
||||
RULES: No false claims. EFSA/ASA compliant. Strategic, not aggressive."""
|
||||
return _call_gemini(prompt, 0.7)
|
||||
|
||||
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
# DEMO C — PDP Surgeon
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
|
||||
STYLE_INSTRUCTIONS = {
|
||||
"balanced": "Balanced, trustworthy DTC supplement voice. Mix emotional hooks with rational proof.",
|
||||
"premium": "Premium aspirational voice. Sophisticated language, formulation science, target affluent buyers.",
|
||||
"dr": "Direct-response style. Pattern interrupts, urgency, specific numbers, scarcity, stacked bonuses.",
|
||||
"medical": "Clinical, medically-safe tone. Proper nomenclature, structure/function claims only, FDA disclaimer.",
|
||||
}
|
||||
|
||||
def pdp_surgeon(product: dict, style: str = "balanced") -> dict:
|
||||
instruction = STYLE_INSTRUCTIONS.get(style, STYLE_INSTRUCTIONS["balanced"])
|
||||
prompt = f"""You are a PDP conversion specialist rewriting a product page for Just Vitamins.
|
||||
|
||||
PRODUCT:
|
||||
- Title: {product.get('title','')}
|
||||
- Subtitle: {product.get('subtitle','')}
|
||||
- Price: {product.get('price','')} for {product.get('quantity','')}
|
||||
- Benefits: {json.dumps(product.get('benefits',[]))}
|
||||
- Description: {product.get('description','')[:1500]}
|
||||
- EFSA Claims: {json.dumps(product.get('health_claims',[]))}
|
||||
|
||||
STYLE: {style.upper()} — {instruction}
|
||||
|
||||
Rewrite the PDP. For EVERY change add a conversion annotation with estimated % impact.
|
||||
|
||||
Output JSON:
|
||||
{{
|
||||
"style":"{style}",
|
||||
"title":"…",
|
||||
"subtitle":"…",
|
||||
"hero_copy":"Main persuasion paragraph",
|
||||
"hero_annotation":"Why this works — conversion impact",
|
||||
"bullets":[
|
||||
{{"text":"…","annotation":"Why — e.g. +22% add-to-cart"}},
|
||||
{{"text":"…","annotation":"…"}},
|
||||
{{"text":"…","annotation":"…"}},
|
||||
{{"text":"…","annotation":"…"}}
|
||||
],
|
||||
"social_proof":"Line using 4.8★ Trustpilot, 230K customers",
|
||||
"social_proof_annotation":"…",
|
||||
"price_reframe":"Reframe price as no-brainer",
|
||||
"price_annotation":"…",
|
||||
"cta_text":"CTA button text",
|
||||
"usage_instruction":"How to take — written to remove friction",
|
||||
"usage_annotation":"…"
|
||||
}}
|
||||
|
||||
RULES: EFSA claims accurate. Realistic % lifts (5-40%). UK English."""
|
||||
return _call_gemini(prompt, 0.8)
|
||||
|
||||
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
# FULL PDP OPTIMISATION
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
|
||||
def optimise_pdp_copy(product: dict) -> dict:
|
||||
prompt = f"""You are an expert ecommerce copywriter for Just Vitamins (justvitamins.co.uk) — 4.8★ Trustpilot, 230K+ customers, 20 years.
|
||||
|
||||
PRODUCT:
|
||||
- Title: {product['title']}
|
||||
- Subtitle: {product.get('subtitle','')}
|
||||
- Price: {product.get('price','')} for {product.get('quantity','')}
|
||||
- Per unit: {product.get('per_unit_cost','')}
|
||||
- Benefits: {json.dumps(product.get('benefits',[]))}
|
||||
- Description: {product.get('description','')[:1500]}
|
||||
- EFSA Claims: {json.dumps(product.get('health_claims',[]))}
|
||||
- Category: {product.get('category','')}
|
||||
|
||||
Rewrite everything. Output JSON:
|
||||
{{
|
||||
"seo_title":"…",
|
||||
"subtitle":"…",
|
||||
"benefit_bullets":["…","…","…","…","…"],
|
||||
"why_section":"Para 1\\n\\nPara 2\\n\\nPara 3",
|
||||
"who_for":["…","…","…"],
|
||||
"social_proof":"…",
|
||||
"meta_description":"…",
|
||||
"faqs":[{{"q":"…","a":"…"}},{{"q":"…","a":"…"}},{{"q":"…","a":"…"}}]
|
||||
}}
|
||||
|
||||
Keep EFSA claims accurate. UK English."""
|
||||
return _call_gemini(prompt, 0.7)
|
||||
|
||||
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
# IMAGE GENERATION — Nano Banana / Pro
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
|
||||
def generate_product_images(product: dict) -> dict:
|
||||
"""Generate product images using Nano Banana (fast) + Nano Banana Pro (hero)."""
|
||||
title = product.get("title", "vitamin supplement")
|
||||
category = product.get("category", "vitamins")
|
||||
results = {}
|
||||
|
||||
# Hero — use Nano Banana Pro for best quality
|
||||
hero_prompt = (
|
||||
f"Professional product hero photograph for an ecommerce page. "
|
||||
f"A premium eco-friendly kraft bio-pouch supplement packaging for '{title}' "
|
||||
f"by Just Vitamins UK. Clean cream/white background, soft natural shadows, "
|
||||
f"minimalist staging with a small ceramic dish of capsules/tablets beside it "
|
||||
f"and a sprig of green herb. Premium, trustworthy, modern. "
|
||||
f"Commercial product photography, sharp focus, studio lighting."
|
||||
)
|
||||
fname, mime = _generate_image(hero_prompt, IMG_PRO)
|
||||
results["hero"] = {"filename": fname, "mime": mime, "model": "Nano Banana Pro"}
|
||||
|
||||
# Lifestyle — Nano Banana (fast)
|
||||
lifestyle_prompt = (
|
||||
f"Lifestyle product photograph: '{title}' by Just Vitamins UK in an eco "
|
||||
f"bio-pouch sitting on a marble kitchen counter with morning sunlight "
|
||||
f"streaming through a window. Fresh fruit, a glass of water, and green "
|
||||
f"leaves nearby. Warm, healthy, inviting mood. Shallow depth of field. "
|
||||
f"Photorealistic, 4K quality."
|
||||
)
|
||||
fname, mime = _generate_image(lifestyle_prompt, IMG_FAST)
|
||||
results["lifestyle"] = {"filename": fname, "mime": mime, "model": "Nano Banana"}
|
||||
|
||||
# Benefits — Nano Banana Pro
|
||||
benefits_prompt = (
|
||||
f"Clean infographic-style illustration showing health benefits of "
|
||||
f"{category} supplements: strong bones, immune support, energy, vitality. "
|
||||
f"Modern flat design, warm gold/green/cream palette. "
|
||||
f"Professional, suitable for a premium UK health brand website. No text."
|
||||
)
|
||||
fname, mime = _generate_image(benefits_prompt, IMG_PRO)
|
||||
results["benefits"] = {"filename": fname, "mime": mime, "model": "Nano Banana Pro"}
|
||||
|
||||
return results
|
||||
194
app.py
Normal file
194
app.py
Normal file
@@ -0,0 +1,194 @@
|
||||
"""JustVitamin × QuikCue — AI Content Engine
|
||||
Live proposal site with real Gemini-powered demos."""
|
||||
|
||||
import os, json, time, traceback
|
||||
from pathlib import Path
|
||||
from flask import (Flask, render_template, jsonify, request,
|
||||
send_from_directory, redirect)
|
||||
|
||||
from scraper import scrape_product, scrape_competitor
|
||||
from ai_engine import (generate_asset_pack, competitor_xray, pdp_surgeon,
|
||||
optimise_pdp_copy, generate_product_images)
|
||||
|
||||
app = Flask(__name__,
|
||||
static_folder="static",
|
||||
template_folder="templates")
|
||||
|
||||
GEN_DIR = Path(__file__).parent / "generated"
|
||||
GEN_DIR.mkdir(exist_ok=True)
|
||||
|
||||
# ── Page routes ──────────────────────────────────────────────
|
||||
|
||||
@app.route("/")
|
||||
def index():
|
||||
return render_template("index.html")
|
||||
|
||||
@app.route("/dashboard")
|
||||
def dashboard():
|
||||
return send_from_directory("static/dashboard", "index.html")
|
||||
|
||||
@app.route("/dashboard/jv_data.json")
|
||||
def dashboard_data():
|
||||
return send_from_directory("static/dashboard", "jv_data.json")
|
||||
|
||||
@app.route("/proposal")
|
||||
def proposal():
|
||||
return send_from_directory("static/proposal", "index.html")
|
||||
|
||||
@app.route("/offer")
|
||||
def offer():
|
||||
return send_from_directory("static/offer", "index.html")
|
||||
|
||||
@app.route("/generated/<path:filename>")
|
||||
def serve_generated(filename):
|
||||
return send_from_directory(GEN_DIR, filename)
|
||||
|
||||
|
||||
# ── API: Scrape ──────────────────────────────────────────────
|
||||
|
||||
@app.route("/api/scrape", methods=["POST"])
|
||||
def api_scrape():
|
||||
"""Scrape a JustVitamins product page."""
|
||||
url = request.json.get("url", "").strip()
|
||||
if not url:
|
||||
return jsonify({"error": "No URL provided"}), 400
|
||||
try:
|
||||
data = scrape_product(url)
|
||||
if not data.get("title"):
|
||||
return jsonify({"error": "Could not find product. Check URL."}), 400
|
||||
return jsonify(data)
|
||||
except Exception as e:
|
||||
traceback.print_exc()
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
@app.route("/api/scrape-competitor", methods=["POST"])
|
||||
def api_scrape_competitor():
|
||||
"""Scrape any competitor product page."""
|
||||
url = request.json.get("url", "").strip()
|
||||
if not url:
|
||||
return jsonify({"error": "No URL provided"}), 400
|
||||
try:
|
||||
data = scrape_competitor(url)
|
||||
if not data.get("title"):
|
||||
return jsonify({"error": "Could not extract product data."}), 400
|
||||
return jsonify(data)
|
||||
except Exception as e:
|
||||
traceback.print_exc()
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
# ── API: Demo A — 12-Asset Pack ──────────────────────────────
|
||||
|
||||
@app.route("/api/generate-pack", methods=["POST"])
|
||||
def api_generate_pack():
|
||||
"""Generate a full 12-asset marketing pack from product data."""
|
||||
product = request.json
|
||||
if not product:
|
||||
return jsonify({"error": "No product data"}), 400
|
||||
try:
|
||||
t0 = time.time()
|
||||
pack = generate_asset_pack(product)
|
||||
pack["_generation_time"] = f"{time.time()-t0:.1f}s"
|
||||
pack["_product_title"] = product.get("title", "")
|
||||
return jsonify(pack)
|
||||
except Exception as e:
|
||||
traceback.print_exc()
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
# ── API: Demo B — Competitor X-Ray ───────────────────────────
|
||||
|
||||
@app.route("/api/competitor-xray", methods=["POST"])
|
||||
def api_competitor_xray():
|
||||
"""Scrape competitor + run AI analysis."""
|
||||
url = request.json.get("url", "").strip()
|
||||
if not url:
|
||||
return jsonify({"error": "No URL provided"}), 400
|
||||
try:
|
||||
t0 = time.time()
|
||||
comp_data = scrape_competitor(url)
|
||||
if not comp_data.get("title"):
|
||||
return jsonify({"error": "Could not scrape competitor page."}), 400
|
||||
analysis = competitor_xray(comp_data)
|
||||
analysis["_scrape_data"] = {
|
||||
"title": comp_data.get("title"),
|
||||
"price": comp_data.get("price"),
|
||||
"brand": comp_data.get("brand"),
|
||||
"url": url,
|
||||
}
|
||||
analysis["_generation_time"] = f"{time.time()-t0:.1f}s"
|
||||
return jsonify(analysis)
|
||||
except Exception as e:
|
||||
traceback.print_exc()
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
# ── API: Demo C — PDP Surgeon ────────────────────────────────
|
||||
|
||||
@app.route("/api/pdp-surgeon", methods=["POST"])
|
||||
def api_pdp_surgeon():
|
||||
"""Rewrite PDP copy in a given style."""
|
||||
data = request.json or {}
|
||||
product = data.get("product")
|
||||
style = data.get("style", "balanced")
|
||||
if not product:
|
||||
return jsonify({"error": "No product data"}), 400
|
||||
try:
|
||||
t0 = time.time()
|
||||
result = pdp_surgeon(product, style)
|
||||
result["_generation_time"] = f"{time.time()-t0:.1f}s"
|
||||
return jsonify(result)
|
||||
except Exception as e:
|
||||
traceback.print_exc()
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
# ── API: Full PDP Optimise ───────────────────────────────────
|
||||
|
||||
@app.route("/api/optimise", methods=["POST"])
|
||||
def api_optimise():
|
||||
"""Full PDP rewrite — scrape + AI copy."""
|
||||
product = request.json
|
||||
if not product:
|
||||
return jsonify({"error": "No product data"}), 400
|
||||
try:
|
||||
t0 = time.time()
|
||||
copy = optimise_pdp_copy(product)
|
||||
copy["_generation_time"] = f"{time.time()-t0:.1f}s"
|
||||
return jsonify(copy)
|
||||
except Exception as e:
|
||||
traceback.print_exc()
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
# ── API: Image Generation ────────────────────────────────────
|
||||
|
||||
@app.route("/api/generate-images", methods=["POST"])
|
||||
def api_generate_images():
|
||||
"""Generate AI product images via Nano Banana / Pro."""
|
||||
product = request.json
|
||||
if not product:
|
||||
return jsonify({"error": "No product data"}), 400
|
||||
try:
|
||||
t0 = time.time()
|
||||
images = generate_product_images(product)
|
||||
images["_generation_time"] = f"{time.time()-t0:.1f}s"
|
||||
return jsonify(images)
|
||||
except Exception as e:
|
||||
traceback.print_exc()
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
# ── Health check ─────────────────────────────────────────────
|
||||
|
||||
@app.route("/api/health")
|
||||
def health():
|
||||
return jsonify({
|
||||
"status": "ok",
|
||||
"gemini_key_set": bool(os.environ.get("GEMINI_API_KEY")),
|
||||
})
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(host="0.0.0.0", port=5050, debug=True)
|
||||
@@ -4,6 +4,10 @@ services:
|
||||
justvitamin:
|
||||
image: justvitamin:latest
|
||||
build: .
|
||||
environment:
|
||||
- GEMINI_API_KEY=AIzaSyCHnesXLjPw-UgeZaQotut66bgjFdvy12E
|
||||
volumes:
|
||||
- jv-generated:/app/generated
|
||||
networks:
|
||||
- dokploy-network
|
||||
deploy:
|
||||
@@ -12,11 +16,14 @@ services:
|
||||
- "traefik.http.routers.justvitamin.rule=Host(`justvitamin.quikcue.com`)"
|
||||
- "traefik.http.routers.justvitamin.entrypoints=websecure"
|
||||
- "traefik.http.routers.justvitamin.tls.certResolver=letsencrypt"
|
||||
- "traefik.http.services.justvitamin.loadbalancer.server.port=80"
|
||||
- "traefik.http.services.justvitamin.loadbalancer.server.port=5050"
|
||||
replicas: 1
|
||||
restart_policy:
|
||||
condition: on-failure
|
||||
|
||||
volumes:
|
||||
jv-generated:
|
||||
|
||||
networks:
|
||||
dokploy-network:
|
||||
external: true
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>404 — JustVitamin × QuikCue</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="page" style="text-align:center;padding:6rem 1.5rem">
|
||||
<h1 style="font-size:4rem;margin-bottom:0.5rem"><span class="accent">404</span></h1>
|
||||
<p class="subtitle" style="margin:0 auto 2rem">This page doesn't exist. But the content engine does.</p>
|
||||
<a href="/" class="btn btn-primary">← Back to the Proposal</a>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
1209
html/css/style.css
1209
html/css/style.css
File diff suppressed because it is too large
Load Diff
656
html/index.html
656
html/index.html
@@ -1,656 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JustVitamin × QuikCue — AI Content Engine Proposal</title>
|
||||
<meta name="description" content="What if one product input generated 12 ready-to-ship marketing assets in 30 seconds? See the live demos.">
|
||||
<meta property="og:title" content="JustVitamin × QuikCue — AI Content Engine">
|
||||
<meta property="og:description" content="One product. 12 assets. 30 seconds. See the demos.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://justvitamin.quikcue.com">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="canonical" href="https://justvitamin.quikcue.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ═══════════════ NAV ═══════════════ -->
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="logo">
|
||||
<span style="color:var(--accent)">JustVitamin</span>
|
||||
<span class="dot">×</span>
|
||||
<span class="brand">QuikCue</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#dashboard">Dashboard</a>
|
||||
<a href="#offer">Offer</a>
|
||||
<a href="#demo-a">Demo A</a>
|
||||
<a href="#demo-b">Demo B</a>
|
||||
<a href="#demo-c">Demo C</a>
|
||||
<a href="#cta" class="active">Let's Talk</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="page">
|
||||
|
||||
<!-- ═══════════════ HERO ═══════════════ -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-eyebrow">
|
||||
<span class="pill">LIVE PROPOSAL</span>
|
||||
Prepared for JustVitamin — March 2026
|
||||
</div>
|
||||
<h1>
|
||||
You don't have a content problem.<br>
|
||||
You have a <span class="accent">content engine</span> problem.
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
What if one product input exploded into 12 ready-to-ship marketing assets in 30 seconds?
|
||||
No briefs. No freelancers. No waiting. Just <strong style="color:var(--text)">one system that never sleeps</strong>.
|
||||
</p>
|
||||
<div class="btn-row">
|
||||
<a href="#demo-a" class="btn btn-cta">▶ See the Demos</a>
|
||||
<a href="#dashboard" class="btn btn-outline">📊 View the Data</a>
|
||||
<a href="#offer" class="btn btn-ghost">💰 See the Offer</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-value" data-count="12">0</span>
|
||||
<span class="hero-stat-label">Assets per product</span>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-value" data-count="30">0</span>
|
||||
<span class="hero-stat-label">Seconds to generate</span>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-value" data-count="50" data-suffix="x">0</span>
|
||||
<span class="hero-stat-label">Faster than manual</span>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-value" data-count="0" data-suffix="">$0</span>
|
||||
<span class="hero-stat-label">Cost per additional asset</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ DASHBOARD ═══════════════ -->
|
||||
<section class="section" id="dashboard">
|
||||
<div class="animate-on-scroll">
|
||||
<div class="section-label">The Opportunity</div>
|
||||
<h2>Your content velocity is leaving revenue on the table</h2>
|
||||
<p class="subtitle-sm">Here's what the data shows — and what changes when you turn on the engine.</p>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-grid animate-on-scroll">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" data-count="3">0</div>
|
||||
<div class="stat-label">Assets created / week</div>
|
||||
<div class="stat-delta" style="background:rgba(239,68,68,0.12);color:#f87171">↓ Current pace</div>
|
||||
</div>
|
||||
<div class="stat-card gold">
|
||||
<div class="stat-number" data-count="150" data-prefix="">0</div>
|
||||
<div class="stat-label">Assets / week with engine</div>
|
||||
<div class="stat-delta" style="background:rgba(245,158,11,0.12);color:var(--gold)">↑ 50x increase</div>
|
||||
</div>
|
||||
<div class="stat-card blue">
|
||||
<div class="stat-number" data-count="42" data-suffix="h">0</div>
|
||||
<div class="stat-label">Hours saved / week</div>
|
||||
<div class="stat-delta" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ Reallocate to strategy</div>
|
||||
</div>
|
||||
<div class="stat-card purple">
|
||||
<div class="stat-number" data-count="23" data-suffix="%">0</div>
|
||||
<div class="stat-label">Avg conversion lift</div>
|
||||
<div class="stat-delta" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ AI-optimized copy</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container animate-on-scroll">
|
||||
<div class="chart-title">Content Production: Now vs. AI Engine</div>
|
||||
<div class="chart-bars">
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">PDP Copy</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill dim" data-width="8" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">2/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">+ AI Engine</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill green" data-width="90" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">45/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">Ad Creatives</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill dim" data-width="12" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">3/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">+ AI Engine</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill gold" data-width="80" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">40/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">Email / SMS</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill dim" data-width="6" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">1/wk</div>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="chart-row-label">+ AI Engine</div>
|
||||
<div class="chart-bar-track">
|
||||
<div class="chart-bar-fill blue" data-width="70" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="chart-row-value">35/wk</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ OFFER ═══════════════ -->
|
||||
<section class="section" id="offer">
|
||||
<div class="animate-on-scroll">
|
||||
<div class="section-label">The Offer</div>
|
||||
<h2>Your AI Content Engine — built, trained, and deployed for JustVitamin</h2>
|
||||
<p class="subtitle-sm">Not a generic tool. A <strong style="color:var(--text)">custom system</strong> trained on your brand voice, your compliance rules, your customer data.</p>
|
||||
</div>
|
||||
|
||||
<div class="offer-grid animate-on-scroll">
|
||||
<!-- Starter -->
|
||||
<div class="offer-card">
|
||||
<h3>🧪 Proof of Concept</h3>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin-top:0.5rem">See it work on your actual products. Zero risk.</p>
|
||||
<div class="offer-price">$0 <span>for the first 7 days</span></div>
|
||||
<ul class="offer-list">
|
||||
<li class="highlight">All 3 demos built for your catalog</li>
|
||||
<li>5 products run through the full engine</li>
|
||||
<li>12 assets per product generated</li>
|
||||
<li>Side-by-side competitor analysis</li>
|
||||
<li>PDP before/after with annotations</li>
|
||||
<li>Full conversion audit report</li>
|
||||
</ul>
|
||||
<a href="#cta" class="btn btn-outline" style="width:100%;justify-content:center">Start Free Proof →</a>
|
||||
</div>
|
||||
|
||||
<!-- Full Engine -->
|
||||
<div class="offer-card featured">
|
||||
<h3>⚡ Full Content Engine</h3>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin-top:0.5rem">Unlimited generation. Your team's content co-pilot.</p>
|
||||
<div class="offer-price">$2,500 <span>/ month</span></div>
|
||||
<ul class="offer-list">
|
||||
<li class="highlight">Everything in Proof of Concept</li>
|
||||
<li class="highlight">Unlimited asset generation</li>
|
||||
<li class="highlight">Custom brand voice training</li>
|
||||
<li>Competitor monitoring (5 brands)</li>
|
||||
<li>Weekly PDP optimization reports</li>
|
||||
<li>TikTok/UGC script generator</li>
|
||||
<li>Email + SMS copy engine</li>
|
||||
<li>SEO meta optimization</li>
|
||||
<li>Compliance-safe output guarantee</li>
|
||||
<li>Dedicated Slack channel</li>
|
||||
<li>Monthly strategy call</li>
|
||||
</ul>
|
||||
<a href="#cta" class="btn btn-cta" style="width:100%;justify-content:center">Get the Engine →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin-top:2rem" class="animate-on-scroll">
|
||||
<p style="font-size:0.85rem;color:var(--text-dim)">
|
||||
💡 ROI math: If the engine lifts conversion by just 5% on your top 10 SKUs, that's an estimated
|
||||
<strong style="color:var(--gold)">$15k–40k/mo in additional revenue</strong> — for $2,500/mo.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ DEMO A ═══════════════ -->
|
||||
<section class="demo-section" id="demo-a">
|
||||
<div class="demo-header animate-on-scroll">
|
||||
<span class="demo-badge a">⚡ DEMO A</span>
|
||||
<h2>One Product → 12 Assets in 30 Seconds</h2>
|
||||
<p class="subtitle-sm">Enter a product. Press the button. Watch an entire marketing pack materialize.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-input-area animate-on-scroll">
|
||||
<div class="demo-input-row">
|
||||
<div class="demo-input-group">
|
||||
<label>Product Name or Shopify URL</label>
|
||||
<input type="text" class="demo-input" id="demoA-input"
|
||||
value="JustVitamin D3 5000 IU — High-Potency Sunshine Vitamin"
|
||||
placeholder="e.g., JustVitamin Magnesium Glycinate 400mg">
|
||||
</div>
|
||||
<button class="btn-generate" id="demoA-btn" onclick="runDemoA()">
|
||||
🔴 Generate the Whole Pack
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bundle-output" id="demoA-output">
|
||||
<div class="bundle-counter">
|
||||
<span class="count" id="demoA-count">0</span> / 12 assets generated
|
||||
<span style="margin-left:auto;font-size:0.72rem;color:var(--text-dim)" id="demoA-timer"></span>
|
||||
</div>
|
||||
|
||||
<div class="asset-grid" id="demoA-assets">
|
||||
<!-- Asset 1: Hero Angle 1 -->
|
||||
<div class="asset-card" data-delay="0">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type hero">Hero Angle</span>
|
||||
<span class="asset-card-number">#1</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>"The Sunshine Vitamin 9 Out of 10 Americans Need More Of"</strong>
|
||||
<ul>
|
||||
<li>Targets: Fear of deficiency</li>
|
||||
<li>Angle: Urgency + statistics</li>
|
||||
<li>Best for: Facebook ads, PDP hero</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 2: Hero Angle 2 -->
|
||||
<div class="asset-card" data-delay="100">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type hero">Hero Angle</span>
|
||||
<span class="asset-card-number">#2</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>"One Capsule. 5,000 IU. Zero Guesswork."</strong>
|
||||
<ul>
|
||||
<li>Targets: Simplicity seekers</li>
|
||||
<li>Angle: Ease + precision dosing</li>
|
||||
<li>Best for: Google Shopping, email</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 3: Hero Angle 3 -->
|
||||
<div class="asset-card" data-delay="200">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type hero">Hero Angle</span>
|
||||
<span class="asset-card-number">#3</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>"What Your Multivitamin Isn't Giving You"</strong>
|
||||
<ul>
|
||||
<li>Targets: Existing supplement users</li>
|
||||
<li>Angle: Gap in current routine</li>
|
||||
<li>Best for: TikTok hooks, comparison ads</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 4: PDP Copy -->
|
||||
<div class="asset-card" data-delay="300">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type pdp">PDP Copy</span>
|
||||
<span class="asset-card-number">#4</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Headline:</strong> "Sunshine in a Capsule — High-Potency D3 Your Body Actually Absorbs"<br><br>
|
||||
<strong>Bullets:</strong>
|
||||
<ul>
|
||||
<li>5,000 IU per softgel — clinical-strength dose</li>
|
||||
<li>Enhanced with MCT oil for 3x better absorption</li>
|
||||
<li>3rd-party tested for purity & potency</li>
|
||||
<li>No artificial fillers, soy-free, gluten-free</li>
|
||||
<li>365 capsules — full year supply in one bottle</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 5: FAQ -->
|
||||
<div class="asset-card" data-delay="400">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type pdp">FAQ Block</span>
|
||||
<span class="asset-card-number">#5</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Q: How much D3 should I take daily?</strong><br>
|
||||
A: Most adults benefit from 2,000–5,000 IU daily. Our softgels deliver a precise 5,000 IU dose.<br><br>
|
||||
<strong>Q: Can I take this with other supplements?</strong><br>
|
||||
A: Yes — D3 pairs especially well with K2 and magnesium for optimal calcium absorption.<br><br>
|
||||
<strong>Q: When will I notice a difference?</strong><br>
|
||||
A: Most customers report improved energy and mood within 2–4 weeks of daily use.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 6: Ad Hooks -->
|
||||
<div class="asset-card" data-delay="500">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type ad">5 Ad Hooks</span>
|
||||
<span class="asset-card-number">#6</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<ul>
|
||||
<li><strong>"Your doctor won't say this — but your D3 levels are probably tanked."</strong></li>
|
||||
<li><strong>"I stopped buying cheap vitamin D after I saw my blood test."</strong></li>
|
||||
<li><strong>"POV: You finally find a D3 that actually absorbs."</strong></li>
|
||||
<li><strong>"$0.07/day for the vitamin that changes everything."</strong></li>
|
||||
<li><strong>"3 signs you're D3 deficient (and don't know it)."</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 7: Email Copy -->
|
||||
<div class="asset-card" data-delay="600">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type email">Email Subjects</span>
|
||||
<span class="asset-card-number">#7</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Subject 1:</strong> "Your bones called. They need this."<br>
|
||||
<em style="color:var(--text-dim)">Preview: The #1 vitamin deficiency in America — and the $0.07 fix</em><br><br>
|
||||
<strong>Subject 2:</strong> "We tested 14 D3 brands. Here's what we found."<br>
|
||||
<em style="color:var(--text-dim)">Preview: Absorption rates ranged from 12% to 94%. Guess where ours landed.</em><br><br>
|
||||
<strong>Subject 3:</strong> "Still taking your old D3? Read this first."<br>
|
||||
<em style="color:var(--text-dim)">Preview: Most D3 supplements use the wrong form. Here's what to look for.</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 8: TikTok Script -->
|
||||
<div class="asset-card" data-delay="700">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type video">TikTok / UGC Script</span>
|
||||
<span class="asset-card-number">#8</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>15s Script — "The D3 Test"</strong><br><br>
|
||||
<em>[0–3s]</em> "Quick — do you know your Vitamin D level?"<br>
|
||||
<em>[3–7s]</em> "42% of Americans are deficient. I was one of them."<br>
|
||||
<em>[7–12s]</em> *holds up bottle* "This is the only D3 I trust. 5,000 IU, MCT oil for absorption, third-party tested."<br>
|
||||
<em>[12–15s]</em> "Link in bio. Your future self will thank you."<br><br>
|
||||
<span class="annotation">Hook: Personal story + stat = 2.3x avg watch time</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 9: Blog Outline -->
|
||||
<div class="asset-card" data-delay="800">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type blog">Blog Outline</span>
|
||||
<span class="asset-card-number">#9</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>"The Complete Guide to Vitamin D3: Dosage, Benefits, and What Most Brands Get Wrong"</strong>
|
||||
<ul>
|
||||
<li>H2: Why 42% of Americans are D3 deficient</li>
|
||||
<li>H2: D3 vs D2 — the form that actually works</li>
|
||||
<li>H2: How MCT oil changes absorption rates</li>
|
||||
<li>H2: The dosage debate: 1,000 IU vs 5,000 IU</li>
|
||||
<li>H2: What to look for on the label (and what to avoid)</li>
|
||||
<li>CTA: Shop JustVitamin D3 →</li>
|
||||
</ul>
|
||||
<span class="annotation">SEO target: "best vitamin d3 supplement" — 33,100 mo/searches</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 10: Meta -->
|
||||
<div class="asset-card" data-delay="900">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type seo">Meta Title + Description</span>
|
||||
<span class="asset-card-number">#10</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Title:</strong> JustVitamin D3 5000 IU — High-Absorption Sunshine Vitamin | 365 Count<br><br>
|
||||
<strong>Description:</strong> Clinical-strength Vitamin D3 with MCT oil for 3x better absorption. 5,000 IU per softgel, 3rd-party tested, 365-day supply. Free shipping on orders $35+.<br><br>
|
||||
<span class="annotation">60 chars title / 155 chars desc — Google SERP optimized</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 11: Alt Text -->
|
||||
<div class="asset-card" data-delay="1000">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type a11y">Alt Text + Filenames</span>
|
||||
<span class="asset-card-number">#11</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Hero image:</strong><br>
|
||||
Alt: "JustVitamin D3 5000 IU bottle with softgels on white background"<br>
|
||||
File: <code style="color:var(--accent);font-size:0.8rem">justvitamin-d3-5000iu-bottle-front.jpg</code><br><br>
|
||||
<strong>Lifestyle image:</strong><br>
|
||||
Alt: "Woman holding JustVitamin D3 softgel with morning sunlight"<br>
|
||||
File: <code style="color:var(--accent);font-size:0.8rem">justvitamin-d3-lifestyle-morning-routine.jpg</code><br><br>
|
||||
<span class="annotation">ADA-compliant alt text + SEO-friendly filenames</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset 12: Variant Angles -->
|
||||
<div class="asset-card" data-delay="1100">
|
||||
<div class="asset-card-header">
|
||||
<span class="asset-type ad">Bonus: A/B Variants</span>
|
||||
<span class="asset-card-number">#12</span>
|
||||
</div>
|
||||
<div class="asset-content">
|
||||
<strong>Variant A (Rational):</strong> "5,000 IU of D3 with MCT oil for 3x absorption. 365-day supply for $24.99."<br><br>
|
||||
<strong>Variant B (Emotional):</strong> "Remember when you had energy? Your D3 levels might be the reason you don't."<br><br>
|
||||
<strong>Variant C (Social Proof):</strong> "47,000+ customers switched to JustVitamin D3. Here's why they're not going back."<br><br>
|
||||
<span class="annotation">Test all 3 — let data pick the winner</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bundle-download" id="demoA-download">
|
||||
<button class="btn btn-primary" onclick="alert('In the full engine, this downloads a ZIP with all 12 assets in formatted files — Google Docs, CSV, JSON, and Shopify-ready HTML.')">
|
||||
📦 Download Full Asset Pack (.zip)
|
||||
</button>
|
||||
<span style="font-family:var(--font-mono);font-size:0.72rem;color:var(--text-dim)">12 files • PDP, Ads, Email, SEO, Scripts</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ DEMO B ═══════════════ -->
|
||||
<section class="demo-section" id="demo-b">
|
||||
<div class="demo-header animate-on-scroll">
|
||||
<span class="demo-badge b">🔍 DEMO B</span>
|
||||
<h2>Competitor X-Ray → Instant Offer Upgrade</h2>
|
||||
<p class="subtitle-sm">Paste a competitor URL. We reverse-engineer their strategy and build a better version for JustVitamin.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-input-area animate-on-scroll">
|
||||
<div class="demo-input-row">
|
||||
<div class="demo-input-group">
|
||||
<label>Competitor Product URL</label>
|
||||
<input type="text" class="demo-input" id="demoB-input"
|
||||
value="https://www.naturemade.com/products/vitamin-d3-5000-iu"
|
||||
placeholder="e.g., https://competitor.com/product-page">
|
||||
</div>
|
||||
<button class="btn-generate" id="demoB-btn" onclick="runDemoB()" style="background:var(--blue)">
|
||||
🔍 X-Ray This Competitor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split-screen animate-on-scroll" id="demoB-output" style="display:none">
|
||||
<!-- LEFT: Competitor Analysis -->
|
||||
<div class="split-side split-left">
|
||||
<span class="split-label competitor">❌ Competitor: Nature Made</span>
|
||||
<div class="split-content" id="demoB-left">
|
||||
<div class="xray-item">
|
||||
<div class="xray-item-label">What they're really selling</div>
|
||||
<div class="xray-item-value">
|
||||
<strong>"Pharmacy-shelf credibility at commodity pricing."</strong> They sell trust through familiarity, not superiority.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="xray-item">
|
||||
<div class="xray-item-label">Top 5 Persuasion Tactics</div>
|
||||
<ol class="xray-tactics">
|
||||
<li><strong>#1 Pharmacist Recommended</strong> — borrowed authority from a professional class</li>
|
||||
<li><strong>USP Verified seal</strong> — third-party trust without explaining what it means</li>
|
||||
<li><strong>"Doctor recommended"</strong> — vague claim, no specific study cited</li>
|
||||
<li><strong>Low price anchoring</strong> — makes you compare on cost, not quality</li>
|
||||
<li><strong>Walmart/CVS distribution</strong> — availability = legitimacy heuristic</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="xray-item">
|
||||
<div class="xray-item-label">Their Weakest Claim / Gap</div>
|
||||
<div class="xray-item-value gap">
|
||||
⚠️ No mention of absorption technology. No bioavailability data. No explanation of the D3 form used. This is their kill zone — they can't defend here.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: JustVitamin Improved -->
|
||||
<div class="split-side split-right">
|
||||
<span class="split-label yours">✓ JustVitamin — Upgraded</span>
|
||||
<div class="split-content" id="demoB-right">
|
||||
<div class="improved-hero">
|
||||
<h4>"They sell vitamin D. We engineered D3 absorption."</h4>
|
||||
<p>Most D3 supplements dissolve in your stomach and hope for the best. JustVitamin D3 is suspended in MCT oil — the same carrier your body uses to absorb fat-soluble vitamins. That's not marketing. That's biochemistry.</p>
|
||||
<p style="margin-top:0.75rem"><strong style="color:var(--accent)">5,000 IU × 3x Absorption × 365 Days = $0.07/day of actual D3 your body uses.</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="xray-item" style="margin-top:1.5rem">
|
||||
<div class="xray-item-label">3 Differentiators + Proof Ideas</div>
|
||||
<ul class="differentiator-list">
|
||||
<li>
|
||||
<span class="diff-icon">🧬</span>
|
||||
<span class="diff-text"><strong>MCT-oil carrier technology</strong> — Show a side-by-side dissolution test. 30-second video of JustVitamin vs dry tablet in simulated stomach acid.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="diff-icon">🔬</span>
|
||||
<span class="diff-text"><strong>Batch-specific COA on every bottle</strong> — QR code → actual lab report. Nature Made has a generic seal. You have the receipt.</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="diff-icon">📊</span>
|
||||
<span class="diff-text"><strong>365-day supply = commitment framing</strong> — "One bottle. One year. One decision." vs their 100-count upsell treadmill.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="compliance-notes">
|
||||
<h5>⚠️ Do Not Say — Compliance Notes</h5>
|
||||
<ul>
|
||||
<li>"Cures" or "treats" any condition</li>
|
||||
<li>"Clinically proven" without citing a specific study</li>
|
||||
<li>"Better than Nature Made" — comparative claims need substantiation</li>
|
||||
<li>"Doctor approved" without documented endorsement</li>
|
||||
<li>Any disease-specific claims (FDA structure/function rules)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ DEMO C ═══════════════ -->
|
||||
<section class="demo-section" id="demo-c">
|
||||
<div class="demo-header animate-on-scroll">
|
||||
<span class="demo-badge c">🎨 DEMO C</span>
|
||||
<h2>PDP Surgeon: Before / After Slider</h2>
|
||||
<p class="subtitle-sm">Drag the slider to reveal the transformation. Every change is annotated with <em>why</em> it lifts conversion.</p>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group animate-on-scroll" id="demoC-toggles">
|
||||
<button class="toggle-btn active" data-style="default" onclick="switchStyle('default', this)">✓ Balanced</button>
|
||||
<button class="toggle-btn premium" data-style="premium" onclick="switchStyle('premium', this)">💎 Make it Premium</button>
|
||||
<button class="toggle-btn dr" data-style="dr" onclick="switchStyle('dr', this)">🎯 Direct Response</button>
|
||||
<button class="toggle-btn medical" data-style="medical" onclick="switchStyle('medical', this)">🏥 Medical-Safe</button>
|
||||
</div>
|
||||
|
||||
<div class="slider-container animate-on-scroll" id="demoC-slider">
|
||||
<div class="slider-wrapper" id="slider-wrapper">
|
||||
<!-- BEFORE -->
|
||||
<div class="slider-before" id="slider-before">
|
||||
<span class="slider-side-label before">✕ Before</span>
|
||||
<div class="slider-copy" id="before-copy">
|
||||
<h4>Vitamin D3 Supplement</h4>
|
||||
<p>Our Vitamin D3 supplement is a high-quality product that helps support bone health and immune function. Each capsule contains 5000 IU of Vitamin D3.</p>
|
||||
|
||||
<h4>Product Details</h4>
|
||||
<p class="lowlight">Made with quality ingredients</p>
|
||||
<p class="lowlight">Supports overall health and wellness</p>
|
||||
<p class="lowlight">Easy to swallow capsules</p>
|
||||
<p class="lowlight">GMP certified facility</p>
|
||||
|
||||
<h4>Directions</h4>
|
||||
<p>Take one capsule daily with a meal or as directed by your healthcare professional.</p>
|
||||
|
||||
<h4>About Us</h4>
|
||||
<p>We are committed to providing high-quality supplements at affordable prices. Our products are manufactured in a GMP-certified facility.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AFTER -->
|
||||
<div class="slider-after" id="slider-after">
|
||||
<span class="slider-side-label after">✓ After — Optimized</span>
|
||||
<div class="slider-copy" id="after-copy">
|
||||
<h4>Sunshine in a Capsule — D3 Your Body Actually Absorbs</h4>
|
||||
<span class="annotation">↑ Benefit-first headline: +34% scroll depth</span>
|
||||
|
||||
<p class="highlight"><strong>5,000 IU of Vitamin D3 suspended in MCT oil for 3x better absorption</strong> — because a vitamin your body can't use is a vitamin you're wasting money on.</p>
|
||||
<span class="annotation">↑ Mechanism + contrast = credibility spike</span>
|
||||
|
||||
<h4>Why 47,000+ Customers Switched</h4>
|
||||
<span class="annotation">↑ Social proof in subhead: +18% time on page</span>
|
||||
<p class="highlight">✓ Clinical-strength 5,000 IU — the dose research actually supports</p>
|
||||
<p class="highlight">✓ MCT oil carrier — fat-soluble vitamins need fat to absorb</p>
|
||||
<p class="highlight">✓ 365-day supply — one bottle, one year, one decision</p>
|
||||
<p class="highlight">✓ Batch-specific lab testing — scan the QR, see the report</p>
|
||||
<span class="annotation">↑ Checkmarks + specifics: +22% add-to-cart</span>
|
||||
|
||||
<h4>$0.07/day. Less than a parking meter.</h4>
|
||||
<span class="annotation">↑ Price reframe to daily cost: +15% conversion</span>
|
||||
|
||||
<p><em>Take one softgel each morning with breakfast. The MCT oil means you don't need to pair it with a fatty meal — it's built in.</em></p>
|
||||
<span class="annotation">↑ Usage clarity removes friction objection</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SLIDER HANDLE -->
|
||||
<div class="slider-handle" id="slider-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:1.5rem;text-align:center" class="animate-on-scroll">
|
||||
<p style="font-size:0.82rem;color:var(--text-dim);font-family:var(--font-mono)">
|
||||
← Drag the slider to compare · Every annotation shows the expected conversion impact →
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ CTA ═══════════════ -->
|
||||
<section class="cta-section" id="cta">
|
||||
<div class="animate-on-scroll">
|
||||
<div class="section-label" style="justify-content:center">Next Step</div>
|
||||
<h2>Ready to turn your catalog into a <span style="color:var(--accent)">content machine</span>?</h2>
|
||||
<p class="subtitle" style="text-align:center;margin:0 auto 2.5rem">
|
||||
We'll run your top 5 products through the engine live on a call.
|
||||
You'll see the output in real time. If it doesn't blow your mind, we shake hands and walk away.
|
||||
</p>
|
||||
<div class="cta-actions">
|
||||
<a href="mailto:omair@quikcue.com?subject=JustVitamin%20×%20QuikCue%20—%20Content%20Engine%20Demo&body=I%20saw%20the%20proposal%20site%20and%20want%20to%20see%20the%20engine%20live.%20Let%27s%20schedule%20a%20call." class="btn btn-cta-large">
|
||||
🚀 Book the Live Demo — 15 min, Zero Commitment
|
||||
</a>
|
||||
<a href="mailto:omair@quikcue.com?subject=JustVitamin%20—%20Start%20Free%20Proof%20of%20Concept" class="btn btn-primary">
|
||||
🧪 Start the Free 7-Day Proof Instead
|
||||
</a>
|
||||
<p class="cta-note">No contracts. No setup fees. We earn it or we don't.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════ FOOTER ═══════════════ -->
|
||||
<footer>
|
||||
<p>© 2026 <a href="https://quikcue.com">QuikCue</a> — Built with intent for JustVitamin</p>
|
||||
<p>Prepared by <a href="mailto:omair@quikcue.com">omair@quikcue.com</a></p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="/js/app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
378
html/js/app.js
378
html/js/app.js
@@ -1,378 +0,0 @@
|
||||
/* ════════════════════════════════════════════════════════════════
|
||||
JustVitamin × QuikCue — Interactive Demos & Animations
|
||||
════════════════════════════════════════════════════════════════ */
|
||||
|
||||
// ── Intersection Observer: Fade-in on scroll ──
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
|
||||
// Trigger chart bars
|
||||
const bars = entry.target.querySelectorAll('.chart-bar-fill[data-width]');
|
||||
bars.forEach((bar, i) => {
|
||||
setTimeout(() => {
|
||||
bar.style.width = bar.dataset.width + '%';
|
||||
}, i * 150);
|
||||
});
|
||||
|
||||
// Trigger stat counters
|
||||
const counters = entry.target.querySelectorAll('[data-count]');
|
||||
counters.forEach(el => animateCounter(el));
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
|
||||
|
||||
// ── Animate hero stats on load ──
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.hero-stat-value[data-count]').forEach(el => animateCounter(el));
|
||||
}, 500);
|
||||
|
||||
// ── Initialize slider ──
|
||||
initSlider();
|
||||
|
||||
// ── Smooth scroll for nav links ──
|
||||
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
const target = document.querySelector(link.getAttribute('href'));
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ── Active nav tracking ──
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.nav-links a');
|
||||
|
||||
const navObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const id = entry.target.getAttribute('id');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.toggle('active', link.getAttribute('href') === '#' + id);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3, rootMargin: '-80px 0px -50% 0px' });
|
||||
|
||||
sections.forEach(sec => navObserver.observe(sec));
|
||||
});
|
||||
|
||||
// ── Counter Animation ──
|
||||
function animateCounter(el) {
|
||||
const target = parseInt(el.dataset.count);
|
||||
const suffix = el.dataset.suffix || '';
|
||||
const prefix = el.dataset.prefix || '';
|
||||
const duration = 1200;
|
||||
const start = performance.now();
|
||||
|
||||
if (target === 0) {
|
||||
el.textContent = prefix + '$0' + suffix;
|
||||
return;
|
||||
}
|
||||
|
||||
function tick(now) {
|
||||
const elapsed = now - start;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
|
||||
const current = Math.round(target * eased);
|
||||
el.textContent = prefix + current.toLocaleString() + suffix;
|
||||
if (progress < 1) requestAnimationFrame(tick);
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════
|
||||
// DEMO A: One Product → 12 Assets
|
||||
// ════════════════════════════════════════════════════════════════
|
||||
|
||||
function runDemoA() {
|
||||
const btn = document.getElementById('demoA-btn');
|
||||
const output = document.getElementById('demoA-output');
|
||||
const counter = document.getElementById('demoA-count');
|
||||
const timer = document.getElementById('demoA-timer');
|
||||
const download = document.getElementById('demoA-download');
|
||||
const cards = document.querySelectorAll('#demoA-assets .asset-card');
|
||||
|
||||
// Loading state
|
||||
btn.classList.add('loading');
|
||||
btn.textContent = 'Generating...';
|
||||
output.classList.add('active');
|
||||
download.classList.remove('active');
|
||||
|
||||
// Reset cards
|
||||
cards.forEach(c => c.classList.remove('revealed'));
|
||||
let count = 0;
|
||||
counter.textContent = '0';
|
||||
|
||||
const startTime = performance.now();
|
||||
|
||||
// Update timer
|
||||
const timerInterval = setInterval(() => {
|
||||
const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
|
||||
timer.textContent = elapsed + 's';
|
||||
}, 100);
|
||||
|
||||
// Reveal cards one by one
|
||||
const revealNext = (index) => {
|
||||
if (index >= cards.length) {
|
||||
// Done!
|
||||
clearInterval(timerInterval);
|
||||
const totalTime = ((performance.now() - startTime) / 1000).toFixed(1);
|
||||
timer.textContent = totalTime + 's ✓';
|
||||
btn.classList.remove('loading');
|
||||
btn.textContent = '✓ Pack Generated — Run Again?';
|
||||
btn.style.background = 'var(--accent)';
|
||||
btn.style.color = '#050a08';
|
||||
download.classList.add('active');
|
||||
|
||||
// Scroll to download
|
||||
setTimeout(() => {
|
||||
download.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 300);
|
||||
return;
|
||||
}
|
||||
|
||||
const card = cards[index];
|
||||
const delay = 150 + Math.random() * 200; // Varied timing feels more "real"
|
||||
|
||||
setTimeout(() => {
|
||||
card.classList.add('revealed');
|
||||
count++;
|
||||
counter.textContent = count;
|
||||
|
||||
// Scroll card into view
|
||||
card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
|
||||
revealNext(index + 1);
|
||||
}, delay);
|
||||
};
|
||||
|
||||
// Start reveal after "thinking" pause
|
||||
setTimeout(() => revealNext(0), 800);
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════
|
||||
// DEMO B: Competitor X-Ray
|
||||
// ════════════════════════════════════════════════════════════════
|
||||
|
||||
function runDemoB() {
|
||||
const btn = document.getElementById('demoB-btn');
|
||||
const output = document.getElementById('demoB-output');
|
||||
const left = document.getElementById('demoB-left');
|
||||
const right = document.getElementById('demoB-right');
|
||||
|
||||
// Loading state
|
||||
btn.classList.add('loading');
|
||||
btn.textContent = 'Scanning...';
|
||||
btn.style.background = '#1e40af';
|
||||
|
||||
// Reset
|
||||
left.classList.remove('revealed');
|
||||
right.classList.remove('revealed');
|
||||
|
||||
setTimeout(() => {
|
||||
output.style.display = 'grid';
|
||||
output.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
|
||||
// Reveal left side first
|
||||
setTimeout(() => {
|
||||
left.classList.add('revealed');
|
||||
|
||||
// Then right side
|
||||
setTimeout(() => {
|
||||
right.classList.add('revealed');
|
||||
btn.classList.remove('loading');
|
||||
btn.textContent = '✓ X-Ray Complete — Try Another';
|
||||
btn.style.background = 'var(--accent)';
|
||||
btn.style.color = '#050a08';
|
||||
}, 800);
|
||||
}, 600);
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════
|
||||
// DEMO C: Before/After Slider
|
||||
// ════════════════════════════════════════════════════════════════
|
||||
|
||||
function initSlider() {
|
||||
const wrapper = document.getElementById('slider-wrapper');
|
||||
const handle = document.getElementById('slider-handle');
|
||||
const after = document.getElementById('slider-after');
|
||||
|
||||
if (!wrapper || !handle || !after) return;
|
||||
|
||||
let isDragging = false;
|
||||
|
||||
const setPosition = (x) => {
|
||||
const rect = wrapper.getBoundingClientRect();
|
||||
let percentage = ((x - rect.left) / rect.width) * 100;
|
||||
percentage = Math.max(5, Math.min(95, percentage));
|
||||
|
||||
handle.style.left = percentage + '%';
|
||||
after.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
|
||||
};
|
||||
|
||||
// Mouse events
|
||||
handle.addEventListener('mousedown', (e) => {
|
||||
isDragging = true;
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
setPosition(e.clientX);
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
// Touch events
|
||||
handle.addEventListener('touchstart', (e) => {
|
||||
isDragging = true;
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('touchmove', (e) => {
|
||||
if (!isDragging) return;
|
||||
setPosition(e.touches[0].clientX);
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', () => {
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
// Click anywhere on the wrapper to move slider
|
||||
wrapper.addEventListener('click', (e) => {
|
||||
setPosition(e.clientX);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Style Toggle for Demo C ──
|
||||
|
||||
const styleVariants = {
|
||||
default: {
|
||||
afterTitle: "Sunshine in a Capsule — D3 Your Body Actually Absorbs",
|
||||
afterContent: `
|
||||
<span class="slider-side-label after">✓ After — Optimized</span>
|
||||
<h4>Sunshine in a Capsule — D3 Your Body Actually Absorbs</h4>
|
||||
<span class="annotation">↑ Benefit-first headline: +34% scroll depth</span>
|
||||
|
||||
<p class="highlight"><strong>5,000 IU of Vitamin D3 suspended in MCT oil for 3x better absorption</strong> — because a vitamin your body can't use is a vitamin you're wasting money on.</p>
|
||||
<span class="annotation">↑ Mechanism + contrast = credibility spike</span>
|
||||
|
||||
<h4>Why 47,000+ Customers Switched</h4>
|
||||
<span class="annotation">↑ Social proof in subhead: +18% time on page</span>
|
||||
<p class="highlight">✓ Clinical-strength 5,000 IU — the dose research actually supports</p>
|
||||
<p class="highlight">✓ MCT oil carrier — fat-soluble vitamins need fat to absorb</p>
|
||||
<p class="highlight">✓ 365-day supply — one bottle, one year, one decision</p>
|
||||
<p class="highlight">✓ Batch-specific lab testing — scan the QR, see the report</p>
|
||||
<span class="annotation">↑ Checkmarks + specifics: +22% add-to-cart</span>
|
||||
|
||||
<h4>$0.07/day. Less than a parking meter.</h4>
|
||||
<span class="annotation">↑ Price reframe to daily cost: +15% conversion</span>
|
||||
|
||||
<p><em>Take one softgel each morning with breakfast. The MCT oil means you don't need to pair it with a fatty meal — it's built in.</em></p>
|
||||
<span class="annotation">↑ Usage clarity removes friction objection</span>
|
||||
`
|
||||
},
|
||||
premium: {
|
||||
afterContent: `
|
||||
<span class="slider-side-label after" style="background:rgba(139,92,246,0.15);color:var(--purple)">✓ After — Premium Voice</span>
|
||||
<h4>The D3 Supplement Refined for Those Who Refuse to Compromise</h4>
|
||||
<span class="annotation" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ Aspirational positioning: +28% AOV on premium segments</span>
|
||||
|
||||
<p class="highlight" style="border-left-color:var(--purple)"><strong>Pharmaceutical-grade Vitamin D3, precision-dosed at 5,000 IU</strong>, delivered in a bioavailable MCT oil matrix designed for optimal cellular uptake.</p>
|
||||
<span class="annotation" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ Technical language signals quality: premium buyers respond to specificity</span>
|
||||
|
||||
<h4>Engineered. Not Manufactured.</h4>
|
||||
<p class="highlight" style="border-left-color:var(--purple)">✓ Cholecalciferol sourced from pharmaceutical-grade lanolin</p>
|
||||
<p class="highlight" style="border-left-color:var(--purple)">✓ MCT oil carrier from organic coconut — no palm derivatives</p>
|
||||
<p class="highlight" style="border-left-color:var(--purple)">✓ Every batch independently verified — CoA available by QR</p>
|
||||
<p class="highlight" style="border-left-color:var(--purple)">✓ 365-count — because a premium product shouldn't require monthly reorders</p>
|
||||
<span class="annotation" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ Ingredient sourcing transparency: +41% trust score with $100k+ HHI</span>
|
||||
|
||||
<h4>Your Daily Standard. Elevated.</h4>
|
||||
<span class="annotation" style="background:rgba(139,92,246,0.12);color:var(--purple)">↑ Identity-level CTA: "this is who I am" framing</span>
|
||||
|
||||
<p><em>One softgel with your morning ritual. No additional oil required — the delivery system handles absorption.</em></p>
|
||||
`
|
||||
},
|
||||
dr: {
|
||||
afterContent: `
|
||||
<span class="slider-side-label after" style="background:rgba(239,68,68,0.15);color:var(--cta)">✓ After — Direct Response</span>
|
||||
<h4>WARNING: Your Vitamin D3 Supplement Might Be Doing Nothing</h4>
|
||||
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Pattern interrupt headline: +52% click-through from ads</span>
|
||||
|
||||
<p class="highlight" style="border-left-color:var(--cta)"><strong>Here's the dirty secret the supplement industry won't tell you:</strong> Most D3 supplements use cheap dry powder that your body can barely absorb. You're literally flushing your money down the toilet.</p>
|
||||
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Problem agitation + insider language: builds urgency fast</span>
|
||||
|
||||
<h4>The Fix Takes 2 Seconds a Day:</h4>
|
||||
<p class="highlight" style="border-left-color:var(--cta)">→ 5,000 IU per capsule (that's the REAL dose, not the wimpy 1,000 IU others sell)</p>
|
||||
<p class="highlight" style="border-left-color:var(--cta)">→ MCT oil delivery = 3X better absorption (backed by published research)</p>
|
||||
<p class="highlight" style="border-left-color:var(--cta)">→ 365 capsules per bottle = FULL YEAR SUPPLY for less than a coffee per month</p>
|
||||
<p class="highlight" style="border-left-color:var(--cta)">→ Every single batch tested by an independent lab (we'll show you the report)</p>
|
||||
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Arrow bullets + emphasis caps: +38% read-through rate</span>
|
||||
|
||||
<h4>⚡ 47,293 Customers Can't Be Wrong — Get Yours Before We Sell Out Again</h4>
|
||||
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Exact social proof number + urgency/scarcity: +44% conversion</span>
|
||||
|
||||
<p><strong>🔥 SPECIAL: Order today and get FREE shipping + our D3 Absorption Guide (PDF) — $19 value, yours free.</strong></p>
|
||||
<span class="annotation" style="background:rgba(239,68,68,0.12);color:var(--cta)">↑ Stacked bonuses: classic DR move, still works</span>
|
||||
`
|
||||
},
|
||||
medical: {
|
||||
afterContent: `
|
||||
<span class="slider-side-label after" style="background:rgba(59,130,246,0.15);color:var(--blue)">✓ After — Medical-Safe</span>
|
||||
<h4>Vitamin D3 (Cholecalciferol) 5,000 IU — High-Potency Dietary Supplement</h4>
|
||||
<span class="annotation" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ Clinical nomenclature: builds trust with health-conscious buyers</span>
|
||||
|
||||
<p class="highlight" style="border-left-color:var(--blue)">Each softgel provides 5,000 IU (125 mcg) of Vitamin D3 as cholecalciferol, delivered in a medium-chain triglyceride (MCT) oil base to support bioavailability.*</p>
|
||||
<span class="annotation" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ Precise units (mcg + IU) + asterisk for disclaimer = FDA-compliant</span>
|
||||
|
||||
<h4>Key Product Attributes</h4>
|
||||
<p class="highlight" style="border-left-color:var(--blue)">• Vitamin D contributes to the normal function of the immune system*</p>
|
||||
<p class="highlight" style="border-left-color:var(--blue)">• Vitamin D is needed for normal calcium absorption and bone maintenance*</p>
|
||||
<p class="highlight" style="border-left-color:var(--blue)">• Third-party tested for identity, purity, potency, and composition</p>
|
||||
<p class="highlight" style="border-left-color:var(--blue)">• Free from: soy, gluten, dairy, artificial colors, and preservatives</p>
|
||||
<p class="highlight" style="border-left-color:var(--blue)">• 365 softgels per container (12-month supply at 1 softgel/day)</p>
|
||||
<span class="annotation" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ Structure/function claims only — no disease claims, fully compliant</span>
|
||||
|
||||
<h4>Suggested Use</h4>
|
||||
<p>Take one (1) softgel daily with a meal, or as recommended by your healthcare practitioner. Do not exceed recommended daily intake.</p>
|
||||
|
||||
<p style="margin-top:1rem;font-size:0.78rem;color:var(--text-dim)"><em>*These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease.</em></p>
|
||||
<span class="annotation" style="background:rgba(59,130,246,0.12);color:var(--blue)">↑ FDA-mandated disclaimer: required for all supplement claims</span>
|
||||
`
|
||||
}
|
||||
};
|
||||
|
||||
function switchStyle(style, clickedBtn) {
|
||||
// Update toggle buttons
|
||||
document.querySelectorAll('#demoC-toggles .toggle-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
clickedBtn.classList.add('active');
|
||||
|
||||
// Update after content
|
||||
const afterCopy = document.getElementById('after-copy');
|
||||
const variant = styleVariants[style];
|
||||
if (variant && afterCopy) {
|
||||
afterCopy.innerHTML = variant.afterContent;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Keyboard shortcut: press 1/2/3 to jump to demos ──
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
||||
if (e.key === '1') document.getElementById('demo-a')?.scrollIntoView({ behavior: 'smooth' });
|
||||
if (e.key === '2') document.getElementById('demo-b')?.scrollIntoView({ behavior: 'smooth' });
|
||||
if (e.key === '3') document.getElementById('demo-c')?.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
32
nginx.conf
32
nginx.conf
@@ -1,32 +0,0 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name justvitamin.quikcue.com;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
absolute_redirect off;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
|
||||
location /css/ {
|
||||
expires 7d;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
location /js/ {
|
||||
expires 7d;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
|
||||
gzip on;
|
||||
gzip_types text/html text/css application/javascript text/plain;
|
||||
gzip_min_length 256;
|
||||
|
||||
error_page 404 /404.html;
|
||||
}
|
||||
5
requirements.txt
Normal file
5
requirements.txt
Normal file
@@ -0,0 +1,5 @@
|
||||
flask==3.1.0
|
||||
gunicorn==23.0.0
|
||||
requests==2.32.3
|
||||
beautifulsoup4==4.13.3
|
||||
google-genai==1.5.0
|
||||
197
scraper.py
Normal file
197
scraper.py
Normal file
@@ -0,0 +1,197 @@
|
||||
"""Scrape product pages — JustVitamins specific + generic competitor."""
|
||||
|
||||
import requests
|
||||
from bs4 import BeautifulSoup
|
||||
import re, json
|
||||
|
||||
HEADERS = {
|
||||
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
|
||||
"(KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
|
||||
}
|
||||
|
||||
|
||||
def scrape_product(url: str) -> dict:
|
||||
"""Scrape a JV product URL and return structured product data."""
|
||||
r = requests.get(url, headers=HEADERS, timeout=15)
|
||||
r.raise_for_status()
|
||||
soup = BeautifulSoup(r.text, "html.parser")
|
||||
|
||||
data = {}
|
||||
|
||||
# Title
|
||||
h1 = soup.select_one("h1[itemprop='name']") or soup.select_one("h1")
|
||||
data["title"] = h1.get_text(strip=True) if h1 else ""
|
||||
|
||||
# Subtitle
|
||||
h2 = soup.select_one(".ProdDet h2")
|
||||
data["subtitle"] = h2.get_text(strip=True) if h2 else ""
|
||||
|
||||
# Price from offer microdata
|
||||
offer_price = soup.select_one("meta[itemprop='price']")
|
||||
if offer_price:
|
||||
data["price"] = f"£{offer_price.get('content', '')}"
|
||||
else:
|
||||
price_match = re.search(r'£[\d.]+', soup.get_text())
|
||||
data["price"] = price_match.group(0) if price_match else ""
|
||||
|
||||
# SKU
|
||||
sku = soup.select_one("meta[itemprop='sku']")
|
||||
data["sku"] = sku.get("content", "") if sku else ""
|
||||
|
||||
# Images
|
||||
images = []
|
||||
main_img = soup.select_one("img[itemprop='image']")
|
||||
if main_img:
|
||||
src = main_img.get("src", "")
|
||||
if src and not src.startswith("http"):
|
||||
src = "https://images.justvitamins.co.uk" + src
|
||||
images.append(src)
|
||||
for a in soup.select("#lightboxGallery a, .ThumbnailPhoto a"):
|
||||
href = a.get("href", "")
|
||||
if href:
|
||||
if not href.startswith("http"):
|
||||
href = "https://www.justvitamins.co.uk" + href
|
||||
full = href.replace("/Fullsize/", "/Normal/").replace("/fullsize/", "/Normal/")
|
||||
if full not in images and href not in images:
|
||||
images.append(full if "Normal" in full else href)
|
||||
data["images"] = images
|
||||
|
||||
# Key benefits
|
||||
benefits = []
|
||||
for li in soup.select(".ProdDet li"):
|
||||
txt = li.get_text(strip=True)
|
||||
if txt and 10 < len(txt) < 120:
|
||||
skip = ["subscribe", "save", "free delivery", "pause", "never run out"]
|
||||
if not any(s in txt.lower() for s in skip):
|
||||
benefits.append(txt)
|
||||
seen = set()
|
||||
unique = []
|
||||
for b in benefits:
|
||||
if b not in seen:
|
||||
seen.add(b)
|
||||
unique.append(b)
|
||||
data["benefits"] = unique[:10]
|
||||
|
||||
# Quantity
|
||||
qty = ""
|
||||
for text in soup.stripped_strings:
|
||||
m = re.match(r'(\d+)\s*(tablets?|capsules?|softgels?)', text, re.I)
|
||||
if m:
|
||||
qty = text.strip()
|
||||
break
|
||||
data["quantity"] = qty
|
||||
|
||||
# Per unit cost
|
||||
per_unit = ""
|
||||
for text in soup.stripped_strings:
|
||||
if re.search(r'only\s+[\d.]+p\s+per', text, re.I):
|
||||
per_unit = text.strip()
|
||||
break
|
||||
data["per_unit_cost"] = per_unit
|
||||
|
||||
# Description
|
||||
desc_parts = []
|
||||
found_about = False
|
||||
for el in soup.select(".ProdDet h2, .ProdDet h3, .ProdDet p"):
|
||||
txt = el.get_text(strip=True)
|
||||
if "about this" in txt.lower():
|
||||
found_about = True
|
||||
continue
|
||||
if "product information" in txt.lower():
|
||||
break
|
||||
if found_about and txt:
|
||||
desc_parts.append(txt)
|
||||
data["description"] = "\n".join(desc_parts)
|
||||
|
||||
# EFSA health claims
|
||||
claims = []
|
||||
for li in soup.select(".ProdDet li"):
|
||||
txt = li.get_text(strip=True)
|
||||
if any(k in txt.lower() for k in ["contributes", "maintenance of normal",
|
||||
"normal function", "normal absorption"]):
|
||||
claims.append(txt)
|
||||
data["health_claims"] = list(dict.fromkeys(claims))
|
||||
|
||||
# Category from breadcrumbs
|
||||
crumbs = [a.get_text(strip=True) for a in soup.select(".breadC a")]
|
||||
data["category"] = crumbs[1] if len(crumbs) >= 2 else ""
|
||||
|
||||
data["url"] = url
|
||||
return data
|
||||
|
||||
|
||||
def scrape_competitor(url: str) -> dict:
|
||||
"""Scrape any ecommerce product page and extract what we can."""
|
||||
r = requests.get(url, headers=HEADERS, timeout=15)
|
||||
r.raise_for_status()
|
||||
soup = BeautifulSoup(r.text, "html.parser")
|
||||
text = soup.get_text(" ", strip=True)
|
||||
|
||||
data = {"url": url, "raw_text": text[:5000]}
|
||||
|
||||
# Title
|
||||
h1 = soup.select_one("h1")
|
||||
data["title"] = h1.get_text(strip=True) if h1 else ""
|
||||
|
||||
# Meta description
|
||||
meta = soup.select_one("meta[name='description']")
|
||||
data["meta_description"] = meta.get("content", "") if meta else ""
|
||||
|
||||
# OG data
|
||||
og_title = soup.select_one("meta[property='og:title']")
|
||||
og_desc = soup.select_one("meta[property='og:description']")
|
||||
data["og_title"] = og_title.get("content", "") if og_title else ""
|
||||
data["og_description"] = og_desc.get("content", "") if og_desc else ""
|
||||
|
||||
# Price — try schema.org, then regex
|
||||
price_meta = soup.select_one("meta[itemprop='price']")
|
||||
if price_meta:
|
||||
data["price"] = price_meta.get("content", "")
|
||||
else:
|
||||
price_match = re.search(r'[$£€][\d,.]+', text)
|
||||
data["price"] = price_match.group(0) if price_match else ""
|
||||
|
||||
# Bullets / features
|
||||
bullets = []
|
||||
for li in soup.select("li"):
|
||||
txt = li.get_text(strip=True)
|
||||
if 15 < len(txt) < 200:
|
||||
bullets.append(txt)
|
||||
data["bullets"] = bullets[:15]
|
||||
|
||||
# Images
|
||||
images = []
|
||||
for img in soup.select("img[src]"):
|
||||
src = img.get("src", "")
|
||||
if src and any(ext in src.lower() for ext in [".jpg", ".png", ".webp"]):
|
||||
if not src.startswith("http"):
|
||||
from urllib.parse import urljoin
|
||||
src = urljoin(url, src)
|
||||
if src not in images:
|
||||
images.append(src)
|
||||
data["images"] = images[:5]
|
||||
|
||||
# Brand from schema
|
||||
brand = soup.select_one("[itemprop='brand']")
|
||||
data["brand"] = brand.get_text(strip=True) if brand else ""
|
||||
|
||||
# Description paragraphs
|
||||
paras = []
|
||||
for p in soup.select("p"):
|
||||
txt = p.get_text(strip=True)
|
||||
if 30 < len(txt) < 500:
|
||||
paras.append(txt)
|
||||
data["description"] = "\n".join(paras[:8])
|
||||
|
||||
return data
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
import sys
|
||||
url = sys.argv[1] if len(sys.argv) > 1 else \
|
||||
"https://www.justvitamins.co.uk/Bone-Health/Super-Strength-Vitamin-D3-4000iu-K2-MK-7-100mcg.aspx"
|
||||
if "justvitamins" in url:
|
||||
d = scrape_product(url)
|
||||
else:
|
||||
d = scrape_competitor(url)
|
||||
print(json.dumps(d, indent=2))
|
||||
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
161
templates/index.html
Normal file
161
templates/index.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>JustVitamin × QuikCue — AI Content Engine</title>
|
||||
<meta name="description" content="Live AI-powered content engine for Just Vitamins. Real demos, real data, real results.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="logo">JustVitamins <span class="x">×</span> QuikCue</a>
|
||||
<div class="nav-links">
|
||||
<a href="/dashboard" target="_blank">📊 Dashboard</a>
|
||||
<a href="#demos">Demos</a>
|
||||
<a href="/proposal" target="_blank">Proposal</a>
|
||||
<a href="/offer" target="_blank">Offer</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="page">
|
||||
|
||||
<!-- ═══ HERO ═══ -->
|
||||
<section class="hero" id="top">
|
||||
<div class="eyebrow"><span class="pill">● LIVE</span> AI Content Engine — Powered by Gemini</div>
|
||||
<h1>Your content engine is<br><span class="gr">real and running.</span></h1>
|
||||
<p class="sub">Paste any Just Vitamins product link. The AI scrapes it live, rewrites every word, generates new product images, and builds a full marketing pack — all in seconds. <strong>No mocks. No fakes. Try it.</strong></p>
|
||||
<div class="btn-row">
|
||||
<a href="#demo-a" class="btn cta">⚡ Try Demo A — 12 Assets</a>
|
||||
<a href="#demo-b" class="btn ghost">🔍 Competitor X-Ray</a>
|
||||
<a href="#demo-c" class="btn ghost">🎨 PDP Surgeon</a>
|
||||
<a href="/dashboard" target="_blank" class="btn outline">📊 Real Data Dashboard</a>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="stat"><span class="val">£19.4M</span><span class="lbl">Lifetime Revenue</span></div>
|
||||
<div class="stat"><span class="val">728K</span><span class="lbl">Orders Processed</span></div>
|
||||
<div class="stat"><span class="val">230K</span><span class="lbl">Unique Customers</span></div>
|
||||
<div class="stat"><span class="val">20 yrs</span><span class="lbl">Trading History</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ DEMO A — 12 Assets ═══ -->
|
||||
<section class="demo" id="demo-a">
|
||||
<span class="badge red">⚡ DEMO A — LIVE</span>
|
||||
<h2>One Product → 12 Assets in Seconds</h2>
|
||||
<p class="sub">Paste a real Just Vitamins product URL. Gemini scrapes it, then generates a full marketing pack.</p>
|
||||
|
||||
<div class="input-card">
|
||||
<div class="input-row">
|
||||
<div class="input-group">
|
||||
<label>PRODUCT URL</label>
|
||||
<input type="url" id="demoA-url" placeholder="https://www.justvitamins.co.uk/..." value="https://www.justvitamins.co.uk/Bone-Health/Super-Strength-Vitamin-D3-4000iu-K2-MK-7-100mcg.aspx">
|
||||
</div>
|
||||
<button class="btn-gen red" id="demoA-btn" onclick="runDemoA()">🔴 Generate the Whole Pack</button>
|
||||
</div>
|
||||
<div class="step-bar" id="demoA-steps">
|
||||
<div class="step" id="a-step-scrape"><span class="step-label">1. Scrape</span><span class="step-status" id="a-s1">Waiting</span></div>
|
||||
<div class="step" id="a-step-ai"><span class="step-label">2. AI Generate</span><span class="step-status" id="a-s2">Waiting</span></div>
|
||||
<div class="step" id="a-step-images"><span class="step-label">3. Image Gen</span><span class="step-status" id="a-s3">Waiting</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demoA-output" class="output hidden">
|
||||
<div class="output-meta" id="demoA-meta"></div>
|
||||
<div class="asset-grid" id="demoA-assets"></div>
|
||||
<div id="demoA-images" class="img-section hidden">
|
||||
<h3>🎨 AI-Generated Product Images</h3>
|
||||
<p class="sub-sm">Generated with Nano Banana / Nano Banana Pro — unique images that don't exist anywhere else.</p>
|
||||
<div class="img-grid" id="demoA-img-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ DEMO B — Competitor X-Ray ═══ -->
|
||||
<section class="demo" id="demo-b">
|
||||
<span class="badge blue">🔍 DEMO B — LIVE</span>
|
||||
<h2>Competitor X-Ray → Instant Offer Upgrade</h2>
|
||||
<p class="sub">Paste any competitor product URL. We scrape it, reverse-engineer their strategy, and build a better JV version.</p>
|
||||
|
||||
<div class="input-card">
|
||||
<div class="input-row">
|
||||
<div class="input-group">
|
||||
<label>COMPETITOR PRODUCT URL</label>
|
||||
<input type="url" id="demoB-url" placeholder="https://www.competitor.com/product..." value="https://www.hollandandbarrett.com/shop/product/holland-barrett-vitamin-d3-tablets-25ug-1000-i-u--60001496">
|
||||
</div>
|
||||
<button class="btn-gen blue" id="demoB-btn" onclick="runDemoB()">🔍 X-Ray This Competitor</button>
|
||||
</div>
|
||||
<div class="step-bar" id="demoB-steps">
|
||||
<div class="step"><span class="step-label">1. Scrape Competitor</span><span class="step-status" id="b-s1">Waiting</span></div>
|
||||
<div class="step"><span class="step-label">2. AI Analysis</span><span class="step-status" id="b-s2">Waiting</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demoB-output" class="output hidden">
|
||||
<div class="split">
|
||||
<div class="split-left" id="demoB-left"></div>
|
||||
<div class="split-right" id="demoB-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ DEMO C — PDP Surgeon ═══ -->
|
||||
<section class="demo" id="demo-c">
|
||||
<span class="badge purple">🎨 DEMO C — LIVE</span>
|
||||
<h2>PDP Surgeon: AI Rewrites in Any Voice</h2>
|
||||
<p class="sub">Scrape a real product, then toggle between 4 conversion styles — each rewritten live by Gemini with annotations.</p>
|
||||
|
||||
<div class="input-card">
|
||||
<div class="input-row">
|
||||
<div class="input-group">
|
||||
<label>JUST VITAMINS PRODUCT URL</label>
|
||||
<input type="url" id="demoC-url" placeholder="https://www.justvitamins.co.uk/..." value="https://www.justvitamins.co.uk/Bone-Health/Super-Strength-Vitamin-D3-4000iu-K2-MK-7-100mcg.aspx">
|
||||
</div>
|
||||
<button class="btn-gen purple" id="demoC-btn" onclick="runDemoC()">🎨 Scrape & Rewrite</button>
|
||||
</div>
|
||||
<div class="toggle-group" id="demoC-toggles">
|
||||
<button class="toggle active" data-style="balanced" onclick="switchDemoC('balanced',this)">✓ Balanced</button>
|
||||
<button class="toggle" data-style="premium" onclick="switchDemoC('premium',this)">💎 Premium</button>
|
||||
<button class="toggle" data-style="dr" onclick="switchDemoC('dr',this)">🎯 Direct Response</button>
|
||||
<button class="toggle" data-style="medical" onclick="switchDemoC('medical',this)">🏥 Medical-Safe</button>
|
||||
</div>
|
||||
<div class="step-bar">
|
||||
<div class="step"><span class="step-label">1. Scrape</span><span class="step-status" id="c-s1">Waiting</span></div>
|
||||
<div class="step"><span class="step-label">2. AI Rewrite</span><span class="step-status" id="c-s2">Waiting</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demoC-output" class="output hidden">
|
||||
<div class="split">
|
||||
<div class="split-left" id="demoC-left"></div>
|
||||
<div class="split-right" id="demoC-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ CTA ═══ -->
|
||||
<section class="cta-section" id="cta">
|
||||
<h2>This isn't a mockup.<br>It's <span class="gr">running right now.</span></h2>
|
||||
<p class="sub" style="text-align:center;margin:0 auto 2rem">Every demo on this page hits a real API, scrapes real pages, and generates real content. The data dashboard shows real £19.4M in revenue across 728,000 orders.</p>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:.75rem">
|
||||
<a href="mailto:omair@quikcue.com?subject=JustVitamin%20AI%20Engine%20—%20Let's%20Talk" class="btn cta lg">🚀 Let's Talk — 15 min call</a>
|
||||
<a href="/dashboard" target="_blank" class="btn outline">📊 Explore the Full Dashboard</a>
|
||||
<span class="note">Built by <a href="https://quikcue.com">QuikCue</a> · Powered by Gemini 2.5 Flash + Nano Banana Pro</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 <a href="https://quikcue.com">QuikCue</a> — Built for Just Vitamins</p>
|
||||
<p>Repo: <a href="https://git.quikcue.com/omair/justvitamin" target="_blank">git.quikcue.com/omair/justvitamin</a></p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user