963 lines
23 KiB
HTML
963 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{PROJECT_NAME}} - Documentation</title>
|
||
<style>
|
||
/* ===== CSS Variables ===== */
|
||
:root {
|
||
--color-primary: #2563eb;
|
||
--color-primary-light: #3b82f6;
|
||
--color-primary-dark: #1d4ed8;
|
||
--color-secondary: #7c3aed;
|
||
--color-success: #10b981;
|
||
--color-warning: #f59e0b;
|
||
--color-danger: #ef4444;
|
||
--color-info: #06b6d4;
|
||
|
||
--color-bg: #ffffff;
|
||
--color-bg-alt: #f8fafc;
|
||
--color-bg-code: #f1f5f9;
|
||
--color-text: #1e293b;
|
||
--color-text-light: #64748b;
|
||
--color-text-muted: #94a3b8;
|
||
--color-border: #e2e8f0;
|
||
|
||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||
|
||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||
|
||
--radius-sm: 0.375rem;
|
||
--radius-md: 0.5rem;
|
||
--radius-lg: 0.75rem;
|
||
}
|
||
|
||
/* Dark mode */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-bg: #0f172a;
|
||
--color-bg-alt: #1e293b;
|
||
--color-bg-code: #334155;
|
||
--color-text: #f1f5f9;
|
||
--color-text-light: #94a3b8;
|
||
--color-text-muted: #64748b;
|
||
--color-border: #334155;
|
||
}
|
||
}
|
||
|
||
/* ===== Reset & Base ===== */
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
font-size: 16px;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-sans);
|
||
background: var(--color-bg);
|
||
color: var(--color-text);
|
||
line-height: 1.7;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ===== Layout ===== */
|
||
.layout {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Sidebar */
|
||
.sidebar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 280px;
|
||
height: 100vh;
|
||
background: var(--color-bg-alt);
|
||
border-right: 1px solid var(--color-border);
|
||
overflow-y: auto;
|
||
padding: 2rem 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.sidebar-header {
|
||
padding: 0 1.5rem 1.5rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.sidebar-logo {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--color-primary);
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.sidebar-version {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
.sidebar-nav {
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.nav-section {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.nav-section-title {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--color-text-muted);
|
||
padding: 0 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.nav-link {
|
||
display: block;
|
||
padding: 0.5rem;
|
||
color: var(--color-text-light);
|
||
text-decoration: none;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.9rem;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background: var(--color-border);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.nav-link.active {
|
||
background: var(--color-primary);
|
||
color: white;
|
||
}
|
||
|
||
.nav-link-icon {
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
/* Main content */
|
||
.main {
|
||
flex: 1;
|
||
margin-left: 280px;
|
||
padding: 3rem 4rem;
|
||
max-width: 900px;
|
||
}
|
||
|
||
/* ===== Typography ===== */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
margin-top: 2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
margin-top: 0;
|
||
padding-bottom: 1rem;
|
||
border-bottom: 2px solid var(--color-border);
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.75rem;
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
a {
|
||
color: var(--color-primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ===== Components ===== */
|
||
|
||
/* Hero section */
|
||
.hero {
|
||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||
color: white;
|
||
padding: 3rem;
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.hero h1 {
|
||
color: white;
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.hero-tagline {
|
||
font-size: 1.25rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Cards */
|
||
.card {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.card-icon {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
background: var(--color-primary);
|
||
color: white;
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Grid */
|
||
.grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.grid-2 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.grid-3 {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.grid-2, .grid-3 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Tables */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 1.5rem 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
th, td {
|
||
padding: 0.75rem 1rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
th {
|
||
background: var(--color-bg-alt);
|
||
font-weight: 600;
|
||
color: var(--color-text-light);
|
||
text-transform: uppercase;
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
tr:hover {
|
||
background: var(--color-bg-alt);
|
||
}
|
||
|
||
/* Code blocks */
|
||
code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.875em;
|
||
background: var(--color-bg-code);
|
||
padding: 0.2em 0.4em;
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
pre {
|
||
background: var(--color-bg-code);
|
||
border-radius: var(--radius-md);
|
||
padding: 1.25rem;
|
||
overflow-x: auto;
|
||
margin: 1.5rem 0;
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
pre code {
|
||
background: none;
|
||
padding: 0;
|
||
font-size: 0.875rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Diagrams */
|
||
.diagram {
|
||
background: var(--color-bg-alt);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1.5rem;
|
||
overflow-x: auto;
|
||
margin: 1.5rem 0;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
line-height: 1.4;
|
||
white-space: pre;
|
||
}
|
||
|
||
/* Badges */
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.25rem 0.75rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
border-radius: 9999px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.025em;
|
||
}
|
||
|
||
.badge-primary {
|
||
background: rgba(37, 99, 235, 0.1);
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.badge-success {
|
||
background: rgba(16, 185, 129, 0.1);
|
||
color: var(--color-success);
|
||
}
|
||
|
||
.badge-warning {
|
||
background: rgba(245, 158, 11, 0.1);
|
||
color: var(--color-warning);
|
||
}
|
||
|
||
.badge-info {
|
||
background: rgba(6, 182, 212, 0.1);
|
||
color: var(--color-info);
|
||
}
|
||
|
||
/* Collapsible technical details */
|
||
details {
|
||
background: var(--color-bg-alt);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
summary {
|
||
padding: 1rem 1.25rem;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: var(--color-text-light);
|
||
}
|
||
|
||
summary:hover {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
summary::marker {
|
||
content: '';
|
||
}
|
||
|
||
summary::before {
|
||
content: '▶';
|
||
font-size: 0.75rem;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
details[open] summary::before {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
details > div {
|
||
padding: 0 1.25rem 1.25rem;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.tech-badge {
|
||
background: var(--color-primary);
|
||
color: white;
|
||
padding: 0.125rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.7rem;
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* API Methods */
|
||
.method {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.method-get { background: #dcfce7; color: #166534; }
|
||
.method-post { background: #dbeafe; color: #1e40af; }
|
||
.method-put { background: #fef3c7; color: #92400e; }
|
||
.method-patch { background: #fce7f3; color: #9d174d; }
|
||
.method-delete { background: #fee2e2; color: #991b1b; }
|
||
|
||
/* Alerts / Callouts */
|
||
.callout {
|
||
padding: 1rem 1.25rem;
|
||
border-radius: var(--radius-md);
|
||
margin: 1.5rem 0;
|
||
border-left: 4px solid;
|
||
}
|
||
|
||
.callout-info {
|
||
background: rgba(6, 182, 212, 0.1);
|
||
border-color: var(--color-info);
|
||
}
|
||
|
||
.callout-tip {
|
||
background: rgba(16, 185, 129, 0.1);
|
||
border-color: var(--color-success);
|
||
}
|
||
|
||
.callout-warning {
|
||
background: rgba(245, 158, 11, 0.1);
|
||
border-color: var(--color-warning);
|
||
}
|
||
|
||
.callout-title {
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
/* Lists */
|
||
ul, ol {
|
||
margin: 1rem 0;
|
||
padding-left: 1.5rem;
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* Glossary */
|
||
.glossary-term {
|
||
display: flex;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.glossary-term:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.glossary-word {
|
||
font-weight: 600;
|
||
min-width: 150px;
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.glossary-definition {
|
||
color: var(--color-text-light);
|
||
}
|
||
|
||
/* Feature list */
|
||
.feature-item {
|
||
display: flex;
|
||
gap: 1rem;
|
||
padding: 1.25rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: 1rem;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.feature-item:hover {
|
||
border-color: var(--color-primary);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||
color: white;
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.25rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.feature-content h4 {
|
||
margin: 0 0 0.5rem 0;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.feature-content p {
|
||
margin: 0;
|
||
color: var(--color-text-light);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 1024px) {
|
||
.sidebar {
|
||
transform: translateX(-100%);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.sidebar.open {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.main {
|
||
margin-left: 0;
|
||
padding: 2rem 1.5rem;
|
||
}
|
||
|
||
.mobile-menu-btn {
|
||
display: block;
|
||
position: fixed;
|
||
top: 1rem;
|
||
left: 1rem;
|
||
z-index: 101;
|
||
background: var(--color-primary);
|
||
color: white;
|
||
border: none;
|
||
padding: 0.75rem;
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1025px) {
|
||
.mobile-menu-btn {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Print styles */
|
||
@media print {
|
||
.sidebar {
|
||
display: none;
|
||
}
|
||
|
||
.main {
|
||
margin-left: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
details {
|
||
display: block !important;
|
||
}
|
||
|
||
details > div {
|
||
display: block !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<button class="mobile-menu-btn" onclick="toggleSidebar()">☰</button>
|
||
|
||
<div class="layout">
|
||
<!-- Sidebar Navigation -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<a href="#" class="sidebar-logo">
|
||
📚 {{PROJECT_NAME}}
|
||
</a>
|
||
<div class="sidebar-version">Version {{VERSION}}</div>
|
||
</div>
|
||
|
||
<nav class="sidebar-nav">
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">Overview</div>
|
||
<a href="#executive-summary" class="nav-link">
|
||
<span class="nav-link-icon">📋</span> Executive Summary
|
||
</a>
|
||
<a href="#quick-start" class="nav-link">
|
||
<span class="nav-link-icon">🚀</span> Quick Start
|
||
</a>
|
||
<a href="#architecture" class="nav-link">
|
||
<span class="nav-link-icon">🏗️</span> Architecture
|
||
</a>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">Features</div>
|
||
<a href="#features" class="nav-link">
|
||
<span class="nav-link-icon">✨</span> Feature Guide
|
||
</a>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">For Developers</div>
|
||
<a href="#api-reference" class="nav-link">
|
||
<span class="nav-link-icon">🔌</span> API Reference
|
||
</a>
|
||
<a href="#components" class="nav-link">
|
||
<span class="nav-link-icon">🧩</span> Components
|
||
</a>
|
||
<a href="#data-models" class="nav-link">
|
||
<span class="nav-link-icon">💾</span> Data Models
|
||
</a>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">Reference</div>
|
||
<a href="#glossary" class="nav-link">
|
||
<span class="nav-link-icon">📖</span> Glossary
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main">
|
||
<!-- Hero Section -->
|
||
<section class="hero">
|
||
<h1>{{PROJECT_NAME}}</h1>
|
||
<p class="hero-tagline">{{TAGLINE}}</p>
|
||
</section>
|
||
|
||
<!-- Executive Summary -->
|
||
<section id="executive-summary">
|
||
<h2>📋 Executive Summary</h2>
|
||
|
||
<h3>What is {{PROJECT_NAME}}?</h3>
|
||
<p>{{DESCRIPTION}}</p>
|
||
|
||
<h3>Who is it for?</h3>
|
||
<p>{{AUDIENCE}}</p>
|
||
|
||
<h3>Key Capabilities</h3>
|
||
<div class="grid grid-2">
|
||
<!-- CAPABILITIES_PLACEHOLDER -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-icon">✨</div>
|
||
<div class="card-title">{{CAPABILITY_1_NAME}}</div>
|
||
</div>
|
||
<p>{{CAPABILITY_1_DESCRIPTION}}</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-icon">⚡</div>
|
||
<div class="card-title">{{CAPABILITY_2_NAME}}</div>
|
||
</div>
|
||
<p>{{CAPABILITY_2_DESCRIPTION}}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Quick Start -->
|
||
<section id="quick-start">
|
||
<h2>🚀 Quick Start</h2>
|
||
|
||
<h3>Prerequisites</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Tool</th>
|
||
<th>Purpose</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- PREREQUISITES_PLACEHOLDER -->
|
||
<tr>
|
||
<td><code>{{PREREQ_1_TOOL}}</code></td>
|
||
<td>{{PREREQ_1_PURPOSE}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Installation</h3>
|
||
<pre><code>{{INSTALLATION_COMMANDS}}</code></pre>
|
||
|
||
<h3>Basic Usage</h3>
|
||
<pre><code>{{BASIC_USAGE}}</code></pre>
|
||
</section>
|
||
|
||
<!-- Architecture -->
|
||
<section id="architecture">
|
||
<h2>🏗️ Architecture Overview</h2>
|
||
|
||
<h3>System Diagram</h3>
|
||
<div class="diagram">{{SYSTEM_DIAGRAM}}</div>
|
||
|
||
<h3>Technology Stack</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Layer</th>
|
||
<th>Technology</th>
|
||
<th>Purpose</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- TECH_STACK_PLACEHOLDER -->
|
||
<tr>
|
||
<td>{{TECH_LAYER}}</td>
|
||
<td><span class="badge badge-primary">{{TECH_NAME}}</span></td>
|
||
<td>{{TECH_PURPOSE}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Directory Structure</h3>
|
||
<pre><code>{{DIRECTORY_STRUCTURE}}</code></pre>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section id="features">
|
||
<h2>✨ Features</h2>
|
||
|
||
<!-- FEATURES_PLACEHOLDER -->
|
||
<div class="feature-item">
|
||
<div class="feature-icon">🔐</div>
|
||
<div class="feature-content">
|
||
<h4>{{FEATURE_NAME}}</h4>
|
||
<p>{{FEATURE_DESCRIPTION}}</p>
|
||
|
||
<details>
|
||
<summary>
|
||
🔧 Technical Details
|
||
<span class="tech-badge">For Engineers</span>
|
||
</summary>
|
||
<div>
|
||
<p>{{FEATURE_TECHNICAL_NOTES}}</p>
|
||
<p><strong>Key Files:</strong></p>
|
||
<ul>
|
||
<li><code>{{FEATURE_FILE_1}}</code></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- API Reference -->
|
||
<section id="api-reference">
|
||
<h2>🔌 API Reference</h2>
|
||
|
||
<div class="callout callout-info">
|
||
<div class="callout-title">ℹ️ About the API</div>
|
||
<p>This section is primarily for developers who need to integrate with or extend the application.</p>
|
||
</div>
|
||
|
||
<!-- API_ENDPOINTS_PLACEHOLDER -->
|
||
<h3>{{API_GROUP_NAME}}</h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Method</th>
|
||
<th>Endpoint</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="method method-get">GET</span></td>
|
||
<td><code>{{API_PATH}}</code></td>
|
||
<td>{{API_DESCRIPTION}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<details>
|
||
<summary>
|
||
📖 Request & Response Details
|
||
<span class="tech-badge">Technical</span>
|
||
</summary>
|
||
<div>
|
||
<h4>Request</h4>
|
||
<pre><code>{{API_REQUEST_EXAMPLE}}</code></pre>
|
||
|
||
<h4>Response</h4>
|
||
<pre><code>{{API_RESPONSE_EXAMPLE}}</code></pre>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
<!-- Components -->
|
||
<section id="components">
|
||
<h2>🧩 Component Catalog</h2>
|
||
|
||
<!-- COMPONENTS_PLACEHOLDER -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-icon">🧩</div>
|
||
<div class="card-title">{{COMPONENT_NAME}}</div>
|
||
</div>
|
||
<p>{{COMPONENT_DESCRIPTION}}</p>
|
||
<p><code>{{COMPONENT_PATH}}</code></p>
|
||
|
||
<details>
|
||
<summary>
|
||
🔧 Props & Usage
|
||
<span class="tech-badge">Technical</span>
|
||
</summary>
|
||
<div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Prop</th>
|
||
<th>Type</th>
|
||
<th>Required</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>{{PROP_NAME}}</code></td>
|
||
<td><code>{{PROP_TYPE}}</code></td>
|
||
<td>{{PROP_REQUIRED}}</td>
|
||
<td>{{PROP_DESCRIPTION}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4>Usage Example</h4>
|
||
<pre><code>{{COMPONENT_USAGE_EXAMPLE}}</code></pre>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Data Models -->
|
||
<section id="data-models">
|
||
<h2>💾 Data Models</h2>
|
||
|
||
<h3>Entity Relationship Diagram</h3>
|
||
<div class="diagram">{{ER_DIAGRAM}}</div>
|
||
|
||
<!-- DATA_MODELS_PLACEHOLDER -->
|
||
<h3>{{MODEL_NAME}}</h3>
|
||
<p><strong>What it represents:</strong> {{MODEL_DESCRIPTION}}</p>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Field</th>
|
||
<th>Type</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>{{FIELD_NAME}}</code></td>
|
||
<td><code>{{FIELD_TYPE}}</code></td>
|
||
<td>{{FIELD_DESCRIPTION}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- Glossary -->
|
||
<section id="glossary">
|
||
<h2>📖 Glossary</h2>
|
||
|
||
<div class="callout callout-tip">
|
||
<div class="callout-title">💡 Tip</div>
|
||
<p>This glossary explains technical terms in plain English. Perfect for non-technical stakeholders!</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<!-- GLOSSARY_PLACEHOLDER -->
|
||
<div class="glossary-term">
|
||
<span class="glossary-word">{{TERM}}</span>
|
||
<span class="glossary-definition">{{DEFINITION}}</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer style="margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); text-align: center;">
|
||
<p>Generated by <strong>Eureka Index</strong> · {{GENERATED_DATE}}</p>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// Mobile menu toggle
|
||
function toggleSidebar() {
|
||
document.getElementById('sidebar').classList.toggle('open');
|
||
}
|
||
|
||
// Active nav highlighting
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
if (scrollY >= sectionTop - 100) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href') === '#' + current) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Close sidebar when clicking a link (mobile)
|
||
navLinks.forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
if (window.innerWidth < 1025) {
|
||
document.getElementById('sidebar').classList.remove('open');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|