Revamp overall theme
This commit is contained in:
+92
-2
@@ -15,11 +15,11 @@
|
||||
<div>
|
||||
<p class="eyebrow">Settings</p>
|
||||
<h1>Preferences</h1>
|
||||
<p class="subtitle">Manage account details and appearance.</p>
|
||||
<p class="subtitle">Manage your account, AI Characters, user personas, and appearance.</p>
|
||||
</div>
|
||||
<div class="market-header-actions">
|
||||
<a href="/" class="secondary-action">Back to chat</a>
|
||||
<a href="/market" class="secondary-action">Persona Market</a>
|
||||
<a href="/market" class="secondary-action">Market</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -28,6 +28,8 @@
|
||||
<section class="settings-layout">
|
||||
<aside class="settings-nav" aria-label="Settings sections">
|
||||
<button class="settings-nav-item active" type="button" data-settings-view="personal">Personal</button>
|
||||
<button class="settings-nav-item" type="button" data-settings-view="my-ai-characters">My AI Characters</button>
|
||||
<button class="settings-nav-item" type="button" data-settings-view="my-personas">My Personas</button>
|
||||
<button class="settings-nav-item" type="button" data-settings-view="design">Design</button>
|
||||
</aside>
|
||||
|
||||
@@ -82,6 +84,34 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-view" data-settings-panel="my-ai-characters">
|
||||
<div class="settings-panel">
|
||||
<div class="settings-section-header">
|
||||
<div>
|
||||
<p class="eyebrow">Manage</p>
|
||||
<h2>My AI Characters</h2>
|
||||
<p class="subtitle">Create, edit, publish, and delete your AI Characters.</p>
|
||||
</div>
|
||||
<button id="createAiCharacter" type="button" class="secondary-action">Create persona</button>
|
||||
</div>
|
||||
<div id="settingsAiCharacterList" class="persona-list"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-view" data-settings-panel="my-personas">
|
||||
<div class="settings-panel">
|
||||
<div class="settings-section-header">
|
||||
<div>
|
||||
<p class="eyebrow">Manage</p>
|
||||
<h2>My Personas</h2>
|
||||
<p class="subtitle">Create and manage the user personas you can speak as in roleplay chats.</p>
|
||||
</div>
|
||||
<button id="createUserPersona" type="button" class="secondary-action">Create persona</button>
|
||||
</div>
|
||||
<div id="settingsUserPersonaList" class="persona-list"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-view" data-settings-panel="design">
|
||||
<div class="settings-panel settings-panel-compact">
|
||||
<div class="settings-section-header">
|
||||
@@ -109,6 +139,66 @@
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="settingsPersonaModal" class="modal-overlay hidden">
|
||||
<div class="modal-card persona-modal-card">
|
||||
<div class="modal-header">
|
||||
<div class="persona-modal-heading">
|
||||
<p class="eyebrow">Persona editor</p>
|
||||
<h3 id="settingsPersonaFormTitle">Create persona</h3>
|
||||
</div>
|
||||
<button id="settingsPersonaClose" type="button" class="icon-button">Close</button>
|
||||
</div>
|
||||
<form id="settingsPersonaForm" class="persona-form">
|
||||
<div class="persona-form-intro">
|
||||
<p id="settingsPersonaHelper" class="persona-helper">Create a persona for roleplay chats.</p>
|
||||
</div>
|
||||
<p id="settingsPersonaFormNotice" class="status hidden"></p>
|
||||
<div class="persona-form-grid">
|
||||
<label class="field field-wide">
|
||||
<span>Persona for</span>
|
||||
<select id="settingsPersonaType">
|
||||
<option value="assistant">AI Character</option>
|
||||
<option value="user">Your persona</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Name</span>
|
||||
<input id="settingsPersonaName" placeholder="Persona name" required/>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Pronouns</span>
|
||||
<input id="settingsPersonaPronouns" placeholder="e.g. she/her, they/them"/>
|
||||
</label>
|
||||
<label class="field field-wide">
|
||||
<span>Appearance</span>
|
||||
<textarea id="settingsPersonaAppearance" rows="3" placeholder="Describe their look"></textarea>
|
||||
</label>
|
||||
<label class="field field-wide">
|
||||
<span>Background</span>
|
||||
<textarea id="settingsPersonaBackground" rows="3" placeholder="Backstory, history, role, or origins"></textarea>
|
||||
</label>
|
||||
<label class="field field-wide">
|
||||
<span>Details</span>
|
||||
<textarea id="settingsPersonaDetails" rows="4" placeholder="Personality traits, voice, goals, quirks, boundaries, style"></textarea>
|
||||
</label>
|
||||
<label id="settingsPersonaExamplesField" class="field field-wide hidden">
|
||||
<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="settingsPersonaExampleDialogues" 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="settingsPersonaSave" type="submit" class="primary-action">Save persona</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script src="settings.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user