// pages-account.jsx — Membership, Auth, Admin, Account const { useEffect: acUseEffect, useRef: acUseRef, useState: acUseState } = React; // ---------- Membership ---------- function Membership({ onGo, openAuth }) { const tiers = window.AppData.TIERS; const titleRef = acUseRef(null); acUseEffect(() => { if (!window.gsap || !titleRef.current) return; window.ScrollFX.splitText(titleRef.current.querySelector("[data-split]")); const chars = titleRef.current.querySelectorAll(".split-char"); window.gsap.set(chars, { yPercent: 110, opacity: 0 }); window.gsap.to(chars, { yPercent: 0, opacity: 1, duration: 1.1, ease: "power4.out", stagger: { each: 0.025, from: "random" } }); window.gsap.from(".tier", { opacity: 0, y: 40, duration: 0.9, ease: "power3.out", stagger: 0.08, delay: 0.25 }); }, []); const subscribe = (tierId) => { if (!window.AppData.currentUser()) { openAuth("/membership"); return; } window.AppData.subscribeMembership(tierId); onGo("/account"); }; return (
Membership

Own the index.

Skip per-script checkout. One plan, every release, every patch — including the back catalogue and the drops we haven't shipped yet.

{tiers.map(t => (
{t.name}
{t.save &&
↘ {t.save}
}
${t.price}
{t.period}
    {t.features.map((f, i) =>
  • {f}
    • )}
))}
Included with all tiers

Source files. Commercial use up to $1M / year. Email support. Lifetime patches on your major version. Cancel anytime, keep the files you downloaded.

Renewals

We renew at the same price you joined at — no surprise hikes. If a price changes, your tier locks for as long as your card keeps charging.

Refunds

14-day refund window, no questions. Drop us a line within two weeks of your first payment and we refund in full.

); } // ---------- Auth ---------- function Auth({ onGo, returnTo }) { const [mode, setMode] = acUseState("login"); const [email, setEmail] = acUseState(""); const [pw, setPw] = acUseState(""); const [name, setName] = acUseState(""); const [err, setErr] = acUseState(""); acUseEffect(() => { if (!window.gsap) return; window.gsap.from(".auth__card > *", { opacity: 0, y: 24, duration: 0.7, ease: "power3.out", stagger: 0.06 }); }, [mode]); const submit = (e) => { e.preventDefault(); setErr(""); try { if (mode === "login") window.AppData.login({ email, password: pw }); else window.AppData.signup({ email, password: pw, name }); onGo(returnTo || "/account"); } catch (e) { setErr(e.message); } }; return (
{mode === "login" ? "Sign in" : "Create an account"}

{mode === "login" ? "Welcome back." : "Make it yours."}

{mode === "login" ? "Sign in to access your purchases, downloads and membership." : "It takes one field. We don't email you anything you didn't ask for."}

{err}
{mode === "signup" && (
setName(e.target.value)} placeholder="Aiyana K." />
)}
setEmail(e.target.value)} placeholder="you@studio.com" required />
setPw(e.target.value)} placeholder="••••••••" required minLength="3" />

{mode === "login" ? "New here? " : "Already a member? "} setMode(mode === "login" ? "signup" : "login")}>{mode === "login" ? "Create an account" : "Sign in"}

Try admin: sign in with admin@studio.pro / admin to access the back office.

); } // ---------- Account ---------- function Account({ onGo }) { const user = window.AppData.currentUser(); if (!user) { setTimeout(() => onGo("/login"), 0); return null; } const scripts = window.AppData.getScripts(); const owned = scripts.filter(s => (user.owned || []).includes(s.id)); const tier = user.membership ? window.AppData.TIERS.find(t => t.id === user.membership) : null; const expires = user.membershipExpires ? new Date(user.membershipExpires) : null; acUseEffect(() => { if (!window.gsap) return; window.gsap.from(".account > *", { opacity: 0, y: 24, duration: 0.7, ease: "power3.out", stagger: 0.06 }); }, []); return (
Welcome back

{user.name}

{user.email} · joined {new Date(user.joined).toLocaleDateString()}

