|
29 | 29 | </div> |
30 | 30 | <div class="mt-2 text-center"> |
31 | 31 | <div class="text-sm sm:text-base font-bold font-cartoon text-white drop-shadow-lg">TOM</div> |
32 | | - <div class="text-xs font-comic text-white/90 drop-shadow-md">The Cat</div> |
| 32 | + <div class="text-xs font-comic text-white drop-shadow-md">The Cat</div> |
33 | 33 | </div> |
34 | 34 | </div> |
35 | 35 |
|
|
46 | 46 | </div> |
47 | 47 | <div class="mt-2 text-center"> |
48 | 48 | <div class="text-sm sm:text-base font-bold font-cartoon text-white drop-shadow-lg">JERRY</div> |
49 | | - <div class="text-xs font-comic text-white/90 drop-shadow-md">The Mouse</div> |
| 49 | + <div class="text-xs font-comic text-white drop-shadow-md">The Mouse</div> |
50 | 50 | </div> |
51 | 51 | </div> |
52 | 52 | </div> |
|
58 | 58 | Tom & Jerry |
59 | 59 | </span> |
60 | 60 | </h1> |
61 | | - <div class="text-lg sm:text-xl md:text-2xl text-white font-comic animate-fadeInUp drop-shadow-lg" style="animation-delay: 0.2s"> |
| 61 | + <div class="text-lg sm:text-xl md:text-2xl text-white font-comic animate-fadeInUp drop-shadow-lg font-bold" style="animation-delay: 0.2s"> |
62 | 62 | The Ultimate Cat & Mouse Showdown! 🎭 |
63 | 63 | </div> |
64 | 64 | </div> |
65 | 65 |
|
66 | 66 | <!-- Interactive Description --> |
67 | 67 | <div class="mb-8 sm:mb-10 max-w-3xl mx-auto px-4"> |
68 | | - <p class="text-base sm:text-lg md:text-xl text-white mb-4 font-comic leading-relaxed animate-fadeInUp drop-shadow-md" style="animation-delay: 0.4s"> |
| 68 | + <p class="text-base sm:text-lg md:text-xl text-white mb-4 font-comic leading-relaxed animate-fadeInUp drop-shadow-lg font-semibold" style="animation-delay: 0.4s"> |
69 | 69 | Experience the timeless rivalry that has entertained generations! Watch as Tom the cat tries every trick in the book to catch Jerry the mouse, |
70 | 70 | but Jerry always finds a clever way to escape. From classic 1940s episodes to modern adventures, |
71 | 71 | every chase is filled with laughter, creativity, and pure cartoon magic! ✨ |
72 | 72 | </p> |
73 | 73 |
|
74 | 74 | <!-- Fun Facts Carousel --> |
75 | 75 | <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 mb-6 animate-fadeInUp fact-carousel" style="animation-delay: 0.6s"> |
76 | | - <div class="text-sm sm:text-base text-white font-comic drop-shadow-sm"> |
77 | | - <span class="text-cartoon-yellow font-bold drop-shadow-md">💡 Fun Fact:</span> |
78 | | - <span id="fun-fact-text" class="drop-shadow-sm">Tom & Jerry won 7 Academy Awards for Best Animated Short Film!</span> |
| 76 | + <div class="text-sm sm:text-base text-white font-comic drop-shadow-lg font-semibold"> |
| 77 | + <span class="text-yellow-300 font-bold drop-shadow-lg">💡 Fun Fact:</span> |
| 78 | + <span id="fun-fact-text" class="drop-shadow-lg">Tom & Jerry won 7 Academy Awards for Best Animated Short Film!</span> |
79 | 79 | </div> |
80 | 80 | </div> |
81 | 81 | </div> |
|
118 | 118 | </div> |
119 | 119 | <div class="max-w-7xl mx-auto px-4 py-6 sm:py-8"> |
120 | 120 | <div class="text-center"> |
121 | | - <h2 class="text-2xl sm:text-3xl font-bold font-cartoon text-jerry-brown mb-2 cartoon-text">Start Watching Now!</h2> |
122 | | - <p class="text-jerry-dark-brown mb-4 sm:mb-6 font-comic text-base sm:text-lg px-4">Discover your favorite Tom & Jerry episodes</p> |
| 121 | + <h2 class="text-2xl sm:text-3xl font-bold font-cartoon text-amber-800 mb-2 cartoon-text">Start Watching Now!</h2> |
| 122 | + <p class="text-amber-900 mb-4 sm:mb-6 font-comic text-base sm:text-lg px-4 font-semibold">Discover your favorite Tom & Jerry episodes</p> |
123 | 123 | <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center px-4"> |
124 | 124 | <button @onclick="ScrollToFeatured" |
125 | 125 | class="cartoon-button px-6 sm:px-8 py-3 sm:py-4 text-white font-bold font-cartoon text-base sm:text-lg"> |
126 | 126 | 🎬 Browse Episodes |
127 | 127 | </button> |
128 | 128 | <button @onclick="ScrollToAllEpisodes" |
129 | | - class="px-6 sm:px-8 py-3 sm:py-4 bg-soft-blue text-jerry-brown rounded-2xl hover:bg-cartoon-yellow transition-colors font-bold font-comic text-base sm:text-lg border-2 border-jerry-brown shadow-lg hover:shadow-xl transform hover:-translate-y-1"> |
| 129 | + class="px-6 sm:px-8 py-3 sm:py-4 bg-soft-blue text-amber-800 rounded-2xl hover:bg-cartoon-yellow transition-colors font-bold font-comic text-base sm:text-lg border-2 border-amber-800 shadow-lg hover:shadow-xl transform hover:-translate-y-1"> |
130 | 130 | 📺 View All |
131 | 131 | </button> |
132 | 132 | <button @onclick="ShowRandomFact" |
|
277 | 277 | </svg> |
278 | 278 | </div> |
279 | 279 | <div> |
280 | | - <h2 class="text-2xl sm:text-3xl font-bold font-cartoon text-jerry-brown cartoon-text">Featured Episodes</h2> |
281 | | - <p class="text-jerry-dark-brown font-comic text-base sm:text-lg">Randomly selected classics that never get old! 🎭</p> |
| 280 | + <h2 class="text-2xl sm:text-3xl font-bold font-cartoon text-amber-800 cartoon-text">Featured Episodes</h2> |
| 281 | + <p class="text-amber-900 font-comic text-base sm:text-lg font-semibold">Randomly selected classics that never get old! 🎭</p> |
282 | 282 | </div> |
283 | 283 | </div> |
284 | 284 | <div class="flex items-center space-x-3"> |
285 | 285 | <button @onclick="RefreshFeaturedEpisodes" |
286 | 286 | class="px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm bg-tom-blue text-white rounded-2xl font-bold font-comic hover:bg-tom-dark-blue transition-colors cartoon-rounded"> |
287 | 287 | 🔄 Refresh Featured |
288 | 288 | </button> |
289 | | - <span class="hidden sm:inline text-sm text-jerry-brown font-comic bg-cartoon-yellow px-3 py-1 rounded-full">Random Selection</span> |
| 289 | + <span class="hidden sm:inline text-sm text-amber-800 font-comic bg-cartoon-yellow px-3 py-1 rounded-full font-semibold">Random Selection</span> |
290 | 290 | <div class="w-3 h-3 bg-cartoon-red rounded-full animate-pulse cartoon-rounded"></div> |
291 | 291 | </div> |
292 | 292 | </div> |
|
310 | 310 | </svg> |
311 | 311 | </div> |
312 | 312 | <div> |
313 | | - <h2 class="text-2xl sm:text-3xl font-bold font-cartoon text-jerry-brown cartoon-text">Tom & Jerry Stickers</h2> |
314 | | - <p class="text-jerry-dark-brown font-comic text-base sm:text-lg">Collect your favorite character moments! 🎭✨</p> |
| 313 | + <h2 class="text-2xl sm:text-3xl font-bold font-cartoon text-amber-800 cartoon-text">Tom & Jerry Stickers</h2> |
| 314 | + <p class="text-amber-900 font-comic text-base sm:text-lg font-semibold">Collect your favorite character moments! 🎭✨</p> |
315 | 315 | </div> |
316 | 316 | </div> |
317 | 317 |
|
|
322 | 322 | 🔄 Refresh |
323 | 323 | </button> |
324 | 324 | <button @onclick="ShowAllStickers" |
325 | | - class="px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm bg-soft-blue text-jerry-brown rounded-2xl font-bold font-comic hover:bg-cartoon-yellow transition-colors border-2 border-jerry-brown cartoon-rounded"> |
| 325 | + class="px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm bg-soft-blue text-amber-800 rounded-2xl font-bold font-comic hover:bg-cartoon-yellow transition-colors border-2 border-amber-800 cartoon-rounded"> |
326 | 326 | 👀 View All |
327 | 327 | </button> |
328 | 328 | </div> |
|
342 | 342 | </svg> |
343 | 343 | </div> |
344 | 344 | <div> |
345 | | - <h2 class="text-2xl sm:text-3xl font-bold font-cartoon text-jerry-brown cartoon-text">All Episodes</h2> |
346 | | - <p class="text-jerry-dark-brown font-comic text-base sm:text-lg">Complete collection of timeless adventures! 🎪</p> |
| 345 | + <h2 class="text-2xl sm:text-3xl font-bold font-cartoon text-amber-800 cartoon-text">All Episodes</h2> |
| 346 | + <p class="text-amber-900 font-comic text-base sm:text-lg font-semibold">Complete collection of timeless adventures! 🎪</p> |
347 | 347 | </div> |
348 | 348 | </div> |
349 | 349 |
|
|
352 | 352 | <button class="px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm bg-tom-blue text-white rounded-2xl font-bold font-comic hover:bg-tom-dark-blue transition-colors cartoon-rounded"> |
353 | 353 | All |
354 | 354 | </button> |
355 | | - <button class="px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm bg-soft-blue text-jerry-brown rounded-2xl font-bold font-comic hover:bg-cartoon-yellow transition-colors border-2 border-jerry-brown cartoon-rounded"> |
| 355 | + <button class="px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm bg-soft-blue text-amber-800 rounded-2xl font-bold font-comic hover:bg-cartoon-yellow transition-colors border-2 border-amber-800 cartoon-rounded"> |
356 | 356 | Classic |
357 | 357 | </button> |
358 | | - <button class="px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm bg-soft-blue text-jerry-brown rounded-2xl font-bold font-comic hover:bg-cartoon-yellow transition-colors border-2 border-jerry-brown cartoon-rounded"> |
| 358 | + <button class="px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm bg-soft-blue text-amber-800 rounded-2xl font-bold font-comic hover:bg-cartoon-yellow transition-colors border-2 border-amber-800 cartoon-rounded"> |
359 | 359 | Modern |
360 | 360 | </button> |
361 | 361 | </div> |
|
0 commit comments