Hugging Face's logo

Spaces:
THEMONEYHOLLIC
/
yanga-connect
Running

App Files Community
yanga-connect / index.html
THEMONEYHOLLIC's picture
THEMONEYHOLLIC
Add 2 files
73deb55 verified
raw
history blame contribute delete
51 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Yanga Connect - Official App</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 badgePulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
 }
.badge-animation {
 animation: badgePulse 1.5s infinite;
 }
.tab-active {
 border-bottom: 3px solid #FFD700;
 color: #FFD700;
 font-weight: bold;
 }
.match-card {
 transition: all 0.3s ease;
 }
.match-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 }
.stream-chat {
 scrollbar-width: thin;
 scrollbar-color: #FFD700 transparent;
 }
.stream-chat::-webkit-scrollbar {
 width: 5px;
 }
.stream-chat::-webkit-scrollbar-thumb {
 background-color: #FFD700;
 border-radius: 10px;
 }
.merch-item {
 transition: all 0.3s ease;
 }
.merch-item:hover {
 transform: scale(1.03);
 }
.fade-in {
 animation: fadeIn 0.5s ease-in;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
/* Modal styles */
 .modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.8);
 z-index: 1000;
 justify-content: center;
 align-items: center;
 }
.modal-content {
 background-color: #1F2937;
 padding: 20px;
 border-radius: 10px;
 max-width: 90%;
 max-height: 90%;
 overflow-y: auto;
 }
.close-modal {
 position: absolute;
 top: 15px;
 right: 15px;
 color: white;
 font-size: 30px;
 cursor: pointer;
 }
 </style>
</head>
<body class="bg-gray-100 font-sans text-white">
 <!-- App Container -->
 <div class="max-w-md mx-auto bg-gray-900 min-h-screen relative overflow-hidden">
 <!-- Header -->
 <header class="bg-green-800 p-4 shadow-lg">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2 cursor-pointer" onclick="showModal('club-info-modal')">
 <img src="https://images.unsplash.com/photo-1560272564-c83b66b1ad12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Yanga Logo" class="w-10 h-10 rounded-full object-cover">
 <h1 class="text-xl font-bold">Yanga Connect</h1>
 </div>
 <div class="flex items-center space-x-3">
 <button class="bg-yellow-500 text-gray-900 p-2 rounded-full" onclick="showModal('notifications-modal')">
 <i class="fas fa-bell"></i>
 </button>
 <div class="relative cursor-pointer" onclick="showModal('profile-modal')">
 <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Profile" class="w-10 h-10 rounded-full border-2 border-yellow-500 object-cover">
 <span class="absolute -bottom-1 -right-1 bg-yellow-500 text-xs font-bold px-1 rounded-full">VIP</span>
 </div>
 </div>
 </div>
<!-- Language Toggle -->
 <div class="flex justify-end mt-2">
 <div class="bg-gray-800 rounded-full p-1">
 <button class="px-3 py-1 rounded-full bg-green-700" onclick="changeLanguage('sw')">SW</button>
 <button class="px-3 py-1 rounded-full" onclick="changeLanguage('en')">EN</button>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="pb-20">
 <!-- Navigation Tabs -->
 <div class="flex border-b border-gray-700 bg-gray-800">
 <button class="flex-1 py-3 text-center tab-active" onclick="switchTab('home')">
 <i class="fas fa-home"></i>
 </button>
 <button class="flex-1 py-3 text-center" onclick="switchTab('fixtures')">
 <i class="fas fa-calendar-alt"></i>
 </button>
 <button class="flex-1 py-3 text-center" onclick="switchTab('store')">
 <i class="fas fa-store"></i>
 </button>
 <button class="flex-1 py-3 text-center" onclick="switchTab('trophies')">
 <i class="fas fa-trophy"></i>
 </button>
 <button class="flex-1 py-3 text-center" onclick="switchTab('ai')">
 <i class="fas fa-robot"></i>
 </button>
 </div>
<!-- Home Content -->
 <div id="home-content" class="fade-in">
 <!-- Breaking News Banner -->
 <div class="bg-red-700 px-4 py-2 flex items-center cursor-pointer" onclick="showModal('breaking-news-modal')">
 <span class="font-bold mr-2">BREAKING:</span>
 <marquee behavior="scroll" direction="left">Yanga signs new striker from Brazil! Press conference at 4PM today.</marquee>
 </div>
