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>Billing - DishDash</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 <style>11 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');12 body {13 font-family: 'Poppins', sans-serif;14 }15 .menu-item:hover {16 transform: translateX(5px);17 }18 .receipt-item:hover {19 background-color: #f7fafc;20 }21 .category-btn.active {22 background-color: #FF6B6B;23 color: white;24 }25 </style>26</head>27<body class="bg-gray-50">28 <div class="flex h-screen overflow-hidden">29 <!-- Sidebar (same as index) -->30 <div class="bg-white w-64 md:w-72 border-r flex-col hidden md:flex">31<div class="p-4 border-b">32 <h1 class="text-2xl font-bold text-primary flex items-center">33 <i data-feather="coffee" class="mr-2"></i> DishDash34 </h1>35 <p class="text-gray-500 text-sm">Restaurant Management System</p>36 </div>37 38 <nav class="flex-1 overflow-y-auto p-4">39 <div class="space-y-2">40 <a href="index.html" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100 menu-item transition">41 <i data-feather="home" class="mr-3"></i>42 Dashboard43 </a>44 <a href="billing.html" class="flex items-center p-3 rounded-lg bg-primary text-white menu-item transition">45 <i data-feather="dollar-sign" class="mr-3"></i>46 Billing47 </a>48 <a href="inventory.html" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100 menu-item transition">49 <i data-feather="package" class="mr-3"></i>50 Inventory51 </a>52 <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 hover:bg-gray-100 menu-item transition">53 <i data-feather="users" class="mr-3"></i>54 Staff55 </a>56 </div>57 </nav>58 59 <div class="p-4 border-t">60 <div class="flex items-center">61 <img src="http://static.photos/food/200x200/1" class="w-10 h-10 rounded-full object-cover mr-3" alt="User">62 <div>63 <p class="font-medium">Admin User</p>64 <p class="text-gray-500 text-sm">admin@dishdash.com</p>65 </div>66 </div>67 </div>68 </div>69 70 <!-- Main Content -->71 <div class="flex-1 overflow-auto">72 <header class="bg-white shadow-sm p-4 flex justify-between items-center sticky top-0 z-10">73 <button class="md:hidden" id="mobileMenuBtn">74 <i data-feather="menu"></i>75 </button>76<h2 class="text-xl font-semibold text-gray-800">Billing</h2>77 <div class="flex items-center space-x-4">78 <button class="bg-primary text-white px-4 py-2 rounded-lg flex items-center">79 <i data-feather="plus" class="mr-2"></i>80 New Order81 </button>82 </div>83 </header>84 85 <main class="p-6">86 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 pb-16">87<!-- Menu Items -->88 <div class="lg:col-span-2 bg-white rounded-lg shadow p-6">89 <div class="mb-6">90 <h3 class="text-lg font-semibold text-gray-800 mb-4">Menu Categories</h3>91 <div class="flex flex-wrap gap-2">92 <button class="category-btn active px-4 py-2 rounded-full border text-sm">All</button>93 <button class="category-btn px-4 py-2 rounded-full border text-sm">Appetizers</button>94 <button class="category-btn px-4 py-2 rounded-full border text-sm">Main Course</button>95 <button class="category-btn px-4 py-2 rounded-full border text-sm">Desserts</button>96 <button class="category-btn px-4 py-2 rounded-full border text-sm">Drinks</button>97 </div>98 </div>99 100 <div class="grid grid-cols-2 md:grid-cols-3 gap-4">101 <!-- Menu Item -->102 <div class="border rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition">103 <img src="http://static.photos/food/320x240/10" class="w-full h-32 object-cover" alt="Dish">104 <div class="p-3">105 <h4 class="font-medium">Spaghetti Carbonara</h4>106 <p class="text-sm text-gray-500 mb-2">Classic Italian pasta</p>107 <div class="flex justify-between items-center">108 <span class="font-semibold text-primary">$12.99</span>109 <button class="text-primary">110 <i data-feather="plus-circle"></i>111 </button>112 </div>113 </div>114 </div>115 116 <!-- Menu Item -->117 <div class="border rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition">118 <img src="http://static.photos/food/320x240/11" class="w-full h-32 object-cover" alt="Dish">119 <div class="p-3">120 <h4 class="font-medium">Margherita Pizza</h4>121 <p class="text-sm text-gray-500 mb-2">Fresh mozzarella & basil</p>122 <div class="flex justify-between items-center">123 <span class="font-semibold text-primary">$14.99</span>124 <button class="text-primary">125 <i data-feather="plus-circle"></i>126 </button>127 </div>128 </div>129 </div>130 131 <!-- Menu Item -->132 <div class="border rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition">133 <img src="http://static.photos/food/320x240/12" class="w-full h-32 object-cover" alt="Dish">134 <div class="p-3">135 <h4 class="font-medium">Caesar Salad</h4>136 <p class="text-sm text-gray-500 mb-2">Romaine, croutons, parmesan</p>137 <div class="flex justify-between items-center">138 <span class="font-semibold text-primary">$9.99</span>139 <button class="text-primary">140 <i data-feather="plus-circle"></i>141 </button>142 </div>143 </div>144 </div>145 146 <!-- Menu Item -->147 <div class="border rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition">148 <img src="http://static.photos/food/320x240/13" class="w-full h-32 object-cover" alt="Dish">149 <div class="p-3">150 <h4 class="font-medium">Chocolate Lava Cake</h4>151 <p class="text-sm text-gray-500 mb-2">With vanilla ice cream</p>152 <div class="flex justify-between items-center">153 <span class="font-semibold text-primary">$7.99</span>154 <button class="text-primary">155 <i data-feather="plus-circle"></i>156 </button>157 </div>158 </div>159 </div>160 161 <!-- Menu Item -->162 <div class="border rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition">163 <img src="http://static.photos/food/320x240/14" class="w-full h-32 object-cover" alt="Dish">164 <div class="p-3">165 <h4 class="font-medium">Iced Tea</h4>166 <p class="text-sm text-gray-500 mb-2">Freshly brewed</p>167 <div class="flex justify-between items-center">168 <span class="font-semibold text-primary">$3.50</span>169 <button class="text-primary">170 <i data-feather="plus-circle"></i>171 </button>172 </div>173 </div>174 </div>175 176 <!-- Menu Item -->177 <div class="border rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition">178 <img src="http://static.photos/food/320x240/15" class="w-full h-32 object-cover" alt="Dish">179 <div class="p-3">180 <h4 class="font-medium">Garlic Bread</h4>181 <p class="text-sm text-gray-500 mb-2">Freshly baked</p>182 <div class="flex justify-between items-center">183 <span class="font-semibold text-primary">$4.50</span>184 <button class="text-primary">185 <i data-feather="plus-circle"></i>186 </button>187 </div>188 </div>189 </div>190 </div>191 </div>192 193 <!-- Order Summary -->194 <div class="bg-white rounded-lg shadow p-6">195 <h3 class="text-lg font-semibold text-gray-800 mb-4">Order Summary</h3>196 197 <div class="mb-4">198 <label class="block text-gray-700 text-sm font-medium mb-2">Table Number</label>199 <select class="w-full border rounded-lg p-2">200 <option>Select Table</option>201 <option>Table 1</option>202 <option>Table 2</option>203 <option>Table 3</option>204 <option>Table 4</option>205 <option>Table 5</option>206 </select>207 </div>208 209 <div class="mb-6">210 <label class="block text-gray-700 text-sm font-medium mb-2">Customer Name (Optional)</label>211 <input type="text" class="w-full border rounded-lg p-2" placeholder="Customer Name">212 </div>213 214 <div class="border-t border-b py-4 mb-4">215 <div class="flex justify-between items-center mb-2">216 <h4 class="font-medium">Items</h4>217 <h4 class="font-medium">Total</h4>218 </div>219 220 <div class="space-y-3">221 <!-- Receipt Item -->222 <div class="flex justify-between items-center receipt-item p-2 rounded">223 <div>224 <p class="font-medium">Spaghetti Carbonara</p>225 <div class="flex items-center mt-1">226 <button class="text-gray-500">227 <i data-feather="minus" class="w-4 h-4"></i>228 </button>229 <span class="mx-2">1</span>230 <button class="text-primary">231 <i data-feather="plus" class="w-4 h-4"></i>232 </button>233 <button class="ml-3 text-red-500">234 <i data-feather="trash-2" class="w-4 h-4"></i>235 </button>236 </div>237 </div>238 <span class="font-medium">$12.99</span>239 </div>240 241 <!-- Receipt Item -->242 <div class="flex justify-between items-center receipt-item p-2 rounded">243 <div>244 <p class="font-medium">Caesar Salad</p>245 <div class="flex items-center mt-1">246 <button class="text-gray-500">247 <i data-feather="minus" class="w-4 h-4"></i>248 </button>249 <span class="mx-2">2</span>250 <button class="text-primary">251 <i data-feather="plus" class="w-4 h-4"></i>252 </button>253 <button class="ml-3 text-red-500">254 <i data-feather="trash-2" class="w-4 h-4"></i>255 </button>256 </div>257 </div>258 <span class="font-medium">$19.98</span>259 </div>260 </div>261 </div>262 263 <div class="space-y-3 mb-6">264 <div class="flex justify-between">265 <span class="text-gray-600">Subtotal</span>266 <span class="font-medium">$32.97</span>267 </div>268 <div class="flex justify-between">269 <span class="text-gray-600">Tax (10%)</span>270 <span class="font-medium">$3.30</span>271 </div>272 <div class="flex justify-between text-lg font-semibold">273 <span>Total</span>274 <span class="text-primary">$36.27</span>275 </div>276 </div>277 278 <div class="grid grid-cols-2 gap-3">279 <button class="bg-gray-200 text-gray-800 py-2 rounded-lg flex items-center justify-center">280 <i data-feather="printer" class="mr-2"></i>281 Print282 </button>283 <button class="bg-primary text-white py-2 rounded-lg flex items-center justify-center">284 <i data-feather="credit-card" class="mr-2"></i>285 Pay286 </button>287 </div>288 </div>289 </div>290 </main>291 </div>292 </div>293 <!-- Mobile Sidebar Overlay -->294 <div id="mobileOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden"></div>295 296 <script>297 feather.replace();298 299 // Mobile menu toggle300 const mobileMenuBtn = document.getElementById('mobileMenuBtn');301 const sidebar = document.querySelector('.bg-white.w-64');302 const mobileOverlay = document.getElementById('mobileOverlay');303 304 if(mobileMenuBtn) {305 mobileMenuBtn.addEventListener('click', () => {306 sidebar.classList.toggle('hidden');307 mobileOverlay.classList.toggle('hidden');308 });309 310 mobileOverlay.addEventListener('click', () => {311 sidebar.classList.add('hidden');312 mobileOverlay.classList.add('hidden');313 });314 }315 316 // Category button selection317 document.querySelectorAll('.category-btn').forEach(btn => {318 btn.addEventListener('click', function() {319 document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));320 this.classList.add('active');321 });322 });323 </script>324</body>325</html>326