<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="{{ generator }}" />
<link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAABeCAYAAAC5BeOaAAAACXBIWXMAAA3nAAAN5wGZFKomAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABN9JREFUeNrtnG9oVXUYxz/PvHObZrWWGsuwWkWT2uhVf/bCQlKMsj9vo39kFjoKIhAMkuiNBb7JysV60SRchCj4ohiVmo0MKVqQXg2WM2VabMNkc5tz9+nF+cVy7Xbv7j33/LvPF35wOefcc3773N/v+3ue55wzUVVM/qvCEBhYA2sysAbWwJoMrIGNoVKlvoCI3AvMB0ZU9VC5gJVSZ14ikgZuB46paqNZgSmaViAiVwK3OBsAWCAijwGDwElV/d2sIH+YC4F1wOPAXTlmxDngMPAlsFtVf0sUWVUtujmArwIjgBbQMsBOP/oSlZbyYZRWAB8DTxVzGuCEWcHlYFuBbUX2IwM0qGqfRQVTo3Vjlt0TwBfOSwEGgDZgP/DHtGO7kgS1aI918elMnjkELHPHpN229LTvNgDrge+AR5Pkr3547KIs2w+o6tEcP2gv8IFrliBM01CW7c0iUmNFmMLVB4zNsP1mYJ+I3GlgC/PnYWBPlt33AD3OSw1sAdrk0tRs5690n28QkY0iUmfVrfzDrvuA3cDiPA4fBTqBbarak1iyfoUXQD2wd5ap7C5gadJCLVX1vx7rRu9m4EGXqubSsItj95kV5Ae4EdgArAWqchw+BqxU1W8NbP6A/7mDkMmxWB4F7tCEPEwW5B2EX4HlwJEs+5cBTRZuFbZQHnTxbTrLIY0G1pvmtSJSW0BS0ZVld8rATk3f0yLykYisEJE5efwYVcCKLLtPJQWsHyNkHvC8awMi0o1XCjwCnPzXNWpEZB3QCsxUQzgPfG9RgTf6WoBun/ryhqq+ZVbgr74B3klSglCsFYznEZ/mUgfQqqrjs5gpS/KsSxSii8BxVb0Yaq0AWAq87ixhIs8awRCwE7h7lte6Hviawm6xz6YNAs9Eplbg7hrcileDXQTUAq8BdcBZ4GWXKPyiqpOzPHcK+AFoDirsBh5W1c9DrW79zyib8WZiAedZGcBInd66Cu1vnB6KuzGEa94U96ggHx2L0zWDSCG3Oo8dLPI83S4sWx4Q1AlgS2hRQZANuBrYgVe/LaW3poFVkbqDEEi66NUbFpdoxp1T1aFQU1pTMhYvA2sysAbWwJoMrIE1sCbfawXyItcitKDMDf2vUkap5qC+y/nQskNfHuN8iUdQOpl6vTMKGkBYo20ciiVYeZr51HAar0ASNfVSz226mUz8PLaa5ohCBWignyXxXLzm0I9Xaouixhgtug4cDljdTh9ejTSK2qo7GInv4vUmKfpZj7IKiUBUABdQ9tBOh2o4s8nqsZYgGFiTgTWwBtbkyZcijGzgOi7xPrAaiMLr9MMIu5jLK2EVYooesSIIl9gLPBERqABXoDzLOB1hdaD4IswLNFHBzxGdkUolC/W94NNaPzy2MsJWJ4yH84pT8WD/ogc4HlGw+7X9P/8xKR5g9TMmUdagHI6UBcBXwJOx9djLTtZKHRmuChXpBMo4f4ZV1SoJWJMlCAbWwJoMbGxqBQCylmtI0YJSXYLgKYPQox/SGxewfj2w8RDKp8CCEvY1g/C2trGpLMC6BzZO4b3eGYR5PaDbOZB8j51HU2BQvXF7f3ksXpOcDbjPZ8oCrLZzAvgkoP72UkVn+UQF9TzHGX5CWY2UxBYuoPxIhi1hPppptQJLEAysycAaWANrMrAGNun6G7tgGklbFFTHAAAAAElFTkSuQmCC">
<title>{{ project_name }}: CLI doc</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #fafafa;
color: #333;
line-height: 1.5;
}
.container {
max-width: 1200px;
margin: 0 auto;
min-height: 100vh;
padding: 20px;
}
.header {
background: white;
border: 1px solid #e1e1e1;
border-radius: 6px;
padding: 16px;
margin-bottom: 10px;
}
.search-container {;
display: flex;
gap: 8px;
align-items: center;
position: relative;
}
.search-input {
flex: 1;
padding: 8px 12px;
border: 1px solid #d1d1d1;
border-radius: 4px;
font-size: 14px;
}
.search-input:focus {
outline: none;
border-color: #007acc;
}
.btn {
padding: 8px 16px;
border: 1px solid #d1d1d1;
border-radius: 4px;
background: white;
font-size: 14px;
cursor: pointer;
}
.btn:hover {
background: #f5f5f5;
}
.btn-primary {
background: #007acc;
color: white;
border-color: #007acc;
}
.btn-primary:hover {
background: #005a9e;
}
.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
height: calc(100vh - 146px);
}
.column {
background: white;
border: 1px solid #e1e1e1;
border-radius: 6px;
overflow: hidden;
}
.column-header {
padding: 12px 16px;
background: #f8f8f8;
border-bottom: 1px solid #e1e1e1;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666;
}
.column-content {
padding: 16px;
height: calc(100% - 65px);
overflow-y: auto;
}
.info-section {
margin-bottom: 16px;
padding: 12px;
border: 1px solid #e8e8e8;
border-radius: 4px;
background: #fafafa;
}
.info-header {
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666;
margin-bottom: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.info-content {
font-size: 13px;
line-height: 1.4;
color: #555;
}
.info-brief {
font-style: italic;
color: #777;
}
.command-text {
flex: 1;
}
.command-signature {
font-family: 'Monaco', 'Courier New', monospace;
background: white;
padding: 8px;
border-radius: 3px;
border: 1px solid #e1e1e1;
margin: 8px 0;
font-size: 13px;
}
.argument-item {
margin: 6px 0;
padding: 8px;
background: white;
border: 1px solid #f0f0f0;
border-radius: 3px;
cursor: pointer;
}
.argument-item:hover {
border-color: #d1d1d1;
background: #f9f9f9;
}
.argument-name {
font-family: 'Monaco', 'Courier New', monospace;
font-weight: 600;
color: #d73a49;
font-size: 13px;
}
.argument-description {
color: #666;
font-size: 12px;
margin-top: 2px;
}
.option-header {
display: flex;
color: #aaa;
justify-content: space-between;
align-items: flex-start;
}
.option-main {
flex: 1;
}
.non-expanding-text {
padding-left: 1.5em;
}
.expand-triangle {
width: 16px;
height: 16px;
margin-right: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 12px;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.expand-triangle:hover {
color: #333;
}
.expand-triangle.expanded {
transform: rotate(90deg);
}
.tree-item {
padding: 8px 12px;
margin: 2px 0;
cursor: pointer;
border-radius: 4px;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 14px;
position: relative;
border: 1px solid transparent;
transition: all 0.15s ease;
display: flex;
align-items: center;
user-select: none;
}
.tree-item:hover {
background: #f0f0f0;
border-color: #d1d1d1;
}
.tree-item.selected {
background: #007acc;
color: white !important;
}
.tree-item.level-0 {
font-weight: 600;
margin-bottom: 4px;
}
.tree-item.level-1 {
margin-left: 16px;
color: #666;
}
.tree-item.level-2 {
margin-left: 32px;
color: #888;
font-size: 13px;
}
.tree-children {
display: none;
}
.tree-children.expanded {
display: block;
}
.hidden {
display: none;
}
.option-item {
padding: 12px;
margin: 4px 0;
/*border: 1px solid #f0f0f0;*/
/*border-radius: 4px;*/
}
.option-item:nth-child(even) {
background-color: #f2f2f2;
}
.option-item-expandable {
cursor: pointer;
transition: all 0.15s ease;
/*border: 1px solid #f0f0f0;*/
/*border-radius: 4px;*/
}
.option-item:hover {
border-color: #d1d1d1;
background: #e5e5e5;
}
.option-name {
font-family: 'Monaco', 'Courier New', monospace;
font-weight: 600;
font-size: 14px;
color: #007acc;
}
.option-description {
color: #666;
font-size: 13px;
margin-top: 4px;
}
.option-full-doc {
margin-top: 8px;
/*border-radius: 4px;*/
font-size: 13px;
display: none;
}
.option-full-doc.expanded {
display: block;
}
.option-short {
color: #ac7acc;
}
.no-selection {
text-align: center;
color: #999;
font-style: italic;
margin-top: 40px;
}
.usage-option {
color: #ac7acc;
}
.usage-argument {
color: #d73a49;;
}
.rich-text ul {
margin: 0;
padding: 0 0 0 1em;
}
.rt-config {
font-weight: bold;
}
.rt-config-value {
font-style: italic;
}
.version {
color: #999;
font-family: 'Monaco', 'Courier New', monospace;
text-align: right;
font-size: 16px;
}
.search-results-widget {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #d1d1d1;
border-radius: 4px;
padding: 8px 12px;
margin-top: 4px;
display: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
z-index: 1000;
}
.search-results-widget.visible {
display: flex;
align-items: center;
gap: 8px;
}
.search-counter {
font-size: 12px;
color: #666;
font-weight: 500;
min-width: 30px;
}
.search-nav-buttons {
display: flex;
gap: 2px;
}
.search-nav-btn {
padding: 4px 6px;
border: 1px solid #d1d1d1;
border-radius: 3px;
background: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.search-nav-btn:hover:not(:disabled) {
background: #f5f5f5;
}
.search-nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.search-highlight-command {
background-color: #ffccaa !important;
}
</style>
</head>
<body onload="init()">
<div class="container">
<div class="header">
<div class="search-container">
<input type="text" class="search-input" placeholder="Search commands..." id="searchInput" oninput="resetSearch()">
<button class="btn btn-primary" onclick="performSearch()">Search</button>
<div class="search-results-widget" id="searchWidget">
<div class="search-counter" id="searchCounter">1/4</div>
<div class="search-nav-buttons">
<button class="search-nav-btn" id="searchPrev" onclick="navigateSearch(-1)" title="Previous result">↑</button>
<button class="search-nav-btn" id="searchNext" onclick="navigateSearch(1)" title="Next result">↓</button>
<button class="search-nav-btn" onclick="resetSearch()" title="Clear search">×</button>
</div>
</div>
</div>
</div>
<div class="version">
{{ version }}
</div>
<div class="main-content">
<div class="column">
<div class="column-header">Commands</div>
<div class="column-content" id="commandTree">
{{ command | safe }}
</div>
</div>
<div class="column">
<div class="column-header">Options</div>
<div class="column-content" id="optionsPanel">
<div class="info-section">
<div class="info-header">
Command Info
</div>
<div class="info-content" id="commandInfo">
<div class="info-brief">Git is a distributed version control system</div>
<div class="command-signature">git [--version] [--help] [command]</div>
<div style="margin-top: 8px;">
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
</div>
</div>
</div>
<div id="argumentsInfo"></div>
<div id="categoryList"></div>
</div>
</div>
</div>
</div>
<script>
const commandData = {{ command_json | safe }};
let searchResults = null;
let searchIndex = 0;
let currentCommand = "c0";
{% include "script.js" %}
</script>
</body>
</html>