Initial infrastructure documentation - comprehensive homelab reference
This commit is contained in:
Funky (OpenClaw)
282
infrastructure/homelab-dashboard/index.html
Normal file
282
infrastructure/homelab-dashboard/index.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Homelab Dashboard</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 2.5em;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: rgba(255,255,255,0.9);
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
color: #2a5298;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.resource-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.resource-card h3 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.resource-card .url {
|
||||
font-size: 0.85em;
|
||||
opacity: 0.9;
|
||||
font-family: monospace;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.resource-card .description {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.95;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.priority-1 {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
.priority-2 {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
.priority-3 {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
}
|
||||
|
||||
.tools-section {
|
||||
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.tool-card:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.tool-card h3 {
|
||||
color: #fa709a;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tool-card .command {
|
||||
font-family: monospace;
|
||||
background: #f5f5f5;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85em;
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #43e97b;
|
||||
margin-right: 5px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h1 { font-size: 1.8em; }
|
||||
.resource-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1><span class="status-indicator"></span>Homelab Dashboard</h1>
|
||||
<p class="subtitle">Quick access to all your infrastructure resources</p>
|
||||
|
||||
<!-- Priority 1: Management & Monitoring -->
|
||||
<div class="section">
|
||||
<h2>🎯 Management & Monitoring</h2>
|
||||
<div class="resource-grid">
|
||||
<a href="https://10.0.10.3:8006" class="resource-card priority-1">
|
||||
<h3>Proxmox - Main (DL380p)</h3>
|
||||
<span class="url">https://10.0.10.3:8006</span>
|
||||
<p class="description">Primary Proxmox host - 32 cores, 96GB RAM. Login with fred@authentik</p>
|
||||
</a>
|
||||
|
||||
<a href="https://10.0.10.2:8006" class="resource-card priority-1">
|
||||
<h3>Proxmox - Router (i5)</h3>
|
||||
<span class="url">https://10.0.10.2:8006</span>
|
||||
<p class="description">Secondary Proxmox host at office. Login with fred@authentik</p>
|
||||
</a>
|
||||
|
||||
<a href="https://10.0.10.4:8006" class="resource-card priority-1">
|
||||
<h3>Proxmox - Storage</h3>
|
||||
<span class="url">https://10.0.10.4:8006</span>
|
||||
<p class="description">Storage-focused Proxmox host. Login with fred@authentik</p>
|
||||
</a>
|
||||
|
||||
<a href="http://10.0.10.25:3000" class="resource-card priority-1">
|
||||
<h3>Grafana Monitoring</h3>
|
||||
<span class="url">http://10.0.10.25:3000</span>
|
||||
<p class="description">Infrastructure monitoring and metrics. Login with fred@nianticbooks.com</p>
|
||||
</a>
|
||||
|
||||
<a href="http://10.0.10.21:9000" class="resource-card priority-1">
|
||||
<h3>Authentik SSO</h3>
|
||||
<span class="url">http://10.0.10.21:9000</span>
|
||||
<p class="description">User authentication and SSO management. Login: akadmin</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Priority 2: Home Automation & Apps -->
|
||||
<div class="section">
|
||||
<h2>🏠 Home Automation & Apps</h2>
|
||||
<div class="resource-grid">
|
||||
<a href="http://10.0.10.24:8123" class="resource-card priority-2">
|
||||
<h3>Home Assistant</h3>
|
||||
<span class="url">http://10.0.10.24:8123</span>
|
||||
<p class="description">Smart home control and automation</p>
|
||||
</a>
|
||||
|
||||
<a href="http://10.0.10.22:5678" class="resource-card priority-2">
|
||||
<h3>n8n Workflows</h3>
|
||||
<span class="url">http://10.0.10.22:5678</span>
|
||||
<p class="description">Automation workflows and integrations</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Priority 3: Storage & Infrastructure -->
|
||||
<div class="section">
|
||||
<h2>💾 Storage & Infrastructure</h2>
|
||||
<div class="resource-grid">
|
||||
<a href="http://10.0.10.5" class="resource-card priority-3">
|
||||
<h3>OpenMediaVault</h3>
|
||||
<span class="url">http://10.0.10.5</span>
|
||||
<p class="description">12TB storage management and backup monitoring. Login: admin</p>
|
||||
</a>
|
||||
|
||||
<a href="http://10.0.10.27:5001" class="resource-card priority-3">
|
||||
<h3>Dockge</h3>
|
||||
<span class="url">http://10.0.10.27:5001</span>
|
||||
<p class="description">Docker Compose stack management</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Development Tools -->
|
||||
<div class="section tools-section">
|
||||
<h2>🛠️ Development Tools</h2>
|
||||
<div class="tool-card" onclick="launchVSCode()">
|
||||
<h3>🚀 Launch Claude Code with Infrastructure</h3>
|
||||
<p class="description">Opens VS Code Insiders with Claude Code and claude-shared context</p>
|
||||
<div class="command">Click to launch (Windows only)</div>
|
||||
</div>
|
||||
<div class="tool-card" onclick="window.open('vscode-insiders://file/C:/Users/Fred/projects', '_blank')">
|
||||
<h3>📂 Open Projects Folder</h3>
|
||||
<p class="description">Opens your projects directory in VS Code Insiders</p>
|
||||
<div class="command">vscode-insiders://file/C:/Users/Fred/projects</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function launchVSCode() {
|
||||
// Try to open VS Code with the workspace file
|
||||
const workspaceUrl = 'vscode-insiders://file/C:/Users/Fred/projects/claude-shared/homelab.code-workspace';
|
||||
window.open(workspaceUrl, '_blank');
|
||||
}
|
||||
|
||||
// Add keyboard shortcut: Press 'h' to return home (reload)
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'h' && !e.ctrlKey && !e.metaKey) {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
// Simple status check (optional - can be enhanced later)
|
||||
console.log('Homelab Dashboard loaded successfully');
|
||||
console.log('Press "h" to refresh dashboard');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user