Hashir322/dishdash-delight
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>DishDash - Restaurant Management</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: '#FF6B6B',16 secondary: '#4ECDC4',17 }18 }19 }20 }21 </script>22 <style>23 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');24 body {25 font-family: 'Poppins', sans-serif;26 }27 .sidebar {28 transition: all 0.3s ease;29 }30 .menu-item:hover {31 transform: translateX(5px);32 }33 .floating-btn {34 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);35 }36 </style>37</head>38<body class="bg-gray-50">39 <div class="flex h-screen overflow-hidden">40 <!-- Sidebar -->41 <div class="sidebar bg-white w-64 md:w-72 border-r flex-col hidden md:flex">42<div class="p-4 border-b">43 <h1 class="text-2xl font-bold text-primary flex items-center">44 <i data-feather="coffee" class="mr-2"></i> DishDash45 </h1>46 <p class="text-gray-500 text-sm">Restaurant Management System</p>47 </div>48 49 <nav class="flex-1 overflow-y-auto p-4">50 <div class="space-y-2">51 <a href="#" class="flex items-center p-3 rounded-lg bg-primary text-white menu-item transition">52 <i data-feather="home" class="mr-3"></i>53 Dashboard54 </a>55 <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100 menu-item transition">56 <i data-feather="dollar-sign" class="mr-3"></i>57 Billing58 </a>59 <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100 menu-item transition">60 <i data-feather="package" class="mr-3"></i>61 Inventory62 </a>63 <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100 menu-item transition">64 <i data-feather="users" class="mr-3"></i>65 Staff66 </a>67 <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100 menu-item transition">68 <i data-feather="bar-chart-2" class="mr-3"></i>69 Reports70 </a>71 <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100 menu-item transition">72 <i data-feather="settings" class="mr-3"></i>73 Settings74 </a>75 </div>76 </nav>77 78 <div class="p-4 border-t">79 <div class="flex items-center">80 <img src="http://static.photos/food/200x200/1" class="w-10 h-10 rounded-full object-cover mr-3" alt="User">81 <div>82 <p class="font-medium">Admin User</p>83 <p class="text-gray-500 text-sm">admin@dishdash.com</p>84 </div>85 </div>86 </div>87 </div>88 89 <!-- Main Content -->90 <div class="flex-1 overflow-auto">91 <header class="bg-white shadow-sm p-4 flex justify-between items-center sticky top-0 z-10">92 <button class="md:hidden" id="mobileMenuBtn">93 <i data-feather="menu"></i>94 </button>95<h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>96 <div class="flex items-center space-x-4">97 <div class="relative">98 <i data-feather="bell" class="text-gray-500"></i>99 <span class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>100 </div>101 <button class="flex items-center text-gray-700">102 <span class="mr-2">Menu</span>103 <i data-feather="chevron-down"></i>104 </button>105 </div>106 </header>107 108 <main class="p-6">109 <!-- Stats Cards -->110 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">111 <div class="bg-white rounded-lg shadow p-6">112 <div class="flex items-center justify-between">113 <div>114 <p class="text-gray-500">Today's Revenue</p>115 <h3 class="text-2xl font-bold text-primary">$1,245</h3>116 </div>117 <div class="bg-primary bg-opacity-10 p-3 rounded-full">118 <i data-feather="dollar-sign" class="text-primary"></i>119 </div>120 </div>121 </div>122 123 <div class="bg-white rounded-lg shadow p-6">124 <div class="flex items-center justify-between">125 <div>126 <p class="text-gray-500">Active Orders</p>127 <h3 class="text-2xl font-bold text-secondary">12</h3>128 </div>129 <div class="bg-secondary bg-opacity-10 p-3 rounded-full">130 <i data-feather="shopping-cart" class="text-secondary"></i>131 </div>132 </div>133 </div>134 135 <div class="bg-white rounded-lg shadow p-6">136 <div class="flex items-center justify-between">137 <div>138 <p class="text-gray-500">Inventory Items</p>139 <h3 class="text-2xl font-bold text-yellow-500">87</h3>140 </div>141 <div class="bg-yellow-500 bg-opacity-10 p-3 rounded-full">142 <i data-feather="box" class="text-yellow-500"></i>143 </div>144 </div>145 </div>146 147 <div class="bg-white rounded-lg shadow p-6">148 <div class="flex items-center justify-between">149 <div>150 <p class="text-gray-500">Staff Members</p>151 <h3 class="text-2xl font-bold text-purple-500">8</h3>152 </div>153 <div class="bg-purple-500 bg-opacity-10 p-3 rounded-full">154 <i data-feather="users" class="text-purple-500"></i>155 </div>156 </div>157 </div>158 </div>159 160 <!-- Recent Orders -->161 <div class="bg-white rounded-lg shadow p-6 mb-8">162 <div class="flex justify-between items-center mb-6">163 <h3 class="text-lg font-semibold text-gray-800">Recent Orders</h3>164 <button class="text-primary flex items-center">165 <span>View All</span>166 <i data-feather="chevron-right" class="ml-1"></i>167 </button>168 </div>169 170 <div class="overflow-x-auto">171 <table class="w-full">172 <thead>173 <tr class="text-left text-gray-500 border-b">174 <th class="pb-3">Order ID</th>175 <th class="pb-3">Customer</th>176 <th class="pb-3">Items</th>177 <th class="pb-3">Total</th>178 <th class="pb-3">Status</th>179 <th class="pb-3">Actions</th>180 </tr>181 </thead>182 <tbody class="divide-y">183 <tr>184 <td class="py-4">#ORD-1234</td>185 <td class="py-4">John Doe</td>186 <td class="py-4">3</td>187 <td class="py-4">$45.75</td>188 <td class="py-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Completed</span></td>189 <td class="py-4">190 <button class="text-primary">191 <i data-feather="eye"></i>192 </button>193 </td>194 </tr>195 <tr>196 <td class="py-4">#ORD-1233</td>197 <td class="py-4">Jane Smith</td>198 <td class="py-4">2</td>199 <td class="py-4">$32.50</td>200 <td class="py-4"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Preparing</span></td>201 <td class="py-4">202 <button class="text-primary">203 <i data-feather="eye"></i>204 </button>205 </td>206 </tr>207 <tr>208 <td class="py-4">#ORD-1232</td>209 <td class="py-4">Robert Johnson</td>210 <td class="py-4">4</td>211 <td class="py-4">$68.25</td>212 <td class="py-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Served</span></td>213 <td class="py-4">214 <button class="text-primary">215 <i data-feather="eye"></i>216 </button>217 </td>218 </tr>219 </tbody>220 </table>221 </div>222 </div>223 224 <!-- Inventory Alerts -->225 <div class="bg-white rounded-lg shadow p-6">226 <div class="flex justify-between items-center mb-6">227 <h3 class="text-lg font-semibold text-gray-800">Low Stock Items</h3>228 <button class="text-primary flex items-center">229 <span>View All</span>230 <i data-feather="chevron-right" class="ml-1"></i>231 </button>232 </div>233 234 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">235 <div class="border rounded-lg p-4 flex items-center">236 <img src="http://static.photos/food/200x200/5" class="w-16 h-16 rounded-lg object-cover mr-4" alt="Item">237 <div>238 <h4 class="font-medium">Fresh Tomatoes</h4>239 <p class="text-sm text-gray-500">Remaining: <span class="text-red-500 font-medium">2 kg</span></p>240 <button class="text-primary text-sm mt-1">Order More</button>241 </div>242 </div>243 244 <div class="border rounded-lg p-4 flex items-center">245 <img src="http://static.photos/food/200x200/6" class="w-16 h-16 rounded-lg object-cover mr-4" alt="Item">246 <div>247 <h4 class="font-medium">Chicken Breast</h4>248 <p class="text-sm text-gray-500">Remaining: <span class="text-red-500 font-medium">3 kg</span></p>249 <button class="text-primary text-sm mt-1">Order More</button>250 </div>251 </div>252 253 <div class="border rounded-lg p-4 flex items-center">254 <img src="http://static.photos/food/200x200/7" class="w-16 h-16 rounded-lg object-cover mr-4" alt="Item">255 <div>256 <h4 class="font-medium">Olive Oil</h4>257 <p class="text-sm text-gray-500">Remaining: <span class="text-red-500 font-medium">1 bottle</span></p>258 <button class="text-primary text-sm mt-1">Order More</button>259 </div>260 </div>261 </div>262 </div>263 </main>264 </div>265 </div>266 267 <!-- Floating Action Button -->268 <button class="fixed bottom-6 right-6 bg-primary text-white p-4 rounded-full shadow-lg floating-btn transition hover:bg-opacity-90 z-20">269 <i data-feather="plus"></i>270 </button>271 272 <!-- Mobile Sidebar Overlay -->273 <div id="mobileOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden"></div>274 275 <script>276 feather.replace();277 278 // Mobile menu toggle279 const mobileMenuBtn = document.getElementById('mobileMenuBtn');280 const sidebar = document.querySelector('.sidebar');281 const mobileOverlay = document.getElementById('mobileOverlay');282 283 if(mobileMenuBtn) {284 mobileMenuBtn.addEventListener('click', () => {285 sidebar.classList.toggle('hidden');286 mobileOverlay.classList.toggle('hidden');287 });288 289 mobileOverlay.addEventListener('click', () => {290 sidebar.classList.add('hidden');291 mobileOverlay.classList.add('hidden');292 });293 }294 295 // Simple animation for stats cards296 document.addEventListener('DOMContentLoaded', function() {297 const statsCards = document.querySelectorAll('.bg-white.rounded-lg.shadow.p-6');298 statsCards.forEach((card, index) => {299 card.style.transform = 'translateY(20px)';300 card.style.opacity = '0';301 setTimeout(() => {302 card.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out';303 card.style.transform = 'translateY(0)';304 card.style.opacity = '1';305 }, 100 * index);306 });307 });308 </script>309<script>310 feather.replace();311 312 // Simple animation for stats cards313 document.addEventListener('DOMContentLoaded', function() {314 const statsCards = document.querySelectorAll('.bg-white.rounded-lg.shadow.p-6');315 statsCards.forEach((card, index) => {316 card.style.transform = 'translateY(20px)';317 card.style.opacity = '0';318 setTimeout(() => {319 card.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out';320 card.style.transform = 'translateY(0)';321 card.style.opacity = '1';322 }, 100 * index);323 });324 });325 </script>326</body>327</html>328