index.html•2.85 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TPC Server</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main-container">
<section id="search-section">
<h2>Search</h2>
<input data-component="input"
data-type="search"
data-label="Search plans and thoughts"
id="search-input"
data-placeholder="Search plans and thoughts...">
<button data-component="button" data-variant="secondary" id="clear-search">Clear</button>
<div id="search-results" style="display: none;"></div>
</section>
<section id="filter-section">
<h2>Filter by Tags</h2>
<input data-component="input"
data-type="text"
data-label="Filter by Tags"
id="tag-filter"
data-placeholder="Enter tags (e.g., tag1 or any:tag1,tag2 or all:tag1,tag2)">
<button data-component="button" data-variant="secondary" id="clear-filter">Clear Filter</button>
</section>
<section id="plans-section">
<h2>Plans List</h2>
<div id="plans-list">
<!-- Plans will be populated here as cards -->
</div>
</section>
<section id="thoughts-section">
<h2>Thoughts List</h2>
<div id="thoughts-list">
<!-- Thoughts will be populated here as cards -->
</div>
</section>
</main>
<div id="detail-panel" style="display: none;">
<h3 id="detail-type"></h3>
<h2 id="detail-title"></h2>
<div id="detail-content" class="description markdown-body"></div>
<p id="detail-status" style="display: none;"><strong>Status:</strong> <span></span></p>
<h3>Tags</h3>
<div id="tags-list"></div>
<input data-component="input"
data-type="text"
data-label="Add new tag"
id="add-tag-input"
data-placeholder="Add new tag">
<button data-component="button" data-variant="primary" id="add-tag-btn">Add Tag</button>
<h3>Changelog</h3>
<ul id="changelog-list"></ul>
<h3>Linked Thoughts</h3>
<ul id="linked-thoughts-list"></ul>
<button data-component="button" data-variant="primary" id="back-button">Back</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="components/Button.js"></script>
<script src="components/Input.js"></script>
<script src="components/Card.js"></script>
<script src="index.js"></script>
</body>
</html>