Kitchen Order Table:
Kitchen Order Table:
Output:
Kitchen Order-Items
| Srl. No. | Table No. | ||
|---|---|---|---|
| Date-Time | Mobile No. |
| Sl. No. | Items | Rate | Quantity | Started | Cooked | OnWay | Delivered |
|---|
Order Progress Status
Code:
CSS:
Html:
<div id="customerInfoBox" style="
border: 1px solid #ccc;
border-radius: 13px;
padding: 10px;
width: 700px;
margin: 0 auto;
margin-top: 50px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
">
<!-- 🔷 Top Row: Cancel, Heading, Status -->
<div style="display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
border-radius: 10px 10px 0 0;
padding: 10px 20px;
background-color: #f9f9f9;
gap: 20px;">
<!-- ❌ Cancel Button -->
<div>
<button onclick="location.reload()" style="
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
"
onmouseover="this.style.backgroundColor='#c0392b'"
onmouseout="this.style.backgroundColor='#e74c3c'">
X Delete Order
</button>
</div>
<!-- 📝 Heading -->
<div style="flex: 1; text-align: center;">
<h2 style="margin: 0;">Kitchen Order-Items</h2>
</div>
<!-- ✅ Order Status Button -->
<div>
<button onclick="openPaymentModal()" style="
padding: 10px 20px;
background-color: #53c687;
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: background-color 0.3s ease;
"
onmouseover="this.style.backgroundColor='#339961'"
onmouseout="this.style.backgroundColor='#53c687'">
Order Status
</button>
</div>
</div>
<!-- 🔷 Customer Info -->
<table style="width:100%; border-collapse:collapse;margin-bottom: 20px; background-color: whitesmoke; width: 100%; box-sizing: border-box">
<tr style="background-color: ; color: black;">
<th style="padding:3px; border:1px solid #ccc;background-color:#53c687; color: white; width: 12%; font-weight: bold; ">Srl. No.</th>
<td id="srlNoCell" style="padding:3px; border:1px solid #ccc; width: 10%;"></td>
<th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 12%; font-weight: bold;">Table No.</th>
<td id="tableNoCell" style="padding:3px; border:1px solid #ccc; width: 15%;"></td>
</tr>
<tr>
<th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 12%;">Date-Time</th>
<td id="dateTimeCell" style="padding:3px; border:1px solid #ccc; width: 10%;"></td>
<th style="padding:3px; border:1px solid #ccc; background-color:#53c687; color: white; width: 12%;">Mobile No.</th>
<td id="mobileNoCell" style="padding:3px; border:1px solid #ccc; width: 15%;"></td>
</tr>
</table>
<!--🔷 Item Info-->
<!--Rows injected by JS--><table id="selectedItemsTable" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: collapse; width: 100%;">
<thead>
<tr style="background-color: #53c687; color: white;">
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 6%;">Sl. No.</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 34%%;">Items</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 8%;">Rate</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Quantity</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Started</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 10%;">Cooked</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 9%;">OnWay</th>
<th style="border: 1px solid rgb(204, 204, 204); padding: 6px; width: 11%;">Delivered</th><!-- after data import: before click cell data "❌" and after click data change in to "✅" and update and progres status bar-->
</tr>
</thead>
<tbody id="selectedItemsBody">
<!-- Rows injected by JS -->
</tbody>
</table>
<!-- 🔹 Buttons Section -->
<div style="
width: 100%;
background: #f9f9f9;
padding: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #aaa;
border-top: none;
margin-top: -1px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
gap: 10px;
">
<button onclick="cancelAnimationFrame()" style="
padding: 10px 25px;
background-color: #ff7d66;
color: white;
border: none;
border-radius: 6px;
font-size: 25px;
cursor: pointer;
" onmouseover="this.style.backgroundColor='#ff5233'" onmouseout="this.style.backgroundColor='#ff7d66'">Close</button>
<button onclick="cancelAnimationFrame()" onmouseout="this.style.backgroundColor='#ff7d66'" onmouseover="this.style.backgroundColor='#ff5233'" style="background-color: green; border-radius: 6px; border: none; color: white; cursor: pointer; font-size: 25px; padding: 10px 25px;">Open</button>
<!-- ✅ Start Order Status -->
<!-- ✅ Final Corrected Version -->
<div style="display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
border-radius: 10px 10px 0 0;
margin: 30px auto 0 auto; /* top: 40px, left/right auto */
padding: 10px 20px;
background-color: #f9f9f9;
width: 100%;">
<h2 style="margin: 0; text-align: center;">Order Progress Status</h2>
</div><!-- ❌ End Order Status
Create status bar following individual Items data
Progress onclick the section/row cell under heads "Started", "Cooked", "On Way" and "Delivered"-->
</div>
</div>
Comments
Post a Comment