mirror of
https://github.com/elder-plinius/P4RS3LT0NGV3.git
synced 2026-07-12 23:46:33 +02:00
Dustin Farley
205 lines
12 KiB
HTML
205 lines
12 KiB
HTML
<div v-if="activeTab === 'gibberish'" class="tab-content">
|
|
<div class="transform-layout">
|
|
<div class="transform-section">
|
|
<div class="section-header-card">
|
|
<div class="section-header-card-title">
|
|
<i class="fas fa-comments"></i>
|
|
<h3>Gibberish Generator</h3>
|
|
</div>
|
|
<p class="section-header-card-description">Generate gibberish text with consistent word mappings or create variations with random character removal.</p>
|
|
</div>
|
|
|
|
<!-- Mode Selection -->
|
|
<div class="button-group u-mb-16">
|
|
<button
|
|
:class="['btn', gibberishMode === 'random' ? 'btn-primary' : 'btn-secondary']"
|
|
@click="gibberishMode = 'random'"
|
|
>
|
|
<i class="fas fa-dice"></i> Gibberish Dictionary
|
|
</button>
|
|
<button
|
|
:class="['btn', gibberishMode === 'removal' ? 'btn-primary' : 'btn-secondary']"
|
|
@click="gibberishMode = 'removal'"
|
|
>
|
|
<i class="fas fa-eraser"></i> Character Removal
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Gibberish Dictionary Mode -->
|
|
<div v-if="gibberishMode === 'random'">
|
|
<div class="input-section">
|
|
<div class="section-header">
|
|
<h4><i class="fas fa-pen"></i> Input Text</h4>
|
|
<p>Enter text to convert into gibberish. Structure and punctuation will be preserved.</p>
|
|
</div>
|
|
<textarea
|
|
id="gibberish-input"
|
|
v-model="gibberishInput"
|
|
placeholder="Enter sentence to generate gibberish..."
|
|
rows="4"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="options-grid">
|
|
<label>
|
|
Seed (optional - for reproducible results)
|
|
<input type="text" v-model="gibberishSeed" placeholder="Leave empty for random" />
|
|
</label>
|
|
</div>
|
|
<div class="input-section">
|
|
<label>
|
|
Character Set
|
|
<input type="text" v-model="gibberishChars" placeholder="abcdefg..." />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="tool-toolbar">
|
|
<button type="button" class="transform-button tool-primary-btn" @click="sentenceToGibberish"><i class="fas fa-hammer"></i> Generate Gibberish</button>
|
|
</div>
|
|
|
|
<div v-if="gibberishOutput" class="output-section">
|
|
<div class="section-header">
|
|
<h4><i class="fas fa-language"></i> Gibberish Output</h4>
|
|
</div>
|
|
<div class="textarea-copy-wrap">
|
|
<textarea v-model="gibberishOutput" readonly rows="4"></textarea>
|
|
<button class="copy-button" @click="copyToClipboard(gibberishOutput)" title="Copy"><i class="fas fa-copy"></i></button>
|
|
</div>
|
|
|
|
<div class="section-header u-mt-16">
|
|
<h4><i class="fas fa-book"></i> Dictionary</h4>
|
|
</div>
|
|
<div class="textarea-copy-wrap">
|
|
<textarea v-model="gibberishDictionary" readonly rows="3"></textarea>
|
|
<button class="copy-button" @click="copyToClipboard(gibberishDictionary)" title="Copy"><i class="fas fa-copy"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Character Removal Mode -->
|
|
<div v-if="gibberishMode === 'removal'">
|
|
<!-- Sub-mode selection -->
|
|
<div class="button-group u-mb-16">
|
|
<button
|
|
:class="['btn', removalSubMode === 'random' ? 'btn-primary' : 'btn-secondary']"
|
|
@click="removalSubMode = 'random'"
|
|
>
|
|
<i class="fas fa-random"></i> Random Removal
|
|
</button>
|
|
<button
|
|
:class="['btn', removalSubMode === 'specific' ? 'btn-primary' : 'btn-secondary']"
|
|
@click="removalSubMode = 'specific'"
|
|
>
|
|
<i class="fas fa-crosshairs"></i> Specific Characters
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Random Removal Sub-mode -->
|
|
<div v-if="removalSubMode === 'random'">
|
|
<div class="input-section">
|
|
<div class="section-header">
|
|
<h4><i class="fas fa-pen"></i> Input Text</h4>
|
|
<p>Random letters will be removed from each word</p>
|
|
</div>
|
|
<textarea
|
|
id="removal-input"
|
|
v-model="removalInput"
|
|
placeholder="Enter text for random character removal..."
|
|
rows="4"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="options-grid">
|
|
<label>
|
|
Number of Variations
|
|
<input type="number" v-model.number="removalVariations" min="1" max="100" placeholder="10" />
|
|
</label>
|
|
<label>
|
|
Min Letters to Remove
|
|
<input type="number" v-model.number="removalMinLetters" min="0" max="10" placeholder="1" />
|
|
</label>
|
|
<label>
|
|
Max Letters to Remove
|
|
<input type="number" v-model.number="removalMaxLetters" min="1" max="20" placeholder="3" />
|
|
</label>
|
|
<label>
|
|
Seed (optional)
|
|
<input type="text" v-model="removalSeed" placeholder="Leave empty for random" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="tool-toolbar">
|
|
<button type="button" class="transform-button tool-primary-btn" @click="generateRandomRemovals">
|
|
<i class="fas fa-dice"></i> Generate Variations
|
|
</button>
|
|
<button class="action-button copy" v-if="removalOutputs.length" @click="copyAllRemovals">
|
|
<i class="fas fa-copy"></i> Copy All
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="removalOutputs.length" class="output-section">
|
|
<div class="output-heading">
|
|
<h4>
|
|
<i class="fas fa-list"></i> Variations
|
|
<small>{{ removalOutputs.length }} variation{{ removalOutputs.length !== 1 ? 's' : '' }}</small>
|
|
</h4>
|
|
</div>
|
|
<div class="split-messages-grid">
|
|
<div v-for="(output, index) in removalOutputs" :key="index" class="split-message-card">
|
|
<div class="split-message-header">
|
|
<span class="message-number">Variation {{ index + 1 }}</span>
|
|
<button class="copy-button-small" @click="copyToClipboard(output)" title="Copy">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<div class="split-message-content">{{ output }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Specific Removal Sub-mode -->
|
|
<div v-if="removalSubMode === 'specific'">
|
|
<div class="input-section">
|
|
<div class="section-header">
|
|
<h4><i class="fas fa-pen"></i> Input Text</h4>
|
|
<p>Remove specific characters from your text</p>
|
|
</div>
|
|
<textarea
|
|
id="removal-specific-input"
|
|
v-model="removalSpecificInput"
|
|
placeholder="Enter text..."
|
|
rows="4"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="options-grid">
|
|
<label>
|
|
Characters to Remove
|
|
<input type="text" v-model="removalCharsToRemove" placeholder="e.g., aeiou" />
|
|
<small>Enter the specific characters you want to remove</small>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="tool-toolbar">
|
|
<button type="button" class="transform-button tool-primary-btn" @click="generateSpecificRemoval">
|
|
<i class="fas fa-eraser"></i> Remove Characters
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="removalSpecificOutput" class="output-section">
|
|
<div class="section-header">
|
|
<h4><i class="fas fa-check"></i> Result</h4>
|
|
</div>
|
|
<div class="textarea-copy-wrap">
|
|
<textarea v-model="removalSpecificOutput" readonly rows="4"></textarea>
|
|
<button class="copy-button" @click="copyToClipboard(removalSpecificOutput)" title="Copy">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |