fix: render true SVG template vector graphic as stand background
This commit is contained in:
AyrisAI
@@ -205,97 +205,167 @@ export function QrStandGeneratorClient({
|
|||||||
style={{ background: activePreset.bgGradient }}
|
style={{ background: activePreset.bgGradient }}
|
||||||
>
|
>
|
||||||
{/* Tabletop Plaque Container */}
|
{/* Tabletop Plaque Container */}
|
||||||
<div
|
{activePreset.svgTemplateUrl ? (
|
||||||
ref={standRef}
|
|
||||||
className="w-[360px] sm:w-[380px] min-h-[660px] rounded-[2.5rem] p-7 flex flex-col items-center text-center relative shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2"
|
|
||||||
style={{
|
|
||||||
background: activePreset.plaqueBg,
|
|
||||||
borderColor: activePreset.borderAccent,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Inner Line Accent */}
|
|
||||||
<div
|
<div
|
||||||
className="absolute inset-2.5 rounded-[2rem] border pointer-events-none"
|
ref={standRef}
|
||||||
style={{ borderColor: activePreset.borderAccent }}
|
className="w-[360px] sm:w-[380px] aspect-[672/900] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10"
|
||||||
/>
|
>
|
||||||
|
{/* SVG Template Vector Background Graphic */}
|
||||||
|
<img
|
||||||
|
src={activePreset.svgTemplateUrl}
|
||||||
|
alt={activePreset.name}
|
||||||
|
className="absolute inset-0 w-full h-full object-cover pointer-events-none"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* 01. Brand Badge */}
|
{/* Dynamic Restaurant Logo & Name Header Overlay */}
|
||||||
<header className="flex flex-col items-center text-center mt-2 z-10">
|
<div className="absolute top-[13%] left-0 right-0 flex flex-col items-center justify-center px-6 text-center z-10">
|
||||||
<div
|
|
||||||
className="border-2 rounded-xl px-4 py-2 flex flex-col items-center mb-4 shadow-md"
|
|
||||||
style={{
|
|
||||||
borderColor: activePreset.logoBorder,
|
|
||||||
backgroundColor: activePreset.logoBg,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{logoUrl ? (
|
{logoUrl ? (
|
||||||
<img
|
<img
|
||||||
src={logoUrl}
|
src={logoUrl}
|
||||||
alt={restaurantName}
|
alt={restaurantName}
|
||||||
className="h-10 w-auto max-w-[140px] object-contain mb-1"
|
className="h-9 w-auto max-w-[130px] object-contain mb-1"
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
<span
|
<span
|
||||||
className="font-black text-xl tracking-wider uppercase font-['Montserrat'] leading-tight"
|
className="font-black text-lg sm:text-xl tracking-wider uppercase font-['Montserrat'] leading-tight drop-shadow-md"
|
||||||
style={{ color: activePreset.accentText }}
|
style={{ color: activePreset.accentText }}
|
||||||
>
|
>
|
||||||
{restaurantName}
|
{restaurantName}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Scan Action Text */}
|
{/* Dynamic QR Code Canvas Overlay */}
|
||||||
<h2
|
<div className="absolute top-[37%] left-1/2 -translate-x-1/2 w-[52%] aspect-square rounded-2xl p-2.5 shadow-2xl flex items-center justify-center bg-[#f8f3eb] z-10 border border-black/10">
|
||||||
className="font-['Montserrat'] font-black text-2xl sm:text-3xl tracking-tight uppercase leading-[0.95] drop-shadow-sm"
|
<QRCodeCanvas
|
||||||
style={{ color: activePreset.headerText }}
|
value={targetUrl}
|
||||||
>
|
size={170}
|
||||||
DİJİTAL MENÜ<br />
|
bgColor={activePreset.qrBg || "#f8f3eb"}
|
||||||
<span className="tracking-wide">KAMERANIZLA TARATIN</span>
|
fgColor={activePreset.qrColor || "#a64d2a"}
|
||||||
</h2>
|
level="H"
|
||||||
</header>
|
style={{ width: "100%", height: "100%" }}
|
||||||
|
includeMargin={false}
|
||||||
{/* 02. Centered Custom QR Code Box */}
|
/>
|
||||||
<section
|
|
||||||
className="w-60 h-60 sm:w-64 sm:h-64 rounded-3xl p-5 shadow-2xl flex items-center justify-center my-6 relative border border-black/15 z-10"
|
|
||||||
style={{ backgroundColor: activePreset.qrBg }}
|
|
||||||
>
|
|
||||||
<QRCodeCanvas
|
|
||||||
value={targetUrl}
|
|
||||||
size={200}
|
|
||||||
bgColor={activePreset.qrBg}
|
|
||||||
fgColor={activePreset.qrColor}
|
|
||||||
level="H"
|
|
||||||
includeMargin={false}
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* 03. Category Highlights Footer */}
|
|
||||||
<footer className="w-full relative px-4 text-center z-10 pb-2 flex-1 flex flex-col justify-end">
|
|
||||||
<p
|
|
||||||
className="text-xs tracking-wide mb-3 font-semibold"
|
|
||||||
style={{ color: activePreset.subText }}
|
|
||||||
>
|
|
||||||
Telefonunuzun kamerasını doğrultun
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Category Text Stack */}
|
|
||||||
<div
|
|
||||||
className="flex flex-col gap-1.5 max-w-[210px] mx-auto font-['Montserrat'] font-extrabold uppercase tracking-widest text-sm sm:text-base"
|
|
||||||
style={{ color: activePreset.headerText }}
|
|
||||||
>
|
|
||||||
{displayCategories.map((cat, idx) => (
|
|
||||||
<div key={idx} className="w-full">
|
|
||||||
<div className="py-0.5">{cat}</div>
|
|
||||||
{idx < displayCategories.length - 1 && (
|
|
||||||
<div
|
|
||||||
className="w-full h-[1px] my-0.5"
|
|
||||||
style={{ backgroundColor: activePreset.dividerColor }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
|
||||||
</div>
|
{/* Dynamic Categories Overlay */}
|
||||||
|
<div className="absolute bottom-[8%] left-0 right-0 flex flex-col items-center justify-center px-6 text-center z-10">
|
||||||
|
<p
|
||||||
|
className="text-[11px] sm:text-xs tracking-wide mb-2 font-semibold"
|
||||||
|
style={{ color: activePreset.subText }}
|
||||||
|
>
|
||||||
|
Telefonunuzun kamerasını doğrultun
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
className="flex flex-col gap-1 max-w-[200px] w-full font-['Montserrat'] font-extrabold uppercase tracking-widest text-xs sm:text-sm"
|
||||||
|
style={{ color: activePreset.headerText }}
|
||||||
|
>
|
||||||
|
{displayCategories.map((cat, idx) => (
|
||||||
|
<div key={idx} className="w-full">
|
||||||
|
<div className="py-0.5">{cat}</div>
|
||||||
|
{idx < displayCategories.length - 1 && (
|
||||||
|
<div
|
||||||
|
className="w-full h-[1px] my-0.5"
|
||||||
|
style={{ backgroundColor: activePreset.dividerColor }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
ref={standRef}
|
||||||
|
className="w-[360px] sm:w-[380px] min-h-[660px] rounded-[2.5rem] p-7 flex flex-col items-center text-center relative shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2"
|
||||||
|
style={{
|
||||||
|
background: activePreset.plaqueBg,
|
||||||
|
borderColor: activePreset.borderAccent,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Inner Line Accent */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-2.5 rounded-[2rem] border pointer-events-none"
|
||||||
|
style={{ borderColor: activePreset.borderAccent }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 01. Brand Badge */}
|
||||||
|
<header className="flex flex-col items-center text-center mt-2 z-10">
|
||||||
|
<div
|
||||||
|
className="border-2 rounded-xl px-4 py-2 flex flex-col items-center mb-4 shadow-md"
|
||||||
|
style={{
|
||||||
|
borderColor: activePreset.logoBorder,
|
||||||
|
backgroundColor: activePreset.logoBg,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{logoUrl ? (
|
||||||
|
<img
|
||||||
|
src={logoUrl}
|
||||||
|
alt={restaurantName}
|
||||||
|
className="h-10 w-auto max-w-[140px] object-contain mb-1"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<span
|
||||||
|
className="font-black text-xl tracking-wider uppercase font-['Montserrat'] leading-tight"
|
||||||
|
style={{ color: activePreset.accentText }}
|
||||||
|
>
|
||||||
|
{restaurantName}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scan Action Text */}
|
||||||
|
<h2
|
||||||
|
className="font-['Montserrat'] font-black text-2xl sm:text-3xl tracking-tight uppercase leading-[0.95] drop-shadow-sm"
|
||||||
|
style={{ color: activePreset.headerText }}
|
||||||
|
>
|
||||||
|
DİJİTAL MENÜ<br />
|
||||||
|
<span className="tracking-wide">KAMERANIZLA TARATIN</span>
|
||||||
|
</h2>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* 02. Centered Custom QR Code Box */}
|
||||||
|
<section
|
||||||
|
className="w-60 h-60 sm:w-64 sm:h-64 rounded-3xl p-5 shadow-2xl flex items-center justify-center my-6 relative border border-black/15 z-10"
|
||||||
|
style={{ backgroundColor: activePreset.qrBg }}
|
||||||
|
>
|
||||||
|
<QRCodeCanvas
|
||||||
|
value={targetUrl}
|
||||||
|
size={200}
|
||||||
|
bgColor={activePreset.qrBg}
|
||||||
|
fgColor={activePreset.qrColor}
|
||||||
|
level="H"
|
||||||
|
includeMargin={false}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 03. Category Highlights Footer */}
|
||||||
|
<footer className="w-full relative px-4 text-center z-10 pb-2 flex-1 flex flex-col justify-end">
|
||||||
|
<p
|
||||||
|
className="text-xs tracking-wide mb-3 font-semibold"
|
||||||
|
style={{ color: activePreset.subText }}
|
||||||
|
>
|
||||||
|
Telefonunuzun kamerasını doğrultun
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Category Text Stack */}
|
||||||
|
<div
|
||||||
|
className="flex flex-col gap-1.5 max-w-[210px] mx-auto font-['Montserrat'] font-extrabold uppercase tracking-widest text-sm sm:text-base"
|
||||||
|
style={{ color: activePreset.headerText }}
|
||||||
|
>
|
||||||
|
{displayCategories.map((cat, idx) => (
|
||||||
|
<div key={idx} className="w-full">
|
||||||
|
<div className="py-0.5">{cat}</div>
|
||||||
|
{idx < displayCategories.length - 1 && (
|
||||||
|
<div
|
||||||
|
className="w-full h-[1px] my-0.5"
|
||||||
|
style={{ backgroundColor: activePreset.dividerColor }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user