|
|
<!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> |
