Spaces:

stinkyyy
/

queervernacular

Running

File size: 20,399 Bytes

c29409a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gay to Bro Translator™</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>
        @keyframes rainbow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        @keyframes sparkle {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.5; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .rainbow-bg {
            background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #00ff00, #0000ff, #8000ff, #ff00ff, #ff0000);
            background-size: 400% 400%;
            animation: rainbow 5s linear infinite;
        }
        
        .sparkle {
            animation: sparkle 1s infinite;
        }
        
        .shake {
            animation: shake 0.5s;
        }
        
        .float {
            animation: float 3s ease-in-out infinite;
        }
        
        .disco-ball {
            background: radial-gradient(circle at 30% 30%, #fff, #ddd 10%, #bbb 20%, transparent 30%),
                        radial-gradient(circle at 70% 70%, #fff, #ddd 10%, #bbb 20%, transparent 30%),
                        radial-gradient(circle at 30% 70%, #fff, #ddd 10%, #bbb 20%, transparent 30%),
                        radial-gradient(circle at 70% 30%, #fff, #ddd 10%, #bbb 20%, transparent 30%);
            background-color: #ccc;
        }
        
        .drag-queen {
            transition: all 0.3s ease;
        }
        
        .drag-queen:hover {
            transform: scale(1.05) rotate(5deg);
            filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.7));
        }
        
        .vogue {
            animation: vogue 2s infinite;
        }
        
        @keyframes vogue {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(5deg); }
            50% { transform: rotate(-5deg); }
            75% { transform: rotate(5deg); }
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-b from-pink-200 to-purple-300 flex flex-col items-center p-4">
    <!-- Disco ball -->
    <div class="disco-ball w-16 h-16 rounded-full absolute top-10 right-10 shadow-lg float"></div>
    
    <!-- Main container -->
    <div class="w-full max-w-2xl mt-16 bg-white bg-opacity-80 backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden border-4 border-purple-500">
        <!-- Rainbow header -->
        <div class="rainbow-bg p-4 text-center">
            <h1 class="text-4xl font-bold text-white drop-shadow-lg">
                <span class="sparkle">G</span>
                <span class="sparkle" style="animation-delay: 0.2s">A</span>
                <span class="sparkle" style="animation-delay: 0.4s">Y</span>
                <span class="mx-4">⇨</span>
                <span class="sparkle" style="animation-delay: 0.6s">B</span>
                <span class="sparkle" style="animation-delay: 0.8s">R</span>
                <span class="sparkle" style="animation-delay: 1s">O</span>
                <span class="text-xs align-top">™</span>
            </h1>
            <p class="text-white text-sm mt-2">The Official (Not Really) Translator of the Queer Vernacular</p>
        </div>
        
        <!-- Drag queen character -->
        <div class="drag-queen absolute left-10 top-1/3 bg-pink-500 text-white p-2 rounded-lg shadow-lg text-center w-24 vogue">
            <div class="text-4xl">👑</div>
            <div class="text-xs font-bold">Miss Translation 2023</div>
        </div>
        
        <!-- Content area -->
        <div class="p-6">
            <!-- Input area -->
            <div class="mb-6">
                <label class="block text-purple-800 font-bold mb-2" for="gay-input">
                    Enter your gayest phrase:
                </label>
                <div class="relative">
                    <input type="text" id="gay-input" class="w-full p-4 border-2 border-pink-300 rounded-lg focus:outline-none focus:border-purple-500 text-lg" placeholder="Yaaas queen! Slay!">
                    <button id="clear-btn" class="absolute right-2 top-2 bg-gray-200 hover:bg-gray-300 text-gray-700 p-1 rounded-full">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <button id="translate-btn" class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 active:scale-95 flex items-center justify-center">
                    <i class="fas fa-language mr-2"></i> TRANSLATE TO BRO
                    <i class="fas fa-dumbbell ml-2"></i>
                </button>
            </div>
            
            <!-- Output area -->
            <div class="mb-6">
                <label class="block text-purple-800 font-bold mb-2" for="bro-output">
                    Bro translation:
                </label>
                <div id="bro-output" class="w-full min-h-32 p-4 bg-gray-100 border-2 border-gray-300 rounded-lg text-lg font-mono">
                    <div class="text-gray-400 italic">Translation will appear here...</div>
                </div>
                <button id="copy-btn" class="mt-2 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg text-sm">
                    <i class="fas fa-copy mr-1"></i> Copy to clipboard
                </button>
                <button id="speak-btn" class="mt-2 ml-2 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg text-sm">
                    <i class="fas fa-volume-up mr-1"></i> Speak it
                </button>
            </div>
            
            <!-- Soundboard -->
            <div class="mt-8">
                <h3 class="text-purple-800 font-bold mb-3 text-center">BRO SOUNDBOARD</h3>
                <div class="grid grid-cols-3 gap-3">
                    <button class="sound-btn bg-red-500 hover:bg-red-600 text-white p-3 rounded-lg" data-sound="bruh">
                        <i class="fas fa-user mr-1"></i> "Bruh"
                    </button>
                    <button class="sound-btn bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-lg" data-sound="swole">
                        <i class="fas fa-dumbbell mr-1"></i> "Gains"
                    </button>
                    <button class="sound-btn bg-green-500 hover:bg-green-600 text-white p-3 rounded-lg" data-sound="chug">
                        <i class="fas fa-beer mr-1"></i> "Chug!"
                    </button>
                    <button class="sound-btn bg-yellow-500 hover:bg-yellow-600 text-white p-3 rounded-lg" data-sound="no-homo">
                        <i class="fas fa-handshake mr-1"></i> "No homo"
                    </button>
                    <button class="sound-btn bg-indigo-500 hover:bg-indigo-600 text-white p-3 rounded-lg" data-sound="bet">
                        <i class="fas fa-hand-holding-usd mr-1"></i> "Bet"
                    </button>
                    <button class="sound-btn bg-pink-500 hover:bg-pink-600 text-white p-3 rounded-lg" data-sound="savage">
                        <i class="fas fa-fire mr-1"></i> "Savage"
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="bg-gray-100 p-3 text-center text-sm text-gray-600">
            <p>This translator is 100% accurate (not really) | Not affiliated with any bros or queers | Made with ❤️ and ✨</p>
        </div>
    </div>
    
    <!-- Floating emojis that appear on translate -->
    <div id="emoji-party" class="fixed inset-0 pointer-events-none z-10 overflow-hidden"></div>
    
    <audio id="sound-bruh" src="https://www.soundjay.com/misc/sounds/bruh-01.mp3"></audio>
    <audio id="sound-swole" src="https://www.soundjay.com/misc/sounds/muscle-grunt-01.mp3"></audio>
    <audio id="sound-chug" src="https://www.soundjay.com/misc/sounds/bubbles-01.mp3"></audio>
    <audio id="sound-no-homo" src="https://www.soundjay.com/misc/sounds/snap-fingers-01.mp3"></audio>
    <audio id="sound-bet" src="https://www.soundjay.com/misc/sounds/cash-register-01.mp3"></audio>
    <audio id="sound-savage" src="https://www.soundjay.com/misc/sounds/fire-01.mp3"></audio>
    <audio id="sound-translate" src="https://www.soundjay.com/misc/sounds/magic-chime-01.mp3"></audio>
    <audio id="sound-error" src="https://www.soundjay.com/misc/sounds/fart-01.mp3"></audio>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM elements
            const gayInput = document.getElementById('gay-input');
            const broOutput = document.getElementById('bro-output');
            const translateBtn = document.getElementById('translate-btn');
            const clearBtn = document.getElementById('clear-btn');
            const copyBtn = document.getElementById('copy-btn');
            const speakBtn = document.getElementById('speak-btn');
            const soundBtns = document.querySelectorAll('.sound-btn');
            const emojiParty = document.getElementById('emoji-party');
            
            // Translation dictionary (very scientific)
            const gayToBroDictionary = {
                "yaaas": "hell yeah",
                "queen": "bro",
                "slay": "kill it",
                "werk": "get after it",
                "fierce": "jacked",
                "hunty": "dude",
                "sis": "bro",
                "mother": "daddy",
                "serving": "bringing",
                "lewk": "fit",
                "snatched": "ripped",
                "gagging": "pumped",
                "throwing shade": "talking trash",
                "reading": "roasting",
                "the house down": "out of the park",
                "spill the tea": "what's the gossip",
                "no tea no shade": "no offense",
                "living": "winning",
                "dead": "wrecked",
                "extra": "tryhard",
                "blessed": "lucky",
                "mawma": "bro",
                "purse first": "dip first",
                "tongue pop": "burp",
                "henny": "brewski",
                "kiki": "bro time",
                "trade": "bro",
                "butch": "alpha",
                "femme": "soft",
                "fishy": "bro",
                "tuck": "flex",
                "pad": "pump",
                "beat": "shredded",
                "boots": "facts",
                "the library is open": "truth bomb incoming",
                "shante": "later",
                "you stay": "peace out"
            };
            
            // Sound effects
            const sounds = {
                bruh: document.getElementById('sound-bruh'),
                swole: document.getElementById('sound-swole'),
                chug: document.getElementById('sound-chug'),
                "no-homo": document.getElementById('sound-no-homo'),
                bet: document.getElementById('sound-bet'),
                savage: document.getElementById('sound-savage'),
                translate: document.getElementById('sound-translate'),
                error: document.getElementById('sound-error')
            };
            
            // Event listeners
            translateBtn.addEventListener('click', translateToBro);
            clearBtn.addEventListener('click', clearInput);
            copyBtn.addEventListener('click', copyToClipboard);
            speakBtn.addEventListener('click', speakTranslation);
            
            // Soundboard buttons
            soundBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const sound = this.getAttribute('data-sound');
                    playSound(sound);
                    createEmoji(this.textContent.includes("Bruh") ? "💪" : 
                                this.textContent.includes("Gains") ? "🏋️" :
                                this.textContent.includes("Chug") ? "🍺" :
                                this.textContent.includes("homo") ? "✋" :
                                this.textContent.includes("Bet") ? "💰" : "🔥");
                });
            });
            
            // Translation function
            function translateToBro() {
                const inputText = gayInput.value.trim().toLowerCase();
                
                if (!inputText) {
                    broOutput.innerHTML = '<div class="text-red-500">Honey, you need to enter something first!</div>';
                    playSound('error');
                    document.body.classList.add('shake');
                    setTimeout(() => document.body.classList.remove('shake'), 500);
                    return;
                }
                
                playSound('translate');
                
                // Create emoji party
                createEmojiParty();
                
                // Simple word replacement
                let translatedText = inputText;
                for (const [gay, bro] of Object.entries(gayToBroDictionary)) {
                    const regex = new RegExp(gay, 'gi');
                    translatedText = translatedText.replace(regex, bro);
                }
                
                // Capitalize first letter
                translatedText = translatedText.charAt(0).toUpperCase() + translatedText.slice(1);
                
                // Add bro punctuation
                if (!translatedText.endsWith('!') && !translatedText.endsWith('.')) {
                    translatedText += Math.random() > 0.5 ? ' bro!' : ', dude.';
                }
                
                // Display with typing animation
                broOutput.innerHTML = '';
                typeWriter(translatedText, broOutput);
            }
            
            // Typing animation
            function typeWriter(text, element, i = 0) {
                if (i < text.length) {
                    element.innerHTML = text.substring(0, i+1) + '<span class="blinking-cursor">|</span>';
                    setTimeout(() => typeWriter(text, element, i+1), 50);
                } else {
                    element.innerHTML = text;
                }
            }
            
            // Clear input
            function clearInput() {
                gayInput.value = '';
                broOutput.innerHTML = '<div class="text-gray-400 italic">Translation will appear here...</div>';
            }
            
            // Copy to clipboard
            function copyToClipboard() {
                const text = broOutput.textContent;
                if (text.includes("Translation will appear")) {
                    playSound('error');
                    return;
                }
                
                navigator.clipboard.writeText(text).then(() => {
                    const originalText = copyBtn.innerHTML;
                    copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
                    setTimeout(() => {
                        copyBtn.innerHTML = originalText;
                    }, 2000);
                });
            }
            
            // Text-to-speech
            function speakTranslation() {
                const text = broOutput.textContent;
                if (text.includes("Translation will appear")) {
                    playSound('error');
                    return;
                }
                
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.rate = 0.9;
                utterance.pitch = 0.8;
                utterance.volume = 1;
                
                // Try to get a "bro" voice if available
                const voices = window.speechSynthesis.getVoices();
                const broVoice = voices.find(v => v.name.includes('Male')) || voices[0];
                if (broVoice) utterance.voice = broVoice;
                
                window.speechSynthesis.speak(utterance);
            }
            
            // Play sound effect
            function playSound(sound) {
                if (sounds[sound]) {
                    sounds[sound].currentTime = 0;
                    sounds[sound].play();
                }
            }
            
            // Create emoji party
            function createEmojiParty() {
                // Clear previous emojis
                emojiParty.innerHTML = '';
                
                const emojis = ['🌈', '✨', '👑', '💅', '💪', '🍺', '🔥', '💰', '🏋️'];
                
                // Create 20 random emojis
                for (let i = 0; i < 20; i++) {
                    const emoji = document.createElement('div');
                    emoji.className = 'absolute text-3xl';
                    emoji.style.left = `${Math.random() * 100}%`;
                    emoji.style.top = `${Math.random() * 100}%`;
                    emoji.style.transform = `scale(${Math.random() * 2 + 1}) rotate(${Math.random() * 360}deg)`;
                    emoji.style.opacity = 0;
                    emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                    
                    // Animate in
                    emoji.style.transition = 'all 1s ease-out';
                    setTimeout(() => {
                        emoji.style.opacity = 1;
                        emoji.style.top = `${Math.random() * 100}%`;
                        emoji.style.left = `${Math.random() * 100}%`;
                    }, 10);
                    
                    // Animate out
                    setTimeout(() => {
                        emoji.style.opacity = 0;
                        setTimeout(() => {
                            emoji.remove();
                        }, 1000);
                    }, 2000);
                    
                    emojiParty.appendChild(emoji);
                }
            }
            
            // Create single emoji
            function createEmoji(emojiChar) {
                const emoji = document.createElement('div');
                emoji.className = 'absolute text-3xl';
                emoji.style.left = `${Math.random() * 100}%`;
                emoji.style.top = `${Math.random() * 100}%`;
                emoji.style.transform = `scale(${Math.random() * 2 + 1})`;
                emoji.textContent = emojiChar;
                
                // Animate
                emoji.style.transition = 'all 1s ease-out';
                setTimeout(() => {
                    emoji.style.top = `${parseFloat(emoji.style.top) - 20}%`;
                    emoji.style.opacity = 0;
                }, 10);
                
                setTimeout(() => {
                    emoji.remove();
                }, 1000);
                
                emojiParty.appendChild(emoji);
            }
        });
    </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=stinkyyy/queervernacular" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>