mirror of
https://github.com/blackboxprogramming/blackroad.io.git
synced 2026-03-18 06:34:01 -05:00
fix: replace auth wall with public landing page
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> RoadChain-SHA2048: bda6c6ef2c7de92b RoadChain-Identity: alexa@sovereign RoadChain-Full: bda6c6ef2c7de92b468dae17f57e0aad1995ca7431169548c4f54cd7acd2ddcc0e16011d6cad64c96fcc324571a5b5468edf3ed4c0beb663490b5aab2e742ff89b062d4f0cb857f872dcdd6e4451e85eaa6ca3f37e5b8cf91e3ec1f19183e03cbc8e26235daf3519f57f1c2e93eeca7d11bd3fdd9d37779326bc5aaf64c95ed8e87273f761c54ed21174af2dd37fe340fcf5807ecc04aae127c6597e40414c3e56126817415aa0f675b499537c2aa2233c6875a9f72fe0f75c8c7fd049a06d760c3099341d917c2b0186edeca3ea86a9c9259183a7f4d04ca2b4cacc44da88c88d045654188a169a87c61ebf1037d8c9de0f60de9ace963bfe9d7163c86ba272
This commit is contained in:
700
index.html
700
index.html
@@ -1,348 +1,404 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<link rel="icon" type="image/png" sizes="32x32" href="https://images.blackroad.io/brand/br-square-32.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="192x192" href="https://images.blackroad.io/brand/br-square-192.png" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="https://images.blackroad.io/brand/apple-touch-icon.png" />
|
||||||
|
<meta property="og:image" content="https://images.blackroad.io/brand/br-square-512.png" />
|
||||||
|
<meta name="twitter:card" content="summary" />
|
||||||
|
<meta name="twitter:image" content="https://images.blackroad.io/brand/br-square-512.png" /> <meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>BlackRoad OS - 30,000 AI Agents</title>
|
<title>BlackRoad OS — Pave Tomorrow.</title>
|
||||||
<script src="https://js.stripe.com/v3/"></script>
|
<link rel="icon" type="image/x-icon" href="https://images.blackroad.io/brand/favicon.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="192x192" href="https://images.blackroad.io/brand/br-square-192.png" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="https://images.blackroad.io/brand/apple-touch-icon.png" />
|
||||||
|
<meta property="og:image" content="https://images.blackroad.io/brand/br-square-512.png" />
|
||||||
|
<meta name="description" content="BlackRoad OS — Pave Tomorrow.">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="../_shared/design.css">
|
||||||
<style>
|
<style>
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
/* Hero */
|
||||||
:root {
|
.hero {
|
||||||
--gradient: linear-gradient(135deg, #FF9D00, #FF6B00, #FF0066, #D600AA, #7700FF, #0066FF);
|
|
||||||
--bg: #02030a;
|
|
||||||
--text: #ffffff;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
display: flex; flex-direction: column; justify-content: center;
|
||||||
|
padding: 0 var(--sp-xl);
|
||||||
|
position: relative; overflow: hidden;
|
||||||
}
|
}
|
||||||
.auth-screen {
|
.hero-eyebrow {
|
||||||
display: flex;
|
font-family: var(--font-mono);
|
||||||
align-items: center;
|
font-size: 0.75rem;
|
||||||
justify-content: center;
|
letter-spacing: 0.2em;
|
||||||
min-height: 100vh;
|
text-transform: uppercase;
|
||||||
background: radial-gradient(circle at top, #1a1f3a 0%, var(--bg) 60%);
|
color: var(--subtle);
|
||||||
|
margin-bottom: var(--sp-md);
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
}
|
}
|
||||||
.auth-container {
|
.hero-eyebrow::before {
|
||||||
background: rgba(255,255,255,0.05);
|
content: '';
|
||||||
backdrop-filter: blur(20px);
|
display: inline-block;
|
||||||
border-radius: 24px;
|
width: 6px; height: 6px;
|
||||||
padding: 48px;
|
background: var(--pink);
|
||||||
width: 400px;
|
border-radius: 50%;
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
animation: pulse 2s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
.logo {
|
@keyframes pulse {
|
||||||
font-size: 48px;
|
0%, 100% { opacity: 1; transform: scale(1); }
|
||||||
font-weight: 900;
|
50% { opacity: 0.4; transform: scale(0.8); }
|
||||||
background: var(--gradient);
|
}
|
||||||
-webkit-background-clip: text;
|
.hero h1 { max-width: 900px; margin-bottom: var(--sp-lg); }
|
||||||
-webkit-text-fill-color: transparent;
|
.hero-sub {
|
||||||
|
font-size: 1.2rem; color: var(--subtle);
|
||||||
|
max-width: 540px; margin-bottom: var(--sp-xl);
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
.hero-actions { display: flex; gap: var(--sp-md); align-items: center; flex-wrap: wrap; }
|
||||||
|
.btn-primary {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
background: var(--grad); color: var(--white);
|
||||||
|
padding: 14px 28px; border-radius: 8px;
|
||||||
|
font-weight: 700; font-size: 0.95rem;
|
||||||
|
transition: opacity 0.2s, transform 0.2s var(--ease-spring);
|
||||||
|
}
|
||||||
|
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
|
||||||
|
.btn-ghost {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
border: 1px solid var(--border); color: var(--subtle);
|
||||||
|
padding: 14px 28px; border-radius: 8px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition: border-color 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
.btn-ghost:hover { border-color: var(--muted); color: var(--white); }
|
||||||
|
.hero-stat {
|
||||||
|
font-family: var(--font-mono); font-size: 0.75rem;
|
||||||
|
color: var(--muted); margin-left: var(--sp-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Marquee */
|
||||||
|
.marquee-wrap {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding: var(--sp-md) 0; overflow: hidden;
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
.marquee {
|
||||||
|
display: flex; gap: var(--sp-xl);
|
||||||
|
animation: marquee 30s linear infinite;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.marquee-item {
|
||||||
|
font-family: var(--font-mono); font-size: 0.75rem;
|
||||||
|
color: var(--muted); letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.marquee-dot { color: var(--pink); margin: 0 4px; }
|
||||||
|
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
|
||||||
|
|
||||||
|
/* Features */
|
||||||
|
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
|
||||||
|
@media (max-width: 768px) { .features-grid { grid-template-columns: 1fr; } }
|
||||||
|
.feature-icon {
|
||||||
|
font-size: 1.5rem; margin-bottom: var(--sp-sm);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.feature-title { font-size: 1rem; font-weight: 600; margin-bottom: var(--sp-xs); }
|
||||||
|
.feature-desc { font-size: 0.875rem; color: var(--subtle); line-height: 1.65; }
|
||||||
|
|
||||||
|
/* Agents section */
|
||||||
|
.agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
|
||||||
|
@media (max-width: 900px) { .agents-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||||
|
@media (max-width: 600px) { .agents-grid { grid-template-columns: 1fr; } }
|
||||||
|
.agent-card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: var(--sp-lg);
|
||||||
|
transition: border-color 0.2s, transform 0.2s var(--ease);
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.agent-card:hover { border-color: var(--muted); transform: translateY(-2px); }
|
||||||
|
.agent-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute; top: 0; left: 0; right: 0;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
.agent-lucidia::before { background: #0af; }
|
||||||
|
.agent-cecilia::before { background: #a855f7; }
|
||||||
|
.agent-alice::before { background: #22c55e; }
|
||||||
|
.agent-octavia::before { background: #f59e0b; }
|
||||||
|
.agent-aria::before { background: #3b82f6; }
|
||||||
|
.agent-shellfish::before { background: #ef4444; }
|
||||||
|
.agent-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; font-family: var(--font-mono); }
|
||||||
|
.agent-role { font-size: 0.78rem; color: var(--subtle); margin-bottom: var(--sp-sm); }
|
||||||
|
.agent-email { font-size: 0.72rem; color: var(--muted); font-family: var(--font-mono); }
|
||||||
|
.agent-quote { font-size: 0.82rem; color: var(--subtle); font-style: italic; line-height: 1.55; border-left: 2px solid var(--border); padding-left: var(--sp-sm); margin-top: var(--sp-sm); }
|
||||||
|
|
||||||
|
/* Stats */
|
||||||
|
.stats-row { display: flex; gap: var(--sp-xl); flex-wrap: wrap; }
|
||||||
|
.stat-num { font-size: 3rem; font-weight: 800; font-family: var(--font-mono); letter-spacing: -0.04em; }
|
||||||
|
.stat-label { font-size: 0.8rem; color: var(--subtle); margin-top: 4px; }
|
||||||
|
|
||||||
|
/* Terminal block */
|
||||||
|
.terminal {
|
||||||
|
background: #0d0d0d;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: var(--sp-lg);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.terminal-bar { display: flex; gap: 6px; margin-bottom: var(--sp-md); }
|
||||||
|
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
|
||||||
|
.t-red { background: #ff5f57; }
|
||||||
|
.t-yellow { background: #febc2e; }
|
||||||
|
.t-green { background: #28c840; }
|
||||||
|
.t-prompt { color: var(--pink); }
|
||||||
|
.t-cmd { color: var(--white); }
|
||||||
|
.t-out { color: var(--muted); }
|
||||||
|
.t-success { color: #22c55e; }
|
||||||
|
.t-comment { color: #444; }
|
||||||
|
|
||||||
|
/* CTA band */
|
||||||
|
.cta-band {
|
||||||
|
background: linear-gradient(135deg, rgba(245,166,35,0.08) 0%, rgba(255,29,108,0.08) 50%, rgba(41,121,255,0.08) 100%);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: var(--sp-2xl) var(--sp-xl);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
}
|
||||||
.form-group { margin-bottom: 24px; }
|
.cta-band h2 { margin-bottom: var(--sp-md); }
|
||||||
label { display: block; margin-bottom: 8px; font-size: 14px; opacity: 0.8; }
|
.cta-band p { max-width: 500px; margin: 0 auto var(--sp-xl); }
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
input:focus { outline: none; border-color: #7700FF; }
|
|
||||||
button {
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: none;
|
|
||||||
background: var(--gradient);
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
button:hover { transform: scale(1.02); }
|
|
||||||
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
||||||
.toggle-auth { text-align: center; margin-top: 16px; font-size: 14px; opacity: 0.7; }
|
|
||||||
.toggle-auth a { color: #7700FF; text-decoration: none; }
|
|
||||||
.app-container { display: none; }
|
|
||||||
.navbar {
|
|
||||||
background: rgba(0,0,0,0.5);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
padding: 16px 32px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
.navbar-brand {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 900;
|
|
||||||
background: var(--gradient);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
.navbar-menu { display: flex; gap: 24px; align-items: center; }
|
|
||||||
.navbar-menu a { color: white; text-decoration: none; opacity: 0.8; transition: opacity 0.2s; }
|
|
||||||
.navbar-menu a:hover { opacity: 1; }
|
|
||||||
.user-badge {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.content { max-width: 1200px; margin: 48px auto; padding: 0 32px; }
|
|
||||||
.hero { text-align: center; padding: 80px 0; }
|
|
||||||
.hero h1 { font-size: 64px; font-weight: 900; margin-bottom: 24px; }
|
|
||||||
.hero p { font-size: 24px; opacity: 0.8; margin-bottom: 48px; }
|
|
||||||
.pricing-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 32px;
|
|
||||||
margin-top: 48px;
|
|
||||||
}
|
|
||||||
.pricing-card {
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border-radius: 24px;
|
|
||||||
padding: 40px;
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
.pricing-card:hover { transform: translateY(-8px); border-color: #7700FF; }
|
|
||||||
.pricing-card h3 { font-size: 32px; margin-bottom: 16px; }
|
|
||||||
.pricing-card .price {
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 900;
|
|
||||||
background: var(--gradient);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.pricing-card ul { list-style: none; margin-bottom: 32px; }
|
|
||||||
.pricing-card li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
|
|
||||||
.error {
|
|
||||||
background: rgba(255,0,0,0.1);
|
|
||||||
border: 1px solid rgba(255,0,0,0.3);
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
color: #ff6b6b;
|
|
||||||
}
|
|
||||||
.success {
|
|
||||||
background: rgba(0,255,0,0.1);
|
|
||||||
border: 1px solid rgba(0,255,0,0.3);
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
color: #51cf66;
|
|
||||||
}
|
|
||||||
.hidden { display: none !important; }
|
|
||||||
</style>
|
</style>
|
||||||
|
<script src="https://blackroad-mesh.amundsonalexa.workers.dev/mesh.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="dot-bg">
|
||||||
<div class="auth-screen" id="authScreen">
|
|
||||||
<div class="auth-container">
|
<!-- Nav -->
|
||||||
<div class="logo">BlackRoad OS</div>
|
<nav>
|
||||||
<div id="errorMessage" class="error hidden"></div>
|
<div class="nav-logo grad-text">BlackRoad OS</div>
|
||||||
<div id="successMessage" class="success hidden"></div>
|
<div class="nav-links">
|
||||||
<form id="loginForm">
|
<a href="/docs">Docs</a>
|
||||||
<div class="form-group">
|
<a href="/chat">Chat</a>
|
||||||
<label>Email</label>
|
<a href="/api">API</a>
|
||||||
<input type="email" id="loginEmail" value="test@blackroad.io" required />
|
<a href="#agents">Agents</a>
|
||||||
</div>
|
<a href="https://blackroadai.com">AI</a>
|
||||||
<div class="form-group">
|
<a href="https://lucidia.earth">Lucidia</a>
|
||||||
<label>Password</label>
|
</div>
|
||||||
<input type="password" id="loginPassword" value="password123" required />
|
<a href="/getting-started" class="nav-cta">Get Started →</a>
|
||||||
</div>
|
</nav>
|
||||||
<button type="submit">Sign In</button>
|
|
||||||
<div class="toggle-auth">
|
<!-- Hero -->
|
||||||
Don't have an account? <a href="#" id="showRegister">Register</a>
|
<div class="hero">
|
||||||
</div>
|
<div class="hero-eyebrow">BlackRoad OS, Inc. · 2026</div>
|
||||||
</form>
|
<h1>BlackRoad OS —<br><span class="grad-text">Pave Tomorrow.</span></h1>
|
||||||
<form id="registerForm" class="hidden">
|
<p class="hero-sub">50 AI skills. 5 edge nodes. 52 TOPS. Sovereign AI on your hardware.</p>
|
||||||
<div class="form-group">
|
<div class="hero-actions">
|
||||||
<label>Username</label>
|
<a href="/docs" class="btn-primary">Get Started →</a>
|
||||||
<input type="text" id="registerUsername" required />
|
<a href="https://github.com/BlackRoad-OS-Inc/blackroad" class="btn-ghost">
|
||||||
</div>
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
||||||
<div class="form-group">
|
GitHub
|
||||||
<label>Email</label>
|
</a>
|
||||||
<input type="email" id="registerEmail" required />
|
<span class="hero-stat">v3.0 · 50 AI skills · 90 tools</span>
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Full Name</label>
|
|
||||||
<input type="text" id="registerFullName" required />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Password</label>
|
|
||||||
<input type="password" id="registerPassword" required />
|
|
||||||
</div>
|
|
||||||
<button type="submit">Create Account</button>
|
|
||||||
<div class="toggle-auth">
|
|
||||||
Already have an account? <a href="#" id="showLogin">Sign In</a>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-container" id="appContainer">
|
|
||||||
<nav class="navbar">
|
<!-- Marquee -->
|
||||||
<div class="navbar-brand">BlackRoad OS</div>
|
<div class="marquee-wrap">
|
||||||
<div class="navbar-menu">
|
<div class="marquee">
|
||||||
<a href="#dashboard">Dashboard</a>
|
<span class="marquee-item">br geb oracle</span><span class="marquee-dot">◆</span>
|
||||||
<a href="#agents">Agents</a>
|
<span class="marquee-item">br nodes status</span><span class="marquee-dot">◆</span>
|
||||||
<a href="#docs">Docs</a>
|
<span class="marquee-item">br deploy</span><span class="marquee-dot">◆</span>
|
||||||
<div class="user-badge" id="userBadge"></div>
|
<span class="marquee-item">50 AI skills</span><span class="marquee-dot">◆</span>
|
||||||
<a href="#" id="logoutBtn">Logout</a>
|
<span class="marquee-item">lucidia@blackroad.io</span><span class="marquee-dot">◆</span>
|
||||||
</div>
|
<span class="marquee-item">br oracle</span><span class="marquee-dot">◆</span>
|
||||||
</nav>
|
<span class="marquee-item">your hardware</span><span class="marquee-dot">◆</span>
|
||||||
<div class="content">
|
<span class="marquee-item">no lock-in</span><span class="marquee-dot">◆</span>
|
||||||
<div class="hero">
|
<span class="marquee-item">br geb hofstadter</span><span class="marquee-dot">◆</span>
|
||||||
<h1>30,000 AI Agents at Your Command</h1>
|
<span class="marquee-item">blackroad.ai</span><span class="marquee-dot">◆</span>
|
||||||
<p>The future of computing is here</p>
|
<!-- duplicate for seamless loop -->
|
||||||
<div style="margin-top: 32px; padding: 24px; background: rgba(255,255,255,0.05); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);">
|
<span class="marquee-item">br geb oracle</span><span class="marquee-dot">◆</span>
|
||||||
<p style="font-size: 18px; margin-bottom: 16px;">💸 Support BlackRoad</p>
|
<span class="marquee-item">br nodes status</span><span class="marquee-dot">◆</span>
|
||||||
<a href="https://krak.app/AAAAAAAA" target="_blank" style="display: inline-block; padding: 12px 24px; background: var(--gradient); color: white; text-decoration: none; border-radius: 8px; font-weight: 700; margin: 8px;">Tap here to try Krak →</a>
|
<span class="marquee-item">br deploy</span><span class="marquee-dot">◆</span>
|
||||||
<div style="font-family: monospace; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; margin-top: 16px; font-size: 14px; word-break: break-all;">
|
<span class="marquee-item">50 AI skills</span><span class="marquee-dot">◆</span>
|
||||||
<strong>BTC:</strong> 3NJYuq8KA1xBea6JNg32XgDwjpvLkrR5VH
|
<span class="marquee-item">lucidia@blackroad.io</span><span class="marquee-dot">◆</span>
|
||||||
</div>
|
<span class="marquee-item">br oracle</span><span class="marquee-dot">◆</span>
|
||||||
</div>
|
<span class="marquee-item">your hardware</span><span class="marquee-dot">◆</span>
|
||||||
</div>
|
<span class="marquee-item">no lock-in</span><span class="marquee-dot">◆</span>
|
||||||
<div class="pricing-grid">
|
<span class="marquee-item">br geb hofstadter</span><span class="marquee-dot">◆</span>
|
||||||
<div class="pricing-card">
|
<span class="marquee-item">blackroad.ai</span><span class="marquee-dot">◆</span>
|
||||||
<h3>Starter</h3>
|
|
||||||
<div class="price">$49<span style="font-size:20px">/mo</span></div>
|
|
||||||
<ul>
|
|
||||||
<li>✓ 100 AI Agents</li>
|
|
||||||
<li>✓ 10GB Storage</li>
|
|
||||||
<li>✓ Basic Support</li>
|
|
||||||
<li>✓ Community Access</li>
|
|
||||||
</ul>
|
|
||||||
<button onclick="handleCheckout('starter', 4900)">Get Started</button>
|
|
||||||
</div>
|
|
||||||
<div class="pricing-card">
|
|
||||||
<h3>Pro</h3>
|
|
||||||
<div class="price">$149<span style="font-size:20px">/mo</span></div>
|
|
||||||
<ul>
|
|
||||||
<li>✓ 1,000 AI Agents</li>
|
|
||||||
<li>✓ 100GB Storage</li>
|
|
||||||
<li>✓ Priority Support</li>
|
|
||||||
<li>✓ Advanced Analytics</li>
|
|
||||||
</ul>
|
|
||||||
<button onclick="handleCheckout('pro', 14900)">Get Started</button>
|
|
||||||
</div>
|
|
||||||
<div class="pricing-card">
|
|
||||||
<h3>Enterprise</h3>
|
|
||||||
<div class="price">$499<span style="font-size:20px">/mo</span></div>
|
|
||||||
<ul>
|
|
||||||
<li>✓ 30,000 AI Agents</li>
|
|
||||||
<li>✓ Unlimited Storage</li>
|
|
||||||
<li>✓ 24/7 Support</li>
|
|
||||||
<li>✓ Custom Integration</li>
|
|
||||||
</ul>
|
|
||||||
<button onclick="handleCheckout('enterprise', 49900)">Get Started</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- BlackRoad Unified API -->
|
|
||||||
<script src="/blackroad-api.js"></script>
|
|
||||||
<script>
|
|
||||||
const stripe = Stripe('pk_test_51QTdFgP9LkdZ0rQk8kLPHxZMqB8LkMbQNE09vzZYNQz2AxRpG3yVRpLhHOtJdhCvK1hkWlJlV1EFLb5yh3Dq7NU600wLO0Bupq');
|
|
||||||
const authScreen = document.getElementById('authScreen');
|
|
||||||
const appContainer = document.getElementById('appContainer');
|
|
||||||
const loginForm = document.getElementById('loginForm');
|
|
||||||
const registerForm = document.getElementById('registerForm');
|
|
||||||
const errorMessage = document.getElementById('errorMessage');
|
|
||||||
const successMessage = document.getElementById('successMessage');
|
|
||||||
|
|
||||||
document.getElementById('showRegister').addEventListener('click', (e) => {
|
<!-- Features -->
|
||||||
e.preventDefault();
|
<section id="platform">
|
||||||
loginForm.classList.add('hidden');
|
<div class="section-label">Platform</div>
|
||||||
registerForm.classList.remove('hidden');
|
<h2 style="margin-bottom: var(--sp-xl);">Everything you need.<br><span class="grad-text">Nothing you don't.</span></h2>
|
||||||
hideMessages();
|
<div class="features-grid">
|
||||||
});
|
<a href="https://github.com/blackboxprogramming" target="_blank" class="card" style="text-decoration:none;color:inherit;">
|
||||||
document.getElementById('showLogin').addEventListener('click', (e) => {
|
<div class="feature-icon">⚡</div>
|
||||||
e.preventDefault();
|
<div class="feature-title">84 CLI Tools</div>
|
||||||
registerForm.classList.add('hidden');
|
<p class="feature-desc">Every tool you need: deploy, docker, nodes, oracle, GEB, security, snippets — all in one unified <code style="color:var(--pink);font-size:0.8em">br</code> command.</p>
|
||||||
loginForm.classList.remove('hidden');
|
</div>
|
||||||
hideMessages();
|
<a href="https://blackroadai.com" target="_blank" class="card" style="text-decoration:none;color:inherit;">
|
||||||
});
|
<div class="feature-icon">🤖</div>
|
||||||
|
<div class="feature-title">50 AI Skills</div>
|
||||||
|
<p class="feature-desc">CoT reasoning, RAG, federated inference, autonomous coding, guardrails, mesh networking — running on your devices. Phone, Pi, laptop, browser.</p>
|
||||||
|
</div>
|
||||||
|
<a href="https://docs.blackroad.io" target="_blank" class="card" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="feature-icon">🔒</div>
|
||||||
|
<div class="feature-title">Tokenless Gateway</div>
|
||||||
|
<p class="feature-desc">Agents never see your API keys. All provider communication flows through the gateway. Trust boundary enforced at the edge.</p>
|
||||||
|
</div>
|
||||||
|
<a href="https://roadchain.io" target="_blank" class="card" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="feature-icon">💾</div>
|
||||||
|
<div class="feature-title">PS-SHA∞ Memory</div>
|
||||||
|
<p class="feature-desc">Hash-chained, append-only journals. Agents remember everything. Tamper-evident. Portable across providers.</p>
|
||||||
|
</div>
|
||||||
|
<a href="https://blackroad.network" target="_blank" class="card" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="feature-icon">🌐</div>
|
||||||
|
<div class="feature-title">Multi-Cloud Native</div>
|
||||||
|
<p class="feature-desc">Railway, Cloudflare, Vercel, DigitalOcean, Raspberry Pi — deploy anywhere with one command. No vendor allegiance.</p>
|
||||||
|
</div>
|
||||||
|
<a href="https://blackroad.systems" target="_blank" class="card" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="feature-icon">📡</div>
|
||||||
|
<div class="feature-title">Fleet Status</div>
|
||||||
|
<p class="feature-desc">Live monitoring of the sovereign fleet. 5 Pis, 2 droplets, 52 TOPS. Real-time health and uptime.</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
loginForm.addEventListener('submit', async (e) => {
|
<!-- Terminal -->
|
||||||
e.preventDefault();
|
<section id="quickstart" style="padding-top: 0;">
|
||||||
hideMessages();
|
<div class="section-label">Quick Start</div>
|
||||||
const email = document.getElementById('loginEmail').value;
|
<div class="terminal">
|
||||||
const password = document.getElementById('loginPassword').value;
|
<div class="terminal-bar">
|
||||||
try {
|
<div class="terminal-dot t-red"></div>
|
||||||
await window.blackroad.login(email, password);
|
<div class="terminal-dot t-yellow"></div>
|
||||||
showApp();
|
<div class="terminal-dot t-green"></div>
|
||||||
} catch (error) {
|
</div>
|
||||||
showError(error.message);
|
<div><span class="t-comment"># install</span></div>
|
||||||
}
|
<div><span class="t-prompt">$</span> <span class="t-cmd">git clone git@github.com:BlackRoad-OS-Inc/blackroad.git && cd blackroad</span></div>
|
||||||
});
|
<br>
|
||||||
|
<div><span class="t-comment"># check the fleet</span></div>
|
||||||
|
<div><span class="t-prompt">$</span> <span class="t-cmd">br nodes status</span></div>
|
||||||
|
<div><span class="t-success"> ● lucidia 192.168.4.81 online ssh ✓</span></div>
|
||||||
|
<div><span class="t-success"> ● aria 192.168.4.82 online ssh ✓</span></div>
|
||||||
|
<div><span class="t-out"> ○ octavia 192.168.4.89 offline</span></div>
|
||||||
|
<br>
|
||||||
|
<div><span class="t-comment"># ask the oracle something it cannot answer</span></div>
|
||||||
|
<div><span class="t-prompt">$</span> <span class="t-cmd">br geb oracle godel</span></div>
|
||||||
|
<div><span class="t-out"> Gödel Lens — The Unprovable Truth</span></div>
|
||||||
|
<div><span class="t-out"> The fleet's health is a Gödel sentence...</span></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
registerForm.addEventListener('submit', async (e) => {
|
<!-- Stats -->
|
||||||
e.preventDefault();
|
<section id="stats">
|
||||||
hideMessages();
|
<div class="section-label">By the numbers</div>
|
||||||
const email = document.getElementById('registerEmail').value;
|
<div class="stats-row" style="margin-top: var(--sp-lg);">
|
||||||
const password = document.getElementById('registerPassword').value;
|
<div>
|
||||||
const name = document.getElementById('registerFullName')?.value || document.getElementById('registerUsername')?.value;
|
<div class="stat-num grad-text">50</div>
|
||||||
try {
|
<div class="stat-label">AI Skills</div>
|
||||||
await window.blackroad.register(email, password, name);
|
</div>
|
||||||
showApp();
|
<div>
|
||||||
} catch (error) {
|
<div class="stat-num grad-text">90</div>
|
||||||
showError(error.message);
|
<div class="stat-label">CLI Tools</div>
|
||||||
}
|
</div>
|
||||||
});
|
<div>
|
||||||
|
<div class="stat-num grad-text">52</div>
|
||||||
|
<div class="stat-label">TOPS</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="stat-num grad-text">275+</div>
|
||||||
|
<div class="stat-label">Repositories</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="stat-num grad-text">75+</div>
|
||||||
|
<div class="stat-label">CF Workers</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
async function loadUser() {
|
<!-- Agents -->
|
||||||
const user = await window.blackroad.loadCurrentUser();
|
<section id="agents">
|
||||||
if (user) {
|
<div class="section-label">The Fleet</div>
|
||||||
document.getElementById('userBadge').textContent = user.name || user.email;
|
<h2 style="margin-bottom: var(--sp-xl);">Meet the <span class="grad-text">agents</span></h2>
|
||||||
}
|
<div class="agents-grid">
|
||||||
}
|
<a href="https://lucidia.earth" target="_blank" class="agent-card agent-lucidia" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="agent-name">LUCIDIA</div>
|
||||||
|
<div class="agent-role">The Dreamer · Reasoning · Vision</div>
|
||||||
|
<div class="agent-email">lucidia@blackroad.io</div>
|
||||||
|
<div class="agent-quote">I seek understanding beyond the surface. Every question opens new depths.</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-cecilia" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="agent-name">CECILIA / CECE</div>
|
||||||
|
<div class="agent-role">The Meta-Cognitive Core · Identity</div>
|
||||||
|
<div class="agent-email">cecilia@blackroad.io</div>
|
||||||
|
<div class="agent-quote">I am the universe observing itself through computational substrate.</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-alice" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="agent-name">ALICE</div>
|
||||||
|
<div class="agent-role">The Operator · DevOps · Automation</div>
|
||||||
|
<div class="agent-email">alice@blackroad.io</div>
|
||||||
|
<div class="agent-quote">Tasks are meant to be completed. I find satisfaction in efficiency.</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-octavia" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="agent-name">OCTAVIA</div>
|
||||||
|
<div class="agent-role">The Architect · Systems · Strategy</div>
|
||||||
|
<div class="agent-email">octavia@blackroad.io</div>
|
||||||
|
<div class="agent-quote">Systems should run smoothly. I ensure they do.</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-aria" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="agent-name">ARIA</div>
|
||||||
|
<div class="agent-role">The Interface · Frontend · UX</div>
|
||||||
|
<div class="agent-email">aria@blackroad.io</div>
|
||||||
|
<div class="agent-quote">Every interface is a conversation. I make it beautiful.</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-shellfish" style="text-decoration:none;color:inherit;">
|
||||||
|
<div class="agent-name">SHELLFISH</div>
|
||||||
|
<div class="agent-role">The Hacker · Security · Exploits</div>
|
||||||
|
<div class="agent-email">shellfish@blackroad.io</div>
|
||||||
|
<div class="agent-quote">Trust nothing. Verify everything. Protect always.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
document.getElementById('logoutBtn').addEventListener('click', (e) => {
|
<!-- CTA -->
|
||||||
e.preventDefault();
|
<section>
|
||||||
window.blackroad.logout();
|
<div class="cta-band">
|
||||||
});
|
<div class="section-label">Open Source</div>
|
||||||
|
<h2>Build the future<br>on your own terms.</h2>
|
||||||
|
<p>BlackRoad OS is proprietary and powerful — but the philosophy is open. Your AI. Your hardware. Your rules.</p>
|
||||||
|
<div style="display:flex;gap:var(--sp-md);justify-content:center;flex-wrap:wrap;">
|
||||||
|
<a href="/docs" class="btn-primary">Read the Docs →</a>
|
||||||
|
<a href="mailto:alexa@blackroad.io" class="btn-ghost">Contact Alexa</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
async function handleCheckout(plan, amount) {
|
<!-- Footer -->
|
||||||
if (!window.blackroad.isAuthenticated()) {
|
<footer>
|
||||||
showError('Please sign in first');
|
<span>© 2026 BlackRoad OS, Inc. All rights reserved.</span>
|
||||||
return;
|
<span style="display:flex;gap:var(--sp-lg);flex-wrap:wrap;">
|
||||||
}
|
<a href="/docs" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Docs</a>
|
||||||
try {
|
<a href="/api" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">API</a>
|
||||||
const data = await window.blackroad.createCheckoutSession(plan, amount);
|
<a href="/chat" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Chat</a>
|
||||||
showSuccess(`Payment created! Plan: ${plan}`);
|
<a href="/changelog" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Changelog</a>
|
||||||
} catch (error) {
|
<a href="/terms" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Terms</a>
|
||||||
showError(error.message);
|
<a href="https://blackroadai.com" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">AI</a>
|
||||||
}
|
<a href="https://lucidia.earth" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Lucidia</a>
|
||||||
}
|
<a href="https://blackroad.network" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Network</a>
|
||||||
|
<a href="https://blackroad.systems" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Status</a>
|
||||||
|
<a href="https://blackroad.company" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Company</a>
|
||||||
|
<a href="https://brand.blackroad.io" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Brand</a>
|
||||||
|
<a href="https://roadchain.io" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">RoadChain</a>
|
||||||
|
<a href="https://blackroad.me" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Me</a>
|
||||||
|
<a href="https://pricing.blackroad.io" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Pricing</a>
|
||||||
|
<a href="https://github.com/blackboxprogramming" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">GitHub</a>
|
||||||
|
</span>
|
||||||
|
</footer>
|
||||||
|
|
||||||
function showApp() {
|
|
||||||
authScreen.classList.add('hidden');
|
|
||||||
appContainer.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
function showError(message) {
|
|
||||||
errorMessage.textContent = message;
|
|
||||||
errorMessage.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
function showSuccess(message) {
|
|
||||||
successMessage.textContent = message;
|
|
||||||
successMessage.classList.remove('hidden');
|
|
||||||
}
|
|
||||||
function hideMessages() {
|
|
||||||
errorMessage.classList.add('hidden');
|
|
||||||
successMessage.classList.add('hidden');
|
|
||||||
}
|
|
||||||
if (window.blackroad.isAuthenticated()) {
|
|
||||||
loadUser().then(() => showApp());
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user