<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>solverforge-ui demos</title>
<link rel="stylesheet" href="../static/sf/vendor/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="../static/sf/vendor/fontawesome/css/solid.min.css">
<link rel="stylesheet" href="../static/sf/sf.css">
<style>
body { margin: 0; }
.demo-shell { max-width: 960px; margin: 0 auto; padding: 48px 24px 72px; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.demo-card { background: white; border: 1px solid var(--sf-gray-200); border-radius: 12px; padding: 20px; box-shadow: var(--sf-shadow-base); }
.demo-card h2 { margin: 0 0 10px; font-size: 20px; }
.demo-card p { margin: 0 0 16px; color: var(--sf-gray-600); line-height: 1.6; }
.demo-card a { color: var(--sf-emerald-700); font-weight: 600; text-decoration: none; }
</style>
</head>
<body class="sf-app">
<main class="sf-main">
<div class="demo-shell">
<h1>solverforge-ui demo fixtures</h1>
<p>These fixtures exercise the shipped component surface using the bundled assets from this repository.</p>
<div class="demo-grid">
<section class="demo-card">
<h2>Full Surface</h2>
<p>Header, status bar, tabs, table, modal, toast, API guide, rail, footer, and Gantt in one runnable fixture.</p>
<a href="./full-surface.html">Open full-surface demo</a>
</section>
<section class="demo-card">
<h2>Rail Focus</h2>
<p>A smaller fixture for validating resource cards, gauges, changeovers, and positioned blocks.</p>
<a href="./rail.html">Open rail demo</a>
</section>
</div>
</div>
</main>
</body>
</html>