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_new.jsx

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+
+export default function ServerCard({ server, onClick }) {
+  const [isHovered, setIsHovered] = useState(false)
+
+  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)
+
+  return (
+    <div
+      className="card-matrix rounded-lg p-6 cursor-pointer transition-all duration-300 border border-[#00ff41]/30 hover:border-[#00ff41]/60 hover:bg-[#00ff41]/5"
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-5">
+        <h2 className="text-xl font-bold text-[#00ff41] font-mono">
+          {server.name.toUpperCase()}
+        </h2>
+        <div className="flex items-center gap-2">
+          <span className={`w-2 h-2 rounded-full ${server.running ? 'status-online' : 'status-offline'}`} />
+          <span className={`text-sm font-mono ${server.running ? 'text-[#00ff41]' : 'text-red-500'}`}>
+            {server.running ? 'ONLINE' : 'OFFLINE'}
+          </span>
+        </div>
+      </div>
+
+      {/* CPU & RAM Bars */}
+      <div className="space-y-4 mb-5">
+        {/* CPU */}
+        <div>
+          <div className="flex justify-between text-sm font-mono mb-1">
+            <span className="text-[#00ff41]/60">CPU</span>
+            <span className="text-[#00ff41]">{server.metrics.cpu.toFixed(1)}%</span>
+          </div>
+          <div className="h-2 bg-black/50 rounded-full border border-[#00ff41]/20">
+            <div
+              className="h-full rounded-full bg-gradient-to-r from-[#008f11] to-[#00ff41] transition-all duration-500"
+              style={{ width: cpuPercent + '%', boxShadow: '0 0 8px #00ff41' }}
+            />
+          </div>
+        </div>
+
+        {/* RAM */}
+        <div>
+          <div className="flex justify-between text-sm font-mono mb-1">
+            <span className="text-[#00ff41]/60">RAM</span>
+            <span className="text-[#00ff41]">
+              {server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
+            </span>
+          </div>
+          <div className="h-2 bg-black/50 rounded-full border border-[#00ff41]/20">
+            <div
+              className="h-full rounded-full bg-gradient-to-r from-[#008f11] to-[#00ff41] transition-all duration-500"
+              style={{ width: memPercent + '%', boxShadow: '0 0 8px #00ff41' }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Stats Row */}
+      <div className="flex justify-between font-mono text-sm border-t border-[#00ff41]/20 pt-4">
+        <div className="text-center">
+          <div className="text-[#00ff41] text-lg font-bold">{server.players.online}</div>
+          <div className="text-[#00ff41]/50 text-xs">PLAYERS</div>
+        </div>
+        {server.running && (
+          <div className="text-center">
+            <div className="text-[#00ff41] text-lg font-bold">{formatUptime(server.metrics.uptime)}</div>
+            <div className="text-[#00ff41]/50 text-xs">UPTIME</div>
+          </div>
+        )}
+        <div className="text-center">
+          <div className="text-[#00ff41] text-lg font-bold">{server.metrics.cpuCores}</div>
+          <div className="text-[#00ff41]/50 text-xs">CORES</div>
+        </div>
+      </div>
+
+      {/* Players List */}
+      {server.players?.list?.length > 0 && (
+        <div className="mt-4 pt-4 border-t border-[#00ff41]/20">
+          <div className="flex flex-wrap gap-2">
+            {server.players.list.map((player, i) => (
+              <span key={i} className="bg-[#00ff41]/10 text-[#00ff41] px-2 py-1 rounded font-mono text-xs">
+                {player}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Click Indicator */}
+      <div className={`mt-4 text-center text-[#00ff41]/40 text-xs font-mono transition-opacity duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
+        CLICK FOR DETAILS
+      </div>
+    </div>
+  )
+}