// tako-app.jsx — splash, app shell (header + nav + views + overlays), theme, tweaks, mount const { useState: aS, useEffect: aE, useRef: aR } = React; /* ───────────────── iPhone 14 Pro frame ───────────────── */ function PhoneStatusBar() { const c = '#1a1512'; return (
9:41
); } function PhoneFrame({ children }) { const [scale, setScale] = aS(1); aE(() => { const fit = () => { const s = Math.min(1, (window.innerHeight - 36) / 852, (window.innerWidth - 36) / 393); setScale(s > 0 ? s : 1); }; fit(); requestAnimationFrame(fit); window.addEventListener('resize', fit); return () => window.removeEventListener('resize', fit); }, []); return (
{children}
); } /* ───────────────── theme math ───────────────── */ function _rgb(h) { h = (h || '').replace('#', ''); if (h.length === 3) h = h.split('').map(c => c + c).join(''); return [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) || 0); } function _mix(a, b, w) { const f = (x, y) => Math.round(x + (y - x) * w); return `rgb(${f(a[0], b[0])},${f(a[1], b[1])},${f(a[2], b[2])})`; } function _lum(c) { const s = c.map(v => { v /= 255; return v <= .03928 ? v / 12.92 : Math.pow((v + .055) / 1.055, 2.4); }); return .2126 * s[0] + .7152 * s[1] + .0722 * s[2]; } function applyTheme(brand) { const r = document.documentElement, c = _rgb(brand), W = [255, 255, 255], K = [20, 12, 10]; r.style.setProperty('--brand', brand); r.style.setProperty('--brand-deep', _mix(c, K, .2)); r.style.setProperty('--brand-tint', _mix(c, W, .82)); r.style.setProperty('--brand-wash', _mix(c, W, .9)); r.style.setProperty('--on-brand', _lum(c) > 0.62 ? '#2A1F1A' : '#FFFFFF'); } /* ───────────────── faux QR ───────────────── */ function QRTako() { const N = 21, cells = []; const eye = (x, y) => { for (const [ox, oy] of [[0, 0], [N - 7, 0], [0, N - 7]]) { const dx = x - ox, dy = y - oy; if (dx >= 0 && dx < 7 && dy >= 0 && dy < 7) { const ring = dx === 0 || dx === 6 || dy === 0 || dy === 6; const core = dx >= 2 && dx <= 4 && dy >= 2 && dy <= 4; return ring || core ? 1 : 0; } } return -1; }; for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) { const e = eye(x, y); cells.push(e >= 0 ? e : (((x * 31 + y * 17 + x * y * 7) % 3 === 0) ? 1 : 0)); } return (
{cells.map((v, i) => )}
); } /* ───────────────── splash / landing ───────────────── */ function Splash({ onEnter }) { const reduce = useReducedMotion(); const A = (d) => reduce ? {} : { animation: `rise-fade .7s var(--spring) both`, animationDelay: d }; return (
{!reduce && [0, 1].map(i => )} Tako

Tako

Scansiona il QR sul tuo tavolo per sfogliare il menù e ordinare. Niente app da scaricare.

Simula la scansione

Demo · Trattoria da Mauro · Tavolo 7

); } /* ───────────────── header ───────────────── */ function Header({ onCart, onWaiter, count }) { const s = useStore(sessionStore); return ( <>

{s.restaurantName}

Tavolo {s.tableNumber}

); } /* ───────────────── bottom nav ───────────────── */ function BottomNav({ view, setView, aiEnabled, orderActive }) { const items = [ { id: 'menu', icon: 'bowl', label: 'Menù' }, { id: 'tracking', icon: 'clock', label: 'Ordine', dot: orderActive }, aiEnabled && { id: 'chat', icon: 'sparkles', label: 'Assistente' }, ].filter(Boolean); const idx = Math.max(0, items.findIndex(i => i.id === view)); const n = items.length; return ( ); } /* ───────────────── app ───────────────── */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "brand": "#ED7159", "aiEnabled": true, "tableNumber": 7, "screen": "splash" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const c = useStore(cartStore); const o = useStore(orderStore); const count = cartCount(c.items); const [cartOpen, setCartOpen] = aS(false); const [waiterOpen, setWaiterOpen] = aS(false); const [demoView, setDemoView] = aS('menu'); const SP = new URLSearchParams(typeof location !== 'undefined' ? location.search : ''); const bare = SP.has('bare'); // no device bezel / tweaks — fill the iframe const demo = SP.has('demo'); // auto-navigate the menu (for landing showcase) const view = demo ? demoView : t.screen; const setView = demo ? setDemoView : ((v) => setTweak('screen', v)); const orderActive = !!o.orderId && stepIndex(o.status) < ORDER_STEPS.length - 1; aE(() => { applyTheme(t.brand); sessionStore.set({ primaryColor: t.brand }); }, [t.brand]); aE(() => { sessionStore.set({ aiEnabled: t.aiEnabled, tableNumber: Number(t.tableNumber) || 1 }); }, [t.aiEnabled, t.tableNumber]); aE(() => { if (!t.aiEnabled && view === 'chat') setView('menu'); }, [t.aiEnabled]); // order-ready notification (browser push + in-app) aE(() => { const f = () => { toast('Il tuo ordine è pronto! 🛎️', { type: 'success', icon: 'bell', duration: 5000 }); try { if (window.Notification && Notification.permission === 'granted') new Notification('Tako · ' + sessionStore.get().restaurantName, { body: 'Il tuo ordine è pronto al tavolo ' + sessionStore.get().tableNumber + '!' }); } catch (e) {} }; window.addEventListener('tako:order-ready', f); return () => window.removeEventListener('tako:order-ready', f); }, []); // demo mode: scripted auto-navigation tour (menu → categorie → assistente → ordine), in loop aE(() => { if (!demo) return; let cancelled = false; const timers = []; const wait = (ms) => new Promise(r => { const id = setTimeout(r, ms); timers.push(id); }); const tapText = (re) => { const b = [...document.querySelectorAll('.app button')].find(x => re.test((x.textContent || '').trim())); if (b) b.click(); }; const scrollMenu = (dir, ms) => new Promise(res => { const start = performance.now(); const iv = setInterval(() => { if (cancelled) { clearInterval(iv); return res(); } const sc = document.querySelector('.app .scroll'); if (sc && sc.scrollHeight > sc.clientHeight + 4) sc.scrollTop += dir * 2.4; if (performance.now() - start > ms) { clearInterval(iv); return res(); } }, 28); timers.push(iv); }); (async function loop() { while (!cancelled) { setDemoView('menu'); await wait(700); await scrollMenu(1, 2600); await wait(500); tapText(/^Primi$/); await wait(1900); await scrollMenu(1, 1800); await wait(400); tapText(/^Pizze$/); await wait(1900); tapText(/^Dolci$/); await wait(1700); await scrollMenu(-1, 2600); await wait(500); setDemoView('chat'); await wait(1100); tapText(/consigli/i); await wait(4200); setDemoView('tracking'); await wait(3200); } })(); return () => { cancelled = true; timers.forEach(clearTimeout); }; }, [demo]); const confirmOrder = () => { placeOrder(); setCartOpen(false); setView('tracking'); toast('Ordine inviato in cucina!', { type: 'success' }); try { if (window.Notification && Notification.permission === 'default') Notification.requestPermission(); } catch (e) {} }; const entered = demo ? true : (view !== 'splash'); const inner = (
{!entered ? ( setView('menu')} /> ) : ( <>
setCartOpen(true)} onWaiter={() => setWaiterOpen(true)} />
{view === 'menu' && setCartOpen(true)} />} {view === 'tracking' && setView('menu')} />} {view === 'chat' && setView('tracking')} />}
setCartOpen(false)} onConfirm={confirmOrder} /> setWaiterOpen(false)} /> )}
); return ( <> {bare ?
{inner}
:
{inner}
} {!bare && ( setTweak('brand', v)} /> setTweak('aiEnabled', v)} /> setTweak('tableNumber', v)} /> setTweak('screen', v)} /> { cart.clear(); orderStore.set({ orderId: null, status: null, items: [], notes: '', placedAt: null }); setTweak('screen', 'splash'); }}>Svuota carrello e ordine )} ); } ReactDOM.createRoot(document.getElementById('root')).render();