420 lines
15 KiB
HTML
420 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BlackRoad OS — Complete Domain Dashboard</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--orange: #FF9D00;
|
|
--red: #FF006B;
|
|
--purple: #7700FF;
|
|
--blue: #0066FF;
|
|
--green: #27AE60;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #000;
|
|
color: #fff;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 72px;
|
|
font-weight: 900;
|
|
background: linear-gradient(45deg, var(--orange), var(--red), var(--purple), var(--blue));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 10px;
|
|
animation: gradient 3s ease infinite;
|
|
background-size: 300% 300%;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 18px;
|
|
color: #aaa;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
gap: 30px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.stat {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 20px 30px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--orange);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #888;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.section-icon {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.domain-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.domain-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.domain-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--orange), var(--red), var(--purple));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.domain-card:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: var(--purple);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.domain-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.domain-icon {
|
|
font-size: 36px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.domain-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
.domain-desc {
|
|
font-size: 13px;
|
|
color: #999;
|
|
margin-bottom: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.domain-link {
|
|
display: inline-block;
|
|
color: var(--purple);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.domain-link:hover {
|
|
color: var(--orange);
|
|
}
|
|
|
|
.status-live {
|
|
display: inline-block;
|
|
background: rgba(39, 174, 96, 0.2);
|
|
color: var(--green);
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.status-provisioning {
|
|
display: inline-block;
|
|
background: rgba(255, 157, 0, 0.2);
|
|
color: var(--orange);
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 80px;
|
|
padding-top: 40px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: #666;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.footer a {
|
|
color: #999;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1 class="logo">BLACKROAD OS</h1>
|
|
<p class="subtitle">Complete Domain Architecture • 15 Live Services</p>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value">15</div>
|
|
<div class="stat-label">Domains</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">18</div>
|
|
<div class="stat-label">Systems</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">20K+</div>
|
|
<div class="stat-label">Lines of Code</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Core Platforms -->
|
|
<div class="section">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">🌌</span>
|
|
Core Platforms
|
|
</h2>
|
|
<div class="domain-grid">
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">🏠</div>
|
|
<div class="domain-name">blackroad.io</div>
|
|
<div class="domain-desc">Main homepage and portal to the BlackRoad OS ecosystem</div>
|
|
<a href="https://blackroad.io" class="domain-link">Visit →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-provisioning">🟡 PROVISIONING</div>
|
|
<div class="domain-icon">🌌</div>
|
|
<div class="domain-name">universe.blackroad.io</div>
|
|
<div class="domain-desc">Complete metaverse with 18 integrated systems</div>
|
|
<a href="https://universe.blackroad.io" class="domain-link">Enter Universe →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-provisioning">🟡 PROVISIONING</div>
|
|
<div class="domain-icon">🔐</div>
|
|
<div class="domain-name">pitstop.blackroad.io</div>
|
|
<div class="domain-desc">Secure authentication portal protecting all systems</div>
|
|
<a href="https://pitstop.blackroad.io" class="domain-link">Login →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">🌍</div>
|
|
<div class="domain-name">earth.blackroad.io</div>
|
|
<div class="domain-desc">Real-time Earth simulation with NASA-grade mechanics</div>
|
|
<a href="https://earth.blackroad.io" class="domain-link">View Earth →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Creator & Studio -->
|
|
<div class="section">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">🎨</span>
|
|
Creator & Studio
|
|
</h2>
|
|
<div class="domain-grid">
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">🎨</div>
|
|
<div class="domain-name">creator.blackroad.io</div>
|
|
<div class="domain-desc">Advanced creator tools for universe building</div>
|
|
<a href="https://creator.blackroad.io" class="domain-link">Create →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">🎬</div>
|
|
<div class="domain-name">creator-studio.blackroad.io</div>
|
|
<div class="domain-desc">Professional content creation studio</div>
|
|
<a href="https://creator-studio.blackroad.io" class="domain-link">Open Studio →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">🎥</div>
|
|
<div class="domain-name">studio.blackroad.io</div>
|
|
<div class="domain-desc">Full production platform for teams</div>
|
|
<a href="https://studio.blackroad.io" class="domain-link">Launch →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Business Suite -->
|
|
<div class="section">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">💼</span>
|
|
Business Suite
|
|
</h2>
|
|
<div class="domain-grid">
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">💰</div>
|
|
<div class="domain-name">finance.blackroad.io</div>
|
|
<div class="domain-desc">Financial analytics and management platform</div>
|
|
<a href="https://finance.blackroad.io" class="domain-link">Manage →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">⚖️</div>
|
|
<div class="domain-name">legal.blackroad.io</div>
|
|
<div class="domain-desc">Legal document management and compliance</div>
|
|
<a href="https://legal.blackroad.io" class="domain-link">Access →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">📚</div>
|
|
<div class="domain-name">education.blackroad.io</div>
|
|
<div class="domain-desc">Educational platform with courses and tutorials</div>
|
|
<a href="https://education.blackroad.io" class="domain-link">Learn →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Research & Development -->
|
|
<div class="section">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">🔬</span>
|
|
Research & Development
|
|
</h2>
|
|
<div class="domain-grid">
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">🔬</div>
|
|
<div class="domain-name">research-lab.blackroad.io</div>
|
|
<div class="domain-desc">Quantum computing and AI research platform</div>
|
|
<a href="https://research-lab.blackroad.io" class="domain-link">Research →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">💡</div>
|
|
<div class="domain-name">ideas.blackroad.io</div>
|
|
<div class="domain-desc">Idea management and innovation hub</div>
|
|
<a href="https://ideas.blackroad.io" class="domain-link">Ideate →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">⚙️</div>
|
|
<div class="domain-name">devops.blackroad.io</div>
|
|
<div class="domain-desc">CI/CD and infrastructure management tools</div>
|
|
<a href="https://devops.blackroad.io" class="domain-link">Deploy →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Spaces -->
|
|
<div class="section">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">👤</span>
|
|
User Spaces
|
|
</h2>
|
|
<div class="domain-grid">
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">🏠</div>
|
|
<div class="domain-name">home.blackroad.io</div>
|
|
<div class="domain-desc">Personal dashboard for all BlackRoad services</div>
|
|
<a href="https://home.blackroad.io" class="domain-link">Go Home →</a>
|
|
</div>
|
|
|
|
<div class="domain-card">
|
|
<div class="status-live">✅ LIVE</div>
|
|
<div class="domain-icon">🎯</div>
|
|
<div class="domain-name">demo.blackroad.io</div>
|
|
<div class="domain-desc">Interactive demos and feature showcase</div>
|
|
<a href="https://demo.blackroad.io" class="domain-link">Try Demo →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>© 2025 BlackRoad OS, Inc. • Built with 💚 by Alexa & Claude</p>
|
|
<p style="margin-top: 10px;">
|
|
<a href="https://pitstop.blackroad.io">Portal</a> •
|
|
<a href="https://universe.blackroad.io">Universe</a> •
|
|
<a href="mailto:blackroad.systems@gmail.com">Contact</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|