{user.role === "admin" && ( {e.preventDefault(); onGo("/admin");}} data-cursor="button">Open admin → )}
Current plan
{tier ? tier.name : "No membership"}
{tier ? (
Renews · {expires?.toLocaleDateString()}
) : ( {e.preventDefault(); onGo("/membership");}}>Choose a plan → )}
Your downloads · {owned.length}
{owned.length === 0 ? (
No scripts owned yet. {e.preventDefault(); onGo("/scripts");}}>Browse →
) : (
{owned.map(s => (
{s.title}
{s.files?.archive || (s.id + ".zip")} · {s.fileSize}
))}
)}
); } // ---------- Admin: file upload field ---------- function FileField({ label, value, onChange, accept, hint, multi }) { const fileRef = acUseRef(null); const display = !value ? "" : (multi ? `${value.length} 个文件` : (typeof value === "string" ? value : value.name)); return (
{ const f = multi ? Array.from(e.target.files).map(x=>x.name) : (e.target.files[0]?.name || ""); onChange(f); }} /> {hint &&
{hint}
}
); } // ---------- Admin ---------- function Admin({ onGo }) { const user = window.AppData.currentUser(); if (!user || user.role !== "admin") { setTimeout(() => onGo("/login"), 0); return null; } const [scripts, setScripts] = acUseState(() => window.AppData.getScripts()); const [editing, setEditing] = acUseState(null); const [tab, setTab] = acUseState("scripts"); acUseEffect(() => { const upd = () => setScripts(window.AppData.getScripts()); window.addEventListener("pa:scripts", upd); return () => window.removeEventListener("pa:scripts", upd); }, []); const startNew = () => { setEditing({ __new: true, title: "", software: "AE", category: "", price: 0, summary: "", tags: [], version: "1.0.0", fileSize: "", compatibility: "", files: { video: "", cover: "", detail: "", gallery: [], archive: "", readme: "" } }); }; const save = (e) => { e.preventDefault(); const p = editing; if (p.__new) { const { __new, ...rest } = p; window.AppData.addScript(rest); } else { window.AppData.updateScript(p.id, p); } setEditing(null); }; const orders = window.AppData.getOrders(); const users = window.AppData.getUsers(); const settings = window.AppData.getSettings(); const BG_VIDEOS = window.AppData.BG_VIDEOS; const [bgPick, setBgPick] = acUseState(() => { const s = window.AppData.getSettings(); return s.bgVideoId; }); const [customUrl, setCustomUrl] = acUseState(() => window.AppData.getSettings().customBgVideoUrl || ""); const [customName, setCustomName] = acUseState(() => window.AppData.getSettings().customBgVideoName || ""); const customFileRef = acUseRef(null); const applyBgSelection = (id) => { setBgPick(id); window.AppData.saveSettings({ bgVideoId: id }); }; const applyCustom = () => { if (!customUrl.trim()) { alert("请先填写视频链接或上传文件"); return; } window.AppData.saveSettings({ bgVideoId: "__custom", customBgVideoUrl: customUrl, customBgVideoName: customName || "自定义上传" }); setBgPick("__custom"); }; const onCustomFile = (e) => { const f = e.target.files?.[0]; if (!f) return; if (f.size > 60 * 1024 * 1024) { if (!confirm(`文件大小 ${(f.size/1024/1024).toFixed(1)} MB —— 过大可能导致存储失败，是否继续？`)) return; } const url = URL.createObjectURL(f); setCustomUrl(url); setCustomName(f.name); }; return (
后台

工作室管理

{e.preventDefault(); onGo("/");}} data-cursor="button">查看站点 →
{editing ? (
{editing.__new ? "新增脚本" : "编辑中"}

{editing.title || "未命名脚本"}

setEditing({ ...editing, title: e.target.value })} />
setEditing({ ...editing, category: e.target.value })} placeholder="例如：字体动效" />
setEditing({ ...editing, price: parseFloat(e.target.value) || 0 })} />
setEditing({ ...editing, version: e.target.value })} />
setEditing({ ...editing, compatibility: e.target.value })} placeholder="例如：AE 2023+" />
setEditing({ ...editing, fileSize: e.target.value })} placeholder="例如：184 MB" />