code-differently · mkbrown261 · Apr 2, 2026 · Apr 2, 2026
diff --git a/masonbrown/images/Screenshotter.png b/masonbrown/images/Screenshotter.png
diff --git a/masonbrown/images/bistroana.png b/masonbrown/images/bistroana.png
diff --git a/masonbrown/images/brunchlogo.png b/masonbrown/images/brunchlogo.png
diff --git a/masonbrown/images/brunchpic1.png b/masonbrown/images/brunchpic1.png
diff --git a/masonbrown/images/contactus.png b/masonbrown/images/contactus.png
diff --git a/masonbrown/images/dinnerlogo.png b/masonbrown/images/dinnerlogo.png
diff --git a/masonbrown/images/dinnerpic1.png b/masonbrown/images/dinnerpic1.png
diff --git a/masonbrown/images/gnocchirasta.png b/masonbrown/images/gnocchirasta.png
diff --git a/masonbrown/images/homeicon.png b/masonbrown/images/homeicon.png
diff --git a/masonbrown/images/lunchlogo.png b/masonbrown/images/lunchlogo.png
diff --git a/masonbrown/images/lunchpic1.png b/masonbrown/images/lunchpic1.png
diff --git a/masonbrown/images/menulogo.png b/masonbrown/images/menulogo.png
diff --git a/masonbrown/images/navbarmenulogo.png b/masonbrown/images/navbarmenulogo.png
diff --git a/masonbrown/images/reservationlogo.png b/masonbrown/images/reservationlogo.png
diff --git a/masonbrown/images/salmonlunch.png b/masonbrown/images/salmonlunch.png
diff --git a/masonbrown/images/shrimpdinner1.png b/masonbrown/images/shrimpdinner1.png
diff --git a/masonbrown/index.html b/masonbrown/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bistroana</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <nav id="navbar">
+  <ul>
+    <li><a href="index.html"><img src="images/homeicon.png" alt="Home"></a></li> 
+    <li><a href="#"><img src="images/navbarmenulogo.png" alt="Menu"></a></li>
+    <li><a href="reservation.html" target="_blank" rel="noopener noreferrer">
+        <img src="images/reservationlogo.png" alt="Reservations">
+    </a></li>
+    <li><a href="#"><img src="images/contactus.png" alt="Contact"></a></li>
+  </ul>
+</nav>
+
+  <h1 id="logo"><img src="images/bistroana.png" alt="Bistroana"></h1>
+  <h2 id="menu-title"><img src="images/menulogo.png" alt="Menu"></h2>
+
+  <div id="buttons">
+    <button id="brunch-btn"><img src="images/brunchlogo.png" alt="Brunch"></button>
+    <button id="lunch-btn"><img src="images/lunchlogo.png" alt="Lunch"></button>
+    <button id="dinner-btn"><img src="images/dinnerlogo.png" alt="Dinner"></button>
+  </div>
+
+  <div id="menu-display">
+    <p>Please select a menu to view items</p>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/masonbrown/reservation.html b/masonbrown/reservation.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bistroana Reservations</title>
+  <link rel="stylesheet" href="style.css">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      text-align: center;
+      padding: 20px;
+      background: linear-gradient(#7b2c2c, #1d1818);
+      color: white;
+    }
+    form {
+      background-color: rgba(255,255,255,0.9);
+      color: #000;
+      padding: 20px;
+      border-radius: 12px;
+      max-width: 400px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+    input, select {
+      padding: 10px;
+      font-size: 16px;
+      border-radius: 8px;
+      border: 1px solid #ccc;
+    }
+    button {
+      padding: 12px;
+      background-color: #c26b6b;
+      border: none;
+      color: white;
+      font-size: 18px;
+      cursor: pointer;
+      border-radius: 8px;
+    }
+    button:hover {
+      background-color: #cbb043;
+    }
+
+    /* Confirmation message styles */
+    #confirmation {
+      margin-top: 20px;
+      font-weight: bold;
+      opacity: 0;                 /* start hidden */
+      transition: opacity 0.8s ease; /* smooth fade-in */
+    }
+    #confirmation.show {
+      opacity: 1;                 /* fade in */
+    }
+  </style>
+</head>
+<body>
+
+  <h1>Bistroana Private Party Reservations</h1>
+  <p>We are currently accepting private party bookings! Please fill out the form below:</p>
+
+  <form id="reservation-form">
+    <input type="text" id="name" placeholder="Your Name" required>
+    <input type="tel" id="phone" placeholder="Phone Number" required>
+    <input type="number" id="party-size" placeholder="Party Size" min="1" required>
+    <input type="date" id="date" required>
+    <button type="submit">Book Now</button>
+  </form>
+
+  <p id="confirmation"></p>
+
+  <script>
+    const form = document.getElementById('reservation-form');
+    const confirmation = document.getElementById('confirmation');
+
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+
+      const name = document.getElementById('name').value;
+      const phone = document.getElementById('phone').value;
+      const partySize = document.getElementById('party-size').value;
+      const date = document.getElementById('date').value;
+
+      // Set confirmation message
+      confirmation.textContent = `Thank you, ${name}! Your reservation for ${partySize} people on ${date} has been received. We will contact you at ${phone}.`;
+
+      // Add class to fade in
+      confirmation.classList.add('show');
+
+      // Reset form
+      form.reset();
+
+      // Optional: remove fade-in after 5 seconds
+      setTimeout(() => {
+        confirmation.classList.remove('show');
+      }, 5000);
+    });
+  </script>
+
+</body>
+</html>
diff --git a/masonbrown/script.js b/masonbrown/script.js
@@ -0,0 +1,131 @@
+console.log("JavaScript is connected!");
+
+// Buttons and menu elements
+const brunchButton = document.querySelector("#brunch-btn");
+const lunchButton = document.querySelector("#lunch-btn");
+const dinnerButton = document.querySelector("#dinner-btn");
+const menuDisplay = document.querySelector("#menu-display");
+const menuTitle = document.querySelector("#menu-title");
+
+// Menu items
+const brunchItems = `
+  <div class="menu-card">
+    <h3>Buttermilk Soufflé Pancakes</h3>
+    <p>Delicately aerated pancakes with cultured butter, maple gastrique, and seasonal berries</p>
+  </div>
+  <div class="menu-card">
+    <h3>Heritage Eggs & Applewood Bacon</h3>
+    <p>Farm-raised eggs prepared to order, accompanied by crisp applewood-smoked bacon and chive-infused butter</p>
+  </div>
+  <div class="menu-card">
+    <img src="images/brunchpic1.png" alt="Pancakes">
+  </div>
+`;
+
+const lunchItems = `
+  <div class="menu-card">
+    <h3>Dry-Aged Beef Burger</h3>
+    <p>House-ground dry-aged beef, brioche bun, aged cheddar, heirloom tomato, and truffle aioli</p>
+  </div>
+  <div class="menu-card">
+    <h3>Pommes Frites</h3>
+    <p>Hand-cut potatoes, twice-fried to perfection, finished with sea salt and served with garlic confit aioli</p>
+  </div>
+  <div class="menu-card">
+    <h3>Garden Salad</h3>
+    <p>Seasonal greens, shaved vegetables, toasted seeds, and a light champagne vinaigrette</p>
+  </div>
+  <div class="menu-card">
+    <img src="images/lunchpic1.png" alt="Lunch Dish">
+  </div>
+  <div class="menu-card">
+    <h3>Pan-Seared Atlantic Salmon with Saffron Risotto</h3>
+    <p>Perfectly seared salmon fillet with crispy golden skin and flaky pink interior, accompanied by creamy saffron risotto Milanese, grilled asparagus, roasted cherry tomatoes, and lemon beurre blanc sauce.</p>
+  </div>
+  <div class="menu-card">
+    <img src="images/salmonlunch.png" alt="Lunch Dish">
+  </div>
+`;
+
+const dinnerItems = `
+  <div class="menu-card">
+    <h3>Pan-Seared Filet Mignon</h3>
+    <p>Prime beef filet, finished with herb butter, served alongside roasted seasonal vegetables</p>
+  </div>
+  <div class="menu-card">
+    <h3>Pommes Purée</h3>
+    <p>Silken mashed potatoes enriched with European butter and finished with a touch of cream</p>
+  </div>
+  <div class="menu-card">
+    <h3>Seasonal Vegetable Medley</h3>
+    <p>Chef-selected vegetables, lightly sautéed with herbs and extra virgin olive oil</p>
+  </div>
+  <div class="menu-card">
+    <img src="images/dinnerpic1.png" alt="Dinner Dish">
+  </div>
+  <div class="menu-card">
+    <h3>Caribbean Soul Fusion Gnocchi</h3>
+    <p>Pillowy potato gnocchi handcrafted and pan-seared to achieve a golden exterior, served with Caribbean-inspired sauce.</p>
+  </div>
+  <div class="menu-card">
+    <h3>Sauce, the Right Way</h3>
+    <p>Bathed in our signature coconut-jerk cream sauce—a harmonious marriage of island spices and silken coconut reduction.</p>
+  </div>
+  <div class="menu-card">
+    <h3>Fusion Cuisine</h3>
+    <p>Tri-color bell peppers, toasted coconut flakes, fresh cilantro, and lime zest deliver layers of tropical complexity.</p>
+  </div>
+  <div class="menu-card">
+    <img src="images/gnocchirasta.png" alt="Gnocchi Dish">
+  </div>
+  <div class="menu-card">
+    <h3>Jumbo Rock Shrimp Scampi</h3>
+    <p>The ocean's finest treasure, elevated to rarefied heights.</p>
+  </div>
+  <div class="menu-card">
+    <h3>Star of the Show</h3>
+    <p>3 pristine jumbo rock shrimp, seared to perfection, in a decadent lemon-garlic-parmesan emulsion.</p>
+  </div>
+  <div class="menu-card">
+    <h3>Mediterranean Flavors</h3>
+    <p>Accompanied by charred ciabatta crostini, Italian parsley, lemon zest curls, and vine-ripened cherry tomatoes.</p>
+  </div>
+  <div class="menu-card">
+    <img src="images/shrimpdinner1.png" alt="Shrimp Dish">
+  </div>
+`;
+
+// Function to update menu
+function updateMenu(title, items) {
+  menuTitle.textContent = title;
+  menuDisplay.innerHTML = items;
+}
+
+// Button event listeners
+brunchButton.addEventListener("click", () => updateMenu("Brunch Menu", brunchItems));
+lunchButton.addEventListener("click", () => updateMenu("Lunch Menu", lunchItems));
+dinnerButton.addEventListener("click", () => updateMenu("Dinner Menu", dinnerItems));
+
+// ===== Image Overlay Logic =====
+
+// Create overlay element
+const overlay = document.createElement("div");
+overlay.id = "image-overlay";
+document.body.appendChild(overlay);
+
+// Create image inside overlay
+const overlayImg = document.createElement("img");
+overlay.appendChild(overlayImg);
+
+// Event delegation: handle clicks on images inside menuDisplay
+menuDisplay.addEventListener("click", (e) => {
+  if (e.target.tagName === "IMG") {
+    overlayImg.src = e.target.src;
+    overlay.style.display = "flex";
+  }
+});
+
+// Clicking overlay closes it
+overlay.addEventListener("click", () => {
+  overlay.style.display = "none";
+});