script.js

const menus={plates:[["Charred Cauliflower","Smoked almond · saffron · fenugreek","₹480"],["Lotus Stem Chaat","Green mango · chilli · cultured cream","₹420"],["Forest Mushroom Kulcha","Black garlic · morel butter","₹520"]],mains:[["Coal-Roasted Pumpkin","Kashmiri chilli · brown butter · millet","₹760"],["Jackfruit Galouti","Stone-ground spice · sheermal · mint","₹820"],["Nocturne Dal","24-hour black lentil · smoked tomato","₹640"]],sweet:[["Burnt Mishti Doi","Nolen gur · puffed rice · sea salt","₹410"],["Dark Chocolate Chikki","Sesame · jaggery · vanilla bean","₹460"],["Saffron Milk Cake","Pistachio · citrus leaf","₹430"]]};const list=document.querySelector(".dish-list");function render(k){list.innerHTML=menus[k].map(x=>'<article class="dish"><div><h3>'+x[0]+'</h3><p>'+x[1]+'</p></div><strong>'+x[2]+'</strong></article>').join("")}render("plates");document.querySelectorAll("[data-menu]").forEach(b=>b.onclick=()=>{document.querySelectorAll("[data-menu]").forEach(x=>x.setAttribute("aria-selected","false"));b.setAttribute("aria-selected","true");render(b.dataset.menu)});const drawer=document.querySelector(".drawer"),overlay=document.querySelector(".overlay");function toggle(on){drawer.classList.toggle("open",on);overlay.classList.toggle("open",on);drawer.setAttribute("aria-hidden",String(!on));document.body.classList.toggle("no-scroll",on)}document.querySelectorAll(".reserve-open").forEach(b=>b.onclick=()=>toggle(true));document.querySelector(".menu-toggle").onclick=()=>toggle(true);document.querySelector(".drawer-close").onclick=()=>toggle(false);overlay.onclick=()=>toggle(false);document.addEventListener("keydown",e=>{if(e.key==="Escape")toggle(false)});const dates=document.querySelector(".date-row"),now=new Date();for(let i=0;i<5;i++){let d=new Date(now);d.setDate(now.getDate()+i);let b=document.createElement("button");b.innerHTML='<b>'+new Intl.DateTimeFormat("en",{weekday:"short"}).format(d)+'</b><br>'+d.getDate();b.dataset.date=new Intl.DateTimeFormat("en-IN",{day:"numeric",month:"short"}).format(d);dates.appendChild(b)}let chosen={};document.querySelectorAll(".date-row button").forEach(b=>b.onclick=()=>{document.querySelectorAll(".date-row button").forEach(x=>x.classList.remove("selected"));b.classList.add("selected");chosen.date=b.dataset.date;ready()});document.querySelectorAll(".times button").forEach(b=>b.onclick=()=>{document.querySelectorAll(".times button").forEach(x=>x.classList.remove("selected"));b.classList.add("selected");chosen.time=b.textContent;ready()});function ready(){document.querySelector(".next").disabled=!(chosen.date&&chosen.time)}document.querySelector(".next").onclick=()=>{document.querySelector('[data-step="1"]').classList.remove("active");document.querySelector('[data-step="2"]').classList.add("active")};document.querySelector("#booking").onsubmit=e=>{e.preventDefault();document.querySelector('[data-step="2"]').classList.remove("active");document.querySelector('[data-step="3"]').classList.add("active");document.querySelector("#confirmation").textContent=chosen.date+" at "+chosen.time+" · "+document.querySelector("#guests").value+". A confirmation has been prepared for this demo."};document.querySelector(".done").onclick=()=>toggle(false);const snd=document.querySelector("#sound");let ctx,nodes=[];snd.onclick=()=>{if(snd.classList.toggle("playing")){ctx=new (window.AudioContext||window.webkitAudioContext)();[110,165,220].forEach((f,i)=>{let o=ctx.createOscillator(),g=ctx.createGain();o.frequency.value=f;o.type="sine";g.gain.value=.008/(i+1);o.connect(g).connect(ctx.destination);o.start();nodes.push(o)});snd.querySelector("b").textContent="Pause the mood"}else{nodes.forEach(o=>o.stop());nodes=[];ctx.close();snd.querySelector("b").textContent="Play the mood"}};