224 lines
11 KiB
HTML
224 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Settings</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="settings-shell card">
|
|
<header class="market-header market-header-simple">
|
|
<div>
|
|
<p class="eyebrow">Settings</p>
|
|
<h1>Preferences</h1>
|
|
</div>
|
|
<div class="market-header-actions">
|
|
<a href="/" class="secondary-action">Back to chat</a>
|
|
<a href="/market" class="secondary-action">Market</a>
|
|
</div>
|
|
</header>
|
|
|
|
<p id="settingsNotice" class="status">Loading settings...</p>
|
|
|
|
<section class="settings-layout">
|
|
<aside class="settings-nav" aria-label="Settings sections">
|
|
<button class="settings-nav-item active" type="button" data-settings-view="personal">Account</button>
|
|
<button class="settings-nav-item" type="button" data-settings-view="my-roleplay-companions">Personas</button>
|
|
<button class="settings-nav-item" type="button" data-settings-view="design">Appearance</button>
|
|
</aside>
|
|
|
|
<div class="settings-content">
|
|
<section class="settings-view active" data-settings-panel="personal">
|
|
<div class="settings-panel">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Profile</p>
|
|
<h2>Username</h2>
|
|
</div>
|
|
</div>
|
|
<form id="usernameForm" class="settings-form-stack">
|
|
<label class="field">
|
|
<span>Current username</span>
|
|
<input id="currentUsername" readonly/>
|
|
</label>
|
|
<label class="field">
|
|
<span>New username</span>
|
|
<input id="newUsername" autocomplete="username"/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Current password</span>
|
|
<input id="usernamePassword" type="password" autocomplete="current-password"/>
|
|
</label>
|
|
<button id="saveUsername" type="submit">Save username</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="settings-panel">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Security</p>
|
|
<h2>Password</h2>
|
|
</div>
|
|
</div>
|
|
<form id="passwordForm" class="settings-form-stack">
|
|
<label class="field">
|
|
<span>Current password</span>
|
|
<input id="currentPassword" type="password" autocomplete="current-password"/>
|
|
</label>
|
|
<label class="field">
|
|
<span>New password</span>
|
|
<input id="newPassword" type="password" autocomplete="new-password"/>
|
|
</label>
|
|
<label class="field">
|
|
<span>Repeat new password</span>
|
|
<input id="repeatPassword" type="password" autocomplete="new-password"/>
|
|
</label>
|
|
<button id="savePassword" type="submit">Save password</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-view" data-settings-panel="my-roleplay-companions">
|
|
<div class="settings-panel">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Create & manage</p>
|
|
<h2>My personas</h2>
|
|
</div>
|
|
<div class="market-header-actions action-pair">
|
|
<button id="createAiCharacter" type="button" class="secondary-action">Create AI Character</button>
|
|
<button id="createUserPersona" type="button" class="secondary-action">Create User Persona</button>
|
|
</div>
|
|
</div>
|
|
<h3>AI Characters</h3>
|
|
<div id="settingsAiCharacterList" class="persona-list"></div>
|
|
<h3>User Personas</h3>
|
|
<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">
|
|
<div>
|
|
<p class="eyebrow">Appearance</p>
|
|
<h2>Theme</h2>
|
|
<p class="subtitle">Themes are only changed here.</p>
|
|
</div>
|
|
</div>
|
|
<div class="settings-theme-row">
|
|
<label class="field">
|
|
<span>Theme</span>
|
|
<select id="settingsThemeSelect">
|
|
<option value="fakegpt">FakeGPT</option>
|
|
<option value="fraud">Fraud</option>
|
|
<option value="germini">Germini</option>
|
|
<option value="slopilot">Slopilot</option>
|
|
<option value="beta-ai">Beta AI</option>
|
|
<option value="confusity">Confusity</option>
|
|
</select>
|
|
</label>
|
|
<label class="field">
|
|
<span>Workspace mode</span>
|
|
<select id="workspaceModeSelect">
|
|
<option value="basic">Basic</option>
|
|
<option value="advanced">Advanced</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</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>
|
|
|
|
<div id="settingsPopupModal" class="modal-overlay hidden">
|
|
<div class="modal-card popup-card" role="dialog" aria-modal="true" aria-labelledby="settingsPopupTitle" aria-describedby="settingsPopupDescription">
|
|
<div class="modal-header">
|
|
<div class="persona-modal-heading">
|
|
<p id="settingsPopupEyebrow" class="eyebrow">Action</p>
|
|
<h3 id="settingsPopupTitle">Confirm action</h3>
|
|
</div>
|
|
<button id="settingsPopupClose" type="button" class="icon-button">Close</button>
|
|
</div>
|
|
<div class="popup-content">
|
|
<p id="settingsPopupDescription" class="subtitle">Please confirm this action.</p>
|
|
<label id="settingsPopupField" class="field">
|
|
<span id="settingsPopupInputLabel">Value</span>
|
|
<input id="settingsPopupInput" type="text" autocomplete="off"/>
|
|
</label>
|
|
</div>
|
|
<div class="popup-actions">
|
|
<button id="settingsPopupCancel" type="button" class="secondary-action">Cancel</button>
|
|
<button id="settingsPopupConfirm" type="button">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="settings.js" defer></script>
|
|
</body>
|
|
</html>
|