<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Food Delivery Admin Dashboard</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; font-family: Arial, sans-serif; background: #f5f7fb; } .sidebar { width: 220px; height: 100vh; background: #2563eb; color: white; position: fixed; padding: 20px; } .sidebar h2 { margin-bottom: 30px; } .sidebar a { display: block; color: white; text-decoration: none; margin: 15px 0; } .main { margin-left: 240px; padding: 20px; } .header { display: flex; justify-content: space-between; align-items: center; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; } .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } table { width: 100%; margin-top: 30px; border-collapse: collapse; background: white; } th, td { padding: 12px; border-bottom: 1px solid #ddd; text-align: left; } th { background: #2563eb; color: white; } .btn { padding: 6px 10px; border: none; border-radius: 5px; cursor: pointer; } .btn-danger { background: red; color: white; } .btn-success { background: green; color: white; } </style> </head> <body> <div class="sidebar"> <h2>Admin Panel</h2> <a href="#">Dashboard</a> <a href="#">Vendors</a> <a href="#">Orders</a> <a href="#">Drivers</a> <a href="#">Payments</a> </div> <div class="main"> <div class="header"> <h1>Dashboard</h1> <p>Welcome Admin</p> </div> <div class="cards"> <div class="card"> <h3>Total Orders</h3> <p>120</p> </div> <div class="card"> <h3>Total Revenue</h3> <p>₹45,000</p> </div> <div class="card"> <h3>Active Vendors</h3> <p>15</p> </div> <div class="card"> <h3>Drivers Online</h3> <p>8</p> </div> </div> <h2>Recent Orders</h2> <table> <tr> <th>Order ID</th> <th>Customer</th> <th>Status</th> <th>Action</th> </tr> <tr> <td>#101</td> <td>Rahul</td> <td>Preparing</td> <td> <button class="btn btn-success">Assign Driver</button> <button class="btn btn-danger">Cancel</button> </td> </tr> <tr> <td>#102</td> <td>Priya</td> <td>Delivered</td> <td> <button class="btn btn-danger">Refund</button> </td> </tr> </table> </div> </body> </html>