QR MENU — Deliverables

სრული UI/UX აპლიკაცია პროდუქციული SaaS-ისთვის — QR MENU. Domain-independent არქიტექტურა, Design System v6, 23 პროდუქტიული გვერდი და 5 დამატებითი (ანალიტიკა, თემების gallery, product map, design system, handoff doc). Dark Mode, 6 მენიუს თემა, mobile bottom nav — ყველაფერი ჯანსაღი, mobile-first მხარდაჭერით.

✓ Ready for Review

01Design System v6

ცენტრალიზებული სისტემა — assets/styles.css (v6). ყველა 29 გვერდი მისგან ხატავს ტოკენებს.

Brand

• Primary — Deep Emerald #0F7A5C. "premium + trustworthy + warm" ბრიფის მოთხოვნა. Emerald = ხარისხი, კვება; არა tech-blue (ცივი), არა pure luxury (ვიწრო).
• Accent — Warm Amber #D97706. Restaurant heat, highlight, CTA-ები. სუფის.
• Neutrals — warm off-white → true black. Ink #0D0F0E, Line #E6E2D9. თბილი undertone.
• Semantic — Success (Emerald), Warning (Amber), Danger (#C32828), Info (#2563EB).

Typography

• FiraGO — free Fira family variant, სრული ქართული + ლათინური + კირილიცა (KA/EN/RU მშვენივრადაა). ბრიფის მოთხოვნა "Avoid overused Inter/Roboto" — ✓.
• ვარიაცია 400—800. Display headings — 800, body — 400, captions — 700 uppercase.
• JetBrains Mono — რიცხვები, ID-ები, კოდი.
• Type scale: Perfect Fourth (~1.333). 8 დონე — xs/sm/base/md/lg/xl/2xl/3xl/4xl/5xl/6xl.

Spacing, radius, shadow, motion

• Spacing: 4px base — sp-1 → sp-12 (4/8/12/16/20/24/32/40/56/72/96/128).
• Radius: xs/sm/md/lg/xl/2xl/full — 4/6/10/14/20/28/999px.
• Shadow: 4 elevation levels + brand + accent (warm undertone).
• Motion: 3 speeds — fast 120ms, med 220ms, slow 380ms. Easing cubic-bezier(.2,.8,.2,1) (Stripe-style).

Dark Mode

• [data-theme="dark"] root attribute — ცვლის ყველა CSS ვარიაბლს.
• ჩართული ყველა გვერდზე — Landing, Admin, Public Menu, Auth, Onboarding.
• Kitchen (KDS) — dark by design (რაც უკვე იყო) — შენარჩუნებულია.
• Toggle — ღილაკი ზედა მარჯვნივ, ავტომატურად ჩნდება. Persists localStorage.
• Respects prefers-color-scheme ინიციალურად.

Components (all in Design System page)

• Buttons — primary, accent, ghost, soft, brand-soft, danger, xs/sm/md/lg/xl, icon, group
• Forms — text, email, password, number, search, tel, select, textarea, checkbox, radio, segmented
• Cards — default, elevated, interactive, inset
• Tables, tabs, badges (7 variants), alerts (4 variants)
• Toast (JS API — window.qrToast(msg, opts)), modal, drawer
• Skeleton, spinner, progress dots
• Empty state (with CTA), error state, loading state
• Navigation — nav, aside, tabs, breadcrumbs, mobile bottom nav
• Tooltip (CSS-only, data-tip attribute)

📐 გახსენი Design System →

02ყველა Screen — 29

• Public (5): Landing, Pricing, Contact, Public Menu, Order Status
• Authentication (4): Login, Signup, Forgot Password, Reset Password
• Onboarding (1): 8-step wizard
• Dashboard (6): Overview, Analytics, Products, Categories, Tables/QR, Themes
• Operations (3): Orders Kanban, KDS (Kitchen), Order Settings
• Billing (3): Subscription, Checkout, Billing History
• Legal & Support (4): Terms, Privacy, Refund, Support
• System (3): Design System, Deliverables, Platform Admin

🗺 გახსენი Prototype Hub →

03User Flows — 8 კრიტიკული

• Flow 01 · Onboarding: Landing → Signup → Onboarding wizard → Dashboard
• Flow 02 · Customer Order: QR → Public Menu → კალათა → Checkout → Order Status
• Flow 03 · Kitchen: Orders Kanban → KDS → დაწყება → მზადაა → დასრულებული
• Flow 04 · Menu Management: Products → + ახალი → 3-ენოვანი ფორმა → შენახვა → ცოცხალი მენიუ
• Flow 05 · Upgrade: Subscription → Pricing → TBC Checkout → ახალი პაკეტი
• Flow 06 · Theme change: ვიზუალი → 6 თემა → Live Preview → გამოყენება
• Flow 07 · Table QR: Tables → + დამატება → QR generation → PNG → ბეჭდვა
• Flow 08 · Language switch: KA / EN / RU (მენიუზე, ცოცხლად)

Prototype Interactivity

• ყველა flow მუშაობს ცოცხლად — localStorage-ს იყენებს (არსებული data.js).
• Prototype Tour — 9-ნაბიჯიანი intro walkthrough (window.qrStartTour()).
• Reset Demo — ერთი კლიკით ცარიელი მდგომარეობის აღდგენა.
• Toast API — window.qrToast(msg, {type: 'success'}).

04Responsive Layouts

ვერიფიცირებული ყველა კრიტიკული breakpoint-ზე.

• Mobile 375/390/414px — 1 კოლონა ყველგან, bottom nav ჩართული admin-ისთვის, hamburger menu landing-ისთვის, cart FAB public menu-ს.
• Tablet 768/1024px — 2-3 კოლონა, sidebar collapses to drawer, KDS optimized.
• Desktop 1280/1440/1920px — სრული ხედი, sidebar + main, ყველა component-ი მაქსიმალურ სიგანეზე capped 1200-1400px content-ისთვის.
• Touch targets — 44×44px მინიმალური მობილურზე. Focus rings 4px.
• No horizontal scroll — verified.

056 Menu Themes

თითოეული თემა — ცალკე CSS class-ი (.theme-modern …), მოხდომადი მთელი მენიუზე CSS ვარიაბლების overriding-ით.

• Modern — Deep Emerald, off-white, clean sans. Default. კაფე, თანამედროვე რესტორანი.
• Elegant — Playfair Display serif, კრემისფერი და ოქრო. Fine dining, ღვინის ბარები.
• Luxury — შავი და ოქრო, uppercase headers, narrow radius. Chef's tables, upscale.
• Minimal — Pure white and black, ბრტყელი კუთხე. მოდერნისტული, sleek.
• Dark — Night mode, warm amber accents. Cocktail bars, rooftops.
• Cafe — Terracotta, cream, warm radius. კაფე, საკონდიტრო, bakery.

🎨 ნახე Themes Gallery →

06Public QR Menu Experience

• Mobile-first — ოპტიმიზებული 375/390/414px viewport-ისთვის.
• Sticky category strip — chip-navigation ზედა.
• Search bar — მყისვე ფილტრი.
• Language switcher — KA/EN/RU ერთი კლიკით.
• Cart FAB — მუდმივი მარჯვნივ, ბატშაქრით.
• Cart drawer — right-side slide, live totals, quantity controls.
• PWA-ready — cached menu-ს გახდომა offline-ს არსებული ინფრასტრუქტურით.
• Real-time updates — BroadcastChannel-ით (menu changes hit customers live).

07Dashboard Experience

• Sticky sidebar — 4 groupped nav (Main, Menu, Business, Resources).
• Overview — 4 KPI cards (revenue primary), recent orders table, 30-day chart, quick actions.
• Full Analytics — line chart, donut, ranking, category performance, peak hours bars, table performance, traffic sources, device breakdown, language mix.
• Mobile bottom nav — 5 core sections (Overview / Orders / Kitchen / Tables / Analytics), ავტომატურად ჩნდება <720px.
• Order Kanban — 5 statuses (new/preparing/ready/completed/cancelled), realtime, sound alerts.
• KDS (Kitchen) — dark-by-design, tablet-optimized, urgency timer (green/amber/red), large touch controls.

08Preserved Functionality

წარმოებული SaaS აპლიკაციის core architecture უცვლელი დარჩა. მხოლოდ UI/UX გაუმჯობესდა.

Business Logic (JS layer)

• assets/data.js — localStorage layer, business/tables/orders/settings, seedDemo, Realtime (BroadcastChannel + storage events), STATUSES, playNewOrderSound
• assets/cart.js — cart CRUD, order submission, categories rendering, live search
• assets/billing.js — PLANS definitions, subscription lifecycle, usage tracking, coupons, trial days, invoice generation, provider abstraction
• assets/provider.js — payment provider abstraction (simulated / stripe / tbc / bog)
• assets/qrgen.js — QR code SVG generation, PNG conversion
• assets/config.js — URL builders, environment config, appUrl/shortenerPath/apiBase
• assets/config-inject.js — runtime config injection

Server-side (Node.js reference)

• server/index.js, server/tbc.js, server/routes-domain.js, server/sql/schema.sql
• reference-server.js — reference implementation
• Env files: .env.local, .env.staging, .env.production, .env.example
• Docs: PAYMENTS.md, DOMAIN_MIGRATION.md

Data structures & APIs (untouched)

• Business slugs, table IDs, order numbers — schemas untouched
• QR code URL structure — slug + table pattern (domain-agnostic)
• Realtime channel names — qr-orders-{slug}
• Subscription status states — trialing / active / past_due / cancelled / expired
• Payment providers list — simulated / stripe / tbc / bog
• Plans structure — free / starter / business / pro

Backend Integration Checklist (setup ნაბიჯები production-ისთვის)

UI მზადაა ყველა ფუნქციისთვის — შემდეგი backend integrations უნდა გაქტიურდეს official domain-ზე გადასვლისას:

• TBC / BOG / Stripe payment — Setup mode UI მზადაა, საჭიროა credentials-ის დაკავშირება env-ში.
• Transactional email — Signup, reset password, order confirmations, invoices — SMTP/SendGrid credentials-ის დაკავშირება.
• SMS OTP (optional) — Twilio ან ლოკალური provider-ის ინტეგრაცია.
• PDF invoice generation — server-side rendering (Puppeteer / weasyprint).
• Multi-branch data model — Pro plan-ის ფუნქცია, საჭიროებს schema extension.
• Custom domain routing — თითოეული ბიზნესისთვის subdomain (მაგ.: cafe.qrmenu.ge).

09File Manifest

ახალი ფაილები (5)

ცვლილებული (Modified) ფაილები

უცვლელი (Unchanged) ფაილები

QR MENU · Deliverables · Generated 28 August 2026