split + record
This commit is contained in:
oliver
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,837 @@
|
||||
// ── Speedrun Slider (inline script from how-it-works section) ──
|
||||
(function () {
|
||||
const slider = document.getElementById("speedrunSlider");
|
||||
const dotsContainer = document.getElementById("speedrunDots");
|
||||
if (!slider || !dotsContainer) return;
|
||||
const slides = slider.querySelectorAll(".video-slide");
|
||||
const total = slides.length;
|
||||
if (total === 0) return;
|
||||
|
||||
for (let i = 0; i < total; i++) {
|
||||
const dot = document.createElement("button");
|
||||
dot.className = "slider-dot" + (i === 0 ? " active" : "");
|
||||
dot.setAttribute("aria-label", "Go to slide " + (i + 1));
|
||||
dot.onclick = function () {
|
||||
slides[i].scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "start",
|
||||
});
|
||||
};
|
||||
dotsContainer.appendChild(dot);
|
||||
}
|
||||
|
||||
function updateDots() {
|
||||
const threshold = 120;
|
||||
let activeIdx = 0;
|
||||
for (let i = 0; i < total; i++) {
|
||||
const rect = slides[i].getBoundingClientRect();
|
||||
const center = rect.left + rect.width / 2;
|
||||
const sl = slider.getBoundingClientRect();
|
||||
const slCenter = sl.left + sl.width / 2;
|
||||
if (Math.abs(center - slCenter) < threshold) {
|
||||
activeIdx = i;
|
||||
}
|
||||
}
|
||||
dotsContainer.querySelectorAll(".slider-dot").forEach((d, i) => {
|
||||
d.classList.toggle("active", i === activeIdx);
|
||||
});
|
||||
}
|
||||
|
||||
slider.addEventListener("scroll", updateDots);
|
||||
updateDots();
|
||||
})();
|
||||
|
||||
function slideSpeedrun(dir) {
|
||||
plausible("Speedrun Nav", {
|
||||
props: { direction: dir > 0 ? "next" : "prev" },
|
||||
});
|
||||
const slider = document.getElementById("speedrunSlider");
|
||||
if (!slider) return;
|
||||
const slideWidth = slider.querySelector(".video-slide").offsetWidth + 20;
|
||||
slider.scrollBy({
|
||||
left: slideWidth * dir,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
// ── Mobile menu ──────────────────────────────────────────
|
||||
function toggleMobile() {
|
||||
plausible("Mobile Menu Toggle");
|
||||
const nav = document.getElementById("nav-links");
|
||||
nav.classList.toggle("mobile-open");
|
||||
}
|
||||
|
||||
// ── FAQ accordion ────────────────────────────────────────
|
||||
function toggleFaq(btn) {
|
||||
const q = btn.innerText.replace(/[?✦]/g, "").trim();
|
||||
plausible("FAQ Toggle", { props: { question: q } });
|
||||
const answer = btn.nextElementSibling;
|
||||
const isOpen = answer.classList.contains("open");
|
||||
// Close all
|
||||
document
|
||||
.querySelectorAll(".faq-answer.open")
|
||||
.forEach((el) => el.classList.remove("open"));
|
||||
document
|
||||
.querySelectorAll(".faq-question.open")
|
||||
.forEach((el) => el.classList.remove("open"));
|
||||
if (!isOpen) {
|
||||
answer.classList.add("open");
|
||||
btn.classList.add("open");
|
||||
}
|
||||
}
|
||||
|
||||
// ── Signup Webhook URLs (matching app.derez.ai) ──────────
|
||||
const SIGNUP_URL =
|
||||
"https://n8n.derez.ai/webhook/4de196b7-2ad2-4f9a-9b4d-dc8d3b30865b";
|
||||
const AUTH_URL =
|
||||
"https://n8n.derez.ai/webhook/aca1b27f-c18e-4424-b7a0-de01007a3fe6";
|
||||
const COUPON_URL =
|
||||
"https://n8n.derez.ai/webhook/fd6375cb-6d73-4482-bfa3-ef8365f43a67";
|
||||
|
||||
let inlineCouponApplied = false;
|
||||
|
||||
// ── Helper: show/hide auth messages ──────────────────────
|
||||
function showAuthError(id, msg) {
|
||||
const el = document.getElementById(id);
|
||||
el.textContent = msg;
|
||||
el.style.display = "flex";
|
||||
}
|
||||
function hideAuthError(id) {
|
||||
document.getElementById(id).style.display = "none";
|
||||
}
|
||||
|
||||
// ── Helper: btn loading state ────────────────────────────
|
||||
function btnLoad(btn, text) {
|
||||
btn.disabled = true;
|
||||
btn.textContent = text;
|
||||
}
|
||||
function btnReset(btn) {
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Buy Agent — $9.50/mo";
|
||||
}
|
||||
|
||||
function isValidEmail(e) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
|
||||
}
|
||||
|
||||
// ── Coupon ──────────────────────────────────────────────
|
||||
function handleCouponKey(e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
applyInlineCoupon();
|
||||
}
|
||||
}
|
||||
|
||||
async function applyInlineCoupon() {
|
||||
const input = document.getElementById("signup-coupon-input");
|
||||
const spinner = document.getElementById("signup-coupon-spinner");
|
||||
const errorEl = document.getElementById("signup-coupon-error");
|
||||
const successEl = document.getElementById("signup-coupon-success");
|
||||
|
||||
const code = input.value.trim();
|
||||
if (!code) return;
|
||||
|
||||
spinner.style.display = "flex";
|
||||
errorEl.style.display = "none";
|
||||
successEl.style.display = "none";
|
||||
input.classList.remove("signup-coupon-input-error");
|
||||
|
||||
try {
|
||||
const res = await fetch(COUPON_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ code }),
|
||||
});
|
||||
if (!res.ok) throw new Error("Invalid");
|
||||
const data = await res.json();
|
||||
const raw = Array.isArray(data) ? data[0] : data;
|
||||
const item =
|
||||
raw && typeof raw === "object" && "json" in raw ? raw.json : raw;
|
||||
if (item?.valid === true || item?.status === "ok") {
|
||||
inlineCouponApplied = true;
|
||||
successEl.style.display = "flex";
|
||||
input.style.display = "none";
|
||||
} else {
|
||||
throw new Error("Invalid");
|
||||
}
|
||||
} catch {
|
||||
input.classList.add("signup-coupon-input-error");
|
||||
errorEl.style.display = "block";
|
||||
} finally {
|
||||
spinner.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// ── Sign Up (inline on landing page) ────────────────────
|
||||
async function doInlineSignUp() {
|
||||
const email = document.getElementById("inline-signup-email").value.trim();
|
||||
const password = document.getElementById("inline-signup-password").value;
|
||||
const agent = document.getElementById("inline-signup-agent").value;
|
||||
const location = document.getElementById("inline-signup-location").value;
|
||||
|
||||
hideAuthError("inline-signup-error");
|
||||
document.getElementById("inline-signup-success").style.display = "none";
|
||||
|
||||
if (!isValidEmail(email)) {
|
||||
showAuthError("inline-signup-error", "Please enter a valid email address.");
|
||||
return;
|
||||
}
|
||||
if (password.length < 8) {
|
||||
showAuthError(
|
||||
"inline-signup-error",
|
||||
"Password must be at least 8 characters.",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById("inline-signup-btn");
|
||||
btnLoad(btn, "Hiring agent\u2026");
|
||||
|
||||
// Open blank tab synchronously for Stripe redirect
|
||||
const stripeTab = window.open("", "_blank");
|
||||
|
||||
try {
|
||||
// Step 1: authenticate
|
||||
const authRes = await fetch(AUTH_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
if (!authRes.ok)
|
||||
throw new Error("Account creation failed. Please try again later.");
|
||||
|
||||
// Step 2: create agent
|
||||
const createRes = await fetch(SIGNUP_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password,
|
||||
agent,
|
||||
location,
|
||||
}),
|
||||
});
|
||||
if (!createRes.ok) {
|
||||
throw new Error("Agent provisioning failed. Please contact support.");
|
||||
}
|
||||
|
||||
const createData = await createRes.json();
|
||||
const createRaw = Array.isArray(createData) ? createData[0] : createData;
|
||||
const createItem =
|
||||
createRaw && typeof createRaw === "object" && "json" in createRaw
|
||||
? createRaw.json
|
||||
: createRaw;
|
||||
|
||||
// Navigate the pre-opened tab to Stripe checkout
|
||||
const checkoutUrl =
|
||||
createItem?.checkout_url || createItem?.checkoutUrl || createItem?.url;
|
||||
if (checkoutUrl && checkoutUrl.startsWith("http")) {
|
||||
stripeTab.location.href = checkoutUrl;
|
||||
} else {
|
||||
stripeTab.close();
|
||||
}
|
||||
|
||||
// Show success message
|
||||
document.getElementById("inline-signup-success").textContent =
|
||||
"Agent created! \u2713 Redirecting to checkout\u2026";
|
||||
document.getElementById("inline-signup-success").style.display = "flex";
|
||||
} catch (err) {
|
||||
stripeTab?.close();
|
||||
showAuthError("inline-signup-error", err.message);
|
||||
} finally {
|
||||
btnReset(btn);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Close mobile menu on link click ──────────────────────
|
||||
document.querySelectorAll(".nav-links a").forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
document.getElementById("nav-links").classList.remove("mobile-open");
|
||||
});
|
||||
});
|
||||
|
||||
// ── Smooth scroll offset for fixed header ────────────────
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
const target = document.querySelector(this.getAttribute("href"));
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
const headerHeight = 60;
|
||||
const top =
|
||||
target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
|
||||
window.scrollTo({ top, behavior: "smooth" });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Period / billing update ──────────────────────────── */
|
||||
function updatePeriodDisplay() {
|
||||
const sel = document.getElementById("pricing-period");
|
||||
const yearly = sel.value === "yearly";
|
||||
document.getElementById("bonus-trainee").classList.toggle("show", yearly);
|
||||
document.getElementById("bonus-junior").classList.toggle("show", yearly);
|
||||
document.getElementById("bonus-senior").classList.toggle("show", yearly);
|
||||
|
||||
document.getElementById("period-trainee").textContent = yearly
|
||||
? "/ month ✦ yearly"
|
||||
: "/ month";
|
||||
document.getElementById("period-junior").textContent = yearly
|
||||
? "/ month ✦ yearly"
|
||||
: "/ month";
|
||||
document.getElementById("period-senior").textContent = yearly
|
||||
? "/ month ✦ yearly"
|
||||
: "/ month";
|
||||
}
|
||||
document
|
||||
.getElementById("pricing-period")
|
||||
.addEventListener("change", updatePeriodDisplay);
|
||||
updatePeriodDisplay(); // fire on load so yearly bonuses show by default
|
||||
|
||||
/* ── Capture UTM params from URL ──────────────────────────── */
|
||||
(function () {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
["source", "medium", "campaign", "term", "content"].forEach(function (key) {
|
||||
const val = params.get("utm_" + key);
|
||||
if (val) document.getElementById("utm_" + key).value = val;
|
||||
});
|
||||
})();
|
||||
|
||||
/* ── Buy Agent Webhook ───────────────────────────── */
|
||||
const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/payment";
|
||||
|
||||
function showPricingToast(msg) {
|
||||
const el = document.getElementById("pricing-toast");
|
||||
el.textContent = msg;
|
||||
el.classList.add("show");
|
||||
if (window._pricingToastTimer) clearTimeout(window._pricingToastTimer);
|
||||
window._pricingToastTimer = setTimeout(function () {
|
||||
el.classList.remove("show");
|
||||
}, 20000);
|
||||
}
|
||||
|
||||
async function hireAgent(product) {
|
||||
const agent = document.getElementById("pricing-agent").value;
|
||||
const period = document.getElementById("pricing-period").value;
|
||||
const location = document.getElementById("pricing-location").value;
|
||||
const email = document.getElementById("pricing-email").value.trim();
|
||||
const coupon = document.getElementById("pricing-coupon").value.trim();
|
||||
|
||||
// Validate email
|
||||
const emailInput = document.getElementById("pricing-email");
|
||||
emailInput.classList.remove("invalid");
|
||||
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
emailInput.classList.add("invalid");
|
||||
showPricingToast(
|
||||
"Please configure your agent and provide a valid email address.",
|
||||
);
|
||||
emailInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
plausible("Pricing Click", {
|
||||
props: { product: product, agent: agent, period: period },
|
||||
});
|
||||
|
||||
try {
|
||||
// Use a hidden form POST so the 302 redirect opens naturally in the new tab
|
||||
const form = document.createElement("form");
|
||||
form.method = "POST";
|
||||
form.action = ORDER_WEBHOOK;
|
||||
form.target = "_self";
|
||||
form.style.display = "none";
|
||||
|
||||
const fields = {
|
||||
product: product,
|
||||
agent: agent,
|
||||
period: period,
|
||||
location: location,
|
||||
email: email || "",
|
||||
coupon: coupon || "",
|
||||
utm_source: document.getElementById("utm_source").value || "",
|
||||
utm_medium: document.getElementById("utm_medium").value || "",
|
||||
utm_campaign: document.getElementById("utm_campaign").value || "",
|
||||
utm_term: document.getElementById("utm_term").value || "",
|
||||
utm_content: document.getElementById("utm_content").value || "",
|
||||
};
|
||||
|
||||
Object.keys(fields).forEach(function (key) {
|
||||
const inp = document.createElement("input");
|
||||
inp.type = "hidden";
|
||||
inp.name = key;
|
||||
inp.value = fields[key];
|
||||
form.appendChild(inp);
|
||||
});
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
document.body.removeChild(form);
|
||||
} catch (err) {
|
||||
console.error("Order webhook failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Chat Widget ──────────────────────────────────────────── */
|
||||
const CHAT_URL =
|
||||
"https://n8n.derez.ai/webhook/a58d00c4-f0c9-40cd-bb50-4f45f0442ef0";
|
||||
let chatId = null;
|
||||
let chatOpen = false;
|
||||
let chatBusy = false;
|
||||
let greeted = false;
|
||||
let probeTimer = null;
|
||||
|
||||
function chatToggle() {
|
||||
plausible("Chat Toggle", {
|
||||
props: { action: chatOpen ? "close" : "open" },
|
||||
});
|
||||
chatOpen = !chatOpen;
|
||||
document.getElementById("chat-widget").classList.toggle("open", chatOpen);
|
||||
document.getElementById("chat-fab").classList.toggle("open", chatOpen);
|
||||
document.getElementById("chat-widget").setAttribute("aria-hidden", !chatOpen);
|
||||
if (chatOpen) {
|
||||
// User opened chat manually — cancel the auto-open probe
|
||||
if (probeTimer) {
|
||||
clearTimeout(probeTimer);
|
||||
probeTimer = null;
|
||||
}
|
||||
if (!chatId) {
|
||||
chatId = String(Math.floor(100000 + Math.random() * 900000));
|
||||
chatAppendMsg(
|
||||
"bot",
|
||||
"Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent.",
|
||||
);
|
||||
}
|
||||
setTimeout(() => document.getElementById("chat-input").focus(), 300);
|
||||
}
|
||||
}
|
||||
|
||||
function chatClose() {
|
||||
if (chatOpen) chatToggle();
|
||||
}
|
||||
|
||||
function chatOpenSilent() {
|
||||
if (!chatOpen) {
|
||||
chatOpen = true;
|
||||
document.getElementById("chat-widget").classList.add("open");
|
||||
document.getElementById("chat-widget").setAttribute("aria-hidden", "false");
|
||||
}
|
||||
}
|
||||
|
||||
function chatAppendMsg(role, text) {
|
||||
const msgs = document.getElementById("chat-msgs");
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-msg chat-msg-" + role;
|
||||
// strip <script> and on* handlers to prevent XSS, but render safe HTML
|
||||
div.innerHTML = text
|
||||
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
|
||||
.replace(/\son\w+\s*=\s*"[^"]*"/gi, "")
|
||||
.replace(/\son\w+\s*=\s*'[^']*'/gi, "");
|
||||
msgs.appendChild(div);
|
||||
msgs.scrollTop = msgs.scrollHeight;
|
||||
return div;
|
||||
}
|
||||
|
||||
function chatKey(e) {
|
||||
if (e.key === "Enter") chatSend();
|
||||
}
|
||||
|
||||
async function chatSend() {
|
||||
const input = document.getElementById("chat-input");
|
||||
const btn = document.getElementById("chat-send-btn");
|
||||
const msg = input.value.trim();
|
||||
if (!msg || chatBusy) return;
|
||||
plausible("Chat Message Sent");
|
||||
chatBusy = true;
|
||||
chatOpenSilent();
|
||||
chatAppendMsg("user", msg);
|
||||
input.value = "";
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span style="opacity:0.6">…</span>';
|
||||
|
||||
const think = chatAppendMsg("bot", "…");
|
||||
think.className = "chat-msg chat-msg-thinking";
|
||||
|
||||
try {
|
||||
const res = await fetch(CHAT_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
message: msg,
|
||||
sessionId: chatId,
|
||||
}),
|
||||
});
|
||||
const json = await res.json();
|
||||
const first = Array.isArray(json) ? json[0] : json;
|
||||
const reply =
|
||||
typeof json === "string"
|
||||
? json
|
||||
: (first &&
|
||||
(first.output ||
|
||||
first.message ||
|
||||
first.reply ||
|
||||
first.response ||
|
||||
first.text)) ||
|
||||
JSON.stringify(json);
|
||||
think.remove();
|
||||
chatAppendMsg("bot", reply);
|
||||
} catch (err) {
|
||||
think.remove();
|
||||
chatAppendMsg(
|
||||
"bot",
|
||||
"Sorry, I couldn't connect right now. Please try again later.",
|
||||
);
|
||||
} finally {
|
||||
chatBusy = false;
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = "➤";
|
||||
document.getElementById("chat-input").focus();
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Visitor Probe — auto-open after 15s ────────────────── */
|
||||
(function () {
|
||||
let fired = false;
|
||||
probeTimer = setTimeout(function () {
|
||||
fetch("https://ipinfo.io/json")
|
||||
.then(function (r) {
|
||||
return r.json();
|
||||
})
|
||||
.then(function (geo) {
|
||||
fireProbe(geo);
|
||||
})
|
||||
.catch(function () {
|
||||
fireProbe(null);
|
||||
});
|
||||
}, 15000);
|
||||
|
||||
function fireProbe(geo) {
|
||||
if (fired) return;
|
||||
fired = true;
|
||||
const cid = chatId || String(Math.floor(100000 + Math.random() * 900000));
|
||||
const ua = navigator.userAgent;
|
||||
|
||||
let lines = [
|
||||
"NEW VISITOR — 15s Probe",
|
||||
"========================================",
|
||||
"",
|
||||
"- Page section: hero",
|
||||
"- Scroll depth: " +
|
||||
Math.min(
|
||||
100,
|
||||
Math.round(
|
||||
(window.pageYOffset /
|
||||
Math.max(
|
||||
1,
|
||||
document.documentElement.scrollHeight - window.innerHeight,
|
||||
)) *
|
||||
100,
|
||||
),
|
||||
) +
|
||||
"%",
|
||||
"- Time on page: 15 seconds",
|
||||
"- Timestamp: " + new Date().toUTCString(),
|
||||
"",
|
||||
"--- BROWSER & DEVICE ---",
|
||||
"- Browser: " +
|
||||
(/Edg\/([\d.]+)/.test(ua)
|
||||
? "Edge " + RegExp.$1
|
||||
: /Chrome\/([\d.]+)/.test(ua)
|
||||
? "Chrome " + RegExp.$1
|
||||
: /Firefox\/([\d.]+)/.test(ua)
|
||||
? "Firefox " + RegExp.$1
|
||||
: /Version\/([\d.]+).*Safari/.test(ua)
|
||||
? "Safari " + RegExp.$1
|
||||
: "Unknown"),
|
||||
"- OS: " +
|
||||
(/Windows NT 10/.test(ua)
|
||||
? "Windows 10/11"
|
||||
: /Mac OS X/.test(ua)
|
||||
? "macOS"
|
||||
: /Android/.test(ua)
|
||||
? "Android"
|
||||
: /iPhone/.test(ua)
|
||||
? "iOS"
|
||||
: /Linux/.test(ua)
|
||||
? "Linux"
|
||||
: "Unknown"),
|
||||
"- Device: " + (/Mobi|Android|iPhone/.test(ua) ? "Mobile" : "Desktop"),
|
||||
"- Screen: " + screen.width + "x" + screen.height,
|
||||
"- Language: " + navigator.language,
|
||||
"- User Agent: " + ua,
|
||||
"",
|
||||
"--- PAGE ---",
|
||||
"- URL: " + window.location.href,
|
||||
"- Referrer: " + (document.referrer || "direct / none"),
|
||||
"- Title: " + document.title,
|
||||
];
|
||||
if (geo) {
|
||||
lines.push("");
|
||||
lines.push("--- LOCATION ---");
|
||||
if (geo.country) lines.push("- Country: " + geo.country);
|
||||
if (geo.city) lines.push("- City: " + geo.city);
|
||||
if (geo.org) lines.push("- ISP: " + geo.org);
|
||||
}
|
||||
lines.push("");
|
||||
lines.push("- Chat ID: " + cid);
|
||||
|
||||
const payload = {
|
||||
message: lines.join("\n"),
|
||||
sessionId: cid,
|
||||
};
|
||||
|
||||
fetch(CHAT_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(function (r) {
|
||||
const ct = r.headers.get("content-type") || "";
|
||||
if (ct.indexOf("json") !== -1) return r.json();
|
||||
return r.text().then(function (t) {
|
||||
return { output: t };
|
||||
});
|
||||
})
|
||||
.then(function (d) {
|
||||
const item = Array.isArray(d) ? d[0] : d;
|
||||
const reply =
|
||||
(item &&
|
||||
(item.output ||
|
||||
item.message ||
|
||||
item.reply ||
|
||||
item.response ||
|
||||
item.text)) ||
|
||||
null;
|
||||
if (reply) {
|
||||
if (!chatId) chatId = cid;
|
||||
chatAppendMsg("bot", reply);
|
||||
greeted = true;
|
||||
if (!chatOpen) chatOpenSilent();
|
||||
}
|
||||
})
|
||||
.catch(function () {});
|
||||
}
|
||||
})();
|
||||
|
||||
/* ── Scroll Depth Tracking ────────────────────────── */
|
||||
(function () {
|
||||
const thresholds = [25, 50, 75, 100];
|
||||
let sent = {};
|
||||
let ticking = false;
|
||||
window.addEventListener("scroll", function () {
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(function () {
|
||||
const scrolled = window.pageYOffset + window.innerHeight;
|
||||
const total = document.documentElement.scrollHeight;
|
||||
const pct = Math.min(100, Math.round((scrolled / total) * 100));
|
||||
thresholds.forEach(function (t) {
|
||||
if (pct >= t && !sent[t]) {
|
||||
sent[t] = true;
|
||||
plausible("Scroll Depth", {
|
||||
props: { percent: t + "%" },
|
||||
});
|
||||
}
|
||||
});
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/* ── Coupon Badges ──────────────────────────────────── */
|
||||
const COUPONS = {
|
||||
// 499
|
||||
blog499: 499,
|
||||
creator499: 499,
|
||||
friends499: 499,
|
||||
|
||||
// 950
|
||||
blog950: 950,
|
||||
creator950: 950,
|
||||
friends950: 950,
|
||||
record950: 950,
|
||||
|
||||
// 1750
|
||||
blog1750: 1750,
|
||||
friends1750: 1750,
|
||||
creator1750: 1750,
|
||||
};
|
||||
const PLAN_PRICES = { trainee: 499, junior: 950, senior: 1750 };
|
||||
function centsToDollar(c) {
|
||||
return "$" + (c / 100).toFixed(2);
|
||||
}
|
||||
function updateCouponBadges() {
|
||||
var code = document
|
||||
.getElementById("pricing-coupon")
|
||||
.value.trim()
|
||||
.toLowerCase();
|
||||
var discount = COUPONS[code];
|
||||
["trainee", "junior", "senior"].forEach(function (plan) {
|
||||
var badge = document.getElementById("badge-" + plan);
|
||||
if (discount !== undefined) {
|
||||
var firstMonth = Math.max(0, PLAN_PRICES[plan] - discount);
|
||||
badge.querySelector(".badge-price").textContent =
|
||||
centsToDollar(firstMonth);
|
||||
badge.classList.add("visible");
|
||||
if (firstMonth === 0) badge.classList.add("free");
|
||||
else badge.classList.remove("free");
|
||||
} else {
|
||||
badge.classList.remove("visible", "free");
|
||||
badge.querySelector(".badge-price").textContent = "—";
|
||||
}
|
||||
});
|
||||
}
|
||||
document
|
||||
.getElementById("pricing-coupon")
|
||||
.addEventListener("input", updateCouponBadges);
|
||||
|
||||
/* ── Blog ──────────────────────────────────────────────── */
|
||||
const BLOG_POSTS_PER_PAGE = 6;
|
||||
let blogAllPosts = [];
|
||||
let blogFilteredPosts = [];
|
||||
let blogCurrentPage = 0;
|
||||
|
||||
function blogFormatDate(dateStr) {
|
||||
const d = new Date(dateStr);
|
||||
const months = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
];
|
||||
return months[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
|
||||
}
|
||||
|
||||
function blogAreaClass(area) {
|
||||
var map = {
|
||||
howto: "area-howto",
|
||||
news: "area-news",
|
||||
"video-scripts": "area-video-scripts",
|
||||
"speed-run": "area-speed-run",
|
||||
};
|
||||
return map[area] || "area-default";
|
||||
}
|
||||
|
||||
function blogRender() {
|
||||
const start = blogCurrentPage * BLOG_POSTS_PER_PAGE;
|
||||
const pagePosts = blogFilteredPosts.slice(start, start + BLOG_POSTS_PER_PAGE);
|
||||
const grid = document.getElementById("blog-grid");
|
||||
const totalPages = Math.max(
|
||||
1,
|
||||
Math.ceil(blogFilteredPosts.length / BLOG_POSTS_PER_PAGE),
|
||||
);
|
||||
|
||||
if (pagePosts.length === 0) {
|
||||
grid.innerHTML =
|
||||
'<div class="blog-empty">No posts match your search.</div>';
|
||||
document.getElementById("blog-page-info").textContent = "";
|
||||
document.getElementById("blog-prev").disabled = true;
|
||||
document.getElementById("blog-next").disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = pagePosts
|
||||
.map(function (p) {
|
||||
var chip = p.agent
|
||||
? '<span class="blog-card-chip">' + p.agent + "</span>"
|
||||
: "";
|
||||
return (
|
||||
'<a href="' +
|
||||
p.link +
|
||||
'" class="blog-card" style="text-decoration:none" onclick="plausible(\'Blog Card Click\',{props:{post:\'' +
|
||||
p.id.replace(/'/g, "\\'") +
|
||||
"',area:'" +
|
||||
p.area.replace(/'/g, "\\'") +
|
||||
"'}})'>" +
|
||||
'<span style="display:flex;gap:6px;flex-wrap:wrap;align-self:flex-start">' +
|
||||
'<span class="blog-card-area ' +
|
||||
blogAreaClass(p.area) +
|
||||
'">' +
|
||||
p.area +
|
||||
"</span>" +
|
||||
chip +
|
||||
"</span>" +
|
||||
'<span class="blog-card-date">' +
|
||||
blogFormatDate(p.date) +
|
||||
"</span>" +
|
||||
"<h3>" +
|
||||
p.headline +
|
||||
"</h3>" +
|
||||
"<p>" +
|
||||
p.teaser +
|
||||
"</p>" +
|
||||
'<span class="blog-card-link">Read more →</span>' +
|
||||
"</a>"
|
||||
);
|
||||
})
|
||||
.join("");
|
||||
|
||||
document.getElementById("blog-page-info").textContent =
|
||||
"Page " + (blogCurrentPage + 1) + " of " + totalPages;
|
||||
document.getElementById("blog-prev").disabled = blogCurrentPage === 0;
|
||||
document.getElementById("blog-next").disabled =
|
||||
blogCurrentPage >= totalPages - 1;
|
||||
}
|
||||
|
||||
function blogPrev() {
|
||||
if (blogCurrentPage > 0) {
|
||||
blogCurrentPage--;
|
||||
blogRender();
|
||||
}
|
||||
}
|
||||
|
||||
function blogNext() {
|
||||
const totalPages = Math.ceil(blogFilteredPosts.length / BLOG_POSTS_PER_PAGE);
|
||||
if (blogCurrentPage < totalPages - 1) {
|
||||
blogCurrentPage++;
|
||||
blogRender();
|
||||
}
|
||||
}
|
||||
|
||||
function blogFilter() {
|
||||
const q = document
|
||||
.getElementById("blog-search-input")
|
||||
.value.trim()
|
||||
.toLowerCase();
|
||||
if (!q) {
|
||||
blogFilteredPosts = blogAllPosts.slice();
|
||||
} else {
|
||||
blogFilteredPosts = blogAllPosts.filter(function (p) {
|
||||
return (
|
||||
p.headline.toLowerCase().indexOf(q) !== -1 ||
|
||||
p.teaser.toLowerCase().indexOf(q) !== -1 ||
|
||||
p.area.toLowerCase().indexOf(q) !== -1
|
||||
);
|
||||
});
|
||||
}
|
||||
blogCurrentPage = 0;
|
||||
blogRender();
|
||||
}
|
||||
|
||||
// Load blog index
|
||||
fetch("blog/index.json?_=" + Date.now())
|
||||
.then(function (r) {
|
||||
return r.json();
|
||||
})
|
||||
.then(function (data) {
|
||||
blogAllPosts = data.posts || [];
|
||||
blogFilteredPosts = blogAllPosts.slice();
|
||||
blogRender();
|
||||
})
|
||||
.catch(function () {
|
||||
document.getElementById("blog-grid").innerHTML =
|
||||
'<div class="blog-empty">Blog coming soon.</div>';
|
||||
});
|
||||
|
||||
// Search on input
|
||||
document
|
||||
.getElementById("blog-search-input")
|
||||
.addEventListener("input", blogFilter);
|
||||
Reference in New Issue
Block a user