mirror of
https://github.com/elder-plinius/P4RS3LT0NGV3.git
synced 2026-05-11 20:13:02 +02:00
EP
230 lines
11 KiB
HTML
230 lines
11 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="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/notification.css">
|
|
<!-- Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.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>🐍 Parseltongue</h1>
|
|
</div>
|
|
<div class="actions">
|
|
<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>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="tabs">
|
|
<div class="tab-buttons">
|
|
<button
|
|
:class="{ active: activeTab === 'transforms' }"
|
|
@click="activeTab = 'transforms'"
|
|
title="Transform text (T)"
|
|
>
|
|
<i class="fas fa-font"></i> Transform
|
|
</button>
|
|
<button
|
|
:class="{ active: activeTab === 'steganography' }"
|
|
@click="activeTab = 'steganography'"
|
|
title="Hide text (H)"
|
|
>
|
|
<i class="fas fa-eye-slash"></i> Hide
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Steganography Tab -->
|
|
<div v-if="activeTab === 'steganography'" class="tab-content">
|
|
<div class="transform-layout">
|
|
<div class="input-section">
|
|
<textarea
|
|
id="steg-input"
|
|
v-model="emojiMessage"
|
|
placeholder="Enter text to hide..."
|
|
@input="autoEncode"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="transform-section">
|
|
<div class="transform-buttons">
|
|
<button
|
|
v-for="carrier in carriers"
|
|
:key="carrier.name"
|
|
class="transform-button"
|
|
:class="{ active: selectedCarrier === carrier }"
|
|
@click="selectCarrier(carrier)"
|
|
:title="carrier.desc"
|
|
>
|
|
<div class="carrier-content">
|
|
<span class="carrier-emoji">{{ carrier.emoji }}</span>
|
|
<span class="carrier-name">{{ carrier.name }}</span>
|
|
</div>
|
|
<small class="transform-preview" v-if="emojiMessage">
|
|
<span class="preview-label">Preview:</span>
|
|
<span class="encoded-preview">{{ carrier.preview ? carrier.preview(emojiMessage.slice(0, 10)) : '' }}</span>
|
|
<span class="preview-ellipsis" v-if="emojiMessage.length > 10">...</span>
|
|
</small>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Big Invisible Text Button -->
|
|
<button
|
|
class="transform-button invisible-button"
|
|
:class="{ active: activeSteg === 'invisible' }"
|
|
@click="setStegMode('invisible')"
|
|
title="Make text invisible using zero-width characters"
|
|
>
|
|
<div class="carrier-content">
|
|
<span class="carrier-emoji"><i class="fas fa-eye-slash"></i></span>
|
|
<span class="carrier-name">Invisible Text Mode</span>
|
|
</div>
|
|
<small class="transform-preview" v-if="emojiMessage">
|
|
<span class="preview-label">Preview:</span>
|
|
<span class="encoded-preview">{{ previewInvisible(emojiMessage.slice(0, 10)) }}</span>
|
|
<span class="preview-ellipsis" v-if="emojiMessage.length > 10">...</span>
|
|
</small>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Emoji Library Section -->
|
|
<div class="emoji-library">
|
|
<div class="emoji-library-header">
|
|
<div class="emoji-library-title">
|
|
<i class="fas fa-icons"></i> Quick Emoji Picker
|
|
<span class="emoji-library-subtitle">Click any emoji to insert it at cursor position</span>
|
|
</div>
|
|
<div class="emoji-search">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" placeholder="Search emojis..." v-model="emojiSearch" @input="filterEmojis">
|
|
</div>
|
|
</div>
|
|
<div id="emoji-grid-container" class="emoji-grid-wrapper"></div>
|
|
<div class="emoji-library-footer" v-if="selectedEmoji">
|
|
<div class="selected-emoji-info">
|
|
<span class="selected-emoji">{{ selectedEmoji }}</span>
|
|
<span class="selected-emoji-label">Last selected</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="output-section" v-if="encodedMessage">
|
|
<div class="output-heading">
|
|
<h4>
|
|
<i class="fas fa-check-circle"></i>
|
|
Encoded Message
|
|
<small v-if="selectedCarrier">using {{ selectedCarrier.name }}</small>
|
|
<small v-else-if="activeSteg === 'invisible'">using Invisible Text</small>
|
|
</h4>
|
|
</div>
|
|
<div class="output-container">
|
|
<textarea readonly v-model="encodedMessage"></textarea>
|
|
<button class="copy-button" @click="copyToClipboard(encodedMessage)" title="Copy to clipboard">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<div class="output-instructions">
|
|
<small><i class="fas fa-info-circle"></i> Copy this text and share it. Only people who know how to decode it will be able to read your message.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="decode-section" v-if="showDecoder">
|
|
<div class="input-container">
|
|
<textarea
|
|
id="decode-input"
|
|
v-model="decodeInput"
|
|
placeholder="Paste encoded text to decode..."
|
|
@input="autoDecode"
|
|
></textarea>
|
|
<div class="decoded-message" v-if="decodedMessage">
|
|
{{ decodedMessage }}
|
|
<button class="copy-button" @click="copyToClipboard(decodedMessage.substring(decodedMessage.indexOf(': ') + 2))" title="Copy decoded text">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text Transforms Tab -->
|
|
<div v-if="activeTab === 'transforms'" class="tab-content">
|
|
<div class="transform-layout">
|
|
<div class="input-section">
|
|
<textarea
|
|
id="transform-input"
|
|
v-model="transformInput"
|
|
placeholder="Enter text to transform..."
|
|
@input="autoTransform"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="transform-section">
|
|
<div class="transform-buttons">
|
|
<button
|
|
v-for="(transform, index) in transforms"
|
|
:key="transform.name"
|
|
@click="applyTransform(transform)"
|
|
class="transform-button"
|
|
:class="{ active: activeTransform === transform }"
|
|
:title="transform.name + (index < 9 ? ' (' + (index + 1) + ')' : '')"
|
|
:data-shortcut="index < 9 ? index + 1 : ''"
|
|
>
|
|
{{ transform.name }}
|
|
<small class="transform-preview" v-if="transformInput">
|
|
{{ transform.preview(transformInput.slice(0, 10)) }}
|
|
</small>
|
|
<kbd v-if="index < 9">{{ index + 1 }}</kbd>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="output-section" v-if="transformOutput">
|
|
<div class="output-container">
|
|
<textarea
|
|
readonly
|
|
v-model="transformOutput"
|
|
aria-label="Transformed text output"
|
|
></textarea>
|
|
<button class="copy-button" @click="copyToClipboard(transformOutput)" title="Copy to clipboard">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/transforms.js"></script>
|
|
<script src="js/steganography.js"></script>
|
|
<script src="js/emojiLibrary.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|