Spaces:
Running
Running
| <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> |