Improve layout and visual styles for search pages

Enhanced the MainLayout and search pages with improved CSS for smoother scrolling, better overflow handling, and more visually appealing backgrounds. Updated the SearchShows match result section for a cleaner, more modern look. Refined keyframe animations and mobile responsiveness for a more polished user experience.
2025-08-26 09:29:12 -04:00
parent 9f238ebafc
commit 26a7b04e82
3 changed files with 344 additions and 151 deletions
@@ -176,20 +176,24 @@
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        position: relative;
+        overflow-x: hidden;
    }

        body::before {
            content: '';
            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
+            top: -100px;
+            left: -100px;
+            right: -100px;
+            bottom: -100px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.08)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>') repeat;
            opacity: 0.3;
            pointer-events: none;
-            animation: float 20s ease-in-out infinite;
+            animation: floatContained 20s ease-in-out infinite;
            z-index: -1;
+            will-change: transform;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
        }

    .search-container {
@@ -199,32 +203,51 @@
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        position: relative;
        z-index: 1;
+        overflow: hidden;
    }

        .search-container::before {
            content: '';
            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
+            top: -100px;
+            left: -100px;
+            right: -100px;
+            bottom: -100px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.08)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>') repeat;
            opacity: 0.3;
            pointer-events: none;
-            animation: float 20s ease-in-out infinite;
+            animation: floatContained 20s ease-in-out infinite;
+            z-index: -1;
+            overflow: hidden;
+            will-change: transform;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
        }

-    @@keyframes float {
+    @@keyframes floatContained {
        0%, 100%

    {
-        transform: translateY(0px) rotate(0deg);
+        transform: translateY(0px) rotate(0deg) scale(1);
+    }
+
+    25% {
+        transform: translateY(-5px) rotate(45deg) scale(1.02);
    }

    50% {
-        transform: translateY(-20px) rotate(180deg);
+        transform: translateY(-8px) rotate(90deg) scale(0.98);
    }

+    75% {
+        transform: translateY(-5px) rotate(135deg) scale(1.02);
+    }
+
+    }
+
+    html {
+        overflow-x: hidden;
+        scroll-behavior: smooth;
    }

    .search-header {
@@ -799,6 +822,7 @@
        font-weight: 500;
    }

+    /* Mobile optimization */
    @@media (max-width: 768px) {
        .search-container

@@ -828,6 +852,31 @@
        gap: 1rem;
    }

+    body::before,
+    .search-container::before {
+        animation: floatContained 25s ease-in-out infinite;
+    }
+
+    @@keyframes floatContained {
+        0%, 100%
+
+    {
+        transform: translateY(0px) rotate(0deg) scale(1);
+    }
+
+    25% {
+        transform: translateY(-3px) rotate(45deg) scale(1.01);
+    }
+
+    50% {
+        transform: translateY(-5px) rotate(90deg) scale(0.99);
+    }
+
+    75% {
+        transform: translateY(-3px) rotate(135deg) scale(1.01);
+    }
+
+    }
    }
 </style>