<!-- Featured Match -->
 <div class="p-4 bg-gradient-to-r from-green-900 to-green-800 m-4 rounded-xl shadow-lg match-card cursor-pointer" onclick="showModal('live-match-modal')">
 <div class="flex justify-between items-center mb-2">
 <span class="text-xs bg-yellow-500 text-gray-900 px-2 py-1 rounded-full">LIVE</span>
 <span class="text-xs">Tanzania Premier League</span>
 </div>
<div class="flex justify-between items-center py-2">
 <div class="text-center">
 <img src="https://images.unsplash.com/photo-1560272564-c83b66b1ad12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Yanga" class="mx-auto w-16 h-16 object-cover">
 <h3 class="font-bold mt-1">Yanga</h3>
 <p class="text-2xl font-bold">2</p>
 </div>
<div class="text-center">
 <p class="text-xs">65'</p>
 <p class="text-sm">LIVE</p>
 <button class="mt-2 bg-red-600 px-3 py-1 rounded-full text-xs">Watch</button>
 </div>
<div class="text-center">
 <img src="https://images.unsplash.com/photo-1551958219-acbc608c9097?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Simba" class="mx-auto w-16 h-16 object-cover">
 <h3 class="font-bold mt-1">Simba</h3>
 <p class="text-2xl font-bold">0</p>
 </div>
 </div>
<div class="mt-2 pt-2 border-t border-gray-700">
 <div class="flex justify-between text-xs">
 <span>National Stadium</span>
 <span>45,678 watching</span>
 </div>
 </div>
 </div>
<!-- AI Assistant Prompt -->
 <div class="mx-4 mb-4 p-3 bg-gray-800 rounded-lg flex items-center cursor-pointer" onclick="showModal('ai-assistant-modal')">
 <div class="bg-yellow-500 text-gray-900 p-2 rounded-full mr-3">
 <i class="fas fa-robot"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm">Ask me anything about Yanga's history, players, or matches!</p>
 </div>
 <button class="bg-green-700 px-3 py-1 rounded-full text-sm">Try Now</button>
 </div>
<!-- News Section -->
 <div class="mx-4 mb-4">
 <div class="flex justify-between items-center mb-2">
 <h2 class="font-bold text-lg">Latest News</h2>
 <a href="#" class="text-yellow-500 text-sm" onclick="showModal('all-news-modal')">See All</a>
 </div>
<div class="grid grid-cols-1 gap-3">
 <!-- News Item 1 -->
 <div class="bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showModal('news1-modal')">
 <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=200&q=80" alt="New Stadium" class="w-full h-40 object-cover">
 <div class="p-3">
 <div class="flex justify-between items-start">
 <h3 class="font-bold">New Stadium Plans Revealed</h3>
 <span class="text-xs text-gray-400">2h ago</span>
 </div>
 <p class="text-sm text-gray-300 mt-1">Club president unveils ambitious plans for a 60,000-seat stadium...</p>
 <div class="flex justify-between items-center mt-3">
 <div class="flex space-x-2">
 <span class="text-xs bg-green-700 px-2 py-1 rounded-full">Official</span>
 <span class="text-xs bg-blue-700 px-2 py-1 rounded-full">Stadium</span>
 </div>
 <button class="text-yellow-500 text-sm">Read More</button>
 </div>
 </div>
 </div>
<!-- News Item 2 -->
 <div class="bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showModal('news2-modal')">
 <img src="https://images.unsplash.com/photo-1579952363871-5b0c0e4b7b1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=200&q=80" alt="Player of the Month" class="w-full h-40 object-cover">
 <div class="p-3">
 <div class="flex justify-between items-start">
 <h3 class="font-bold">Player of the Month: John Bocco</h3>
 <span class="text-xs text-gray-400">1d ago</span>
 </div>
 <p class="text-sm text-gray-300 mt-1">Our captain wins the award for his outstanding performances in March...</p>
 <div class="flex justify-between items-center mt-3">
 <div class="flex space-x-2">
 <span class="text-xs bg-green-700 px-2 py-1 rounded-full">Official</span>
 <span class="text-xs bg-purple-700 px-2 py-1 rounded-full">Awards</span>
 </div>
 <button class="text-yellow-500 text-sm">Read More</button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Upcoming Matches -->
 <div class="mx-4 mb-4">
 <div class="flex justify-between items-center mb-2">
 <h2 class="font-bold text-lg">Upcoming Matches</h2>
 <a href="#" class="text-yellow-500 text-sm" onclick="showModal('fixtures-modal')">See Calendar</a>
 </div>
