clavitor/clavitor.ai/templates/base.tmpl

234 lines
12 KiB
Cheetah

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Title}}</title>
{{if .Desc}}<meta name="description" content="{{.Desc}}">{{end}}
<meta property="og:site_name" content="clavitor">
<meta property="og:title" content="{{.Title}}">
{{if .Desc}}<meta property="og:description" content="{{.Desc}}">{{end}}
<meta property="og:type" content="website">
<meta property="og:url" content="https://clavitor.ai{{if ne .Page "index"}}/{{.Page}}{{end}}">
<meta name="twitter:card" content="summary">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="preload" href="/fonts/ibm-plex-sans-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/jetbrains-mono-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/clavitor.css">
{{if eq .Page "install"}}{{template "install-head"}}{{end}}
{{if eq .Page "styleguide"}}{{template "styleguide-head"}}{{end}}
{{if eq .Page "index"}}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "clavitor",
"url": "https://clavitor.ai",
"description": "AI-native password manager with field-level encryption. Your AI gets what it needs. Your secrets stay yours.",
"potentialAction": {
"@type": "SearchAction",
"target": "https://clavitor.ai?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "clavitor",
"url": "https://clavitor.ai",
"logo": "https://clavitor.ai/favicon.svg",
"sameAs": []
}
</script>
{{end}}
{{if or (eq .Page "hosted") (eq .Page "pricing")}}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "clavitor",
"applicationCategory": "SecurityApplication",
"operatingSystem": "Any",
"offers": {
"@type": "Offer",
"price": "12",
"priceCurrency": "USD",
"priceValidUntil": "2026-12-31",
"description": "$12/year hosted (launch price)"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "1"
},
"featureList": "Field-level encryption, WebAuthn PRF, Scoped agent tokens, AI-powered 2FA, LLM field mapping"
}
</script>
{{end}}
</head>
<body>
<nav class="nav">
<div class="container nav-inner">
<a href="/" class="nav-logo"><span class="logo-lockup logo-lockup-nav"><span class="logo-lockup-square"></span><span class="logo-lockup-text"><span class="logo-lockup-wordmark">CLAVITOR</span><span class="logo-lockup-tagline">Black-box credential issuance</span></span></span></a>
<button class="nav-hamburger" onclick="document.querySelector('.nav-links').classList.toggle('open')"><span></span><span></span><span></span></button>
<div class="nav-links">
<a href="/hosted" class="nav-link{{if eq .ActiveNav "hosted"}} active{{end}}">Hosted</a>
<div class="nav-dropdown">
<span class="nav-link nav-dropdown-trigger{{if or (eq .ActiveNav "install") (eq .ActiveNav "integrations") (eq .ActiveNav "upgrade") (eq .ActiveNav "developers")}} active{{end}}">Product</span>
<div class="nav-dropdown-menu">
<a href="/upgrade" class="nav-dropdown-item">Upgrade</a>
<a href="/developers" class="nav-dropdown-item">Developers</a>
<a href="/install" class="nav-dropdown-item">Self-host</a>
<a href="/integrations/claude-code" class="nav-dropdown-item">Claude Code</a>
<a href="/integrations/codex" class="nav-dropdown-item">Codex</a>
<a href="/integrations/openclaw" class="nav-dropdown-item">OpenClaw</a>
</div>
</div>
<div class="nav-dropdown">
<span class="nav-link nav-dropdown-trigger{{if or (eq .ActiveNav "status") (eq .ActiveNav "glass")}} active{{end}}">Network</span>
<div class="nav-dropdown-menu">
<a href="/status" class="nav-dropdown-item">Status</a>
<a href="/glass" class="nav-dropdown-item">Looking Glass</a>
</div>
</div>
<div class="nav-dropdown">
<span class="nav-link nav-dropdown-trigger{{if or (eq .ActiveNav "for-consumer") (eq .ActiveNav "for-smb") (eq .ActiveNav "for-mme") (eq .ActiveNav "for-enterprise") (eq .ActiveNav "for-msp")}} active{{end}}">Solutions</span>
<div class="nav-dropdown-menu">
<a href="/for/consumer" class="nav-dropdown-item">Consumer</a>
<a href="/for/smb" class="nav-dropdown-item">SMB</a>
<a href="/for/enterprise" class="nav-dropdown-item">Enterprise</a>
<a href="/for/msp" class="nav-dropdown-item">MSP</a>
</div>
</div>
<a href="/pricing" class="nav-link{{if eq .ActiveNav "pricing"}} active{{end}}">Pricing</a>
<div class="nav-dropdown nav-dropdown--locale">
<span class="nav-link nav-dropdown-trigger" id="localeTrigger">🌐 EN / $</span>
<div class="nav-dropdown-menu nav-dropdown-menu--right">
<div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Language</div>
<a href="/" class="nav-dropdown-item active" data-lang="en">🇺🇸 English</a>
<a href="/de" class="nav-dropdown-item" data-lang="de">🇩🇪 Deutsch</a>
<a href="/fr" class="nav-dropdown-item" data-lang="fr">🇫🇷 Français</a>
<div style="border-top:1px solid var(--border);margin:8px 0;"></div>
<div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Currency</div>
<a href="#" class="nav-dropdown-item active" data-currency="USD">USD $</a>
<a href="#" class="nav-dropdown-item" data-currency="EUR">EUR €</a>
<a href="#" class="nav-dropdown-item" data-currency="CHF">CHF</a>
<a href="#" class="nav-dropdown-item" data-currency="GBP">GBP £</a>
</div>
</div>
<a href="#" class="nav-link btn btn-ghost">Sign in</a>
<a href="/hosted" class="btn btn-primary">Get hosted &mdash; <s>$20</s> $12/yr</a>
</div>
</div>
</nav>
{{if eq .Page "index"}}{{template "index" .}}
{{else if eq .Page "hosted"}}{{template "hosted" .}}
{{else if eq .Page "install"}}{{template "install" .}}
{{else if eq .Page "pricing"}}{{template "pricing" .}}
{{else if eq .Page "privacy"}}{{template "privacy" .}}
{{else if eq .Page "terms"}}{{template "terms" .}}
{{else if eq .Page "cookies"}}{{template "cookies" .}}
{{else if eq .Page "sources"}}{{template "sources" .}}
{{else if eq .Page "upgrade"}}{{template "upgrade" .}}
{{else if eq .Page "developers"}}{{template "developers" .}}
{{else if eq .Page "styleguide"}}{{template "styleguide" .}}
{{else if eq .Page "glass"}}{{template "glass" .}}
{{else if eq .Page "noc"}}{{template "noc" .}}
{{else if eq .Page "status"}}{{template "status" .}}
{{else if eq .Page "signup"}}{{template "signup" .}}
{{else if eq .Page "claude-code"}}{{template "claude-code" .}}
{{else if eq .Page "codex"}}{{template "codex" .}}
{{else if eq .Page "openclaw"}}{{template "openclaw" .}}
{{else if eq .Page "openclaw-cn"}}{{template "openclaw-cn" .}}
{{else if eq .Page "install-new"}}{{template "install-new" .}}
{{else if eq .Page "for-consumer"}}{{template "for-consumer" .}}
{{else if eq .Page "for-smb"}}{{template "for-smb" .}}
{{else if eq .Page "for-mme"}}{{template "for-mme" .}}
{{else if eq .Page "for-enterprise"}}{{template "for-enterprise" .}}
{{else if eq .Page "for-msp"}}{{template "for-msp" .}}
{{else if eq .Page "onboarding-profile"}}{{template "onboarding-profile" .}}
{{else if eq .Page "onboarding-plan"}}{{template "onboarding-plan" .}}
{{else if eq .Page "onboarding-done"}}{{template "onboarding-done" .}}
{{else if eq .Page "onboarding-login"}}{{template "onboarding-login" .}}
{{else if eq .Page "onboarding-details"}}{{template "onboarding-details" .}}
{{else if eq .Page "onboarding-product"}}{{template "onboarding-product" .}}
{{else if eq .Page "onboarding-terms"}}{{template "onboarding-terms" .}}
{{else if eq .Page "onboarding-checkout"}}{{template "onboarding-checkout" .}}
{{end}}
{{if ne .Page "styleguide"}}{{template "footer"}}{{end}}
{{if eq .Page "hosted" "glass"}}{{template "ping-script"}}{{end}}
{{if eq .Page "index"}}{{template "index-script"}}
{{else if eq .Page "hosted"}}{{template "hosted-script" .}}
{{else if eq .Page "glass"}}{{template "glass-script"}}
{{else if eq .Page "noc"}}{{template "noc-script"}}
{{else if eq .Page "status"}}{{template "status-script"}}
{{else if eq .Page "signup"}}{{template "signup-script"}}
{{else if eq .Page "install"}}{{template "install-script"}}
{{else if eq .Page "onboarding-profile"}}{{template "onboarding-profile-script"}}
{{else if eq .Page "onboarding-plan"}}{{template "onboarding-plan-script"}}
{{end}}
<script>
document.querySelectorAll('.nav-dropdown-trigger').forEach(t=>t.addEventListener('click',()=>t.parentElement.classList.toggle('open')));
// Locale selector
(function() {
const localeTrigger = document.getElementById('localeTrigger');
if (!localeTrigger) return;
const dropdown = localeTrigger.parentElement;
const langItems = dropdown.querySelectorAll('[data-lang]');
const currencyItems = dropdown.querySelectorAll('[data-currency]');
// Load saved preferences
const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
const currentLang = saved.lang || 'en';
const currentCurrency = saved.currency || 'USD';
function updateDisplay() {
const lang = dropdown.querySelector('[data-lang].active')?.dataset.lang || currentLang;
const currency = dropdown.querySelector('[data-currency].active')?.dataset.currency || currentCurrency;
const langFlags = { en: '🇺🇸', de: '🇩🇪', fr: '🇫🇷' };
localeTrigger.textContent = `${langFlags[lang] || '🌐'} ${lang.toUpperCase()} / ${currency}`;
}
// Set initial active states
langItems.forEach(el => {
if (el.dataset.lang === currentLang) el.classList.add('active');
else el.classList.remove('active');
});
currencyItems.forEach(el => {
if (el.dataset.currency === currentCurrency) el.classList.add('active');
else el.classList.remove('active');
});
updateDisplay();
// Handle language selection
langItems.forEach(el => el.addEventListener('click', (e) => {
e.preventDefault();
langItems.forEach(i => i.classList.remove('active'));
el.classList.add('active');
localStorage.setItem('clavitor-locale', JSON.stringify({ lang: el.dataset.lang, currency: currentCurrency }));
updateDisplay();
// Navigate to language path
if (el.dataset.lang === 'en') window.location.href = '/';
else window.location.href = '/' + el.dataset.lang;
}));
// Handle currency selection
currencyItems.forEach(el => el.addEventListener('click', (e) => {
e.preventDefault();
currencyItems.forEach(i => i.classList.remove('active'));
el.classList.add('active');
localStorage.setItem('clavitor-locale', JSON.stringify({ lang: currentLang, currency: el.dataset.currency }));
updateDisplay();
// Refresh page to apply currency (or fetch rates via JS)
window.location.reload();
}));
})();
</script>
</body>
</html>