Spaces:
Running
Running
Add 2 files
Browse files- index.html +570 -45
- prompts.txt +2 -1
index.html
CHANGED
|
@@ -62,6 +62,38 @@
|
|
| 62 |
from { opacity: 0; }
|
| 63 |
to { opacity: 1; }
|
| 64 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 65 |
</style>
|
| 66 |
</head>
|
| 67 |
<body class="bg-gray-100 font-sans text-white">
|
|
@@ -70,15 +102,15 @@
|
|
| 70 |
<!-- Header -->
|
| 71 |
<header class="bg-green-800 p-4 shadow-lg">
|
| 72 |
<div class="flex justify-between items-center">
|
| 73 |
-
<div class="flex items-center space-x-2">
|
| 74 |
<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">
|
| 75 |
<h1 class="text-xl font-bold">Yanga Connect</h1>
|
| 76 |
</div>
|
| 77 |
<div class="flex items-center space-x-3">
|
| 78 |
-
<button class="bg-yellow-500 text-gray-900 p-2 rounded-full">
|
| 79 |
<i class="fas fa-bell"></i>
|
| 80 |
</button>
|
| 81 |
-
<div class="relative">
|
| 82 |
<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">
|
| 83 |
<span class="absolute -bottom-1 -right-1 bg-yellow-500 text-xs font-bold px-1 rounded-full">VIP</span>
|
| 84 |
</div>
|
|
@@ -88,8 +120,8 @@
|
|
| 88 |
<!-- Language Toggle -->
|
| 89 |
<div class="flex justify-end mt-2">
|
| 90 |
<div class="bg-gray-800 rounded-full p-1">
|
| 91 |
-
<button class="px-3 py-1 rounded-full bg-green-700">SW</button>
|
| 92 |
-
<button class="px-3 py-1 rounded-full">EN</button>
|
| 93 |
</div>
|
| 94 |
</div>
|
| 95 |
</header>
|
|
@@ -98,19 +130,19 @@
|
|
| 98 |
<main class="pb-20">
|
| 99 |
<!-- Navigation Tabs -->
|
| 100 |
<div class="flex border-b border-gray-700 bg-gray-800">
|
| 101 |
-
<button class="flex-1 py-3 text-center tab-active">
|
| 102 |
<i class="fas fa-home"></i>
|
| 103 |
</button>
|
| 104 |
-
<button class="flex-1 py-3 text-center">
|
| 105 |
<i class="fas fa-calendar-alt"></i>
|
| 106 |
</button>
|
| 107 |
-
<button class="flex-1 py-3 text-center">
|
| 108 |
<i class="fas fa-store"></i>
|
| 109 |
</button>
|
| 110 |
-
<button class="flex-1 py-3 text-center">
|
| 111 |
<i class="fas fa-trophy"></i>
|
| 112 |
</button>
|
| 113 |
-
<button class="flex-1 py-3 text-center">
|
| 114 |
<i class="fas fa-robot"></i>
|
| 115 |
</button>
|
| 116 |
</div>
|
|
@@ -118,13 +150,13 @@
|
|
| 118 |
<!-- Home Content -->
|
| 119 |
<div id="home-content" class="fade-in">
|
| 120 |
<!-- Breaking News Banner -->
|
| 121 |
-
<div class="bg-red-700 px-4 py-2 flex items-center">
|
| 122 |
<span class="font-bold mr-2">BREAKING:</span>
|
| 123 |
<marquee behavior="scroll" direction="left">Yanga signs new striker from Brazil! Press conference at 4PM today.</marquee>
|
| 124 |
</div>
|
| 125 |
|
| 126 |
<!-- Featured Match -->
|
| 127 |
-
<div class="p-4 bg-gradient-to-r from-green-900 to-green-800 m-4 rounded-xl shadow-lg match-card">
|
| 128 |
<div class="flex justify-between items-center mb-2">
|
| 129 |
<span class="text-xs bg-yellow-500 text-gray-900 px-2 py-1 rounded-full">LIVE</span>
|
| 130 |
<span class="text-xs">Tanzania Premier League</span>
|
|
@@ -159,7 +191,7 @@
|
|
| 159 |
</div>
|
| 160 |
|
| 161 |
<!-- AI Assistant Prompt -->
|
| 162 |
-
<div class="mx-4 mb-4 p-3 bg-gray-800 rounded-lg flex items-center">
|
| 163 |
<div class="bg-yellow-500 text-gray-900 p-2 rounded-full mr-3">
|
| 164 |
<i class="fas fa-robot"></i>
|
| 165 |
</div>
|
|
@@ -173,12 +205,12 @@
|
|
| 173 |
<div class="mx-4 mb-4">
|
| 174 |
<div class="flex justify-between items-center mb-2">
|
| 175 |
<h2 class="font-bold text-lg">Latest News</h2>
|
| 176 |
-
<a href="#" class="text-yellow-500 text-sm">See All</a>
|
| 177 |
</div>
|
| 178 |
|
| 179 |
<div class="grid grid-cols-1 gap-3">
|
| 180 |
<!-- News Item 1 -->
|
| 181 |
-
<div class="bg-gray-800 rounded-lg overflow-hidden">
|
| 182 |
<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">
|
| 183 |
<div class="p-3">
|
| 184 |
<div class="flex justify-between items-start">
|
|
@@ -197,7 +229,7 @@
|
|
| 197 |
</div>
|
| 198 |
|
| 199 |
<!-- News Item 2 -->
|
| 200 |
-
<div class="bg-gray-800 rounded-lg overflow-hidden">
|
| 201 |
<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">
|
| 202 |
<div class="p-3">
|
| 203 |
<div class="flex justify-between items-start">
|
|
@@ -221,12 +253,12 @@
|
|
| 221 |
<div class="mx-4 mb-4">
|
| 222 |
<div class="flex justify-between items-center mb-2">
|
| 223 |
<h2 class="font-bold text-lg">Upcoming Matches</h2>
|
| 224 |
-
<a href="#" class="text-yellow-500 text-sm">See Calendar</a>
|
| 225 |
</div>
|
| 226 |
|
| 227 |
<div class="space-y-3">
|
| 228 |
<!-- Match 1 -->
|
| 229 |
-
<div class="bg-gray-800 p-3 rounded-lg flex items-center justify-between">
|
| 230 |
<div class="flex items-center">
|
| 231 |
<div class="text-center mr-4">
|
| 232 |
<p class="text-xs">APR</p>
|
|
@@ -241,7 +273,7 @@
|
|
| 241 |
</div>
|
| 242 |
|
| 243 |
<!-- Match 2 -->
|
| 244 |
-
<div class="bg-gray-800 p-3 rounded-lg flex items-center justify-between">
|
| 245 |
<div class="flex items-center">
|
| 246 |
<div class="text-center mr-4">
|
| 247 |
<p class="text-xs">APR</p>
|
|
@@ -261,12 +293,12 @@
|
|
| 261 |
<div class="mx-4 mb-4">
|
| 262 |
<div class="flex justify-between items-center mb-2">
|
| 263 |
<h2 class="font-bold text-lg">Official Store</h2>
|
| 264 |
-
<a href="#" class="text-yellow-500 text-sm">View All</a>
|
| 265 |
</div>
|
| 266 |
|
| 267 |
<div class="grid grid-cols-2 gap-3">
|
| 268 |
<!-- Item 1 -->
|
| 269 |
-
<div class="bg-gray-800 rounded-lg overflow-hidden merch-item">
|
| 270 |
<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">
|
| 271 |
<div class="p-2">
|
| 272 |
<h3 class="font-bold text-sm">2023 Home Jersey</h3>
|
|
@@ -276,7 +308,7 @@
|
|
| 276 |
</div>
|
| 277 |
|
| 278 |
<!-- Item 2 -->
|
| 279 |
-
<div class="bg-gray-800 rounded-lg overflow-hidden merch-item">
|
| 280 |
<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">
|
| 281 |
<div class="p-2">
|
| 282 |
<h3 class="font-bold text-sm">Official Scarf</h3>
|
|
@@ -289,56 +321,544 @@
|
|
| 289 |
</div>
|
| 290 |
|
| 291 |
<!-- Hidden Content for Other Tabs -->
|
| 292 |
-
<div id="
|
| 293 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 294 |
</div>
|
| 295 |
</main>
|
| 296 |
|
| 297 |
<!-- Bottom Navigation -->
|
| 298 |
<nav class="fixed bottom-0 left-0 right-0 bg-gray-800 shadow-lg max-w-md mx-auto">
|
| 299 |
<div class="flex justify-around">
|
| 300 |
-
<button class="p-4 text-yellow-500">
|
| 301 |
<i class="fas fa-home text-xl"></i>
|
| 302 |
</button>
|
| 303 |
-
<button class="p-4 text-gray-400">
|
| 304 |
<i class="fas fa-search text-xl"></i>
|
| 305 |
</button>
|
| 306 |
-
<button class="p-4 text-gray-400 relative">
|
| 307 |
<i class="fas fa-shopping-cart text-xl"></i>
|
| 308 |
<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>
|
| 309 |
</button>
|
| 310 |
-
<button class="p-4 text-gray-400">
|
| 311 |
<i class="fas fa-user-friends text-xl"></i>
|
| 312 |
</button>
|
| 313 |
-
<button class="p-4 text-gray-400">
|
| 314 |
<i class="fas fa-ellipsis-h text-xl"></i>
|
| 315 |
</button>
|
| 316 |
</div>
|
| 317 |
</nav>
|
| 318 |
|
| 319 |
<!-- New Badge Notification -->
|
| 320 |
-
<div class="absolute top-32 right-4 bg-yellow-500 text-gray-900 p-3 rounded-full shadow-lg badge-animation">
|
| 321 |
<i class="fas fa-trophy text-xl"></i>
|
| 322 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 323 |
</div>
|
| 324 |
|
| 325 |
<script>
|
| 326 |
-
//
|
| 327 |
-
|
| 328 |
-
|
| 329 |
-
|
| 330 |
-
|
| 331 |
-
|
| 332 |
-
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
|
| 336 |
-
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
document.getElementById('other-content').classList.add('hidden');
|
| 340 |
});
|
| 341 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 342 |
|
| 343 |
// Simulate badge unlock
|
| 344 |
setTimeout(() => {
|
|
@@ -357,6 +877,11 @@
|
|
| 357 |
this.classList.remove('shadow-lg');
|
| 358 |
});
|
| 359 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 360 |
</script>
|
| 361 |
<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>
|
| 362 |
</html>
|
|
|
|
| 62 |
from { opacity: 0; }
|
| 63 |
to { opacity: 1; }
|
| 64 |
}
|
| 65 |
+
|
| 66 |
+
/* Modal styles */
|
| 67 |
+
.modal {
|
| 68 |
+
display: none;
|
| 69 |
+
position: fixed;
|
| 70 |
+
top: 0;
|
| 71 |
+
left: 0;
|
| 72 |
+
width: 100%;
|
| 73 |
+
height: 100%;
|
| 74 |
+
background-color: rgba(0,0,0,0.8);
|
| 75 |
+
z-index: 1000;
|
| 76 |
+
justify-content: center;
|
| 77 |
+
align-items: center;
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
.modal-content {
|
| 81 |
+
background-color: #1F2937;
|
| 82 |
+
padding: 20px;
|
| 83 |
+
border-radius: 10px;
|
| 84 |
+
max-width: 90%;
|
| 85 |
+
max-height: 90%;
|
| 86 |
+
overflow-y: auto;
|
| 87 |
+
}
|
| 88 |
+
|
| 89 |
+
.close-modal {
|
| 90 |
+
position: absolute;
|
| 91 |
+
top: 15px;
|
| 92 |
+
right: 15px;
|
| 93 |
+
color: white;
|
| 94 |
+
font-size: 30px;
|
| 95 |
+
cursor: pointer;
|
| 96 |
+
}
|
| 97 |
</style>
|
| 98 |
</head>
|
| 99 |
<body class="bg-gray-100 font-sans text-white">
|
|
|
|
| 102 |
<!-- Header -->
|
| 103 |
<header class="bg-green-800 p-4 shadow-lg">
|
| 104 |
<div class="flex justify-between items-center">
|
| 105 |
+
<div class="flex items-center space-x-2 cursor-pointer" onclick="showModal('club-info-modal')">
|
| 106 |
<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">
|
| 107 |
<h1 class="text-xl font-bold">Yanga Connect</h1>
|
| 108 |
</div>
|
| 109 |
<div class="flex items-center space-x-3">
|
| 110 |
+
<button class="bg-yellow-500 text-gray-900 p-2 rounded-full" onclick="showModal('notifications-modal')">
|
| 111 |
<i class="fas fa-bell"></i>
|
| 112 |
</button>
|
| 113 |
+
<div class="relative cursor-pointer" onclick="showModal('profile-modal')">
|
| 114 |
<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">
|
| 115 |
<span class="absolute -bottom-1 -right-1 bg-yellow-500 text-xs font-bold px-1 rounded-full">VIP</span>
|
| 116 |
</div>
|
|
|
|
| 120 |
<!-- Language Toggle -->
|
| 121 |
<div class="flex justify-end mt-2">
|
| 122 |
<div class="bg-gray-800 rounded-full p-1">
|
| 123 |
+
<button class="px-3 py-1 rounded-full bg-green-700" onclick="changeLanguage('sw')">SW</button>
|
| 124 |
+
<button class="px-3 py-1 rounded-full" onclick="changeLanguage('en')">EN</button>
|
| 125 |
</div>
|
| 126 |
</div>
|
| 127 |
</header>
|
|
|
|
| 130 |
<main class="pb-20">
|
| 131 |
<!-- Navigation Tabs -->
|
| 132 |
<div class="flex border-b border-gray-700 bg-gray-800">
|
| 133 |
+
<button class="flex-1 py-3 text-center tab-active" onclick="switchTab('home')">
|
| 134 |
<i class="fas fa-home"></i>
|
| 135 |
</button>
|
| 136 |
+
<button class="flex-1 py-3 text-center" onclick="switchTab('fixtures')">
|
| 137 |
<i class="fas fa-calendar-alt"></i>
|
| 138 |
</button>
|
| 139 |
+
<button class="flex-1 py-3 text-center" onclick="switchTab('store')">
|
| 140 |
<i class="fas fa-store"></i>
|
| 141 |
</button>
|
| 142 |
+
<button class="flex-1 py-3 text-center" onclick="switchTab('trophies')">
|
| 143 |
<i class="fas fa-trophy"></i>
|
| 144 |
</button>
|
| 145 |
+
<button class="flex-1 py-3 text-center" onclick="switchTab('ai')">
|
| 146 |
<i class="fas fa-robot"></i>
|
| 147 |
</button>
|
| 148 |
</div>
|
|
|
|
| 150 |
<!-- Home Content -->
|
| 151 |
<div id="home-content" class="fade-in">
|
| 152 |
<!-- Breaking News Banner -->
|
| 153 |
+
<div class="bg-red-700 px-4 py-2 flex items-center cursor-pointer" onclick="showModal('breaking-news-modal')">
|
| 154 |
<span class="font-bold mr-2">BREAKING:</span>
|
| 155 |
<marquee behavior="scroll" direction="left">Yanga signs new striker from Brazil! Press conference at 4PM today.</marquee>
|
| 156 |
</div>
|
| 157 |
|
| 158 |
<!-- Featured Match -->
|
| 159 |
+
<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')">
|
| 160 |
<div class="flex justify-between items-center mb-2">
|
| 161 |
<span class="text-xs bg-yellow-500 text-gray-900 px-2 py-1 rounded-full">LIVE</span>
|
| 162 |
<span class="text-xs">Tanzania Premier League</span>
|
|
|
|
| 191 |
</div>
|
| 192 |
|
| 193 |
<!-- AI Assistant Prompt -->
|
| 194 |
+
<div class="mx-4 mb-4 p-3 bg-gray-800 rounded-lg flex items-center cursor-pointer" onclick="showModal('ai-assistant-modal')">
|
| 195 |
<div class="bg-yellow-500 text-gray-900 p-2 rounded-full mr-3">
|
| 196 |
<i class="fas fa-robot"></i>
|
| 197 |
</div>
|
|
|
|
| 205 |
<div class="mx-4 mb-4">
|
| 206 |
<div class="flex justify-between items-center mb-2">
|
| 207 |
<h2 class="font-bold text-lg">Latest News</h2>
|
| 208 |
+
<a href="#" class="text-yellow-500 text-sm" onclick="showModal('all-news-modal')">See All</a>
|
| 209 |
</div>
|
| 210 |
|
| 211 |
<div class="grid grid-cols-1 gap-3">
|
| 212 |
<!-- News Item 1 -->
|
| 213 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showModal('news1-modal')">
|
| 214 |
<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">
|
| 215 |
<div class="p-3">
|
| 216 |
<div class="flex justify-between items-start">
|
|
|
|
| 229 |
</div>
|
| 230 |
|
| 231 |
<!-- News Item 2 -->
|
| 232 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showModal('news2-modal')">
|
| 233 |
<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">
|
| 234 |
<div class="p-3">
|
| 235 |
<div class="flex justify-between items-start">
|
|
|
|
| 253 |
<div class="mx-4 mb-4">
|
| 254 |
<div class="flex justify-between items-center mb-2">
|
| 255 |
<h2 class="font-bold text-lg">Upcoming Matches</h2>
|
| 256 |
+
<a href="#" class="text-yellow-500 text-sm" onclick="showModal('fixtures-modal')">See Calendar</a>
|
| 257 |
</div>
|
| 258 |
|
| 259 |
<div class="space-y-3">
|
| 260 |
<!-- Match 1 -->
|
| 261 |
+
<div class="bg-gray-800 p-3 rounded-lg flex items-center justify-between cursor-pointer" onclick="showModal('match1-modal')">
|
| 262 |
<div class="flex items-center">
|
| 263 |
<div class="text-center mr-4">
|
| 264 |
<p class="text-xs">APR</p>
|
|
|
|
| 273 |
</div>
|
| 274 |
|
| 275 |
<!-- Match 2 -->
|
| 276 |
+
<div class="bg-gray-800 p-3 rounded-lg flex items-center justify-between cursor-pointer" onclick="showModal('match2-modal')">
|
| 277 |
<div class="flex items-center">
|
| 278 |
<div class="text-center mr-4">
|
| 279 |
<p class="text-xs">APR</p>
|
|
|
|
| 293 |
<div class="mx-4 mb-4">
|
| 294 |
<div class="flex justify-between items-center mb-2">
|
| 295 |
<h2 class="font-bold text-lg">Official Store</h2>
|
| 296 |
+
<a href="#" class="text-yellow-500 text-sm" onclick="showModal('store-modal')">View All</a>
|
| 297 |
</div>
|
| 298 |
|
| 299 |
<div class="grid grid-cols-2 gap-3">
|
| 300 |
<!-- Item 1 -->
|
| 301 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('jersey-modal')">
|
| 302 |
<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">
|
| 303 |
<div class="p-2">
|
| 304 |
<h3 class="font-bold text-sm">2023 Home Jersey</h3>
|
|
|
|
| 308 |
</div>
|
| 309 |
|
| 310 |
<!-- Item 2 -->
|
| 311 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('scarf-modal')">
|
| 312 |
<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">
|
| 313 |
<div class="p-2">
|
| 314 |
<h3 class="font-bold text-sm">Official Scarf</h3>
|
|
|
|
| 321 |
</div>
|
| 322 |
|
| 323 |
<!-- Hidden Content for Other Tabs -->
|
| 324 |
+
<div id="fixtures-content" class="hidden">
|
| 325 |
+
<div class="p-4">
|
| 326 |
+
<h2 class="text-xl font-bold mb-4">Fixtures & Results</h2>
|
| 327 |
+
<div class="space-y-3">
|
| 328 |
+
<div class="bg-gray-800 p-3 rounded-lg cursor-pointer" onclick="showModal('fixture1-modal')">
|
| 329 |
+
<div class="flex justify-between items-center">
|
| 330 |
+
<div>
|
| 331 |
+
<p class="font-bold">Yanga vs Azam FC</p>
|
| 332 |
+
<p class="text-sm text-gray-400">Apr 15 • National Stadium</p>
|
| 333 |
+
</div>
|
| 334 |
+
<span class="bg-green-700 px-2 py-1 rounded-full text-xs">Upcoming</span>
|
| 335 |
+
</div>
|
| 336 |
+
</div>
|
| 337 |
+
<div class="bg-gray-800 p-3 rounded-lg cursor-pointer" onclick="showModal('fixture2-modal')">
|
| 338 |
+
<div class="flex justify-between items-center">
|
| 339 |
+
<div>
|
| 340 |
+
<p class="font-bold">Yanga vs Simba</p>
|
| 341 |
+
<p class="text-sm text-gray-400">Apr 8 • National Stadium</p>
|
| 342 |
+
</div>
|
| 343 |
+
<span class="bg-yellow-500 text-gray-900 px-2 py-1 rounded-full text-xs">FT: 2-0</span>
|
| 344 |
+
</div>
|
| 345 |
+
</div>
|
| 346 |
+
</div>
|
| 347 |
+
</div>
|
| 348 |
+
</div>
|
| 349 |
+
|
| 350 |
+
<div id="store-content" class="hidden">
|
| 351 |
+
<div class="p-4">
|
| 352 |
+
<h2 class="text-xl font-bold mb-4">Official Store</h2>
|
| 353 |
+
<div class="grid grid-cols-2 gap-3">
|
| 354 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('jersey-modal')">
|
| 355 |
+
<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">
|
| 356 |
+
<div class="p-2">
|
| 357 |
+
<h3 class="font-bold text-sm">2023 Home Jersey</h3>
|
| 358 |
+
<p class="text-yellow-500 font-bold text-sm">TZS 45,000</p>
|
| 359 |
+
</div>
|
| 360 |
+
</div>
|
| 361 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('scarf-modal')">
|
| 362 |
+
<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">
|
| 363 |
+
<div class="p-2">
|
| 364 |
+
<h3 class="font-bold text-sm">Official Scarf</h3>
|
| 365 |
+
<p class="text-yellow-500 font-bold text-sm">TZS 25,000</p>
|
| 366 |
+
</div>
|
| 367 |
+
</div>
|
| 368 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('cap-modal')">
|
| 369 |
+
<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">
|
| 370 |
+
<div class="p-2">
|
| 371 |
+
<h3 class="font-bold text-sm">Official Cap</h3>
|
| 372 |
+
<p class="text-yellow-500 font-bold text-sm">TZS 18,000</p>
|
| 373 |
+
</div>
|
| 374 |
+
</div>
|
| 375 |
+
<div class="bg-gray-800 rounded-lg overflow-hidden merch-item cursor-pointer" onclick="showModal('mug-modal')">
|
| 376 |
+
<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">
|
| 377 |
+
<div class="p-2">
|
| 378 |
+
<h3 class="font-bold text-sm">Official Mug</h3>
|
| 379 |
+
<p class="text-yellow-500 font-bold text-sm">TZS 12,000</p>
|
| 380 |
+
</div>
|
| 381 |
+
</div>
|
| 382 |
+
</div>
|
| 383 |
+
</div>
|
| 384 |
+
</div>
|
| 385 |
+
|
| 386 |
+
<div id="trophies-content" class="hidden">
|
| 387 |
+
<div class="p-4">
|
| 388 |
+
<h2 class="text-xl font-bold mb-4">Club Honors</h2>
|
| 389 |
+
<div class="space-y-4">
|
| 390 |
+
<div class="bg-gray-800 p-4 rounded-lg cursor-pointer" onclick="showModal('league-modal')">
|
| 391 |
+
<div class="flex items-center">
|
| 392 |
+
<div class="bg-yellow-500 text-gray-900 p-3 rounded-full mr-4">
|
| 393 |
+
<i class="fas fa-trophy text-xl"></i>
|
| 394 |
+
</div>
|
| 395 |
+
<div>
|
| 396 |
+
<h3 class="font-bold">Tanzania Premier League</h3>
|
| 397 |
+
<p class="text-sm text-gray-400">28 titles (Last: 2022/23)</p>
|
| 398 |
+
</div>
|
| 399 |
+
</div>
|
| 400 |
+
</div>
|
| 401 |
+
<div class="bg-gray-800 p-4 rounded-lg cursor-pointer" onclick="showModal('cup-modal')">
|
| 402 |
+
<div class="flex items-center">
|
| 403 |
+
<div class="bg-yellow-500 text-gray-900 p-3 rounded-full mr-4">
|
| 404 |
+
<i class="fas fa-trophy text-xl"></i>
|
| 405 |
+
</div>
|
| 406 |
+
<div>
|
| 407 |
+
<h3 class="font-bold">FA Cup</h3>
|
| 408 |
+
<p class="text-sm text-gray-400">5 titles (Last: 2021)</p>
|
| 409 |
+
</div>
|
| 410 |
+
</div>
|
| 411 |
+
</div>
|
| 412 |
+
</div>
|
| 413 |
+
</div>
|
| 414 |
+
</div>
|
| 415 |
+
|
| 416 |
+
<div id="ai-content" class="hidden">
|
| 417 |
+
<div class="p-4">
|
| 418 |
+
<h2 class="text-xl font-bold mb-4">Yanga AI Assistant</h2>
|
| 419 |
+
<div class="bg-gray-800 p-4 rounded-lg">
|
| 420 |
+
<div class="flex items-start mb-4">
|
| 421 |
+
<div class="bg-yellow-500 text-gray-900 p-2 rounded-full mr-3">
|
| 422 |
+
<i class="fas fa-robot"></i>
|
| 423 |
+
</div>
|
| 424 |
+
<div class="flex-1">
|
| 425 |
+
<p>Hello! I'm your Yanga assistant. Ask me anything about the club's history, players, matches, or merchandise.</p>
|
| 426 |
+
</div>
|
| 427 |
+
</div>
|
| 428 |
+
<div class="flex">
|
| 429 |
+
<input type="text" placeholder="Ask me anything..." class="flex-1 bg-gray-700 rounded-l-lg px-4 py-2 focus:outline-none">
|
| 430 |
+
<button class="bg-yellow-500 text-gray-900 px-4 py-2 rounded-r-lg">
|
| 431 |
+
<i class="fas fa-paper-plane"></i>
|
| 432 |
+
</button>
|
| 433 |
+
</div>
|
| 434 |
+
<div class="mt-4 text-sm text-gray-400">
|
| 435 |
+
<p>Try asking:</p>
|
| 436 |
+
<ul class="list-disc pl-5 mt-2 space-y-1">
|
| 437 |
+
<li class="cursor-pointer hover:text-yellow-500" onclick="askQuestion('Who is the current captain?')">Who is the current captain?</li>
|
| 438 |
+
<li class="cursor-pointer hover:text-yellow-500" onclick="askQuestion('When is the next match?')">When is the next match?</li>
|
| 439 |
+
<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>
|
| 440 |
+
</ul>
|
| 441 |
+
</div>
|
| 442 |
+
</div>
|
| 443 |
+
</div>
|
| 444 |
</div>
|
| 445 |
</main>
|
| 446 |
|
| 447 |
<!-- Bottom Navigation -->
|
| 448 |
<nav class="fixed bottom-0 left-0 right-0 bg-gray-800 shadow-lg max-w-md mx-auto">
|
| 449 |
<div class="flex justify-around">
|
| 450 |
+
<button class="p-4 text-yellow-500" onclick="switchTab('home')">
|
| 451 |
<i class="fas fa-home text-xl"></i>
|
| 452 |
</button>
|
| 453 |
+
<button class="p-4 text-gray-400" onclick="switchTab('fixtures')">
|
| 454 |
<i class="fas fa-search text-xl"></i>
|
| 455 |
</button>
|
| 456 |
+
<button class="p-4 text-gray-400 relative" onclick="showModal('cart-modal')">
|
| 457 |
<i class="fas fa-shopping-cart text-xl"></i>
|
| 458 |
<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>
|
| 459 |
</button>
|
| 460 |
+
<button class="p-4 text-gray-400" onclick="showModal('community-modal')">
|
| 461 |
<i class="fas fa-user-friends text-xl"></i>
|
| 462 |
</button>
|
| 463 |
+
<button class="p-4 text-gray-400" onclick="showModal('more-modal')">
|
| 464 |
<i class="fas fa-ellipsis-h text-xl"></i>
|
| 465 |
</button>
|
| 466 |
</div>
|
| 467 |
</nav>
|
| 468 |
|
| 469 |
<!-- New Badge Notification -->
|
| 470 |
+
<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')">
|
| 471 |
<i class="fas fa-trophy text-xl"></i>
|
| 472 |
</div>
|
| 473 |
+
|
| 474 |
+
<!-- Modals -->
|
| 475 |
+
<div id="club-info-modal" class="modal">
|
| 476 |
+
<div class="modal-content">
|
| 477 |
+
<span class="close-modal" onclick="hideModal('club-info-modal')">×</span>
|
| 478 |
+
<h2 class="text-xl font-bold mb-4">Young Africans SC</h2>
|
| 479 |
+
<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">
|
| 480 |
+
<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>
|
| 481 |
+
<div class="grid grid-cols-2 gap-4 mb-4">
|
| 482 |
+
<div class="bg-gray-700 p-3 rounded-lg">
|
| 483 |
+
<h3 class="font-bold text-yellow-500">Nickname</h3>
|
| 484 |
+
<p>Wananchi</p>
|
| 485 |
+
</div>
|
| 486 |
+
<div class="bg-gray-700 p-3 rounded-lg">
|
| 487 |
+
<h3 class="font-bold text-yellow-500">Stadium</h3>
|
| 488 |
+
<p>Benjamin Mkapa</p>
|
| 489 |
+
</div>
|
| 490 |
+
<div class="bg-gray-700 p-3 rounded-lg">
|
| 491 |
+
<h3 class="font-bold text-yellow-500">League Titles</h3>
|
| 492 |
+
<p>28</p>
|
| 493 |
+
</div>
|
| 494 |
+
<div class="bg-gray-700 p-3 rounded-lg">
|
| 495 |
+
<h3 class="font-bold text-yellow-500">Chairman</h3>
|
| 496 |
+
<p>Eng. Hersi Said</p>
|
| 497 |
+
</div>
|
| 498 |
+
</div>
|
| 499 |
+
<button class="w-full bg-yellow-500 text-gray-900 py-2 rounded-lg font-bold">Follow Club</button>
|
| 500 |
+
</div>
|
| 501 |
+
</div>
|
| 502 |
+
|
| 503 |
+
<div id="notifications-modal" class="modal">
|
| 504 |
+
<div class="modal-content">
|
| 505 |
+
<span class="close-modal" onclick="hideModal('notifications-modal')">×</span>
|
| 506 |
+
<h2 class="text-xl font-bold mb-4">Notifications</h2>
|
| 507 |
+
<div class="space-y-3">
|
| 508 |
+
<div class="bg-gray-800 p-3 rounded-lg">
|
| 509 |
+
<div class="flex items-start">
|
| 510 |
+
<div class="bg-yellow-500 text-gray-900 p-2 rounded-full mr-3">
|
| 511 |
+
<i class="fas fa-bell"></i>
|
| 512 |
+
</div>
|
| 513 |
+
<div>
|
| 514 |
+
<h3 class="font-bold">Match Reminder</h3>
|
| 515 |
+
<p class="text-sm text-gray-400">Yanga vs Simba starts in 1 hour</p>
|
| 516 |
+
<p class="text-xs text-gray-500 mt-1">10 minutes ago</p>
|
| 517 |
+
</div>
|
| 518 |
+
</div>
|
| 519 |
+
</div>
|
| 520 |
+
<div class="bg-gray-800 p-3 rounded-lg">
|
| 521 |
+
<div class="flex items-start">
|
| 522 |
+
<div class="bg-green-500 text-gray-900 p-2 rounded-full mr-3">
|
| 523 |
+
<i class="fas fa-store"></i>
|
| 524 |
+
</div>
|
| 525 |
+
<div>
|
| 526 |
+
<h3 class="font-bold">New Merchandise</h3>
|
| 527 |
+
<p class="text-sm text-gray-400">2023/24 home jersey now available</p>
|
| 528 |
+
<p class="text-xs text-gray-500 mt-1">2 hours ago</p>
|
| 529 |
+
</div>
|
| 530 |
+
</div>
|
| 531 |
+
</div>
|
| 532 |
+
<div class="bg-gray-800 p-3 rounded-lg">
|
| 533 |
+
<div class="flex items-start">
|
| 534 |
+
<div class="bg-blue-500 text-gray-900 p-2 rounded-full mr-3">
|
| 535 |
+
<i class="fas fa-trophy"></i>
|
| 536 |
+
</div>
|
| 537 |
+
<div>
|
| 538 |
+
<h3 class="font-bold">Achievement Unlocked</h3>
|
| 539 |
+
<p class="text-sm text-gray-400">You've earned the "Super Fan" badge</p>
|
| 540 |
+
<p class="text-xs text-gray-500 mt-1">Yesterday</p>
|
| 541 |
+
</div>
|
| 542 |
+
</div>
|
| 543 |
+
</div>
|
| 544 |
+
</div>
|
| 545 |
+
</div>
|
| 546 |
+
</div>
|
| 547 |
+
|
| 548 |
+
<div id="profile-modal" class="modal">
|
| 549 |
+
<div class="modal-content">
|
| 550 |
+
<span class="close-modal" onclick="hideModal('profile-modal')">×</span>
|
| 551 |
+
<div class="flex flex-col items-center mb-4">
|
| 552 |
+
<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">
|
| 553 |
+
<h2 class="text-xl font-bold">John Doe</h2>
|
| 554 |
+
<p class="text-yellow-500 font-bold">VIP Member</p>
|
| 555 |
+
</div>
|
| 556 |
+
|
| 557 |
+
<div class="bg-gray-800 p-4 rounded-lg mb-4">
|
| 558 |
+
<div class="flex justify-between mb-2">
|
| 559 |
+
<span>Membership Points</span>
|
| 560 |
+
<span class="font-bold">1,250</span>
|
| 561 |
+
</div>
|
| 562 |
+
<div class="w-full bg-gray-700 rounded-full h-2.5">
|
| 563 |
+
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 45%"></div>
|
| 564 |
+
</div>
|
| 565 |
+
<p class="text-xs text-gray-400 mt-1">550 points to next level</p>
|
| 566 |
+
</div>
|
| 567 |
+
|
| 568 |
+
<div class="space-y-3 mb-4">
|
| 569 |
+
<button class="w-full bg-gray-800 p-3 rounded-lg text-left flex items-center">
|
| 570 |
+
<i class="fas fa-user-circle mr-3 text-yellow-500"></i>
|
| 571 |
+
<span>Edit Profile</span>
|
| 572 |
+
</button>
|
| 573 |
+
<button class="w-full bg-gray-800 p-3 rounded-lg text-left flex items-center">
|
| 574 |
+
<i class="fas fa-ticket-alt mr-3 text-yellow-500"></i>
|
| 575 |
+
<span>My Tickets</span>
|
| 576 |
+
</button>
|
| 577 |
+
<button class="w-full bg-gray-800 p-3 rounded-lg text-left flex items-center">
|
| 578 |
+
<i class="fas fa-shopping-bag mr-3 text-yellow-500"></i>
|
| 579 |
+
<span>My Orders</span>
|
| 580 |
+
</button>
|
| 581 |
+
<button class="w-full bg-gray-800 p-3 rounded-lg text-left flex items-center">
|
| 582 |
+
<i class="fas fa-cog mr-3 text-yellow-500"></i>
|
| 583 |
+
<span>Settings</span>
|
| 584 |
+
</button>
|
| 585 |
+
</div>
|
| 586 |
+
|
| 587 |
+
<button class="w-full bg-red-600 py-2 rounded-lg font-bold">Sign Out</button>
|
| 588 |
+
</div>
|
| 589 |
+
</div>
|
| 590 |
+
|
| 591 |
+
<div id="live-match-modal" class="modal">
|
| 592 |
+
<div class="modal-content">
|
| 593 |
+
<span class="close-modal" onclick="hideModal('live-match-modal')">×</span>
|
| 594 |
+
<div class="flex justify-between items-center mb-2">
|
| 595 |
+
<span class="text-xs bg-yellow-500 text-gray-900 px-2 py-1 rounded-full">LIVE</span>
|
| 596 |
+
<span class="text-xs">Tanzania Premier League</span>
|
| 597 |
+
</div>
|
| 598 |
+
|
| 599 |
+
<div class="flex justify-between items-center py-4">
|
| 600 |
+
<div class="text-center">
|
| 601 |
+
<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">
|
| 602 |
+
<h3 class="font-bold mt-1">Yanga</h3>
|
| 603 |
+
<p class="text-3xl font-bold">2</p>
|
| 604 |
+
</div>
|
| 605 |
+
|
| 606 |
+
<div class="text-center">
|
| 607 |
+
<p class="text-sm">65'</p>
|
| 608 |
+
<p class="text-sm">LIVE</p>
|
| 609 |
+
</div>
|
| 610 |
+
|
| 611 |
+
<div class="text-center">
|
| 612 |
+
<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">
|
| 613 |
+
<h3 class="font-bold mt-1">Simba</h3>
|
| 614 |
+
<p class="text-3xl font-bold">0</p>
|
| 615 |
+
</div>
|
| 616 |
+
</div>
|
| 617 |
+
|
| 618 |
+
<div class="bg-gray-800 p-3 rounded-lg mb-4">
|
| 619 |
+
<div class="flex justify-between text-sm mb-2">
|
| 620 |
+
<span>National Stadium</span>
|
| 621 |
+
<span>45,678 watching</span>
|
| 622 |
+
</div>
|
| 623 |
+
<div class="flex justify-between text-xs text-gray-400">
|
| 624 |
+
<span>Match Day 24</span>
|
| 625 |
+
<span>April 8, 2023</span>
|
| 626 |
+
</div>
|
| 627 |
+
</div>
|
| 628 |
+
|
| 629 |
+
<div class="bg-gray-800 p-3 rounded-lg mb-4">
|
| 630 |
+
<h3 class="font-bold mb-2">Match Events</h3>
|
| 631 |
+
<div class="space-y-2">
|
| 632 |
+
<div class="flex items-center">
|
| 633 |
+
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-2">
|
| 634 |
+
<i class="fas fa-futbol text-xs"></i>
|
| 635 |
+
</div>
|
| 636 |
+
<div>
|
| 637 |
+
<p class="text-sm">Goal! Yanga 1-0 (Feisal Salum 23')</p>
|
| 638 |
+
</div>
|
| 639 |
+
</div>
|
| 640 |
+
<div class="flex items-center">
|
| 641 |
+
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-2">
|
| 642 |
+
<i class="fas fa-futbol text-xs"></i>
|
| 643 |
+
</div>
|
| 644 |
+
<div>
|
| 645 |
+
<p class="text-sm">Goal! Yanga 2-0 (John Bocco 57')</p>
|
| 646 |
+
</div>
|
| 647 |
+
</div>
|
| 648 |
+
<div class="flex items-center">
|
| 649 |
+
<div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-2">
|
| 650 |
+
<i class="fas fa-exclamation text-xs"></i>
|
| 651 |
+
</div>
|
| 652 |
+
<div>
|
| 653 |
+
<p class="text-sm">Yellow card (Simba player 42')</p>
|
| 654 |
+
</div>
|
| 655 |
+
</div>
|
| 656 |
+
</div>
|
| 657 |
+
</div>
|
| 658 |
+
|
| 659 |
+
<button class="w-full bg-red-600 py-3 rounded-lg font-bold mb-2 flex items-center justify-center">
|
| 660 |
+
<i class="fas fa-play mr-2"></i> Watch Live
|
| 661 |
+
</button>
|
| 662 |
+
<button class="w-full bg-gray-800 py-3 rounded-lg font-bold flex items-center justify-center">
|
| 663 |
+
<i class="fas fa-comment-alt mr-2"></i> Live Chat
|
| 664 |
+
</button>
|
| 665 |
+
</div>
|
| 666 |
+
</div>
|
| 667 |
+
|
| 668 |
+
<div id="news1-modal" class="modal">
|
| 669 |
+
<div class="modal-content">
|
| 670 |
+
<span class="close-modal" onclick="hideModal('news1-modal')">×</span>
|
| 671 |
+
<h2 class="text-xl font-bold mb-2">New Stadium Plans Revealed</h2>
|
| 672 |
+
<p class="text-sm text-gray-400 mb-4">2 hours ago • By Club Communications</p>
|
| 673 |
+
<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">
|
| 674 |
+
|
| 675 |
+
<div class="prose text-sm text-gray-300">
|
| 676 |
+
<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>
|
| 677 |
+
|
| 678 |
+
<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>
|
| 679 |
+
|
| 680 |
+
<ul class="list-disc pl-5 mt-2 space-y-1">
|
| 681 |
+
<li>Premium VIP lounges and corporate boxes</li>
|
| 682 |
+
<li>Expanded media facilities for broadcasters</li>
|
| 683 |
+
<li>Underground parking for 5,000 vehicles</li>
|
| 684 |
+
<li>Retail and commercial spaces</li>
|
| 685 |
+
<li>Training facilities for the academy</li>
|
| 686 |
+
</ul>
|
| 687 |
+
|
| 688 |
+
<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>
|
| 689 |
+
|
| 690 |
+
<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>
|
| 691 |
+
</div>
|
| 692 |
+
|
| 693 |
+
<div class="flex justify-between items-center mt-6">
|
| 694 |
+
<div class="flex space-x-2">
|
| 695 |
+
<button class="bg-gray-800 px-3 py-1 rounded-full text-sm flex items-center">
|
| 696 |
+
<i class="far fa-thumbs-up mr-1"></i> 245
|
| 697 |
+
</button>
|
| 698 |
+
<button class="bg-gray-800 px-3 py-1 rounded-full text-sm flex items-center">
|
| 699 |
+
<i class="far fa-comment mr-1"></i> 43
|
| 700 |
+
</button>
|
| 701 |
+
</div>
|
| 702 |
+
<button class="bg-gray-800 px-3 py-1 rounded-full text-sm flex items-center">
|
| 703 |
+
<i class="fas fa-share-alt mr-1"></i> Share
|
| 704 |
+
</button>
|
| 705 |
+
</div>
|
| 706 |
+
</div>
|
| 707 |
+
</div>
|
| 708 |
+
|
| 709 |
+
<div id="cart-modal" class="modal">
|
| 710 |
+
<div class="modal-content">
|
| 711 |
+
<span class="close-modal" onclick="hideModal('cart-modal')">×</span>
|
| 712 |
+
<h2 class="text-xl font-bold mb-4">Your Cart (3 items)</h2>
|
| 713 |
+
|
| 714 |
+
<div class="space-y-3 mb-4">
|
| 715 |
+
<div class="bg-gray-800 p-3 rounded-lg flex items-center">
|
| 716 |
+
<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">
|
| 717 |
+
<div class="flex-1">
|
| 718 |
+
<h3 class="font-bold text-sm">2023 Home Jersey</h3>
|
| 719 |
+
<p class="text-yellow-500 font-bold text-sm">TZS 45,000</p>
|
| 720 |
+
<div class="flex items-center mt-1">
|
| 721 |
+
<button class="bg-gray-700 px-2 rounded-l">-</button>
|
| 722 |
+
<span class="bg-gray-700 px-3">1</span>
|
| 723 |
+
<button class="bg-gray-700 px-2 rounded-r">+</button>
|
| 724 |
+
</div>
|
| 725 |
+
</div>
|
| 726 |
+
<button class="text-red-500">
|
| 727 |
+
<i class="fas fa-trash"></i>
|
| 728 |
+
</button>
|
| 729 |
+
</div>
|
| 730 |
+
|
| 731 |
+
<div class="bg-gray-800 p-3 rounded-lg flex items-center">
|
| 732 |
+
<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">
|
| 733 |
+
<div class="flex-1">
|
| 734 |
+
<h3 class="font-bold text-sm">Official Scarf</h3>
|
| 735 |
+
<p class="text-yellow-500 font-bold text-sm">TZS 25,000</p>
|
| 736 |
+
<div class="flex items-center mt-1">
|
| 737 |
+
<button class="bg-gray-700 px-2 rounded-l">-</button>
|
| 738 |
+
<span class="bg-gray-700 px-3">2</span>
|
| 739 |
+
<button class="bg-gray-700 px-2 rounded-r">+</button>
|
| 740 |
+
</div>
|
| 741 |
+
</div>
|
| 742 |
+
<button class="text-red-500">
|
| 743 |
+
<i class="fas fa-trash"></i>
|
| 744 |
+
</button>
|
| 745 |
+
</div>
|
| 746 |
+
</div>
|
| 747 |
+
|
| 748 |
+
<div class="bg-gray-800 p-3 rounded-lg mb-4">
|
| 749 |
+
<div class="flex justify-between mb-2">
|
| 750 |
+
<span>Subtotal</span>
|
| 751 |
+
<span class="font-bold">TZS 95,000</span>
|
| 752 |
+
</div>
|
| 753 |
+
<div class="flex justify-between mb-2">
|
| 754 |
+
<span>Shipping</span>
|
| 755 |
+
<span class="font-bold">TZS 5,000</span>
|
| 756 |
+
</div>
|
| 757 |
+
<div class="flex justify-between font-bold text-lg">
|
| 758 |
+
<span>Total</span>
|
| 759 |
+
<span class="text-yellow-500">TZS 100,000</span>
|
| 760 |
+
</div>
|
| 761 |
+
</div>
|
| 762 |
+
|
| 763 |
+
<button class="w-full bg-yellow-500 text-gray-900 py-3 rounded-lg font-bold mb-2">
|
| 764 |
+
Proceed to Checkout
|
| 765 |
+
</button>
|
| 766 |
+
<button class="w-full bg-gray-800 py-3 rounded-lg font-bold">
|
| 767 |
+
Continue Shopping
|
| 768 |
+
</button>
|
| 769 |
+
</div>
|
| 770 |
+
</div>
|
| 771 |
+
|
| 772 |
+
<!-- More modals would be added here for other content -->
|
| 773 |
+
|
| 774 |
</div>
|
| 775 |
|
| 776 |
<script>
|
| 777 |
+
// Tab switching functionality
|
| 778 |
+
function switchTab(tabName) {
|
| 779 |
+
// Hide all content sections
|
| 780 |
+
document.getElementById('home-content').classList.add('hidden');
|
| 781 |
+
document.getElementById('fixtures-content').classList.add('hidden');
|
| 782 |
+
document.getElementById('store-content').classList.add('hidden');
|
| 783 |
+
document.getElementById('trophies-content').classList.add('hidden');
|
| 784 |
+
document.getElementById('ai-content').classList.add('hidden');
|
| 785 |
+
|
| 786 |
+
// Remove active class from all tabs
|
| 787 |
+
document.querySelectorAll('.flex button').forEach(tab => {
|
| 788 |
+
tab.classList.remove('tab-active');
|
| 789 |
+
tab.classList.add('text-gray-400');
|
|
|
|
| 790 |
});
|
| 791 |
+
|
| 792 |
+
// Show selected content and update tab
|
| 793 |
+
switch(tabName) {
|
| 794 |
+
case 'home':
|
| 795 |
+
document.getElementById('home-content').classList.remove('hidden');
|
| 796 |
+
document.querySelector('.flex button:nth-child(1)').classList.add('tab-active');
|
| 797 |
+
document.querySelector('.flex button:nth-child(1)').classList.remove('text-gray-400');
|
| 798 |
+
break;
|
| 799 |
+
case 'fixtures':
|
| 800 |
+
document.getElementById('fixtures-content').classList.remove('hidden');
|
| 801 |
+
document.querySelector('.flex button:nth-child(2)').classList.add('tab-active');
|
| 802 |
+
document.querySelector('.flex button:nth-child(2)').classList.remove('text-gray-400');
|
| 803 |
+
break;
|
| 804 |
+
case 'store':
|
| 805 |
+
document.getElementById('store-content').classList.remove('hidden');
|
| 806 |
+
document.querySelector('.flex button:nth-child(3)').classList.add('tab-active');
|
| 807 |
+
document.querySelector('.flex button:nth-child(3)').classList.remove('text-gray-400');
|
| 808 |
+
break;
|
| 809 |
+
case 'trophies':
|
| 810 |
+
document.getElementById('trophies-content').classList.remove('hidden');
|
| 811 |
+
document.querySelector('.flex button:nth-child(4)').classList.add('tab-active');
|
| 812 |
+
document.querySelector('.flex button:nth-child(4)').classList.remove('text-gray-400');
|
| 813 |
+
break;
|
| 814 |
+
case 'ai':
|
| 815 |
+
document.getElementById('ai-content').classList.remove('hidden');
|
| 816 |
+
document.querySelector('.flex button:nth-child(5)').classList.add('tab-active');
|
| 817 |
+
document.querySelector('.flex button:nth-child(5)').classList.remove('text-gray-400');
|
| 818 |
+
break;
|
| 819 |
+
}
|
| 820 |
+
|
| 821 |
+
// Update bottom navigation highlight
|
| 822 |
+
document.querySelectorAll('nav button').forEach(btn => {
|
| 823 |
+
btn.classList.remove('text-yellow-500');
|
| 824 |
+
btn.classList.add('text-gray-400');
|
| 825 |
+
});
|
| 826 |
+
|
| 827 |
+
document.querySelector(`nav button:nth-child(${tabName === 'home' ? 1 : tabName === 'fixtures' ? 2 : tabName === 'store' ? 3 : tabName === 'trophies' ? 4 : 5})`).classList.add('text-yellow-500');
|
| 828 |
+
document.querySelector(`nav button:nth-child(${tabName === 'home' ? 1 : tabName === 'fixtures' ? 2 : tabName === 'store' ? 3 : tabName === 'trophies' ? 4 : 5})`).classList.remove('text-gray-400');
|
| 829 |
+
}
|
| 830 |
+
|
| 831 |
+
// Modal functions
|
| 832 |
+
function showModal(modalId) {
|
| 833 |
+
document.getElementById(modalId).style.display = 'flex';
|
| 834 |
+
}
|
| 835 |
+
|
| 836 |
+
function hideModal(modalId) {
|
| 837 |
+
document.getElementById(modalId).style.display = 'none';
|
| 838 |
+
}
|
| 839 |
+
|
| 840 |
+
// Close modals when clicking outside content
|
| 841 |
+
window.onclick = function(event) {
|
| 842 |
+
if (event.target.className === 'modal') {
|
| 843 |
+
event.target.style.display = 'none';
|
| 844 |
+
}
|
| 845 |
+
}
|
| 846 |
+
|
| 847 |
+
// Language change
|
| 848 |
+
function changeLanguage(lang) {
|
| 849 |
+
const swBtn = document.querySelector('.bg-gray-800 button:first-child');
|
| 850 |
+
const enBtn = document.querySelector('.bg-gray-800 button:last-child');
|
| 851 |
+
|
| 852 |
+
if (lang === 'sw') {
|
| 853 |
+
swBtn.classList.add('bg-green-700');
|
| 854 |
+
enBtn.classList.remove('bg-green-700');
|
| 855 |
+
// In a real app, we'd change the language here
|
| 856 |
+
} else {
|
| 857 |
+
enBtn.classList.add('bg-green-700');
|
| 858 |
+
swBtn.classList.remove('bg-green-700');
|
| 859 |
+
// In a real app, we'd change the language here
|
| 860 |
+
}
|
| 861 |
+
}
|
| 862 |
|
| 863 |
// Simulate badge unlock
|
| 864 |
setTimeout(() => {
|
|
|
|
| 877 |
this.classList.remove('shadow-lg');
|
| 878 |
});
|
| 879 |
});
|
| 880 |
+
|
| 881 |
+
// AI assistant question
|
| 882 |
+
function askQuestion(question) {
|
| 883 |
+
alert(`You asked: "${question}"\n\nIn a real app, this would trigger an AI response.`);
|
| 884 |
+
}
|
| 885 |
</script>
|
| 886 |
<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>
|
| 887 |
</html>
|
prompts.txt
CHANGED
|
@@ -1,2 +1,3 @@
|
|
| 1 |
Design “Yanga Connect,” a scalable cross-platform (Flutter/React Native) mobile app for Young Africans S.C. that loads the club’s full heritage and archives into a bilingual AI knowledge base for instant Q&A; integrates a secure in-app shop for official merchandise; offers high-quality live streaming of every match with real-time chat and social reactions; features an admin-managed newsfeed/blog; displays an interactive match calendar with event listings, ticket links and reminder alerts; provides user profiles with tiered, color-coded verification badges for presidential fans, staff and players; includes gamification elements like predictions, loyalty points and leaderboards; and is backed by a microservices cloud backend and an addictive, personalized UX with badge animations and push-notification reminders to drive daily engagement.
|
| 2 |
-
replace all failed images with freee images from unsplash or pexels
|
|
|
|
|
|
| 1 |
Design “Yanga Connect,” a scalable cross-platform (Flutter/React Native) mobile app for Young Africans S.C. that loads the club’s full heritage and archives into a bilingual AI knowledge base for instant Q&A; integrates a secure in-app shop for official merchandise; offers high-quality live streaming of every match with real-time chat and social reactions; features an admin-managed newsfeed/blog; displays an interactive match calendar with event listings, ticket links and reminder alerts; provides user profiles with tiered, color-coded verification badges for presidential fans, staff and players; includes gamification elements like predictions, loyalty points and leaderboards; and is backed by a microservices cloud backend and an addictive, personalized UX with badge animations and push-notification reminders to drive daily engagement.
|
| 2 |
+
replace all failed images with freee images from unsplash or pexels
|
| 3 |
+
now make each feature clickacle, make sure nothing is broken
|