77 lines
3.3 KiB
HTML
77 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mobile Test — 375px</title>
|
|
<link rel="stylesheet" href="/clavitor.css">
|
|
<style>
|
|
@font-face {
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 400 700;
|
|
font-display: swap;
|
|
src: url('https://fonts.gstatic.com/s/ibmplexsans/v19/zYXzKVElJtQ_m--A1PHz_MlYGHbM.woff2') format('woff2');
|
|
}
|
|
body { max-width: 375px; margin: 0 auto; border: 1px solid #ccc; }
|
|
</style>
|
|
</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></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">Hosted</a>
|
|
<a href="/pricing" class="nav-link active">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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<a href="/hosted" class="btn btn-primary">Get hosted</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="hero container">
|
|
<p class="label accent mb-3">Simple pricing</p>
|
|
<h1 class="mb-4">No tiers.</h1>
|
|
<p class="lead">Two options.</p>
|
|
</div>
|
|
|
|
<div class="section container">
|
|
<div class="grid-2">
|
|
<div class="price-card">
|
|
<p class="label mb-2">Self-hosted</p>
|
|
<div class="price-amount mb-2">Free</div>
|
|
</div>
|
|
<div class="price-card featured">
|
|
<span class="badge recommended price-badge">Rec</span>
|
|
<p class="label accent mb-2">Hosted</p>
|
|
<div class="price-amount mb-2">$12<span class="price-period">/yr</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div>© 2025</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.querySelectorAll('.nav-dropdown-trigger').forEach(t=>t.addEventListener('click',()=>t.parentElement.classList.toggle('open')));
|
|
</script>
|
|
|
|
</body>
|
|
</html> |