@@ -73,30 +73,20 @@
            @if (_matchedShow != null)
            {
                <div class="matched-show-section">
-                    <h4 class="section-title">Your Search Match</h4>
-                    <div class="show-card featured">
-                        <div class="poster-container">
-                            <img class="poster-image"
-                                 src="@($"https://image.tmdb.org/t/p/w500{_matchedShow.ShowPosterPath}")"
+                    <h4 class="section-title">
+                        <span class="match-indicator"></span>
+                        Your Search Result
+                    </h4>
+                    <div class="search-match-banner">
+                        <div class="match-poster">
+                            <img src="@($"https://image.tmdb.org/t/p/w200{_matchedShow.ShowPosterPath}")"
                                 alt="@_matchedShow.ShowTitle Poster"
                                 loading="lazy" />
-                            <div class="match-badge">✨ Match</div>
-                            <div class="poster-overlay">
-                                <div class="overlay-content">
-                                    <span class="view-details">View Details</span>
-                                </div>
-                            </div>
                        </div>
-                        <div class="card-content">
-                            <h5 class="show-title">@_matchedShow.ShowTitle</h5>
-                            <div class="character-name">as @_matchedShow.CharacterName</div>
-                            @if (!string.IsNullOrEmpty(_matchedShow.Overview?.Trim()))
-                            {
-                                <p class="show-overview expanded">
-                                    @_matchedShow.Overview.Trim()
-                                </p>
-                            }
-                            <div class="air-date">First aired: @_matchedShow.FirstAirDate</div>
+                        <div class="match-info">
+                            <h5 class="match-title">@_matchedShow.ShowTitle</h5>
+                            <div class="match-character">as @_matchedShow.CharacterName</div>
+                            <div class="match-date">First aired: @_matchedShow.FirstAirDate</div>
                        </div>
                    </div>
                </div>
@@ -179,40 +169,78 @@
 </div>

 <style>
+    body {
+        margin: 0;
+        padding: 0;
+        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+        min-height: 100vh;
+        position: relative;
+        overflow-x: hidden;
+    }
+
+    body::before {
+        content: '';
+        position: fixed;
+        top: -100px;
+        left: -100px;
+        right: -100px;
+        bottom: -100px;
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="20" width="15" height="10" fill="rgba(255,255,255,0.06)" rx="2"/><rect x="70" y="10" width="20" height="15" fill="rgba(255,255,255,0.04)" rx="2"/><rect x="30" y="70" width="12" height="8" fill="rgba(255,255,255,0.05)" rx="1"/></svg>') repeat;
+        opacity: 0.4;
+        pointer-events: none;
+        animation: floatContained 25s ease-in-out infinite;
+        z-index: -1;
+        will-change: transform;
+        backface-visibility: hidden;
+        transform-style: preserve-3d;
+    }
+
    .search-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
-        min-height: 100vh;
        position: relative;
+        z-index: 1;
+        overflow: hidden;
    }

