Skip to content

Commit 00350d5

Browse files
PrashantUnityPrashantUnity
committed
footer
1 parent 2c6c1bb commit 00350d5

File tree

3 files changed

+270
-5
lines changed

3 files changed

+270
-5
lines changed

‎Component/Footer.razor‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
@using TomAndJerry.Services
2+
@inject IStateService StateService
3+
4+
<footer class="tom-jerry-footer mt-auto">
5+
<div class="max-w-7xl mx-auto px-4 py-8">
6+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
7+
<!-- Left Section - Brand & Description -->
8+
<div class="text-center md:text-left">
9+
<div class="flex items-center justify-center md:justify-start space-x-3 mb-4">
10+
<div class="tom-character">
11+
<div class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-white/30 shadow-lg">
12+
<RandomSticker Category="classic" CssClass="w-full h-full" ImageCssClass="w-full h-full object-cover" AutoRefresh="true" RefreshIntervalSeconds="15" />
13+
</div>
14+
</div>
15+
<h3 class="text-2xl font-bold text-white font-comic cartoon-text">
16+
Tom & Jerry
17+
</h3>
18+
</div>
19+
<p class="text-white/80 text-sm leading-relaxed font-comic">
20+
The classic cat and mouse chase that has entertained generations.
21+
Watch your favorite episodes and collect adorable stickers!
22+
</p>
23+
</div>
24+
25+
<!-- Center Section - Quick Links -->
26+
<div class="text-center">
27+
<h4 class="text-lg font-bold text-white font-comic cartoon-text mb-4">
28+
Quick Links
29+
</h4>
30+
<div class="space-y-2">
31+
<button @onclick="GoToHomePage"
32+
class="block w-full text-white/80 hover:text-yellow-300 transition-colors font-comic text-sm hover:scale-105 transform">
33+
🎬 All Episodes
34+
</button>
35+
<button @onclick="GoToStickers"
36+
class="block w-full text-white/80 hover:text-yellow-300 transition-colors font-comic text-sm hover:scale-105 transform">
37+
🎭 Sticker Gallery
38+
</button>
39+
<button @onclick="GoToSearch"
40+
class="block w-full text-white/80 hover:text-yellow-300 transition-colors font-comic text-sm hover:scale-105 transform">
41+
🔍 Search Episodes
42+
</button>
43+
</div>
44+
</div>
45+
46+
<!-- Right Section - Stats & Fun Facts -->
47+
<div class="text-center md:text-right">
48+
<h4 class="text-lg font-bold text-white font-comic cartoon-text mb-4">
49+
Fun Stats
50+
</h4>
51+
<div class="space-y-2">
52+
@if (StateService.IsLoading || !StateService.CurrentVideos.Any())
53+
{
54+
<div class="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-2 border border-white/30">
55+
<div class="h-4 bg-white/30 rounded w-16 mx-auto mb-1 skeleton"></div>
56+
<div class="text-xs text-white/80 font-comic">Episodes Available</div>
57+
</div>
58+
}
59+
else
60+
{
61+
<div class="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-2 border border-white/30">
62+
<div class="text-xl font-bold text-white font-cartoon">@StateService.CurrentVideos.Count()</div>
63+
<div class="text-xs text-white/80 font-comic">Episodes Available</div>
64+
</div>
65+
}
66+
<div class="bg-white/20 backdrop-blur-sm rounded-xl px-4 py-2 border border-white/30">
67+
<div class="text-xl font-bold text-white font-cartoon">24</div>
68+
<div class="text-xs text-white/80 font-comic">Stickers to Collect</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<!-- Bottom Section - Copyright & Credits -->
75+
<div class="border-t border-white/20 mt-8 pt-6">
76+
<div class="flex flex-col space-y-4">
77+
<!-- Main Disclaimer -->
78+
<div class="text-center">
79+
<p class="text-white/70 text-sm font-comic leading-relaxed">
80+
<strong class="text-yellow-300">⚠️ Educational Purpose Only</strong><br/>
81+
This application is created solely for learning and educational purposes.
82+
<span class="text-yellow-200">No content is monetized or used for commercial purposes.</span>
83+
</p>
84+
</div>
85+
86+
<!-- Content Ownership -->
87+
<div class="text-center">
88+
<p class="text-white/60 text-xs font-comic leading-relaxed">
89+
<strong>Content Disclaimer:</strong> All Tom & Jerry characters, episodes, and related content
90+
belong to their respective owners (Warner Bros. Discovery). None of the content displayed
91+
on this site belongs to the developer. This is a fan-made educational project.
92+
</p>
93+
</div>
94+
95+
<!-- Footer Bottom -->
96+
<div class="flex flex-col md:flex-row items-center justify-between space-y-2 md:space-y-0 pt-2">
97+
<div class="text-center md:text-left">
98+
<p class="text-white/60 text-xs font-comic">
99+
© 2024 Educational Project. Made with ❤️ for learning purposes.
100+
</p>
101+
</div>
102+
<div class="flex items-center space-x-3">
103+
<div class="jerry-character">
104+
<div class="w-6 h-6 rounded-full overflow-hidden ring-2 ring-white/30 shadow-lg">
105+
<RandomSticker Category="classic" CssClass="w-full h-full" ImageCssClass="w-full h-full object-cover" AutoRefresh="true" RefreshIntervalSeconds="18" />
106+
</div>
107+
</div>
108+
<p class="text-white/60 text-xs font-comic">
109+
Tom & Jerry © Warner Bros.
110+
</p>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</footer>
117+
118+
@code {
119+
[Inject] private NavigationManager nav { get; set; } = default!;
120+
121+
void GoToHomePage()
122+
{
123+
nav.NavigateTo("");
124+
}
125+
126+
void GoToStickers()
127+
{
128+
nav.NavigateTo("stickers");
129+
}
130+
131+
void GoToSearch()
132+
{
133+
nav.NavigateTo("search");
134+
}
135+
136+
protected override void OnInitialized()
137+
{
138+
StateService.OnStateChanged += StateHasChanged;
139+
}
140+
141+
public void Dispose()
142+
{
143+
StateService.OnStateChanged -= StateHasChanged;
144+
}
145+
}

