Subscription-Content-Management/resources/views/layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Click Content Management</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

    <!-- Scripts & Styles -->
    <link rel="stylesheet" href="{{ url('public/assets/libs/bootstrap/css/bootstrap5.3.2.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    
    <!-- Lighter Sea/Sky Blue Theme Customizations -->
    <style>
        :root {
            --bs-primary: #0096c7;
            --bs-primary-rgb: 0, 150, 199;
        }
        body {
            font-family: 'Nunito', sans-serif;
            background-color: #f0f7ff; /* Very soft bright ice blue */
            color: #333333;
        }
        .navbar-sea {
            background: linear-gradient(135deg, #0077b6, #00b4d8); /* Brighter, lighter sea blue gradient */
            box-shadow: 0 4px 12px rgba(0, 150, 199, 0.2);
        }
        .navbar-sea .navbar-brand, 
        .navbar-sea .nav-link {
            color: #ffffff !important;
            font-weight: 600;
        }
        .navbar-sea .nav-link:hover {
            color: #caf0f8 !important;
        }
        .card {
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 119, 182, 0.05);
            transition: transform 0.2s ease-in-out;
        }
        .btn-primary {
            background-color: #0096c7;
            border-color: #0077b6;
        }
        .btn-primary:hover {
            background-color: #0077b6;
            border-color: #03045e;
        }
        .dropdown-menu {
            border-radius: 0.5rem;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
            border: none;
        }
    </style>

    @stack('styles')
    <script>
        var base_url = "{!! url('/') !!}";
    </script>
</head>
<body>
    <div id="app">
        <!-- Lighter Sea Blue Gradient Navbar -->
        <nav class="navbar navbar-expand-lg navbar-sea py-3">
            <div class="container-fluid px-4">
                <a class="navbar-brand d-flex align-items-center gap-2" href="{{ url('/') }}">
                    <i class="bi bi-layers-fill fs-4"></i> 
                    <span>CML Subscriptions</span>
                </a>
                <button class="navbar-toggler border-0 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon" style="filter: invert(1);"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="/">
                                <i class="bi bi-house-door me-1"></i> Home
                            </a>
                        </li>
                    </ul>
                    <div class="dropdown">
                        <button class="btn btn-light text-primary fw-bold dropdown-toggle px-3 py-2 rounded-pill shadow-sm" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="bi bi-person-circle me-1"></i> User Profile
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end mt-2 p-2" aria-labelledby="userDropdown">
                            <li><a class="dropdown-item rounded py-2" href="#"><i class="bi bi-person me-2 text-muted"></i> My Profile</a></li>
                            <li><a class="dropdown-item rounded py-2" href="#"><i class="bi bi-gear me-2 text-muted"></i> Settings</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item rounded py-2 text-danger" href="{{ route('logout') }}" 
                                    onclick="event.preventDefault();
                                    document.getElementById('logout-form').submit();">
                                    <i class="bi bi-box-arrow-right me-2"></i> {{ __('Logout') }}
                                </a>
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

        <main class="py-4 px-2">
            @yield('content')
        </main>
    </div>

    @stack('modals')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="{{ url('public/assets/libs/bootstrap/js/bootstrap5.3.2.js') }}" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @stack('scripts')
</body>
</html>