Initial commit: Homelab documentation

- infrastructure.md: Network topology, server overview, credentials
- gsm.md: Gameserver Monitor detailed documentation
- todo.md: Project roadmap and completed tasks
- CLAUDE.md: AI assistant context
- temp/: Frontend component backups

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

temp/ServerCard.jsx

@@ -0,0 +1,96 @@
+export default function ServerCard({ server, onClick }) {
+  const formatUptime = (seconds) => {
+    const hours = Math.floor(seconds / 3600)
+    if (hours > 24) {
+      const days = Math.floor(hours / 24)
+      return days + 'd ' + (hours % 24) + 'h'
+    }
+    const minutes = Math.floor((seconds % 3600) / 60)
+    return hours + 'h ' + minutes + 'm'
+  }
+
+  const cpuPercent = Math.min(server.metrics.cpu, 100)
+  const memPercent = Math.min(server.metrics.memory, 100)
+
+  const getProgressColor = (percent) => {
+    if (percent > 80) return 'progress-bar-danger'
+    if (percent > 60) return 'progress-bar-warning'
+    return 'progress-bar-success'
+  }
+
+  return (
+    <div
+      className="card card-clickable p-5"
+      onClick={onClick}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-white">
+          {server.name}
+        </h3>
+        <span className={server.running ? 'badge badge-success' : 'badge badge-destructive'}>
+          {server.running ? 'Online' : 'Offline'}
+        </span>
+      </div>
+
+      {/* Metrics */}
+      <div className="space-y-3">
+        {/* CPU */}
+        <div>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-neutral-400">CPU</span>
+            <span className="text-white">{server.metrics.cpu.toFixed(1)}%</span>
+          </div>
+          <div className="progress">
+            <div
+              className={'progress-bar ' + getProgressColor(cpuPercent)}
+              style={{ width: cpuPercent + '%' }}
+            />
+          </div>
+        </div>
+
+        {/* RAM */}
+        <div>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-neutral-400">Memory</span>
+            <span className="text-white">
+              {server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
+            </span>
+          </div>
+          <div className="progress">
+            <div
+              className={'progress-bar ' + getProgressColor(memPercent)}
+              style={{ width: memPercent + '%' }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Footer Stats */}
+      <div className="flex items-center justify-between mt-4 pt-4 border-t border-neutral-800 text-sm">
+        <div className="text-neutral-400">
+          <span className="text-white font-medium">{server.players.online}</span>
+          {server.players.max ? ' / ' + server.players.max : ''} players
+        </div>
+        {server.running && (
+          <div className="text-neutral-400">
+            Uptime: <span className="text-white">{formatUptime(server.metrics.uptime)}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Players List */}
+      {server.players?.list?.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-neutral-800">
+          <div className="flex flex-wrap gap-1.5">
+            {server.players.list.map((player, i) => (
+              <span key={i} className="badge badge-secondary">
+                {player}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}