| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Footy Banter Bot</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%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
| 40% {transform: translateY(-10px);} |
| 60% {transform: translateY(-5px);} |
| } |
| |
| .bounce { |
| animation: bounce 1s infinite; |
| } |
| |
| .chat-container { |
| height: 70vh; |
| scrollbar-width: thin; |
| scrollbar-color: #4f46e5 #e5e7eb; |
| } |
| |
| .chat-container::-webkit-scrollbar { |
| width: 6px; |
| } |
| |
| .chat-container::-webkit-scrollbar-track { |
| background: #e5e7eb; |
| } |
| |
| .chat-container::-webkit-scrollbar-thumb { |
| background-color: #4f46e5; |
| border-radius: 3px; |
| } |
| |
| .typing-indicator::after { |
| content: "..."; |
| display: inline-block; |
| animation: typing-dots 1.5s infinite; |
| } |
| |
| @keyframes typing-dots { |
| 0%, 20% {content: ".";} |
| 40% {content: "..";} |
| 60%, 100% {content: "...";} |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| |
| <header class="text-center mb-8"> |
| <div class="flex items-center justify-center mb-4"> |
| <i class="fas fa-futbol text-4xl text-indigo-600 mr-3"></i> |
| <h1 class="text-3xl font-bold text-indigo-700">Footy Banter Bot</h1> |
| </div> |
| <p class="text-gray-600">Your AI companion for football banter, debates, and jokes</p> |
| <div class="mt-4 flex justify-center space-x-2"> |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Premier League</span> |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">La Liga</span> |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Champions League</span> |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">World Cup</span> |
| </div> |
| </header> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| |
| <div class="bg-indigo-600 text-white p-4 flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-xl"></i> |
| </div> |
| <div> |
| <h2 class="font-bold">Footy Bot</h2> |
| <p class="text-xs text-indigo-200">Online</p> |
| </div> |
| <div class="ml-auto flex space-x-2"> |
| <button class="w-8 h-8 rounded-full bg-indigo-500 hover:bg-indigo-400 flex items-center justify-center"> |
| <i class="fas fa-ellipsis-v text-sm"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="chat-container p-4 overflow-y-auto" id="chat-messages"> |
| |
| <div class="flex mb-4"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="bg-indigo-50 rounded-lg p-3 max-w-xs md:max-w-md"> |
| <p class="text-gray-800">Alright mate! Ready for some proper football banter? Who's your team and why are they better than everyone else? 😏</p> |
| <p class="text-xs text-gray-500 mt-1">Just now</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="border-t p-4 bg-gray-50"> |
| <div class="flex items-center"> |
| <button class="w-10 h-10 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center mr-2"> |
| <i class="fas fa-plus text-gray-600"></i> |
| </button> |
| <input type="text" id="user-input" placeholder="Type your banter here..." |
| class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
| <button id="send-btn" class="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-700 flex items-center justify-center ml-2 text-white"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <div class="mt-2 flex space-x-2 overflow-x-auto"> |
| <button class="quick-btn px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm whitespace-nowrap">Messi vs Ronaldo</button> |
| <button class="quick-btn px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm whitespace-nowrap">VAR jokes</button> |
| <button class="quick-btn px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm whitespace-nowrap">Premier League banter</button> |
| <button class="quick-btn px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm whitespace-nowrap">Who's winning the league?</button> |
| <button class="quick-btn px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-full text-sm whitespace-nowrap">Worst transfer ever</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <footer class="mt-6 text-center text-sm text-gray-500"> |
| <p>Footy Banter Bot v1.0 • Not affiliated with any league or club • Just for fun</p> |
| </footer> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const chatMessages = document.getElementById('chat-messages'); |
| const userInput = document.getElementById('user-input'); |
| const sendBtn = document.getElementById('send-btn'); |
| const quickBtns = document.querySelectorAll('.quick-btn'); |
| |
| |
| const banterResponses = [ |
| "Oh please, your team's trophy cabinet has more dust than silverware!", |
| "That's rich coming from a fan whose club's biggest achievement is a participation award!", |
| "I've seen more attacking threat from a parked bus than your team's frontline!", |
| "Your goalkeeper has hands like a frying pan - everything slips through!", |
| "Your star player? More like a flat-track bully who disappears in big games!", |
| "Your manager's tactics are so outdated, he probably still uses a flip phone!", |
| "Your club's transfer policy: buy high, sell low, and pay the wages in between!", |
| "Your stadium atmosphere is so quiet, I've heard louder libraries!", |
| "Your team's defense has more holes than a slice of Swiss cheese!", |
| "Your club's so broke, the tea lady had to bring her own biscuits!", |
| "Your team's so slow, they make tectonic plates look quick!", |
| "Your club's youth academy? More like a retirement home for has-beens!", |
| "Your team's set pieces are so bad, IKEA instructions are more organized!", |
| "Your striker's first touch is so heavy, he could mine for coal with it!", |
| "Your club's so irrelevant, even your own fans support another team in Europe!" |
| ]; |
| |
| |
| const clubBanter = { |
| 'manchester united': "Still living off past glories I see? The only thing red about United these days is their balance sheet!", |
| 'manchester city': "Oil money can buy trophies, but it can't buy class or history!", |
| 'liverpool': "Always the nearly men! Even your 'This Is Anfield' sign is looking a bit rusty these days!", |
| 'chelsea': "Another season, another manager. At this rate, your club's more unstable than the Tory government!", |
| 'arsenal': "Fourth place is basically a trophy for you lot, isn't it?", |
| 'tottenham': "The only thing Spurs have won recently is the Netflix documentary award!", |
| 'real madrid': "Galácticos? More like Galácti-couldn't-be-bothered this season!", |
| 'barcelona': "Financial levers FC! Can't even register players without selling the Camp Nou toilets!", |
| 'psg': "Farmers league merchants! The only thing you're winning is the fashion show!", |
| 'bayern munich': "Bundesliga is so competitive, even my nan could manage Bayern to the title!", |
| 'juventus': "From Calciopoli to Calcio-poorly! When's the next scandal coming?", |
| 'ac milan': "Back from the dead like a zombie, but still not quite the force you used to be!", |
| 'inter milan': "The other Milan club - always in the shadow, even when you win something!" |
| }; |
| |
| |
| const playerBanter = { |
| 'ronaldo': "Ronaldo? More like Ro-NALDO when he doesn't get his way!", |
| 'messi': "The GOAT? More like the GOAT of walking around when his team doesn't have the ball!", |
| 'haaland': "Robo-striker! Does he even have a personality or just a goal-scoring algorithm?", |
| 'mbappe': "Speed merchant with the ego to match! Real Madrid's problem now!", |
| 'neymar': "More time on the floor than a mop! When's the next birthday party?", |
| 'kane': "Serial winner... of golden boots in meaningless games!", |
| 'pogba': "More hairstyles than match-winning performances!", |
| 'sterling': "Faster than my internet connection but just as unreliable in front of goal!", |
| 'lukaku': "First touch of a trampoline! Inter's problem again now!" |
| }; |
| |
| |
| function sendMessage() { |
| const message = userInput.value.trim(); |
| if (message === '') return; |
| |
| |
| addMessage(message, 'user'); |
| userInput.value = ''; |
| |
| |
| const typingIndicator = document.createElement('div'); |
| typingIndicator.className = 'flex mb-4'; |
| typingIndicator.innerHTML = ` |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="bg-indigo-50 rounded-lg p-3 max-w-xs md:max-w-md"> |
| <p class="text-gray-800 typing-indicator">Footy Bot is typing</p> |
| </div> |
| `; |
| chatMessages.appendChild(typingIndicator); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| |
| |
| setTimeout(() => { |
| |
| chatMessages.removeChild(typingIndicator); |
| |
| |
| const response = generateResponse(message.toLowerCase()); |
| addMessage(response, 'bot'); |
| }, 1500 + Math.random() * 2000); |
| } |
| |
| |
| function addMessage(message, sender) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `flex mb-4 ${sender === 'user' ? 'justify-end' : ''}`; |
| |
| if (sender === 'user') { |
| messageDiv.innerHTML = ` |
| <div class="bg-indigo-100 rounded-lg p-3 max-w-xs md:max-w-md"> |
| <p class="text-gray-800">${message}</p> |
| <p class="text-xs text-gray-500 mt-1 text-right">Just now</p> |
| </div> |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center ml-3 flex-shrink-0 text-white"> |
| <i class="fas fa-user"></i> |
| </div> |
| `; |
| } else { |
| messageDiv.innerHTML = ` |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="bg-indigo-50 rounded-lg p-3 max-w-xs md:max-w-md"> |
| <p class="text-gray-800">${message}</p> |
| <p class="text-xs text-gray-500 mt-1">Just now</p> |
| </div> |
| `; |
| } |
| |
| chatMessages.appendChild(messageDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
| |
| |
| function generateResponse(message) { |
| |
| for (const club in clubBanter) { |
| if (message.includes(club)) { |
| return clubBanter[club]; |
| } |
| } |
| |
| |
| for (const player in playerBanter) { |
| if (message.includes(player)) { |
| return playerBanter[player]; |
| } |
| } |
| |
| |
| if (message.includes('var') || message.includes('video assistant')) { |
| return "VAR is like my ex - inconsistent, confusing, and ruins the fun!"; |
| } |
| |
| if (message.includes('premier league') || message.includes('pl')) { |
| return "The Premier League - where every team thinks they're title contenders in August and are fighting relegation by October!"; |
| } |
| |
| if (message.includes('champions league') || message.includes('ucl')) { |
| return "Ah the Champions League, where English clubs spend billions to lose to Spanish teams who spend less than your local Sunday league!"; |
| } |
| |
| if (message.includes('world cup')) { |
| return "World Cup? The only thing coming home is another round of excuses!"; |
| } |
| |
| if (message.includes('messi') && message.includes('ronaldo')) { |
| return "The eternal debate! Messi makes it look easy, Ronaldo makes it look hard. Both make the rest look average!"; |
| } |
| |
| if (message.includes('transfer') || message.includes('signing')) { |
| const badTransfers = [ |
| "Maguire for £80m - they paid extra for the slabhead!", |
| "Coutinho to Barca - the gift that keeps on giving... to Liverpool!", |
| "Lukaku to Chelsea - twice the price, half the player!", |
| "Pepe to Arsenal - £72m for a winger who can't beat a man!", |
| "Kepa - most expensive goalkeeper to sit on the bench!" |
| ]; |
| return badTransfers[Math.floor(Math.random() * badTransfers.length)]; |
| } |
| |
| if (message.includes('manager') || message.includes('coach')) { |
| const managerJokes = [ |
| "Pep spends more on fullbacks than some countries spend on healthcare!", |
| "Klopp's teeth are whiter than his team's defending!", |
| "Arteta's hair gel budget is bigger than some clubs' transfer budgets!", |
| "Ten Hag looks like he's permanently smelling something bad - probably United's defending!", |
| "Conte's passion is only matched by his hair transplants!" |
| ]; |
| return managerJokes[Math.floor(Math.random() * managerJokes.length)]; |
| } |
| |
| |
| return banterResponses[Math.floor(Math.random() * banterResponses.length)]; |
| } |
| |
| |
| sendBtn.addEventListener('click', sendMessage); |
| |
| userInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| quickBtns.forEach(btn => { |
| btn.addEventListener('click', function() { |
| userInput.value = this.textContent; |
| sendMessage(); |
| }); |
| }); |
| }); |
| </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=EbukaGaus/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