<div class="space-y-3">
 <!-- Match 1 -->
 <div class="bg-gray-800 p-3 rounded-lg flex items-center justify-between cursor-pointer" onclick="showModal('match1-modal')">
 <div class="flex items-center">
 <div class="text-center mr-4">
 <p class="text-xs">APR</p>
 <p class="text-xl font-bold">15</p>
 </div>
 <div>
 <p class="font-bold">Yanga vs Azam FC</p>
 <p class="text-sm text-gray-400">National Stadium • 4:00 PM</p>
 </div>
 </div>
 <button class="bg-green-700 px-3 py-1 rounded-full text-sm">Tickets</button>
 </div>
<!-- Match 2 -->
 <div class="bg-gray-800 p-3 rounded-lg flex items-center justify-between cursor-pointer" onclick="showModal('match2-modal')">
 <div class="flex items-center">
 <div class="text-center mr-4">
 <p class="text-xs">APR</p>
 <p class="text-xl font-bold">22</p>
 </div>
 <div>
 <p class="font-bold">Yanga vs Coastal Union</p>
 <p class="text-sm text-gray-400">National Stadium • 4:00 PM</p>
 </div>
 </div>
 <button class="bg-gray-700 px-3 py-1 rounded-full text-sm">Remind Me</button>
 </div>
 </div>
 </div>
<!-- Merchandise Preview -->
 <div class="mx-4 mb-4">
 <div class="flex justify-between items-center mb-2">
 <h2 class="font-bold text-lg">Official Store</h2>
 <a href="#" class="text-yellow-500 text-sm" onclick="showModal('store-modal')">View All</a>
 </div>
<div class="grid grid-cols-2 gap-3">
 <!-- Item 1 -->
 <div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('jersey-modal')">
 <img src="https://images.unsplash.com/photo-1521193089946-7aa29d1fe776?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Jersey" class="w-full h-40 object-cover">
 <div class="p-2">
 <h3 class="font-bold text-sm">2023 Home Jersey</h3>
 <p class="text-yellow-500 font-bold text-sm">TZS 45,000</p>
 <button class="w-full bg-green-700 text-xs py-1 rounded mt-1">Add to Cart</button>
 </div>
 </div>
