<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course LMS Admin Dashboard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Open Sans', sans-serif; background: #E5E7EB; overflow-x: hidden; }
        
        /* Sidebar */
        .sidebar { 
            position: fixed; top: 0; left: 0; width: 250px; height: 100vh; 
            background: #111827; color: white; 
            transition: transform 0.3s ease; z-index: 1000; overflow-y: auto;
        }
        .sidebar-header { 
            padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); 
            position: relative; 
        }
        .sidebar-header img { width: 50px; height: 50px; border-radius: 50%; }
        .sidebar-header h3 { margin-top: 10px; font-size: 18px; color: #FFFFFF; }
        .sidebar-header p { color: #D1D5DB; }
        .three-dot-menu { 
            position: absolute; top: 20px; right: 20px; cursor: pointer; 
        }
        .three-dot-menu i { font-size: 20px; color: #FFFFFF; }
        .dropdown-menu { 
            display: none; position: absolute; top: 50px; right: 20px; 
            background: #FFFFFF; color: #111827; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
            min-width: 150px; z-index: 1001; 
        }
        .dropdown-menu a { 
            display: block; padding: 10px 15px; color: #111827; text-decoration: none; 
            border-bottom: 1px solid #E5E7EB; transition: background 0.2s; 
        }
        .dropdown-menu a:hover { background: #D1A054; color: #FFFFFF; }
        .dropdown-menu.show { display: block; }
        .navbar-nav { list-style: none; padding: 20px 0; }
        .navbar-nav a { 
            display: flex; align-items: center; color: #FFFFFF; padding: 15px 20px; 
            text-decoration: none; border-radius: 0 30px 30px 0; transition: background 0.3s; 
        }
        .navbar-nav a:hover, .navbar-nav a.active { background: #D1A054; }
        .navbar-nav i { margin-right: 10px; width: 20px; color: #FFFFFF; }
        
        /* Top Header */
        .top-nav { 
            position: sticky; top: 0; background: #111827; padding: 15px 20px; 
            display: flex; justify-content: space-between; align-items: center; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 999; width: 100%;
        }
        .top-nav .logo { font-size: 24px; font-weight: bold; color: #FFFFFF; }
        .top-nav .search { flex: 1; max-width: 300px; margin: 0 20px; }
        .top-nav .search input { width: 100%; padding: 10px; border: 1px solid #E5E7EB; border-radius: 5px; background: #FFFFFF; color: #111827; }
        .top-nav .right-nav { display: flex; align-items: center; gap: 15px; }
        .top-nav .right-nav i { font-size: 20px; cursor: pointer; padding: 8px; border-radius: 50%; transition: background 0.3s; color: #FFFFFF; }
        .top-nav .right-nav i:hover { background: #D1A054; }
        .top-nav .profile { display: flex; align-items: center; gap: 10px; }
        .top-nav .profile img { width: 40px; height: 40px; border-radius: 50%; }
        .top-nav .profile span { color: #FFFFFF; }
        
        /* Main Content */
        .content { margin-left: 250px; transition: margin-left 0.3s ease; padding: 20px; min-height: 100vh; }
        .widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .widget { background: #FFFFFF; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; }
        .widget i { font-size: 40px; color: #1E3A8A; margin-bottom: 10px; }
        .widget h3 { color: #111827; margin-bottom: 5px; }
        .widget p { color: #111827; font-size: 24px; font-weight: bold; }
        
        /* Table */
        .table-section { background: #FFFFFF; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .table-section h2 { margin-bottom: 15px; color: #111827; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #E5E7EB; }
        th { background: #111827; color: #FFFFFF; font-weight: bold; }
        .status { padding: 5px 10px; border-radius: 5px; color: white; }
        .status.enrolled { background: #28a745; }
        .status.completed { background: #1E3A8A; }
        .action a { color: #1E3A8A; text-decoration: none; }
        .action a:hover { color: #D1A054; }
        
        /* Footer */
        footer { background: #FFFFFF; padding: 10px; text-align: center; color: #111827; margin-top: 30px; border-top: 1px solid #E5E7EB; }
        
        /* Responsive */
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-250px); }
            .content { margin-left: 0; }
            .top-nav .search { display: none; }
            .sidebar.open { transform: translateX(0); }
            .content.open { margin-left: 0; }
            .top-nav .right-nav i { padding: 10px; }
            .widgets { grid-template-columns: 1fr; }
            .table-section { overflow-x: auto; }
        }
        @media (min-width: 769px) {
            .sidebar { transform: translateX(0); }
            .content { margin-left: 250px; }
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-header">
            <img src="https://via.placeholder.com/50" alt="Admin">
            <h3>Admin User</h3>
            <p>admin@course.com</p>
            <div class="three-dot-menu" id="three-dot">
                
            </div>
        </div>
        <ul class="navbar-nav">
            <li><a href="dashboard.php" class="active"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
            <li><a href="course_add.php"><i class="fas fa-book"></i> Add Courses</a></li>
            <li><a href="add_lessons.php"><i class="fas fa-book"></i> Add lessons</a></li>
            <li><a href="add_video.php"><i class="fas fa-book"></i> Add Video</a></li>
            <li><a href="student_list.php"><i class="fas fa-book"></i> Student_list </a></li>
            
            <li><a href="all_products.php"><i class="fas fa-book"></i> All products</a></li>
            <li><a href="product_order.php"><i class="fas fa-book"></i> All_order</a></li>
            <li><a href="add_product.php"><i class="fas fa-book"></i> Add Product</a></li>
            
            <li><a href="blog_list.php"><i class="fas fa-book"></i> All Blogs </a></li>
            <li><a href="add_blog.php"><i class="fas fa-book"></i> Add_blog </a></li>
            <li><a href="blog_category.php"><i class="fas fa-book"></i> Add_blog_category </a></li>
            
            <li><a href="contact.php"><i class="fas fa-book"></i> Contact </a></li>
            <li><a href="send_mail.php"><i class="fas fa-book"></i> Send Mail </a></li>
            <li><a href="bulk_mail.php"><i class="fas fa-book"></i> Bulk mail </a></li>
            <li><a href="send_sms.php"><i class="fas fa-book"></i> Send sms </a></li>
            <li><a href="bulk_sms.php"><i class="fas fa-book"></i> Bulk sms </a></li>
            <li><a href="manage_index.php"><i class="fas fa-book"></i> Manage index </a></li>
            <li><a href="manage_home.php"><i class="fas fa-book"></i> Manage Home </a></li>
            <li><a href="manage_about.php"><i class="fas fa-book"></i> Manage About </a></li>
            <li><a href="manage_contact.php"><i class="fas fa-book"></i> Manage Contact </a></li>
            <li><a href="manage_landing.php"><i class="fas fa-book"></i> Manage Landing </a></li>
            <li><a href="landing_list.php"><i class="fas fa-book"></i> Landing List </a></li>
 
            <li><a href="#"><i class="fas fa-users"></i> Users</a></li>
            <li><a href="#"><i class="fas fa-clipboard-list"></i> Student </a></li>
            <li><a href="#"><i class="fas fa-chart-bar"></i> Analytics</a></li>
            <li><a href="#"><i class="fas fa-file-alt"></i> Reports</a></li>
            <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
        </ul>
    </div>