Spaces:

DotSlashGabut
/

codecipher

Running

File size: 33,887 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Encode/Decode Tool</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
        }
        .text-gradient {
            background: linear-gradient(90deg, #ff8a00, #e52e71);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .result-box {
            min-height: 150px;
            transition: all 0.3s ease;
        }
        .result-box.expanded {
            min-height: 250px;
        }
        .tab-active {
            border-bottom: 3px solid #4f46e5;
            color: #4f46e5;
            font-weight: 600;
        }
        .copy-btn {
            transition: all 0.2s ease;
        }
        .copy-btn:hover {
            transform: scale(1.05);
        }
        .copy-btn:active {
            transform: scale(0.95);
        }
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .blink {
            animation: blink-animation 1s steps(5, start) infinite;
        }
        @keyframes blink-animation {
            to {
                visibility: hidden;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="gradient-bg text-white py-6 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-lock text-3xl"></i>
                    <h1 class="text-2xl md:text-3xl font-bold">Code<span class="text-yellow-300">Cipher</span></h1>
                </div>
                <div class="hidden md:flex space-x-4">
                    <a href="#" class="hover:text-yellow-200 transition">Home</a>
                    <a href="#" class="hover:text-yellow-200 transition">About</a>
                    <a href="#" class="hover:text-yellow-200 transition">Tools</a>
                </div>
                <button class="md:hidden text-xl">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="p-6">
                <h2 class="text-2xl font-bold text-gray-800 mb-2">Encoding & Decoding Tool</h2>
                <p class="text-gray-600 mb-6">Convert between different encoding formats quickly and securely</p>
                
                <div class="flex space-x-4 border-b mb-6">
                    <button id="encode-tab" class="tab-active px-4 py-2">Encode</button>
                    <button id="decode-tab" class="px-4 py-2 text-gray-600 hover:text-gray-800">Decode</button>
                </div>
                
                <div class="mb-6">
                    <label for="method" class="block text-sm font-medium text-gray-700 mb-2">Encoding Method</label>
                    <select id="method" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="base64">Base64</option>
                        <option value="base32">Base32</option>
                        <option value="url">URL Encoding</option>
                        <option value="html">HTML Entities</option>
                        <option value="hex">Hexadecimal</option>
                        <option value="binary">Binary</option>
                        <option value="rot13">ROT13</option>
                    </select>
                </div>
                
                <div class="mb-6">
                    <label for="input-text" class="block text-sm font-medium text-gray-700 mb-2">Input Text</label>
                    <div class="relative">
                        <textarea id="input-text" rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter text to encode/decode..."></textarea>
                        <div class="absolute right-2 bottom-2 flex space-x-1">
                            <button id="sample-btn" class="tooltip bg-gray-100 text-gray-600 p-1 rounded hover:bg-gray-200">
                                <i class="fas fa-lightbulb"></i>
                                <span class="tooltiptext">Insert Sample</span>
                            </button>
                            <button id="clear-input-btn" class="tooltip bg-gray-100 text-gray-600 p-1 rounded hover:bg-gray-200">
                                <i class="fas fa-times"></i>
                                <span class="tooltiptext">Clear Input</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="flex space-x-4 mb-6">
                    <button id="process-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium transition flex items-center justify-center">
                        <i class="fas fa-cog mr-2"></i> Process
                    </button>
                    <button id="clear-btn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 px-6 rounded-lg font-medium transition flex items-center justify-center">
                        <i class="fas fa-trash-alt mr-2"></i> Clear All
                    </button>
                </div>
                
                <div class="bg-gray-50 p-4 rounded-lg result-box" id="result-container">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="font-medium text-gray-700">Result</h3>
                        <div class="flex space-x-2">
                            <button id="download-btn" class="tooltip copy-btn bg-green-100 text-green-600 p-2 rounded-lg hover:bg-green-200">
                                <i class="fas fa-download"></i>
                                <span class="tooltiptext">Download Result</span>
                            </button>
                            <button id="copy-btn" class="tooltip copy-btn bg-blue-100 text-blue-600 p-2 rounded-lg hover:bg-blue-200">
                                <i class="fas fa-copy"></i>
                                <span class="tooltiptext">Copy to Clipboard</span>
                            </button>
                            <button id="expand-btn" class="tooltip copy-btn bg-gray-200 text-gray-600 p-2 rounded-lg hover:bg-gray-300">
                                <i class="fas fa-expand"></i>
                                <span class="tooltiptext">Expand/Collapse</span>
                            </button>
                        </div>
                    </div>
                    <div id="result" class="text-gray-800 whitespace-pre-wrap break-words"></div>
                    <div id="char-count" class="text-xs text-gray-500 mt-2 text-right"></div>
                </div>
            </div>
            
            <div class="bg-gray-50 px-6 py-4 border-t">
                <h3 class="font-medium text-gray-700 mb-2">About Encoding Methods</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm text-gray-600">
                    <div class="bg-white p-3 rounded-lg shadow-sm">
                        <h4 class="font-medium text-blue-600 mb-1">Base64</h4>
                        <p>Encodes binary data to ASCII characters using 64 different characters (A-Z, a-z, 0-9, +, /). Commonly used for email attachments and embedding images in HTML.</p>
                    </div>
                    <div class="bg-white p-3 rounded-lg shadow-sm">
                        <h4 class="font-medium text-blue-600 mb-1">Base32</h4>
                        <p>Similar to Base64 but uses 32 different characters (A-Z, 2-7). More human-readable and case-insensitive, often used in OTP tokens and file hashes.</p>
                    </div>
                    <div class="bg-white p-3 rounded-lg shadow-sm">
                        <h4 class="font-medium text-blue-600 mb-1">URL Encoding</h4>
                        <p>Replaces unsafe ASCII characters with "%" followed by hexadecimal digits. Used in URLs to encode special characters.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-8 bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-gray-800">Recent Conversions</h2>
                    <button id="clear-history-btn" class="text-sm text-red-500 hover:text-red-700 flex items-center">
                        <i class="fas fa-trash-alt mr-1"></i> Clear History
                    </button>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Input</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Result</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="history-table">
                            <!-- History items will be added here -->
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 text-center text-sm text-gray-500" id="empty-history">
                    No recent conversions. Start encoding/decoding to see history here.
                </div>
            </div>
        </div>
    </div>
    
    <footer class="bg-gray-800 text-white py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">CodeCipher</h3>
                    <p class="text-gray-400">A powerful tool for all your encoding and decoding needs. Fast, secure, and easy to use.</p>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">Connect</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-github"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
                <p>&copy; 2023 CodeCipher. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Base32 implementation
        const Base32 = {
            chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567',
            pad: '=',
            
            encode: function(input) {
                if (!input) return '';
                
                let output = '';
                let buffer = 0;
                let bitsLeft = 0;
                
                for (let i = 0; i < input.length; i++) {
                    buffer = (buffer << 8) | input.charCodeAt(i);
                    bitsLeft += 8;
                    
                    while (bitsLeft >= 5) {
                        bitsLeft -= 5;
                        output += this.chars.charAt((buffer >>> bitsLeft) & 0x1F);
                    }
                }
                
                if (bitsLeft > 0) {
                    buffer <<= (5 - bitsLeft);
                    output += this.chars.charAt(buffer & 0x1F);
                }
                
                // Add padding
                const padCount = (8 - (output.length % 8)) % 8;
                output += this.pad.repeat(padCount);
                
                return output;
            },
            
            decode: function(input) {
                if (!input) return '';
                
                // Remove padding and convert to uppercase
                input = input.replace(new RegExp(this.pad + '+$', 'g'), '').toUpperCase();
                
                let output = '';
                let buffer = 0;
                let bitsLeft = 0;
                
                for (let i = 0; i < input.length; i++) {
                    const index = this.chars.indexOf(input.charAt(i));
                    if (index === -1) continue;
                    
                    buffer = (buffer << 5) | index;
                    bitsLeft += 5;
                    
                    if (bitsLeft >= 8) {
                        bitsLeft -= 8;
                        output += String.fromCharCode((buffer >>> bitsLeft) & 0xFF);
                    }
                }
                
                return output;
            }
        };

        document.addEventListener('DOMContentLoaded', function() {
            // DOM elements
            const encodeTab = document.getElementById('encode-tab');
            const decodeTab = document.getElementById('decode-tab');
            const methodSelect = document.getElementById('method');
            const inputText = document.getElementById('input-text');
            const processBtn = document.getElementById('process-btn');
            const clearBtn = document.getElementById('clear-btn');
            const clearInputBtn = document.getElementById('clear-input-btn');
            const sampleBtn = document.getElementById('sample-btn');
            const resultContainer = document.getElementById('result-container');
            const result = document.getElementById('result');
            const copyBtn = document.getElementById('copy-btn');
            const downloadBtn = document.getElementById('download-btn');
            const expandBtn = document.getElementById('expand-btn');
            const charCount = document.getElementById('char-count');
            const historyTable = document.getElementById('history-table');
            const emptyHistory = document.getElementById('empty-history');
            const clearHistoryBtn = document.getElementById('clear-history-btn');
            
            let isEncoding = true;
            let conversionHistory = JSON.parse(localStorage.getItem('conversionHistory')) || [];
            
            // Initialize
            updateHistoryTable();
            updateCharCount();
            
            // Event listeners for input changes
            inputText.addEventListener('input', updateCharCount);
            
            // Tab switching
            encodeTab.addEventListener('click', function() {
                isEncoding = true;
                encodeTab.classList.add('tab-active');
                decodeTab.classList.remove('tab-active');
                processBtn.innerHTML = '<i class="fas fa-cog mr-2"></i> Encode';
            });
            
            decodeTab.addEventListener('click', function() {
                isEncoding = false;
                decodeTab.classList.add('tab-active');
                encodeTab.classList.remove('tab-active');
                processBtn.innerHTML = '<i class="fas fa-cog mr-2"></i> Decode';
            });
            
            // Process button
            processBtn.addEventListener('click', function() {
                const method = methodSelect.value;
                const text = inputText.value.trim();
                
                if (!text) {
                    showAlert('Please enter some text to process', 'error');
                    return;
                }
                
                let processedText;
                
                try {
                    if (isEncoding) {
                        processedText = encodeText(text, method);
                    } else {
                        processedText = decodeText(text, method);
                    }
                    
                    result.textContent = processedText;
                    updateCharCount();
                    
                    // Add to history
                    addToHistory(method, text, processedText);
                    
                    // Show success message
                    showAlert('Operation completed successfully!', 'success');
                } catch (e) {
                    result.textContent = `Error: ${e.message}`;
                    showAlert('An error occurred during processing', 'error');
                }
            });
            
            // Clear buttons
            clearBtn.addEventListener('click', function() {
                inputText.value = '';
                result.textContent = '';
                updateCharCount();
            });
            
            clearInputBtn.addEventListener('click', function() {
                inputText.value = '';
                updateCharCount();
                inputText.focus();
            });
            
            // Sample button
            sampleBtn.addEventListener('click', function() {
                const method = methodSelect.value;
                let sampleText = '';
                
                switch(method) {
                    case 'base64':
                    case 'base32':
                        sampleText = 'Sample text to encode';
                        break;
                    case 'url':
                        sampleText = 'https://example.com/search?q=hello world';
                        break;
                    case 'html':
                        sampleText = '<div>Hello & Welcome</div>';
                        break;
                    case 'hex':
                        sampleText = '48656c6c6f20576f726c64';
                        break;
                    case 'binary':
                        sampleText = '01001000 01100101 01101100 01101100 01101111';
                        break;
                    case 'rot13':
                        sampleText = 'Uryyb Jbeyq';
                        break;
                    default:
                        sampleText = 'Sample text';
                }
                
                inputText.value = sampleText;
                updateCharCount();
            });
            
            // Copy button
            copyBtn.addEventListener('click', function() {
                if (!result.textContent) {
                    showAlert('No result to copy', 'error');
                    return;
                }
                
                navigator.clipboard.writeText(result.textContent)
                    .then(() => {
                        const originalIcon = copyBtn.innerHTML;
                        copyBtn.innerHTML = '<i class="fas fa-check"></i>';
                        setTimeout(() => {
                            copyBtn.innerHTML = originalIcon;
                        }, 2000);
                        showAlert('Copied to clipboard!', 'success');
                    })
                    .catch(err => {
                        console.error('Failed to copy text: ', err);
                        showAlert('Failed to copy to clipboard', 'error');
                    });
            });
            
            // Download button
            downloadBtn.addEventListener('click', function() {
                if (!result.textContent) {
                    showAlert('No result to download', 'error');
                    return;
                }
                
                const method = methodSelect.value;
                const isEncoded = isEncoding;
                const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
                let filename = `codecipher_${timestamp}`;
                
                if (isEncoded) {
                    filename += `_encoded.${method}`;
                } else {
                    filename += `_decoded.txt`;
                }
                
                const blob = new Blob([result.textContent], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                
                showAlert('Download started!', 'success');
            });
            
            // Expand button
            expandBtn.addEventListener('click', function() {
                resultContainer.classList.toggle('expanded');
                if (resultContainer.classList.contains('expanded')) {
                    expandBtn.innerHTML = '<i class="fas fa-compress"></i>';
                } else {
                    expandBtn.innerHTML = '<i class="fas fa-expand"></i>';
                }
            });
            
            // Clear history button
            clearHistoryBtn.addEventListener('click', function() {
                if (conversionHistory.length === 0) return;
                
                if (confirm('Are you sure you want to clear all history?')) {
                    conversionHistory = [];
                    localStorage.setItem('conversionHistory', JSON.stringify(conversionHistory));
                    updateHistoryTable();
                    showAlert('History cleared', 'success');
                }
            });
            
            // Encoding/Decoding functions
            function encodeText(text, method) {
                switch(method) {
                    case 'base64':
                        return btoa(unescape(encodeURIComponent(text)));
                    case 'base32':
                        return Base32.encode(text);
                    case 'url':
                        return encodeURIComponent(text);
                    case 'html':
                        return text.split('').map(c => `&#${c.charCodeAt(0)};`).join('');
                    case 'hex':
                        return text.split('').map(c => c.charCodeAt(0).toString(16)).join(' ');
                    case 'binary':
                        return text.split('').map(c => c.charCodeAt(0).toString(2).padStart(8, '0')).join(' ');
                    case 'rot13':
                        return text.replace(/[a-zA-Z]/g, function(c) {
                            return String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
                        });
                    default:
                        return text;
                }
            }
            
            function decodeText(text, method) {
                try {
                    switch(method) {
                        case 'base64':
                            return decodeURIComponent(escape(atob(text)));
                        case 'base32':
                            return Base32.decode(text);
                        case 'url':
                            return decodeURIComponent(text);
                        case 'html':
                            const doc = new DOMParser().parseFromString(text, 'text/html');
                            return doc.documentElement.textContent;
                        case 'hex':
                            return text.split(' ').map(h => String.fromCharCode(parseInt(h, 16))).join('');
                        case 'binary':
                            return text.split(' ').map(b => String.fromCharCode(parseInt(b, 2))).join('');
                        case 'rot13':
                            return text.replace(/[a-zA-Z]/g, function(c) {
                                return String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
                            });
                        default:
                            return text;
                    }
                } catch (e) {
                    throw new Error(`Invalid ${method} input: ${e.message}`);
                }
            }
            
            // History functions
            function addToHistory(method, input, output) {
                const conversion = {
                    method: method.charAt(0).toUpperCase() + method.slice(1),
                    input: input.length > 30 ? input.substring(0, 30) + '...' : input,
                    output: output.length > 30 ? output.substring(0, 30) + '...' : output,
                    fullInput: input,
                    fullOutput: output,
                    time: new Date().toLocaleTimeString(),
                    date: new Date().toLocaleDateString()
                };
                
                conversionHistory.unshift(conversion);
                if (conversionHistory.length > 10) {
                    conversionHistory.pop();
                }
                
                localStorage.setItem('conversionHistory', JSON.stringify(conversionHistory));
                updateHistoryTable();
            }
            
            function updateHistoryTable() {
                if (conversionHistory.length === 0) {
                    historyTable.innerHTML = '';
                    emptyHistory.style.display = 'block';
                    return;
                }
                
                emptyHistory.style.display = 'none';
                historyTable.innerHTML = '';
                
                conversionHistory.forEach((item, index) => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-gray-50';
                    row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.method}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.input}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.output}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <div>${item.time}</div>
                            <div class="text-xs text-gray-400">${item.date}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button class="history-action-btn p-1 text-blue-500 hover:text-blue-700" data-index="${index}">
                                <i class="fas fa-redo"></i>
                            </button>
                            <button class="history-delete-btn p-1 text-red-500 hover:text-red-700" data-index="${index}">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </td>
                    `;
                    
                    historyTable.appendChild(row);
                });
                
                // Add event listeners to action buttons
                document.querySelectorAll('.history-action-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const index = parseInt(this.getAttribute('data-index'));
                        const item = conversionHistory[index];
                        
                        methodSelect.value = item.method.toLowerCase();
                        inputText.value = item.fullInput;
                        result.textContent = item.fullOutput;
                        updateCharCount();
                        
                        // Set to decode if the output looks encoded
                        if (item.fullOutput !== decodeText(item.fullOutput, item.method.toLowerCase())) {
                            isEncoding = false;
                            decodeTab.classList.add('tab-active');
                            encodeTab.classList.remove('tab-active');
                            processBtn.innerHTML = '<i class="fas fa-cog mr-2"></i> Decode';
                        } else {
                            isEncoding = true;
                            encodeTab.classList.add('tab-active');
                            decodeTab.classList.remove('tab-active');
                            processBtn.innerHTML = '<i class="fas fa-cog mr-2"></i> Encode';
                        }
                    });
                });
                
                document.querySelectorAll('.history-delete-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const index = parseInt(this.getAttribute('data-index'));
                        conversionHistory.splice(index, 1);
                        localStorage.setItem('conversionHistory', JSON.stringify(conversionHistory));
                        updateHistoryTable();
                        showAlert('Item removed from history', 'success');
                    });
                });
            }
            
            // Helper functions
            function updateCharCount() {
                const inputLength = inputText.value.length;
                const resultLength = result.textContent.length;
                
                let countText = '';
                if (inputLength > 0) {
                    countText += `Input: ${inputLength} chars`;
                }
                if (resultLength > 0) {
                    if (countText) countText += ' • ';
                    countText += `Result: ${resultLength} chars`;
                }
                
                charCount.textContent = countText;
            }
            
            function showAlert(message, type) {
                // Remove any existing alerts
                const existingAlert = document.querySelector('.alert-message');
                if (existingAlert) {
                    existingAlert.remove();
                }
                
                const alert = document.createElement('div');
                alert.className = `alert-message fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
                    type === 'success' ? 'bg-green-500' : 'bg-red-500'
                } animate-bounce`;
                alert.innerHTML = `
                    <div class="flex items-center">
                        <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
                        <span>${message}</span>
                    </div>
                `;
                
                document.body.appendChild(alert);
                
                // Auto-remove after 3 seconds
                setTimeout(() => {
                    alert.classList.remove('animate-bounce');
                    alert.classList.add('opacity-0', 'transition-opacity', 'duration-300');
                    setTimeout(() => {
                        alert.remove();
                    }, 300);
                }, 3000);
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DotSlashGabut/codecipher" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>