chrisryn/homelab-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Homelab Dashboard with YAML configuration

Browse Source 
Features:
- Service health monitoring with response times
- Proxmox cluster integration (nodes, VMs, containers)
- PBS backup server monitoring
- Camera viewer with WebRTC (go2rtc)
- Docker container monitoring
- Uptime Kuma integration
- Mobile-friendly responsive design
- YAML-based configuration for easy setup
This commit is contained in:
Dashboard
2026-02-02 20:27:05 +00:00
commit 89cdb022f3
25 changed files with 2437 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/templates/settings.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings - DeathStar Homelab</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: { extend: { colors: { dark: { 900: '#0a0f1a', 800: '#111827', 700: '#1f2937', 600: '#374151' } } } }
}
</script>
<style>
body { background: linear-gradient(135deg, #0a0f1a 0%, #111827 100%); }
.card { background: rgba(31, 41, 55, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(75, 85, 99, 0.3); }
</style>
</head>
<body class="text-gray-100 min-h-screen p-6">
<div class="max-w-2xl mx-auto">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Settings</h1>
<a href="/" class="px-4 py-2 rounded-lg bg-dark-700 hover:bg-dark-600 text-sm text-gray-300">Back to Dashboard</a>
</div>
{% if request.query_params.get('saved') %}
<div class="mb-4 p-3 rounded-lg bg-emerald-900/30 border border-emerald-700 text-emerald-300 text-sm">Settings saved successfully!</div>
{% endif %}
<form method="POST" action="/settings" class="space-y-6">
<!-- General Settings -->
<div class="card rounded-xl p-6">
<h2 class="text-lg font-semibold mb-4 text-gray-200">General</h2>
<div class="space-y-4">
<div>
<label class="block text-sm text-gray-400 mb-2">Refresh Interval (seconds)</label>
<select name="refresh_interval" class="w-full bg-dark-700 border border-gray-600 rounded-lg px-3 py-2 text-sm">
<option value="15" {% if settings.refresh_interval == 15 %}selected{% endif %}>15 seconds</option>
<option value="30" {% if settings.refresh_interval == 30 %}selected{% endif %}>30 seconds</option>
<option value="60" {% if settings.refresh_interval == 60 %}selected{% endif %}>60 seconds</option>
<option value="120" {% if settings.refresh_interval == 120 %}selected{% endif %}>2 minutes</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-400 mb-2">Theme</label>
<select name="theme" class="w-full bg-dark-700 border border-gray-600 rounded-lg px-3 py-2 text-sm">
<option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>Dark</option>
<option value="light" {% if settings.theme == 'light' %}selected{% endif %}>Light</option>
</select>
</div>
</div>
</div>
<!-- Display Options -->
<div class="card rounded-xl p-6">
<h2 class="text-lg font-semibold mb-4 text-gray-200">Display Options</h2>
<div class="space-y-3">
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" name="show_response_times" {% if settings.show_response_times %}checked{% endif %} class="w-4 h-4 rounded bg-dark-700 border-gray-600">
<span class="text-sm text-gray-300">Show response times</span>
</label>
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" name="show_icons" {% if settings.show_icons %}checked{% endif %} class="w-4 h-4 rounded bg-dark-700 border-gray-600">
<span class="text-sm text-gray-300">Show service icons</span>
</label>
</div>
</div>
<!-- Favorites -->
<div class="card rounded-xl p-6">
<h2 class="text-lg font-semibold mb-4 text-gray-200">Favorites</h2>
<p class="text-xs text-gray-500 mb-3">Select services to show in Quick Access</p>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 max-h-64 overflow-y-auto">
{% for service in all_services %}
<label class="flex items-center gap-2 p-2 rounded-lg bg-dark-700 cursor-pointer hover:bg-dark-600">
<input type="checkbox" name="favorites" value="{{ service.name }}"
{% if service.name in settings.favorites %}checked{% endif %}
class="w-3 h-3 rounded bg-dark-600 border-gray-500">
<span class="text-xs text-gray-300 truncate">{{ service.name }}</span>
</label>
{% endfor %}
</div>
</div>
<div class="flex justify-end gap-3">
<a href="/" class="px-4 py-2 rounded-lg bg-dark-700 hover:bg-dark-600 text-sm text-gray-300">Cancel</a>
<button type="submit" class="px-6 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-sm text-white font-medium">Save Settings</button>
</div>
</form>
</div>
</body>
</html>