330 lines
15 KiB
HTML
330 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Preset Manager</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="autocomplete.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- New Navigation Bar -->
|
||
<div class="navbar">
|
||
<button class="sidebar-toggle" id="sidebarToggle" onclick="toggleSidebar()"> ‹ </button>
|
||
<h1>Preset Manager</h1>
|
||
<div class="tabs">
|
||
<button class="tab-button active" onclick="switchTab('characters')">
|
||
Characters
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('models')">
|
||
Models
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('styles')">
|
||
Styles
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('tags')">
|
||
Tags
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('wildcards')">
|
||
Wildcards
|
||
</button>
|
||
</div>
|
||
<div class="search-box">
|
||
<input type="text" id="searchInput" placeholder="Search..." autocomplete="off">
|
||
<button class="clear-search" id="clearSearch" onclick="clearSearch()" style="display: none;">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status" id="status"></div>
|
||
|
||
<!-- Characters Tab -->
|
||
<div class="tab-content active" id="charactersTab">
|
||
|
||
<div class="content-with-sidebar">
|
||
<div class="sidebar" id="categorySidebar">
|
||
<div class="sidebar-header">
|
||
<span>Categories</span>
|
||
</div>
|
||
<div class="category-list" id="categoryList">
|
||
<div class="category-item active" data-category="all">
|
||
<span class="category-name">All Characters</span>
|
||
<span class="category-count" id="countAll">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<div class="character-grid" id="characterGrid"></div>
|
||
<div class="empty-state" id="emptyState" style="display: none;">
|
||
<p>No characters found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Models Tab -->
|
||
<div class="tab-content" id="modelsTab">
|
||
|
||
<div class="preset-grid" id="modelGrid"></div>
|
||
<div class="empty-state" id="modelEmptyState"
|
||
style="display: none;">
|
||
<p>No models found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Styles Tab -->
|
||
<div class="tab-content" id="stylesTab">
|
||
|
||
<div class="character-grid" id="styleGrid"></div>
|
||
<div class="empty-state" id="styleEmptyState"
|
||
style="display: none;">
|
||
<p>No styles found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tags Tab -->
|
||
<div class="tab-content" id="tagsTab">
|
||
<div class="preset-grid" id="tagGrid"></div>
|
||
<div class="empty-state" id="tagEmptyState"
|
||
style="display: none;">
|
||
<p>No tag presets found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Wildcards Tab -->
|
||
<div class="tab-content" id="wildcardsTab">
|
||
<div class="preset-grid" id="wildcardGrid"></div>
|
||
<div class="empty-state" id="wildcardEmptyState"
|
||
style="display: none;">
|
||
<p>No wildcards found. Click the + card above to add one.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="modal" id="editModal">
|
||
<div class="modal-container">
|
||
<div class="modal-header">
|
||
<h2>Character</h2>
|
||
<button class="button-cancel" onclick="hideEditModal()">X</button>
|
||
</div>
|
||
<div class="modal-content">
|
||
<div class="field-group">
|
||
<label>Character Name</label>
|
||
<input type="text" id="editCharNameInput" class="name-input" autocomplete="off"/>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Character Image</label>
|
||
<div class="image-upload-container">
|
||
<div class="image-drop-zone" id="charImageDropZone">
|
||
<div class="drop-zone-content">
|
||
<span class="drop-zone-text">Drop image here or click to browse</span>
|
||
</div>
|
||
<img id="previewImg" class="drop-zone-preview" style="display: none;">
|
||
</div>
|
||
<div>
|
||
<input type="file" id="editImage" accept="image/*" style="flex: 1; display: none;">
|
||
<button type="button" onclick="removeImage()" class="delete" style="padding: 8px 12px;">
|
||
🗑
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Character</label>
|
||
<textarea id="editCharacter"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Top</label>
|
||
<textarea id="editTop"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Bottom</label>
|
||
<textarea id="editBottom"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Negative</label>
|
||
<textarea id="editNeg"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Categories (comma-separated)</label>
|
||
<input type="text" id="editCategories"
|
||
placeholder="e.g., idolmaster, blue archive, genshin impact"
|
||
autocomplete="off">
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete" onclick="deleteCurrentItem('character')">
|
||
Delete
|
||
</button>
|
||
<button class="save" onclick="saveItem('character')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Model Edit Modal -->
|
||
<div class="modal" id="modelEditModal">
|
||
<div class="modal-container">
|
||
<div class="modal-header">
|
||
<h2>Model</h2>
|
||
<button class="button-cancel" onclick="hideEditModal('model')">X</button>
|
||
</div>
|
||
<div class="modal-content">
|
||
<div class="field-group">
|
||
<label>Model Name</label>
|
||
<input type="text" id="editModelNameInput" class="name-input" style="margin: 0;" autocomplete="off"/>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Quality Positive</label>
|
||
<textarea id="editModelQualityPos"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Quality Negative</label>
|
||
<textarea id="editModelQualityNeg"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Embeddings Positive</label>
|
||
<input type="text" id="editModelEmbedPos" autocomplete="off">
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Embeddings Negative</label>
|
||
<input type="text" id="editModelEmbedNeg" autocomplete="off">
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete" onclick="deleteCurrentItem('model')">
|
||
Delete
|
||
</button>
|
||
<button class="save" onclick="saveItem('model')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Style Edit Modal -->
|
||
<div class="modal" id="styleEditModal">
|
||
<div class="modal-container">
|
||
<div class="modal-header">
|
||
<h2>Style</h2>
|
||
<button class="button-cancel" onclick="hideEditModal('style')">X</button>
|
||
</div>
|
||
<div class="modal-content">
|
||
<div class="field-group">
|
||
<label>Style Name</label>
|
||
<input type="text" id="editStyleNameInput" class="name-input" style="margin: 0;" autocomplete="off"/>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Style Image</label>
|
||
<div class="image-upload-container">
|
||
<div class="image-drop-zone" id="styleImageDropZone">
|
||
<div class="drop-zone-content">
|
||
<span class="drop-zone-text">Drop image here or click to browse</span>
|
||
</div>
|
||
<img id="stylePreviewImg" class="drop-zone-preview" style="display: none;">
|
||
</div>
|
||
<div>
|
||
<input type="file" id="editStyleImage" accept="image/*" style="flex: 1; display: none;">
|
||
<button type="button" onclick="removeImage('style')" class="delete" style="padding: 8px 12px;">
|
||
🗑
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Positive Tags</label>
|
||
<textarea id="editStylePos"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Negative Tags</label>
|
||
<textarea id="editStyleNeg"></textarea>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete" onclick="deleteCurrentItem('style')">
|
||
Delete
|
||
</button>
|
||
<button class="save" onclick="saveItem('style')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tag Edit Modal -->
|
||
<div class="modal" id="tagEditModal">
|
||
<div class="modal-container">
|
||
<div class="modal-header">
|
||
<h2>Tag</h2>
|
||
<button class="button-cancel" onclick="hideEditModal('tag')">X</button>
|
||
</div>
|
||
<div class="modal-content">
|
||
<div class="field-group">
|
||
<label>Trigger Tag</label>
|
||
<input type="text" id="editTagNameInput" class="name-input" style="margin: 0;" placeholder="e.g., t-shirt" autocomplete="off"/>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Positive Tags (added when trigger is present)</label>
|
||
<textarea id="editTagPos"></textarea>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Negative Tags (added when trigger is present)</label>
|
||
<textarea id="editTagNeg"></textarea>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete" onclick="deleteCurrentItem('tag')">
|
||
Delete
|
||
</button>
|
||
<button class="save" onclick="saveItem('tag')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Wildcard Edit Modal -->
|
||
<div class="modal" id="wildcardEditModal">
|
||
<div class="modal-container">
|
||
<div class="modal-header">
|
||
<h2>Wildcard</h2>
|
||
<button class="button-cancel"
|
||
onclick="hideEditModal('wildcard')">X</button>
|
||
</div>
|
||
<div class="modal-content">
|
||
<div class="field-group">
|
||
<label>Wildcard Name</label>
|
||
<input type="text" id="editWildcardNameInput"
|
||
class="name-input" style="margin: 0;"
|
||
autocomplete="off"/>
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Options (pipe-separated)</label>
|
||
<textarea id="editWildcardOptions"
|
||
placeholder="option1 | option2 | option3"></textarea>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="delete"
|
||
onclick="deleteCurrentItem('wildcard')">
|
||
Delete
|
||
</button>
|
||
<button class="save"
|
||
onclick="saveItem('wildcard')">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="script.js"></script>
|
||
|
||
<!-- Autocomplete dropdown -->
|
||
<div class="autocomplete-dropdown" id="autocompleteDropdown"></div>
|
||
</body>
|
||
</html>
|