ca5da3c232
Some checks failed
Overhaul landing page design with updated CSS, Tailwind config, and i18n translations across all supported languages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
929 lines
25 KiB
HTML
929 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CERTifAI - Template 5: Swiss Grid</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ========================================================================
|
|
TEMPLATE 5: SWISS GRID
|
|
========================================================================
|
|
Mood: Structured, editorial, Swiss design / International Typographic Style
|
|
Audience: Government, defense, Mittelstand, compliance-heavy industries
|
|
Palette: High-contrast B&W with a single signal red accent
|
|
Fonts: IBM Plex Sans (body) + IBM Plex Mono (data/code)
|
|
Feel: Authoritative, engineered, precise, like a Braun product manual
|
|
======================================================================== */
|
|
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg-white: #ffffff;
|
|
--bg-light: #f5f5f5;
|
|
--bg-warm: #fafafa;
|
|
--bg-dark: #111111;
|
|
--bg-darkgrey: #1a1a1a;
|
|
--text-black: #111111;
|
|
--text-dark: #333333;
|
|
--text-body: #555555;
|
|
--text-muted: #888888;
|
|
--text-light: #bbbbbb;
|
|
--text-inverse: #ffffff;
|
|
--red: #e63525;
|
|
--red-muted: rgba(230, 53, 37, 0.06);
|
|
--red-border: rgba(230, 53, 37, 0.15);
|
|
--green: #1a8754;
|
|
--green-muted: rgba(26, 135, 84, 0.08);
|
|
--border: #e5e5e5;
|
|
--border-dark: #d0d0d0;
|
|
--shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
body {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
color: var(--text-dark);
|
|
background: var(--bg-white);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--text-black);
|
|
}
|
|
|
|
/* ===== View Switcher ===== */
|
|
.view-switcher {
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: 9999;
|
|
display: flex;
|
|
gap: 0;
|
|
background: var(--bg-dark);
|
|
padding: 3px;
|
|
border-radius: 6px;
|
|
}
|
|
.view-switcher button {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
color: rgba(255,255,255,0.35);
|
|
transition: all 0.15s;
|
|
}
|
|
.view-switcher button.active {
|
|
background: var(--red);
|
|
color: #fff;
|
|
}
|
|
.view-switcher button:hover:not(.active) { color: rgba(255,255,255,0.7); }
|
|
|
|
.view { display: none; }
|
|
.view.active { display: block; }
|
|
|
|
/* ===== LANDING ===== */
|
|
|
|
.landing-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 56px;
|
|
height: 64px;
|
|
background: var(--bg-white);
|
|
border-bottom: 2px solid var(--text-black);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.nav-logo {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text-black);
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.nav-logo .red { color: var(--red); }
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 32px;
|
|
list-style: none;
|
|
}
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
transition: color 0.15s;
|
|
}
|
|
.nav-links a:hover { color: var(--text-black); }
|
|
.nav-cta { display: flex; gap: 0; }
|
|
.btn-dark {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
padding: 10px 28px;
|
|
border: 2px solid var(--text-black);
|
|
background: var(--text-black);
|
|
color: var(--text-inverse);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.btn-dark:hover { background: var(--red); border-color: var(--red); }
|
|
.btn-bordered {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
padding: 10px 28px;
|
|
border: 2px solid var(--text-black);
|
|
background: transparent;
|
|
color: var(--text-black);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.btn-bordered:hover { background: var(--bg-light); }
|
|
|
|
/* -- Hero -- */
|
|
.hero {
|
|
padding: 100px 56px 80px;
|
|
display: grid;
|
|
grid-template-columns: 7fr 5fr;
|
|
gap: 80px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.hero-text {
|
|
animation: slideIn 0.5s ease;
|
|
}
|
|
.hero-label {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--red);
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.hero-label::before {
|
|
content: '';
|
|
width: 24px;
|
|
height: 2px;
|
|
background: var(--red);
|
|
}
|
|
.hero h1 {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
letter-spacing: -2px;
|
|
margin-bottom: 24px;
|
|
line-height: 1.05;
|
|
}
|
|
.hero p {
|
|
font-size: 17px;
|
|
color: var(--text-body);
|
|
line-height: 1.7;
|
|
margin-bottom: 40px;
|
|
max-width: 500px;
|
|
}
|
|
.hero-actions { display: flex; gap: 0; }
|
|
.hero-actions .btn-dark { border-right: none; }
|
|
|
|
.hero-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
animation: slideIn 0.5s ease 0.15s both;
|
|
}
|
|
.hero-fact {
|
|
padding: 24px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-warm);
|
|
}
|
|
.hero-fact-number {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--text-black);
|
|
margin-bottom: 4px;
|
|
}
|
|
.hero-fact-text {
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
}
|
|
.hero-fact.accent {
|
|
background: var(--text-black);
|
|
border-color: var(--text-black);
|
|
}
|
|
.hero-fact.accent .hero-fact-number { color: var(--red); }
|
|
.hero-fact.accent .hero-fact-text { color: rgba(255,255,255,0.5); }
|
|
|
|
/* -- Principles Bar -- */
|
|
.principles {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.principle {
|
|
padding: 36px 32px;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.principle:last-child { border-right: none; }
|
|
.principle-num {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--red);
|
|
margin-bottom: 12px;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.principle h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
.principle p {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* -- Features -- */
|
|
.features {
|
|
padding: 80px 56px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.section-header {
|
|
margin-bottom: 56px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
align-items: end;
|
|
}
|
|
.section-header h2 {
|
|
font-size: 36px;
|
|
letter-spacing: -1px;
|
|
}
|
|
.section-header p {
|
|
font-size: 15px;
|
|
color: var(--text-body);
|
|
line-height: 1.7;
|
|
}
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.feature-cell {
|
|
padding: 32px;
|
|
border-right: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background 0.2s;
|
|
}
|
|
.feature-cell:nth-child(3n) { border-right: none; }
|
|
.feature-cell:nth-child(n+4) { border-bottom: none; }
|
|
.feature-cell:hover { background: var(--bg-light); }
|
|
.feature-label {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--red);
|
|
margin-bottom: 12px;
|
|
}
|
|
.feature-cell h3 {
|
|
font-size: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.feature-cell p {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* -- CTA -- */
|
|
.cta-section {
|
|
padding: 0 56px 80px;
|
|
}
|
|
.cta-box {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 64px;
|
|
background: var(--bg-dark);
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 40px;
|
|
align-items: center;
|
|
}
|
|
.cta-box h2 {
|
|
font-size: 32px;
|
|
color: var(--text-inverse);
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.cta-box p {
|
|
font-size: 15px;
|
|
color: rgba(255,255,255,0.4);
|
|
margin-top: 8px;
|
|
}
|
|
.btn-red {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
padding: 14px 36px;
|
|
border: none;
|
|
background: var(--red);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-red:hover { opacity: 0.9; }
|
|
|
|
.landing-footer {
|
|
padding: 32px 56px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 2px solid var(--text-black);
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
.footer-links { display: flex; gap: 24px; }
|
|
.footer-links a { color: var(--text-muted); text-decoration: none; }
|
|
.footer-links a:hover { color: var(--text-black); }
|
|
|
|
/* ===== DASHBOARD ===== */
|
|
|
|
.dashboard-layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background: var(--bg-light);
|
|
}
|
|
|
|
.sidebar {
|
|
width: 248px;
|
|
min-width: 248px;
|
|
background: var(--bg-dark);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
.sidebar-brand {
|
|
padding: 20px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.sidebar-brand h2 {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-inverse);
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.sidebar-brand .red { color: var(--red); }
|
|
.sidebar-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--red);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
.user-name { font-size: 13px; font-weight: 600; color: var(--text-inverse); }
|
|
.user-email { font-size: 11px; color: rgba(255,255,255,0.3); }
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
padding: 12px 8px;
|
|
}
|
|
.nav-section {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: rgba(255,255,255,0.2);
|
|
padding: 16px 14px 6px;
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: rgba(255,255,255,0.4);
|
|
cursor: pointer;
|
|
transition: all 0.12s;
|
|
text-decoration: none;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
.nav-item:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.03); }
|
|
.nav-item.active {
|
|
color: #fff;
|
|
border-left-color: var(--red);
|
|
background: rgba(255,255,255,0.05);
|
|
font-weight: 600;
|
|
}
|
|
.sidebar-footer {
|
|
padding: 14px 20px;
|
|
border-top: 1px solid rgba(255,255,255,0.08);
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 10px;
|
|
color: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 32px 40px;
|
|
min-width: 0;
|
|
}
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 28px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid var(--text-black);
|
|
}
|
|
.page-title { font-size: 24px; letter-spacing: -0.5px; }
|
|
.page-subtitle {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* -- Stats -- */
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0;
|
|
margin-bottom: 28px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-white);
|
|
}
|
|
.stat-cell {
|
|
padding: 24px;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.stat-cell:last-child { border-right: none; }
|
|
.stat-label {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.stat-value {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--text-black);
|
|
}
|
|
.stat-bar {
|
|
height: 3px;
|
|
background: var(--border);
|
|
margin-top: 12px;
|
|
}
|
|
.stat-bar-fill {
|
|
height: 100%;
|
|
background: var(--red);
|
|
}
|
|
|
|
/* -- Content -- */
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 5fr 3fr;
|
|
gap: 0;
|
|
}
|
|
.card {
|
|
background: var(--bg-white);
|
|
border: 1px solid var(--border);
|
|
padding: 24px;
|
|
}
|
|
.card + .card { border-left: none; }
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.card-badge {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
padding: 3px 10px;
|
|
background: var(--red-muted);
|
|
color: var(--red);
|
|
border: 1px solid var(--red-border);
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.data-table th {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
text-align: left;
|
|
padding: 8px 0;
|
|
border-bottom: 2px solid var(--text-black);
|
|
}
|
|
.data-table td {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 12px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--text-dark);
|
|
}
|
|
.data-table tr:last-child td { border-bottom: none; }
|
|
.data-table tr:hover { background: var(--bg-light); }
|
|
.model-mono {
|
|
font-weight: 600;
|
|
color: var(--text-black);
|
|
}
|
|
.status-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
}
|
|
.status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.status-dot.on { background: var(--green); }
|
|
.status-dot.off { background: var(--text-light); }
|
|
|
|
/* -- Member List -- */
|
|
.member-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.member-row:last-child { border-bottom: none; }
|
|
.member-initial {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--bg-dark);
|
|
color: var(--text-inverse);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
.member-name { font-size: 13px; font-weight: 600; color: var(--text-black); }
|
|
.member-email { font-size: 11px; color: var(--text-muted); }
|
|
.member-role {
|
|
margin-left: auto;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateX(-12px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="view-switcher">
|
|
<button class="active" onclick="showView('landing')">LANDING</button>
|
|
<button onclick="showView('dashboard')">DASHBOARD</button>
|
|
</div>
|
|
|
|
<!-- ===== LANDING ===== -->
|
|
<div id="landing" class="view active">
|
|
<nav class="landing-nav">
|
|
<div class="nav-logo">CERTIF<span class="red">AI</span></div>
|
|
<ul class="nav-links">
|
|
<li><a href="#">Principles</a></li>
|
|
<li><a href="#">Capabilities</a></li>
|
|
<li><a href="#">Pricing</a></li>
|
|
<li><a href="#">Documentation</a></li>
|
|
</ul>
|
|
<div class="nav-cta">
|
|
<button class="btn-bordered">Sign In</button>
|
|
<button class="btn-dark">Deploy Now</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="hero-text">
|
|
<div class="hero-label">Private AI Infrastructure</div>
|
|
<h1>AI that answers<br>only to you.</h1>
|
|
<p>Sovereign generative AI infrastructure for organizations that treat data protection as non-negotiable. Deploy on your terms, inside your perimeter.</p>
|
|
<div class="hero-actions">
|
|
<button class="btn-dark">Request Access</button>
|
|
<button class="btn-bordered">Read Documentation</button>
|
|
</div>
|
|
</div>
|
|
<div class="hero-right">
|
|
<div class="hero-fact">
|
|
<div class="hero-fact-number">100%</div>
|
|
<div class="hero-fact-text">On-premise deployment. No data egress.</div>
|
|
</div>
|
|
<div class="hero-fact accent">
|
|
<div class="hero-fact-number">GDPR</div>
|
|
<div class="hero-fact-text">Article 28 compliant by architecture.</div>
|
|
</div>
|
|
<div class="hero-fact">
|
|
<div class="hero-fact-number"><30min</div>
|
|
<div class="hero-fact-text">Full deployment including SSO and models.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="principles">
|
|
<div class="principle">
|
|
<div class="principle-num">01</div>
|
|
<h3>Data Sovereignty</h3>
|
|
<p>Your data never leaves your infrastructure. No telemetry, no third-party calls.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="principle-num">02</div>
|
|
<h3>Full Control</h3>
|
|
<p>Choose your models, set your policies, define your access rules.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="principle-num">03</div>
|
|
<h3>Transparency</h3>
|
|
<p>Every token tracked, every cost attributed, every trace logged.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="principle-num">04</div>
|
|
<h3>EU-Native</h3>
|
|
<p>Designed in Germany for EU compliance. No US-dependent services.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="features">
|
|
<div class="section-header">
|
|
<h2>Capabilities</h2>
|
|
<p>A complete platform for operating AI infrastructure at enterprise scale. Every component self-hosted, every interface yours to configure.</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-cell">
|
|
<div class="feature-label">ROUTING</div>
|
|
<h3>LLM Gateway</h3>
|
|
<p>LiteLLM proxy for unified multi-provider access through a single endpoint.</p>
|
|
</div>
|
|
<div class="feature-cell">
|
|
<div class="feature-label">ORCHESTRATION</div>
|
|
<h3>Agent Platform</h3>
|
|
<p>LangGraph for autonomous agents. LangFlow for visual workflow design.</p>
|
|
</div>
|
|
<div class="feature-cell">
|
|
<div class="feature-label">OBSERVABILITY</div>
|
|
<h3>Analytics</h3>
|
|
<p>Langfuse integration for tracing, cost tracking, and prompt versioning.</p>
|
|
</div>
|
|
<div class="feature-cell">
|
|
<div class="feature-label">IDENTITY</div>
|
|
<h3>SSO & RBAC</h3>
|
|
<p>Keycloak with SAML, OIDC, LDAP. Fine-grained role-based access control.</p>
|
|
</div>
|
|
<div class="feature-cell">
|
|
<div class="feature-label">INTEGRATION</div>
|
|
<h3>MCP & APIs</h3>
|
|
<p>Model Context Protocol servers and REST APIs for tool-augmented AI.</p>
|
|
</div>
|
|
<div class="feature-cell">
|
|
<div class="feature-label">MANAGEMENT</div>
|
|
<h3>Admin Dashboard</h3>
|
|
<p>Billing, team management, usage monitoring, and system configuration.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta-section">
|
|
<div class="cta-box">
|
|
<div>
|
|
<h2>Ready to deploy?</h2>
|
|
<p>Full operational AI stack. Under 30 minutes. No external dependencies.</p>
|
|
</div>
|
|
<button class="btn-red">Request Access</button>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="landing-footer">
|
|
<span>© 2026 CERTifAI GmbH. Handelsregister HRB XXXXX.</span>
|
|
<div class="footer-links">
|
|
<a href="#">Datenschutz</a>
|
|
<a href="#">Impressum</a>
|
|
<a href="#">AGB</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- ===== DASHBOARD ===== -->
|
|
<div id="dashboard" class="view">
|
|
<div class="dashboard-layout">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-brand"><h2>CERTIF<span class="red">AI</span></h2></div>
|
|
<div class="sidebar-user">
|
|
<div class="user-avatar">MM</div>
|
|
<div>
|
|
<div class="user-name">Max Mustermann</div>
|
|
<div class="user-email">max@company.de</div>
|
|
</div>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">Core</div>
|
|
<a class="nav-item active">■ Dashboard</a>
|
|
<a class="nav-item">◊ Providers</a>
|
|
<a class="nav-item">✉ Chat</a>
|
|
<div class="nav-section">Developer</div>
|
|
<a class="nav-item">❖ Agents</a>
|
|
<a class="nav-item">⧉ Workflows</a>
|
|
<a class="nav-item">☰ Analytics</a>
|
|
<div class="nav-section">Organization</div>
|
|
<a class="nav-item">★ Billing</a>
|
|
<a class="nav-item">♟ Members</a>
|
|
</nav>
|
|
<div class="sidebar-footer">CERTifAI v0.1.0</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">Dashboard</h1>
|
|
<p class="page-subtitle">System overview / February 2026</p>
|
|
</div>
|
|
<button class="btn-dark">+ New Search</button>
|
|
</div>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-cell">
|
|
<div class="stat-label">Total Spend</div>
|
|
<div class="stat-value">$47.82</div>
|
|
<div class="stat-bar"><div class="stat-bar-fill" style="width:48%"></div></div>
|
|
</div>
|
|
<div class="stat-cell">
|
|
<div class="stat-label">Tokens Used</div>
|
|
<div class="stat-value">847K</div>
|
|
<div class="stat-bar"><div class="stat-bar-fill" style="width:85%"></div></div>
|
|
</div>
|
|
<div class="stat-cell">
|
|
<div class="stat-label">Active Models</div>
|
|
<div class="stat-value">5</div>
|
|
<div class="stat-bar"><div class="stat-bar-fill" style="width:100%"></div></div>
|
|
</div>
|
|
<div class="stat-cell">
|
|
<div class="stat-label">Team Seats</div>
|
|
<div class="stat-value">4/25</div>
|
|
<div class="stat-bar"><div class="stat-bar-fill" style="width:16%"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-grid">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">Model Usage</div>
|
|
<span class="card-badge">CURRENT MONTH</span>
|
|
</div>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr><th>Model</th><th>Tokens</th><th>Spend</th><th>Status</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="model-mono">Qwen3-Coder-30B</span></td>
|
|
<td>342,000</td>
|
|
<td>$18.40</td>
|
|
<td><span class="status-indicator"><span class="status-dot on"></span>Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="model-mono">Llama-3.1-70B</span></td>
|
|
<td>285,000</td>
|
|
<td>$15.20</td>
|
|
<td><span class="status-indicator"><span class="status-dot on"></span>Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="model-mono">Mistral-7B</span></td>
|
|
<td>120,000</td>
|
|
<td>$8.42</td>
|
|
<td><span class="status-indicator"><span class="status-dot on"></span>Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="model-mono">Gemma-2-9B</span></td>
|
|
<td>65,000</td>
|
|
<td>$3.80</td>
|
|
<td><span class="status-indicator"><span class="status-dot on"></span>Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="model-mono">Phi-3-mini</span></td>
|
|
<td>35,000</td>
|
|
<td>$2.00</td>
|
|
<td><span class="status-indicator"><span class="status-dot off"></span>Idle</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">Team</div>
|
|
</div>
|
|
<div class="member-row">
|
|
<div class="member-initial">MM</div>
|
|
<div>
|
|
<div class="member-name">Max Mustermann</div>
|
|
<div class="member-email">max@company.de</div>
|
|
</div>
|
|
<span class="member-role">Admin</span>
|
|
</div>
|
|
<div class="member-row">
|
|
<div class="member-initial">EM</div>
|
|
<div>
|
|
<div class="member-name">Erika Musterfrau</div>
|
|
<div class="member-email">erika@company.de</div>
|
|
</div>
|
|
<span class="member-role">Member</span>
|
|
</div>
|
|
<div class="member-row">
|
|
<div class="member-initial">JS</div>
|
|
<div>
|
|
<div class="member-name">Johann Schmidt</div>
|
|
<div class="member-email">johann@company.de</div>
|
|
</div>
|
|
<span class="member-role">Member</span>
|
|
</div>
|
|
<div class="member-row">
|
|
<div class="member-initial">AW</div>
|
|
<div>
|
|
<div class="member-name">Anna Weber</div>
|
|
<div class="member-email">anna@company.de</div>
|
|
</div>
|
|
<span class="member-role">Viewer</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showView(id) {
|
|
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
|
document.querySelectorAll('.view-switcher button').forEach(b => b.classList.remove('active'));
|
|
document.getElementById(id).classList.add('active');
|
|
event.target.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|