<!-- Item 2 -->
 <div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('scarf-modal')">
 <img src="https://images.unsplash.com/photo-1518655048521-f130df041f66?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Scarf" class="w-full h-40 object-cover">
 <div class="p-2">
 <h3 class="font-bold text-sm">Official Scarf</h3>
 <p class="text-yellow-500 font-bold text-sm">TZS 25,000</p>
 <button class="w-full bg-green-700 text-xs py-1 rounded mt-1">Add to Cart</button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Hidden Content for Other Tabs -->
 <div id="fixtures-content" class="hidden">
 <div class="p-4">
 <h2 class="text-xl font-bold mb-4">Fixtures & Results</h2>
 <div class="space-y-3">
 <div class="bg-gray-800 p-3 rounded-lg cursor-pointer" onclick="showModal('fixture1-modal')">
 <div class="flex justify-between items-center">
 <div>
 <p class="font-bold">Yanga vs Azam FC</p>
 <p class="text-sm text-gray-400">Apr 15 • National Stadium</p>
 </div>
 <span class="bg-green-700 px-2 py-1 rounded-full text-xs">Upcoming</span>
 </div>
 </div>
 <div class="bg-gray-800 p-3 rounded-lg cursor-pointer" onclick="showModal('fixture2-modal')">
 <div class="flex justify-between items-center">
 <div>
 <p class="font-bold">Yanga vs Simba</p>
 <p class="text-sm text-gray-400">Apr 8 • National Stadium</p>
 </div>
 <span class="bg-yellow-500 text-gray-900 px-2 py-1 rounded-full text-xs">FT: 2-0</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<div id="store-content" class="hidden">
 <div class="p-4">
 <h2 class="text-xl font-bold mb-4">Official Store</h2>
 <div class="grid grid-cols-2 gap-3">
 <div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('jersey-modal')">
 <img src="https://images.unsplash.com/photo-1521193089946-7aa29d1fe776?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Jersey" class="w-full h-40 object-cover">
 <div class="p-2">
 <h3 class="font-bold text-sm">2023 Home Jersey</h3>
 <p class="text-yellow-500 font-bold text-sm">TZS 45,000</p>
 </div>
 </div>
 <div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('scarf-modal')">
 <img src="https://images.unsplash.com/photo-1518655048521-f130df041f66?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Scarf" class="w-full h-40 object-cover">
 <div class="p-2">
 <h3 class="font-bold text-sm">Official Scarf</h3>
 <p class="text-yellow-500 font-bold text-sm">TZS 25,000</p>
 </div>
 </div>
 <div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('cap-modal')">
 <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Cap" class="w-full h-40 object-cover">
 <div class="p-2">
 <h3 class="font-bold text-sm">Official Cap</h3>
 <p class="text-yellow-500 font-bold text-sm">TZS 18,000</p>
 </div>
 </div>
 <div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('mug-modal')">
 <img src="https://images.unsplash.com/photo-1517256064527-09c73fc73e38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" alt="Mug" class="w-full h-40 object-cover">
 <div class="p-2">
 <h3 class="font-bold text-sm">Official Mug</h3>
 <p class="text-yellow-500 font-bold text-sm">TZS 12,000</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<div id="trophies-content" class="hidden">
 <div class="p-4">
 <h2 class="text-xl font-bold mb-4">Club Honors</h2>
 <div class="space-y-4">
 <div class="bg-gray-800 p-4 rounded-lg cursor-pointer" onclick="showModal('league-modal')">
 <div class="flex items-center">
 <div class="bg-yellow-500 text-gray-900 p-3 rounded-full mr-4">
 <i class="fas fa-trophy text-xl"></i>
 </div>
 <div>
 <h3 class="font-bold">Tanzania Premier League</h3>
 <p class="text-sm text-gray-400">28 titles (Last: 2022/23)</p>
 </div>
 </div>
 </div>
 <div class="bg-gray-800 p-4 rounded-lg cursor-pointer" onclick="showModal('cup-modal')">
 <div class="flex items-center">
 <div class="bg-yellow-500 text-gray-900 p-3 rounded-full mr-4">
 <i class="fas fa-trophy text-xl"></i>
 </div>
 <div>
 <h3 class="font-bold">FA Cup</h3>
 <p class="text-sm text-gray-400">5 titles (Last: 2021)</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div id="ai-content" class="hidden">
 <div class="p-4">
 <h2 class="text-xl font-bold mb-4">Yanga AI Assistant</h2>
 <div class="bg-gray-800 p-4 rounded-lg">
 <div class="flex items-start mb-4">
 <div class="bg-yellow-500 text-gray-900 p-2 rounded-full mr-3">
 <i class="fas fa-robot"></i>
 </div>
 <div class="flex-1">
 <p>Hello! I'm your Yanga assistant. Ask me anything about the club's history, players, matches, or merchandise.</p>
 </div>
 </div>
 <div class="flex">
 <input type="text" placeholder="Ask me anything..." class="flex-1 bg-gray-700 rounded-l-lg px-4 py-2 focus:outline-none">
 <button class="bg-yellow-500 text-gray-900 px-4 py-2 rounded-r-lg">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 <div class="mt-4 text-sm text-gray-400">
 <p>Try asking:</p>
 <ul class="list-disc pl-5 mt-2 space-y-1">
 <li class="cursor-pointer hover:text-yellow-500" onclick="askQuestion('Who is the current captain?')">Who is the current captain?</li>
 <li class="cursor-pointer hover:text-yellow-500" onclick="askQuestion('When is the next match?')">When is the next match?</li>
 <li class="cursor-pointer hover:text-yellow-500" onclick="askQuestion('How many league titles has Yanga won?')">How many league titles has Yanga won?</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Bottom Navigation -->
 <nav class="fixed bottom-0 left-0 right-0 bg-gray-800 shadow-lg max-w-md mx-auto">
 <div class="flex justify-around">
 <button class="p-4 text-yellow-500" onclick="switchTab('home')">
 <i class="fas fa-home text-xl"></i>
 </button>
 <button class="p-4 text-gray-400" onclick="switchTab('fixtures')">
 <i class="fas fa-search text-xl"></i>
 </button>
 <button class="p-4 text-gray-400 relative" onclick="showModal('cart-modal')">
 <i class="fas fa-shopping-cart text-xl"></i>
 <span class="absolute top-2 right-2 bg-red-500 text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
 </button>
 <button class="p-4 text-gray-400" onclick="showModal('community-modal')">
 <i class="fas fa-user-friends text-xl"></i>
 </button>
 <button class="p-4 text-gray-400" onclick="showModal('more-modal')">
 <i class="fas fa-ellipsis-h text-xl"></i>
 </button>
 </div>
 </nav>
