chrisryn
c952a3b56e
Features: - Real-time Proxmox cluster monitoring (nodes, LXC containers) - Camera integration with go2rtc streams - Arr stack download progress monitoring - PBS backup status - Docker container status - Uptime Kuma service health - FastAPI backend with HTMX frontend
23 lines
1.2 KiB
HTML
23 lines
1.2 KiB
HTML
<div class="grid grid-cols-2 gap-2">
|
|
{% for camera in cameras[:4] %}
|
|
<div class="camera-thumb relative group">
|
|
<img src="/api/camera-snapshot/{{ camera }}"
|
|
alt="{{ camera }}"
|
|
class="w-full h-full"
|
|
loading="lazy"
|
|
onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 56%22><rect fill=%22%231f2937%22 width=%22100%22 height=%2256%22/><text x=%2250%22 y=%2228%22 text-anchor=%22middle%22 fill=%22%236b7280%22 font-size=%228%22>No Signal</text></svg>'">
|
|
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<a href="{{ go2rtc_url }}/stream.html?src={{ camera }}" target="_blank" class="text-white text-xs hover:text-cyan-400">
|
|
{{ camera }}
|
|
</a>
|
|
</div>
|
|
<div class="absolute bottom-1 left-1 text-[10px] text-white bg-black/50 px-1 rounded">{{ camera }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% if cameras | length > 4 %}
|
|
<a href="{{ go2rtc_url }}" target="_blank" class="block text-center text-xs text-gray-500 hover:text-cyan-400 mt-2">
|
|
View all {{ cameras | length }} cameras
|
|
</a>
|
|
{% endif %}
|