style(mobile): render 1:1 pixel-perfect Urban Burger tabletop plaque layout
This commit is contained in:
AyrisAI
+134
-81
@@ -28,7 +28,7 @@ interface QrResponse {
|
||||
|
||||
export default function QrScreen() {
|
||||
const [active, setActive] = useState<ActiveRestaurant | null>(null);
|
||||
const [restaurantName, setRestaurantName] = useState<string>("RESTORAN");
|
||||
const [restaurantName, setRestaurantName] = useState<string>("THE URBAN BURGER");
|
||||
const [qr, setQr] = useState<QrResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -127,7 +127,7 @@ export default function QrScreen() {
|
||||
const catsHtml = displayCategories
|
||||
.map(
|
||||
(c, i) =>
|
||||
`<div style="padding: 4px 0;">${c}</div>${
|
||||
`<div style="padding: 5px 0;">${c}</div>${
|
||||
i < displayCategories.length - 1
|
||||
? '<div style="height: 1px; background: ' + activePreset.dividerColor + '; margin: 2px 0;"></div>'
|
||||
: ""
|
||||
@@ -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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="plaque">
|
||||
<div class="badge">${restTitle}</div>
|
||||
<div class="title">DİJİTAL MENÜ<br><span style="letter-spacing:2px;">KAMERANIZLA TARATIN</span></div>
|
||||
<div class="inner-border"></div>
|
||||
<div class="badge">🔥 ${restTitle}</div>
|
||||
<div class="title">DIGITAL MENU<br><span style="letter-spacing:2px;">SCAN TO ORDER</span></div>
|
||||
<div class="qr-box">
|
||||
<img class="qr-img" src="${qrImageUri}" />
|
||||
</div>
|
||||
<div class="sub">Telefonunuzun kamerasını doğrultun</div>
|
||||
<div class="cats">${catsHtml}</div>
|
||||
<div class="sub">Use your phone's camera</div>
|
||||
<div class="footer-wrap">
|
||||
<div class="icon-left">🍔</div>
|
||||
<div class="icon-right">🥤</div>
|
||||
<div class="cats">${catsHtml}</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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,
|
||||
}}
|
||||
>
|
||||
<ViewShot ref={viewShotRef} options={{ format: "png", quality: 1.0 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 300,
|
||||
minHeight: 480,
|
||||
borderRadius: 28,
|
||||
padding: 24,
|
||||
minHeight: 520,
|
||||
borderRadius: 36,
|
||||
padding: 22,
|
||||
alignItems: "center",
|
||||
backgroundColor: activePreset.qrColor === "#ffffff" ? "#18181b" : activePreset.qrColor,
|
||||
backgroundColor: activePreset.plaqueColor,
|
||||
borderWidth: 2,
|
||||
borderColor: activePreset.borderAccent,
|
||||
borderColor: "rgba(0,0,0,0.25)",
|
||||
position: "relative",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 15 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 30,
|
||||
}}
|
||||
>
|
||||
{/* Top Restaurant Badge */}
|
||||
{/* Inner Border Accent Line */}
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 1.5,
|
||||
position: "absolute",
|
||||
top: 10,
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
borderRadius: 28,
|
||||
borderWidth: 1,
|
||||
borderColor: activePreset.borderAccent,
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Top Restaurant Badge with Flame Icon */}
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 2,
|
||||
borderColor: activePreset.logoBorder,
|
||||
backgroundColor: activePreset.logoBg,
|
||||
paddingHorizontal: 14,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 10,
|
||||
marginBottom: 14,
|
||||
borderRadius: 12,
|
||||
marginBottom: 16,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: activePreset.accentText,
|
||||
fontSize: 15,
|
||||
fontSize: 16,
|
||||
fontWeight: "900",
|
||||
letterSpacing: 1,
|
||||
letterSpacing: 1.5,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{restaurantName.toUpperCase()}
|
||||
</Text>
|
||||
<Ionicons name="flame" size={16} color={activePreset.accentText} />
|
||||
</View>
|
||||
|
||||
{/* Title Callout */}
|
||||
<Text
|
||||
style={{
|
||||
color: activePreset.headerText,
|
||||
fontSize: 18,
|
||||
fontSize: 22,
|
||||
fontWeight: "900",
|
||||
textAlign: "center",
|
||||
lineHeight: 22,
|
||||
marginBottom: 16,
|
||||
lineHeight: 25,
|
||||
marginBottom: 18,
|
||||
letterSpacing: 0.5,
|
||||
}}
|
||||
>
|
||||
DİJİTAL MENÜ{"\n"}
|
||||
<Text style={{ letterSpacing: 1 }}>KAMERANIZLA TARATIN</Text>
|
||||
DIGITAL MENU{"\n"}
|
||||
<Text style={{ letterSpacing: 1.5 }}>SCAN TO ORDER</Text>
|
||||
</Text>
|
||||
|
||||
{/* Auto Placed QR Code Container */}
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: activePreset.qrBg,
|
||||
padding: 12,
|
||||
borderRadius: 20,
|
||||
padding: 14,
|
||||
borderRadius: 24,
|
||||
marginBottom: 14,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 12,
|
||||
elevation: 5,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(0,0,0,0.1)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: `data:image/png;base64,${qr.pngBase64}` }}
|
||||
style={{ width: 170, height: 170, borderRadius: 8 }}
|
||||
style={{ width: 175, height: 175, borderRadius: 10 }}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</View>
|
||||
@@ -413,42 +452,56 @@ export default function QrScreen() {
|
||||
<Text
|
||||
style={{
|
||||
color: activePreset.subText,
|
||||
fontSize: 11,
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
marginBottom: 14,
|
||||
marginBottom: 16,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Telefonunuzun kamerasını doğrultun
|
||||
Use your phone's camera
|
||||
</Text>
|
||||
|
||||
{/* Category Quick Preview List */}
|
||||
<View style={{ width: "85%", alignItems: "center", gap: 3 }}>
|
||||
{displayCategories.map((cat, idx) => (
|
||||
<View key={idx} style={{ width: "100%", alignItems: "center" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: activePreset.headerText,
|
||||
fontSize: 12,
|
||||
fontWeight: "800",
|
||||
letterSpacing: 1.5,
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
{cat}
|
||||
</Text>
|
||||
{idx < displayCategories.length - 1 && (
|
||||
<View
|
||||
{/* Category Quick Preview List Flanked by Icons */}
|
||||
<View style={{ width: "100%", position: "relative", alignItems: "center" }}>
|
||||
{/* Floating Left Line Icon (Burger) */}
|
||||
<View style={{ position: "absolute", left: 0, bottom: 8, opacity: 0.9 }}>
|
||||
<Ionicons name="fast-food-outline" size={26} color={activePreset.accentText} />
|
||||
</View>
|
||||
|
||||
{/* Floating Right Line Icon (Drink) */}
|
||||
<View style={{ position: "absolute", right: 0, bottom: 8, opacity: 0.9 }}>
|
||||
<Ionicons name="wine-outline" size={26} color={activePreset.accentText} />
|
||||
</View>
|
||||
|
||||
{/* Center Category Stack */}
|
||||
<View style={{ width: "68%", alignItems: "center", gap: 2 }}>
|
||||
{displayCategories.map((cat, idx) => (
|
||||
<View key={idx} style={{ width: "100%", alignItems: "center" }}>
|
||||
<Text
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 1,
|
||||
backgroundColor: activePreset.dividerColor,
|
||||
marginVertical: 2,
|
||||
color: activePreset.headerText,
|
||||
fontSize: 13,
|
||||
fontWeight: "900",
|
||||
letterSpacing: 2,
|
||||
textTransform: "uppercase",
|
||||
paddingVertical: 2,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
>
|
||||
{cat}
|
||||
</Text>
|
||||
{idx < displayCategories.length - 1 && (
|
||||
<View
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 1,
|
||||
backgroundColor: activePreset.dividerColor,
|
||||
marginVertical: 2,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ViewShot>
|
||||
|
||||
Reference in New Issue
Block a user