<!-- New Badge Notification -->
 <div class="absolute top-32 right-4 bg-yellow-500 text-gray-900 p-3 rounded-full shadow-lg badge-animation cursor-pointer" onclick="showModal('badge-modal')">
 <i class="fas fa-trophy text-xl"></i>
 </div>
<!-- Modals -->
 <div id="club-info-modal" class="modal">
 <div class="modal-content">
 <span class="close-modal" onclick="hideModal('club-info-modal')">&times;</span>
 <h2 class="text-xl font-bold mb-4">Young Africans SC</h2>
 <img src="https://images.unsplash.com/photo-1560272564-c83b66b1ad12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Yanga Logo" class="w-full h-40 object-cover mb-4 rounded-lg">
 <p class="mb-4">Young Africans Sports Club, commonly known as Yanga, is a Tanzanian professional football club based in Dar es Salaam. Founded in 1935, it is one of the most successful clubs in Tanzanian football history.</p>
 <div class="grid grid-cols-2 gap-4 mb-4">
 <div class="bg-gray-700 p-3 rounded-lg">
 <h3 class="font-bold text-yellow-500">Nickname</h3>
 <p>Wananchi</p>
 </div>
 <div class="bg-gray-700 p-3 rounded-lg">
 <h3 class="font-bold text-yellow-500">Stadium</h3>
 <p>Benjamin Mkapa</p>
 </div>
 <div class="bg-gray-700 p-3 rounded-lg">
 <h3 class="font-bold text-yellow-500">League Titles</h3>
 <p>28</p>
 </div>
 <div class="bg-gray-700 p-3 rounded-lg">
 <h3 class="font-bold text-yellow-500">Chairman</h3>
 <p>Eng. Hersi Said</p>
 </div>
 </div>
 <button class="w-full bg-yellow-500 text-gray-900 py-2 rounded-lg font-bold">Follow Club</button>
 </div>
 </div>
<div id="notifications-modal" class="modal">
 <div class="modal-content">
 <span class="close-modal" onclick="hideModal('notifications-modal')">&times;</span>
 <h2 class="text-xl font-bold mb-4">Notifications</h2>
 <div class="space-y-3">
 <div class="bg-gray-800 p-3 rounded-lg">
 <div class="flex items-start">
 <div class="bg-yellow-500 text-gray-900 p-2 rounded-full mr-3">
 <i class="fas fa-bell"></i>
 </div>
 <div>
 <h3 class="font-bold">Match Reminder</h3>
 <p class="text-sm text-gray-400">Yanga vs Simba starts in 1 hour</p>
 <p class="text-xs text-gray-500 mt-1">10 minutes ago</p>
 </div>
 </div>
 </div>
 <div class="bg-gray-800 p-3 rounded-lg">
 <div class="flex items-start">
 <div class="bg-green-500 text-gray-900 p-2 rounded-full mr-3">
 <i class="fas fa-store"></i>
 </div>
 <div>
 <h3 class="font-bold">New Merchandise</h3>
 <p class="text-sm text-gray-400">2023/24 home jersey now available</p>
 <p class="text-xs text-gray-500 mt-1">2 hours ago</p>
 </div>
 </div>
 </div>
 <div class="bg-gray-800 p-3 rounded-lg">
 <div class="flex items-start">
 <div class="bg-blue-500 text-gray-900 p-2 rounded-full mr-3">
 <i class="fas fa-trophy"></i>
 </div>
 <div>
 <h3 class="font-bold">Achievement Unlocked</h3>
 <p class="text-sm text-gray-400">You've earned the "Super Fan" badge</p>
 <p class="text-xs text-gray-500 mt-1">Yesterday</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div id="profile-modal" class="modal">
 <div class="modal-content">
 <span class="close-modal" onclick="hideModal('profile-modal')">&times;</span>
 <div class="flex flex-col items-center mb-4">
 <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Profile" class="w-20 h-20 rounded-full border-4 border-yellow-500 object-cover mb-2">
 <h2 class="text-xl font-bold">John Doe</h2>
 <p class="text-yellow-500 font-bold">VIP Member</p>
 </div>
