mirror of
https://github.com/blackboxprogramming/BlackRoad-Operating-System.git
synced 2026-03-17 08:57:15 -05:00
feat: BlackRoad OS Phase 2.5 - Infrastructure Wiring Complete
Phase 2.5 wires up the infrastructure decisions and prepares BlackRoad OS for production deployment. This phase codifies architectural choices and creates deployment-ready configurations. ## Key Decisions Codified - ✅ Monorepo as canonical OS home (for Phase 1-2) - ✅ Prism Console served from backend at /prism - ✅ Documentation via GitHub Pages (MkDocs) - ✅ Vanilla JavaScript frontend maintained ## New Infrastructure ### Documentation & Planning - PHASE2_5_SUMMARY_FOR_ALEXA.md - Complete Phase 2.5 summary - BLACKROAD_OS_REPO_MAP.md - Repository structure map - DEPLOYMENT_NOTES.md - Production deployment guide ### Backend Infrastructure - backend/app/routers/prism_static.py - Prism Console static router - backend/static/prism/ - Prism Console UI skeleton - index.html, css/prism.css, js/prism-core.js ### Documentation System - .github/workflows/docs-deploy.yml - MkDocs deployment automation - codex-docs/mkdocs.yml - MkDocs + Material theme config - codex-docs/DEPLOY_DOCS.md - Docs deployment guide - codex-docs/docs/ - Complete documentation structure ### Updated Files - backend/app/main.py - Added Prism router, OpenAPI tags - MASTER_ORCHESTRATION_PLAN.md - Added Phase 2.5 section ## URL Structure (Production) - https://blackroad.systems → Main OS - https://blackroad.systems/prism → Prism Console - https://blackroad.systems/api/* → REST API - https://docs.blackroad.systems → Documentation ## Post-Merge Checklist 1. Configure GitHub Pages (5 min) 2. Configure Railway deployment (10 min) 3. Configure Cloudflare DNS (15 min) 4. Verify all routes work (5 min) 5. Monitor first deployment (10 min) See PHASE2_5_SUMMARY_FOR_ALEXA.md for complete post-merge instructions. ## Implementation Status ✅ Phase 2.5 Complete - Ready for production deployment --- Where AI meets the open road. 🛣️
This commit is contained in:
Claude
278
backend/static/prism/css/prism.css
Normal file
278
backend/static/prism/css/prism.css
Normal file
@@ -0,0 +1,278 @@
|
||||
/* Prism Console Styles */
|
||||
:root {
|
||||
--prism-primary: #667eea;
|
||||
--prism-secondary: #764ba2;
|
||||
--prism-bg: #1a1a2e;
|
||||
--prism-surface: #16213e;
|
||||
--prism-text: #eaeaea;
|
||||
--prism-text-secondary: #a0a0a0;
|
||||
--prism-border: #2a2a3e;
|
||||
--prism-success: #4caf50;
|
||||
--prism-warning: #ff9800;
|
||||
--prism-error: #f44336;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', 'Consolas', monospace;
|
||||
background: var(--prism-bg);
|
||||
color: var(--prism-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#prism-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.prism-header {
|
||||
background: linear-gradient(135deg, var(--prism-primary) 0%, var(--prism-secondary) 100%);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.status-indicator.online {
|
||||
color: var(--prism-success);
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.prism-main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.prism-sidebar {
|
||||
width: 250px;
|
||||
background: var(--prism-surface);
|
||||
border-right: 1px solid var(--prism-border);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
border-left-color: var(--prism-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.prism-content {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.content-tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-tab.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-tab h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
color: var(--prism-text);
|
||||
}
|
||||
|
||||
/* Dashboard Grid */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--prism-surface);
|
||||
border: 1px solid var(--prism-border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--prism-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
font-size: 1rem;
|
||||
color: var(--prism-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body p {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-body ul {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-body ul li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card-body a {
|
||||
color: var(--prism-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Stat Cards */
|
||||
.stat-card .stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--prism-primary);
|
||||
}
|
||||
|
||||
.stat-subtext {
|
||||
color: var(--prism-text-secondary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.prism-footer {
|
||||
background: var(--prism-surface);
|
||||
border-top: 1px solid var(--prism-border);
|
||||
padding: 1rem 2rem;
|
||||
text-align: center;
|
||||
color: var(--prism-text-secondary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.prism-footer a {
|
||||
color: var(--prism-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prism-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.prism-main {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.prism-sidebar {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--prism-border);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex-direction: column;
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user