├── jocdoz2uuo.webp
├── script.js
└── website.css


/jocdoz2uuo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GOPIKA-17-123/project_web/HEAD/jocdoz2uuo.webp


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function() { var orderCount = 0;
 2 | 
 3 |     
 4 |     function placeOrder(event) {
 5 |         orderCount++;
 6 |         var itemName = event.target.parentElement.querySelector("h3").textContent;
 7 |         document.getElementById("order-count").textContent = "Orders placed: " + orderCount;
 8 |         alert("Your order for " + itemName + " has been placed successfully!");
 9 |     }
10 |     
11 |     
12 |     var orderButtons = document.querySelectorAll("button[onclick='placeOrder()']");
13 |     for (var i = 0; i < orderButtons.length; i++) {
14 |         orderButtons[i].addEventListener("click", placeOrder);
15 |     }
16 |     
17 |     
18 |     var orderDisplay = document.createElement("div");
19 |     orderDisplay.id = "order-count";
20 |     orderDisplay.style.fontSize = "20px";
21 |     orderDisplay.style.margin = "10px";
22 |     orderDisplay.textContent = "Orders placed: 0";
23 |     document.body.insertBefore(orderDisplay, document.body.firstChild);
24 |     
25 |     
26 |     var bookingForm = document.querySelector("form");
27 |     if (bookingForm) {
28 |         bookingForm.addEventListener("submit", function(event) {
29 |             event.preventDefault(); 
30 |             
31 |             var name = document.querySelector("input[type='text']").value;
32 |             var email = document.querySelector("input[type='email']").value;
33 |             var phone = document.querySelector("input[type='tel']").value;
34 |             var date = document.querySelector("input[type='date']").value;
35 |             var time = document.querySelector("input[type='time']").value;
36 |             var guests = document.querySelector("select").value;
37 |             
38 |             if (name && email && phone && date && time && guests) {
39 |                 var confirmationMessage = "Thank you, " + name + "! Your table for " + guests + " on " + date + " at " + time + " has been booked.";
40 |                 document.querySelector(".tablebooking").innerHTML = "<h2>Booking Confirmed</h2><p>" + confirmationMessage + "</p>";
41 |             } else {
42 |                 alert("Please fill in all the details correctly.");
43 |             }
44 |         });
45 |     }
46 |     
47 |     });


--------------------------------------------------------------------------------
/website.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |             font-family: Arial, sans-serif;
 3 |             margin: 0;
 4 |             padding: 0;
 5 |             /* background-color: #f8f8f8; */
 6 |             
 7 |         }
 8 |     
 9 |         header {
10 |             /* background-color: #8B0000; */
11 |             background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRP_MCmt35nOM8j0x61ovEVsNIAJvBn8fH36w&s");
12 |             /* background-repeat: inherit; */
13 |             background-size: cover;
14 |             color: white;
15 |             padding: 10px;
16 |             text-align: center;
17 |         }
18 |         .intro{
19 |              background-color: white;
20 |             padding: 10px;
21 |             text-align: left;
22 |         }
23 |         nav {
24 |             /* background-color: #8ae817; */
25 |             text-align: center;
26 |             padding: 30px;
27 |         }
28 |         nav a {
29 |             color: white;
30 |             text-decoration: none;
31 |             padding: 10px 10px;
32 |             display: inline-block;
33 |         }
34 |         .container {
35 |             padding: 20px;
36 |             text-align: center;
37 |             background-image: url("https://www.speedlinesolutions.com/hs-fs/hubfs/Footer-4.png?width=1591&name=Footer-4.png");
38 |             background-repeat: no-repeat;
39 |             background-size: cover;
40 |         }
41 |         .menu {
42 |             display: flex;
43 |             justify-content: center;
44 |             flex-wrap: wrap;
45 |             background-image: url("https://wallpapercat.com/w/full/0/8/e/584508-2560x1920-desktop-hd-restaurant-background.jpg");
46 |             background-repeat: no-repeat;
47 |             background-size: cover;
48 |        -webkit-text-fill-color:rgb(122, 9, 9);
49 |             
50 |         }
51 |         .menu-item {
52 |             background: #f9f8f8;
53 |             margin: 10px;
54 |             padding: 20px;
55 |             border-radius: 10px;
56 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
57 |             width: 300px;
58 |             
59 |         }
60 |         .footer {
61 |             margin-top: 20px;
62 |             padding: 10px;
63 |             background-color: #343a40;
64 |             color: white;
65 |             font-size: 14px;
66 |             
67 |         }
68 |         input, select, button {
69 |             width: 100%;
70 |             padding: 10px;
71 |             margin: 10px 0;
72 |             border: 1px solid #ccc;
73 |             border-radius: 5px;
74 |         }
75 |         button {
76 |             background-color: #28a745;
77 |             color: white;
78 |             font-size: 16px;
79 |             cursor: pointer;
80 |         }
81 |         button:hover {
82 |             background-color: #218838;
83 |         }
84 | 


--------------------------------------------------------------------------------