NAVEONIN

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); .nv-booking{--nv-card:#fff;--nv-ink:#2b1d14;--nv-muted:#8a7466;--nv-line:#eadfd6;--nv-chip:#f6eee7;--nv-chip-hover:#ecdfd3;--nv-accent:#6b4226;--nv-accent-ink:#fff; position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 16px;box-sizing:border-box; background-color:#fff;background-image:radial-gradient(circle at 12% 8%,rgba(139,94,60,.14),transparent 38%),radial-gradient(circle at 90% 92%,rgba(139,94,60,.12),transparent 40%),radial-gradient(#e3d3c4 1.2px,transparent 1.2px);background-size:auto,auto,22px 22px; color:var(--nv-ink);font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4;text-align:left} .nv-booking *,.nv-booking *::before,.nv-booking *::after{box-sizing:border-box;font-family:inherit} .nv-booking button{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;cursor:pointer;text-transform:none;letter-spacing:normal;box-shadow:none;line-height:1.2;margin:0} .nv-booking h1,.nv-booking h2,.nv-booking p,.nv-booking ul{margin:0;padding:0} .nv-booking [hidden]{display:none!important} .nv-card{width:100%;max-width:880px;display:grid;grid-template-columns:310px 1fr;background:var(--nv-card);border:1px solid var(--nv-line);border-radius:20px;box-shadow:0 14px 44px rgba(107,66,38,.12);overflow:hidden;min-height:500px} .nv-info{padding:32px 28px;border-right:1px solid var(--nv-line);background:#fbf7f3;display:flex;flex-direction:column;gap:12px} .nv-logo{height:48px;width:auto;align-self:flex-start;margin-bottom:4px} .nv-logo-n{fill:var(--nv-ink)} .nv-logo-dot{fill:#1a00ab} .nv-host{font-size:15px;font-weight:600} .nv-role{font-size:12px;color:var(--nv-muted);margin-top:-8px} .nv-info h1{font-size:25px;line-height:1.18;letter-spacing:-.02em;font-weight:700;color:var(--nv-ink);margin-top:4px} .nv-desc{font-size:13px;line-height:1.6;color:var(--nv-muted)} .nv-meta{list-style:none;margin-top:6px;display:grid;gap:10px;font-size:13px} .nv-meta li{display:flex;gap:10px;align-items:center;list-style:none} .nv-meta svg{flex:none;width:16px;height:16px;stroke:var(--nv-muted)} .nv-summary{margin-top:auto;padding:12px 14px;border-radius:12px;background:var(--nv-chip);font-size:13px;font-weight:600;display:none} .nv-summary.show{display:block} .nv-panel{padding:28px 32px;display:flex;flex-direction:column} .nv-head{display:flex;align-items:center;gap:10px;margin-bottom:18px} .nv-head h2{font-size:15px;font-weight:700;color:var(--nv-ink)} .nv-round{width:28px;height:28px;padding:0;border-radius:50%;border:0;background:var(--nv-chip);display:grid;place-items:center} .nv-round:hover:not(:disabled){background:var(--nv-chip-hover)} .nv-round:disabled{opacity:.35;cursor:default} .nv-round svg{width:14px;height:14px;stroke:currentColor} .nv-monthbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .nv-monthbar strong{font-size:14px} .nv-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .nv-dow{text-align:center;font-size:11px;color:var(--nv-muted);padding-bottom:4px} .nv-day{height:36px;padding:0;border:0;border-radius:10px;background:transparent;font-size:13px} .nv-day.avail{background:var(--nv-chip);font-weight:600} .nv-day.avail:hover{background:var(--nv-chip-hover)} .nv-day:disabled{color:var(--nv-muted);opacity:.45;cursor:default} .nv-day.selected,.nv-day.selected:hover{background:var(--nv-accent);color:var(--nv-accent-ink)} .nv-day.today:not(.selected){outline:1.5px solid var(--nv-line)} .nv-times-label{font-size:12px;font-weight:700;margin:22px 0 10px} .nv-times{display:flex;flex-wrap:wrap;gap:8px} .nv-time{border:0;border-radius:10px;background:var(--nv-chip);padding:9px 14px;font-size:12.5px;font-weight:500} .nv-time:hover:not(:disabled){background:var(--nv-chip-hover)} .nv-time:disabled{text-decoration:line-through;opacity:.4;cursor:default} .nv-time.selected{background:var(--nv-accent);color:var(--nv-accent-ink)} .nv-hint{font-size:13px;color:var(--nv-muted)} .nv-cta{margin-top:auto;padding-top:22px;display:flex;justify-content:flex-end} .nv-btn{border:0;border-radius:12px;padding:12px 22px;background:var(--nv-accent);color:var(--nv-accent-ink);font-weight:600;font-size:14px} .nv-btn:hover:not(:disabled){filter:brightness(1.1)} .nv-btn:disabled{opacity:.35;cursor:default} .nv-form{display:grid;gap:14px} .nv-form label{display:grid;gap:6px;font-size:12px;font-weight:600} .nv-form input,.nv-form textarea{font-size:14px;color:var(--nv-ink);background:#fff;border:1px solid var(--nv-line);border-radius:10px;padding:11px 12px;width:100%;margin:0;box-shadow:none} .nv-form input:focus,.nv-form textarea:focus{outline:2px solid var(--nv-accent);outline-offset:1px} .nv-form textarea{min-height:90px;resize:vertical} .nv-success{margin:auto;text-align:center;max-width:340px} .nv-tick{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;background:var(--nv-accent);color:var(--nv-accent-ink);display:grid;place-items:center} .nv-tick svg{width:26px;height:26px;stroke:currentColor} .nv-success h2{margin-bottom:8px;font-size:22px} .nv-success p{margin-bottom:18px;color:var(--nv-muted);font-size:14px;line-height:1.55} @media(max-width:700px){.nv-card{grid-template-columns:1fr}.nv-info{border-right:0;border-bottom:1px solid var(--nv-line)}.nv-panel{padding:24px 20px}}

Select Date & Time

Available Times
Select a date to see available times.
{"@context":"https://schema.org","@type":"ProfessionalService","name":"Naveen - Digital Marketing Strategist","description":"Naveen is the best digital marketing strategist in Calicut, helping businesses grow with SEO, social media marketing and paid ads.","url":"https://naveonin.com","areaServed":{"@type":"City","name":"Calicut (Kozhikode), Kerala, India"},"founder":{"@type":"Person","name":"Naveen","jobTitle":"Digital Marketing Strategist"}} (function(){ var CONFIG={slots:["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00"],workDays:[1,2,3,4,5],bookingEndpoint:"",maxMonthsAhead:6}; var root=document.getElementById("nv-booking"); function $(id){return root.querySelector("#"+id);} var today=new Date();today.setHours(0,0,0,0); var state={view:new Date(today.getFullYear(),today.getMonth(),1),date:null,time:null}; function key(d){return d.getFullYear()+"-"+String(d.getMonth()+1).padStart(2,"0")+"-"+String(d.getDate()).padStart(2,"0");} function fmtDate(d){return d.toLocaleDateString(undefined,{weekday:"long",day:"numeric",month:"long",year:"numeric"});} function loadBooked(){try{return JSON.parse(localStorage.getItem("nv_bookings")||"{}");}catch(e){return {};}} function saveBooked(b){try{localStorage.setItem("nv_bookings",JSON.stringify(b));}catch(e){}} function renderCalendar(){ var v=state.view; $("nv-month").textContent=v.toLocaleDateString(undefined,{month:"long",year:"numeric"}); var maxMonth=new Date(today.getFullYear(),today.getMonth()+CONFIG.maxMonthsAhead,1); $("nv-prev").disabled=v=maxMonth; var cal=$("nv-calendar");cal.innerHTML=""; ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].forEach(function(n){var h=document.createElement("div");h.className="nv-dow";h.textContent=n;cal.appendChild(h);}); var offset=(new Date(v.getFullYear(),v.getMonth(),1).getDay()+6)%7; for(var i=0;i<offset;i++)cal.appendChild(document.createElement("div")); var days=new Date(v.getFullYear(),v.getMonth()+1,0).getDate(); for(var n=1;n=today&&CONFIG.workDays.indexOf(d.getDay())>-1; var b=document.createElement("button");b.type="button"; b.className="nv-day"+(ok?" avail":""); if(+d===+today)b.classList.add("today"); if(state.date&&+state.date===+d)b.classList.add("selected"); b.textContent=n;b.disabled=!ok;b.setAttribute("aria-label",fmtDate(d)); b.addEventListener("click",function(){state.date=d;state.time=null;renderAll();}); cal.appendChild(b); })(n);} } function renderTimes(){ var box=$("nv-times");box.innerHTML=""; if(!state.date){box.innerHTML='Select a date to see available times.';return;} var taken=loadBooked()[key(state.date)]||[]; CONFIG.slots.forEach(function(t){ var b=document.createElement("button");b.type="button"; b.className="nv-time"+(state.time===t?" selected":""); b.textContent=t;b.disabled=taken.indexOf(t)>-1; b.addEventListener("click",function(){state.time=t;renderAll();}); box.appendChild(b); }); } function renderSummary(){ var s=$("nv-summary"); if(state.date&&state.time){s.textContent=fmtDate(state.date)+" ยท "+state.time;s.classList.add("show");} else s.classList.remove("show"); } function renderAll(){renderCalendar();renderTimes();renderSummary();$("nv-continue").disabled=!(state.date&&state.time);} function show(step){["nv-step-pick","nv-step-details","nv-step-done"].forEach(function(id){$(id).hidden=(id!==step);});} $("nv-prev").onclick=function(){state.view=new Date(state.view.getFullYear(),state.view.getMonth()-1,1);renderCalendar();}; $("nv-next").onclick=function(){state.view=new Date(state.view.getFullYear(),state.view.getMonth()+1,1);renderCalendar();}; $("nv-continue").onclick=function(){show("nv-step-details");}; $("nv-back").onclick=function(){show("nv-step-pick");}; $("nv-form").addEventListener("submit",function(e){ e.preventDefault(); var data={};new FormData(e.target).forEach(function(v,k){data[k]=v;}); var booking=Object.assign({},data,{date:key(state.date),time:state.time}); if(CONFIG.bookingEndpoint){ fetch(CONFIG.bookingEndpoint,{method:"POST",headers:{"Content-Type":"application/json","Accept":"application/json"},body:JSON.stringify(booking)}).catch(function(err){console.error("Booking request failed",err);}); }else{console.log("Booking:",booking);} var b=loadBooked();(b[booking.date]=b[booking.date]||[]).push(booking.time);saveBooked(b); $("nv-done-text").textContent=fmtDate(state.date)+" at "+state.time+". A confirmation will be sent to "+data.email+"."; show("nv-step-done"); }); $("nv-again").onclick=function(){state.date=null;state.time=null;$("nv-form").reset();renderAll();show("nv-step-pick");}; renderAll(); })();
Scroll to Top