283 lines
9.6 KiB
HTML
283 lines
9.6 KiB
HTML
<!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>
|