243 lines
12 KiB
HTML
243 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<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 market-shell-simple">
|
|
<header class="market-header market-header-simple">
|
|
<div>
|
|
<p class="eyebrow">Shared personas</p>
|
|
<h1><span data-theme-name>FakeGPT</span> Market</h1>
|
|
</div>
|
|
<div class="market-header-actions">
|
|
<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</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>
|
|
|
|
<section class="settings-layout market-settings-layout">
|
|
<aside class="settings-nav" aria-label="Market sections">
|
|
<button class="settings-nav-item active" type="button" data-market-view="ai-characters">Characters</button>
|
|
<button class="settings-nav-item" type="button" data-market-view="user-personas">User personas</button>
|
|
</aside>
|
|
|
|
<div class="settings-content">
|
|
<section class="settings-view active" data-market-panel="ai-characters">
|
|
<div class="settings-panel">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Discover</p>
|
|
<h2>AI Characters</h2>
|
|
</div>
|
|
<div class="market-section-actions">
|
|
<label class="market-sort-control" for="marketAssistantSort">
|
|
<span>Sort</span>
|
|
<select id="marketAssistantSort">
|
|
<option value="best">Best</option>
|
|
<option value="newest">Newest</option>
|
|
<option value="most_favorited">Most Favorited</option>
|
|
<option value="most_popular">Most Popular</option>
|
|
<option value="top_rated">Top Rated</option>
|
|
<option value="alphabetical">A-Z</option>
|
|
</select>
|
|
</label>
|
|
<button id="marketCreateAiCharacter" type="button" class="secondary-action">Create AI Character</button>
|
|
</div>
|
|
</div>
|
|
<div id="marketPersonaList" class="persona-list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-view" data-market-panel="user-personas">
|
|
<div class="settings-panel">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Discover</p>
|
|
<h2>User Personas</h2>
|
|
</div>
|
|
<div class="market-section-actions">
|
|
<label class="market-sort-control" for="marketUserSort">
|
|
<span>Sort</span>
|
|
<select id="marketUserSort">
|
|
<option value="best">Best</option>
|
|
<option value="newest">Newest</option>
|
|
<option value="most_favorited">Most Favorited</option>
|
|
<option value="most_popular">Most Popular</option>
|
|
<option value="top_rated">Top Rated</option>
|
|
<option value="alphabetical">A-Z</option>
|
|
</select>
|
|
</label>
|
|
<button id="marketCreateUserPersona" type="button" class="secondary-action">Create User Persona</button>
|
|
</div>
|
|
</div>
|
|
<div id="marketUserPersonaList" class="persona-list"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</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="marketPreviewTitle">Persona details</h3>
|
|
<h4 id="marketPreviewName" class="market-preview-name">Persona details</h4>
|
|
<p id="marketPreviewIntro" class="subtitle">Review this persona and choose how you want to use it.</p>
|
|
</div>
|
|
<button id="marketPreviewClose" type="button" class="icon-button">Close</button>
|
|
</div>
|
|
<div id="marketPreviewBody" 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>
|
|
<h4>Example dialogues</h4>
|
|
<p id="marketPreviewExampleDialogues"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="market-preview-actions">
|
|
<div id="marketPreviewStepOne" class="roleplay-starter-page hidden">
|
|
<label id="marketPreviewUserPersonaField" class="field market-preview-user-field hidden">
|
|
<span>You in this roleplay</span>
|
|
<select id="marketPreviewUserPersonaSelect"></select>
|
|
</label>
|
|
</div>
|
|
<div id="marketPreviewStepTwo" class="roleplay-starter-page hidden">
|
|
<label id="marketPreviewScenarioField" class="field market-preview-scenario-field">
|
|
<span>Scenario (optional)</span>
|
|
<textarea id="marketPreviewScenario" rows="4" placeholder="Describe the opening scene you want. Leave it empty and the AI Character will invent its own scenario."></textarea>
|
|
</label>
|
|
<p class="subtitle">Leave this empty if you want the AI Character to invent the scenario on its own. No character limit.</p>
|
|
</div>
|
|
<div class="market-preview-footer">
|
|
<button id="marketPreviewConfirm" type="button" class="primary-action">Take persona</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="marketPersonaModal" class="modal-overlay hidden">
|
|
<div class="modal-card persona-modal-card">
|
|
<div class="modal-header">
|
|
<div class="persona-modal-heading">
|
|
<p class="eyebrow">AI Character editor</p>
|
|
<h3 id="marketPersonaFormTitle">Create AI Character</h3>
|
|
</div>
|
|
<button id="marketPersonaClose" type="button" class="icon-button">Close</button>
|
|
</div>
|
|
<form id="marketPersonaForm" class="persona-form">
|
|
<div class="persona-form-intro">
|
|
<p class="persona-helper">Create or update your AI Characters for roleplay chats and marketplace publishing.</p>
|
|
</div>
|
|
<p id="marketPersonaFormNotice" class="status hidden"></p>
|
|
<div class="persona-form-grid">
|
|
<label class="field">
|
|
<span>Character name</span>
|
|
<input id="marketPersonaName" placeholder="Character name" required/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Pronouns</span>
|
|
<input id="marketPersonaPronouns" placeholder="e.g. she/her, they/them"/>
|
|
</label>
|
|
<label class="field field-wide">
|
|
<span>Appearance</span>
|
|
<textarea id="marketPersonaAppearance" rows="3" placeholder="Describe their look"></textarea>
|
|
</label>
|
|
<label class="field field-wide">
|
|
<span>Background</span>
|
|
<textarea id="marketPersonaBackground" rows="3" placeholder="Backstory, history, role, or origins"></textarea>
|
|
</label>
|
|
<label class="field field-wide">
|
|
<span>Details</span>
|
|
<textarea id="marketPersonaDetails" rows="4" placeholder="Personality traits, voice, goals, quirks, boundaries, style"></textarea>
|
|
</label>
|
|
<label class="field field-wide">
|
|
<span>Example dialogues</span>
|
|
<div class="dialogue-format-card" aria-hidden="true">
|
|
<p class="dialogue-format-label">Format</p>
|
|
<pre class="dialogue-format-example">{{character}}: Hello, my name is marc
|
|
{{user}}: Hi, Marc!
|
|
{{character}}: Nice to meet you</pre>
|
|
</div>
|
|
<textarea id="marketPersonaExampleDialogues" rows="5" placeholder="Write example exchanges that define the character's tone, phrasing, pacing, and personality."></textarea>
|
|
</label>
|
|
</div>
|
|
<div class="persona-actions">
|
|
<button id="marketPersonaSave" type="submit" class="primary-action">Save AI Character</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="marketActivityOverlay" class="chat-activity-overlay hidden" role="status" aria-live="polite" aria-atomic="true">
|
|
<div class="chat-activity-card">
|
|
<div class="chat-activity-mark" aria-hidden="true">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<p id="marketActivityEyebrow" class="eyebrow">Please wait</p>
|
|
<h3 id="marketActivityTitle">Opening roleplay</h3>
|
|
<p id="marketActivityDetail" class="subtitle">The AI character is preparing the first message.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="marketPopupModal" class="modal-overlay hidden">
|
|
<div class="modal-card popup-card" role="dialog" aria-modal="true" aria-labelledby="marketPopupTitle" aria-describedby="marketPopupDescription">
|
|
<div class="modal-header">
|
|
<div class="persona-modal-heading">
|
|
<p id="marketPopupEyebrow" class="eyebrow">Action</p>
|
|
<h3 id="marketPopupTitle">Confirm action</h3>
|
|
</div>
|
|
<button id="marketPopupClose" type="button" class="icon-button">Close</button>
|
|
</div>
|
|
<div class="popup-content">
|
|
<p id="marketPopupDescription" class="subtitle">Please confirm this action.</p>
|
|
<label id="marketPopupField" class="field">
|
|
<span id="marketPopupInputLabel">Value</span>
|
|
<input id="marketPopupInput" type="text" autocomplete="off"/>
|
|
</label>
|
|
</div>
|
|
<div class="popup-actions">
|
|
<button id="marketPopupCancel" type="button" class="secondary-action">Cancel</button>
|
|
<button id="marketPopupConfirm" type="button">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="market.js" defer></script>
|
|
</body>
|
|
</html>
|