mirror of
https://github.com/sune-org/sune.git
synced 2026-10-29 13:04:51 +00:00
multipleof4andClaude Opus 5.5
a02f326f7b
Masking with -webkit-text-security didn't help: Chrome on Android flags those fields as custom passwords and still hides Copy. Key fields are back to type=password with the type toggle, and each key label now has an inline copy icon that copies the value straight from the field, masked or not. The eye icon fix stays. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
142 lines
24 KiB
HTML
142 lines
24 KiB
HTML
<div id="threadPopover" class="menu-card hidden">
|
||
<button data-action="pin" class="menu-item"><i data-lucide="pin" class="h-4 w-4"></i><span>Pin to top</span></button>
|
||
<button data-action="rename" class="menu-item"><i data-lucide="edit-3" class="h-4 w-4"></i><span>Rename</span></button>
|
||
<button data-action="duplicate" class="menu-item"><i data-lucide="copy" class="h-4 w-4"></i><span>Duplicate</span></button>
|
||
<button data-action="copy_path" class="menu-item"><i data-lucide="link" class="h-4 w-4"></i><span>Copy Path (GH)</span></button>
|
||
<button data-action="export" class="menu-item"><i data-lucide="download" class="h-4 w-4"></i><span>Export thread (.json)</span></button>
|
||
<button data-action="delete" class="menu-item text-red-600"><i data-lucide="trash-2" class="h-4 w-4"></i><span>Delete</span></button>
|
||
<button data-action="count_tokens" class="menu-item"><i data-lucide="hash" class="h-4 w-4"></i><span>Count tokens (approx.)</span></button>
|
||
</div>
|
||
<div id="sunePopover" class="menu-card hidden">
|
||
<button data-action="pin" class="menu-item"><i data-lucide="pin" class="h-4 w-4"></i><span>Pin to top</span></button>
|
||
<button data-action="rename" class="menu-item"><i data-lucide="edit-3" class="h-4 w-4"></i><span>Rename</span></button>
|
||
<button data-action="pfp" class="menu-item"><i data-lucide="image" class="h-4 w-4"></i><span>Change pfp</span></button>
|
||
<button data-action="export" class="menu-item"><i data-lucide="download" class="h-4 w-4"></i><span>Export sune (.sune)</span></button>
|
||
</div>
|
||
<div id="sunesSyncPopover" class="menu-card hidden">
|
||
<button id="sunesSyncUploadBtn" class="menu-item"><i data-lucide="upload-cloud" class="h-4 w-4"></i><span>Upload to GitHub</span></button>
|
||
<button id="sunesSyncDownloadBtn" class="menu-item"><i data-lucide="download-cloud" class="h-4 w-4"></i><span>Download from GitHub</span></button>
|
||
</div>
|
||
<div id="threadsSyncPopover" class="menu-card hidden">
|
||
<button id="threadsSyncUploadBtn" class="menu-item"><i data-lucide="upload-cloud" class="h-4 w-4"></i><span>Upload to GitHub</span></button>
|
||
<button id="threadsSyncDownloadBtn" class="menu-item"><i data-lucide="download-cloud" class="h-4 w-4"></i><span>Download from GitHub</span></button>
|
||
</div>
|
||
<div id="attachPopover" class="menu-card hidden">
|
||
<button data-action="clear" class="menu-item text-red-600"><i data-lucide="x" class="h-4 w-4"></i><span>Clear all attachments</span></button>
|
||
</div>
|
||
<div id="suneModal" class="hidden fixed inset-0 z-50">
|
||
<div class="absolute inset-0 bg-black/30"></div>
|
||
<div class="absolute inset-x-0 top-12 mx-auto w-full max-w-md px-4">
|
||
<div class="flex flex-col max-h-[calc(100dvh-4rem)] rounded-2xl bg-white shadow-xl border border-gray-200 overflow-hidden">
|
||
<div class="px-4 py-3 border-b text-sm font-semibold flex items-center gap-2"><input id="suneURL" type="text" placeholder="" class="flex-1 min-w-0 h-10 rounded-xl border-0 bg-gray-50 px-3 text-gray-400 placeholder:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:bg-white text-xs font-mono focus:text-black"/><button id="syncSune" class="p-1.5 rounded hover:bg-gray-100" aria-label="Refresh"><i data-lucide="refresh-cw" class="h-5 w-5"></i></button></div>
|
||
<form id="settingsForm" class="flex flex-col min-h-0 text-sm">
|
||
<div class="border-b flex text-xs font-medium"><button type="button" id="tabModel" class="flex-1 py-2 px-3 text-center border-b-2 border-black">Model & Sampling</button><button type="button" id="tabPrompt" class="flex-1 py-2 px-3 text-center border-b-2 border-transparent hover:border-gray-300">System Prompt</button><button type="button" id="tabScript" class="flex-1 py-2 px-3 text-center border-b-2 border-transparent hover:border-gray-300">HTML</button></div>
|
||
<div id="panelModel" class="p-4 space-y-4 overflow-y-auto">
|
||
<div class="grid grid-cols-2 gap-3"><div><div class="flex items-center gap-1 mb-1"><label for="set_model" class="text-gray-700 font-medium">Model name</label><button type="button" onclick="modelHelp.showModal()" class="p-1 -m-1 rounded-full text-gray-400 hover:text-gray-700" aria-label="How to set the model name"><i data-lucide="circle-question-mark" class="h-4 w-4"></i></button></div><input id="set_model" type="text" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="google/gemini-3-pro-preview"/></div><div><label class="block text-gray-700 font-medium mb-1">Reasoning Effort</label><select id="set_reasoning_effort" class="w-full rounded-xl border border-gray-300 px-3 py-2"><option value="">Omitted</option><option value="none">None</option><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option></select></div></div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div><label class="block text-gray-700 font-medium mb-1">Temperature <span class="text-gray-400">(0–2)</span></label><input id="set_temperature" type="number" min="0" max="2" step="0.01" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="1.0"/></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Top P <span class="text-gray-400">(0–1)</span></label><input id="set_top_p" type="number" min="0" max="1" step="0.01" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="1.0"/></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Top K</label><input id="set_top_k" type="number" min="0" step="1" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="0"/></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Frequency Penalty <span class="text-gray-400">(-2–2)</span></label><input id="set_frequency_penalty" type="number" min="-2" max="2" step="0.1" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="0.0"/></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Repetition Penalty <span class="text-gray-400">(0–2)</span></label><input id="set_repetition_penalty" type="number" min="0" max="2" step="0.01" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="1.0"/></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Min P <span class="text-gray-400">(0–1)</span></label><input id="set_min_p" type="number" min="0" max="1" step="0.01" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="0.0"/></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Top A <span class="text-gray-400">(0–1)</span></label><input id="set_top_a" type="number" min="0" max="1" step="0.01" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="0.0"/></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Max Tokens (output)</label><input id="set_max_tokens" type="number" min="1" step="1" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder=""/></div>
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-2 pt-2">
|
||
<div><input id="set_include_thoughts" type="checkbox" class="sr-only peer"><label for="set_include_thoughts" class="inline-flex cursor-pointer items-center rounded-full border border-slate-300 bg-transparent py-0.5 px-3 text-xs text-slate-500 peer-checked:border-gray-300 peer-checked:bg-gray-200 peer-checked:text-slate-800">Include thoughts</label></div>
|
||
<div><input id="set_img_output" type="checkbox" class="sr-only peer"><label for="set_img_output" class="inline-flex cursor-pointer items-center rounded-full border border-slate-300 bg-transparent py-0.5 px-3 text-xs text-slate-500 peer-checked:border-gray-300 peer-checked:bg-gray-200 peer-checked:text-slate-800">IMG Output</label></div>
|
||
<div><input id="set_hide_composer" type="checkbox" class="sr-only peer"><label for="set_hide_composer" class="inline-flex cursor-pointer items-center rounded-full border border-slate-300 bg-transparent py-0.5 px-3 text-xs text-slate-500 peer-checked:border-gray-300 peer-checked:bg-gray-200 peer-checked:text-slate-800">Hide composer</label></div>
|
||
<div><input id="set_ignore_master_prompt" type="checkbox" class="sr-only peer"><label for="set_ignore_master_prompt" class="inline-flex cursor-pointer items-center rounded-full border border-slate-300 bg-transparent py-0.5 px-3 text-xs text-slate-500 peer-checked:border-gray-300 peer-checked:bg-gray-200 peer-checked:text-slate-800">Ignore master prompt</label></div>
|
||
</div>
|
||
<div id="aspectRatioContainer" class="hidden pt-2 grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-gray-700 font-medium mb-1 text-xs">Aspect Ratio</label>
|
||
<select id="set_aspect_ratio" class="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs">
|
||
<option value="1:1">1:1 (Square)</option>
|
||
<option value="2:3">2:3 (Portrait)</option>
|
||
<option value="3:2">3:2 (Landscape)</option>
|
||
<option value="3:4">3:4</option>
|
||
<option value="4:3">4:3</option>
|
||
<option value="4:5">4:5</option>
|
||
<option value="5:4">5:4</option>
|
||
<option value="9:16">9:16 (Story)</option>
|
||
<option value="16:9">16:9 (Cinematic)</option>
|
||
<option value="21:9">21:9 (Ultra-wide)</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-gray-700 font-medium mb-1 text-xs">Resolution</label>
|
||
<select id="set_image_size" class="w-full rounded-xl border border-gray-300 px-3 py-2 text-xs">
|
||
<option value="1K">1K (Standard)</option>
|
||
<option value="2K">2K (High)</option>
|
||
<option value="4K">4K (Ultra)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="panelPrompt" class="p-4 space-y-4 overflow-y-auto hidden">
|
||
<div><div class="flex items-center justify-between mb-1"><label for="set_system_prompt" class="block text-gray-700 font-medium">System Prompt</label><div class="flex gap-2"><button type="button" id="copySystemPrompt" class="px-2 py-1 text-xs rounded-md bg-gray-100 hover:bg-gray-200">Copy</button><button type="button" id="pasteSystemPrompt" class="px-2 py-1 text-xs rounded-md bg-gray-100 hover:bg-gray-200">Paste</button></div></div><textarea id="set_system_prompt" rows="8" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="Enter a system prompt to guide the sune"></textarea></div>
|
||
<p class="text-xs text-gray-500">Use <code>{{model_name}}</code> to insert the model name.</p>
|
||
</div>
|
||
<div id="panelScript" class="p-1 overflow-y-auto hidden">
|
||
<div class="border-b flex text-xs font-medium"><button type="button" id="htmlTab_index" class="flex-1 py-2 px-3 text-center border-b-2"></button><button type="button" id="htmlTab_extension" class="flex-1 py-2 px-3 text-center border-b-2"></button></div>
|
||
<div class="pt-0">
|
||
<pre id="htmlEditor" class="w-full h-[50vh] p-3 rounded-xl border border-gray-300 bg-white overflow-auto font-mono text-[12px] leading-5" contenteditable="plaintext-only" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off"></pre>
|
||
<pre id="extensionHtmlEditor" class="w-full h-[50vh] p-3 rounded-xl border border-gray-300 bg-white overflow-auto font-mono text-[12px] leading-5 hidden" contenteditable="plaintext-only" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off"></pre>
|
||
</div>
|
||
<div class="mt-2 flex gap-2"><button type="button" id="copyHTML" class="px-3 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200">Copy</button><button type="button" id="pasteHTML" class="px-3 py-1.5 rounded-lg bg-gray-100 hover:bg-gray-200">Paste</button></div>
|
||
<p class="mt-1 text-xs text-gray-500">Scripts also run. extension.html runs before index.html.</p>
|
||
</div>
|
||
<div class="flex items-center justify-between gap-2 px-4 py-3 border-t">
|
||
<button type="button" id="deleteSuneBtn" class="inline-flex items-center gap-2 px-3 py-2 rounded-xl border border-red-200 text-red-700 hover:bg-red-50"><svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M8 6v12a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6m-9 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><span>Delete sune</span></button> <div class="flex items-center justify-end gap-2"><button type="button" id="cancelSettings" class="px-3 py-2 rounded-xl border bg-white hover:bg-gray-50">Cancel</button><button type="submit" class="px-3 py-2 rounded-xl bg-black text-white hover:bg-black/90">Save</button></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<dialog id="modelHelp" onclick="event.target===this&&this.close()" class="w-[calc(100%-2rem)] max-w-sm max-h-[85dvh] p-0 rounded-2xl border border-gray-200 bg-white text-gray-900 shadow-xl backdrop:bg-black/30">
|
||
<div class="px-4 py-3 border-b text-sm font-semibold flex items-center justify-between"><span>Model name</span><button type="button" onclick="modelHelp.close()" class="p-1 rounded hover:bg-gray-100" aria-label="Close"><svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||
<div class="p-4 space-y-3 text-sm text-gray-700 [&_code]:text-xs [&_code]:bg-gray-100 [&_code]:rounded [&_code]:px-1 [&_code]:py-0.5 [&_a]:underline [&_a]:text-gray-900">
|
||
<p>The <b>Provider</b> selected in <b>Account Settings → General</b> is used, unless the model name starts with one of these prefixes:</p>
|
||
<div class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1"><code>or:</code><span>OpenRouter</span><code>oai:</code><span>OpenAI</span><code>g:</code><span>Google</span><code>ant:</code><span>Anthropic</span></div>
|
||
<p>After the prefix, write the model slug exactly the way that provider's API expects it:</p>
|
||
<div class="space-y-2">
|
||
<div><div class="font-medium">OpenRouter <span class="font-normal text-gray-400">· vendor/model</span></div><code>or:anthropic/claude-opus-5.5</code><div class="text-xs text-gray-500 mt-0.5">Browse slugs at <a href="https://openrouter.ai/models" target="_blank" rel="noopener">openrouter.ai/models</a></div></div>
|
||
<div><div class="font-medium">OpenAI</div><code>oai:gpt-6-sol</code><div class="text-xs text-gray-500 mt-0.5"><a href="https://platform.openai.com/docs/models" target="_blank" rel="noopener">OpenAI models</a></div></div>
|
||
<div><div class="font-medium">Google</div><code>g:gemini-3.8-flash</code><div class="text-xs text-gray-500 mt-0.5"><a href="https://ai.google.dev/gemini-api/docs/models" target="_blank" rel="noopener">Gemini models</a></div></div>
|
||
<div><div class="font-medium">Anthropic</div><code>ant:claude-opus-5-5</code><div class="text-xs text-gray-500 mt-0.5"><a href="https://docs.anthropic.com/en/docs/about-claude/models" target="_blank" rel="noopener">Claude models</a></div></div>
|
||
</div>
|
||
<p class="text-xs text-gray-500">Tip: add <code>:online</code> to the end to enable web search, e.g. <code>g:gemini-3.8-flash:online</code>.</p>
|
||
</div>
|
||
</dialog>
|
||
<div id="accountSettingsModal" class="hidden fixed inset-0 z-50">
|
||
<div class="absolute inset-0 bg-black/30"></div>
|
||
<div class="absolute inset-x-0 top-16 mx-auto w-full max-w-md px-4">
|
||
<div class="flex flex-col max-h-[calc(100dvh-5rem)] rounded-2xl bg-white shadow-xl border border-gray-200 overflow-hidden">
|
||
<div class="px-4 py-3 border-b text-sm font-semibold flex items-center justify-between"><span>Account Settings</span><button id="closeAccountSettings" class="p-1 rounded hover:bg-gray-100" aria-label="Close"><svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||
<form id="accountSettingsForm" class="flex flex-col min-h-0 text-sm">
|
||
<div class="border-b flex text-xs font-medium"><button type="button" id="accountTabGeneral" class="flex-1 py-2 px-3 text-center border-b-2 border-black">General</button><button type="button" id="accountTabAPI" class="flex-1 py-2 px-3 text-center border-b-2 border-transparent hover:border-gray-300">API</button><button type="button" id="accountTabUser" class="flex-1 py-2 px-3 text-center border-b-2 border-transparent hover:border-gray-300">User</button></div>
|
||
<div id="accountPanelGeneral" class="p-4 space-y-4 overflow-y-auto">
|
||
<div><label class="block text-gray-700 font-medium mb-1">Provider</label><select id="set_provider" class="w-full rounded-xl border border-gray-300 px-3 py-2"><option value="openrouter">OpenRouter</option><option value="openai">OpenAI</option><option value="google">Google</option><option value="anthropic">Anthropic</option></select><p class="mt-1 text-xs text-gray-500">Or you can prefix model names with or:, oai:, g:, or ant: to override.</p></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Master Prompt</label><textarea id="set_master_prompt" rows="6" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="Applies to all sunes on this device"></textarea><p class="mt-1 text-xs text-gray-500">Stored locally.</p></div>
|
||
<div><label class="block text-gray-700 font-medium mb-1">Model preference for titles</label><input id="set_title_model" type="text" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="or:google/gemma-3-12b-it"/><p class="mt-1 text-xs text-gray-500">Used for auto-generating thread titles.</p></div>
|
||
</div>
|
||
<div id="accountPanelAPI" class="p-4 overflow-y-auto hidden"><div class="grid grid-cols-2 gap-x-4 gap-y-4"><div><label class="block text-gray-700 font-medium mb-1">OpenRouter Key <button type="button" data-copy-for="set_api_key_or" class="inline-flex align-middle text-gray-400 hover:text-gray-600"><i data-lucide="copy" class="h-4 w-4"></i></button></label><div class="relative"><input id="set_api_key_or" type="password" class="w-full rounded-xl border border-gray-300 px-3 py-2 pr-10" placeholder="sk-or-..."><button type="button" data-reveal-for="set_api_key_or" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600"><i data-lucide="eye" class="h-4 w-4"></i></button></div><p class="mt-1 text-xs text-gray-500">Use: <code>USER.apiKeyOpenRouter</code></p></div><div><label class="block text-gray-700 font-medium mb-1">OpenAI Key <button type="button" data-copy-for="set_api_key_oai" class="inline-flex align-middle text-gray-400 hover:text-gray-600"><i data-lucide="copy" class="h-4 w-4"></i></button></label><div class="relative"><input id="set_api_key_oai" type="password" class="w-full rounded-xl border border-gray-300 px-3 py-2 pr-10" placeholder="sk-..."><button type="button" data-reveal-for="set_api_key_oai" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600"><i data-lucide="eye" class="h-4 w-4"></i></button></div><p class="mt-1 text-xs text-gray-500">Use: <code>USER.apiKeyOpenAI</code></p></div><div><label class="block text-gray-700 font-medium mb-1">Google Key <button type="button" data-copy-for="set_api_key_g" class="inline-flex align-middle text-gray-400 hover:text-gray-600"><i data-lucide="copy" class="h-4 w-4"></i></button></label><div class="relative"><input id="set_api_key_g" type="password" class="w-full rounded-xl border border-gray-300 px-3 py-2 pr-10" placeholder="AIza..."><button type="button" data-reveal-for="set_api_key_g" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600"><i data-lucide="eye" class="h-4 w-4"></i></button></div><p class="mt-1 text-xs text-gray-500">Gemini/Studio. Use: <code>USER.apiKeyGoogle</code></p></div><div><label class="block text-gray-700 font-medium mb-1">Anthropic Key <button type="button" data-copy-for="set_api_key_ant" class="inline-flex align-middle text-gray-400 hover:text-gray-600"><i data-lucide="copy" class="h-4 w-4"></i></button></label><div class="relative"><input id="set_api_key_ant" type="password" class="w-full rounded-xl border border-gray-300 px-3 py-2 pr-10" placeholder="sk-ant-..."><button type="button" data-reveal-for="set_api_key_ant" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600"><i data-lucide="eye" class="h-4 w-4"></i></button></div><p class="mt-1 text-xs text-gray-500">Use: <code>USER.apiKeyAnthropic</code></p></div><div><label class="block text-gray-700 font-medium mb-1">Cloudflare Token <button type="button" data-copy-for="set_api_key_cf" class="inline-flex align-middle text-gray-400 hover:text-gray-600"><i data-lucide="copy" class="h-4 w-4"></i></button></label><div class="relative"><input id="set_api_key_cf" type="password" class="w-full rounded-xl border border-gray-300 px-3 py-2 pr-10" placeholder="..."><button type="button" data-reveal-for="set_api_key_cf" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600"><i data-lucide="eye" class="h-4 w-4"></i></button></div><p class="mt-1 text-xs text-gray-500">Not used. Use: <code>USER.apiKeyCloudflare</code></p></div><div><label class="block text-gray-700 font-medium mb-1">Custom Key 1 <button type="button" data-copy-for="set_api_key_custom1" class="inline-flex align-middle text-gray-400 hover:text-gray-600"><i data-lucide="copy" class="h-4 w-4"></i></button></label><div class="relative"><input id="set_api_key_custom1" type="password" class="w-full rounded-xl border border-gray-300 px-3 py-2 pr-10" placeholder="..."><button type="button" data-reveal-for="set_api_key_custom1" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600"><i data-lucide="eye" class="h-4 w-4"></i></button></div><p class="mt-1 text-xs text-gray-500">Use: <code>USER.customKey1</code></p></div><div><label class="block text-gray-700 font-medium mb-1">Github Token <button type="button" data-copy-for="set_gh_token" class="inline-flex align-middle text-gray-400 hover:text-gray-600"><i data-lucide="copy" class="h-4 w-4"></i></button></label><div class="relative"><input id="set_gh_token" type="password" class="w-full rounded-xl border border-gray-300 px-3 py-2 pr-10" placeholder="ghp_..."><button type="button" data-reveal-for="set_gh_token" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600"><i data-lucide="eye" class="h-4 w-4"></i></button></div><p class="mt-1 text-xs text-gray-500">Use: <code>USER.githubToken</code></p></div></div></div>
|
||
<div id="accountPanelUser" class="p-4 space-y-4 overflow-y-auto hidden">
|
||
<div class="flex items-center gap-4">
|
||
<div class="relative"><img id="userAvatarPreview" class="h-16 w-16 rounded-full object-cover bg-gray-200"><button type="button" id="setUserAvatarBtn" class="absolute bottom-0 right-0 h-6 w-6 rounded-full bg-white border border-gray-300 flex items-center justify-center hover:bg-gray-100" aria-label="Edit photo"><i data-lucide="edit-3" class="h-3 w-3"></i></button></div>
|
||
<input id="userAvatarInput" type="file" accept="image/*" class="hidden">
|
||
<div class="flex-1"><label for="set_user_name" class="block text-gray-700 font-medium mb-1">Username</label><input id="set_user_name" type="text" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="Master"/></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between gap-2 px-4 py-3 border-t">
|
||
<div class="flex items-center gap-2"><button type="button" id="importAccountSettings" class="text-xs px-2.5 py-1.5 rounded-lg border bg-white hover:bg-gray-50">Import</button><button type="button" id="exportAccountSettings" class="text-xs px-2.5 py-1.5 rounded-lg border bg-white hover:bg-gray-50">Export</button></div>
|
||
<div class="flex items-center justify-end gap-2"><button type="button" id="cancelAccountSettings" class="px-3 py-2 rounded-xl border bg-white hover:bg-gray-50">Cancel</button><button type="submit" class="px-3 py-2 rounded-xl bg-black text-white hover:bg-black/90">Save</button></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<input id="importAccountSettingsInput" type="file" class="hidden" accept="application/json,.json">
|