Frederik Spirgi
304 lines
16 KiB
HTML
304 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<meta charset="UTF-8"/>
|
|
<title>Elsewhere 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">
|
|
<script src="/app/theme-bootstrap.js?v=20260909-account-controls"></script>
|
|
<link rel="stylesheet" href="/style.css?v=20260909-account-controls"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/shell.css?v=20260909-account-controls">
|
|
</head>
|
|
<body class="site-page settings-page" data-theme="fakegpt" data-theme-mode="light">
|
|
<!-- site-header -->
|
|
<main id="main" class="settings-shell page-content">
|
|
<header class="market-header market-header-simple">
|
|
<div>
|
|
<p class="eyebrow">Elsewhere settings</p>
|
|
<h1>Preferences</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<p id="settingsNotice" class="status">Loading settings...</p>
|
|
|
|
<section class="settings-layout">
|
|
<aside class="settings-nav" aria-label="Settings sections" role="tablist">
|
|
<button class="settings-nav-item active" type="button" role="tab" aria-selected="true" data-settings-view="personal">Account</button>
|
|
|
|
<button class="settings-nav-item" type="button" role="tab" aria-selected="false" data-settings-view="design">Appearance</button>
|
|
<button id="diagnosticsNavItem" class="settings-nav-item hidden" type="button" role="tab" aria-selected="false" data-settings-view="diagnostics">Diagnostics</button>
|
|
</aside>
|
|
|
|
<div class="settings-content">
|
|
<section class="settings-view active" role="tabpanel" 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>
|
|
|
|
<div class="settings-panel">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Account data</p>
|
|
<h2>Export and sessions</h2>
|
|
<p class="subtitle">Download your account data or sign out every active browser session.</p>
|
|
</div>
|
|
</div>
|
|
<div class="persona-actions">
|
|
<button id="exportAccount" type="button" class="secondary-action">Export account</button>
|
|
<button id="logoutAllSessions" type="button" class="secondary-action">Logout all sessions</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-panel">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Danger zone</p>
|
|
<h2>Delete account</h2>
|
|
<p class="subtitle">This permanently removes your account, chats, personas, templates, and market activity.</p>
|
|
</div>
|
|
</div>
|
|
<div class="persona-actions">
|
|
<button id="deleteAccount" type="button" class="secondary-action danger">Delete account</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="settings-view" role="tabpanel" aria-hidden="true" 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" role="tabpanel" aria-hidden="true" data-settings-panel="design">
|
|
<div class="settings-panel settings-panel-compact">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Appearance</p>
|
|
<h2>Make yourself at home</h2>
|
|
<p class="subtitle">Choose a style for your conversation space.</p>
|
|
</div>
|
|
</div>
|
|
<div class="settings-theme-row">
|
|
<label class="field">
|
|
<span>Style</span>
|
|
<select id="settingsThemeSelect">
|
|
<option value="fakegpt">Grove</option>
|
|
<option value="fraud">Parchment</option>
|
|
<option value="germini">Aurora</option>
|
|
<option value="slopilot">Current</option>
|
|
<option value="beta-ai">Iris</option>
|
|
<option value="confusity">Graphite</option>
|
|
</select>
|
|
</label>
|
|
<label class="field">
|
|
<span>Light or dark</span>
|
|
<select id="themeModeSelect">
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</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>
|
|
|
|
<section class="settings-view" role="tabpanel" aria-hidden="true" data-settings-panel="diagnostics">
|
|
<div class="settings-panel">
|
|
<div class="settings-section-header">
|
|
<div>
|
|
<p class="eyebrow">Admin</p>
|
|
<h2>Model diagnostics</h2>
|
|
<p class="subtitle">Backend status, model inventory, latency, and configuration warnings.</p>
|
|
</div>
|
|
<button id="refreshDiagnostics" type="button" class="secondary-action">Refresh</button>
|
|
</div>
|
|
<div class="diagnostics-grid">
|
|
<div class="diagnostics-card">
|
|
<span>Status</span>
|
|
<strong id="diagnosticsStatus">Unknown</strong>
|
|
<p id="diagnosticsBackend" class="subtitle">Backend unavailable</p>
|
|
</div>
|
|
<div class="diagnostics-card">
|
|
<span>Latency</span>
|
|
<strong id="diagnosticsLatency">n/a</strong>
|
|
<p id="diagnosticsCheckedAt" class="subtitle">Not checked yet</p>
|
|
</div>
|
|
<div class="diagnostics-card">
|
|
<span>Models</span>
|
|
<strong id="diagnosticsModelCount">0</strong>
|
|
<p id="diagnosticsCacheAge" class="subtitle">Cache age n/a</p>
|
|
</div>
|
|
<div class="diagnostics-card">
|
|
<span>Active requests</span>
|
|
<strong id="diagnosticsActiveRequests">0</strong>
|
|
<p id="diagnosticsLastFailure" class="subtitle">No recorded failures</p>
|
|
</div>
|
|
</div>
|
|
<div class="diagnostics-columns">
|
|
<div>
|
|
<h3>Available models</h3>
|
|
<div id="diagnosticsModels" class="diagnostics-list"></div>
|
|
</div>
|
|
<div>
|
|
<h3>Config warnings</h3>
|
|
<div id="diagnosticsWarnings" class="diagnostics-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<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 type="module" src="/settings.js?v=20260909-account-controls"></script>
|
|
<script type="module" src="/app/workspaceNavigation.js?v=20260909-account-controls"></script></body>
|
|
</html>
|