Implement a large number of changes, including overhauled styling and a settings page

This commit is contained in:
2026-03-24 11:16:22 +01:00
parent 44efc7818a
commit 169650c71b
8 changed files with 2633 additions and 1792 deletions
+19 -13
View File
@@ -2,41 +2,47 @@
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Persona Market</title>
<title>FakeGPT Market</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<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 class="market-shell card market-shell-simple">
<header class="market-header market-header-simple">
<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>
<p class="eyebrow">Shared personas</p>
<h1><span data-theme-name>FakeGPT</span> Market</h1>
<p class="subtitle">A plain list of personas other people decided to share.</p>
</div>
<div class="market-header-actions">
<button id="refreshMarket" class="secondary-action" type="button">Refresh listings</button>
<button id="refreshMarket" class="secondary-action" type="button">Refresh</button>
<a href="/settings" class="secondary-action">Settings</a>
<a href="/" class="secondary-action">Back to chat</a>
</div>
</header>
<div class="market-search">
<label for="marketSearch">Search personas</label>
<input id="marketSearch" type="search" placeholder="Search by name, creator, or description"/>
</div>
<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">