Rewrite visualizer with photorealistic CSS rendering
Replaced SVG lines with CSS borders and glass effects: - Frame: Thick CSS borders (12px) with shadow-2xl and ring-1 ring-white/10 - Glass: backdrop-blur + backdrop-brightness + sky-100/10 tint - Grid: CSS Grid with gaps (gaps show frameColor as steel profiles) - Handles: Absolute positioned divs with realistic shadows - Background: Room image with white/60 overlay for contrast Frame colors: #1f1f1f (charcoal black), #8B6F47 (bronze), #525252 (grey) Result: Looks like a photo of a door, not a drawing Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
@@ -5,32 +5,31 @@ import { useConfiguratorStore } from "@/lib/store";
|
|||||||
export function DoorVisualizer() {
|
export function DoorVisualizer() {
|
||||||
const { doorType, gridType, finish, handle } = useConfiguratorStore();
|
const { doorType, gridType, finish, handle } = useConfiguratorStore();
|
||||||
|
|
||||||
// Color mapping based on finish
|
// Frame color mapping based on finish
|
||||||
const frameColor = {
|
const frameColor = {
|
||||||
zwart: "#1A1A1A",
|
zwart: "#1f1f1f",
|
||||||
brons: "#8B6F47",
|
brons: "#8B6F47",
|
||||||
grijs: "#4A5568",
|
grijs: "#525252",
|
||||||
}[finish];
|
}[finish];
|
||||||
|
|
||||||
const viewBoxWidth = 400;
|
// Door width varies by type
|
||||||
const viewBoxHeight = 600;
|
const doorWidth = doorType === "paneel" ? "w-[300px]" : "w-[240px]";
|
||||||
const frameThickness = 20;
|
|
||||||
const padding = 40;
|
|
||||||
|
|
||||||
// Door dimensions within viewBox
|
// Grid configuration
|
||||||
const doorWidth = viewBoxWidth - padding * 2;
|
const gridConfig = {
|
||||||
const doorHeight = viewBoxHeight - padding * 2;
|
"3-vlak": "grid-rows-3",
|
||||||
const doorX = padding;
|
"4-vlak": "grid-rows-4",
|
||||||
const doorY = padding;
|
geen: "",
|
||||||
|
}[gridType];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-slate-100 to-slate-200">
|
<div className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-[2.5rem]">
|
||||||
{/* Background room image with overlay */}
|
{/* Background room image with overlay */}
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 bg-cover bg-center opacity-20"
|
className="absolute inset-0 bg-cover bg-center"
|
||||||
style={{ backgroundImage: "url(/images/hero.jpg)" }}
|
style={{ backgroundImage: "url(/images/hero.jpg)" }}
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-white/40" />
|
<div className="absolute inset-0 bg-white/60" />
|
||||||
|
|
||||||
{/* Live Preview Badge */}
|
{/* Live Preview Badge */}
|
||||||
<div className="absolute left-8 top-8 z-10">
|
<div className="absolute left-8 top-8 z-10">
|
||||||
@@ -40,132 +39,68 @@ export function DoorVisualizer() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* SVG Door */}
|
{/* The Door Frame (CSS-based) */}
|
||||||
<svg
|
<div className="relative z-10 flex h-[500px] items-center justify-center">
|
||||||
viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
|
<div
|
||||||
className="relative z-10 h-[90%] w-auto drop-shadow-2xl"
|
className={`relative h-[480px] ${doorWidth} rounded-sm border-[12px] shadow-2xl ring-1 ring-white/10`}
|
||||||
>
|
style={{ borderColor: frameColor }}
|
||||||
{/* Outer Frame */}
|
>
|
||||||
<rect
|
{/* The Glass Panels with Grid */}
|
||||||
x={doorX}
|
{gridType !== "geen" ? (
|
||||||
y={doorY}
|
<div
|
||||||
width={doorWidth}
|
className={`grid h-full w-full gap-y-3 ${gridConfig}`}
|
||||||
height={doorHeight}
|
style={{ backgroundColor: frameColor }}
|
||||||
fill={frameColor}
|
>
|
||||||
stroke={frameColor}
|
{gridType === "3-vlak" &&
|
||||||
strokeWidth="2"
|
[1, 2, 3].map((i) => (
|
||||||
rx="4"
|
<div
|
||||||
/>
|
key={i}
|
||||||
|
className="backdrop-blur-[1px] backdrop-brightness-110 bg-sky-100/10"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{gridType === "4-vlak" &&
|
||||||
|
[1, 2, 3, 4].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="backdrop-blur-[1px] backdrop-brightness-110 bg-sky-100/10"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// No grid - single glass panel
|
||||||
|
<div className="h-full w-full backdrop-blur-[1px] backdrop-brightness-110 bg-sky-100/10" />
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Inner panel (lighter) */}
|
{/* Handle Overlays */}
|
||||||
<rect
|
{doorType === "taats" && handle === "u-greep" && (
|
||||||
x={doorX + frameThickness}
|
<div
|
||||||
y={doorY + frameThickness}
|
className="absolute left-1/2 top-1/2 h-32 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-lg"
|
||||||
width={doorWidth - frameThickness * 2}
|
style={{ backgroundColor: frameColor }}
|
||||||
height={doorHeight - frameThickness * 2}
|
/>
|
||||||
fill={frameColor}
|
)}
|
||||||
opacity="0.7"
|
|
||||||
rx="2"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Grid Lines based on gridType */}
|
{doorType === "scharnier" && handle === "klink" && (
|
||||||
{gridType === "3-vlak" && (
|
<div className="absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||||
<>
|
<div
|
||||||
<line
|
className="h-2 w-12 rounded-full shadow-md"
|
||||||
x1={doorX + frameThickness}
|
style={{ backgroundColor: frameColor }}
|
||||||
y1={doorY + doorHeight / 3}
|
/>
|
||||||
x2={doorX + doorWidth - frameThickness}
|
<div
|
||||||
y2={doorY + doorHeight / 3}
|
className="size-3 rounded-full shadow-md ring-1 ring-white/20"
|
||||||
stroke={frameColor}
|
style={{ backgroundColor: finish === "brons" ? "#6B5434" : frameColor }}
|
||||||
strokeWidth="8"
|
/>
|
||||||
/>
|
</div>
|
||||||
<line
|
)}
|
||||||
x1={doorX + frameThickness}
|
|
||||||
y1={doorY + (doorHeight / 3) * 2}
|
|
||||||
x2={doorX + doorWidth - frameThickness}
|
|
||||||
y2={doorY + (doorHeight / 3) * 2}
|
|
||||||
stroke={frameColor}
|
|
||||||
strokeWidth="8"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{gridType === "4-vlak" && (
|
{doorType === "paneel" && (
|
||||||
<>
|
// Central vertical divider for paneel
|
||||||
<line
|
<div
|
||||||
x1={doorX + frameThickness}
|
className="absolute left-1/2 top-0 h-full w-3 -translate-x-1/2 shadow-inner"
|
||||||
y1={doorY + doorHeight / 4}
|
style={{ backgroundColor: frameColor }}
|
||||||
x2={doorX + doorWidth - frameThickness}
|
|
||||||
y2={doorY + doorHeight / 4}
|
|
||||||
stroke={frameColor}
|
|
||||||
strokeWidth="8"
|
|
||||||
/>
|
/>
|
||||||
<line
|
)}
|
||||||
x1={doorX + frameThickness}
|
</div>
|
||||||
y1={doorY + doorHeight / 2}
|
</div>
|
||||||
x2={doorX + doorWidth - frameThickness}
|
|
||||||
y2={doorY + doorHeight / 2}
|
|
||||||
stroke={frameColor}
|
|
||||||
strokeWidth="8"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1={doorX + frameThickness}
|
|
||||||
y1={doorY + (doorHeight / 4) * 3}
|
|
||||||
x2={doorX + doorWidth - frameThickness}
|
|
||||||
y2={doorY + (doorHeight / 4) * 3}
|
|
||||||
stroke={frameColor}
|
|
||||||
strokeWidth="8"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Handle based on doorType */}
|
|
||||||
{doorType === "taats" && handle === "u-greep" && (
|
|
||||||
<rect
|
|
||||||
x={doorX + doorWidth / 2 - 6}
|
|
||||||
y={doorY + doorHeight / 2 - 80}
|
|
||||||
width="12"
|
|
||||||
height="160"
|
|
||||||
fill="#B8860B"
|
|
||||||
rx="6"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{doorType === "scharnier" && handle === "klink" && (
|
|
||||||
<>
|
|
||||||
{/* Handle base */}
|
|
||||||
<rect
|
|
||||||
x={doorX + doorWidth - frameThickness - 50}
|
|
||||||
y={doorY + doorHeight / 2 - 8}
|
|
||||||
width="40"
|
|
||||||
height="16"
|
|
||||||
fill="#B8860B"
|
|
||||||
rx="8"
|
|
||||||
/>
|
|
||||||
{/* Handle knob */}
|
|
||||||
<circle
|
|
||||||
cx={doorX + doorWidth - frameThickness - 30}
|
|
||||||
cy={doorY + doorHeight / 2}
|
|
||||||
r="6"
|
|
||||||
fill="#8B6F47"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{doorType === "paneel" && (
|
|
||||||
<>
|
|
||||||
{/* Central vertical line for paneel */}
|
|
||||||
<line
|
|
||||||
x1={doorX + doorWidth / 2}
|
|
||||||
y1={doorY + frameThickness}
|
|
||||||
x2={doorX + doorWidth / 2}
|
|
||||||
y2={doorY + doorHeight - frameThickness}
|
|
||||||
stroke={frameColor}
|
|
||||||
strokeWidth="8"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
{/* Configuration Info Card */}
|
{/* Configuration Info Card */}
|
||||||
<div className="absolute bottom-8 left-8 right-8 z-10">
|
<div className="absolute bottom-8 left-8 right-8 z-10">
|
||||||
|
|||||||
Reference in New Issue
Block a user