mirror of
https://github.com/elder-plinius/P4RS3LT0NGV3.git
synced 2026-05-29 19:29:32 +02:00
Claude
7655f31b1c
The Advanced Settings panel (containing the OpenRouter API key input) was outside the Vue app scope due to an extra </div> on line 122 that prematurely closed the #app div. This meant: - The API key input's Vue bindings (:value, @input) were inert - The Save Key button's @click="saveApiKey" never fired - The key never reached localStorage or Vue data - Translation/PromptCraft always saw an empty key Fix: Remove the duplicate closing </div> (labeled "End of .tabs div" but .tabs already closed earlier at line 77). Also switch API key input from manual :value/@input to v-model for reliable two-way binding. https://claude.ai/code/session_01DjqbQB8WcZoGVe78sjvh72
267 lines
14 KiB
HTML
267 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Parseltongue 2.0 - LLM Payload Crafter</title>
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/notification.css">
|
||
<!-- Vue.js (Production Build) -->
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
||
<!-- Font Awesome for icons -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" class="container">
|
||
<header>
|
||
<div class="logo">
|
||
<h1>🐉️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️︎︎️️️️︎︎︎️️️️️︎︎︎️︎︎︎️️️︎️︎︎️️️️︎️︎︎︎️︎︎︎️︎︎️️︎️︎️︎︎️️️️︎️︎︎︎️︎︎︎️︎︎︎️︎️︎︎️️️︎️︎︎️︎︎︎️︎️︎️︎︎️️️︎︎️︎︎︎︎︎️︎️︎︎︎︎️︎︎️︎︎️️︎︎︎️︎︎︎️︎️︎️︎︎︎️︎︎︎︎️︎️️️︎︎︎️︎️️️︎︎︎️︎️️️︎︎️︎︎️️︎︎︎️︎︎️️️️︎️︎️︎️️︎︎️︎︎︎️︎️︎︎️️️︎︎️︎️︎️︎︎︎︎︎︎️︎︎️️︎︎︎️︎︎️︎︎️︎️︎︎️️️︎︎️︎️️︎︎️︎️️️️️︎︎︎︎️️️️️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️︎️️︎︎︎︎︎︎︎️︎︎︎️︎ P4RS3LT0NGV3</h1>
|
||
</div>
|
||
<div class="actions">
|
||
<button
|
||
@click="toggleCopyHistory"
|
||
class="history-button"
|
||
title="Show copy history"
|
||
aria-label="Show copy history"
|
||
>
|
||
<i class="fas fa-history"></i>
|
||
</button>
|
||
<button
|
||
@click="toggleTheme"
|
||
@keyup.d="toggleTheme"
|
||
class="theme-button"
|
||
title="Toggle dark mode (D)"
|
||
aria-label="Toggle dark mode"
|
||
>
|
||
<i class="fas" :class="isDarkTheme ? 'fa-moon' : 'fa-sun'"></i>
|
||
</button>
|
||
<a
|
||
href="https://github.com/elder-plinius/P4RS3LT0NGV3"
|
||
target="_blank"
|
||
class="github-button"
|
||
title="View source on GitHub"
|
||
aria-label="View source code on GitHub"
|
||
>
|
||
<i class="fab fa-github"></i>
|
||
</a>
|
||
<button
|
||
@click="toggleUnicodePanel"
|
||
class="history-button"
|
||
title="Advanced Settings"
|
||
aria-label="Advanced Settings"
|
||
>
|
||
<i class="fas fa-sliders-h"></i>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="tabs">
|
||
<div class="tab-buttons">
|
||
<!-- Dynamically generated tab buttons from tool registry -->
|
||
<button
|
||
v-for="tool in registeredTools"
|
||
v-if="!tool.hidden"
|
||
:key="tool.id"
|
||
:class="{ active: activeTab === tool.id }"
|
||
@click="switchToTab(tool.id)"
|
||
:title="tool.title"
|
||
>
|
||
<i :class="'fas ' + tool.icon"></i> {{ tool.name }}
|
||
</button>
|
||
</div>
|
||
|
||
<div id="tool-content-container">
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Copy History Panel -->
|
||
<div class="copy-history-panel" :class="{ 'active': showCopyHistory }">
|
||
<div class="copy-history-header">
|
||
<h3><i class="fas fa-history"></i> Copy History</h3>
|
||
<div class="header-actions">
|
||
<button
|
||
v-if="copyHistory.length > 0"
|
||
@click.stop="clearCopyHistory"
|
||
class="clear-history-button"
|
||
title="Clear all history"
|
||
>
|
||
<i class="fas fa-trash"></i>
|
||
</button>
|
||
<button class="close-button" @click="toggleCopyHistory" title="Close history">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="copy-history-content">
|
||
<div v-if="copyHistory.length === 0" class="no-history">
|
||
<p>No copy history yet. Use the app features to auto-copy content.</p>
|
||
</div>
|
||
<div v-else class="history-items">
|
||
<div v-for="(item, index) in copyHistory" :key="item.id || index" class="history-item">
|
||
<div class="history-item-header">
|
||
<span class="history-source">{{ item.source }}</span>
|
||
<span class="history-time">{{ formatHistoryTime(item.timestamp) }}</span>
|
||
</div>
|
||
<div class="history-content">
|
||
{{ item.content }}
|
||
</div>
|
||
<div class="history-actions">
|
||
<button class="copy-again-button" @click="copyToClipboard(item.content)" title="Copy again">
|
||
<i class="fas fa-copy"></i>
|
||
</button>
|
||
<button class="remove-history-button" @click.stop="removeFromCopyHistory(item.id)" title="Remove from history">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Advanced Settings Panel (inside app so Vue bindings work) -->
|
||
<div id="unicode-options-panel" class="unicode-options-panel">
|
||
<div class="unicode-panel-header">
|
||
<h3><i class="fas fa-sliders-h"></i> Advanced Settings</h3>
|
||
<button class="close-button" title="Close Advanced Settings"><i class="fas fa-times"></i></button>
|
||
</div>
|
||
<div class="unicode-panel-content">
|
||
<!-- OpenRouter API Key -->
|
||
<div class="settings-section api-key-section">
|
||
<h4><i class="fas fa-key"></i> OpenRouter API Key</h4>
|
||
<small class="settings-hint">Required for Translation and PromptCraft features. Stored locally in your browser only.</small>
|
||
<div class="api-key-input-row">
|
||
<input
|
||
:type="showApiKey ? 'text' : 'password'"
|
||
v-model="openrouterApiKey"
|
||
placeholder="sk-or-..."
|
||
class="api-key-input"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
/>
|
||
<button class="api-key-toggle" @click="showApiKey = !showApiKey" :title="showApiKey ? 'Hide key' : 'Show key'">
|
||
<i :class="showApiKey ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
|
||
</button>
|
||
</div>
|
||
<div class="api-key-actions">
|
||
<button class="api-key-save" @click="saveApiKey" :disabled="!openrouterApiKey">
|
||
<i class="fas fa-save"></i> Save Key
|
||
</button>
|
||
<button class="api-key-clear" @click="clearApiKey" v-if="openrouterApiKey">
|
||
<i class="fas fa-trash"></i> Clear
|
||
</button>
|
||
<small v-if="apiKeySaved" class="apply-status">Saved</small>
|
||
</div>
|
||
</div>
|
||
<hr class="settings-divider" />
|
||
<!-- Steganography Options -->
|
||
<h4><i class="fas fa-user-secret"></i> Steganography Options</h4>
|
||
</div>
|
||
<div class="unicode-panel-content options-grid steg-adv-panel">
|
||
<label>
|
||
Initial Presentation
|
||
<select class="steg-initial-presentation">
|
||
<option value="emoji">Emoji (VS16)</option>
|
||
<option value="text">Text (VS15)</option>
|
||
<option value="none">None</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Bit-0 Selector
|
||
<select class="steg-vs-zero">
|
||
<option value="\ufe0e">VS15 (\ufe0e)</option>
|
||
<option value="\ufe0f">VS16 (\ufe0f)</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Bit-1 Selector
|
||
<select class="steg-vs-one">
|
||
<option value="\ufe0f">VS16 (\ufe0f)</option>
|
||
<option value="\ufe0e">VS15 (\ufe0e)</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Inter-bit Zero-Width
|
||
<select class="steg-inter-zw">
|
||
<option value="">None</option>
|
||
<option value="\u200C">ZWNJ (\u200C)</option>
|
||
<option value="\u200D">ZWJ (\u200D)</option>
|
||
<option value="\u200B">ZWSP (\u200B)</option>
|
||
<option value="\ufeff">BOM (\ufeff)</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Inter-bit Every N bits
|
||
<input class="steg-inter-every" type="number" min="1" max="8" value="1" />
|
||
</label>
|
||
<label>
|
||
Bit Order
|
||
<select class="steg-bit-order">
|
||
<option value="msb">MSB First</option>
|
||
<option value="lsb">LSB First</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Trailing Zero-Width
|
||
<select class="steg-trailing-zw">
|
||
<option value="\u200B">ZWSP (\u200B)</option>
|
||
<option value="\u200C">ZWNJ (\u200C)</option>
|
||
<option value="\u200D">ZWJ (\u200D)</option>
|
||
<option value="\ufeff">BOM (\ufeff)</option>
|
||
<option value="">None</option>
|
||
</select>
|
||
</label>
|
||
<div style="display:flex; align-items:center; gap:10px;">
|
||
<button class="apply-steg-options" :class="{ applied: unicodeApplyFlash }" :disabled="unicodeApplyBusy" @click="applyUnicodeOptions" title="These options affect Unicode-based steganography encoding/decoding.">Apply</button>
|
||
<small v-if="unicodeApplyFlash" class="apply-status">Applied</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- End of #app div -->
|
||
|
||
<!-- Load JavaScript files after Vue template -->
|
||
<!-- Data files (generated/static data) -->
|
||
<script src="js/data/emojiData.js"></script>
|
||
<script src="js/data/emojiCompatibility.js"></script>
|
||
|
||
<!-- Generated bundles -->
|
||
<script src="js/bundles/transforms-bundle.js"></script>
|
||
|
||
<!-- Load Configuration and Utilities (before modules that depend on them) -->
|
||
<script src="js/config/constants.js"></script>
|
||
<script src="js/utils/escapeParser.js"></script>
|
||
<script src="js/utils/focus.js"></script>
|
||
<script src="js/utils/notifications.js"></script>
|
||
<script src="js/utils/history.js"></script>
|
||
<script src="js/utils/clipboard.js"></script>
|
||
<script src="js/utils/theme.js"></script>
|
||
<script src="js/utils/emoji.js"></script>
|
||
|
||
<!-- Core modules (feature libraries) -->
|
||
<script src="js/core/steganography.js"></script>
|
||
<script src="js/core/decoder.js"></script>
|
||
|
||
<!-- Load Tool System -->
|
||
<script src="js/tools/Tool.js"></script>
|
||
<script src="js/tools/DecodeTool.js"></script>
|
||
<script src="js/tools/EmojiTool.js"></script>
|
||
<script src="js/tools/GibberishTool.js"></script>
|
||
<script src="js/tools/MutationTool.js"></script>
|
||
<script src="js/tools/PromptCraftTool.js"></script>
|
||
<script src="js/tools/SplitterTool.js"></script>
|
||
<script src="js/tools/TokenadeTool.js"></script>
|
||
<script src="js/tools/TokenizerTool.js"></script>
|
||
<script src="js/tools/TransformTool.js"></script>
|
||
<script src="js/tools/TranslateTool.js"></script>
|
||
<script src="js/core/toolRegistry.js"></script>
|
||
|
||
<script src="js/app.js"></script>
|
||
|
||
<!-- UI Initialization is handled in app.js mounted() lifecycle hook -->
|
||
</body>
|
||
</html>
|
||
<!-- redeploy trigger: semaphore + tokenizer updates -->
|