‎Layout/MainLayout.razor‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
@inherits LayoutComponentBase
1+
@using TomAndJerry.Component
2+
@inherits LayoutComponentBase
23
<ErrorBoundary>
34
<ChildContent>
4-
<div class="min-h-screen cartoon-bg">
5+
<div class="min-h-screen cartoon-bg flex flex-col">
56
<AppBar/>
6-
<main class="pt-16">
7+
<main class="pt-16 flex-1">
78
@Body
89
</main>
10+
<Footer/>
911
</div>
1012
</ChildContent>
1113
<ErrorContent>
12-
<div class="min-h-screen cartoon-bg">
14+
<div class="min-h-screen cartoon-bg flex flex-col">
1315
<AppBar/>
14-
<main class="pt-16">
16+
<main class="pt-16 flex-1">
1517
@Body
1618
</main>
19+
<Footer/>
1720
</div>
1821
</ErrorContent>
1922
</ErrorBoundary>

‎wwwroot/app.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -464,4 +464,121 @@ input:focus {
464464
-webkit-text-fill-color: transparent;
465465
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
466466
filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
467+
}
468+
469+
/* Footer Styles */
470+
.tom-jerry-footer {
471+
background: linear-gradient(135deg, #1E40AF 0%, #DC2626 50%, #D97706 100%);
472+
border-top: 4px solid #FEF08A;
473+
box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
474+
position: relative;
475+
overflow: hidden;
476+
}
477+
478+
.tom-jerry-footer::before {
479+
content: '';
480+
position: absolute;
481+
top: 0;
482+
left: 0;
483+
right: 0;
484+
bottom: 0;
485+
background:
486+
radial-gradient(circle at 10% 20%, rgba(254, 240, 138, 0.1) 0%, transparent 50%),
487+
radial-gradient(circle at 90% 80%, rgba(248, 113, 113, 0.1) 0%, transparent 50%),
488+
radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.1) 0%, transparent 50%);
489+
pointer-events: none;
490+
}
491+
492+
.tom-jerry-footer .tom-character,
493+
.tom-jerry-footer .jerry-character {
494+
animation: characterBounce 2s ease-in-out infinite;
495+
}
496+
497+
.tom-jerry-footer .tom-character {
498+
animation-delay: 0s;
499+
}
500+
501+
.tom-jerry-footer .jerry-character {
502+
animation-delay: 1s;
503+
}
504+
505+
@keyframes characterBounce {
506+
0%, 100% {
507+
transform: translateY(0px) rotate(0deg);
508+
}
509+
25% {
510+
transform: translateY(-3px) rotate(2deg);
511+
}
512+
50% {
513+
transform: translateY(-6px) rotate(0deg);
514+
}
515+
75% {
516+
transform: translateY(-3px) rotate(-2deg);
517+
}
518+
}
519+
520+
.tom-jerry-footer button:hover {
521+
transform: scale(1.05) translateY(-2px);
522+
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
523+
}
524+
525+
.tom-jerry-footer .bg-white\/20 {
526+
backdrop-filter: blur(8px);
527+
transition: all 0.3s ease;
528+
}
529+
530+
.tom-jerry-footer .bg-white\/20:hover {
531+
background-color: rgba(255, 255, 255, 0.25);
532+
transform: translateY(-2px);
533+
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
534+
}
535+
536+
/* Footer disclaimer styling */
537+
.tom-jerry-footer .text-yellow-300 {
538+
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
539+
animation: disclaimerPulse 2s ease-in-out infinite;
540+
}
541+
542+
.tom-jerry-footer .text-yellow-200 {
543+
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
544+
}
545+
546+
@keyframes disclaimerPulse {
547+
0%, 100% {
548+
opacity: 1;
549+
}
550+
50% {
551+
opacity: 0.8;
552+
}
553+
}
554+
555+
.tom-jerry-footer .border-t {
556+
border-image: linear-gradient(90deg, transparent, rgba(254, 240, 138, 0.3), transparent) 1;
557+
}
558+
559+
/* Footer responsive adjustments */
560+
@media (max-width: 768px) {
561+
.tom-jerry-footer {
562+
padding: 1.5rem 0;
563+
}
564+
565+
.tom-jerry-footer .grid {
566+
gap: 2rem;
567+
}
568+
569+
.tom-jerry-footer h3 {
570+
font-size: 1.5rem;
571+
}
572+
573+
.tom-jerry-footer h4 {
574+
font-size: 1rem;
575+
}
576+
577+
.tom-jerry-footer .text-sm {
578+
font-size: 0.8rem;
579+
}
580+
581+
.tom-jerry-footer .text-xs {
582+
font-size: 0.7rem;
583+
}
467584
}

0 commit comments

Comments
 (0)