Move persona editor into modal
This commit is contained in:
+57
-1
@@ -75,6 +75,20 @@
|
||||
<button id="newChat" class="secondary-action">New</button>
|
||||
</div>
|
||||
<div id="chatList" class="chat-list"></div>
|
||||
<div class="persona-panel">
|
||||
<div class="sidebar-header persona-header">
|
||||
<div>
|
||||
<p class="eyebrow">Roleplay</p>
|
||||
<h2>Personas</h2>
|
||||
</div>
|
||||
<div class="persona-header-actions">
|
||||
<button id="newPersona" class="secondary-action" type="button">New</button>
|
||||
<button id="clearPersona" class="secondary-action" type="button">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<p id="activePersonaStatus" class="status persona-status">No persona equipped.</p>
|
||||
<div id="personaList" class="persona-list"></div>
|
||||
</div>
|
||||
</aside>
|
||||
<section class="chat-main">
|
||||
<div class="chat-header">
|
||||
@@ -102,8 +116,50 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="personaModal" class="modal-overlay hidden">
|
||||
<div class="modal-card">
|
||||
<div class="modal-header">
|
||||
<h3 id="personaFormTitle">Create persona</h3>
|
||||
<button id="personaClose" type="button" class="icon-button">Close</button>
|
||||
</div>
|
||||
<form id="personaForm" class="persona-form">
|
||||
<label class="field">
|
||||
<span>Name</span>
|
||||
<input id="personaName" placeholder="Persona name" required/>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Pronouns</span>
|
||||
<input id="personaPronouns" placeholder="e.g. she/her, they/them"/>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Appearance</span>
|
||||
<textarea id="personaAppearance" rows="2" placeholder="Describe their look"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Background</span>
|
||||
<textarea id="personaBackground" rows="2" placeholder="Backstory or origins"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Details</span>
|
||||
<textarea id="personaDetails" rows="3"
|
||||
placeholder="Personality traits, voice, or quirks"></textarea>
|
||||
</label>
|
||||
<div class="custom-fields">
|
||||
<div class="custom-fields-header">
|
||||
<span>Custom traits</span>
|
||||
<button id="addCustomField" type="button" class="secondary-action">Add</button>
|
||||
</div>
|
||||
<div id="customFieldsList" class="custom-fields-list"></div>
|
||||
</div>
|
||||
<div class="persona-actions">
|
||||
<button id="personaSave" type="submit" class="primary-action">Save persona</button>
|
||||
<button id="personaCancel" type="button" class="secondary-action">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js" defer></script>
|
||||
<script src="script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user