make this codes (<?php
// includes/header.php
?>
<!-- Header -->
<header class="admin-header fixed-top bg-gray-900 text-white py-3 border-b-4 border-yellow-400 shadow-md">
    <div class="container text-center">
        <div class="header-content flex justify-between items-center">
            <!-- Logo -->
            <div class="logo">
                <a href="/public/dashboard.php">
                    <img src="/assets/images/logo.png" alt="Kaak Alia Logo" height="50" class="transition-transform duration-300 hover:scale-105">
                </a>
            </div>
            <!-- Navigation Links -->
            <nav class="header-nav">
                <ul class="nav list-none flex mb-0">
                    <li class="nav-item mr-3">
                        <a href="/public/orders/add_order.php" class="nav-link text-white text-base font-semibold transition-colors duration-300 hover:text-yellow-400 hover:underline">
                            <i class="bi bi-plus-circle-fill mr-1"></i> Add New Order
                        </a>
                    </li>
                    <li class="nav-item mr-3">
                        <a href="/public/orders/view_orders.php" class="nav-link text-white text-base font-semibold transition-colors duration-300 hover:text-yellow-400 hover:underline">
                            <i class="bi bi-eye-fill mr-1"></i> View Orders
                        </a>
                    </li>
                    <li class="nav-item mr-3">
                        <a href="/public/products/manage_products.php" class="nav-link text-white text-base font-semibold transition-colors duration-300 hover:text-yellow-400 hover:underline">
                            <i class="bi bi-box-seam-fill mr-1"></i> Manage Products
                        </a>
                    </li>
                    <li class="nav-item mr-3">
                        <a href="/public/users/manage_users.php" class="nav-link text-white text-base font-semibold transition-colors duration-300 hover:text-yellow-400 hover:underline">
                            <i class="bi bi-people-fill mr-1"></i> Manage Users
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/public/reports/generate_reports.php" class="nav-link text-white text-base font-semibold transition-colors duration-300 hover:text-yellow-400 hover:underline">
                            <i class="bi bi-bar-chart-fill mr-1"></i> Generate Reports
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- User Profile Dropdown -->
            <div class="user-profile dropdown">
                <a href="#" class="flex items-center dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="/assets/images/user-placeholder.png" alt="User Avatar" class="me-2 rounded-full border-2 border-white transition-transform duration-300 hover:scale-105 hover:border-yellow-400" height="40" width="40">
                    <span class="hidden lg:inline">
                        <?php
                            // Display the logged-in user's username
                            echo isset($_SESSION['username']) ? htmlspecialchars($_SESSION['username']) : 'User';
                        ?>
                    </span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end bg-gray-900 border border-yellow-400 rounded-lg">
                    <li><a class="dropdown-item text-white hover:bg-yellow-400 hover:text-gray-900" href="/public/users/settings.php">Account Settings</a></li>
                    <li><hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item text-white hover:bg-yellow-400 hover:text-gray-900" href="/public/logout.php">Logout</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>

<!-- CDN for Bootstrap and Tailwind CSS -->
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
) cool and make it amazing and don't add styles tags codines just use taiwalnd and boostrap only and add more codes to make it cool and use these colors (        :root {
            --dark-gray: #333333; /* Header and Footer Background */
            --button-add-order: #e2a20c; /* Light Golden-Yellow */
            --button-view-orders: #118AB2; /* Blue */
            --button-manage-products: #06D6A0; /* Green */
            --button-manage-users: #F4A261; /* Orange */
            --button-generate-reports: #EF476F; /* Red-Pink */

            --main-text: #333333;
            --secondary-text: #666666;
            --white: #FFFFFF;
            --background-gradient: linear-gradient(to bottom, #f5f7fa, #c3cfe2);
            --divider-color: #FFD166;

            --hover-shadow: rgba(0, 0, 0, 0.2);
        }
)