Skip to content

Commit feb078b

Browse files
PrashantUnityPrashantUnity
committed
Theme like Tom And Jerry
1 parent 1d07864 commit feb078b

File tree

7 files changed

+333
-155
lines changed

7 files changed

+333
-155
lines changed

‎.idea/.idea.TomAndJerry/.idea/.gitignore‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Component/AppBar.razor‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,43 @@
33
@inject NavigationManager nav
44
@inject IJSRuntime JSRuntime
55

6-
<header class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 shadow-sm">
7-
<div class="max-w-7xl mx-auto px-4">
8-
<div class="flex items-center justify-between h-16">
6+
<header class="fixed top-0 left-0 right-0 z-50 tom-jerry-header shadow-lg">
7+
<div class="max-w-7xl mx-auto px-2 sm:px-4">
8+
<div class="flex items-center justify-between h-14 sm:h-16">
99
<!-- Left Section -->
10-
<div class="flex items-center space-x-4">
11-
<!-- Menu Button -->
12-
<button @onclick="GoToHomePage"
13-
class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full transition-colors">
14-
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
15-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
16-
</svg>
17-
</button>
18-
10+
<div class="flex items-center space-x-2 sm:space-x-4">
1911
<!-- Logo -->
20-
<div class="flex items-center space-x-3">
21-
<div class="w-8 h-8 rounded-full overflow-hidden">
22-
<img src="Tom.png" alt="Tom & Jerry" class="w-full h-full object-cover"/>
12+
<div class="flex items-center space-x-2 sm:space-x-3 cursor-pointer" @onclick="GoToHomePage">
13+
<div class="tom-character">
14+
<div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full overflow-hidden ring-2 ring-white/30 shadow-lg">
15+
<img src="Tom.png" alt="Tom" class="w-full h-full object-cover"/>
16+
</div>
2317
</div>
24-
<span class="text-xl font-bold text-gray-900">Tom & Jerry</span>
2518
</div>
2619
</div>
2720

2821
<!-- Center Section - Search -->
29-
<div class="flex-1 max-w-2xl mx-8">
22+
<div class="flex-1 max-w-xs sm:max-w-md md:max-w-2xl mx-2 sm:mx-4 md:mx-8">
3023
<RealTimeSearch />
3124
</div>
3225

3326
<!-- Right Section -->
34-
<div class="flex items-center space-x-2">
27+
<div class="flex items-center space-x-1 sm:space-x-2">
3528
<!-- Stats -->
36-
<div class="hidden md:flex items-center space-x-4 text-sm text-gray-600">
37-
<div class="text-center">
29+
<div class="hidden sm:flex items-center space-x-2 md:space-x-4 text-sm text-white">
30+
<div class="text-center bg-white/20 rounded-2xl px-2 sm:px-4 py-1 sm:py-2 cartoon-rounded">
3831
@if (StateService.IsLoading || !StateService.CurrentVideos.Any())
3932
{
40-
<div class="h-5 bg-gray-200 rounded w-8 mx-auto mb-1 skeleton"></div>
41-
<div class="text-xs text-gray-500">Episodes</div>
33+
<div class="h-4 sm:h-5 bg-white/30 rounded w-6 sm:w-8 mx-auto mb-1 skeleton"></div>
34+
<div class="text-xs text-white/80 font-comic">Episodes</div>
4235
}
4336
else
4437
{
45-
<div class="font-semibold text-gray-900">@StateService.CurrentVideos.Count()</div>
46-
<div class="text-xs text-gray-500">Episodes</div>
38+
<div class="font-bold text-white font-cartoon text-sm sm:text-lg">@StateService.CurrentVideos.Count()</div>
39+
<div class="text-xs text-white/80 font-comic">Episodes</div>
4740
}
4841
</div>
4942
</div>
50-
51-
<!-- Profile -->
52-
<div class="w-8 h-8 rounded-full overflow-hidden ring-2 ring-gray-200">
53-
<img src="Tom.png" alt="Profile" class="w-full h-full object-cover"/>
54-
</div>
5543
</div>
5644
</div>
5745
</div>