<div class="bg-gray-800 p-4 rounded-lg mb-4">
 <div class="flex justify-between mb-2">
 <span>Membership Points</span>
 <span class="font-bold">1,250</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2.5">
 <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 45%"></div>
 </div>
 <p class="text-xs text-gray-400 mt-1">550 points to next level</p>
 </div>
<div class="space-y-3 mb-4">
 <button class="w-full bg-gray-800 p-3 rounded-lg text-left flex items-center">
 <i class="fas fa-user-circle mr-3 text-yellow-500"></i>
 <span>Edit Profile</span>
 </button>
 <button class="w-full bg-gray-800 p-3 rounded-lg text-left flex items-center">
 <i class="fas fa-ticket-alt mr-3 text-yellow-500"></i>
 <span>My Tickets</span>
 </button>
 <button class="w-full bg-gray-800 p-3 rounded-lg text-left flex items-center">
 <i class="fas fa-shopping-bag mr-3 text-yellow-500"></i>
 <span>My Orders</span>
 </button>
 <button class="w-full bg-gray-800 p-3 rounded-lg text-left flex items-center">
 <i class="fas fa-cog mr-3 text-yellow-500"></i>
 <span>Settings</span>
 </button>
 </div>
<button class="w-full bg-red-600 py-2 rounded-lg font-bold">Sign Out</button>
 </div>
 </div>
<div id="live-match-modal" class="modal">
 <div class="modal-content">
 <span class="close-modal" onclick="hideModal('live-match-modal')">&times;</span>
 <div class="flex justify-between items-center mb-2">
 <span class="text-xs bg-yellow-500 text-gray-900 px-2 py-1 rounded-full">LIVE</span>
 <span class="text-xs">Tanzania Premier League</span>
 </div>
<div class="flex justify-between items-center py-4">
 <div class="text-center">
 <img src="https://images.unsplash.com/photo-1560272564-c83b66b1ad12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Yanga" class="mx-auto w-20 h-20 object-cover">
 <h3 class="font-bold mt-1">Yanga</h3>
 <p class="text-3xl font-bold">2</p>
 </div>
<div class="text-center">
 <p class="text-sm">65'</p>
 <p class="text-sm">LIVE</p>
 </div>
<div class="text-center">
 <img src="https://images.unsplash.com/photo-1551958219-acbc608c9097?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Simba" class="mx-auto w-20 h-20 object-cover">
 <h3 class="font-bold mt-1">Simba</h3>
 <p class="text-3xl font-bold">0</p>
 </div>
 </div>
<div class="bg-gray-800 p-3 rounded-lg mb-4">
 <div class="flex justify-between text-sm mb-2">
 <span>National Stadium</span>
 <span>45,678 watching</span>
 </div>
 <div class="flex justify-between text-xs text-gray-400">
 <span>Match Day 24</span>
 <span>April 8, 2023</span>
 </div>
 </div>