-        .search-container::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="20" width="15" height="10" fill="rgba(255,255,255,0.06)" rx="2"/><rect x="70" y="10" width="20" height="15" fill="rgba(255,255,255,0.04)" rx="2"/><rect x="30" y="70" width="12" height="8" fill="rgba(255,255,255,0.05)" rx="1"/></svg>') repeat;
-            opacity: 0.4;
-            pointer-events: none;
-            animation: float 25s ease-in-out infinite;
+    .search-container::before {
+        content: '';
+        position: absolute;
+        top: -100px;
+        left: -100px;
+        right: -100px;
+        bottom: -100px;
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="20" width="15" height="10" fill="rgba(255,255,255,0.06)" rx="2"/><rect x="70" y="10" width="20" height="15" fill="rgba(255,255,255,0.04)" rx="2"/><rect x="30" y="70" width="12" height="8" fill="rgba(255,255,255,0.05)" rx="1"/></svg>') repeat;
+        opacity: 0.4;
+        pointer-events: none;
+        animation: floatContained 25s ease-in-out infinite;
+        z-index: -1;
+        overflow: hidden;
+        will-change: transform;
+        backface-visibility: hidden;
+        transform-style: preserve-3d;
+    }
+
+    @@keyframes floatContained {
+        0%, 100% {
+            transform: translateY(0px) rotate(0deg) scale(1);
+        }
+        25% {
+            transform: translateY(-5px) rotate(45deg) scale(1.02);
+        }
+        50% {
+            transform: translateY(-8px) rotate(90deg) scale(0.98);
+        }
+        75% {
+            transform: translateY(-5px) rotate(135deg) scale(1.02);
        }
-
-    @@keyframes float {
-        0%, 100%
-
-    {
-        transform: translateY(0px) rotate(0deg);
-    }
-
-    50% {
-        transform: translateY(-30px) rotate(180deg);
    }

+    html {
+        overflow-x: hidden;
+        scroll-behavior: smooth;
    }

    .search-header {
@@ -285,18 +313,14 @@
    }

    @@keyframes slideInDown {
-        from
-
-    {
-        opacity: 0;
-        transform: translateY(-50px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-
+        from {
+            opacity: 0;
+            transform: translateY(-50px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
    }

    .search-subtitle {
@@ -307,16 +331,12 @@
    }

    @@keyframes fadeIn {
-        from
-
-    {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
    }

    .search-form {
@@ -333,18 +353,14 @@
    }

    @@keyframes slideInUp {
-        from
-
-    {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
    }

    .input-group {
@@ -433,16 +449,12 @@
    }

    @@keyframes spin {
-        0%
-
-    {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
    }

    .loading-state, .welcome-state, .no-results {
@@ -478,16 +490,12 @@
        }

    @@keyframes bounce {
-        0%, 80%, 100%
-
-    {
-        transform: scale(0);
-    }
-
-    40% {
-        transform: scale(1);
-    }
-
+        0%, 80%, 100% {
+            transform: scale(0);
+        }
+        40% {
+            transform: scale(1);
+        }
    }

    .welcome-icon, .no-results-icon {
@@ -497,16 +505,12 @@
    }

    @@keyframes pulse {
-        0%, 100%
-
-    {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(1.1);
-    }
-
+        0%, 100% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(1.1);
+        }
    }

    .results-section {
@@ -549,7 +553,65 @@
    }

    .matched-show-section {
-        margin-bottom: 3rem;
+        margin-bottom: 2rem;
+    }
+
+    .search-match-banner {
+        background: rgba(255,255,255,0.15);
+        border-radius: 1rem;
+        padding: 1.5rem;
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255,255,255,0.2);
+        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    }
+
+    .match-poster {
+        flex-shrink: 0;
+    }
+
+        .match-poster img {
+            width: 80px;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+
+    .match-info {
+        flex: 1;
+        color: white;
+    }
+
+    .match-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0 0 0.5rem 0;
+        color: white;
+    }
+
+    .match-character {
+        font-size: 0.95rem;
+        color: rgba(255,255,255,0.8);
+        margin-bottom: 0.25rem;
+    }
+
+    .match-date {
+        font-size: 0.85rem;
+        color: rgba(255,255,255,0.6);
+    }
+
+    .match-indicator {
+        font-family: 'Courier New', monospace;
+        background: rgba(16, 185, 129, 0.8);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: 0.5rem;
+        font-size: 0.8rem;
+        font-weight: 600;
+        margin-right: 0.5rem;
    }

    .section-title {
@@ -730,35 +792,53 @@
        font-weight: 500;
    }

+    /* Mobile optimization */
    @@media (max-width: 768px) {
-        .search-container
+        .search-container {
+            padding: 1rem;
+        }

-    {
-        padding: 1rem;
-    }
+        .search-title {
+            font-size: 2rem;
+        }

-    .search-title {
-        font-size: 2rem;
-    }
+        .input-group {
+            flex-direction: column;
+        }

-    .input-group {
-        flex-direction: column;
-    }
+        .input-wrapper {
+            min-width: auto;
+        }

-    .input-wrapper {
-        min-width: auto;
-    }
+        .actor-header {
+            flex-direction: column;
+            align-items: stretch;
+        }

-    .actor-header {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .shows-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
+        .shows-grid {
+            grid-template-columns: 1fr;
+            gap: 1rem;
+        }

+        body::before,
+        .search-container::before {
+            animation: floatContained 30s ease-in-out infinite;
+        }
+        
+        @@keyframes floatContained {
+            0%, 100% {
+                transform: translateY(0px) rotate(0deg) scale(1);
+            }
+            25% {
+                transform: translateY(-3px) rotate(45deg) scale(1.01);
+            }
+            50% {
+                transform: translateY(-5px) rotate(90deg) scale(0.99);
+            }
+            75% {
+                transform: translateY(-3px) rotate(135deg) scale(1.01);
+            }
+        }
    }
 </style>