KrisHD_AI/public/market.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>
            <p class="subtitle">Find characters and personas for roleplay, then start with an explicit persona choice.</p>
        </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 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>

    <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">AI 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>
                            <p class="subtitle">Pick a character, choose your persona, and start roleplay.</p>
                        </div>
                        <button id="marketCreateAiCharacter" type="button" class="secondary-action">Create AI Character</button>
                    </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>
                            <p class="subtitle">Collect personas you can use as your identity in roleplay scenes.</p>
                        </div>
                        <button id="marketCreateUserPersona" type="button" class="secondary-action">Create User Persona</button>
                    </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="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>
                    <h4>Example dialogues</h4>
                    <p id="marketPreviewExampleDialogues"></p>
                </div>
            </div>
        </div>
        <div class="market-preview-actions">
            <label id="marketPreviewUserPersonaField" class="field market-preview-user-field hidden">
                <span>You in this roleplay</span>
                <select id="marketPreviewUserPersonaSelect"></select>
            </label>
            <button id="marketPreviewConfirm" type="button" class="primary-action">Take persona</button>
        </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>
<script src="market.js" defer></script>
</body>
</html>