<div class="bg-gray-800 p-3 rounded-lg mb-4">
 <h3 class="font-bold mb-2">Match Events</h3>
 <div class="space-y-2">
 <div class="flex items-center">
 <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-2">
 <i class="fas fa-futbol text-xs"></i>
 </div>
 <div>
 <p class="text-sm">Goal! Yanga 1-0 (Feisal Salum 23')</p>
 </div>
 </div>
 <div class="flex items-center">
 <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-2">
 <i class="fas fa-futbol text-xs"></i>
 </div>
 <div>
 <p class="text-sm">Goal! Yanga 2-0 (John Bocco 57')</p>
 </div>
 </div>
 <div class="flex items-center">
 <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-2">
 <i class="fas fa-exclamation text-xs"></i>
 </div>
 <div>
 <p class="text-sm">Yellow card (Simba player 42')</p>
 </div>
 </div>
 </div>
 </div>
<button class="w-full bg-red-600 py-3 rounded-lg font-bold mb-2 flex items-center justify-center">
 <i class="fas fa-play mr-2"></i> Watch Live
 </button>
 <button class="w-full bg-gray-800 py-3 rounded-lg font-bold flex items-center justify-center">
 <i class="fas fa-comment-alt mr-2"></i> Live Chat
 </button>
 </div>
 </div>
<div id="news1-modal" class="modal">
 <div class="modal-content">
 <span class="close-modal" onclick="hideModal('news1-modal')">&times;</span>
 <h2 class="text-xl font-bold mb-2">New Stadium Plans Revealed</h2>
 <p class="text-sm text-gray-400 mb-4">2 hours ago • By Club Communications</p>
 <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=300&q=80" alt="New Stadium" class="w-full h-48 object-cover mb-4 rounded-lg">
<div class="prose text-sm text-gray-300">
 <p>Club president Hersi Said today unveiled ambitious plans for a new 60,000-seat stadium that will serve as the new home for Young Africans SC.</p>
<p class="mt-4">The state-of-the-art facility, to be built in the outskirts of Dar es Salaam, will feature modern amenities including:</p>
<ul class="list-disc pl-5 mt-2 space-y-1">
 <li>Premium VIP lounges and corporate boxes</li>
 <li>Expanded media facilities for broadcasters</li>
 <li>Underground parking for 5,000 vehicles</li>
 <li>Retail and commercial spaces</li>
 <li>Training facilities for the academy</li>
 </ul>
<p class="mt-4">"This is a historic moment for our club," said President Said during the press conference. "We've been working on these plans for years, and now we're ready to share our vision with the Wananchi family."</p>
<p class="mt-4">Construction is expected to begin in early 2024, with completion targeted for the 2026/27 season. The club is currently in discussions with potential naming rights partners for the new stadium.</p>
 </div>
<div class="flex justify-between items-center mt-6">
 <div class="flex space-x-2">
 <button class="bg-gray-800 px-3 py-1 rounded-full text-sm flex items-center">
 <i class="far fa-thumbs-up mr-1"></i> 245
 </button>
 <button class="bg-gray-800 px-3 py-1 rounded-full text-sm flex items-center">
 <i class="far fa-comment mr-1"></i> 43
 </button>
 </div>
 <button class="bg-gray-800 px-3 py-1 rounded-full text-sm flex items-center">
 <i class="fas fa-share-alt mr-1"></i> Share
 </button>
 </div>
 </div>
 </div>
<div id="cart-modal" class="modal">
 <div class="modal-content">
 <span class="close-modal" onclick="hideModal('cart-modal')">&times;</span>
 <h2 class="text-xl font-bold mb-4">Your Cart (3 items)</h2>
<div class="space-y-3 mb-4">
 <div class="bg-gray-800 p-3 rounded-lg flex items-center">
 <img src="https://images.unsplash.com/photo-1521193089946-7aa29d1fe776?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="Jersey" class="w-16 h-16 object-cover rounded-lg mr-3">
 <div class="flex-1">
 <h3 class="font-bold text-sm">2023 Home Jersey</h3>
 <p class="text-yellow-500 font-bold text-sm">TZS 45,000</p>
 <div class="flex items-center mt-1">
 <button class="bg-gray-700 px-2 rounded-l">-</button>
 <span class="bg-gray-700 px-3">1</span>
 <button class="bg-gray-700 px-2 rounded-r">+</button>
 </div>
 </div>
 <button class="text-red-500">
 <i class="fas fa-trash"></i>
 </button>
 </div>
<div class="bg-gray-800 p-3 rounded-lg flex items-center">
 <img src="https://images.unsplash.com/photo-1518655048521-f130df041f66?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="Scarf" class="w-16 h-16 object-cover rounded-lg mr-3">
 <div class="flex-1">
 <h3 class="font-bold text-sm">Official Scarf</h3>
 <p class="text-yellow-500 font-bold text-sm">TZS 25,000</p>
 <div class="flex items-center mt-1">
 <button class="bg-gray-700 px-2 rounded-l">-</button>
 <span class="bg-gray-700 px-3">2</span>
 <button class="bg-gray-700 px-2 rounded-r">+</button>
 </div>
 </div>
 <button class="text-red-500">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
<div class="bg-gray-800 p-3 rounded-lg mb-4">
 <div class="flex justify-between mb-2">
 <span>Subtotal</span>
 <span class="font-bold">TZS 95,000</span>
 </div>
 <div class="flex justify-between mb-2">
 <span>Shipping</span>
 <span class="font-bold">TZS 5,000</span>
 </div>
 <div class="flex justify-between font-bold text-lg">
 <span>Total</span>
 <span class="text-yellow-500">TZS 100,000</span>
 </div>
 </div>
<button class="w-full bg-yellow-500 text-gray-900 py-3 rounded-lg font-bold mb-2">
 Proceed to Checkout
 </button>
 <button class="w-full bg-gray-800 py-3 rounded-lg font-bold">
 Continue Shopping
 </button>
 </div>
 </div>
<!-- More modals would be added here for other content -->
</div>
<script>
 // Tab switching functionality
 function switchTab(tabName) {
 // Hide all content sections
 document.getElementById('home-content').classList.add('hidden');
 document.getElementById('fixtures-content').classList.add('hidden');
 document.getElementById('store-content').classList.add('hidden');
 document.getElementById('trophies-content').classList.add('hidden');
 document.getElementById('ai-content').classList.add('hidden');
// Remove active class from all tabs
 document.querySelectorAll('.flex button').forEach(tab => {
 tab.classList.remove('tab-active');
 tab.classList.add('text-gray-400');
 });
// Show selected content and update tab
 switch(tabName) {
 case 'home':
 document.getElementById('home-content').classList.remove('hidden');
 document.querySelector('.flex button:nth-child(1)').classList.add('tab-active');
 document.querySelector('.flex button:nth-child(1)').classList.remove('text-gray-400');
 break;
 case 'fixtures':
 document.getElementById('fixtures-content').classList.remove('hidden');
 document.querySelector('.flex button:nth-child(2)').classList.add('tab-active');
 document.querySelector('.flex button:nth-child(2)').classList.remove('text-gray-400');
 break;
 case 'store':
 document.getElementById('store-content').classList.remove('hidden');
 document.querySelector('.flex button:nth-child(3)').classList.add('tab-active');
 document.querySelector('.flex button:nth-child(3)').classList.remove('text-gray-400');
 break;
 case 'trophies':
 document.getElementById('trophies-content').classList.remove('hidden');
 document.querySelector('.flex button:nth-child(4)').classList.add('tab-active');
 document.querySelector('.flex button:nth-child(4)').classList.remove('text-gray-400');
 break;
 case 'ai':
 document.getElementById('ai-content').classList.remove('hidden');
 document.querySelector('.flex button:nth-child(5)').classList.add('tab-active');
 document.querySelector('.flex button:nth-child(5)').classList.remove('text-gray-400');
 break;
 }
// Update bottom navigation highlight
 document.querySelectorAll('nav button').forEach(btn => {
 btn.classList.remove('text-yellow-500');
 btn.classList.add('text-gray-400');
 });
document.querySelector(`nav button:nth-child(${tabName === 'home' ? 1 : tabName === 'fixtures' ? 2 : tabName === 'store' ? 3 : tabName === 'trophies' ? 4 : 5})`).classList.add('text-yellow-500');
 document.querySelector(`nav button:nth-child(${tabName === 'home' ? 1 : tabName === 'fixtures' ? 2 : tabName === 'store' ? 3 : tabName === 'trophies' ? 4 : 5})`).classList.remove('text-gray-400');
 }
// Modal functions
 function showModal(modalId) {
 document.getElementById(modalId).style.display = 'flex';
 }
function hideModal(modalId) {
 document.getElementById(modalId).style.display = 'none';
 }
// Close modals when clicking outside content
 window.onclick = function(event) {
 if (event.target.className === 'modal') {
 event.target.style.display = 'none';
 }
 }
// Language change
 function changeLanguage(lang) {
 const swBtn = document.querySelector('.bg-gray-800 button:first-child');
 const enBtn = document.querySelector('.bg-gray-800 button:last-child');
if (lang === 'sw') {
 swBtn.classList.add('bg-green-700');
 enBtn.classList.remove('bg-green-700');
 // In a real app, we'd change the language here
 } else {
 enBtn.classList.add('bg-green-700');
 swBtn.classList.remove('bg-green-700');
 // In a real app, we'd change the language here
 }
 }
// Simulate badge unlock
 setTimeout(() => {
 const badge = document.querySelector('.badge-animation');
 badge.innerHTML = '<i class="fas fa-medal text-xl"></i>';
 badge.classList.remove('bg-yellow-500');
 badge.classList.add('bg-purple-600');
 }, 3000);
// Add hover effects to match cards
 document.querySelectorAll('.match-card').forEach(card => {
 card.addEventListener('mouseenter', function() {
 this.classList.add('shadow-lg');
 });
 card.addEventListener('mouseleave', function() {
 this.classList.remove('shadow-lg');
 });
 });
// AI assistant question
 function askQuestion(question) {
 alert(`You asked: "${question}"\n\nIn a real app, this would trigger an AI response.`);
 }
 </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=THEMONEYHOLLIC/yanga-connect" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>