Zac Gaetano
e8e26dd4d8
- Remove @import Google Fonts from common.css (was blocking CSS on LAN) - Update Editor nav link on all pages to dynamically resolve to :47435 (OpenReel SPA) using inline script so it works on any hostname - Fix page titles from Wild Dragon -> Z-AMPP across all pages - Resolver: <a href="#" id="editor-nav-link"> + IIFE sets href at load
753 lines
36 KiB
HTML
753 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
<title>Token Pricing — Z-AMPP</title>
|
||
<link rel="stylesheet" href="css/common.css">
|
||
<style>
|
||
/* GV-flavored teal-on-dark just to lean into the parody */
|
||
.tok-main {
|
||
flex: 1; overflow: auto;
|
||
background:
|
||
radial-gradient(ellipse 70% 50% at 50% 0%, oklch(38% 0.10 200 / 0.45), transparent 60%),
|
||
radial-gradient(ellipse 80% 60% at 20% 100%, oklch(35% 0.14 195 / 0.35), transparent 65%),
|
||
linear-gradient(135deg, oklch(20% 0.06 220), oklch(12% 0.025 230) 100%);
|
||
}
|
||
.tok-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 32px 80px; }
|
||
|
||
.tok-banner {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
.tok-banner-eyebrow {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 5px 14px;
|
||
background: oklch(15% 0.04 200);
|
||
border: 1px solid oklch(50% 0.12 200 / 0.5);
|
||
border-radius: 999px;
|
||
font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
|
||
text-transform: uppercase; color: oklch(75% 0.12 200);
|
||
margin-bottom: 16px;
|
||
}
|
||
.tok-banner-eyebrow::before {
|
||
content: ''; width: 6px; height: 6px;
|
||
background: oklch(70% 0.18 200); border-radius: 50%;
|
||
box-shadow: 0 0 10px oklch(70% 0.18 200);
|
||
}
|
||
.tok-title {
|
||
font-size: 42px; font-weight: 700; letter-spacing: -0.02em;
|
||
line-height: 1.05; color: var(--text-primary);
|
||
margin-bottom: 10px;
|
||
}
|
||
.tok-title .strike { text-decoration: line-through; opacity: 0.4; }
|
||
.tok-title .pop { color: oklch(75% 0.14 200); }
|
||
.tok-sub {
|
||
max-width: 56ch; margin: 0 auto;
|
||
font-size: 14px; color: oklch(70% 0.05 215); line-height: 1.55;
|
||
}
|
||
.tok-sub b { color: oklch(80% 0.10 200); }
|
||
|
||
/* ─ Tier cards ─ */
|
||
.tok-tiers {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 16px;
|
||
margin: 32px 0 40px;
|
||
}
|
||
.tok-tier {
|
||
position: relative;
|
||
background: oklch(13% 0.025 220 / 0.7);
|
||
border: 1px solid oklch(35% 0.06 215 / 0.5);
|
||
border-radius: 12px;
|
||
padding: 22px 22px 18px;
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.tok-tier.featured {
|
||
border-color: oklch(60% 0.15 200 / 0.7);
|
||
box-shadow: 0 16px 50px -16px oklch(50% 0.18 200 / 0.5);
|
||
}
|
||
.tok-tier-flag {
|
||
position: absolute; top: -10px; right: 18px;
|
||
background: oklch(58% 0.16 200);
|
||
color: oklch(10% 0.02 220);
|
||
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
padding: 4px 10px; border-radius: 999px;
|
||
}
|
||
.tok-tier-name {
|
||
font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
|
||
text-transform: uppercase; color: oklch(70% 0.10 200);
|
||
margin-bottom: 8px;
|
||
}
|
||
.tok-tier-price {
|
||
font-size: 28px; font-weight: 700;
|
||
color: var(--text-primary); letter-spacing: -0.01em;
|
||
display: flex; align-items: baseline; gap: 4px;
|
||
}
|
||
.tok-tier-price small {
|
||
font-size: 13px; font-weight: 500;
|
||
color: var(--text-tertiary);
|
||
}
|
||
.tok-tier-tokens {
|
||
margin-top: 4px;
|
||
font-size: 12px; color: var(--text-secondary);
|
||
font-family: var(--font-mono); letter-spacing: 0.04em;
|
||
}
|
||
.tok-tier-list {
|
||
margin: 14px 0 16px; padding: 0; list-style: none;
|
||
font-size: 12px; line-height: 1.7;
|
||
color: var(--text-secondary);
|
||
}
|
||
.tok-tier-list li { padding-left: 16px; position: relative; }
|
||
.tok-tier-list li::before {
|
||
content: '+'; position: absolute; left: 0; top: 0;
|
||
color: oklch(70% 0.14 200); font-weight: 700;
|
||
}
|
||
.tok-tier-list li.minus::before { content: '−'; color: oklch(62% 0.22 25 / 0.7); }
|
||
.tok-tier-cta {
|
||
display: block; text-align: center;
|
||
width: 100%; padding: 9px 12px;
|
||
background: transparent;
|
||
border: 1px solid oklch(50% 0.12 200 / 0.55);
|
||
border-radius: 8px;
|
||
color: oklch(75% 0.12 200);
|
||
font: inherit; font-size: 12px; font-weight: 600;
|
||
letter-spacing: 0.06em; text-transform: uppercase;
|
||
cursor: pointer;
|
||
transition: background 120ms ease, border-color 120ms ease;
|
||
}
|
||
.tok-tier-cta:hover { background: oklch(20% 0.08 200 / 0.4); }
|
||
.tok-tier.featured .tok-tier-cta {
|
||
background: oklch(55% 0.16 200);
|
||
border-color: oklch(55% 0.16 200);
|
||
color: oklch(10% 0.02 220);
|
||
}
|
||
.tok-tier.featured .tok-tier-cta:hover {
|
||
background: oklch(62% 0.18 200);
|
||
}
|
||
|
||
/* ─ Per-service table ─ */
|
||
.tok-section-head {
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
margin: 40px 0 14px;
|
||
}
|
||
.tok-section-title {
|
||
font-size: 11px; font-weight: 700; letter-spacing: 0.20em;
|
||
text-transform: uppercase; color: oklch(70% 0.10 200);
|
||
}
|
||
.tok-section-hint {
|
||
font-size: 11px; color: var(--text-tertiary);
|
||
font-family: var(--font-mono);
|
||
}
|
||
.tok-table {
|
||
width: 100%;
|
||
background: oklch(11% 0.020 220 / 0.7);
|
||
border: 1px solid oklch(35% 0.06 215 / 0.4);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.tok-row {
|
||
display: grid;
|
||
grid-template-columns: 48px 1.4fr 1fr 0.9fr 0.9fr;
|
||
gap: 14px;
|
||
padding: 12px 18px;
|
||
border-top: 1px solid oklch(35% 0.06 215 / 0.25);
|
||
align-items: center;
|
||
font-size: 13px;
|
||
}
|
||
.tok-row:first-child {
|
||
border-top: 0;
|
||
font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
|
||
text-transform: uppercase; color: oklch(65% 0.08 200);
|
||
padding: 14px 18px;
|
||
}
|
||
.tok-row-icon {
|
||
width: 32px; height: 32px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: oklch(15% 0.05 215);
|
||
border: 1px solid oklch(45% 0.12 200 / 0.4);
|
||
border-radius: 8px;
|
||
color: oklch(72% 0.12 200);
|
||
}
|
||
.tok-row-icon svg { width: 16px; height: 16px; }
|
||
.tok-row-name { font-weight: 500; color: var(--text-primary); }
|
||
.tok-row-name small {
|
||
display: block;
|
||
font-size: 11px; font-weight: 400;
|
||
color: var(--text-tertiary); margin-top: 2px;
|
||
}
|
||
.tok-row-meter, .tok-row-rate, .tok-row-mult {
|
||
font-family: var(--font-mono); font-size: 12px;
|
||
color: var(--text-secondary); letter-spacing: 0.04em;
|
||
}
|
||
.tok-row-rate b { color: oklch(78% 0.14 200); font-weight: 600; }
|
||
.tok-row-mult.hot { color: oklch(70% 0.18 25); }
|
||
.tok-row-mult.cold { color: oklch(70% 0.14 145); }
|
||
|
||
/* ─ Calculator ─ */
|
||
.tok-calc {
|
||
margin-top: 36px;
|
||
background: oklch(13% 0.025 220 / 0.7);
|
||
border: 1px solid oklch(35% 0.06 215 / 0.5);
|
||
border-radius: 12px;
|
||
padding: 22px 24px;
|
||
}
|
||
.tok-calc-head { margin-bottom: 14px; }
|
||
.tok-calc-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
|
||
.tok-calc-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
|
||
.tok-calc-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 12px;
|
||
margin: 16px 0 18px;
|
||
}
|
||
.tok-calc-field {
|
||
display: flex; flex-direction: column; gap: 4px;
|
||
}
|
||
.tok-calc-label {
|
||
font-size: 10px; font-weight: 600;
|
||
letter-spacing: 0.14em; text-transform: uppercase;
|
||
color: var(--text-tertiary);
|
||
}
|
||
.tok-calc-field input {
|
||
padding: 8px 12px;
|
||
background: oklch(8% 0.015 220);
|
||
border: 1px solid oklch(35% 0.06 215 / 0.5);
|
||
border-radius: 6px;
|
||
color: var(--text-primary); font: inherit;
|
||
font-family: var(--font-mono); font-size: 14px;
|
||
}
|
||
.tok-calc-out {
|
||
padding: 16px 18px;
|
||
background: oklch(8% 0.015 220);
|
||
border: 1px solid oklch(50% 0.12 200 / 0.4);
|
||
border-radius: 8px;
|
||
display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline;
|
||
}
|
||
.tok-calc-out-total {
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.tok-calc-out-label {
|
||
font-size: 10px; font-weight: 600;
|
||
letter-spacing: 0.18em; text-transform: uppercase;
|
||
color: var(--text-tertiary);
|
||
}
|
||
.tok-calc-out-value {
|
||
font-size: 28px; font-weight: 700;
|
||
color: oklch(82% 0.12 200);
|
||
font-family: var(--font-mono); letter-spacing: -0.02em;
|
||
}
|
||
.tok-calc-out-aside {
|
||
font-size: 11px; color: var(--text-tertiary);
|
||
max-width: 36ch; line-height: 1.5;
|
||
}
|
||
|
||
/* ─ Footnote micro-print ─ */
|
||
.tok-footer {
|
||
margin-top: 36px;
|
||
padding: 18px 22px;
|
||
background: oklch(8% 0.015 220 / 0.6);
|
||
border: 1px solid oklch(30% 0.04 215 / 0.4);
|
||
border-radius: 10px;
|
||
font-size: 10px; line-height: 1.6;
|
||
color: oklch(55% 0.04 215);
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.tok-footer b { color: oklch(70% 0.06 215); font-weight: 600; }
|
||
.tok-footer p { margin: 0 0 8px; }
|
||
.tok-footer p:last-child { margin: 0; }
|
||
|
||
@media (max-width: 700px) {
|
||
.tok-row { grid-template-columns: 36px 1fr 1fr; gap: 10px; padding: 10px 12px; font-size: 12px; }
|
||
.tok-row > :nth-child(4), .tok-row > :nth-child(5) { display: none; }
|
||
.tok-title { font-size: 30px; }
|
||
}
|
||
|
||
/* ─ Token burn chart ─ */
|
||
.tok-chart {
|
||
background: oklch(11% 0.020 220 / 0.7);
|
||
border: 1px solid oklch(35% 0.06 215 / 0.5);
|
||
border-radius: 12px;
|
||
padding: 20px 22px 22px;
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.tok-chart-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 12px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.tok-stat {
|
||
display: flex; flex-direction: column; gap: 2px;
|
||
padding: 10px 12px;
|
||
background: oklch(8% 0.015 220 / 0.7);
|
||
border: 1px solid oklch(35% 0.06 215 / 0.3);
|
||
border-radius: 8px;
|
||
}
|
||
.tok-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
|
||
.tok-stat-value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
|
||
.tok-stat-delta { font-size: 10px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.04em; }
|
||
.tok-stat-delta.hot { color: oklch(70% 0.18 25); }
|
||
.tok-stat-delta.cold { color: oklch(70% 0.14 145); }
|
||
.tok-chart-frame {
|
||
position: relative;
|
||
background: oklch(8% 0.015 220 / 0.7);
|
||
border: 1px solid oklch(35% 0.06 215 / 0.3);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
}
|
||
.tok-chart-svg { width: 100%; height: 260px; display: block; }
|
||
.tok-chart-legend {
|
||
display: flex; flex-wrap: wrap; gap: 18px;
|
||
margin-top: 10px;
|
||
font-size: 11px; color: var(--text-secondary);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.tok-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
|
||
.tok-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="shell">
|
||
<nav class="sidebar" aria-label="Main navigation">
|
||
<div class="sidebar-brand">
|
||
<img src="img/dragon-logo.png?v=1" alt="Wild Dragon" class="sidebar-logo">
|
||
<span class="sidebar-brand-name">Z-AMPP</span>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<a href="home.html" class="nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 7l6-5 6 5v7a1 1 0 0 1-1 1h-3v-5H6v5H3a1 1 0 0 1-1-1z"/></svg>
|
||
Home
|
||
</a>
|
||
<a href="index.html" class="nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>
|
||
Library
|
||
</a>
|
||
<a href="projects.html" class="nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 4a1 1 0 0 1 1-1h4l2 2h5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z"/></svg>
|
||
Projects
|
||
</a>
|
||
<a href="upload.html" class="nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 11V3M5 6l3-3 3 3"/><path d="M2 13h12"/></svg>
|
||
Ingest
|
||
</a>
|
||
<a href="recorders.html" class="nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg>
|
||
Recorders
|
||
</a>
|
||
<a href="capture.html" class="nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5"/></svg>
|
||
Capture
|
||
</a>
|
||
<a href="jobs.html" class="nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h8M2 12h5"/></svg>
|
||
Jobs
|
||
</a>
|
||
<a href="#" id="editor-nav-link" class="nav-item" target="_blank" rel="noopener">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 13l1.5-3.5L11 2l3 3-7.5 7.5L3 14zM10 3l3 3"/></svg>
|
||
Editor
|
||
</a>
|
||
<div class="sidebar-section-label">Admin</div>
|
||
<a href="users.html" class="nav-item">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="5" r="2.5"/><path d="M1 13c0-2.8 2.2-5 5-5s5 2.2 5 5"/><circle cx="12" cy="5" r="2"/><path d="M15 12c0-1.9-1.3-3.5-3-4"/></svg>
|
||
Users
|
||
</a>
|
||
<a href="tokens.html" class="nav-item active">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="10" r="3.5"/><path d="M8.7 7.3L13 3M11.5 3.5l1.5 1.5M13.5 2.5l1 1"/></svg>
|
||
Tokens
|
||
</a>
|
||
</nav>
|
||
<div class="sidebar-footer">
|
||
<div class="sidebar-user">
|
||
<div class="sidebar-user-avatar" id="userAvatar">?</div>
|
||
<div class="sidebar-user-info">
|
||
<div class="sidebar-user-name" id="userName">—</div>
|
||
<div class="sidebar-user-role" id="userRole"></div>
|
||
</div>
|
||
<button class="btn btn-ghost" id="logoutBtn" title="Sign out" style="padding:0;width:24px;height:24px;flex-shrink:0;">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14"><path d="M10 8H3M6 5l-3 3 3 3"/><path d="M7 3h5a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="main tok-main">
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<span class="page-title">Token Pricing</span>
|
||
<span class="topbar-sep">/</span>
|
||
<span class="text-sm" style="color:var(--text-tertiary)">Enterprise Compute Compliance Engine v4.7</span>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<button class="btn btn-ghost btn-sm" onclick="alert('Your account executive will be in touch.\\n\\nEstimated response time: 6–12 business days.')">Talk to sales</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="tok-wrap">
|
||
|
||
<!-- Banner -->
|
||
<div class="tok-banner">
|
||
<span class="tok-banner-eyebrow">Z-AMPP Pricing</span>
|
||
<h1 class="tok-title"><span class="strike">Per-seat</span> · <span class="strike">Per-stream</span> · <span class="strike">Per-month</span><br><span class="pop">Per token.</span></h1>
|
||
<p class="tok-sub">Welcome to the future of broadcast media operations. Tokens are <b>fungible compute credits</b> that flexibly meter every action across the Platform™. Move faster. Pay precisely. Forecast nothing.</p>
|
||
</div>
|
||
|
||
<!-- Tiers -->
|
||
<div class="tok-tiers">
|
||
|
||
<div class="tok-tier">
|
||
<div class="tok-tier-name">Starter</div>
|
||
<div class="tok-tier-price">$499<small> / mo</small></div>
|
||
<div class="tok-tier-tokens">100,000 tokens · $4.99 / 1k</div>
|
||
<ul class="tok-tier-list">
|
||
<li>1 concurrent recorder</li>
|
||
<li>SD ingest (480p · 1.2× multiplier)</li>
|
||
<li>Standard support · email · 96h SLA</li>
|
||
<li class="minus">No HD codec access</li>
|
||
<li class="minus">No ProRes write</li>
|
||
</ul>
|
||
<button class="tok-tier-cta" onclick="addToCart('Starter')">Get started</button>
|
||
</div>
|
||
|
||
<div class="tok-tier featured">
|
||
<span class="tok-tier-flag">Most flexible</span>
|
||
<div class="tok-tier-name">Professional</div>
|
||
<div class="tok-tier-price">$2,499<small> / mo</small></div>
|
||
<div class="tok-tier-tokens">600,000 tokens · $4.17 / 1k</div>
|
||
<ul class="tok-tier-list">
|
||
<li>4 concurrent recorders</li>
|
||
<li>HD ingest (1080p · 3.2× multiplier)</li>
|
||
<li>ProRes HQ write (2.4× multiplier)</li>
|
||
<li>Priority queue · 24h SLA</li>
|
||
<li class="minus">4K surcharge applies</li>
|
||
</ul>
|
||
<button class="tok-tier-cta" onclick="addToCart('Professional')">Provision tier</button>
|
||
</div>
|
||
|
||
<div class="tok-tier">
|
||
<div class="tok-tier-name">Broadcast</div>
|
||
<div class="tok-tier-price">$8,999<small> / mo</small></div>
|
||
<div class="tok-tier-tokens">2,400,000 tokens · $3.75 / 1k</div>
|
||
<ul class="tok-tier-list">
|
||
<li>12 concurrent recorders</li>
|
||
<li>4K ingest (5.8× multiplier)</li>
|
||
<li>ProRes 4444 write (4.0× multiplier)</li>
|
||
<li>Named CSM · phone · 4h SLA</li>
|
||
<li>Token rollover (90 days, fees apply)</li>
|
||
</ul>
|
||
<button class="tok-tier-cta" onclick="addToCart('Broadcast')">Engage account team</button>
|
||
</div>
|
||
|
||
<div class="tok-tier">
|
||
<div class="tok-tier-name">Enterprise</div>
|
||
<div class="tok-tier-price">Contact us</div>
|
||
<div class="tok-tier-tokens">Custom token allocation</div>
|
||
<ul class="tok-tier-list">
|
||
<li>Unlimited* concurrent recorders</li>
|
||
<li>8K / IMF / DCP write tiers</li>
|
||
<li>Dedicated solutions architect</li>
|
||
<li>Quarterly token true-up audits</li>
|
||
<li class="minus">Implementation fee not included</li>
|
||
</ul>
|
||
<button class="tok-tier-cta" onclick="addToCart('Enterprise')">Request quotation</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Per-service table -->
|
||
<div class="tok-section-head">
|
||
<span class="tok-section-title">Per-Service Metering</span>
|
||
<span class="tok-section-hint">All rates exclusive of TVM · effective Q3 FY26</span>
|
||
</div>
|
||
|
||
<div class="tok-table">
|
||
<div class="tok-row">
|
||
<span></span>
|
||
<span>Service</span>
|
||
<span>Meter</span>
|
||
<span>Base rate</span>
|
||
<span>Multiplier</span>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg></div>
|
||
<div class="tok-row-name">Library<small>Asset browse, search, thumbnail render</small></div>
|
||
<div class="tok-row-meter">Per asset · per hour</div>
|
||
<div class="tok-row-rate"><b>0.012</b> tokens</div>
|
||
<div class="tok-row-mult">1.00×</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 11V3M5 6l3-3 3 3"/><path d="M2 13h12"/></svg></div>
|
||
<div class="tok-row-name">Ingest<small>Upload + transcode to managed proxy</small></div>
|
||
<div class="tok-row-meter">Per GB · per pass</div>
|
||
<div class="tok-row-rate"><b>14.4</b> tokens / GB</div>
|
||
<div class="tok-row-mult hot">2.4× during business hours</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg></div>
|
||
<div class="tok-row-name">Recorder · SRT<small>Caller-mode network ingest, includes HLS preview*</small></div>
|
||
<div class="tok-row-meter">Per minute · per recorder</div>
|
||
<div class="tok-row-rate"><b>4.8</b> tokens / min</div>
|
||
<div class="tok-row-mult hot">+22% Reliability Adjustment</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg></div>
|
||
<div class="tok-row-name">Recorder · RTMP<small>Generic ingest tier · legacy codec compatibility</small></div>
|
||
<div class="tok-row-meter">Per minute · per recorder</div>
|
||
<div class="tok-row-rate"><b>3.6</b> tokens / min</div>
|
||
<div class="tok-row-mult">1.00×</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5"/></svg></div>
|
||
<div class="tok-row-name">Capture · SDI<small>DeckLink baseband ingest · 12G-SDI add-on available</small></div>
|
||
<div class="tok-row-meter">Per minute · per SDI channel</div>
|
||
<div class="tok-row-rate"><b>9.2</b> tokens / min</div>
|
||
<div class="tok-row-mult hot">1.8× premium baseband multiplier</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="13" cy="3" r="1"/></svg></div>
|
||
<div class="tok-row-name">Live HLS Preview<small>Real-time delivery acceleration (RTDA™)</small></div>
|
||
<div class="tok-row-meter">Per active viewer · per second</div>
|
||
<div class="tok-row-rate"><b>0.0008</b> tokens</div>
|
||
<div class="tok-row-mult hot">3.2× CDN egress premium</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M5 8h6M8 5v6"/></svg></div>
|
||
<div class="tok-row-name">ProRes HQ Write<small>Mastering-grade codec licensing</small></div>
|
||
<div class="tok-row-meter">Per minute of media</div>
|
||
<div class="tok-row-rate"><b>6.4</b> tokens / min</div>
|
||
<div class="tok-row-mult hot">2.4× codec entitlement fee</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 13l1.5-3.5L11 2l3 3-7.5 7.5L3 14zM10 3l3 3"/></svg></div>
|
||
<div class="tok-row-name">Editor render<small>Server-side concat / trim · brand-aligned codec ladder</small></div>
|
||
<div class="tok-row-meter">Per minute of output</div>
|
||
<div class="tok-row-rate"><b>11.8</b> tokens / min</div>
|
||
<div class="tok-row-mult hot">+18% Real-Time Render Surcharge</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h8M2 12h5"/></svg></div>
|
||
<div class="tok-row-name">Background Jobs<small>Proxy gen, thumbnails, AMPP folder sync</small></div>
|
||
<div class="tok-row-meter">Per job · per CPU-second</div>
|
||
<div class="tok-row-rate"><b>0.45</b> tokens</div>
|
||
<div class="tok-row-mult cold">0.85× off-peak discount</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3h12v10H2z"/><path d="M5 6h6M5 9h4"/></svg></div>
|
||
<div class="tok-row-name">Premiere Pro Connector<small>CEP bridge · per-NLE seat compatibility license</small></div>
|
||
<div class="tok-row-meter">Per workstation · per month</div>
|
||
<div class="tok-row-rate"><b>22,000</b> tokens</div>
|
||
<div class="tok-row-mult hot">+ $99 NLE Compatibility Levy</div>
|
||
</div>
|
||
|
||
<div class="tok-row">
|
||
<div class="tok-row-icon"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 4v4l3 2"/></svg></div>
|
||
<div class="tok-row-name">API call<small>GET /api/v1/* · includes 200-byte response budget</small></div>
|
||
<div class="tok-row-meter">Per request</div>
|
||
<div class="tok-row-rate"><b>0.0011</b> tokens</div>
|
||
<div class="tok-row-mult">1.00× (overage 3.4×)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Usage chart -->
|
||
<div class="tok-section-head">
|
||
<span class="tok-section-title">Current Token Burn</span>
|
||
<span class="tok-section-hint" id="chartHint">Last 14 days · nightly true-up · TVM applied</span>
|
||
</div>
|
||
<div class="tok-chart">
|
||
<div class="tok-chart-stats">
|
||
<div class="tok-stat"><span class="tok-stat-label">MTD burn</span><span class="tok-stat-value" id="statMtd">—</span><span class="tok-stat-delta hot" id="statMtdDelta">+0%</span></div>
|
||
<div class="tok-stat"><span class="tok-stat-label">Forecast EOM</span><span class="tok-stat-value" id="statEom">—</span><span class="tok-stat-delta hot" id="statEomDelta">over plan</span></div>
|
||
<div class="tok-stat"><span class="tok-stat-label">TVM (live)</span><span class="tok-stat-value" id="statTvm">—</span><span class="tok-stat-delta" id="statTvmTrend">stable</span></div>
|
||
<div class="tok-stat"><span class="tok-stat-label">Peak draw</span><span class="tok-stat-value" id="statPeak">—</span><span class="tok-stat-delta cold" id="statPeakDay">Wed</span></div>
|
||
</div>
|
||
<div class="tok-chart-frame">
|
||
<svg class="tok-chart-svg" id="burnChart" viewBox="0 0 800 220" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"></svg>
|
||
<div class="tok-chart-legend">
|
||
<span><i style="background:oklch(70% 0.18 200)"></i>Ingest</span>
|
||
<span><i style="background:oklch(62% 0.15 145)"></i>Recorders</span>
|
||
<span><i style="background:oklch(70% 0.18 80)"></i>Render</span>
|
||
<span><i style="background:oklch(62% 0.22 25)"></i>Overage</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Calculator -->
|
||
<div class="tok-calc">
|
||
<div class="tok-calc-head">
|
||
<div class="tok-calc-title">Monthly token estimator</div>
|
||
<div class="tok-calc-sub">Honest forecasts since 2019. Actual usage may vary by up to 340%.</div>
|
||
</div>
|
||
<div class="tok-calc-grid">
|
||
<div class="tok-calc-field"><label class="tok-calc-label">Ingest GB/mo</label><input id="iIngest" type="number" value="800" min="0"></div>
|
||
<div class="tok-calc-field"><label class="tok-calc-label">SRT recorder hours</label><input id="iSrt" type="number" value="120" min="0"></div>
|
||
<div class="tok-calc-field"><label class="tok-calc-label">SDI capture hours</label><input id="iSdi" type="number" value="40" min="0"></div>
|
||
<div class="tok-calc-field"><label class="tok-calc-label">Premiere seats</label><input id="iSeats" type="number" value="3" min="0"></div>
|
||
<div class="tok-calc-field"><label class="tok-calc-label">Editor render min/mo</label><input id="iRender" type="number" value="240" min="0"></div>
|
||
</div>
|
||
<div class="tok-calc-out">
|
||
<div class="tok-calc-out-total">
|
||
<span class="tok-calc-out-label">Estimated monthly tokens</span>
|
||
<span class="tok-calc-out-value" id="calcTokens">—</span>
|
||
</div>
|
||
<div class="tok-calc-out-total">
|
||
<span class="tok-calc-out-label">At Professional tier</span>
|
||
<span class="tok-calc-out-value" id="calcDollars" style="color:oklch(82% 0.10 25)">—</span>
|
||
</div>
|
||
<div class="tok-calc-out-aside" id="calcNote">Includes 2.4× business-hours Ingest multiplier. Excludes overage, peak-hour surcharge, codec entitlement, and the Token Velocity Modifier (TVM™), which fluctuates between 0.8× and 4.2× without notice.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footnote micro-print -->
|
||
<div class="tok-footer">
|
||
<p><b>Disclosures.</b> All rates quoted in Z-Tokens®, a non-transferable digital unit of account valid only within the Platform™. One (1) token is equivalent to 1.0 token at time of redemption, subject to the Token Velocity Modifier (TVM™), which is recalculated nightly and applied retroactively where contractually permitted. Tokens expire after 30 days unless rolled over with the Token Continuity Add-On (TCA, sold separately).</p>
|
||
<p><b>Multipliers.</b> "Reliability Adjustment", "Real-Time Render Surcharge", and "Premium Baseband Multiplier" are not surcharges; they are <i>positive entitlements</i> that grant continued access to services for which you have already paid. Refusal to pay constitutes voluntary entitlement waiver.</p>
|
||
<p><b>Token Compatibility Levy.</b> A 14% sustainability levy is automatically applied to all token consumption in support of the Platform's commitment to operational excellence. The levy is non-refundable, non-itemized, and not represented above.</p>
|
||
<p><b>Forward-looking statements.</b> Anything resembling a price on this page is illustrative and is not, has not been, and will never be, a price. Pricing is determined exclusively by your assigned Customer Success Outcome Architect during quarterly value-realization workshops.</p>
|
||
<p style="margin-top:14px;font-style:italic;opacity:0.7"><b>Z-AMPP</b> is the broadcast asset management platform you actually own. No token has ever been minted, charged, or considered. This page exists for purely educational purposes. Any resemblance to a real metered-compute pricing model is entirely intentional and deeply affectionate.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/api.js"></script>
|
||
<script src="js/topbar-strip.js"></script>
|
||
<script>
|
||
function addToCart(tier) {
|
||
const lines = [
|
||
'You have selected the ' + tier + ' tier.',
|
||
'',
|
||
'A Customer Success Outcome Architect will reach out',
|
||
'within 6–12 business days to schedule your initial',
|
||
'discovery + value-alignment workshop.',
|
||
'',
|
||
'Until then, please continue using Z-AMPP for free.',
|
||
'Because it is free. Because we built it ourselves.',
|
||
];
|
||
alert(lines.join('\n'));
|
||
}
|
||
|
||
// Calculator
|
||
const tvm = 1.42; // current "Token Velocity Modifier"
|
||
function calc() {
|
||
const g = parseFloat(document.getElementById('iIngest').value || '0');
|
||
const srt = parseFloat(document.getElementById('iSrt').value || '0');
|
||
const sdi = parseFloat(document.getElementById('iSdi').value || '0');
|
||
const seats = parseFloat(document.getElementById('iSeats').value || '0');
|
||
const ren = parseFloat(document.getElementById('iRender').value || '0');
|
||
// Made-up math
|
||
const tokens = Math.round(
|
||
g * 14.4 * 2.4 +
|
||
srt * 60 * 4.8 * 1.22 +
|
||
sdi * 60 * 9.2 * 1.8 +
|
||
seats * 22000 +
|
||
ren * 11.8 * 1.18
|
||
);
|
||
const withLevy = Math.round(tokens * 1.14 * tvm);
|
||
document.getElementById('calcTokens').textContent = withLevy.toLocaleString();
|
||
const dollars = withLevy / 1000 * 4.17;
|
||
document.getElementById('calcDollars').textContent = '$' + Math.round(dollars).toLocaleString();
|
||
}
|
||
document.querySelectorAll('.tok-calc-field input').forEach(i => i.addEventListener('input', calc));
|
||
calc();
|
||
|
||
async function renderBurnChart() {
|
||
let realJobs = 0, realAssets = 0;
|
||
try {
|
||
const [jRes, aRes] = await Promise.all([
|
||
fetch('/api/v1/jobs', { credentials: 'include' }),
|
||
fetch('/api/v1/assets?limit=1', { credentials: 'include' }),
|
||
]);
|
||
if (jRes.ok) realJobs = (await jRes.json()).length;
|
||
if (aRes.ok) realAssets = (await aRes.json()).total || 0;
|
||
} catch (_) {}
|
||
const N = 14;
|
||
const days = [];
|
||
const today = new Date();
|
||
for (let i = N - 1; i >= 0; i--) {
|
||
const d = new Date(today); d.setDate(d.getDate() - i);
|
||
days.push(d);
|
||
}
|
||
function rng(seed) { let x = Math.sin(seed) * 10000; return x - Math.floor(x); }
|
||
const series = days.map((d, i) => {
|
||
const baseline = 8000 + realAssets * 18 + realJobs * 12;
|
||
const wk = (d.getDay() === 0 || d.getDay() === 6) ? 0.55 : 1.0;
|
||
const wave = 1 + 0.45 * Math.sin(i * 0.9) + 0.18 * Math.cos(i * 1.7);
|
||
const noise = 0.8 + 0.4 * rng(i * 13 + 7);
|
||
const total = Math.round(baseline * wk * wave * noise);
|
||
const ingest = Math.round(total * (0.35 + 0.05 * rng(i * 3 + 1)));
|
||
const recorders = Math.round(total * (0.30 + 0.04 * rng(i * 5 + 2)));
|
||
const render = Math.round(total * (0.20 + 0.04 * rng(i * 7 + 3)));
|
||
const overage = Math.max(0, total - ingest - recorders - render);
|
||
return { d, ingest, recorders, render, overage, total };
|
||
});
|
||
const max = Math.max(...series.map(s => s.total));
|
||
const W = 800, H = 220, P = 28;
|
||
const bw = (W - P * 2) / N;
|
||
const layers = [
|
||
{ key: 'ingest', color: 'oklch(70% 0.18 200)' },
|
||
{ key: 'recorders', color: 'oklch(62% 0.15 145)' },
|
||
{ key: 'render', color: 'oklch(70% 0.18 80)' },
|
||
{ key: 'overage', color: 'oklch(62% 0.22 25)' },
|
||
];
|
||
const bars = series.map((s, i) => {
|
||
const x = P + i * bw + 4;
|
||
let yAcc = H - P;
|
||
const stack = layers.map(l => {
|
||
const v = s[l.key] || 0;
|
||
const h = (v / max) * (H - P * 2);
|
||
yAcc -= h;
|
||
return '<rect x="' + x + '" y="' + yAcc + '" width="' + (bw - 8) + '" height="' + h + '" fill="' + l.color + '" opacity="0.92" rx="1"/>';
|
||
}).join('');
|
||
const label = s.d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
|
||
const lbl = i % 2 === 0 ? '<text x="' + (x + (bw-8)/2) + '" y="' + (H - 8) + '" text-anchor="middle" font-size="10" fill="oklch(55% 0.04 215)" font-family="var(--font-mono)">' + label + '</text>' : '';
|
||
return stack + lbl;
|
||
}).join('');
|
||
let grid = '';
|
||
for (let k = 0; k <= 4; k++) {
|
||
const y = P + (H - P * 2) * (k / 4);
|
||
grid += '<line x1="' + P + '" y1="' + y + '" x2="' + (W - P + 12) + '" y2="' + y + '" stroke="oklch(35% 0.06 215 / 0.25)" stroke-width="0.5"/>';
|
||
const tick = Math.round(max * (1 - k / 4));
|
||
grid += '<text x="' + (W - P + 16) + '" y="' + (y + 3) + '" font-size="9" fill="oklch(50% 0.04 215)" font-family="var(--font-mono)">' + tick.toLocaleString() + '</text>';
|
||
}
|
||
document.getElementById('burnChart').innerHTML = grid + bars;
|
||
const mtd = series.reduce((a, s) => a + s.total, 0);
|
||
const eom = Math.round(mtd * 2.3);
|
||
const peakIdx = series.reduce((max, s, i, arr) => s.total > arr[max].total ? i : max, 0);
|
||
const tvm = (0.92 + 0.6 * rng(Date.now() / 60000 | 0)).toFixed(2);
|
||
document.getElementById('statMtd').textContent = mtd.toLocaleString();
|
||
document.getElementById('statMtdDelta').textContent = '+' + Math.round(rng(1) * 40 + 15) + '% vs prior period';
|
||
document.getElementById('statEom').textContent = eom.toLocaleString();
|
||
document.getElementById('statEomDelta').textContent = '+340% over plan';
|
||
document.getElementById('statTvm').textContent = tvm + 'x';
|
||
document.getElementById('statTvmTrend').textContent = parseFloat(tvm) > 1.2 ? 'spiking' : 'stable';
|
||
document.getElementById('statPeak').textContent = series[peakIdx].total.toLocaleString();
|
||
document.getElementById('statPeakDay').textContent = series[peakIdx].d.toLocaleDateString('en', { weekday: 'short' });
|
||
}
|
||
renderBurnChart();
|
||
|
||
</script>
|
||
<script src="js/auth-guard.js"></script>
|
||
<script>
|
||
(function(){
|
||
var el=document.getElementById('editor-nav-link');
|
||
if(el){el.href=location.protocol+'//'+location.hostname+':47435/';}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|