chuan
14e8087aac
- Implemented a new web interface for previewing designs, allowing users to search and filter by category. - Created `app.js` to handle state management, event binding, and rendering of design records. - Developed `index.html` as the main structure for the design gallery, including search input and design list. - Added `styles.css` for styling the design gallery and ensuring a responsive layout. - Updated Rust backend to support site generation, including new commands for building and serving the site. - Refactored catalog parsing to support new data structure for design entries. - Enhanced the sync process to collect site records and generate appropriate URLs for previews. - Introduced a new serving mechanism for the generated site, allowing local previews of designs.
55 lines
2.3 KiB
HTML
55 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>design preview</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<aside class="sidebar">
|
|
<div class="eyebrow">Quick Preview</div>
|
|
<h1 class="page-title">Design Gallery</h1>
|
|
<p class="page-copy">
|
|
Fast local preview for every generated design. Search, filter by category,
|
|
then jump between light preview, dark preview, and raw DESIGN.md.
|
|
</p>
|
|
<input id="search" class="search-input" type="search" placeholder="Search designs or categories">
|
|
<div id="chips" class="chip-row"></div>
|
|
<div id="design-list" class="design-list"></div>
|
|
</aside>
|
|
|
|
<main class="content">
|
|
<section class="hero-card">
|
|
<div class="hero-copy">
|
|
<div class="eyebrow">Selected Design</div>
|
|
<h2 id="hero-title" class="hero-title">Loading…</h2>
|
|
<p id="hero-sub" class="hero-sub">Preparing local preview data.</p>
|
|
<p id="hero-brief" class="hero-brief">
|
|
Generated files are linked directly from the local <code>designs/<slug>/</code> directory.
|
|
</p>
|
|
</div>
|
|
<div class="hero-actions">
|
|
<button id="action-light" class="action-button action-button-primary" type="button">Light Preview</button>
|
|
<button id="action-dark" class="action-button" type="button">Dark Preview</button>
|
|
<a id="action-md" class="action-button action-link" href="#" target="_blank" rel="noopener noreferrer">Open DESIGN.md</a>
|
|
<a id="action-source" class="action-button action-link" href="#" target="_blank" rel="noopener noreferrer">Open Source</a>
|
|
<span id="action-status" class="status-pill">Local Preview Ready</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="preview-card">
|
|
<div class="preview-bar">
|
|
<span id="preview-label" class="preview-label">Preview</span>
|
|
<a id="preview-path" class="preview-link" href="#" target="_blank" rel="noopener noreferrer">-</a>
|
|
</div>
|
|
<iframe id="preview-frame" class="preview-frame" title="design preview"></iframe>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|