gsadmin/ferrum
1
0
Fork 0
mirror of https://github.com/anand34577/ferrum.git synced 2026-09-20 17:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
52424fb3c8f08ec2e55e2a8f746762ebea9cd65c
ferrum/docs/index.html
T
Anand 4ae41a6f1d Add public docs/demo site, fix logout getting stuck on loading 
- docs/: GitHub Pages site (landing page, docs, live click-through demo)
  served straight from /docs, no build step.
- web-demo/: source for the demo (a copy of web/ with its API layer mocked
  in-memory) — see web-demo/README.md to rebuild docs/demo after a change.
- web/src/lib/auth.tsx: signOut() no longer clears the whole query cache;
  wiping ["auth","setup-status"] forced it to refetch and re-armed
  `loading`, stranding the user on a loading/failed screen instead of the
  Login page. Only non-auth queries are dropped now.
- .gitignore: exclude web-demo/node_modules and web-demo/dist (build output,
  already published as docs/demo).
- Drop PRODUCT.md (internal planning brief, not meant for the public repo).
- README: link the new docs/demo site.
2026-09-12 15:22:55 +05:30

301 lines
20 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ferrum — one dashboard for every Proxmox host you run</title>
<meta name="description" content="Ferrum is a self-hosted fleet dashboard for Proxmox VE and Proxmox Backup Server: live inventory, backups, HA, firewall, alerting, and an AI assistant, across every cluster and standalone node from one binary.">
<link rel="icon" type="image/svg+xml" href="./assets/favicon.svg">
<link rel="stylesheet" href="./assets/css/site.css">
<style>
.hero { padding: 4.5rem 0 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
.hero h1 { max-width: 15ch; }
.hero p.lead { font-size: 1.15rem; max-width: 46ch; margin-top: 1.25rem; }
.hero-cta { display: flex; gap: 0.9rem; margin-top: 2.1rem; flex-wrap: wrap; }
.hero-facts { display: flex; gap: 1.75rem; margin-top: 2.75rem; flex-wrap: wrap; }
.hero-fact { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-faint); }
.hero-fact b { font-family: var(--font-sans); display: block; font-size: 1.5rem; color: var(--text); font-weight: 700; letter-spacing: -0.02em; }
.frame { position: relative; }
.frame-window {
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--bg-elevated);
box-shadow: var(--shadow-lg);
overflow: hidden;
transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
}
.frame-chrome { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.frame-chrome span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.frame-chrome .bar { margin-left: 0.6rem; flex: 1; height: 20px; border-radius: 6px; background: var(--bg-muted); }
.float-card {
position: absolute;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.85rem 1.05rem;
font-size: 0.82rem;
}
.float-card.f1 { top: -1.5rem; left: -2.25rem; }
.float-card.f2 { bottom: -1.75rem; right: -1.5rem; }
.float-card .k { color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.float-card .v { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-top: 0.15rem; }
.strip { padding: 2.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.strip-row { display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: space-between; color: var(--text-faint); font-size: 0.92rem; }
.strip-row span { display: flex; align-items: center; gap: 0.5rem; }
.strip-row svg { width: 16px; height: 16px; color: var(--accent-400); flex-shrink: 0; }
.section { padding: 6.5rem 0; }
.section-head { max-width: 56ch; }
.section-head p { margin-top: 0.9rem; font-size: 1.05rem; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; margin-top: 3rem; }
.feat { grid-column: span 2; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.9rem; transition: border-color 0.15s ease, transform 0.15s ease; }
.feat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.feat.big { grid-column: span 3; }
.feat-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent-500) 16%, var(--bg-surface)); color: var(--accent-300); flex-shrink: 0; }
.feat-icon svg { width: 21px; height: 21px; }
.feat h3 { font-size: 1.12rem; }
.feat p { font-size: 0.94rem; }
.feat ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: 0.87rem; color: var(--text-dim); }
.feat li { display: flex; gap: 0.5rem; }
.feat li svg { width: 14px; height: 14px; color: var(--status-ok); flex-shrink: 0; margin-top: 0.2rem; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.shot { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.shot img { aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.shot figcaption { padding: 0.85rem 1.1rem; font-size: 0.87rem; color: var(--text-dim); margin: 0; }
.shot:first-child { grid-column: span 2; }
.shot:first-child img { aspect-ratio: 16/8.4; }
.looks-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 2.5rem; }
.look-chip { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-surface); font-size: 0.85rem; color: var(--text-dim); }
.cta-band { border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(155deg, color-mix(in srgb, var(--accent-500) 14%, var(--bg-surface)), var(--bg-surface)); padding: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band h2 { max-width: 20ch; }
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; }
.frame-window { transform: none; }
.float-card { display: none; }
.bento { grid-template-columns: repeat(2, 1fr); }
.feat, .feat.big { grid-column: span 2; }
.shots { grid-template-columns: 1fr; }
.shot:first-child { grid-column: auto; }
}
</style>
</head>
<body>
<header class="topnav">
<div class="container topnav-row">
<a href="./index.html" class="brand">
<span class="brand-mark" aria-label="Ferrum (Fe)"><span class="bm-num">26</span><span class="bm-sym">Fe</span></span>
Ferrum
</a>
<nav class="navlinks">
<a href="./index.html#features">Product</a>
<a href="./index.html#look">Screenshots</a>
<a href="./guide/index.html">Docs</a>
<a href="./demo/index.html">Demo</a>
<a href="https://github.com/anand34577/ferrum/releases" target="_blank" rel="noopener">Releases</a>
</nav>
<div class="nav-actions">
<button class="icon-btn" data-theme-toggle aria-label="Toggle color theme">
<svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z"/></svg>
<svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
</button>
<a class="icon-btn" href="https://github.com/anand34577/ferrum" target="_blank" rel="noopener" aria-label="View source on GitHub">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.58 2 12.25c0 4.53 2.87 8.37 6.84 9.73.5.1.68-.22.68-.5 0-.24-.01-1.04-.01-1.88-2.78.62-3.37-1.22-3.37-1.22-.46-1.2-1.11-1.52-1.11-1.52-.9-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.89 1.57 2.34 1.11 2.91.85.09-.67.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.31.1-2.72 0 0 .84-.28 2.75 1.05a9.28 9.28 0 0 1 5 0c1.9-1.33 2.74-1.05 2.74-1.05.56 1.41.2 2.46.1 2.72.65.72 1.03 1.63 1.03 2.75 0 3.94-2.35 4.8-4.58 5.06.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.81 0 .28.18.61.69.5A10.03 10.03 0 0 0 22 12.25C22 6.58 17.52 2 12 2Z"/></svg>
</a>
<a class="btn btn-primary btn-sm" href="./demo/index.html">Live demo</a>
<button class="nav-toggle" data-nav-toggle aria-label="Open menu" aria-expanded="false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
</button>
</div>
</div>
</header>
<main>
<section class="hero container">
<div class="hero-grid">
<div>
<span class="pill accent"><span class="dot ok"></span>MIT-licensed · single Go binary</span>
<h1 class="mt-2">One dashboard for every Proxmox host you run</h1>
<p class="lead">Ferrum rolls every cluster and standalone node into one live view: inventory, backups, HA, firewall, alerting, and an assistant that can act on it, instead of a browser tab per host.</p>
<div class="hero-cta">
<a class="btn btn-primary" href="./demo/index.html">
Walk through the demo
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a class="btn btn-ghost" href="./guide/installation.html">Install Ferrum</a>
</div>
<div class="hero-facts">
<div class="hero-fact"><b>1</b>binary, no runtime deps</div>
<div class="hero-fact"><b>SQLite / Postgres</b>your choice of store</div>
<div class="hero-fact"><b>12</b>look-and-feel presets</div>
</div>
</div>
<div class="frame">
<div class="frame-window">
<div class="frame-chrome"><span></span><span></span><span></span><div class="bar"></div></div>
<img src="./screenshots/dashboard.png" alt="Ferrum's fleet overview dashboard, showing node and guest counts, CPU and memory load, and active alerts across a cluster.">
</div>
<div class="float-card f1">
<div class="k">Fleet health</div>
<div class="v" style="color:var(--status-ok)">98.4%</div>
</div>
<div class="float-card f2">
<div class="k">Guests online</div>
<div class="v">26 / 26</div>
</div>
</div>
</div>
</section>
<section class="strip">
<div class="container strip-row">
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 3 6v6c0 5 4 8 9 10 5-2 9-5 9-10V6l-9-4Z"/></svg>Self-hosted, your infrastructure only</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><path d="M7 7h.01M7 17h.01"/></svg>PVE clusters, standalone nodes &amp; PBS remotes</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-12M6 9H3m18 0h-3M6 15H3m18 0h-3"/></svg>REST API &amp; MCP for agents and scripts</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Z"/><path d="M19 11a7 7 0 0 1-14 0M12 18v4"/></svg>Built-in AI assistant, works fully offline</span>
</div>
</section>
<section class="section container" id="features">
<div class="section-head">
<h2>Everything a Proxmox fleet needs watched, in one place</h2>
<p>Ferrum isn't a prettier login screen bolted onto the Proxmox API. It keeps its own inventory, its own alert history, and its own audit trail, so it stays useful even when a node is unreachable.</p>
</div>
<div class="bento">
<article class="feat big card">
<div class="feat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg></div>
<h3>Fleet-wide overview</h3>
<p>Every connection (cluster, standalone node, or PBS remote) rolled into one dashboard: node and guest counts, CPU/memory/storage, active alerts. Rearrange it from 20+ widgets and it stays that way per user.</p>
</article>
<article class="feat big card">
<div class="feat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
<h3>Alerting &amp; automation</h3>
<p>Threshold alerts on CPU, memory, disk, and guest state; config drift detection; guest lifecycle policies; capacity forecasting; a fleet health score; scheduled health-digest emails; and Terraform/Ansible inventory export, so you find out from Ferrum, not from a user.</p>
</article>
<article class="feat card">
<div class="feat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="6" height="6" rx="1"/><rect x="14" y="4" width="6" height="6" rx="1"/><rect x="4" y="14" width="6" height="6" rx="1"/><rect x="14" y="14" width="6" height="6" rx="1"/></svg></div>
<h3>Inventory &amp; operations</h3>
<p>Nodes, VMs, and LXCs with live consoles, snapshots, and a guest agent file browser.</p>
<ul>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M20 6 9 17l-5-5"/></svg>noVNC + xterm.js consoles</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M20 6 9 17l-5-5"/></svg>Bulk start / stop / migrate</li>
</ul>
</article>
<article class="feat card">
<div class="feat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg></div>
<h3>Storage &amp; backups</h3>
<p>Pool usage and Ceph health across every connection, backup job status, replication, and PBS integration alongside native PVE storage.</p>
</article>
<article class="feat card">
<div class="feat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 3 6v6c0 5 4 8 9 10 5-2 9-5 9-10V6l-9-4Z"/><path d="m9 12 2 2 4-4"/></svg></div>
<h3>HA, firewall &amp; SDN</h3>
<p>HA groups and resources, cluster and per-node firewall rules, and SDN zones/VNets/subnets, all scoped per connection.</p>
</article>
<article class="feat card">
<div class="feat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-12M6 9H3m18 0h-3M6 15H3m18 0h-3"/></svg></div>
<h3>Integrations</h3>
<p>Outbound webhooks and a REST API and MCP server with scoped, per-user keys for third-party tools and agents.</p>
</article>
<article class="feat card">
<div class="feat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-7 8-7s8 3 8 7"/></svg></div>
<h3>Access &amp; auditing</h3>
<p>Per-user roles, optional OIDC single sign-on, session monitoring, and a full audit log of every mutating action, UI, API, and MCP alike.</p>
</article>
<article class="feat card">
<div class="feat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Z"/><path d="M19 11a7 7 0 0 1-14 0M12 18v4"/></svg></div>
<h3>AI Assistant</h3>
<p>Chats with the same tool catalog MCP exposes, using any OpenAI-compatible provider, or Needle 2, a bundled local model with no API key or network needed.</p>
</article>
</div>
</section>
<section class="section container" id="look">
<div class="section-head">
<h2>The real thing, not a mockup</h2>
<p>Screenshots below are Ferrum running against an actual fleet: three connections, six nodes, twenty-six VMs and LXCs across two clusters and a standalone host, with Ceph and NFS storage behind it.</p>
</div>
<div class="shots">
<figure class="shot"><img src="./screenshots/topology.png" alt="Topology graph showing clusters, nodes, and guests as a connected map."><figcaption>Topology, the fleet as a map, not a table</figcaption></figure>
<figure class="shot"><img src="./screenshots/inventory.png" alt="Inventory table listing nodes, VMs, and LXCs with live status."><figcaption>Inventory across every node</figcaption></figure>
<figure class="shot"><img src="./screenshots/backups.png" alt="Backup jobs and replication status."><figcaption>Backup jobs &amp; replication</figcaption></figure>
<figure class="shot"><img src="./screenshots/high-availability.png" alt="High availability groups and resources."><figcaption>HA groups &amp; resources</figcaption></figure>
<figure class="shot"><img src="./screenshots/firewall.png" alt="Cluster firewall rules."><figcaption>Cluster &amp; per-node firewall</figcaption></figure>
</div>
<p class="mt-4">Twelve look-and-feel presets ship in Settings, each with light and dark and a choice of accent color; pick one and it applies everywhere, including consoles and the AI assistant.</p>
<div class="looks-row">
<span class="look-chip">Enterprise</span><span class="look-chip">Proxmox-native</span><span class="look-chip">Terminal</span><span class="look-chip">Glass Flight Deck</span><span class="look-chip">Midnight</span><span class="look-chip">Paper</span><span class="look-chip">Glassmorphism</span><span class="look-chip">Neumorphism</span><span class="look-chip">Brutalist</span><span class="look-chip">Solarized</span><span class="look-chip">High Contrast</span><span class="look-chip">Aurora</span>
</div>
</section>
<section class="section container">
<div class="cta-band">
<div>
<h2>See it before you install it</h2>
<p class="mt-2">The live demo is a full click-through of the real interface, seeded with a fleet already running: no signup, no Proxmox host required.</p>
</div>
<div style="display:flex; gap:0.9rem; flex-wrap:wrap;">
<a class="btn btn-primary" href="./demo/index.html">Open the demo</a>
<a class="btn btn-ghost" href="./guide/index.html">Read the docs</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div>
<a href="./index.html" class="brand" style="margin-bottom:0.9rem; display:inline-flex;">
<span class="brand-mark" aria-label="Ferrum (Fe)"><span class="bm-num">26</span><span class="bm-sym">Fe</span></span>
Ferrum
</a>
<p style="max-width:34ch;">Fleet control for Proxmox VE: one dashboard for every cluster and standalone node you run. MIT-licensed, self-hosted, single binary.</p>
</div>
<div>
<h4>Product</h4>
<ul>
<li><a href="./index.html#features">Features</a></li>
<li><a href="./index.html#look">Screenshots</a></li>
<li><a href="./demo/index.html">Live demo</a></li>
<li><a href="https://github.com/anand34577/ferrum/releases" target="_blank" rel="noopener">Releases</a></li>
</ul>
</div>
<div>
<h4>Docs</h4>
<ul>
<li><a href="./guide/installation.html">Installation</a></li>
<li><a href="./guide/configuration.html">Configuration</a></li>
<li><a href="./guide/features.html">Using Ferrum</a></li>
<li><a href="./guide/api.html">API &amp; MCP</a></li>
</ul>
</div>
<div>
<h4>Project</h4>
<ul>
<li><a href="https://github.com/anand34577/ferrum" target="_blank" rel="noopener">Source on GitHub</a></li>
<li><a href="https://github.com/anand34577/ferrum/issues" target="_blank" rel="noopener">Report an issue</a></li>
<li><a href="https://github.com/anand34577/ferrum/blob/main/LICENSE" target="_blank" rel="noopener">MIT License</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Ferrum. Open source under the MIT license.</span>
<span>Not affiliated with Proxmox Server Solutions GmbH.</span>
</div>
</div>
</footer>
<script src="./assets/js/site.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink