{"id":13,"date":"2026-10-31T14:29:43","date_gmt":"2026-10-31T14:29:43","guid":{"rendered":"https:\/\/msk.masentrix.in\/?page_id=13"},"modified":"2026-10-31T16:01:31","modified_gmt":"2026-10-31T16:01:31","slug":"order-details","status":"publish","type":"page","link":"https:\/\/msk.masentrix.in\/?page_id=13","title":{"rendered":"ORDER DETAILS"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Freshness Delivered to You<\/h1>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/msk.masentrix.in\/wp-content\/uploads\/2026\/10\/Tea-Time-Order-Details-1024x576.png\" alt=\"\" class=\"wp-image-36\" srcset=\"https:\/\/msk.masentrix.in\/wp-content\/uploads\/2026\/10\/Tea-Time-Order-Details-1024x576.png 1024w, https:\/\/msk.masentrix.in\/wp-content\/uploads\/2026\/10\/Tea-Time-Order-Details-300x169.png 300w, https:\/\/msk.masentrix.in\/wp-content\/uploads\/2026\/10\/Tea-Time-Order-Details-768x432.png 768w, https:\/\/msk.masentrix.in\/wp-content\/uploads\/2026\/10\/Tea-Time-Order-Details-1536x864.png 1536w, https:\/\/msk.masentrix.in\/wp-content\/uploads\/2026\/10\/Tea-Time-Order-Details.png 1672w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Order Details | Tea Time<\/title>\n\n<style>\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Poppins', Arial, sans-serif;\n}\n\nbody {\n    background: #120b06;\n    color: white;\n}\n\nhtml {\n    scroll-behavior: smooth;\n}\n\nheader {\n    background: #1b1008;\n    padding: 20px 7%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: 2px solid #ffb900;\n}\n\n.logo {\n    font-size: 30px;\n    font-weight: bold;\n    color: #ffb900;\n}\n\nnav a {\n    color: white;\n    text-decoration: none;\n    margin-left: 22px;\n    transition: .3s;\n}\n\nnav a:hover {\n    color: #ffb900;\n}\n\n\/* HERO *\/\n\n.hero {\n    min-height: 370px;\n    background:\n    linear-gradient(#0009,#000b),\n    url('https:\/\/images.unsplash.com\/photo-1442512595331-e89e73853f31?w=1600');\n    background-size: cover;\n    background-position: center;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 30px;\n}\n\n.hero h1 {\n    font-size: 55px;\n    color: #ffbd16;\n    animation: fade 1.3s ease;\n}\n\n.hero p {\n    margin-top: 15px;\n    font-size: 19px;\n}\n\n\/* MAIN *\/\n\n.container {\n    max-width: 1150px;\n    margin: auto;\n    padding: 65px 20px;\n}\n\n.heading {\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n.heading h2 {\n    font-size: 36px;\n    color: #ffbd16;\n}\n\n.heading p {\n    color: #ccc;\n    margin-top: 12px;\n}\n\n\/* ORDER LAYOUT *\/\n\n.order-layout {\n    display: grid;\n    grid-template-columns: 1.2fr 1fr;\n    gap: 30px;\n}\n\n.box {\n    background: linear-gradient(145deg,#301b0c,#1b1008);\n    border: 1px solid #956015;\n    border-radius: 18px;\n    padding: 30px;\n    box-shadow: 0 5px 20px #0005;\n}\n\n.box h2 {\n    color: #ffbd16;\n    margin-bottom: 25px;\n    font-size: 25px;\n}\n\n\/* MENU ITEMS *\/\n\n.menu-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n    padding: 17px 0;\n    border-bottom: 1px solid #60401f;\n}\n\n.menu-item h3 {\n    font-size: 17px;\n}\n\n.menu-item p {\n    color: #ffbd16;\n    margin-top: 5px;\n}\n\n.menu-item input {\n    width: 65px;\n    padding: 10px;\n    border: 1px solid #ffb900;\n    border-radius: 7px;\n    background: #120b06;\n    color: white;\n    text-align: center;\n    font-size: 16px;\n}\n\n\/* FORM *\/\n\n.form-group {\n    margin-bottom: 18px;\n}\n\n.form-group label {\n    display: block;\n    margin-bottom: 8px;\n    color: #ffbd16;\n}\n\n.form-group input,\n.form-group textarea,\n.form-group select {\n    width: 100%;\n    padding: 14px;\n    border-radius: 8px;\n    border: 1px solid #80551e;\n    background: #120b06;\n    color: white;\n    outline: none;\n    font-size: 15px;\n}\n\n.form-group input:focus,\n.form-group textarea:focus {\n    border-color: #ffbd16;\n    box-shadow: 0 0 8px #ffbd1655;\n}\n\n.form-group textarea {\n    height: 100px;\n    resize: vertical;\n}\n\n\/* DELIVERY OPTIONS *\/\n\n.delivery {\n    display: flex;\n    gap: 15px;\n    flex-wrap: wrap;\n    margin-bottom: 20px;\n}\n\n.delivery label {\n    background: #42270f;\n    padding: 12px 15px;\n    border-radius: 8px;\n    cursor: pointer;\n    border: 1px solid #956015;\n}\n\n\/* TOTAL *\/\n\n.total-box {\n    background: #120b06;\n    border: 1px solid #ffb900;\n    border-radius: 12px;\n    padding: 22px;\n    margin-top: 25px;\n}\n\n.total-row {\n    display: flex;\n    justify-content: space-between;\n    margin: 12px 0;\n    color: #ddd;\n}\n\n.total-row.final {\n    color: #ffbd16;\n    font-size: 23px;\n    font-weight: bold;\n    border-top: 1px solid #76501b;\n    padding-top: 18px;\n}\n\n\/* BUTTON *\/\n\n.order-btn {\n    width: 100%;\n    padding: 16px;\n    margin-top: 25px;\n    background: #ffb900;\n    color: #160d06;\n    border: none;\n    border-radius: 30px;\n    font-size: 18px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: .3s;\n}\n\n.order-btn:hover {\n    background: white;\n    transform: translateY(-4px);\n    box-shadow: 0 5px 20px #ffb90055;\n}\n\n.note {\n    text-align: center;\n    color: #bbb;\n    font-size: 13px;\n    margin-top: 15px;\n}\n\nfooter {\n    text-align: center;\n    background: #080503;\n    padding: 30px;\n    color: #bbb;\n    line-height: 2;\n}\n\nfooter span {\n    color: #ffb900;\n}\n\n@keyframes fade {\n    from {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media(max-width:800px) {\n    header {\n        flex-direction: column;\n        gap: 15px;\n    }\n\n    nav a {\n        margin: 6px;\n        font-size: 13px;\n    }\n\n    .hero h1 {\n        font-size: 38px;\n    }\n\n    .order-layout {\n        grid-template-columns: 1fr;\n    }\n\n    .heading h2 {\n        font-size: 28px;\n    }\n\n    .box {\n        padding: 22px;\n    }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<!-- NAVBAR -->\n\n<header>\n    <div class=\"logo\">\u2615 Tea Time<\/div>\n\n    <nav>\n        <a href=\"index.html\">Home<\/a>\n        <a href=\"menu.html\">Menu<\/a>\n        <a href=\"about.html\">About Us<\/a>\n        <a href=\"contact.html\">Contact<\/a>\n        <a href=\"order.html\">Order<\/a>\n    <\/nav>\n<\/header>\n\n<!-- HERO SECTION -->\n\n<section class=\"hero\">\n    <div>\n        <h1>Order Details<\/h1>\n        <p>Your Favourite Taste, Just a Click Away!<\/p>\n    <\/div>\n<\/section>\n\n<!-- ORDER SECTION -->\n\n<div class=\"container\">\n\n    <div class=\"heading\">\n        <h2>Place Your Order!<\/h2>\n        <p>Choose your favourites and enjoy every sip of happiness.<\/p>\n    <\/div>\n\n    <form id=\"orderForm\">\n\n    <div class=\"order-layout\">\n\n        <!-- MENU SELECTION -->\n\n        <div class=\"box\">\n\n            <h2>\u2615 Select Your Items<\/h2>\n\n            <div class=\"menu-item\">\n                <div>\n                    <h3>\ud83c\udf75 Tea<\/h3>\n                    <p>\u20b910 \/ Cup<\/p>\n                <\/div>\n                <input type=\"number\" min=\"0\" value=\"0\"\n                class=\"qty\" data-name=\"Tea\" data-price=\"10\">\n            <\/div>\n\n            <div class=\"menu-item\">\n                <div>\n                    <h3>\u2615 Coffee<\/h3>\n                    <p>\u20b915 \/ Cup<\/p>\n                <\/div>\n                <input type=\"number\" min=\"0\" value=\"0\"\n                class=\"qty\" data-name=\"Coffee\" data-price=\"15\">\n            <\/div>\n\n            <div class=\"menu-item\">\n                <div>\n                    <h3>\ud83e\udd5b Badam Milk<\/h3>\n                    <p>\u20b925 \/ Glass<\/p>\n                <\/div>\n                <input type=\"number\" min=\"0\" value=\"0\"\n                class=\"qty\" data-name=\"Badam Milk\" data-price=\"25\">\n            <\/div>\n\n            <div class=\"menu-item\">\n                <div>\n                    <h3>\ud83e\uddc3 Cool Drinks<\/h3>\n                    <p>\u20b920 \/ Glass<\/p>\n                <\/div>\n                <input type=\"number\" min=\"0\" value=\"0\"\n                class=\"qty\" data-name=\"Cool Drinks\" data-price=\"20\">\n            <\/div>\n\n            <div class=\"menu-item\">\n                <div>\n                    <h3>\ud83e\udd64 Milkshakes<\/h3>\n                    <p>\u20b940 \/ Glass<\/p>\n                <\/div>\n                <input type=\"number\" min=\"0\" value=\"0\"\n                class=\"qty\" data-name=\"Milkshakes\" data-price=\"40\">\n            <\/div>\n\n            <div class=\"menu-item\">\n                <div>\n                    <h3>\ud83e\udd5f Snacks<\/h3>\n                    <p>\u20b915 \/ Plate<\/p>\n                <\/div>\n                <input type=\"number\" min=\"0\" value=\"0\"\n                class=\"qty\" data-name=\"Snacks\" data-price=\"15\">\n            <\/div>\n\n            <div class=\"total-box\">\n\n                <div class=\"total-row\">\n                    <span>Total Items<\/span>\n                    <span id=\"totalItems\">0<\/span>\n                <\/div>\n\n                <div class=\"total-row final\">\n                    <span>Total Amount<\/span>\n                    <span id=\"totalAmount\">\u20b90<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- CUSTOMER DETAILS -->\n\n        <div class=\"box\">\n\n            <h2>\ud83d\udc64 Customer Details<\/h2>\n\n            <div class=\"form-group\">\n                <label>Full Name<\/label>\n                <input type=\"text\" id=\"customerName\"\n                placeholder=\"Enter your name\" required>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Mobile Number<\/label>\n                <input type=\"tel\" id=\"phone\"\n                placeholder=\"Enter mobile number\"\n                pattern=\"[0-9]{10}\" maxlength=\"10\" required>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Email Address<\/label>\n                <input type=\"email\" id=\"email\"\n                placeholder=\"Enter your email\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Order Type<\/label>\n\n                <div class=\"delivery\">\n                    <label>\n                        <input type=\"radio\" name=\"delivery\"\n                        value=\"Home Delivery\" checked>\n                        \ud83d\ude9a Home Delivery\n                    <\/label>\n\n                    <label>\n                        <input type=\"radio\" name=\"delivery\"\n                        value=\"Shop Pickup\">\n                        \ud83c\udfea Shop Pickup\n                    <\/label>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-group\" id=\"addressGroup\">\n                <label>Delivery Address<\/label>\n                <textarea id=\"address\"\n                placeholder=\"Enter your complete address\"\n                required><\/textarea>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Payment Method<\/label>\n\n                <select id=\"payment\" required>\n                    <option value=\"\">Select Payment Method<\/option>\n                    <option value=\"Cash on Delivery\">Cash on Delivery<\/option>\n                    <option value=\"UPI\">UPI<\/option>\n                    <option value=\"Pay at Shop\">Pay at Shop<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Special Instructions<\/label>\n                <textarea id=\"instructions\"\n                placeholder=\"Any special requests? (Optional)\"\n                required=\"false\"><\/textarea>\n            <\/div>\n\n            <button type=\"submit\" class=\"order-btn\">\n                \ud83d\uded2 Place Order Now\n            <\/button>\n\n            <p class=\"note\">\n                Thank you for choosing Tea Time! \u2764\ufe0f\n            <\/p>\n\n        <\/div>\n\n    <\/div>\n\n    <\/form>\n<\/div>\n\n<!-- FOOTER -->\n\n<footer>\n    <h2><span>\u2615 Tea Time<\/span><\/h2>\n    <p>Sip Happiness, Feel the Freshness!<\/p>\n    <p>\u00a9 2026 Tea Time. All Rights Reserved.<\/p>\n<\/footer>\n\n<script>\n\n\/\/ CALCULATE TOTAL\n\nconst quantities = document.querySelectorAll(\".qty\");\n\nfunction calculateTotal() {\n\n    let total = 0;\n    let items = 0;\n\n    quantities.forEach(input => {\n\n        let qty = Math.max(0, Number(input.value) || 0);\n        let price = Number(input.dataset.price);\n\n        total += qty * price;\n        items += qty;\n\n    });\n\n    document.getElementById(\"totalItems\").innerText = items;\n    document.getElementById(\"totalAmount\").innerText = \"\u20b9\" + total;\n\n    return {total, items};\n\n}\n\nquantities.forEach(input => {\n    input.addEventListener(\"input\", calculateTotal);\n});\n\n\n\/\/ DELIVERY ADDRESS OPTION\n\ndocument.querySelectorAll('input[name=\"delivery\"]').forEach(option => {\n\n    option.addEventListener(\"change\", function() {\n\n        const addressGroup = document.getElementById(\"addressGroup\");\n        const address = document.getElementById(\"address\");\n\n        if(this.value === \"Shop Pickup\") {\n            addressGroup.style.display = \"none\";\n            address.required = false;\n        } else {\n            addressGroup.style.display = \"block\";\n            address.required = true;\n        }\n\n    });\n\n});\n\n\n\/\/ PLACE ORDER THROUGH WHATSAPP\n\ndocument.getElementById(\"orderForm\")\n.addEventListener(\"submit\", function(e) {\n\n    e.preventDefault();\n\n    const result = calculateTotal();\n\n    if(result.items === 0) {\n        alert(\"Please select at least one item!\");\n        return;\n    }\n\n    const name = document.getElementById(\"customerName\").value;\n    const phone = document.getElementById(\"phone\").value;\n    const email = document.getElementById(\"email\").value || \"Not provided\";\n    const address = document.getElementById(\"address\").value || \"Shop Pickup\";\n    const payment = document.getElementById(\"payment\").value;\n    const instructions = document.getElementById(\"instructions\").value || \"None\";\n\n    const delivery = document.querySelector(\n        'input[name=\"delivery\"]:checked'\n    ).value;\n\n    let orderDetails = \"\";\n\n    quantities.forEach(input => {\n\n        let qty = Number(input.value) || 0;\n\n        if(qty > 0) {\n\n            let name = input.dataset.name;\n            let price = Number(input.dataset.price);\n\n            orderDetails +=\n            name + \" x \" + qty +\n            \" = \u20b9\" + (qty * price) + \"\\n\";\n\n        }\n\n    });\n\n    const message =\n    \"\u2615 TEA TIME - NEW ORDER\\n\\n\" +\n    \"Customer Name: \" + name + \"\\n\" +\n    \"Phone: \" + phone + \"\\n\" +\n    \"Email: \" + email + \"\\n\\n\" +\n    \"ORDER ITEMS:\\n\" + orderDetails +\n    \"\\nTotal Items: \" + result.items +\n    \"\\nTotal Amount: \u20b9\" + result.total +\n    \"\\n\\nOrder Type: \" + delivery +\n    \"\\nAddress: \" + address +\n    \"\\nPayment: \" + payment +\n    \"\\nInstructions: \" + instructions;\n\n    \/\/ REPLACE WITH YOUR SHOP WHATSAPP NUMBER\n    const shopNumber = \"91XXXXXXXXXX\";\n\n    const whatsappURL =\n    \"https:\/\/wa.me\/\" + shopNumber +\n    \"?text=\" + encodeURIComponent(message);\n\n    window.open(whatsappURL, \"_blank\");\n\n});\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Freshness Delivered to You Order Details | Tea Time \u2615 Tea Time Home Menu About Us Contact Order Order Details Your Favourite Taste, Just a Click Away! Place Your Order! Choose your favourites and enjoy every sip of happiness. \u2615 Select Your Items \ud83c\udf75 Tea \u20b910 \/ Cup \u2615 Coffee \u20b915 \/ Cup \ud83e\udd5b Badam<\/p>\n<p><a href=\"https:\/\/msk.masentrix.in\/?page_id=13\" class=\"more-link themebutton\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/msk.masentrix.in\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msk.masentrix.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/msk.masentrix.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/msk.masentrix.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/msk.masentrix.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":3,"href":"https:\/\/msk.masentrix.in\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":37,"href":"https:\/\/msk.masentrix.in\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/37"}],"wp:attachment":[{"href":"https:\/\/msk.masentrix.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}