1 files changed, 125 insertions, 9 deletions
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e3fe561..3ac93ed 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -72,21 +72,137 @@
 
     <style>
     @yield('styles')
+
+    /* Neon theme utilities */
+    :root {
+        --cinema-bg: #1a1e23;
+        --cinema-surface: #232830;
+        --cinema-surface-light: #2b313b;
+        --cinema-border: #2f363f;
+        --cinema-cyan: #00e5d4;
+        --cinema-cyan-hover: #00cfc0;
+        --cinema-pink: #ff2e63;
+        --cinema-text: #e2e8f0;
+        --cinema-text-muted: #94a3b8;
+    }
+
+    /* Custom scrollbar */
+    ::-webkit-scrollbar { width: 8px; }
+    ::-webkit-scrollbar-track { background: var(--cinema-bg); }
+    ::-webkit-scrollbar-thumb { background: var(--cinema-surface-light); border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--cinema-border); }
+
+    /* Card overrides for neon theme */
+    .card {
+        background-color: var(--cinema-surface);
+        border: 1px solid var(--cinema-border);
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
+    }
+    .card-header {
+        background-color: rgba(0,0,0,0.2);
+        border-bottom: 1px solid var(--cinema-border);
+        padding: 1rem;
+        font-weight: 600;
+        color: var(--cinema-text-muted);
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        letter-spacing: 0.5px;
+    }
+    .card-body { color: var(--cinema-text); }
+    .card-text { color: var(--cinema-text-muted); }
+    .card-links { color: var(--cinema-cyan); }
+    .card-links:hover { color: var(--cinema-cyan-hover); }
+
+    /* Button overrides */
+    .btn-outline-primary {
+        color: var(--cinema-cyan);
+        border-color: var(--cinema-cyan);
+    }
+    .btn-outline-primary:hover, .btn-outline-primary:focus {
+        color: #000;
+        background-color: var(--cinema-cyan);
+        border-color: var(--cinema-cyan);
+    }
+    .btn-primary {
+        background-color: var(--cinema-cyan);
+        color: #000;
+        font-weight: 700;
+        border: none;
+        transition: all 0.2s;
+    }
+    .btn-primary:hover {
+        background-color: var(--cinema-cyan-hover);
+        color: #000;
+        box-shadow: 0 0 15px rgba(0, 229, 212, 0.3);
+    }
+    .btn-outline-secondary {
+        color: var(--cinema-text-muted);
+        border-color: var(--cinema-border);
+    }
+    .btn-outline-secondary:hover {
+        color: #000;
+        background-color: var(--cinema-surface-light);
+        border-color: var(--cinema-surface-light);
+    }
+
+    /* Badge overrides */
+    .badge-primary {
+        background-color: var(--cinema-cyan);
+        color: #000;
+        font-weight: 600;
+    }
+    .badge-secondary {
+        background-color: var(--cinema-surface-light);
+        color: var(--cinema-text-muted);
+    }
+
+    /* Navbar divider */
     .nav-bar-divider {
         display: inline;
         padding: 0 8px;
-        color: #fff;
+        color: var(--cinema-text-muted);
         opacity: 0.5;
         user-select: none;
     }
-    .btn-outline-secondary {
-        color: #868e96;
-        border-color: #868e96;
+
+    /* Form inputs */
+    .form-control {
+        background-color: var(--cinema-surface-light);
+        border-color: var(--cinema-border);
+        color: var(--cinema-text);
     }
-    .btn-outline-secondary:hover {
-        color: #fff;
-        background-color: #868e96;
-        border-color: #868e96;
+    .form-control:focus {
+        background-color: var(--cinema-surface-light);
+        border-color: var(--cinema-cyan);
+        color: var(--cinema-text);
+        box-shadow: 0 0 0 0.2rem rgba(0, 229, 212, 0.25);
+    }
+    .form-control::placeholder {
+        color: var(--cinema-text-muted);
+        opacity: 0.6;
+    }
+
+    /* Pagination */
+    .page-link {
+        background-color: var(--cinema-surface);
+        border-color: var(--cinema-border);
+        color: var(--cinema-text-muted);
+    }
+    .page-link:hover {
+        color: var(--cinema-cyan);
+        background-color: var(--cinema-surface-light);
+        border-color: var(--cinema-border);
+    }
+    .page-item.active .page-link {
+        background-color: var(--cinema-cyan);
+        border-color: var(--cinema-cyan);
+        color: #000;
+    }
+
+    /* Footer */
+    .footer {
+        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(26,30,35,0.9) 100%);
     }
     </style>
     @if ( "new" == Request::route()->getName() || "popular" == Request::route()->getName() )
@@ -113,7 +229,7 @@
 </head>
 <body class="d-flex flex-column h-100">
     <div id="app">
-        <nav class="navbar navbar-expand-md navbar-dark shadow-sm">
+        <nav class="navbar navbar-expand-md navbar-dark hnimdb-navbar">
             <div class="container">
                 <a class="navbar-brand" href="{{ url('/') }}">
                     {{ config('app.name', 'Laravel') }}