From 550bb1828dcb1db0af7ffe497a0de9a8d93ecc8b Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Wed, 8 Oct 2025 18:48:30 +0000
Subject: [PATCH] Payment form

---
 cart.php               | 131 ++++++++++++++++++++------------
 checkout.php           | 144 +++++++++++++++++++++++++++++++++++
 contact_handler.php    |  40 ++++++++++
 index.php              |  67 ++++++++++++----
 order_confirmation.php | 168 +++++++++++++++++++++++++++++++++++++++++
 5 files changed, 489 insertions(+), 61 deletions(-)
 create mode 100644 checkout.php
 create mode 100644 contact_handler.php
 create mode 100644 order_confirmation.php

diff --git a/cart.php b/cart.php
index 00121b2..ce570ba 100644
--- a/cart.php
+++ b/cart.php
@@ -7,7 +7,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --primary-color: #6b7b62;
@@ -15,8 +15,8 @@
             --background-color: #8e9b83;
             --surface-color: #a2b199;
             --text-color: #424c3b;
-            --heading-font: 'Playfair Display', serif;
-            --body-font: 'Lato', sans-serif;
+            --heading-font: 'Inter', sans-serif;
+            --body-font: 'Inter', sans-serif;
         }
 
         body {
@@ -32,6 +32,22 @@
 
         .navbar {
             background-color: var(--background-color);
+            font-weight: bold;
+        }
+
+        #cart-container .card {
+            background-color: #d4d4ce;
+        }
+        #cart-container .table {
+            --bs-table-bg: #d4d4ce;
+        }
+        #cart-container .form-control {
+            background-color: #d4d4ce;
+            border-color: var(--primary-color);
+        }
+
+        .btn-primary {
+            font-weight: bold;
         }
         
         footer {
@@ -85,11 +101,14 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
+            renderCart();
+            updateCartCount();
+        });
+
+        function renderCart() {
             const cartContainer = document.getElementById('cart-container');
             let cart = JSON.parse(localStorage.getItem('cart')) || {};
 
-            updateCartCount();
-
             if (Object.keys(cart).length === 0) {
                 cartContainer.innerHTML = `
                     <div class="card">
@@ -99,53 +118,70 @@
                         </div>
                     </div>
                 `;
-            } else {
-                let table = `
-                    <div class="card">
-                        <div class="card-body">
-                            <table class="table">
-                                <thead>
-                                    <tr>
-                                        <th>Item</th>
-                                        <th>Price</th>
-                                        <th>Quantity</th>
-                                        <th>Total</th>
-                                        <th></th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                `;
+                return;
+            }
 
-                let grandTotal = 0;
-                for (const name in cart) {
-                    const item = cart[name];
-                    const total = item.price * item.quantity;
-                    grandTotal += total;
-                    table += `
-                        <tr>
-                            <td>${name}</td>
-                            <td>${item.price.toFixed(2)}</td>
-                            <td>${item.quantity}</td>
-                            <td>${total.toFixed(2)}</td>
-                            <td><button class="btn btn-danger btn-sm" onclick="removeFromCart('${name}')">Remove</button></td>
-                        </tr>
-                    `;
-                }
+            let table = `
+                <div class="card">
+                    <div class="card-body">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>Item</th>
+                                    <th>Price</th>
+                                    <th>Quantity</th>
+                                    <th>Total</th>
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+            `;
 
+            let grandTotal = 0;
+            for (const name in cart) {
+                const item = cart[name];
+                const total = item.price * item.quantity;
+                grandTotal += total;
                 table += `
-                                </tbody>
-                            </table>
-                            <hr>
-                            <div class="text-end">
-                                <h4>Grand Total: ${grandTotal.toFixed(2)}</h4>
-                                <button class="btn btn-primary">Proceed to Checkout</button>
-                            </div>
+                    <tr>
+                        <td>${name}</td>
+                        <td>${item.price.toFixed(2)}</td>
+                        <td>
+                            <input type="number" class="form-control" value="${item.quantity}" min="1" style="width: 70px;" onchange="updateQuantity('${name}', this.value)">
+                        </td>
+                        <td id="total-${name}">${total.toFixed(2)}</td>
+                        <td><button class="btn btn-danger btn-sm" onclick="removeFromCart('${name}')">Remove</button></td>
+                    </tr>
+                `;
+            }
+
+            table += `
+                            </tbody>
+                        </table>
+                        <hr>
+                        <div class="text-end">
+                            <h4 id="grand-total">Grand Total: ${grandTotal.toFixed(2)}</h4>
+                            <a href="checkout.php" class="btn btn-primary">Proceed to Checkout</a>
                         </div>
                     </div>
-                `;
-                cartContainer.innerHTML = table;
+                </div>
+            `;
+            cartContainer.innerHTML = table;
+        }
+
+        function updateQuantity(name, newQuantity) {
+            let cart = JSON.parse(localStorage.getItem('cart')) || {};
+            const quantity = parseInt(newQuantity, 10);
+
+            if (quantity > 0) {
+                cart[name].quantity = quantity;
+            } else {
+                delete cart[name];
             }
-        });
+            localStorage.setItem('cart', JSON.stringify(cart));
+            renderCart(); // Re-render the cart to reflect changes
+            updateCartCount();
+        }
 
         function removeFromCart(name) {
             let cart = JSON.parse(localStorage.getItem('cart')) || {};
@@ -153,7 +189,8 @@
                 delete cart[name];
             }
             localStorage.setItem('cart', JSON.stringify(cart));
-            location.reload(); // Reload to update the cart display
+            renderCart();
+            updateCartCount();
         }
 
         function updateCartCount() {
diff --git a/checkout.php b/checkout.php
new file mode 100644
index 0000000..579089d
--- /dev/null
+++ b/checkout.php
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Checkout - The Cozy Corner Cafe</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #6b7b62;
+            --secondary-color: #8e9b83;
+            --background-color: #8e9b83;
+            --surface-color: #a2b199;
+            --text-color: #424c3b;
+            --heading-font: 'Inter', sans-serif;
+            --body-font: 'Inter', sans-serif;
+        }
+        body {
+            font-family: var(--body-font);
+            color: var(--text-color);
+            background-color: var(--background-color);
+            padding-top: 70px; /* Adjusted for fixed navbar */
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-family: var(--heading-font);
+        }
+        .navbar {
+            background-color: var(--background-color);
+            font-weight: bold;
+        }
+        .form-control {
+            background-color: #d4d4ce;
+            border-color: var(--primary-color);
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            border-radius: 0.5rem;
+            padding: 0.75rem 1.5rem;
+            font-weight: bold;
+        }
+        .btn-primary:hover {
+            background-color: #5a6a54;
+            border-color: #5a6a54;
+        }
+        footer {
+            background-color: var(--text-color);
+            color: var(--secondary-color);
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand" href="index.php">The Cozy Corner</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item"><a class="nav-link" href="index.php#home">Home</a></li>
+                        <li class="nav-item"><a class="nav-link" href="index.php#menu">Menu</a></li>
+                        <li class="nav-item"><a class="nav-link" href="index.php#about">About</a></li>
+                        <li class="nav-item"><a class="nav-link" href="index.php#contact">Contact</a></li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="cart.php">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
+                                    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+                                </svg>
+                                <span class="badge bg-primary rounded-pill" id="cart-count">0</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main class="container py-5">
+        <h1 class="text-center mb-5">Checkout</h1>
+        <div class="row">
+            <div class="col-md-8 mx-auto">
+                <div class="card" style="background-color: var(--surface-color);">
+                    <div class="card-body">
+                        <h5 class="card-title mb-4">Payment Details</h5>
+                        <form>
+                            <div class="mb-3">
+                                <label for="cardName" class="form-label">Cardholder Name</label>
+                                <input type="text" class="form-control" id="cardName" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="cardNumber" class="form-label">Card Number</label>
+                                <input type="text" class="form-control" id="cardNumber" placeholder="•••• •••• •••• ••••" required>
+                            </div>
+                            <div class="row">
+                                <div class="col-md-6 mb-3">
+                                    <label for="expiryDate" class="form-label">Expiry Date</label>
+                                    <input type="text" class="form-control" id="expiryDate" placeholder="MM / YY" required>
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label for="cvc" class="form-label">CVC</label>
+                                    <input type="text" class="form-control" id="cvc" placeholder="•••" required>
+                                </div>
+                            </div>
+                            <button type="submit" class="btn btn-primary w-100">Pay Now</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer class="py-4 text-center mt-5">
+        <div class="container">
+            <p>&copy; 2025 The Cozy Corner Cafe. All Rights Reserved.</p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        function updateCartCount() {
+            let cart = JSON.parse(localStorage.getItem('cart')) || {};
+            let count = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0);
+            document.getElementById('cart-count').innerText = count;
+        }
+        document.addEventListener('DOMContentLoaded', updateCartCount);
+
+        document.querySelector('form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const cart = localStorage.getItem('cart');
+            if (cart) {
+                sessionStorage.setItem('order', cart);
+            }
+            window.location.href = 'order_confirmation.php';
+        });
+    </script>
+
+</body>
+</html>
diff --git a/contact_handler.php b/contact_handler.php
new file mode 100644
index 0000000..30206a8
--- /dev/null
+++ b/contact_handler.php
@@ -0,0 +1,40 @@
+<?php
+session_start();
+
+require_once __DIR__ . '/mail/MailService.php';
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $name = filter_var(trim($_POST["name"]), FILTER_SANITIZE_STRING);
+    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
+    $message = filter_var(trim($_POST["message"]), FILTER_SANITIZE_STRING);
+
+    if (empty($name) || empty($email) || empty($message) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        $_SESSION['status'] = 'error';
+        $_SESSION['message'] = 'Please fill out all fields correctly.';
+        header("Location: index.php#contact");
+        exit;
+    }
+
+    // The recipient email address.
+    // IMPORTANT: Replace this with your real email address.
+    $to = getenv('MAIL_TO') ?: 'your-email@example.com';
+
+    $res = MailService::sendContactMessage($name, $email, $message, $to, 'Contact Form Submission');
+
+    if (!empty($res['success'])) {
+        $_SESSION['status'] = 'success';
+        $_SESSION['message'] = 'Thank you for your message! We will get back to you shortly.';
+    } else {
+        $_SESSION['status'] = 'error';
+        $_SESSION['message'] = 'Sorry, there was an error sending your message. Please try again later.';
+        // It's a good practice to log the actual error for debugging
+        // error_log("MailService Error: " . $res['error']);
+    }
+
+    header("Location: index.php#contact");
+    exit;
+} else {
+    // Not a POST request, redirect to the form
+    header("Location: index.php#contact");
+    exit;
+}
diff --git a/index.php b/index.php
index c84ef9f..b723315 100644
--- a/index.php
+++ b/index.php
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<?php session_start(); ?><!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -7,7 +7,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --primary-color: #6b7b62;
@@ -15,8 +15,8 @@
             --background-color: #8e9b83;
             --surface-color: #a2b199;
             --text-color: #424c3b;
-            --heading-font: 'Playfair Display', serif;
-            --body-font: 'Lato', sans-serif;
+            --heading-font: 'Inter', sans-serif;
+            --body-font: 'Inter', sans-serif;
         }
 
         body {
@@ -31,6 +31,7 @@
 
         .navbar {
             background-color: var(--background-color);
+            font-weight: bold;
         }
 
         .hero {
@@ -49,6 +50,7 @@
             border-color: var(--primary-color);
             border-radius: 0.5rem;
             padding: 0.75rem 1.5rem;
+            font-weight: bold;
         }
 
         .btn-primary:hover {
@@ -67,6 +69,16 @@
             object-fit: cover;
         }
 
+        .form-control, .quantity-input {
+            background-color: #d4d4ce;
+            border-color: var(--primary-color);
+        }
+
+        #contact input.form-control, #contact textarea.form-control {
+            background-color: #d4d4ce;
+            border-color: var(--primary-color);
+        }
+
         footer {
             background-color: var(--text-color);
             color: var(--secondary-color);
@@ -123,7 +135,10 @@
                                 <h5 class="card-title">Classic Espresso</h5>
                                 <p class="card-text">A rich and aromatic shot of pure coffee bliss.</p>
                                 <p class="card-text fw-bold">$3.00</p>
-                                <button class="btn btn-primary" onclick="addToCart('Classic Espresso', 3.00)">Buy</button>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-espresso">
+                                    <button class="btn btn-primary" onclick="addToCart('Classic Espresso', 3.00, 'quantity-espresso')">Buy</button>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -135,7 +150,10 @@
                                 <h5 class="card-title">Creamy Latte</h5>
                                 <p class="card-text">Espresso with steamed milk, topped with a light layer of foam.</p>
                                 <p class="card-text fw-bold">$4.50</p>
-                                <button class="btn btn-primary" onclick="addToCart('Creamy Latte', 4.50)">Buy</button>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-latte">
+                                    <button class="btn btn-primary" onclick="addToCart('Creamy Latte', 4.50, 'quantity-latte')">Buy</button>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -147,7 +165,10 @@
                                 <h5 class="card-title">Chocolate Croissant</h5>
                                 <p class="card-text">Flaky, buttery pastry with a rich dark chocolate filling.</p>
                                 <p class="card-text fw-bold">$3.50</p>
-                                <button class="btn btn-primary" onclick="addToCart('Chocolate Croissant', 3.50)">Buy</button>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-croissant">
+                                    <button class="btn btn-primary" onclick="addToCart('Chocolate Croissant', 3.50, 'quantity-croissant')">Buy</button>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -165,18 +186,28 @@
         <section id="contact" class="py-5">
             <div class="container">
                 <h2 class="text-center mb-4">Contact Us</h2>
-                <form class="mx-auto" style="max-width: 600px;">
+<?php if (isset($_SESSION['message'])): ?>
+                <div class="alert alert-<?php echo $_SESSION['status'] == 'success' ? 'success' : 'danger'; ?> alert-dismissible fade show" role="alert">
+                    <?php echo $_SESSION['message']; ?>
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+<?php
+    unset($_SESSION['message']);
+    unset($_SESSION['status']);
+?>
+<?php endif; ?>
+                <form action="contact_handler.php" method="POST" class="mx-auto" style="max-width: 600px;">
                     <div class="mb-3">
                         <label for="name" class="form-label">Name</label>
-                        <input type="text" class="form-control" id="name" required>
+                        <input type="text" class="form-control" id="name" name="name" required>
                     </div>
                     <div class="mb-3">
                         <label for="email" class="form-label">Email</label>
-                        <input type="email" class="form-control" id="email" required>
+                        <input type="email" class="form-control" id="email" name="email" required>
                     </div>
                     <div class="mb-3">
                         <label for="message" class="form-label">Message</label>
-                        <textarea class="form-control" id="message" rows="4" required></textarea>
+                        <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
                     </div>
                     <button type="submit" class="btn btn-primary">Send Message</button>
                 </form>
@@ -202,14 +233,22 @@
             });
         });
 
-        function addToCart(name, price) {
+        function addToCart(name, price, quantityId) {
+            const quantityInput = document.getElementById(quantityId);
+            const quantity = parseInt(quantityInput.value, 10);
+
+            if (quantity < 1) {
+                alert("Quantity must be at least 1.");
+                return;
+            }
+
             let cart = JSON.parse(localStorage.getItem('cart')) || {};
             if (cart[name]) {
-                cart[name].quantity++;
+                cart[name].quantity += quantity;
             } else {
                 cart[name] = {
                     price: price,
-                    quantity: 1
+                    quantity: quantity
                 };
             }
             localStorage.setItem('cart', JSON.stringify(cart));
diff --git a/order_confirmation.php b/order_confirmation.php
new file mode 100644
index 0000000..c7bf664
--- /dev/null
+++ b/order_confirmation.php
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Order Confirmation - The Cozy Corner Cafe</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #6b7b62;
+            --secondary-color: #8e9b83;
+            --background-color: #8e9b83;
+            --surface-color: #a2b199;
+            --text-color: #424c3b;
+            --heading-font: 'Inter', sans-serif;
+            --body-font: 'Inter', sans-serif;
+        }
+        body {
+            font-family: var(--body-font);
+            color: var(--text-color);
+            background-color: var(--background-color);
+            padding-top: 70px; /* Adjusted for fixed navbar */
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-family: var(--heading-font);
+        }
+        .navbar {
+            background-color: var(--background-color);
+            font-weight: bold;
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            border-radius: 0.5rem;
+            padding: 0.75rem 1.5rem;
+            font-weight: bold;
+        }
+        .btn-primary:hover {
+            background-color: #5a6a54;
+            border-color: #5a6a54;
+        }
+        footer {
+            background-color: var(--text-color);
+            color: var(--secondary-color);
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand" href="index.php">The Cozy Corner</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item"><a class="nav-link" href="index.php#home">Home</a></li>
+                        <li class="nav-item"><a class="nav-link" href="index.php#menu">Menu</a></li>
+                        <li class="nav-item"><a class="nav-link" href="index.php#about">About</a></li>
+                        <li class="nav-item"><a class="nav-link" href="index.php#contact">Contact</a></li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="cart.php">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
+                                    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+                                </svg>
+                                <span class="badge bg-primary rounded-pill" id="cart-count">0</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main class="container py-5">
+        <div class="text-center">
+            <h1 class="display-4">Thank You!</h1>
+            <p class="lead">Your order has been placed successfully.</p>
+            <hr>
+        </div>
+        <div class="row">
+            <div class="col-md-8 mx-auto">
+                <h5 class="text-center mb-4">Your Order Summary</h5>
+                <div id="order-summary"></div>
+            </div>
+        </div>
+        <div class="text-center mt-4">
+            <p>You will receive an email confirmation shortly.</p>
+            <a href="index.php" class="btn btn-primary">Continue Shopping</a>
+        </div>
+    </main>
+
+    <footer class="py-4 text-center mt-5">
+        <div class="container">
+            <p>&copy; 2025 The Cozy Corner Cafe. All Rights Reserved.</p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            renderOrderSummary();
+            updateCartCount();
+            localStorage.removeItem('cart'); // Clear cart from localStorage
+        });
+
+        function renderOrderSummary() {
+            const orderSummaryContainer = document.getElementById('order-summary');
+            const orderData = sessionStorage.getItem('order');
+
+            if (!orderData) {
+                orderSummaryContainer.innerHTML = '<p>No order details found.</p>';
+                return;
+            }
+
+            const order = JSON.parse(orderData);
+            let table = `
+                <table class="table" style="background-color: #d4d4ce;">
+                    <thead>
+                        <tr>
+                            <th>Item</th>
+                            <th>Price</th>
+                            <th>Quantity</th>
+                            <th>Total</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+            `;
+
+            let grandTotal = 0;
+            for (const name in order) {
+                const item = order[name];
+                const total = item.price * item.quantity;
+                grandTotal += total;
+                table += `
+                    <tr>
+                        <td>${name}</td>
+                        <td>${item.price.toFixed(2)}</td>
+                        <td>${item.quantity}</td>
+                        <td>${total.toFixed(2)}</td>
+                    </tr>
+                `;
+            }
+
+            table += `
+                    </tbody>
+                </table>
+                <hr>
+                <div class="text-end">
+                    <h4>Grand Total: ${grandTotal.toFixed(2)}</h4>
+                </div>
+            `;
+            orderSummaryContainer.innerHTML = table;
+            sessionStorage.removeItem('order'); // Clear order from sessionStorage
+        }
+
+        function updateCartCount() {
+            document.getElementById('cart-count').innerText = '0';
+        }
+    </script>
+
+</body>
+</html>