id Given

Author: PrashantUnity

src/Component/AppBar.razor

@@ -4,13 +4,13 @@
 @inject NavigationManager nav
 @inject IJSRuntime JSRuntime
 
-<header class="fixed top-0 left-0 right-0 z-50 tom-jerry-header shadow-lg">
+<header id="app-header" class="fixed top-0 left-0 right-0 z-50 tom-jerry-header shadow-lg">
     <div class="max-w-7xl mx-auto px-2 sm:px-4">
         <div class="flex items-center justify-between h-14 sm:h-16">
             <!-- Left Section -->
-            <div class="flex items-center space-x-2 sm:space-x-4">
+            <div id="header-left-section" class="flex items-center space-x-2 sm:space-x-4">
                 <!-- Logo -->
-                <div class="flex items-center space-x-2 sm:space-x-3 cursor-pointer" @onclick="GoToHomePage">
+                <div id="app-logo" class="flex items-center space-x-2 sm:space-x-3 cursor-pointer" @onclick="GoToHomePage">
                     <div class="tom-character">
                         <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full overflow-hidden ring-2 ring-white/30 shadow-lg">
                             <RandomSticker Category="classic" CssClass="w-full h-full" ImageCssClass="w-full h-full object-cover" AutoRefresh="true" RefreshIntervalSeconds="12" />
@@ -20,14 +20,14 @@
             </div>
 
             <!-- Center Section - Search -->
-            <div class="flex-1 max-w-xs sm:max-w-md md:max-w-2xl mx-2 sm:mx-4 md:mx-8">
+            <div id="header-search-section" class="flex-1 max-w-xs sm:max-w-md md:max-w-2xl mx-2 sm:mx-4 md:mx-8">
                 <RealTimeSearch />
             </div>
 
             <!-- Right Section -->
-            <div class="flex items-center space-x-1 sm:space-x-2">
+            <div id="header-right-section" class="flex items-center space-x-1 sm:space-x-2">
                 <!-- Quiz Button -->
-                <button @onclick="GoToQuiz" 
+                <button id="header-quiz-btn" @onclick="GoToQuiz" 
                         class="hidden sm:flex items-center space-x-2 bg-cartoon-yellow text-amber-800 rounded-xl px-3 py-2 font-bold font-comic hover:bg-cartoon-orange transition-colors cartoon-rounded">
                     <span class="text-lg">🧠</span>
                     <span class="text-sm">Quiz</span>

src/Component/StickerGallery.razor

@@ -3,11 +3,11 @@
 @inject IStickerService StickerService
 @inherits BaseComponent
 
