From e63de8584d209328267375ab9e5e587c4938c03f Mon Sep 17 00:00:00 2001 From: AyrisAI Date: Thu, 20 Aug 2026 18:28:23 +0300 Subject: [PATCH] style(mobile): render 1:1 pixel-perfect Urban Burger tabletop plaque layout --- apps/mobile/src/app/menu/qr.tsx | 215 +++++++++++++++++++------------ packages/shared/src/qr-stands.ts | 6 + 2 files changed, 140 insertions(+), 81 deletions(-) diff --git a/apps/mobile/src/app/menu/qr.tsx b/apps/mobile/src/app/menu/qr.tsx index d28c825..63bc456 100644 --- a/apps/mobile/src/app/menu/qr.tsx +++ b/apps/mobile/src/app/menu/qr.tsx @@ -28,7 +28,7 @@ interface QrResponse { export default function QrScreen() { const [active, setActive] = useState(null); - const [restaurantName, setRestaurantName] = useState("RESTORAN"); + const [restaurantName, setRestaurantName] = useState("THE URBAN BURGER"); const [qr, setQr] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -127,7 +127,7 @@ export default function QrScreen() { const catsHtml = displayCategories .map( (c, i) => - `
${c}
${ + `
${c}
${ i < displayCategories.length - 1 ? '
' : "" @@ -146,51 +146,65 @@ export default function QrScreen() { margin: 0; padding: 0; width: 148mm; height: 210mm; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - background: ${activePreset.bgGradient}; + background: #1c3e2b; display: flex; align-items: center; justify-content: center; -webkit-print-color-adjust: exact; } .plaque { - width: 120mm; height: 180mm; - background: ${activePreset.plaqueBg}; - border: 3px solid ${activePreset.borderAccent}; - border-radius: 24px; - padding: 20px; box-sizing: border-box; + width: 125mm; height: 185mm; + background: ${activePreset.plaqueColor}; + border-radius: 32px; + padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; color: ${activePreset.headerText}; position: relative; + box-shadow: 0 20px 50px rgba(0,0,0,0.5); + } + .inner-border { + position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; + border: 1px solid ${activePreset.borderAccent}; + border-radius: 24px; pointer-events: none; } .badge { border: 2px solid ${activePreset.logoBorder}; background: ${activePreset.logoBg}; color: ${activePreset.accentText}; - padding: 6px 16px; border-radius: 12px; + padding: 6px 18px; border-radius: 12px; font-weight: 900; font-size: 16px; letter-spacing: 2px; - margin-bottom: 12px; + margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px; } .title { - font-size: 20px; font-weight: 900; letter-spacing: 1px; - line-height: 1.1; margin-bottom: 16px; + font-size: 22px; font-weight: 900; letter-spacing: 1px; + line-height: 1.1; margin-bottom: 18px; color: #ffffff; } .qr-box { background: ${activePreset.qrBg}; - padding: 14px; border-radius: 20px; - display: inline-block; margin-bottom: 16px; + padding: 16px; border-radius: 24px; + display: inline-block; margin-bottom: 14px; + box-shadow: 0 10px 25px rgba(0,0,0,0.2); } - .qr-img { width: 150px; height: 150px; display: block; } - .sub { font-size: 11px; opacity: 0.8; margin-bottom: 12px; color: ${activePreset.subText}; } - .cats { font-size: 13px; font-weight: 800; letter-spacing: 2px; width: 80%; margin: 0 auto; } + .qr-img { width: 160px; height: 160px; display: block; border-radius: 8px; } + .sub { font-size: 12px; opacity: 0.9; margin-bottom: 16px; color: ${activePreset.subText}; font-weight: 600; } + .footer-wrap { width: 100%; position: relative; } + .icon-left { position: absolute; left: 10px; bottom: 15px; color: ${activePreset.accentText}; font-size: 28px; } + .icon-right { position: absolute; right: 10px; bottom: 15px; color: ${activePreset.accentText}; font-size: 28px; } + .cats { font-size: 14px; font-weight: 900; letter-spacing: 2px; width: 75%; margin: 0 auto; color: #ffffff; }
-
${restTitle}
-
DİJİTAL MENÜ
KAMERANIZLA TARATIN
+
+
🔥 ${restTitle}
+
DIGITAL MENU
SCAN TO ORDER
-
Telefonunuzun kamerasını doğrultun
-
${catsHtml}
+
Use your phone's camera
+
+
🍔
+
🥤
+
${catsHtml}
+
@@ -298,7 +312,7 @@ export default function QrScreen() { width: 14, height: 14, borderRadius: 7, - backgroundColor: preset.qrColor, + backgroundColor: preset.plaqueColor, borderWidth: 1, borderColor: "rgba(255,255,255,0.4)", }} @@ -322,89 +336,114 @@ export default function QrScreen() { style={{ alignItems: "center", justifyContent: "center", - padding: 16, - borderRadius: 24, - backgroundColor: "#18181B", + padding: 18, + borderRadius: 28, + backgroundColor: "#1c3e2b", // Ambient forest green tabletop environment backdrop marginBottom: 20, shadowColor: "#000", - shadowOffset: { width: 0, height: 6 }, - shadowOpacity: 0.15, - shadowRadius: 16, - elevation: 6, + shadowOffset: { width: 0, height: 10 }, + shadowOpacity: 0.35, + shadowRadius: 20, + elevation: 8, }} > - {/* Top Restaurant Badge */} + {/* Inner Border Accent Line */} + + {/* Top Restaurant Badge with Flame Icon */} + {restaurantName.toUpperCase()} + {/* Title Callout */} - DİJİTAL MENÜ{"\n"} - KAMERANIZLA TARATIN + DIGITAL MENU{"\n"} + SCAN TO ORDER {/* Auto Placed QR Code Container */} @@ -413,42 +452,56 @@ export default function QrScreen() { - Telefonunuzun kamerasını doğrultun + Use your phone's camera - {/* Category Quick Preview List */} - - {displayCategories.map((cat, idx) => ( - - - {cat} - - {idx < displayCategories.length - 1 && ( - + {/* Floating Left Line Icon (Burger) */} + + + + + {/* Floating Right Line Icon (Drink) */} + + + + + {/* Center Category Stack */} + + {displayCategories.map((cat, idx) => ( + + - )} - - ))} + > + {cat} + + {idx < displayCategories.length - 1 && ( + + )} + + ))} + diff --git a/packages/shared/src/qr-stands.ts b/packages/shared/src/qr-stands.ts index 1954f1a..f4d4376 100644 --- a/packages/shared/src/qr-stands.ts +++ b/packages/shared/src/qr-stands.ts @@ -4,6 +4,7 @@ export interface QrStandPreset { categoryName: string; bgGradient: string; plaqueBg: string; + plaqueColor: string; borderAccent: string; qrBg: string; qrColor: string; @@ -23,6 +24,7 @@ export const QR_STAND_PRESETS: Record = { categoryName: "Burger & Fast Casual", bgGradient: "radial-gradient(circle at 50% 50%, #1a3a29 0%, #0e2016 100%)", plaqueBg: "linear-gradient(135deg, #a64d2a 0%, #8e3f20 100%)", + plaqueColor: "#a64d2a", borderAccent: "rgba(255, 255, 255, 0.15)", qrBg: "#f8f3eb", qrColor: "#a64d2a", @@ -40,6 +42,7 @@ export const QR_STAND_PRESETS: Record = { categoryName: "Fine Dining & Steakhouse", bgGradient: "radial-gradient(circle at 50% 50%, #18181b 0%, #09090b 100%)", plaqueBg: "linear-gradient(135deg, #1c1917 0%, #0c0a09 100%)", + plaqueColor: "#1c1917", borderAccent: "rgba(200, 169, 107, 0.4)", qrBg: "#faf8f5", qrColor: "#1c1917", @@ -57,6 +60,7 @@ export const QR_STAND_PRESETS: Record = { categoryName: "Kafe, Fırın & Kahve", bgGradient: "radial-gradient(circle at 50% 50%, #e7e5e4 0%, #d6d3d1 100%)", plaqueBg: "linear-gradient(135deg, #ffffff 0%, #f5f5f4 100%)", + plaqueColor: "#ffffff", borderAccent: "rgba(0, 0, 0, 0.08)", qrBg: "#18181b", qrColor: "#ffffff", @@ -74,6 +78,7 @@ export const QR_STAND_PRESETS: Record = { categoryName: "Pizzeria & İtalyan", bgGradient: "radial-gradient(circle at 50% 50%, #3f1212 0%, #240a0a 100%)", plaqueBg: "linear-gradient(135deg, #8b1e1e 0%, #6e1616 100%)", + plaqueColor: "#8b1e1e", borderAccent: "rgba(255, 235, 200, 0.2)", qrBg: "#fffbeb", qrColor: "#8b1e1e", @@ -91,6 +96,7 @@ export const QR_STAND_PRESETS: Record = { categoryName: "Bar, Pub & Nightlife", bgGradient: "radial-gradient(circle at 50% 50%, #0f172a 0%, #020617 100%)", plaqueBg: "linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%)", + plaqueColor: "#1e1b4b", borderAccent: "rgba(99, 102, 241, 0.4)", qrBg: "#e0e7ff", qrColor: "#312e81",