{"id":172,"date":"2026-08-17T12:06:53","date_gmt":"2026-08-17T12:06:53","guid":{"rendered":"https:\/\/yax6kv1aqa.wpdns.site\/?page_id=172"},"modified":"2026-08-17T12:07:22","modified_gmt":"2026-08-17T12:07:22","slug":"configurator","status":"publish","type":"page","link":"https:\/\/recarp.nl\/en\/configurator\/","title":{"rendered":"Configurator"},"content":{"rendered":"<main id='bde-main'><section class=\"bde-section-172-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-shortcode-172-101 bde-shortcode\"><style id=\"recarp-preboot\">recarp-configurator:not(.rc-ready){display:block;position:relative;background:#c7ccc9;overflow:hidden;min-height:520px}recarp-configurator[fullscreen=\"auto\"]:not([mode=\"modal\"]):not(.rc-ready){position:fixed;inset:0;z-index:99999;min-height:0}recarp-configurator[mode=\"modal\"]:not(.rc-ready){min-height:0;background:transparent}recarp-configurator:not(.rc-ready):not([mode=\"modal\"])::before{content:\"\";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid rgba(26,26,24,.15);border-top-color:#1a1a18;animation:recarpSpin .9s linear infinite}recarp-configurator:not(.rc-ready):not([mode=\"modal\"])::after{content:\"ReCarp\";position:absolute;left:50%;top:50%;transform:translate(-50%,40px);font:700 15px\/1 \"Plus Jakarta Sans\",system-ui,sans-serif;letter-spacing:.02em;color:#1a1a18;opacity:.8}@keyframes recarpSpin{to{transform:rotate(360deg)}}<\/style><recarp-configurator mode=\"inline\" height=\"760px\" lang=\"en\" fullscreen=\"auto\" data-no-translation><template class=\"recarp-template\" data-no-translation><div class=\"recarp-root\" part=\"root\">\n\n\t\n\t<!-- Header -->\n\t<header class=\"absolute top-0 left-0 w-full z-20 p-6 md:p-8 flex justify-between items-center pointer-events-none\">\n\t\t<button type=\"button\" data-action=\"close\" class=\"rc-logo text-2xl font-bold tracking-tight flex items-center gap-2 pointer-events-auto\" title=\"Close\">\n\t\t\t\t\t\t\t<span class=\"rc-wordmark\">ReCarp<\/span>\n\t\t\t\t\t<\/button>\n\t\t<button type=\"button\" data-action=\"close\" aria-label=\"Close\" class=\"rc-close text-sm font-medium hover:text-brand-accent transition-colors pointer-events-auto bg-white\/80 backdrop-blur px-4 py-2 rounded-full border border-brand-dark\/10 shadow-sm flex items-center gap-2\">\n\t\t\tClose <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n\t\t<\/button>\n\t<\/header>\n\n\t<!-- Laadscherm: blijft staan tot het eerste 3D-beeld is getekend -->\n\t<div id=\"rc-loader\" class=\"rc-loader\" aria-hidden=\"true\">\n\t\t<div class=\"rc-loader-spin\"><\/div>\n\t\t<div class=\"rc-loader-brand\">ReCarp<\/div>\n\t<\/div>\n\n\t<!-- 3D stage -->\n\t<div id=\"configurator-canvas-container\" class=\"rc-stage\"><\/div>\n\n\t<!-- Floating 3D controls: standaard aanzichten + stap terug -->\n\t<div class=\"rc-viewbar\" role=\"group\" aria-label=\"View\">\n\t\t<button type=\"button\" data-view=\"iso\" class=\"rc-view-btn active\" title=\"Corner view\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\"><path d=\"M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z\"\/><path d=\"M12 12l8-4.5M12 12v9M12 12L4 7.5\"\/><\/svg>\n\t\t\t<span>Corner<\/span>\n\t\t<\/button>\n\t\t<button type=\"button\" data-view=\"top\" class=\"rc-view-btn\" title=\"Top view (2D)\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"1.5\"\/><path d=\"M4 10h16M10 4v16\"\/><\/svg>\n\t\t\t<span>Top<\/span>\n\t\t<\/button>\n\t\t<button type=\"button\" data-view=\"front\" class=\"rc-view-btn\" title=\"Front view\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"1\"\/><path d=\"M4 14h16\"\/><\/svg>\n\t\t\t<span>Front<\/span>\n\t\t<\/button>\n\t\t<span class=\"rc-viewbar-sep\" aria-hidden=\"true\"><\/span>\n\t\t<button type=\"button\" data-action=\"toggle-walls\" class=\"rc-view-btn\" title=\"Choose which walls to show\" aria-pressed=\"false\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"1\"\/><path d=\"M3 10h18M3 15h18M9 5v5M15 10v5M9 15v4\"\/><\/svg>\n\t\t\t<span>Walls<\/span>\n\t\t<\/button>\n\t\t<button type=\"button\" data-action=\"undo\" id=\"undo-btn\" class=\"rc-view-btn\" title=\"Undo last step\" disabled>\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 14L4 9l5-5M4 9h11a5 5 0 010 10h-3\"\/><\/svg>\n\t\t\t<span>Undo<\/span>\n\t\t<\/button>\n\t\t<span class=\"rc-viewbar-sep\" aria-hidden=\"true\"><\/span>\n\t\t<button type=\"button\" data-action=\"toggle-fullscreen\" class=\"rc-view-btn rc-view-fs\" title=\"Full screen\" aria-pressed=\"false\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5\"\/><\/svg>\n\t\t\t<span>Full screen<\/span>\n\t\t<\/button>\n\t\t<button type=\"button\" data-action=\"goto-save\" class=\"rc-view-btn rc-view-save\" title=\"Save your design and continue later\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 4h11l3 3v13H5z M8 4v5h7V4 M8 20v-6h8v6\"\/><\/svg>\n\t\t\t<span>Save<\/span>\n\t\t<\/button>\n\t<\/div>\n\n\t<!-- Muur-keuzepaneel (onder de knop \"Muren\") -->\n\t<div id=\"rc-walls-pop\" class=\"rc-walls-pop hidden\" role=\"group\" aria-label=\"Show walls\">\n\t\t<div class=\"rc-walls-head\">\n\t\t\t<span class=\"rc-walls-title\">Show walls<\/span>\n\t\t\t<span class=\"rc-walls-actions\">\n\t\t\t\t<button type=\"button\" data-walls-all=\"on\">All on<\/button>\n\t\t\t\t<button type=\"button\" data-walls-all=\"off\">All off<\/button>\n\t\t\t<\/span>\n\t\t<\/div>\n\t\t<div id=\"rc-walls-list\" class=\"rc-walls-list\"><\/div>\n\t\t<p class=\"rc-walls-hint\">The numbers are shown in the floor plan. Hover a wall to highlight it in 3D.<\/p>\n\t<\/div>\n\n\t<!-- Verlaten met niet-opgeslagen ontwerp -->\n\t<div id=\"rc-leave\" class=\"rc-leave hidden\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"rc-leave-title\">\n\t\t<div class=\"rc-leave-box\">\n\t\t\t<h3 id=\"rc-leave-title\">Save your design?<\/h3>\n\t\t\t<p>Your design has not been saved yet. We can e-mail you a link to continue later.<\/p>\n\t\t\t<div class=\"rc-leave-actions\">\n\t\t\t\t<button type=\"button\" data-action=\"leave-save\" class=\"rc-leave-btn rc-leave-primary\">Yes, save my design<\/button>\n\t\t\t\t<button type=\"button\" data-action=\"leave-discard\" class=\"rc-leave-btn\">No, leave without saving<\/button>\n\t\t\t\t<button type=\"button\" data-action=\"leave-cancel\" class=\"rc-leave-link\">Back to my design<\/button>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\n\t<!-- WebGL fallback notice -->\n\t<div id=\"webgl-error\" class=\"hidden absolute inset-0 z-[5] flex items-center justify-center p-8 text-center\">\n\t\t<div class=\"bg-white\/90 backdrop-blur rounded-2xl p-8 max-w-md shadow-lg border border-brand-dark\/10\">\n\t\t\t<h2 class=\"text-xl font-medium mb-2\">3D view not available<\/h2>\n\t\t\t<p class=\"text-sm text-brand-dark\/70\">Your browser does not support WebGL. You can still create a design; only the 3D preview is missing.<\/p>\n\t\t<\/div>\n\t<\/div>\n\n\t<!-- 3D hint -->\n\t<div class=\"rc-hint absolute bottom-8 left-8 z-10 items-center gap-3 px-5 py-3 bg-white\/90 backdrop-blur-md rounded-full shadow-lg border border-brand-dark\/10 pointer-events-none\">\n\t\t<svg class=\"w-5 h-5 text-brand-accent\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5\"><\/path><\/svg>\n\t\t<span class=\"text-sm font-medium text-brand-dark\">Drag to rotate \u00b7 right-drag or shift to pan \u00b7 scroll to zoom<\/span>\n\t<\/div>\n\n\t<!-- UI panel -->\n\t<div class=\"rc-panel bg-white\/95 backdrop-blur-2xl shadow-2xl flex flex-col overflow-hidden border border-brand-dark\/10\">\n\t\t<button type=\"button\" class=\"rc-sheet-handle\" data-action=\"toggle-sheet\" aria-label=\"Expand or collapse the panel\"><span><\/span><\/button>\n\n\t\t<div class=\"p-6 border-b border-brand-dark\/10 bg-brand-light\/50 shrink-0\">\n\t\t\t<h2 class=\"text-2xl font-bold tracking-tight\">Studio Configurator<\/h2>\n\t\t\t<p class=\"text-sm text-brand-dark\/60 mt-1\">Design your circular floor<\/p>\n\t\t<\/div>\n\n\t\t<div class=\"flex-1 overflow-y-auto p-6 custom-scrollbar relative\">\n\n\t\t\t<!-- STEP 1: ROOM PLANNER -->\n\t\t\t<div id=\"config-step-1\" class=\"config-step active\">\n\t\t\t\t<h3 class=\"text-xl font-medium mb-4 flex items-center\">1. Draw your room\t<span class=\"rc-info\">\n\t\t<button type=\"button\" class=\"rc-info-btn\" data-info aria-expanded=\"false\" aria-label=\"Info\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path stroke-linecap=\"round\" d=\"M12 11v5M12 7.5h.01\"\/><\/svg>\n\t\t<\/button>\n\t\t<span class=\"rc-info-pop\" role=\"note\">Enter the overall dimensions first, then adjust corners, walls and doors in the floor plan. The area is calculated automatically.<\/span>\n\t<\/span>\n\t<\/h3>\n\n\t\t\t\t<div class=\"flex gap-3 mb-6 bg-brand-light p-4 rounded-xl border border-brand-dark\/10\">\n\t\t\t\t\t<div class=\"flex-1\">\n\t\t\t\t\t\t<label for=\"room-length\" class=\"block text-[10px] uppercase font-bold text-brand-dark\/50 mb-1\">Length (m)<\/label>\n\t\t\t\t\t\t<input type=\"number\" id=\"room-length\" value=\"6\" min=\"2\" max=\"20\" step=\"0.5\" inputmode=\"decimal\" class=\"w-full px-3 py-2 bg-white rounded-lg border border-brand-dark\/10 outline-none focus:border-brand-accent text-sm font-medium\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"flex items-center pt-5 text-brand-dark\/30\">x<\/div>\n\t\t\t\t\t<div class=\"flex-1\">\n\t\t\t\t\t\t<label for=\"room-width\" class=\"block text-[10px] uppercase font-bold text-brand-dark\/50 mb-1\">Width (m)<\/label>\n\t\t\t\t\t\t<input type=\"number\" id=\"room-width\" value=\"4\" min=\"2\" max=\"20\" step=\"0.5\" inputmode=\"decimal\" class=\"w-full px-3 py-2 bg-white rounded-lg border border-brand-dark\/10 outline-none focus:border-brand-accent text-sm font-medium\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"flex items-end\">\n\t\t\t\t\t\t<button type=\"button\" data-action=\"apply-dimensions\" class=\"h-[38px] px-4 bg-brand-dark text-white rounded-lg text-sm font-medium hover:bg-brand-accent transition-colors\">Start<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"mb-4\">\n\t\t\t\t\t<div class=\"flex justify-between items-end mb-3\">\n\t\t\t\t\t\t<span class=\"text-sm font-medium text-brand-dark flex items-center\">Floor plan editor\t<span class=\"rc-info\">\n\t\t<button type=\"button\" class=\"rc-info-btn\" data-info aria-expanded=\"false\" aria-label=\"Info\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path stroke-linecap=\"round\" d=\"M12 11v5M12 7.5h.01\"\/><\/svg>\n\t\t<\/button>\n\t\t<span class=\"rc-info-pop\" role=\"note\">Pick a tool and edit the floor plan. Move drags the corner points; Wall adds a corner when you click a wall; Door places a 90 cm opening.<\/span>\n\t<\/span>\n\t<\/span>\n\t\t\t\t\t\t<span id=\"planner-area\" class=\"text-xs font-medium text-brand-dark\/60\" aria-live=\"polite\"><\/span>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"rc-toolrow mb-3\" role=\"group\" aria-label=\"Floor plan tools\">\n\t\t\t\t\t\t<button type=\"button\" data-tool=\"move\" id=\"tool-move\" class=\"tool-btn active\">\n\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5\"><\/path><\/svg>\n\t\t\t\t\t\t\tMove\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t<button type=\"button\" data-tool=\"split\" id=\"tool-split\" class=\"tool-btn\">\n\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4v16M8 8l4-4 4 4\"><\/path><\/svg>\n\t\t\t\t\t\t\tWall\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t<button type=\"button\" data-tool=\"door\" id=\"tool-door\" class=\"tool-btn\">\n\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 11h4m-2-2v4m4-10h4a2 2 0 012 2v14a2 2 0 01-2 2h-4m-4-18H8a2 2 0 00-2 2v14a2 2 0 002 2h4\"><\/path><\/svg>\n\t\t\t\t\t\t\tDoor\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"planner-wrap\" class=\"rc-planner-wrap flex justify-center bg-brand-light rounded-xl p-2 border border-brand-dark\/10 select-none overflow-hidden\">\n\t\t\t\t\t\t<button type=\"button\" id=\"planner-gate\" class=\"rc-planner-gate\" data-action=\"planner-activate\">\n\t\t\t\t\t\t\t<span class=\"rc-planner-gate-pill\">Tap to edit the floor plan<\/span>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t<button type=\"button\" id=\"planner-done\" class=\"rc-planner-done hidden\" data-action=\"planner-done\">Done<\/button>\n\t\t\t\t\t\t<canvas id=\"planner-canvas\" width=\"300\" height=\"300\" class=\"bg-white border border-brand-dark\/10 rounded shadow-sm tool-move\" role=\"img\" aria-label=\"Floor plan editor\"><\/canvas>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p id=\"planner-instruction\" class=\"text-xs text-center text-brand-dark\/60 mt-3 h-4\">Drag the dots to move the corners.<\/p>\n\t\t\t\t<\/div>\n\n\t\t\t\t<button type=\"button\" data-step=\"2\" class=\"w-full mt-6 py-4 bg-brand-dark text-white rounded-full font-medium hover:bg-brand-accent transition-colors shadow-lg shadow-brand-dark\/20\">Choose a pattern \u2192<\/button>\n\t\t\t<\/div>\n\n\t\t\t<!-- STEP 2: PATTERN -->\n\t\t\t<div id=\"config-step-2\" class=\"config-step\">\n\t\t\t\t<div class=\"flex items-center justify-between mb-6\">\n\t\t\t\t\t<h3 class=\"text-xl font-medium flex items-center\">2. Choose a pattern\t<span class=\"rc-info\">\n\t\t<button type=\"button\" class=\"rc-info-btn\" data-info aria-expanded=\"false\" aria-label=\"Info\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path stroke-linecap=\"round\" d=\"M12 11v5M12 7.5h.01\"\/><\/svg>\n\t\t<\/button>\n\t\t<span class=\"rc-info-pop\" role=\"note\">Every pattern is an exact rebuild of the ReCarp design files. Tap a pattern to see it on your floor right away.<\/span>\n\t<\/span>\n\t<\/h3>\n\t\t\t\t\t<button type=\"button\" data-step=\"1\" class=\"text-brand-dark\/50 text-sm hover:text-brand-dark transition-colors\">\u2190 Back<\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"grid grid-cols-2 gap-4\" id=\"pattern-button-container\"><\/div>\n\t\t\t\t<button type=\"button\" data-step=\"3\" class=\"w-full mt-8 py-4 bg-brand-dark text-white rounded-full font-medium hover:bg-brand-accent transition-colors shadow-lg shadow-brand-dark\/20\">Edit colours \u2192<\/button>\n\t\t\t<\/div>\n\n\t\t\t<!-- STEP 3: COLORS -->\n\t\t\t<div id=\"config-step-3\" class=\"config-step\">\n\t\t\t\t<div class=\"flex items-center justify-between mb-4\">\n\t\t\t\t\t<h3 class=\"text-xl font-medium flex items-center\">3. Set the colours\t<span class=\"rc-info\">\n\t\t<button type=\"button\" class=\"rc-info-btn\" data-info aria-expanded=\"false\" aria-label=\"Info\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path stroke-linecap=\"round\" d=\"M12 11v5M12 7.5h.01\"\/><\/svg>\n\t\t<\/button>\n\t\t<span class=\"rc-info-pop\" role=\"note\">Pick a ready-made palette (recommended) or switch on &quot;Customise colours&quot; to give every element of the pattern its own colour.<\/span>\n\t<\/span>\n\t<\/h3>\n\t\t\t\t\t<button type=\"button\" data-step=\"2\" class=\"text-brand-dark\/50 text-sm hover:text-brand-dark transition-colors\">\u2190 Back<\/button>\n\t\t\t\t<\/div>\n\n\t\t\t\t<!-- Door designers gekozen kleurpaletten (beheerbaar in de backend) -->\n\t\t\t\t<div class=\"bg-brand-light p-4 rounded-xl border border-brand-dark\/10\">\n\t\t\t\t\t<div class=\"flex items-center justify-between mb-3\">\n\t\t\t\t\t\t<span class=\"text-[11px] font-bold uppercase tracking-wider text-brand-dark\/70\">Colours chosen by our designers<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div id=\"palette-presets\" class=\"rc-palette-list\"><\/div>\n\n\t\t\t\t\t<button type=\"button\" data-action=\"toggle-custom-colors\" id=\"palette-custom-toggle\" aria-expanded=\"false\" class=\"rc-custom-toggle\">\n\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11 4H4v16h16v-7M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>\n\t\t\t\t\t\tCustomise colours\t\t\t\t\t<\/button>\n\n\t\t\t\t\t<div id=\"palette-custom-wrap\" class=\"hidden mt-4\">\n\t\t\t\t\t\t<div class=\"flex items-center justify-center gap-2 mb-4 bg-white px-3 py-2 rounded-lg border border-brand-dark\/5 shadow-sm\">\n\t\t\t\t\t\t\t<p class=\"text-[11px] text-brand-dark\/80 font-bold uppercase tracking-wider text-center\">Click an element in the pattern to change its colour<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"flex justify-center mb-6 relative\">\n\t\t\t\t\t\t\t<canvas id=\"pattern-editor-canvas\" width=\"280\" height=\"280\" class=\"border border-brand-dark\/20 rounded-lg shadow-md\" role=\"img\" aria-label=\"Pattern colour editor\"><\/canvas>\n\t\t\t\t\t\t\t<input type=\"color\" id=\"rgb-color-picker\" aria-hidden=\"true\" tabindex=\"-1\">\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"flex justify-center gap-3\" id=\"color-palette-legend\" role=\"group\" aria-label=\"Colour palette\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<button type=\"button\" data-step=\"4\" class=\"w-full mt-8 py-4 bg-brand-dark text-white rounded-full font-medium hover:bg-brand-accent transition-colors shadow-lg shadow-brand-dark\/20\">Place furniture \u2192<\/button>\n\t\t\t<\/div>\n\n\t\t\t<!-- STEP 4: MEUBELS -->\n\t\t\t<div id=\"config-step-4\" class=\"config-step\">\n\t\t\t\t<div class=\"flex items-center justify-between mb-4\">\n\t\t\t\t\t<h3 class=\"text-xl font-medium flex items-center\">4. Place furniture\t<span class=\"rc-info\">\n\t\t<button type=\"button\" class=\"rc-info-btn\" data-info aria-expanded=\"false\" aria-label=\"Info\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path stroke-linecap=\"round\" d=\"M12 11v5M12 7.5h.01\"\/><\/svg>\n\t\t<\/button>\n\t\t<span class=\"rc-info-pop\" role=\"note\">Optional: add basic furniture to get a feel for the scale. Tap a piece in the 3D view to select it; move and rotate it with the buttons. Furniture is for illustration only and is not part of the quote.<\/span>\n\t<\/span>\n\t<\/h3>\n\t\t\t\t\t<button type=\"button\" data-step=\"3\" class=\"text-brand-dark\/50 text-sm hover:text-brand-dark transition-colors\">\u2190 Back<\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<p class=\"text-brand-dark\/70 text-sm mb-4 leading-relaxed\">This step is optional. Furniture helps you judge the scale and is not included in the quote.<\/p>\n\t\t\t\t<!-- Meubels -->\n\t\t\t\t<div class=\"bg-brand-light p-4 rounded-xl border border-brand-dark\/10 mb-2\">\n\t\t\t\t\t<div class=\"rc-furn-head\">\n\t\t\t\t\t\t<button type=\"button\" class=\"rc-furn-toggle open\" data-action=\"toggle-furniture\" aria-expanded=\"true\" aria-controls=\"furniture-body\">\n\t\t\t\t\t\t\t<svg class=\"rc-furn-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 6l6 6-6 6\"\/><\/svg>\n\t\t\t\t\t\t\t<span>Place furniture<\/span>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div id=\"furniture-body\" class=\"rc-furn-body\">\n\t\t\t\t\t\t<div class=\"rc-furn-grid\">\n\t\t\t\t\t\t\t<button type=\"button\" data-furniture=\"table\" class=\"rc-furn-btn\">Table<\/button>\n\t\t\t\t\t\t\t<button type=\"button\" data-furniture=\"chair\" class=\"rc-furn-btn\">Chair<\/button>\n\t\t\t\t\t\t\t<button type=\"button\" data-furniture=\"deskchair\" class=\"rc-furn-btn\">Office chair<\/button>\n\t\t\t\t\t\t\t<button type=\"button\" data-furniture=\"desk\" class=\"rc-furn-btn\">Desk<\/button>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div id=\"furniture-selected\" class=\"rc-furn-selected hidden\">\n\t\t\t\t\t\t\t<span class=\"rc-furn-sel-label\">Move selected furniture<\/span>\n\t\t\t\t\t\t\t<div class=\"rc-furn-pad\">\n\t\t\t\t\t\t\t\t<span><\/span>\n\t\t\t\t\t\t\t\t<button type=\"button\" data-action=\"furniture-up\" class=\"rc-pad-btn\" aria-label=\"Move back\">\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 19V5M5 12l7-7 7 7\"\/><\/svg>\n\t\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t<span><\/span>\n\t\t\t\t\t\t\t\t<button type=\"button\" data-action=\"furniture-left\" class=\"rc-pad-btn\" aria-label=\"Move left\">\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 12H5M12 5l-7 7 7 7\"\/><\/svg>\n\t\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t<button type=\"button\" data-action=\"furniture-rotate\" class=\"rc-pad-btn rc-pad-rotate\" aria-label=\"Rotate\">\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 12a9 9 0 1 0 3-6.7L3 8m0-5v5h5\"\/><\/svg>\n\t\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t<button type=\"button\" data-action=\"furniture-right\" class=\"rc-pad-btn\" aria-label=\"Move right\">\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n\t\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t<span><\/span>\n\t\t\t\t\t\t\t\t<button type=\"button\" data-action=\"furniture-down\" class=\"rc-pad-btn\" aria-label=\"Move forward\">\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 5v14M5 12l7 7 7-7\"\/><\/svg>\n\t\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t<span><\/span>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<button type=\"button\" data-action=\"furniture-delete\" class=\"rc-furn-action rc-furn-del\">Remove<\/button>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<button type=\"button\" data-step=\"5\" class=\"w-full mt-6 py-4 bg-brand-accent text-white rounded-full font-medium hover:bg-brand-dark transition-colors shadow-lg shadow-brand-accent\/20\">Finish design \u2192<\/button>\n\t\t\t<\/div>\n\n\t\t\t<!-- STEP 5: FORM -->\n\t\t\t<div id=\"config-step-5\" class=\"config-step\">\n\t\t\t\t<div class=\"flex items-center justify-between mb-6\">\n\t\t\t\t\t<h3 class=\"text-xl font-medium flex items-center\">5. Receive your design\t<span class=\"rc-info\">\n\t\t<button type=\"button\" class=\"rc-info-btn\" data-info aria-expanded=\"false\" aria-label=\"Info\">\n\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path stroke-linecap=\"round\" d=\"M12 11v5M12 7.5h.01\"\/><\/svg>\n\t\t<\/button>\n\t\t<span class=\"rc-info-pop\" role=\"note\">You will receive a PDF by e-mail with three views of your design (top view 2D, interior and front), including pattern, colours, dimensions and area.<\/span>\n\t<\/span>\n\t<\/h3>\n\t\t\t\t\t<button type=\"button\" data-step=\"4\" class=\"text-brand-dark\/50 text-sm hover:text-brand-dark transition-colors\">\u2190 Back<\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<p class=\"text-brand-dark\/70 text-sm mb-6 leading-relaxed\">Receive the specifications and a PDF overview of your unique floor design by e-mail.<\/p>\n\n\t\t\t\t<form id=\"config-form\" novalidate class=\"space-y-4\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<label for=\"form-name\" class=\"sr-only\">Your name<\/label>\n\t\t\t\t\t\t<input type=\"text\" id=\"form-name\" name=\"name\" placeholder=\"Your name\" autocomplete=\"name\" maxlength=\"120\" required class=\"w-full px-4 py-4 rounded-xl bg-brand-light border border-transparent focus:border-brand-accent focus:bg-white outline-none transition-colors\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<label for=\"form-email\" class=\"sr-only\">E-mail address<\/label>\n\t\t\t\t\t\t<input type=\"email\" id=\"form-email\" name=\"email\" placeholder=\"E-mail address\" autocomplete=\"email\" maxlength=\"254\" required class=\"w-full px-4 py-4 rounded-xl bg-brand-light border border-transparent focus:border-brand-accent focus:bg-white outline-none transition-colors\">\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<!-- Honeypot (kept off-screen; bots fill it, humans don't) -->\n\t\t\t\t\t<input type=\"text\" id=\"form-hp\" name=\"rc_hp\" tabindex=\"-1\" autocomplete=\"off\" aria-hidden=\"true\" class=\"rc-hp\">\n\n\t\t\t\t\t<label class=\"flex items-start gap-2 text-xs text-brand-dark\/70 leading-snug\">\n\t\t\t\t\t\t<input type=\"checkbox\" id=\"form-consent\" class=\"mt-0.5 shrink-0\">\n\t\t\t\t\t\t<span id=\"form-consent-text\">I agree that my details may be used to contact me about this design.<\/span>\n\t\t\t\t\t<\/label>\n\n\t\t\t\t\t<p id=\"form-error\" class=\"hidden text-sm text-red-600 font-medium\" role=\"alert\"><\/p>\n\t\t\t\t\t<div id=\"rc-captcha\" class=\"rc-captcha\"><\/div>\n\t\t\t\t\t<button type=\"submit\" id=\"form-submit\" class=\"w-full mt-4 py-4 bg-brand-dark text-white rounded-full font-medium hover:bg-brand-accent transition-colors shadow-lg shadow-brand-dark\/20\">Send request<\/button>\n\t\t\t\t<\/form>\n\n\t\t\t\t<!-- Later verder: magic link -->\n\t\t\t\t<div class=\"rc-save-later\">\n\t\t\t\t\t<p class=\"rc-save-title\">Not finished yet?<\/p>\n\t\t\t\t\t<p class=\"rc-save-text\">We will e-mail you a link so you can pick up where you left off.<\/p>\n\t\t\t\t\t<div class=\"rc-save-row\">\n\t\t\t\t\t\t<label for=\"save-email\" class=\"sr-only\">E-mail address<\/label>\n\t\t\t\t\t\t<input type=\"email\" id=\"save-email\" placeholder=\"you@email.com\" autocomplete=\"email\" maxlength=\"254\" class=\"rc-save-input\">\n\t\t\t\t\t\t<button type=\"button\" data-action=\"save-design\" id=\"save-design-btn\" class=\"rc-save-btn\">Save<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p id=\"save-msg\" class=\"rc-save-msg hidden\" role=\"status\"><\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<!-- SUCCESS -->\n\t\t\t<div id=\"config-step-success\" class=\"config-step text-center py-12\">\n\t\t\t\t<div class=\"w-20 h-20 bg-brand-accent\/10 text-brand-accent rounded-full flex items-center justify-center mx-auto mb-6\">\n\t\t\t\t\t<svg class=\"w-10 h-10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" \/><\/svg>\n\t\t\t\t<\/div>\n\t\t\t\t<h3 class=\"text-2xl font-medium mb-3\">Design sent!<\/h3>\n\t\t\t\t<p class=\"text-brand-dark\/70 mb-8 leading-relaxed\">We have e-mailed you the specifications and a PDF overview of your design.<\/p>\n\t\t\t\t<button type=\"button\" data-action=\"reset\" class=\"px-8 py-3 bg-brand-light text-brand-dark rounded-full font-medium hover:bg-brand-dark hover:text-white transition-colors\">Start a new design<\/button>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/template><\/recarp-configurator><\/div><\/div>\n<\/section><\/main>","protected":false},"excerpt":{"rendered":"<p>ReCarp Close ReCarp Corner Top Front Walls Undo Full screen Save Show walls All on All off The numbers are shown in the floor plan. Hover a wall to highlight it in 3D. Save your design? Your design has not been saved yet. We can e-mail you a link to continue later. Yes, save my [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-172","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/recarp.nl\/en\/wp-json\/wp\/v2\/pages\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/recarp.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/recarp.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/recarp.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/recarp.nl\/en\/wp-json\/wp\/v2\/comments?post=172"}],"version-history":[{"count":2,"href":"https:\/\/recarp.nl\/en\/wp-json\/wp\/v2\/pages\/172\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/recarp.nl\/en\/wp-json\/wp\/v2\/pages\/172\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/recarp.nl\/en\/wp-json\/wp\/v2\/media?parent=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}