P4RS3LT0NGV3/templates/decoder.html

<div v-if="activeTab === 'decoder'" class="tab-content">
                <div class="transform-layout">
                    <div class="input-section">
                        <div class="input-header">
                            <label for="decoder-input">Paste any encoded text to decode</label>
                            <select v-model="selectedDecoder" @change="runUniversalDecode" class="decoder-method-select">
                                <option value="auto">🔍 Auto-detect</option>
                                <option v-for="transform in getAllTransformsWithReverse()" :key="transform.name" :value="transform.name">
                                    {{ transform.name }}
                                </option>
                            </select>
                        </div>
                        <textarea 
                            id="decoder-input" 
                            v-model="decoderInput" 
                            placeholder="Paste any encoded text here... (Base64, Morse code, Binary, Braille, etc.)"
                            @input="runUniversalDecode"
                        ></textarea>
                    </div>
                    
                    <!-- Language Detection Banner -->
                    <div v-if="decoderLangDetected" class="decoder-lang-banner">
                        <div class="decoder-lang-info">
                            <i class="fas fa-language"></i>
                            <span>
                                <strong>{{ decoderLangDetected.language }}</strong> detected
                                <small v-if="decoderLangDetected.confidence === 'medium'" class="lang-confidence">(likely)</small>
                            </span>
                        </div>
                        <div class="decoder-lang-actions">
                            <button
                                class="decoder-translate-btn"
                                @click="decoderTranslateToEnglish"
                                :disabled="decoderTranslating"
                            >
                                <i :class="decoderTranslating ? 'fas fa-spinner fa-spin' : 'fas fa-arrow-right'"></i>
                                {{ decoderTranslating ? 'Translating...' : 'Translate to English' }}
                            </button>
                        </div>
                        <div v-if="decoderTranslateError" class="decoder-translate-error">
                            <i class="fas fa-exclamation-triangle"></i> {{ decoderTranslateError }}
                        </div>
                    </div>

                    <div class="output-section">
                        <div class="output-header">
                            <label>
                                <span v-if="decoderResult && decoderResult.method">
                                    Decoded using: <strong>{{ decoderResult.method }}</strong>
                                </span>
                                <span v-else>
                                    Decoded Output
                                </span>
                            </label>
                            <button 
                                v-if="decoderOutput" 
                                @click="copyToClipboard(decoderOutput)" 
                                class="copy-button"
                                title="Copy to clipboard"
                            >
                                <i class="fas fa-copy"></i> Copy
                            </button>
                        </div>
                        <textarea 
                            id="decoder-output" 
                            :value="decoderOutput" 
                            readonly
                            placeholder="Decoded text will appear here..."
                        ></textarea>
                        
                        <!-- Alternatives section -->
                        <div v-if="decoderResult && decoderResult.alternatives && decoderResult.alternatives.length > 0" class="alternatives-section">
                            <div class="alternatives-header">
                                <i class="fas fa-list"></i> {{ decoderResult.alternatives.length }} Alternative{{ decoderResult.alternatives.length > 1 ? 's' : '' }}:
                            </div>
                            <div class="alternatives-list">
                                <div 
                                    v-for="(alt, index) in decoderResult.alternatives" 
                                    :key="index" 
                                    class="alternative-item"
                                >
                                    <div class="alternative-method">{{ alt.method }}</div>
                                    <div class="alternative-preview">{{ alt.text.substring(0, 100) }}{{ alt.text.length > 100 ? '...' : '' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>