latest update

resources/views/layouts/plain.blade.php

@@ -4,6 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>@yield('title', config('app.name'))</title>
+
+    <!-- Open Graph meta tags default - will be overridden by page-specific tags -->
+    @stack('head')
+
     <!-- Favicon -->
     <link rel="icon" type="image/png" href="{{ asset('storage/images/logo.png') }}">
     <link rel="apple-touch-icon" href="{{ asset('storage/images/logo.png') }}">
@@ -18,53 +22,161 @@
             --text-primary: #f1f1f1;
             --text-secondary: #aaaaaa;
         }
-        
+
         * { box-sizing: border-box; }
-        
-        body { 
-            background-color: var(--bg-dark); 
-            color: var(--text-primary); 
-            font-family: "Roboto", "Arial", sans-serif; 
+
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-primary);
+            font-family: "Roboto", "Arial", sans-serif;
             margin: 0;
             padding: 0;
             min-height: 100vh;
+        }
+
+        /* Header */
+        .yt-header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 56px;
+            background: var(--bg-dark);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 16px;
+            z-index: 1000;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .yt-header-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .yt-menu-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
+            cursor: pointer;
+            transition: background 0.2s;
+            background: transparent;
+            border: none;
+            color: var(--text-primary);
         }
-        
+
+        .yt-menu-btn:hover { background: var(--border-color); }
+
+        .yt-logo {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            gap: 4px;
+        }
+
+        .yt-logo-text {
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            letter-spacing: -1px;
+        }
+
+        /* Search - Hidden on plain layout */
+        .yt-header-center { display: none; }
+
+        /* Header Right */
+        .yt-header-right {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-icon-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+            color: var(--text-primary);
+            font-size: 1.2rem;
+        }
+
+        .yt-icon-btn:hover { background: var(--border-color); }
+
+        .yt-user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #555;
+            cursor: pointer;
+        }
+
+        /* Main Content */
         .plain-main {
             width: 100%;
             padding: 20px;
+            padding-top: 76px; /* 56px header + 20px */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: calc(100vh);
         }
-        
+
+        /* Upload Button */
+        .yt-upload-btn {
+            background: var(--brand-red);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .yt-upload-btn:hover { background: #cc1a1a; }
+
         /* Dropdown */
         .dropdown-menu-dark {
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
         }
-        
+
         .dropdown-item {
             color: var(--text-primary);
         }
-        
+
         .dropdown-item:hover {
             background: var(--border-color);
             color: var(--text-primary);
         }
     </style>
-    
+
     @yield('extra_styles')
 </head>
 <body>
-    <!-- Main Content - No header or sidebar -->
+    <!-- Header -->
+    @include('layouts.partials.header')
+
+    <!-- Main Content -->
     <main class="plain-main">
         @yield('content')
     </main>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-    
+
     @yield('scripts')
 </body>
-</html>