| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Interactive Exclamation Generator</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 bounce { |
| | 0%, 100% { transform: translateY(0); } |
| | 50% { transform: translateY(-20px); } |
| | } |
| | @keyframes shake { |
| | 0% { transform: rotate(0deg); } |
| | 25% { transform: rotate(5deg); } |
| | 50% { transform: rotate(0deg); } |
| | 75% { transform: rotate(-5deg); } |
| | 100% { transform: rotate(0deg); } |
| | } |
| | @keyframes confused { |
| | 0% { transform: rotate(0deg) scale(1); } |
| | 50% { transform: rotate(10deg) scale(1.1); } |
| | 100% { transform: rotate(0deg) scale(1); } |
| | } |
| | .character { |
| | transition: all 0.3s ease; |
| | } |
| | .bounce { |
| | animation: bounce 0.5s ease; |
| | } |
| | .shake { |
| | animation: shake 0.5s ease; |
| | } |
| | .confused { |
| | animation: confused 0.8s ease; |
| | } |
| | .speech-bubble { |
| | position: relative; |
| | background: #fff; |
| | border-radius: 1rem; |
| | padding: 1rem; |
| | filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); |
| | } |
| | .speech-bubble:after { |
| | content: ''; |
| | position: absolute; |
| | bottom: 0; |
| | left: 50%; |
| | width: 0; |
| | height: 0; |
| | border: 10px solid transparent; |
| | border-top-color: #fff; |
| | border-bottom: 0; |
| | margin-left: -10px; |
| | margin-bottom: -10px; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gradient-to-br from-purple-100 to-blue-100 min-h-screen flex flex-col items-center justify-center p-4"> |
| | <div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden"> |
| | <div class="p-6"> |
| | <h1 class="text-3xl font-bold text-center text-purple-800 mb-2">Exclamation Generator</h1> |
| | <p class="text-gray-600 text-center mb-6">Click the buttons to hear reactions!</p> |
| | |
| | <div class="flex flex-col items-center mb-8"> |
| | |
| | <div class="character relative mb-4" id="character"> |
| | <div class="w-32 h-32 bg-yellow-300 rounded-full relative"> |
| | |
| | <div class="absolute top-8 left-6 w-6 h-6 bg-white rounded-full flex justify-center items-center"> |
| | <div class="w-3 h-3 bg-black rounded-full"></div> |
| | </div> |
| | <div class="absolute top-8 right-6 w-6 h-6 bg-white rounded-full flex justify-center items-center"> |
| | <div class="w-3 h-3 bg-black rounded-full"></div> |
| | </div> |
| | |
| | <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-8 h-2 bg-black rounded-full"></div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="speech-bubble mb-4 hidden" id="speechBubble"> |
| | <p class="text-lg font-medium" id="exclamationText"></p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="grid grid-cols-3 gap-3"> |
| | <button onclick="triggerReaction('Ouch!', 'shake', 'bg-red-500')" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-4 rounded-lg transition-colors flex items-center justify-center"> |
| | <i class="fas fa-bolt mr-2"></i> Pain |
| | </button> |
| | <button onclick="triggerReaction('Iggit!', 'bounce', 'bg-green-500')" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-lg transition-colors flex items-center justify-center"> |
| | <i class="fas fa-star mr-2"></i> Surprise |
| | </button> |
| | <button onclick="triggerReaction('Äh?', 'confused', 'bg-blue-500')" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition-colors flex items-center justify-center"> |
| | <i class="fas fa-question mr-2"></i> Confusion |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="mt-6"> |
| | <label class="block text-gray-700 mb-2">Make your own exclamation:</label> |
| | <div class="flex"> |
| | <input type="text" id="customExclamation" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| | <button onclick="triggerCustom()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold px-4 py-2 rounded-r-lg transition-colors"> |
| | Go! |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <script> |
| | function triggerReaction(text, animation, colorClass) { |
| | const character = document.getElementById('character'); |
| | const speechBubble = document.getElementById('speechBubble'); |
| | const exclamationText = document.getElementById('exclamationText'); |
| | |
| | |
| | character.className = 'character relative mb-4'; |
| | speechBubble.className = 'speech-bubble mb-4'; |
| | |
| | |
| | character.classList.add(animation); |
| | speechBubble.classList.remove('hidden'); |
| | speechBubble.classList.add(colorClass); |
| | exclamationText.textContent = text; |
| | |
| | |
| | setTimeout(() => { |
| | character.classList.remove(animation); |
| | }, 1000); |
| | } |
| | |
| | function triggerCustom() { |
| | const input = document.getElementById('customExclamation'); |
| | if (input.value.trim() !== '') { |
| | triggerReaction(input.value, 'bounce', 'bg-purple-500'); |
| | input.value = ''; |
| | } |
| | } |
| | |
| | |
| | document.getElementById('character').addEventListener('click', function() { |
| | const reactions = [ |
| | {text: "Hey!", animation: "bounce", color: "bg-pink-500"}, |
| | {text: "Stop that!", animation: "shake", color: "bg-red-500"}, |
| | {text: "Haha!", animation: "bounce", color: "bg-yellow-500"}, |
| | {text: "Äh?", animation: "confused", color: "bg-blue-500"} |
| | ]; |
| | const random = Math.floor(Math.random() * reactions.length); |
| | triggerReaction(reactions[random].text, reactions[random].animation, reactions[random].color); |
| | }); |
| | </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=AhBoh/cazzata" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