‎Component/Thumbnail.razor‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,49 @@
11
@inject NavigationManager Nav
22

3-
<div class="video-card cursor-pointer group" @onclick="GoToPage">
3+
<div class="tom-jerry-card cursor-pointer group p-2 sm:p-4" @onclick="GoToPage">
44
<!-- Thumbnail Container -->
5-
<div class="relative aspect-video bg-gray-200 rounded-lg overflow-hidden mb-3">
5+
<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">
66
<img src="@VideoModel.Thumbnail"
77
alt="@GetCleanTitle()"
88
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/>
99

1010
<!-- Play Button Overlay -->
1111
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
12-
<div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center shadow-lg">
13-
<svg class="w-6 h-6 text-white ml-1" fill="currentColor" viewBox="0 0 20 20">
12+
<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">
13+
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-white ml-1" fill="currentColor" viewBox="0 0 20 20">
1414
<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"/>
1515
</svg>
1616
</div>
1717
</div>
1818

1919
<!-- Duration Badge -->
20-
<div class="absolute bottom-2 right-2 bg-black bg-opacity-80 text-white text-xs px-2 py-1 rounded">
20+
<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">
2121
7:30
2222
</div>
2323
</div>
2424

2525
<!-- Video Info -->
26-
<div class="space-y-2">
26+
<div class="space-y-2 sm:space-y-3">
2727
<!-- Title -->
28-
<h3 class="font-medium text-gray-900 text-sm line-clamp-2 group-hover:text-red-600 transition-colors">
28+
<h3 class="font-bold text-jerry-brown text-sm sm:text-base line-clamp-2 group-hover:text-tom-blue transition-colors font-cartoon">
2929
@GetCleanTitle()
3030
</h3>
3131

3232
<!-- Channel Info -->
33-
<div class="flex items-center space-x-2">
34-
<div class="w-6 h-6 rounded-full overflow-hidden">
35-
<img src="Tom.png" alt="Tom & Jerry" class="w-full h-full object-cover"/>
33+
<div class="flex items-center space-x-2 sm:space-x-3">
34+
<div class="jerry-character">
35+
<div class="w-6 h-6 sm:w-8 sm:h-8 rounded-full overflow-hidden ring-2 ring-cartoon-yellow shadow-lg">
36+
<img src="Tom.png" alt="Tom & Jerry" class="w-full h-full object-cover"/>
37+
</div>
3638
</div>
37-
<span class="text-xs text-gray-600">Tom & Jerry</span>
39+
<span class="text-xs sm:text-sm text-jerry-dark-brown font-comic font-bold">Tom & Jerry</span>
3840
</div>
3941

4042
<!-- Stats -->
41-
<div class="text-xs text-gray-500">
42-
<span>@GetRandomViews() views</span>
43-
<span class="mx-1">•</span>
44-
<span>@GetRandomTimeAgo()</span>
43+
<div class="text-xs sm:text-sm text-jerry-brown font-comic">
44+
<span class="bg-soft-yellow px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full">@GetRandomViews() views</span>
45+
<span class="mx-1 sm:mx-2">•</span>
46+
<span class="bg-soft-blue px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full">@GetRandomTimeAgo()</span>
4547
</div>
4648
</div>
4749
</div>

‎Layout/MainLayout.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
@inherits LayoutComponentBase
22
<ErrorBoundary>
33
<ChildContent>
4-
<div class="min-h-screen bg-gray-50">
4+
<div class="min-h-screen cartoon-bg">
55
<AppBar/>
66
<main class="pt-16">
77
@Body
88
</main>
99
</div>
1010
</ChildContent>
1111
<ErrorContent>
12-
<div class="min-h-screen bg-gray-50">
12+
<div class="min-h-screen cartoon-bg">
1313
<AppBar/>
1414
<main class="pt-16">
1515
@Body

0 commit comments

Comments
 (0)