79 lines
3.1 KiB
HTML
79 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Persona Market</title>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
<body>
|
|
<div class="market-shell card">
|
|
<header class="market-header">
|
|
<div>
|
|
<p class="eyebrow">Community</p>
|
|
<h1>Persona Market</h1>
|
|
<p class="subtitle">Browse shared personas and choose who should embody them.</p>
|
|
<div class="market-search">
|
|
<label for="marketSearch">Search personas</label>
|
|
<input id="marketSearch" type="search" placeholder="Search by name, creator, or details"/>
|
|
</div>
|
|
</div>
|
|
<div class="market-header-actions">
|
|
<button id="refreshMarket" class="secondary-action" type="button">Refresh listings</button>
|
|
<a href="/" class="secondary-action">Back to chat</a>
|
|
</div>
|
|
</header>
|
|
<p id="marketStatus" class="status persona-status">Loading market personas...</p>
|
|
<div class="persona-market-columns market-page-columns">
|
|
<div class="persona-market-column">
|
|
<h3>AI personas</h3>
|
|
<p class="persona-guidance">These shape how the assistant speaks and behaves.</p>
|
|
<div id="marketPersonaList" class="persona-list"></div>
|
|
</div>
|
|
<div class="persona-market-column">
|
|
<h3>User personas</h3>
|
|
<p class="persona-guidance">These describe how the assistant should portray you.</p>
|
|
<div id="marketUserPersonaList" class="persona-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="marketPreviewModal" class="modal-overlay hidden">
|
|
<div class="modal-card market-preview-card">
|
|
<div class="modal-header">
|
|
<div>
|
|
<p class="eyebrow">Persona preview</p>
|
|
<h3 id="marketPreviewName">Persona details</h3>
|
|
</div>
|
|
<button id="marketPreviewClose" type="button" class="icon-button">Close</button>
|
|
</div>
|
|
<div class="market-preview-body">
|
|
<p id="marketPreviewMeta" class="persona-guidance"></p>
|
|
<div class="market-preview-details">
|
|
<div>
|
|
<h4>Pronouns</h4>
|
|
<p id="marketPreviewPronouns"></p>
|
|
</div>
|
|
<div>
|
|
<h4>Appearance</h4>
|
|
<p id="marketPreviewAppearance"></p>
|
|
</div>
|
|
<div>
|
|
<h4>Background</h4>
|
|
<p id="marketPreviewBackground"></p>
|
|
</div>
|
|
<div>
|
|
<h4>Details</h4>
|
|
<p id="marketPreviewDetails"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="market-preview-actions">
|
|
<button id="marketPreviewConfirm" type="button" class="primary-action">Take persona</button>
|
|
<button id="marketPreviewCancel" type="button" class="secondary-action">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="market.js" defer></script>
|
|
</body>
|
|
</html>
|