ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): render exact SVG vector templates in mobile QR stand screen

Browse Source
This commit is contained in:
AyrisAI
2026-08-20 23:43:26 +03:00
parent f768b92873
commit 01c9f5f195
5 changed files with 230 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/package.json
+1
View File
@@ -35,6 +35,7 @@
"react-native-purchases": "^8.2.0",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-svg": "^15.15.5",
"react-native-url-polyfill": "^2.0.0",
"react-native-view-shot": "^5.1.1"
},
apps/mobile/src/app/menu/qr.tsx
+128 -302
View File
@@ -15,9 +15,11 @@ import * as Clipboard from "expo-clipboard";
import ViewShot from "react-native-view-shot";
import * as Sharing from "expo-sharing";
import * as Print from "expo-print";
import { SvgXml } from "react-native-svg";
import { QR_STAND_PRESETS, type QrStandPreset } from "@menulio/shared";
import { api } from "@/lib/api";
import { getActiveRestaurant, type ActiveRestaurant } from "@/lib/active-restaurant";
import { MOBILE_SVG_TEMPLATES } from "@/lib/svg-templates";
interface QrResponse {
id: string;
@@ -28,13 +30,12 @@ interface QrResponse {
export default function QrScreen() {
const [active, setActive] = useState<ActiveRestaurant | null>(null);
const [restaurantName, setRestaurantName] = useState<string>("THE URBAN BURGER");
const [restaurantName, setRestaurantName] = useState<string>("Gourmet Bistro");
const [qr, setQr] = useState<QrResponse | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [copied, setCopied] = useState(false);
const [selectedKey, setSelectedKey] = useState<string>("qr-4");
const [categories, setCategories] = useState<string[]>([]);
const [exportingPng, setExportingPng] = useState(false);
const [exportingPdf, setExportingPdf] = useState(false);
@@ -42,6 +43,7 @@ export default function QrScreen() {
const viewShotRef = useRef<any>(null);
const activePreset: QrStandPreset = (QR_STAND_PRESETS[selectedKey] || Object.values(QR_STAND_PRESETS)[0])!;
const currentSvgRaw = MOBILE_SVG_TEMPLATES[selectedKey] || MOBILE_SVG_TEMPLATES["qr-4"] || Object.values(MOBILE_SVG_TEMPLATES)[0] || "";
useEffect(() => {
(async () => {
@@ -62,18 +64,6 @@ export default function QrScreen() {
} catch {
// fallback
}
// Fetch categories for preview
if (activeRest.menuId) {
try {
const menuRes = await api.get<{ categories: { name: string }[] }>(`/menus/${activeRest.menuId}`);
if (menuRes?.categories?.length) {
setCategories(menuRes.categories.map((c) => c.name));
}
} catch {
// ignore fallback
}
}
} catch (err) {
setError(err instanceof Error ? err.message : "QR oluşturulamadı");
} finally {
@@ -82,9 +72,6 @@ export default function QrScreen() {
})();
}, []);
const displayCategories =
categories.length > 0 ? categories.slice(0, 4) : (activePreset.categories || []);
async function handleCopy() {
if (!qr?.targetUrl) return;
await Clipboard.setStringAsync(qr.targetUrl);
@@ -120,21 +107,19 @@ export default function QrScreen() {
}
async function handleExportPdf() {
if (!qr || !active) return;
if (!qr || !active || !currentSvgRaw) return;
setExportingPdf(true);
try {
const restTitle = restaurantName.toUpperCase();
const qrImageUri = `data:image/png;base64,${qr.pngBase64}`;
const catsHtml = displayCategories
.map(
(c, i) =>
`<div style="padding: 5px 0;">${c}</div>${
i < displayCategories.length - 1
? '<div style="height: 1px; background: ' + activePreset.dividerColor + '; margin: 2px 0;"></div>'
: ""
}`,
)
.join("");
// Inject QR code directly into the SVG for print-ready A5 PDF
const svgWithQr = currentSvgRaw.replace(
/<g id="qr-placeholder"[^>]*>[\s\S]*?<\/g>/,
`<g id="qr-placeholder" transform="translate(90, 215)">
<rect width="220" height="220" rx="20" fill="#FFFFFF" stroke="#E4E4E7" stroke-width="2"/>
<image href="${qrImageUri}" x="10" y="10" width="200" height="200" preserveAspectRatio="xMidYMid meet" />
</g>`
);
const htmlContent = `
<!DOCTYPE html>
@@ -143,69 +128,30 @@ export default function QrScreen() {
<meta charset="utf-8"/>
<style>
@page { size: A5 portrait; margin: 0; }
* { box-sizing: border-box; }
body {
margin: 0; padding: 0; width: 148mm; height: 210mm;
box-sizing: border-box;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #1c3e2b;
display: flex; align-items: center; justify-content: center;
background: #000000;
-webkit-print-color-adjust: exact;
}
.plaque {
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);
.svg-wrap {
width: 140mm;
height: 200mm;
display: flex;
align-items: center;
justify-content: center;
}
.inner-border {
position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
border: 1px solid ${activePreset.borderAccent};
border-radius: 24px; pointer-events: none;
svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.badge {
border: 2px solid ${activePreset.logoBorder};
background: ${activePreset.logoBg};
color: ${activePreset.accentText};
padding: 6px 18px; border-radius: 12px;
font-weight: 900; font-size: 16px; letter-spacing: 2px;
margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
}
.title {
font-size: 22px; font-weight: 900; letter-spacing: 1px;
line-height: 1.1; margin-bottom: 18px; color: #ffffff;
}
.qr-box {
background: ${activePreset.qrBg};
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: 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="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">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 class="svg-wrap">
${svgWithQr}
</div>
</body>
</html>
@@ -255,13 +201,13 @@ export default function QrScreen() {
}
return (
<ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: "#FAF8F5", paddingVertical: 20 }}>
<ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: "#0C0C0E", paddingVertical: 20 }}>
<View style={{ width: "100%", maxWidth: 440, alignSelf: "center", paddingHorizontal: 20 }}>
{/* Header Badge */}
<View
style={{
alignSelf: "center",
backgroundColor: "#F3EDE2",
backgroundColor: "rgba(212, 175, 55, 0.15)",
paddingHorizontal: 14,
paddingVertical: 6,
borderRadius: 99,
@@ -269,22 +215,24 @@ export default function QrScreen() {
flexDirection: "row",
alignItems: "center",
gap: 6,
borderWidth: 1,
borderColor: "rgba(212, 175, 55, 0.3)",
}}
>
<Ionicons name="qr-code-outline" size={15} color="#926E27" />
<Text style={{ color: "#926E27", fontSize: 12, fontWeight: "700" }}>
<Ionicons name="qr-code-outline" size={15} color="#D4AF37" />
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
MASA QR STANT JENERATÖRÜ
</Text>
</View>
<Text style={{ fontSize: 24, fontWeight: "800", color: "#1C1917", marginBottom: 4, textAlign: "center" }}>
<Text style={{ fontSize: 24, fontWeight: "800", color: "#FFFFFF", marginBottom: 4, textAlign: "center" }}>
Masa Stant Tasarımları
</Text>
<Text style={{ fontSize: 13, color: "#78716C", textAlign: "center", marginBottom: 20, lineHeight: 18 }}>
<Text style={{ fontSize: 13, color: "#A1A1AA", textAlign: "center", marginBottom: 20, lineHeight: 18 }}>
Şablon seçin; QR kodunuz otomatik yerleşsin. Baskıya hazır A5 PDF veya PNG olarak indirin.
</Text>
{/* Horizontal Theme Selector (rendered only if multiple themes exist) */}
{/* Horizontal Theme Selector */}
{Object.values(QR_STAND_PRESETS).length > 1 && (
<ScrollView
horizontal
@@ -298,9 +246,9 @@ export default function QrScreen() {
key={preset.key}
onPress={() => setSelectedKey(preset.key)}
style={{
backgroundColor: isSelected ? "#1C1917" : "#FFFFFF",
backgroundColor: isSelected ? "#D4AF37" : "#1A1A1E",
borderWidth: 1.5,
borderColor: isSelected ? "#1C1917" : "#E7E5E4",
borderColor: isSelected ? "#D4AF37" : "#2B2B32",
borderRadius: 14,
paddingHorizontal: 16,
paddingVertical: 10,
@@ -314,7 +262,7 @@ export default function QrScreen() {
width: 14,
height: 14,
borderRadius: 7,
backgroundColor: preset.plaqueColor,
backgroundColor: preset.plaqueColor || "#1A1A1E",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.4)",
}}
@@ -323,7 +271,7 @@ export default function QrScreen() {
style={{
fontSize: 13,
fontWeight: "700",
color: isSelected ? "#FFFFFF" : "#1C1917",
color: isSelected ? "#0C0C0E" : "#FFFFFF",
}}
>
{preset.name}
@@ -339,173 +287,61 @@ export default function QrScreen() {
style={{
alignItems: "center",
justifyContent: "center",
padding: 18,
padding: 16,
borderRadius: 28,
backgroundColor: "#1c3e2b", // Ambient forest green tabletop environment backdrop
backgroundColor: "#18181B",
marginBottom: 20,
shadowColor: "#000",
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.35,
shadowOpacity: 0.5,
shadowRadius: 20,
elevation: 8,
borderWidth: 1,
borderColor: "rgba(255,255,255,0.08)",
}}
>
<ViewShot ref={viewShotRef} options={{ format: "png", quality: 1.0 }}>
<View
style={{
width: 300,
minHeight: 520,
borderRadius: 36,
padding: 22,
alignItems: "center",
backgroundColor: activePreset.plaqueColor,
borderWidth: 2,
borderColor: "rgba(0,0,0,0.25)",
height: 487.5,
borderRadius: 24,
overflow: "hidden",
position: "relative",
shadowColor: "#000",
shadowOffset: { width: 0, height: 15 },
shadowOpacity: 0.4,
shadowRadius: 30,
backgroundColor: "#0C0C0E",
}}
>
{/* Inner Border Accent Line */}
{/* Exact Vector SVG Artwork */}
{currentSvgRaw ? (
<SvgXml xml={currentSvgRaw} width={300} height={487.5} />
) : null}
{/* Centered QR Code Box Overlay */}
<View
style={{
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: 16,
paddingVertical: 6,
borderRadius: 12,
marginBottom: 16,
top: 161.25, // (215 / 650) * 487.5
left: 67.5, // (90 / 400) * 300
width: 165, // (220 / 400) * 300
height: 165,
borderRadius: 15,
backgroundColor: "#FFFFFF",
padding: 8,
alignItems: "center",
flexDirection: "row",
gap: 6,
}}
>
<Text
style={{
color: activePreset.accentText,
fontSize: 16,
fontWeight: "900",
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: 22,
fontWeight: "900",
textAlign: "center",
lineHeight: 25,
marginBottom: 18,
letterSpacing: 0.5,
}}
>
DIGITAL MENU{"\n"}
<Text style={{ letterSpacing: 1.5 }}>SCAN TO ORDER</Text>
</Text>
{/* Auto Placed QR Code Container */}
<View
style={{
backgroundColor: activePreset.qrBg,
padding: 14,
borderRadius: 24,
marginBottom: 14,
justifyContent: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.2,
shadowRadius: 12,
elevation: 5,
borderWidth: 1,
borderColor: "rgba(0,0,0,0.1)",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.25,
shadowRadius: 8,
elevation: 4,
}}
>
<Image
source={{ uri: `data:image/png;base64,${qr.pngBase64}` }}
style={{ width: 175, height: 175, borderRadius: 10 }}
style={{ width: "100%", height: "100%", borderRadius: 8 }}
resizeMode="contain"
/>
</View>
{/* Instructional Subtext */}
<Text
style={{
color: activePreset.subText,
fontSize: 12,
fontWeight: "600",
marginBottom: 16,
textAlign: "center",
}}
>
Use your phone's camera
</Text>
{/* 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={{
color: activePreset.headerText,
fontSize: 13,
fontWeight: "900",
letterSpacing: 2,
textTransform: "uppercase",
paddingVertical: 2,
}}
>
{cat}
</Text>
{idx < displayCategories.length - 1 && (
<View
style={{
width: "100%",
height: 1,
backgroundColor: activePreset.dividerColor,
marginVertical: 2,
}}
/>
)}
</View>
))}
</View>
</View>
</View>
</ViewShot>
</View>
@@ -517,7 +353,7 @@ export default function QrScreen() {
onPress={handleExportPdf}
disabled={exportingPdf}
style={({ pressed }) => ({
backgroundColor: "#C8A96B",
backgroundColor: "#D4AF37",
borderRadius: 14,
padding: 16,
flexDirection: "row",
@@ -525,33 +361,35 @@ export default function QrScreen() {
justifyContent: "center",
gap: 8,
opacity: pressed || exportingPdf ? 0.85 : 1,
shadowColor: "#C8A96B",
shadowColor: "#D4AF37",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 4,
shadowRadius: 8,
elevation: 3,
})}
>
{exportingPdf ? (
<ActivityIndicator color="#FFFFFF" />
<ActivityIndicator size="small" color="#0C0C0E" />
) : (
<>
<Ionicons name="document-text-outline" size={18} color="#FFFFFF" />
<Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "800" }}>
A5 Baskı PDF Dosyası İndir / Paylaş
<Ionicons name="document-text-outline" size={20} color="#0C0C0E" />
<Text style={{ color: "#0C0C0E", fontSize: 15, fontWeight: "800" }}>
PDF Olarak İndir (A5 Matbaa Baskı)
</Text>
</>
)}
</Pressable>
{/* PNG Export Button */}
{/* PNG Download Button */}
<Pressable
onPress={handleExportPng}
disabled={exportingPng}
style={({ pressed }) => ({
backgroundColor: "#1C1917",
backgroundColor: "#1A1A1E",
borderWidth: 1.5,
borderColor: "#2B2B32",
borderRadius: 14,
padding: 15,
padding: 16,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
@@ -560,76 +398,64 @@ export default function QrScreen() {
})}
>
{exportingPng ? (
<ActivityIndicator color="#FFFFFF" />
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<>
<Ionicons name="image-outline" size={18} color="#FFFFFF" />
<Ionicons name="image-outline" size={20} color="#FFFFFF" />
<Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "700" }}>
PNG Görsel Olarak Kaydet / Paylaş
PNG Olarak Kaydet / Paylaş
</Text>
</>
)}
</Pressable>
{/* Secondary Quick Share & Copy */}
<View style={{ flexDirection: "row", gap: 10, marginTop: 4 }}>
<Pressable
onPress={handleShareQuick}
style={({ pressed }) => ({
flex: 1,
backgroundColor: "#FFFFFF",
borderWidth: 1,
borderColor: "#E7E5E4",
borderRadius: 12,
padding: 12,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 6,
opacity: pressed ? 0.85 : 1,
})}
>
<Ionicons name="share-social-outline" size={16} color="#1C1917" />
<Text style={{ color: "#1C1917", fontSize: 13, fontWeight: "600" }}>Linki Paylaş</Text>
</Pressable>
<Pressable
onPress={handleCopy}
style={({ pressed }) => ({
flex: 1,
backgroundColor: "#FFFFFF",
borderWidth: 1,
borderColor: "#E7E5E4",
borderRadius: 12,
padding: 12,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 6,
opacity: pressed ? 0.85 : 1,
})}
>
<Ionicons
name={copied ? "checkmark-circle-outline" : "copy-outline"}
size={16}
color={copied ? "#10B981" : "#1C1917"}
/>
<Text style={{ color: copied ? "#10B981" : "#1C1917", fontSize: 13, fontWeight: "600" }}>
{copied ? "Kopyalandı!" : "Linki Kopyala"}
</Text>
</Pressable>
</View>
{/* Back button */}
{/* Direct Link Share Button */}
<Pressable
onPress={() => router.back()}
style={{ padding: 12, alignItems: "center", flexDirection: "row", justifyContent: "center", gap: 6 }}
onPress={handleShareQuick}
style={({ pressed }) => ({
backgroundColor: "#1A1A1E",
borderWidth: 1,
borderColor: "#2B2B32",
borderRadius: 14,
padding: 14,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 8,
opacity: pressed ? 0.85 : 1,
})}
>
<Ionicons name="arrow-back" size={16} color="#78716C" />
<Text style={{ color: "#78716C", fontSize: 14, fontWeight: "600" }}>
Menü Editörüne Dön
<Ionicons name="share-outline" size={18} color="#D4AF37" />
<Text style={{ color: "#D4AF37", fontSize: 14, fontWeight: "700" }}>
Menü Linkini Paylaş
</Text>
</Pressable>
{/* Quick Copy Link Box */}
<Pressable
onPress={handleCopy}
style={{
backgroundColor: "#141417",
borderWidth: 1,
borderColor: "#242429",
borderRadius: 14,
padding: 14,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginTop: 4,
}}
>
<Text style={{ color: "#A1A1AA", fontSize: 12, flex: 1 }} numberOfLines={1}>
{qr.targetUrl}
</Text>
<Ionicons
name={copied ? "checkmark-circle" : "copy-outline"}
size={18}
color={copied ? "#10B981" : "#D4AF37"}
style={{ marginLeft: 8 }}
/>
</Pressable>
</View>
</View>
</ScrollView>
apps/mobile/src/lib/svg-templates.ts
+5
View File
File diff suppressed because one or more lines are too long
pnpm-lock.yaml
Generated
+96
View File
@@ -119,6 +119,9 @@ importers:
react-native-screens:
specifier: ~4.4.0
version: 4.4.0(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1))(react@18.3.1)
react-native-svg:
specifier: ^15.15.5
version: 15.15.5(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1))(react@18.3.1)
react-native-url-polyfill:
specifier: ^2.0.0
version: 2.0.0(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1))
@@ -2323,6 +2326,9 @@ packages:
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
engines: {node: '>=8'}
boolbase@1.0.0:
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
bplist-creator@0.0.7:
resolution: {integrity: sha512-xp/tcaV3T5PCiaY04mXga7o/TE+t95gqeLmADeBI1CvZtdWTbgBt3uLpvh4UWtenKeBhCV6oVxGk38yZr2uYEA==}
@@ -2601,6 +2607,17 @@ packages:
css-line-break@2.1.0:
resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
css-select@5.2.2:
resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
css-tree@1.1.3:
resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
engines: {node: '>=8.0.0'}
css-what@6.2.2:
resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
engines: {node: '>= 6'}
cssesc@3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
@@ -2703,9 +2720,22 @@ packages:
dlv@1.1.3:
resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
dom-serializer@2.0.0:
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
domelementtype@2.3.0:
resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
domhandler@5.0.3:
resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
engines: {node: '>= 4'}
dompurify@3.4.14:
resolution: {integrity: sha512-dVoH9z+MY+C9IilgGCk3YfFqjLi3fChm2OiKJMzh6axrJ5qwxqWaZamgmHrpv22CN/KdbZJuGEGgfQoL00LTdg==}
domutils@3.2.2:
resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
dotenv-expand@11.0.7:
resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
engines: {node: '>=12'}
@@ -2748,6 +2778,10 @@ packages:
end-of-stream@1.4.5:
resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
env-editor@0.4.2:
resolution: {integrity: sha512-ObFo8v4rQJAE59M69QzwloxPZtd33TpYEIjtKD1rrFDcM1Gd7IkDxEBU+HriziN6HSHQnBJi8Dmy+JWkav5HKA==}
engines: {node: '>=8'}
@@ -3646,6 +3680,9 @@ packages:
md5@2.3.0:
resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
mdn-data@2.0.14:
resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
memoize-one@5.2.1:
resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
@@ -3896,6 +3933,9 @@ packages:
resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
engines: {node: '>=8'}
nth-check@2.1.1:
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
nullthrows@1.1.1:
resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
@@ -4292,6 +4332,12 @@ packages:
react: '*'
react-native: '*'
react-native-svg@15.15.5:
resolution: {integrity: sha512-L4go5jA+GWutdJ/JucuN20cjAbMg1HmMtAP+wZ+3JLCf6Jd0bhXQHxciRP/AQm/FlrIEZwkMcHNZP+FXAiic0w==}
peerDependencies:
react: '*'
react-native: '*'
react-native-url-polyfill@2.0.0:
resolution: {integrity: sha512-My330Do7/DvKnEvwQc0WdcBnFPploYKp9CYlefDXzIdEaA+PAhDYllkvGeEroEzvc4Kzzj2O4yVdz8v6fjRvhA==}
peerDependencies:
@@ -7512,6 +7558,8 @@ snapshots:
binary-extensions@2.3.0: {}
boolbase@1.0.0: {}
bplist-creator@0.0.7:
dependencies:
stream-buffers: 2.2.0
@@ -7832,6 +7880,21 @@ snapshots:
dependencies:
utrie: 1.0.2
css-select@5.2.2:
dependencies:
boolbase: 1.0.0
css-what: 6.2.2
domhandler: 5.0.3
domutils: 3.2.2
nth-check: 2.1.1
css-tree@1.1.3:
dependencies:
mdn-data: 2.0.14
source-map: 0.6.1
css-what@6.2.2: {}
cssesc@3.0.0: {}
csstype@3.2.3: {}
@@ -7907,11 +7970,29 @@ snapshots:
dlv@1.1.3: {}
dom-serializer@2.0.0:
dependencies:
domelementtype: 2.3.0
domhandler: 5.0.3
entities: 4.5.0
domelementtype@2.3.0: {}
domhandler@5.0.3:
dependencies:
domelementtype: 2.3.0
dompurify@3.4.14:
optionalDependencies:
'@types/trusted-types': 2.0.7
optional: true
domutils@3.2.2:
dependencies:
dom-serializer: 2.0.0
domelementtype: 2.3.0
domhandler: 5.0.3
dotenv-expand@11.0.7:
dependencies:
dotenv: 16.4.7
@@ -7944,6 +8025,8 @@ snapshots:
dependencies:
once: 1.4.0
entities@4.5.0: {}
env-editor@0.4.2: {}
error-ex@1.3.4:
@@ -8971,6 +9054,8 @@ snapshots:
crypt: 0.0.2
is-buffer: 1.1.6
mdn-data@2.0.14: {}
memoize-one@5.2.1: {}
merge-options@3.0.4:
@@ -9304,6 +9389,10 @@ snapshots:
dependencies:
path-key: 3.1.1
nth-check@2.1.1:
dependencies:
boolbase: 1.0.0
nullthrows@1.1.1: {}
ob1@0.81.5:
@@ -9679,6 +9768,13 @@ snapshots:
react-native: 0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1)
warn-once: 0.1.1
react-native-svg@15.15.5(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1))(react@18.3.1):
dependencies:
css-select: 5.2.2
css-tree: 1.1.3
react: 18.3.1
react-native: 0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1)
react-native-url-polyfill@2.0.0(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1)):
dependencies:
react-native: 0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1)
svg/qr-2.svg
-88
View File
@@ -1,88 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 650" width="400" height="650">
<defs>
<!-- Gold Gradient for luxury accents & borders -->
<linearGradient id="gold-accent" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#F3D382" />
<stop offset="50%" stop-color="#D4AF37" />
<stop offset="100%" stop-color="#AA7C11" />
</linearGradient>
<!-- Card Background Subtle Dark Gradient -->
<linearGradient id="card-surface" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1A1A1E" />
<stop offset="100%" stop-color="#121215" />
</linearGradient>
</defs>
<!-- 1. Backgrounds & Contrast Panels -->
<g id="layer-background">
<!-- Distinct Outer Canvas Background -->
<rect id="bg-canvas" width="400" height="650" fill="#0C0C0E" />
<!-- Main Contrasting Menu Card Panel -->
<rect id="main-card" x="20" y="20" width="360" height="610" rx="24" fill="url(#card-surface)" stroke="url(#gold-accent)" stroke-width="1.5" />
<!-- Inner Decorative Framing Line -->
<rect id="inner-border" x="30" y="30" width="340" height="590" rx="18" fill="none" stroke="#2B2B32" stroke-width="1" stroke-dasharray="5 3" />
</g>
<!-- 2. Decorative Icons, Crests & Accents -->
<g id="layer-icons">
<!-- Header Chef & Cutlery Crest -->
<g transform="translate(170, 52)" stroke="url(#gold-accent)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<!-- Fork -->
<path d="M-20 6 v12 c0 4 3 6 7 6 v14 M-23 6 v8 M-17 6 v8" />
<!-- Chef Hat -->
<path d="M12 36 h36 c3 0 5-2 5-5 v-4 c0-2-1-3-3-4 2-3 2-7 0-10 -1-2-3-3-5-3 0-5-4-9-9-9 -4 0-8 3-9 7 -2-1-5-1-7 1 -3 3-3 7-1 10 -2 1-3 2-3 4 v4 c0 3 2 5 6 5 z" />
<path d="M16 30 h28" stroke-width="1" />
<!-- Knife -->
<path d="M78 6 v38 M78 6 c6 0 10 6 10 14 v8 c0 4-4 6-10 6" />
</g>
<!-- Center Star Divider -->
<g id="divider-accent">
<path d="M130 162 h55 M215 162 h55" stroke="url(#gold-accent)" stroke-width="1" opacity="0.6" />
<polygon points="200,157 202.5,161.5 207,162 203.5,165 204.5,169.5 200,167 195.5,169.5 196.5,165 193,162 197.5,161.5" fill="url(#gold-accent)" />
</g>
<!-- WiFi Icon -->
<g transform="translate(68, 592)" stroke="#A1A1AA" stroke-width="1.5" fill="none" stroke-linecap="round">
<path d="M0 0 a14 14 0 0 1 18 0" />
<path d="M3 4 a9 9 0 0 1 12 0" />
<circle cx="9" cy="8" r="1" fill="#A1A1AA" />
</g>
<!-- Instagram / Social Icon -->
<g transform="translate(225, 592)" stroke="#A1A1AA" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
<rect x="0" y="0" width="13" height="13" rx="3.5" />
<circle cx="6.5" cy="6.5" r="3" />
<circle cx="10" cy="3" r="0.5" fill="#A1A1AA" />
</g>
</g>
<!-- 3. Clean Placeholder Box for QR Code -->
<g id="qr-placeholder" transform="translate(90, 215)">
<rect width="220" height="220" rx="20" fill="#FFFFFF" stroke="#E4E4E7" stroke-width="2" />
<rect x="12" y="12" width="196" height="196" rx="14" fill="#FAFAFA" stroke="#E4E4E7" stroke-dasharray="4 3" />
<text x="110" y="115" font-family="Inter, sans-serif" font-size="12" font-weight="600" fill="#71717A" text-anchor="middle">QR KOD ALANI</text>
</g>
<!-- 4. Native Editable Texts -->
<g id="layer-texts" font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" text-anchor="middle">
<!-- Header Titles -->
<text x="200" y="130" font-size="22" font-weight="800" fill="#FFFFFF" letter-spacing="2">GOURMET BISTRO</text>
<text x="200" y="150" font-size="11" font-weight="500" fill="#D4AF37" letter-spacing="2.5">TEMASSIZ DİJİTAL MENÜ</text>
<!-- Scan Call to Action -->
<text x="200" y="475" font-size="13" font-weight="700" fill="#FFFFFF" letter-spacing="1.2">MENÜYÜ GÖRMEK İÇİN OKUTUN</text>
<text x="200" y="495" font-size="11" font-weight="400" fill="#8E8E93">Kameranız ile QR kodu taratın</text>
<!-- Table Badge Container & Label -->
<rect x="140" y="520" width="120" height="28" rx="14" fill="#242429" stroke="#383840" stroke-width="1" />
<text x="200" y="539" font-size="12" font-weight="600" fill="#E4E4E7" letter-spacing="0.5">Masa No: 01</text>
<!-- Footer Network & Social Meta -->
<text x="128" y="602" font-size="10" font-weight="400" fill="#A1A1AA" text-anchor="start">Bistro_Guest</text>
<text x="246" y="602" font-size="10" font-weight="400" fill="#A1A1AA" text-anchor="start">@gourmetbistro</text>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB