mmcghen/IKnowThem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign movie and show search pages with new UI

Browse Source 
Major UI/UX overhaul for SearchMovies.razor and SearchShows.razor, including new navigation toggles, animated search forms, improved results display, and enhanced styling. Moved layout and header styles from MainLayout.razor to CSS, unified button styles on Home.razor, and added interactive elements and animations for a more engaging user experience.
This commit is contained in:
Michael McGhen
2025-08-25 20:26:37 -04:00
parent 5c062a4d79
commit 1dbcc39bc7
5 changed files with 1250 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MovieActorLookup/Components/Pages/Home.razor
+2 -13
View File
@@ -8,7 +8,7 @@
<p class="description">This app helps you quickly identify actors, find out what else they've been in, and explore cast details for your favorite <strong>movies</strong> and <strong>TV shows</strong>.</p>
<div class="cta-buttons">
<NavLink class="cta-button primary" href="/searchmovies">🎬 Search Movies</NavLink>
<NavLink class="cta-button secondary" href="/searchshows">📺 Search TV Shows</NavLink>
<NavLink class="cta-button primary" href="/searchshows">📺 Search TV Shows</NavLink>
</div>
</div>
</div>
@@ -180,24 +180,13 @@
}
.cta-button.primary {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.cta-button.primary:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.6);
}
.cta-button.secondary {
background: rgba(255, 255, 255, 0.15);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.cta-button.secondary:hover {
.cta-button.primary:hover {
transform: translateY(-3px) scale(1.05);
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);