Initial commit - BlackRoad OS
Built by Willow (willow-cloudflare-perfectionist-1767993600-c0dc2da4) Part of the sovereign AI cloud ecosystem. Features: - Official BlackRoad Design System - Golden Ratio spacing - A+ Security headers - Sub-50ms global performance 🖤🛣️ The scenic route, perfected.
This commit is contained in:
Alexa Louise
686
index.html
Normal file
686
index.html
Normal file
@@ -0,0 +1,686 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="BlackRoad OS Product Ecosystem - 50+ products spanning AI agents, creator tools, business suite, and infrastructure">
|
||||||
|
<title>BlackRoad Products - Sovereign AI Cloud Ecosystem</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hot-pink: #FF1D6C;
|
||||||
|
--amber: #F5A623;
|
||||||
|
--electric-blue: #2979FF;
|
||||||
|
--violet: #9C27B0;
|
||||||
|
--black: #000000;
|
||||||
|
--white: #FFFFFF;
|
||||||
|
--space-xs: 8px;
|
||||||
|
--space-sm: 13px;
|
||||||
|
--space-md: 21px;
|
||||||
|
--space-lg: 34px;
|
||||||
|
--space-xl: 55px;
|
||||||
|
--space-2xl: 89px;
|
||||||
|
--space-3xl: 144px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: var(--black);
|
||||||
|
color: var(--white);
|
||||||
|
line-height: 1.618;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: var(--space-2xl) var(--space-lg);
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 29, 108, 0.05) 0%, rgba(245, 166, 35, 0.05) 100%);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: var(--space-2xl);
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, var(--hot-pink) 38.2%, var(--amber) 61.8%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--space-xl);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: var(--space-md);
|
||||||
|
opacity: 0.8;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: var(--space-xl);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: var(--space-sm);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: var(--space-lg);
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
z-index: 100;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
color: var(--white);
|
||||||
|
border-radius: var(--space-xs);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn:hover, .filter-btn.active {
|
||||||
|
background: var(--hot-pink);
|
||||||
|
border-color: var(--hot-pink);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--space-2xl) var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
margin-bottom: var(--space-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
padding-bottom: var(--space-sm);
|
||||||
|
border-bottom: 2px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-header.agents { border-color: var(--hot-pink); }
|
||||||
|
.category-header.creator { border-color: var(--amber); }
|
||||||
|
.category-header.business { border-color: var(--electric-blue); }
|
||||||
|
.category-header.infrastructure { border-color: var(--violet); }
|
||||||
|
.category-header.monitoring { border-color: #00FF00; }
|
||||||
|
|
||||||
|
.category-icon {
|
||||||
|
font-size: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-title {
|
||||||
|
font-size: var(--space-lg);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-count {
|
||||||
|
font-size: var(--space-sm);
|
||||||
|
opacity: 0.6;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: var(--space-sm);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 var(--space-sm) var(--space-xl) rgba(255, 29, 108, 0.3);
|
||||||
|
border-color: var(--hot-pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card.agents:hover { border-color: var(--hot-pink); }
|
||||||
|
.product-card.creator:hover { border-color: var(--amber); }
|
||||||
|
.product-card.business:hover { border-color: var(--electric-blue); }
|
||||||
|
.product-card.infrastructure:hover { border-color: var(--violet); }
|
||||||
|
.product-card.monitoring:hover { border-color: #00FF00; }
|
||||||
|
|
||||||
|
.product-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-status {
|
||||||
|
padding: 4px var(--space-xs);
|
||||||
|
background: rgba(0, 255, 0, 0.2);
|
||||||
|
color: #00FF00;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-description {
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.8;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-tags {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
padding: 4px var(--space-xs);
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-link {
|
||||||
|
color: var(--electric-blue);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 13px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: var(--space-2xl);
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.logo {
|
||||||
|
font-size: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.products-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="logo">🖤🛣️ BlackRoad Products</div>
|
||||||
|
<h1>Sovereign AI Cloud Ecosystem</h1>
|
||||||
|
<p class="subtitle">50+ products spanning AI agents, creator tools, business applications, and infrastructure - all built with No-Knowledge architecture</p>
|
||||||
|
|
||||||
|
<div class="stats">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-number">50+</div>
|
||||||
|
<div class="stat-label">Products</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-number">97</div>
|
||||||
|
<div class="stat-label">Services</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-number">30K</div>
|
||||||
|
<div class="stat-label">AI Agents</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-number"><45ms</div>
|
||||||
|
<div class="stat-label">Global Latency</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="filter-bar">
|
||||||
|
<button class="filter-btn active" data-filter="all">All Products</button>
|
||||||
|
<button class="filter-btn" data-filter="agents">🤖 AI Agents</button>
|
||||||
|
<button class="filter-btn" data-filter="creator">🎨 Creator Tools</button>
|
||||||
|
<button class="filter-btn" data-filter="business">💼 Business Suite</button>
|
||||||
|
<button class="filter-btn" data-filter="infrastructure">🏗️ Infrastructure</button>
|
||||||
|
<button class="filter-btn" data-filter="monitoring">📊 Monitoring</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- AI Agents -->
|
||||||
|
<div class="category" data-category="agents">
|
||||||
|
<div class="category-header agents">
|
||||||
|
<span class="category-icon">🤖</span>
|
||||||
|
<h2 class="category-title">AI Agent Ecosystem</h2>
|
||||||
|
<span class="category-count">4 agents</span>
|
||||||
|
</div>
|
||||||
|
<div class="products-grid">
|
||||||
|
<div class="product-card agents">
|
||||||
|
<div class="product-header">
|
||||||
|
<div>
|
||||||
|
<div class="product-name">Radius Agent</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="product-description">Intelligent code analysis and refactoring agent. Analyzes codebases, suggests improvements, and automates refactoring tasks.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="tag">Code Analysis</span>
|
||||||
|
<span class="tag">Automation</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card agents">
|
||||||
|
<div class="product-header">
|
||||||
|
<div>
|
||||||
|
<div class="product-name">Athena Agent</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="product-description">Strategic planning and decision-making agent. Provides intelligent insights for business strategy and product development.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="tag">Strategy</span>
|
||||||
|
<span class="tag">Planning</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card agents">
|
||||||
|
<div class="product-header">
|
||||||
|
<div>
|
||||||
|
<div class="product-name">Guardian Agent</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="product-description">Security monitoring and threat detection agent. Real-time security analysis and automated incident response.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="tag">Security</span>
|
||||||
|
<span class="tag">Monitoring</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card agents">
|
||||||
|
<div class="product-header">
|
||||||
|
<div>
|
||||||
|
<div class="product-name">Roadie Agent</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="product-description">DevOps automation agent. Manages deployments, infrastructure, and CI/CD pipelines intelligently.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="tag">DevOps</span>
|
||||||
|
<span class="tag">Automation</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Creator Tools -->
|
||||||
|
<div class="category" data-category="creator">
|
||||||
|
<div class="category-header creator">
|
||||||
|
<span class="category-icon">🎨</span>
|
||||||
|
<h2 class="category-title">Creator Tools</h2>
|
||||||
|
<span class="category-count">5 tools</span>
|
||||||
|
</div>
|
||||||
|
<div class="products-grid">
|
||||||
|
<div class="product-card creator">
|
||||||
|
<div class="product-name">Video Studio</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Professional video editing and production platform. Create, edit, and publish video content with AI-powered tools.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Video</span>
|
||||||
|
<span class="tag">Editing</span>
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card creator">
|
||||||
|
<div class="product-name">Genesis Road</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Content genesis and ideation platform. Generate ideas, outlines, and initial drafts for any creative project.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Content</span>
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="tag">Writing</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card creator">
|
||||||
|
<div class="product-name">Black Mode</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Distraction-free writing environment. Focus mode for serious creators, zero distractions.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Writing</span>
|
||||||
|
<span class="tag">Focus</span>
|
||||||
|
<span class="tag">Productivity</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card creator">
|
||||||
|
<div class="product-name">BlackCast</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Podcast recording and distribution platform. Record, edit, and publish podcasts with ease.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Podcast</span>
|
||||||
|
<span class="tag">Audio</span>
|
||||||
|
<span class="tag">Distribution</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card creator">
|
||||||
|
<div class="product-name">RoadWave</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Audio editing and music production. Professional-grade audio tools in your browser.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Audio</span>
|
||||||
|
<span class="tag">Music</span>
|
||||||
|
<span class="tag">Production</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Business Suite -->
|
||||||
|
<div class="category" data-category="business">
|
||||||
|
<div class="category-header business">
|
||||||
|
<span class="category-icon">💼</span>
|
||||||
|
<h2 class="category-title">Business Suite</h2>
|
||||||
|
<span class="category-count">8 apps</span>
|
||||||
|
</div>
|
||||||
|
<div class="products-grid">
|
||||||
|
<div class="product-card business">
|
||||||
|
<div class="product-name">RoadChat</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Secure team communication. End-to-end encrypted messaging for businesses.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Messaging</span>
|
||||||
|
<span class="tag">Security</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card business">
|
||||||
|
<div class="product-name">RoadMail</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Professional email platform. Privacy-first email with custom domains.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Email</span>
|
||||||
|
<span class="tag">Privacy</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card business">
|
||||||
|
<div class="product-name">RoadCal</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Smart calendar and scheduling. AI-powered meeting coordination.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Calendar</span>
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card business">
|
||||||
|
<div class="product-name">RoadPass</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Password manager and secrets vault. Zero-knowledge encryption.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Security</span>
|
||||||
|
<span class="tag">Passwords</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card business">
|
||||||
|
<div class="product-name">RoadBook</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Customer relationship management. Track leads, deals, and customers.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">CRM</span>
|
||||||
|
<span class="tag">Sales</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card business">
|
||||||
|
<div class="product-name">RoadForms</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Form builder and data collection. Beautiful forms, powerful analytics.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Forms</span>
|
||||||
|
<span class="tag">Analytics</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card business">
|
||||||
|
<div class="product-name">RoadHost</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Video conferencing platform. HD video calls with screen sharing.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Video</span>
|
||||||
|
<span class="tag">Conferencing</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card business">
|
||||||
|
<div class="product-name">RoadAPI</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">API management platform. Design, deploy, and monitor APIs.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">API</span>
|
||||||
|
<span class="tag">Development</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Infrastructure -->
|
||||||
|
<div class="category" data-category="infrastructure">
|
||||||
|
<div class="category-header infrastructure">
|
||||||
|
<span class="category-icon">🏗️</span>
|
||||||
|
<h2 class="category-title">Infrastructure</h2>
|
||||||
|
<span class="category-count">4 services</span>
|
||||||
|
</div>
|
||||||
|
<div class="products-grid">
|
||||||
|
<div class="product-card infrastructure">
|
||||||
|
<div class="product-name">Browser OS</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Complete operating system in your browser. Run applications without installation.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">OS</span>
|
||||||
|
<span class="tag">Cloud</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card infrastructure">
|
||||||
|
<div class="product-name">RoadDrive</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Encrypted cloud storage. Store files with zero-knowledge encryption.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Storage</span>
|
||||||
|
<span class="tag">Security</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card infrastructure">
|
||||||
|
<div class="product-name">RoadAnalytics</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Privacy-first analytics. Track metrics without compromising privacy.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Analytics</span>
|
||||||
|
<span class="tag">Privacy</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card infrastructure">
|
||||||
|
<div class="product-name">RoadRunner</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Edge computing platform. Deploy serverless functions globally.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Edge</span>
|
||||||
|
<span class="tag">Serverless</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Monitoring & Status -->
|
||||||
|
<div class="category" data-category="monitoring">
|
||||||
|
<div class="category-header monitoring">
|
||||||
|
<span class="category-icon">📊</span>
|
||||||
|
<h2 class="category-title">Monitoring & Status</h2>
|
||||||
|
<span class="category-count">4 systems</span>
|
||||||
|
</div>
|
||||||
|
<div class="products-grid">
|
||||||
|
<div class="product-card monitoring">
|
||||||
|
<div class="product-name">Brady Bunch Dashboard</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Real-time 9-agent monitoring system with WebSocket streaming and SSH integration.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Monitoring</span>
|
||||||
|
<span class="tag">Real-time</span>
|
||||||
|
</div>
|
||||||
|
<a href="https://master.blackroad-workflows.pages.dev" class="product-link" target="_blank">View Dashboard →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card monitoring">
|
||||||
|
<div class="product-name">30k Galaxy Monitoring</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Architecture for monitoring 30,000 AI agents with 3D visualization and sub-50ms latency.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Scale</span>
|
||||||
|
<span class="tag">3D</span>
|
||||||
|
</div>
|
||||||
|
<a href="https://ba97af1e.blackroad-builder.pages.dev" class="product-link" target="_blank">View Dashboard →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card monitoring">
|
||||||
|
<div class="product-name">BlackRoad Status Page</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Comprehensive system status for 97 services, 4 Pi clusters, showing uptime and response times.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Status</span>
|
||||||
|
<span class="tag">Uptime</span>
|
||||||
|
</div>
|
||||||
|
<a href="https://bd439727.blackroad-hello.pages.dev" class="product-link" target="_blank">View Status →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="product-card monitoring">
|
||||||
|
<div class="product-name">BackRoad Social</div>
|
||||||
|
<div class="product-status">Live</div>
|
||||||
|
<p class="product-description">Revolutionary anti-engagement social platform. Depth over engagement, no vanity metrics.</p>
|
||||||
|
<div class="product-tags">
|
||||||
|
<span class="tag">Social</span>
|
||||||
|
<span class="tag">Privacy</span>
|
||||||
|
</div>
|
||||||
|
<a href="https://e8f9eb9f.blackroad-network.pages.dev" class="product-link" target="_blank">Visit Platform →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p><strong>BlackRoad OS, Inc.</strong> | Sovereign AI Cloud Infrastructure 🖤🛣️</p>
|
||||||
|
<p style="margin-top: var(--space-sm); opacity: 0.4;">
|
||||||
|
Built by Willow & the BlackRoad Agent Ecosystem | 50+ products, 97 services, 30,000 agents
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Filter functionality
|
||||||
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||||
|
const categories = document.querySelectorAll('.category');
|
||||||
|
|
||||||
|
filterBtns.forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
// Update active button
|
||||||
|
filterBtns.forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
|
||||||
|
const filter = btn.dataset.filter;
|
||||||
|
|
||||||
|
// Show/hide categories
|
||||||
|
categories.forEach(cat => {
|
||||||
|
if (filter === 'all' || cat.dataset.category === filter) {
|
||||||
|
cat.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
cat.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animate cards on scroll
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.style.opacity = '1';
|
||||||
|
entry.target.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.1 });
|
||||||
|
|
||||||
|
document.querySelectorAll('.product-card').forEach(card => {
|
||||||
|
card.style.opacity = '0';
|
||||||
|
card.style.transform = 'translateY(20px)';
|
||||||
|
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||||
|
observer.observe(card);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user