-<div class="sticker-gallery">
+<div id="sticker-gallery" class="sticker-gallery">
     @if (isLoading)
     {
         <!-- Loading State -->
-        <div class="flex justify-center items-center py-8">
+        <div id="sticker-loading-state" class="flex justify-center items-center py-8">
             <div class="flex space-x-2">
                 <div class="w-4 h-4 bg-tom-blue rounded-full animate-bounce"></div>
                 <div class="w-4 h-4 bg-cartoon-red rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
@@ -18,24 +18,24 @@
     else if (stickers.Any())
     {
         <!-- Sticker Grid -->
-        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3 sm:gap-4">
+        <div id="sticker-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3 sm:gap-4">
             @foreach (var sticker in stickers)
             {
-                <div class="sticker-item group cursor-pointer" @onclick="() => OnStickerClick(sticker)">
+                <div id="[email protected]" class="sticker-item group cursor-pointer" @onclick="() => OnStickerClick(sticker)">
                     <div class="relative aspect-square bg-gradient-to-br from-soft-yellow to-cartoon-orange rounded-xl sm:rounded-2xl overflow-hidden border-2 border-jerry-brown shadow-lg hover:shadow-xl transition-all duration-300 group-hover:scale-110 group-hover:rotate-2">
                         <img src="@sticker.ImagePath" 
                              alt="@sticker.DisplayName" 
                              class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"/>
 
                         <!-- Hover Overlay -->
-                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <div id="[email protected]" class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                             <div class="absolute bottom-2 left-2 right-2">
                                 <p class="text-white text-xs font-comic font-bold text-center truncate">@sticker.DisplayName</p>
                             </div>
                         </div>
 
                         <!-- Category Badge -->
-                        <div class="absolute top-2 right-2 bg-jerry-brown text-white text-xs px-2 py-1 rounded-full font-bold font-comic opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        <div id="[email protected]" class="absolute top-2 right-2 bg-jerry-brown text-white text-xs px-2 py-1 rounded-full font-bold font-comic opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                             @sticker.Category
                         </div>
                     </div>
@@ -46,7 +46,7 @@
     else
     {
         <!-- Empty State -->
-        <div class="text-center py-12">
+        <div id="sticker-empty-state" class="text-center py-12">
             <div class="text-gray-500">
                 <svg class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>

src/Component/Thumbnail.razor

@@ -2,15 +2,15 @@
 @using TomAndJerry.Model
 @inject NavigationManager Nav
 
-<div class="tom-jerry-card cursor-pointer group p-2 sm:p-4" @onclick="GoToPage">
+<div id="[email protected]" class="tom-jerry-card cursor-pointer group p-2 sm:p-4" @onclick="GoToPage">
     <!-- Thumbnail Container -->
-    <div class="relative aspect-video bg-soft-yellow rounded-xl sm:rounded-2xl overflow-hidden mb-3 sm:mb-4 border-2 border-jerry-brown shadow-lg">
+    <div id="[email protected]" class="relative aspect-video bg-soft-yellow rounded-xl sm:rounded-2xl overflow-hidden mb-3 sm:mb-4 border-2 border-jerry-brown shadow-lg">
         <img src="@VideoModel.Thumbnail" 
              alt="@GetCleanTitle()" 
              class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/>
 
         <!-- Play Button Overlay -->
-        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+        <div id="[email protected]" class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
             <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-r from-tom-blue to-cartoon-red rounded-full flex items-center justify-center shadow-2xl cartoon-rounded animate-bounce-slow">
                 <svg class="w-6 h-6 sm:w-8 sm:h-8 text-white ml-1" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
@@ -19,20 +19,20 @@
         </div>
 
         <!-- Duration Badge -->
-        <div class="absolute bottom-2 sm:bottom-3 right-2 sm:right-3 bg-jerry-brown text-white text-xs px-2 sm:px-3 py-1 rounded-full font-bold font-comic shadow-lg">
+        <div id="[email protected]" class="absolute bottom-2 sm:bottom-3 right-2 sm:right-3 bg-jerry-brown text-white text-xs px-2 sm:px-3 py-1 rounded-full font-bold font-comic shadow-lg">
             7:30
         </div>
     </div>
 
     <!-- Video Info -->
-    <div class="space-y-2 sm:space-y-3">
+    <div id="[email protected]" class="space-y-2 sm:space-y-3">
         <!-- Title -->
-        <h3 class="font-bold text-amber-800 text-sm sm:text-base line-clamp-2 group-hover:text-blue-600 transition-colors font-cartoon">
+        <h3 id="[email protected]" class="font-bold text-amber-800 text-sm sm:text-base line-clamp-2 group-hover:text-blue-600 transition-colors font-cartoon">
             @GetCleanTitle()
         </h3>
 
         <!-- Channel Info -->
-        <div class="flex items-center space-x-2 sm:space-x-3">
+        <div id="[email protected]" class="flex items-center space-x-2 sm:space-x-3">
             <div class="jerry-character">
                 <div class="w-6 h-6 sm:w-8 sm:h-8 rounded-full overflow-hidden ring-2 ring-cartoon-yellow shadow-lg">
                     <RandomSticker CssClass="w-full h-full" ImageCssClass="w-full h-full object-cover" AutoRefresh="true" RefreshIntervalSeconds="15" />
@@ -42,7 +42,7 @@
         </div>
 
         <!-- Stats -->
-        <div class="text-xs sm:text-sm text-amber-800 font-comic font-semibold">
+        <div id="[email protected]" class="text-xs sm:text-sm text-amber-800 font-comic font-semibold">
             <span class="bg-soft-yellow px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full">@GetRandomViews() views</span>
             <span class="mx-1 sm:mx-2">•</span>
             <span class="bg-soft-blue px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full">@GetRandomTimeAgo()</span>