Skip to content
Event
Home Staging
Expatriates
Furniture
See all
Sofas
Armchairs
Chairs
Dining Tables
Sideboards
Coffee tables
Side Tables
Exterior
Facebook
Instagram
022 518 00 84
Email
info@swaap.ch
Swaap Project
Menu
Close
Back
Event
Home Staging
Expatriates
Furniture
See all
Sofas
Armchairs
Chairs
Dining Tables
Sideboards
Coffee tables
Side Tables
Exterior
Swaap Project
Login
022 518 00 84
Email
info@swaap.ch
Facebook
Instagram
Home
See all
Sofas
Armchairs
Chairs
Dining Tables
Sideboards
Coffee tables
Side Tables
Exterior
Swaap
Search
Close
Search
Close
Submit
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Swaap — Design Your Home</title> <style> @import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap'); :root{ /* Charte graphique Swaap */ --cream:#F9F7F5; --panel:#FFFFFF; --ink:#242B34; --navy:#152242; --muted:#6B727B; --accent:#D87059; --accent-dk:#C1573F; --accent-tint:#FBEEE9; --line:#EBE6E1; --line-2:#F3F0EC; --shadow:0 8px 30px rgba(21,34,66,.08); --shadow-sm:0 2px 8px rgba(21,34,66,.06); --radius:14px; --font-head:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif; --font-body:'Maven Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font-body); background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; } h1,h2,h3,.brand h1,.total-box .val,.landing h1,.landing .logo-row span,.modal-head h2,.success h2{font-family:var(--font-head)} /* Boutons principaux façon Swaap : anthracite, majuscules */ .cta,.add,.submit-btn,.close2,.lp-primary,.finalize{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.03em} .add{text-transform:none;letter-spacing:0} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img{display:block;max-width:100%} /* ---------- Layout ---------- */ .app{display:flex;flex-direction:column;height:100vh;overflow:hidden} header{ display:flex;align-items:center;gap:20px;padding:14px 22px; background:var(--panel);border-bottom:1px solid var(--line);z-index:20;flex-wrap:wrap; } .brand{display:flex;align-items:center;gap:11px} .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-dk)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:19px;letter-spacing:-1px} .brand h1{font-size:16px;font-weight:700;letter-spacing:-.2px} .brand p{font-size:11.5px;color:var(--muted);margin-top:1px} .period-wrap{display:flex;align-items:center;gap:10px;margin-left:6px} .period-lbl{font-size:12px;color:var(--muted);font-weight:600} .seg{display:flex;background:var(--line-2);border-radius:999px;padding:3px} .seg button{padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);transition:.15s} .seg button.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm)} .total-pill{margin-left:auto;display:flex;align-items:center;gap:16px} .total-box{text-align:right} .total-box .lbl{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px} .total-box .val{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.1} .total-box .val span{font-size:14px;font-weight:600;color:var(--muted)} .cta{background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-weight:700;font-size:14px; transition:.15s;white-space:nowrap;text-decoration:none;display:inline-block} .cta:hover{transform:translateY(-1px);background:#000} .main{display:grid;grid-template-columns:315px 1fr 330px;flex:1;min-height:0} /* ---------- Catalogue (left) ---------- */ .catalog{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0} .cat-head{padding:16px 18px 10px} .cat-head h2{font-size:14px;font-weight:700} .cat-head p{font-size:12px;color:var(--muted);margin-top:2px} .filters{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 12px} .chip{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted); background:var(--line-2);transition:.15s} .chip.active{background:var(--accent);color:#fff} .cat-list{overflow-y:auto;padding:4px 14px 20px;flex:1} .card{display:flex;gap:12px;padding:10px;border-radius:14px;transition:.15s;position:relative} .card:hover{background:var(--line-2)} .card .thumb{width:66px;height:66px;border-radius:11px;background:#F4F1EA center/cover no-repeat;flex:none;border:1px solid var(--line)} .card .info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center} .card .nm{font-size:13.5px;font-weight:600;line-height:1.25} .card .tp{font-size:11px;color:var(--muted);margin-top:1px} .card .pr{font-size:13px;font-weight:700;color:var(--accent-dk);margin-top:5px} .card .pr small{font-weight:600;color:var(--muted);font-size:11px} .add{align-self:center;width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff; font-size:20px;font-weight:400;line-height:1;display:flex;align-items:center;justify-content:center;flex:none;transition:.15s} .add:hover{background:var(--accent-dk);transform:scale(1.06)} /* ---------- Plan (center) ---------- */ .planwrap{display:flex;flex-direction:column;min-height:0;background: radial-gradient(circle at 30% 20%, #fff, var(--cream));position:relative} .plan-toolbar{display:flex;align-items:center;gap:10px;padding:11px 18px;flex-wrap:wrap;position:relative;z-index:10} .roomtabs{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .rtab{display:flex;align-items:center;gap:7px;padding:7px 11px 7px 13px;border-radius:11px;background:var(--panel); border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;transition:.15s;white-space:nowrap} .rtab:hover{border-color:var(--accent)} .rtab.active{border-color:var(--accent);background:#FBEEE9;color:var(--accent-dk)} .rtab .rico{font-size:14px;line-height:1} .rtab .rcount{font-size:10.5px;font-weight:700;background:var(--line-2);color:var(--muted);border-radius:999px;padding:1px 6px;min-width:17px;text-align:center} .rtab.active .rcount{background:var(--accent);color:#fff} .rtab .rclose{font-size:13px;color:var(--muted);width:16px;height:16px;border-radius:5px;display:flex;align-items:center;justify-content:center;margin-left:1px} .rtab .rclose:hover{background:#C0392B;color:#fff} .addroom{position:relative} .addroom-btn{padding:8px 13px;border-radius:11px;font-size:12.5px;font-weight:700;color:var(--accent-dk); background:#FBEEE9;border:1px dashed var(--accent);transition:.15s} .addroom-btn:hover{background:var(--accent);color:#fff;border-style:solid} .roommenu{position:absolute;top:calc(100% + 6px);left:0;background:var(--panel);border:1px solid var(--line); border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:190px;z-index:40;display:none} .roommenu.open{display:block} .roommenu .mi{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:13px;font-weight:600;width:100%;text-align:left;transition:.12s} .roommenu .mi:hover{background:var(--line-2)} .roommenu .mi .mico{font-size:16px} .roommenu .mi .mdim{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600} .hint{font-size:12px;color:var(--muted);margin-left:auto} .stage{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 24px 24px;min-height:0} .plan{position:relative;background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(0deg,transparent,transparent 39px,#F0ECE2 39px,#F0ECE2 40px), repeating-linear-gradient(90deg,transparent,transparent 39px,#F0ECE2 39px,#F0ECE2 40px); background-color:#fff;border:2px solid var(--ink);border-radius:6px;box-shadow:var(--shadow); touch-action:none;max-width:100%;max-height:100%} .plan .dim{position:absolute;font-size:11px;font-weight:700;color:var(--muted);background:var(--cream);padding:1px 6px;border-radius:5px} .plan .dim.w{top:-11px;left:50%;transform:translateX(-50%)} .plan .dim.h{left:-13px;top:50%;transform:translateY(-50%) rotate(-90deg)} .plan .roomtag{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;color:var(--accent-dk); background:#FBEEE9;border:1px solid var(--line);padding:3px 9px;border-radius:999px;pointer-events:none} .plan .empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; color:var(--muted);gap:8px;pointer-events:none;text-align:center;padding:20px} .plan .empty svg{opacity:.35} .piece{position:absolute;border-radius:8px;overflow:hidden;cursor:grab;border:1px solid var(--line); background:#fff center/contain no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.10);transition:box-shadow .15s,border-color .15s} .piece .plabel{position:absolute;bottom:0;left:0;right:0;font-size:9px;font-weight:700;color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.72));padding:8px 4px 3px;text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transition:opacity .15s} .piece:hover .plabel,.piece.sel .plabel{opacity:1} .piece.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 6px 16px rgba(0,0,0,.2);z-index:5} .piece .tools{position:absolute;top:-13px;right:-13px;display:none;gap:4px;z-index:6} .piece.sel .tools{display:flex} .ptool{width:26px;height:26px;border-radius:50%;background:var(--panel);box-shadow:var(--shadow-sm); display:flex;align-items:center;justify-content:center;font-size:13px;border:1px solid var(--line)} .ptool:hover{background:var(--accent);color:#fff} .ptool.del:hover{background:#C0392B;color:#fff} /* ---------- Recap (right) ---------- */ .recap{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0} .recap-head{padding:16px 18px 8px;border-bottom:1px solid var(--line-2)} .recap-head h2{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px} .badge{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;min-width:20px;text-align:center} .recap-list{overflow-y:auto;flex:1;padding:8px 12px} .rroom{display:flex;align-items:baseline;justify-content:space-between;margin:12px 6px 3px;gap:8px} .rroom .rr-nm{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);display:flex;align-items:center;gap:6px} .rroom .rr-sub{font-size:11.5px;font-weight:700;color:var(--accent-dk);white-space:nowrap} .rroom:first-child{margin-top:2px} .rr-empty{font-size:11.5px;color:var(--muted);margin:0 6px 6px;font-style:italic} .ritem{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px} .ritem:hover{background:var(--line-2)} .ritem .rt{width:40px;height:40px;border-radius:9px;background:#fff center/contain no-repeat;flex:none;border:1px solid var(--line)} .ritem .rn{flex:1;min-width:0} .ritem .rn a{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink);text-decoration:none;display:block} .ritem .rn a:hover{color:var(--accent-dk);text-decoration:underline} .ritem .rn .rp{font-size:11px;color:var(--muted);margin-top:2px} .qty{display:flex;align-items:center;gap:6px;flex:none} .qbtn{width:22px;height:22px;border-radius:7px;background:var(--line-2);font-size:14px;font-weight:700; display:flex;align-items:center;justify-content:center;color:var(--ink)} .qbtn:hover{background:var(--accent);color:#fff} .qn{font-size:13px;font-weight:700;min-width:16px;text-align:center} .recap-empty{padding:40px 24px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5} .summary{border-top:1px solid var(--line);padding:14px 18px 16px;background:var(--panel)} .srow{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:7px;color:var(--muted)} .srow.big{color:var(--ink);font-size:15px;font-weight:700;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)} .srow.big .amt{font-size:22px;font-weight:800;letter-spacing:-.5px} .srow .amt{font-weight:700;color:var(--ink)} .buy-note{font-size:11px;color:var(--muted);margin-top:2px} .finalize{width:100%;margin-top:12px;background:var(--accent);color:#fff;padding:13px;border-radius:12px; font-weight:700;font-size:14px;transition:.15s;text-align:center;text-decoration:none;display:block} .finalize:hover{background:var(--accent-dk)} .clearbtn{width:100%;margin-top:8px;font-size:12px;color:var(--muted);padding:6px} .clearbtn:hover{color:#C0392B} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0; background:var(--ink);color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;font-weight:600; box-shadow:var(--shadow);pointer-events:none;transition:.3s;z-index:50} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- Landing : rubrique Mobilier ---------- */ .landing{position:fixed;inset:0;z-index:200;overflow:auto;padding:34px 24px; background:radial-gradient(circle at 72% 12%, #fff, var(--cream));display:flex;align-items:center;justify-content:center} .landing-inner{max-width:780px;text-align:center;width:100%} .landing .crumb{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:22px} .landing .crumb span{margin:0 7px;opacity:.6} .landing .crumb b{color:var(--accent-dk)} .landing .logo-row{display:inline-flex;align-items:center;gap:11px;margin-bottom:24px} .landing .logo-row .logo{width:38px;height:38px;font-size:21px} .landing .logo-row span{font-size:18px;font-weight:800;letter-spacing:-.3px} .landing .eyebrow{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .landing h1{font-size:46px;font-weight:800;letter-spacing:-1.4px;line-height:1.04} .landing p{font-size:16px;color:var(--muted);line-height:1.6;max-width:580px;margin:20px auto 0} .landing-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px} .lp-primary{background:var(--accent);color:#fff;padding:16px 32px;border-radius:14px;font-size:16px;font-weight:800; transition:.15s;box-shadow:0 12px 30px rgba(216,112,89,.32)} .lp-primary:hover{background:var(--accent-dk);transform:translateY(-2px)} .lp-secondary{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:16px 26px;border-radius:14px; font-size:15px;font-weight:700;text-decoration:none;transition:.15s;display:inline-flex;align-items:center} .lp-secondary:hover{border-color:var(--accent)} .landing-feat{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:13px;color:var(--muted);font-weight:600} .landing-feat span{display:inline-flex;align-items:center;gap:7px} .landing-thumbs{display:flex;gap:13px;justify-content:center;margin-top:40px;flex-wrap:wrap} .landing-thumbs .lt{width:108px;height:108px;border-radius:16px;background:#fff center/contain no-repeat; border:1px solid var(--line);box-shadow:var(--shadow-sm)} @media(max-width:560px){ .landing h1{font-size:32px} .landing-thumbs .lt{width:78px;height:78px} } /* ---------- Modal / Formulaire ---------- */ .modal-ov{position:fixed;inset:0;background:rgba(43,42,40,.55);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;z-index:100;padding:24px} .modal-ov.open{display:flex} .modal{background:var(--panel);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.3); width:100%;max-width:640px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;position:relative;overflow:hidden} .modal-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:10px;background:var(--line-2); font-size:16px;color:var(--muted);display:flex;align-items:center;justify-content:center;z-index:3;transition:.15s} .modal-x:hover{background:#C0392B;color:#fff} .modal-head{padding:24px 26px 16px;border-bottom:1px solid var(--line-2)} .modal-head h2{font-size:19px;font-weight:800;letter-spacing:-.3px} .modal-head p{font-size:13px;color:var(--muted);margin-top:3px} .modal-recap{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .mr-chip{background:var(--line-2);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--muted);font-weight:600} .mr-chip b{display:block;font-size:15px;color:var(--ink);font-weight:800;margin-top:1px} .mr-chip.accent{background:#FBEEE9} .mr-chip.accent b{color:var(--accent-dk)} .modal-body{overflow-y:auto;padding:20px 26px 24px} .item-recap{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px} .ir-room{background:var(--line-2);padding:7px 13px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--ink);display:flex;justify-content:space-between} .ir-room span{color:var(--accent-dk)} .ir-item{display:flex;align-items:center;gap:10px;padding:8px 13px;border-top:1px solid var(--line-2);font-size:13px} .ir-item .ir-t{width:34px;height:34px;border-radius:8px;background:#fff center/contain no-repeat;border:1px solid var(--line);flex:none} .ir-item .ir-n{flex:1;min-width:0} .ir-item .ir-q{color:var(--muted);font-size:11.5px} .ir-item .ir-p{font-weight:700;white-space:nowrap} .info-callout{display:flex;gap:11px;align-items:flex-start;background:#FBEEE9;border:1px solid #F0D5CC;border-radius:12px; padding:12px 14px;font-size:12.5px;line-height:1.5;color:#8A5545} .info-callout .ic{font-size:18px;line-height:1;flex:none} .info-callout b{color:var(--ink);font-weight:700} form .fsec{margin-bottom:18px} form .fsec h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-dk);margin-bottom:11px} .frow{display:flex;gap:12px;flex-wrap:wrap} .fld{flex:1;min-width:150px;margin-bottom:12px;display:flex;flex-direction:column} .fld.full{flex-basis:100%} .fld.small{flex:0 0 130px;min-width:110px} .fld label{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:5px} .fld label .req{color:#C0392B} .fld input,.fld select,.fld textarea{font-family:inherit;font-size:13.5px;padding:10px 12px;border:1px solid var(--line); border-radius:10px;background:var(--cream);color:var(--ink);transition:.15s;width:100%} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(216,112,89,.16)} .fld textarea{resize:vertical;min-height:64px} .seg-radio{display:flex;gap:8px;flex-wrap:wrap} .seg-radio label{display:flex;align-items:center;gap:6px;padding:9px 13px;border:1px solid var(--line);border-radius:10px; font-size:13px;font-weight:600;cursor:pointer;background:var(--cream);transition:.15s;margin:0} .seg-radio label:hover{border-color:var(--accent)} .seg-radio input{display:none} .seg-radio input:checked + span{color:var(--accent-dk)} .seg-radio label:has(input:checked){border-color:var(--accent);background:#FBEEE9} .chk{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px} .chk input{width:16px;height:16px;margin-top:1px;flex:none;accent-color:var(--accent)} .chk a{color:var(--accent-dk)} .modal-foot{padding:16px 26px 22px;border-top:1px solid var(--line-2);background:var(--panel)} .submit-btn{width:100%;background:var(--accent);color:#fff;padding:14px;border-radius:12px;font-weight:800;font-size:15px;transition:.15s} .submit-btn:hover{background:var(--accent-dk)} .foot-note{font-size:11px;color:var(--muted);text-align:center;margin-top:9px} /* success */ .success{text-align:center;padding:40px 30px} .success .chk-ic{width:66px;height:66px;border-radius:50%;background:#EAF6EC;color:#2E9E4F;display:flex;align-items:center; justify-content:center;font-size:34px;margin:0 auto 18px} .success h2{font-size:22px;font-weight:800;letter-spacing:-.3px} .success p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5;max-width:420px;margin-left:auto;margin-right:auto} .success .ref{display:inline-block;margin-top:16px;background:var(--line-2);border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700} .success .ref span{color:var(--accent-dk)} .success .s-recap{margin-top:22px;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .success .s-recap .sr-line{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:var(--muted)} .success .s-recap .sr-line b{color:var(--ink)} .success .s-recap .sr-total{border-top:1px dashed var(--line);margin-top:8px;padding-top:10px;font-size:15px;font-weight:800;color:var(--ink)} .success .close2{margin-top:22px;background:var(--ink);color:#fff;padding:12px 26px;border-radius:11px;font-weight:700;font-size:14px} .success .close2:hover{background:#000} @media(max-width:1080px){ .main{grid-template-columns:260px 1fr 300px} } @media(max-width:900px){ .main{grid-template-columns:1fr;grid-template-rows:auto auto auto;overflow-y:auto} .app{height:auto;min-height:100vh;overflow:auto} .catalog,.recap{border:none;border-bottom:1px solid var(--line)} .cat-list{max-height:340px} .stage{min-height:60vh} } </style> <link href="https://swaap.ch/pages/calculateur" hreflang="fr" rel="alternate"><link href="https://swaap.ch/en/pages/calculateur" hreflang="en" rel="alternate"><link href="https://swaap.ch/de/pages/calculateur" hreflang="de" rel="alternate"></head> <body> <!-- ======= PAGE D'ENTRÉE : rubrique Mobilier ======= --> <div class="landing" id="landing"> <div class="landing-inner"> <div class="crumb">Home <span>›</span> <b>Furniture</b></div> <div class="logo-row"><div class="logo">S</div><span>Swaap</span></div> <div class="eyebrow">Furniture Section</div> <h1>Design your home—<br/>—piece by piece.</h1> <p>Premium sofas, tables, armchairs, and storage solutions available for flexible rental. Furnish every room, view your monthly budget in real time, and submit your proposal to Swaap with a single click.</p> <div class="landing-cta"> <button class="lp-primary" id="startBtn">Design Your Home →</button> <a class="lp-secondary" href="https://swaap.ch/en/collections/mobilier" target="_blank">View the entire catalog</a> </div> <div class="landing-feat"> <span>🚚 Delivery & Installation in Switzerland</span> <span>🔁 3-, 6-, or 12-month rentals</span> <span>⚡ Express Packages Available</span> </div> <div class="landing-thumbs" id="landingThumbs"></div> </div> </div> <div class="app"> <header> <div class="brand"> <div class="logo">S</div> <div> <h1>Design Your Home</h1> <p>Premium Furniture for Rent — Swaap</p> </div> </div> <div class="period-wrap"> <span class="period-lbl">Duration</span> <div class="seg" id="periodSeg"> <button data-p="3">3 months</button> <button data-p="6">6 months</button> <button data-p="12" class="active">12 months</button> </div> </div> <div class="total-pill"> <div class="total-box"> <div class="lbl">Total Housing</div> <div class="val" id="hdrTotal">0 <span>CHF/month</span></div> </div> <a class="cta" id="ctaTop" href="https://swaap.ch/en/collections/mobilier" target="_blank">Finalize</a> </div> </header> <div class="main"> <!-- CATALOGUE --> <aside class="catalog"> <div class="cat-head"> <h2>Furniture Catalog</h2> <p id="catCount">Add rooms to your floor plan</p> </div> <div class="filters" id="filters"></div> <div class="cat-list" id="catList"></div> </aside> <!-- PLAN --> <section class="planwrap"> <div class="plan-toolbar"> <div class="roomtabs" id="roomTabs"></div> <div class="addroom"> <button class="addroom-btn" id="addRoomBtn">+ Add a room</button> <div class="roommenu" id="roomMenu"></div> </div> <span class="hint">Drag the furniture · hover over a piece to rotate or remove it</span> </div> <div class="stage"> <div class="plan" id="plan"> <div class="roomtag" id="roomTag"></div> <div class="dim w" id="dimW"></div> <div class="dim h" id="dimH"></div> <div class="empty" id="planEmpty"> <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M3 9l9-6 9 6v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"></path><path d="M9 21V12h6v9"></path></svg> <div>This room is empty.<br/>Add furniture from the catalog to arrange it here.</div> </div> </div> </div> </section> <!-- RECAP --> <aside class="recap"> <div class="recap-head"> <h2>My Housing <span class="badge" id="recapBadge">0</span></h2> </div> <div class="recap-list" id="recapList"></div> <div class="summary"> <div class="srow"><span id="perLbl">12-Month Lease</span><span class="amt" id="sumMonthly">0 CHF/month</span></div> <div class="srow"><span>Or when purchasing</span><span class="amt" id="sumBuy">0 CHF</span></div> <div class="srow big"><span>Total housing</span><span class="amt" id="sumBig">0 <span style="font-size:13px;color:var(--muted);font-weight:600">CHF/month</span></span></div> <div class="buy-note">Shipping and installation fees apply, depending on the delivery location.</div> <a class="finalize" id="finalizeBtn" href="https://swaap.ch/en/collections/mobilier" target="_blank">Finalize my selection →</a> <button class="clearbtn" id="clearBtn">Reset the housing</button> </div> </aside> </div> </div> <div class="toast" id="toast"></div> <!-- ======= MODALE : formulaire de validation ======= --> <div class="modal-ov" id="modalOv"> <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle"> <button class="modal-x" id="modalX" aria-label="Fermer">✕</button> <!-- FORMULAIRE --> <div id="modalForm"> <div class="modal-head"> <h2 id="modalTitle">Finalize Your Proposal</h2> <p>Please enter your contact information: a Swaap representative will contact you to confirm delivery and installation.</p> <div class="modal-recap" id="modalRecap"></div> </div> <form id="propForm" novalidate=""> <div class="modal-body"> <!-- Récapitulatif détaillé --> <div class="fsec"> <h3>Your selection</h3> <div id="modalItemList" class="item-recap"></div> <div class="info-callout"> <span class="ic">⏱️</span> <div><b>Order Lead Times.</b> Some items have a lead time of more than one month. For faster delivery, Swaap offers <b>Express packs</b> (items in stock, delivered within a few days). Please indicate your preference below.</div> </div> </div> <!-- Coordonnées --> <div class="fsec"> <h3>Your contact information</h3> <div class="frow"> <div class="fld"><label>First Name <span class="req">*</span></label><input name="prenom" required=""></div> <div class="fld"><label>Last Name <span class="req">*</span></label><input name="nom" required=""></div> </div> <div class="frow"> <div class="fld"><label>Email <span class="req">*</span></label><input type="email" name="email" required="" placeholder="vous@exemple.ch"></div> <div class="fld"><label>Phone <span class="req">*</span></label><input type="tel" name="tel" required="" placeholder="+41 …"></div> </div> </div> <!-- Livraison --> <div class="fsec"> <h3>Shipping & Installation Address</h3> <div class="frow"> <div class="fld full"><label>Street and number <span class="req">*</span></label><input name="rue" required="" placeholder="12 Rue du Rhône"></div> </div> <div class="frow"> <div class="fld small"><label>ZIP Code <span class="req">*</span></label><input name="npa" required="" inputmode="numeric" pattern="[0-9]{4}" placeholder="1204" title="4 digits"></div> <div class="fld"><label>Location <span class="req">*</span></label><input name="ville" required="" placeholder="Geneva"></div> </div> <div class="frow"> <div class="fld"><label>Floor</label><input name="etage" placeholder="e.g., 9th grade"></div> <div class="fld"><label>Elevator</label> <select name="ascenseur"><option value="">—</option><option>Yes</option><option>No</option></select></div> </div> </div> <!-- Projet --> <div class="fsec"> <h3>Your Project</h3> <div class="frow"> <div class="fld"><label>Rental Period</label> <select name="duree" id="fldDuree"><option value="3">3 months</option><option value="6">6 months</option><option value="12">12 months</option></select></div> <div class="fld"><label>Preferred delivery date</label><input type="date" name="date"></div> </div> <div class="fld full"><label>Project Type</label> <div class="seg-radio"> <label><input type="radio" name="typeclient" value="Particulier" checked=""><span>Individual</span></label> <label><input type="radio" name="typeclient" value="Professionnel"><span>Professional</span></label> <label><input type="radio" name="typeclient" value="Événementiel"><span>Events</span></label> </div> </div> <div class="fld full" style="margin-top:12px"><label>Product Availability</label> <div class="seg-radio"> <label><input type="radio" name="livraison" value="Standard" checked=""><span>Standard (delivery times vary by item)</span></label> <label><input type="radio" name="livraison" value="Express"><span>⚡ Express Package (fast delivery)</span></label> </div> </div> <div class="fld full" style="margin-top:12px"><label>Message / Comments</label> <textarea name="message" placeholder="Please specify your access requirements, a move-in date, any questions you may have…"></textarea></div> </div> <label class="chk"><input type="checkbox" name="consent" required=""> <span>I agree to be contacted by Swaap regarding my request and to have my data processed in accordance with data protection regulations. <span class="req">*</span></span></label> </div> <div class="modal-foot"> <button type="submit" class="submit-btn">Submit my request →</button> <div class="foot-note">No obligation · An advisor will respond within 24 business hours</div> </div> </form> </div> <!-- CONFIRMATION --> <div id="modalSuccess" style="display:none"> <div class="modal-body success"> <div class="chk-ic">✓</div> <h2 id="succTitle">Thank you!</h2> <p id="succText">Your request has been successfully submitted. A Swaap representative will contact you very soon to finalize the delivery and installation.</p> <div class="ref">Reference: <span id="succRef">—</span></div> <div class="s-recap" id="succRecap"></div> <button class="close2" id="succClose">Close</button> </div> </div> </div> </div> <script> /* ============ DONNÉES : catalogue réel Swaap (collection Mobilier Premium) ============ */ const CDN = "https://cdn.shopify.com/s/files/1/0567/0151/7961/files/"; const CAT = { "Canapé": {w:210,h:95}, "Fauteuil": {w:82, h:82}, "Chaise": {w:48, h:52}, "Table à manger":{w:150,h:90}, "Table basse": {w:110,h:60} }; const PRODUCTS = [ {id:"canape-amsterdam",cat:"Canapé",nm:"Canapé — Amsterdam",p:{3:349,6:197,12:125},buy:2990,img:"Gemini_Generated_Image_h6fmhxh6fmhxh6fm_d4ec08c8-8249-4a31-8503-8ad8857160c9.jpg?v=1774431385"}, {id:"canape-new-york",cat:"Canapé",nm:"Canapé — New York",p:{3:320,6:181,12:115},buy:2740,img:"Gemini_Generated_Image_te5fmzte5fmzte5f.png?v=1779961793"}, {id:"canape-veliro",cat:"Canapé",nm:"Canapé — Veliro",p:{3:240,6:135,12:86},buy:2050,img:"S81320ZF06_3A.jpg?v=1773838073"}, {id:"canape-blok",cat:"Canapé",nm:"Canapé — Blok",p:{3:212,6:120,12:76},buy:1599,img:"Gemini_Generated_Image_gzkr2gzkr2gzkr2g.jpg?v=1774431627"}, {id:"canape-martina-1",cat:"Canapé",nm:"Canapé — Martina (noir)",p:{3:303,6:172,12:109},buy:2599,img:"S83130NR36_3A.jpg?v=1773837709"}, {id:"canape-martina",cat:"Canapé",nm:"Canapé — Martina (gris)",p:{3:304,6:172,12:109},buy:2599,img:"S83130HI39_3A.jpg?v=1773836839"}, {id:"fauteuil-granite",cat:"Fauteuil",nm:"Fauteuil — Granite",p:{3:128,6:72,12:46},buy:1095,img:"S0900076CC12_3A_dc147804-ca1b-4dca-824a-2a93ff3705d0.jpg?v=1774946528"}, {id:"fauteuil-melvia",cat:"Fauteuil",nm:"Fauteuil — Melvia",p:{3:96,6:54,12:34},buy:819,img:"40cc0729-e273-476d-9b5a-e8c4cbb993c0_ef42c251-2424-4f9c-9d43-4768018385fa.png?v=1772634211"}, {id:"fauteuil-assa",cat:"Fauteuil",nm:"Fauteuil — Assa",p:{3:59,6:33,12:21},buy:499,img:"assa-faut021m__ps_02_9ca80baf-d33e-4181-bb67-6e38bda7fbea.jpg?v=1777900400"}, {id:"chaise-asen",cat:"Fauteuil",nm:"Fauteuil — Asen",p:{3:48,6:27,12:17},buy:409,img:"Captured_ecran2026-03-05a12.10.45.png?v=1772709242"}, {id:"fauteuil-petal",cat:"Fauteuil",nm:"Fauteuil — Petal",p:{3:32,6:18,12:12},buy:270,img:"petal-faut026__ps_07_jpg.webp?v=1772710712"}, {id:"table-a-manger-urban",cat:"Table à manger",nm:"Table à manger — Urban",p:{3:262,6:148,12:94},buy:2240,img:"Captured_ecran2026-06-10a14.38.05.png?v=1781095225"}, {id:"table-a-manger-ellipse",cat:"Table à manger",nm:"Table à manger — Ellipse",p:{3:262,6:148,12:94},buy:2240,img:"Captured_ecran2026-06-10a14.05.11.png?v=1781093201"}, {id:"table-a-manger-scandi",cat:"Table à manger",nm:"Table à manger — Scandi",p:{3:232,6:131,12:83},buy:1990,img:"Captured_ecran2026-06-10a14.13.07.png?v=1781093626"}, {id:"table-basse-litto",cat:"Table basse",nm:"Table basse — Litto",p:{3:80,6:45,12:29},buy:685,img:"Captured_ecran2026-03-05a12.23.06.png?v=1780313140"}, {id:"table-basse-olir",cat:"Table basse",nm:"Table basse — Olir",p:{3:58,6:33,12:21},buy:489,img:"Captured_ecran2026-03-05a16.48.44.png?v=1780313262"}, {id:"table-basse-travertin",cat:"Table basse",nm:"Table basse — Travertin",p:{3:58,6:33,12:21},buy:500,img:"Captured_ecran2026-06-11a11.53.18.png?v=1781171667"}, {id:"chaise-bosca",cat:"Chaise",nm:"Chaise — Bosca",p:{3:64,6:36,12:23},buy:549,img:"1e6ff7e1-0090-4363-9807-297edc57dd67.png?v=1775733329"}, {id:"chaise-beige-edo",cat:"Chaise",nm:"Chaise en bois — Edo",p:{3:41,6:23,12:15},buy:350,img:"1_8fefcc5b-5c7e-4de3-b93e-1ea9fa8f519e.jpg?v=1770376766"}, {id:"chaise-en-bois-cloud",cat:"Chaise",nm:"Chaise en bois — Cloud",p:{3:30,6:17,12:10},buy:250,img:"1_2ab45d54-5e9e-4e0f-8b5d-2acb1fd4ed7b.jpg?v=1770376893"}, {id:"chaise-beige-rock",cat:"Chaise",nm:"Chaise beige — Rock",p:{3:28,6:16,12:10},buy:239,img:"Captured_ecran2024-03-07a15.16.38.png?v=1709821213"}, {id:"chaise-japandi",cat:"Chaise",nm:"Chaise — Japandi",p:{3:25,6:16,12:9},buy:219,img:"1_43630d47-e625-4f2b-a4d4-0e2b6c8d910d.jpg?v=1772713535"}, {id:"chaise-scandi",cat:"Chaise",nm:"Chaise — Scandi",p:{3:25,6:16,12:9},buy:219,img:"1_2297914a-cdfb-4278-b2fb-ec0ca3168388.jpg?v=1772711067"}, {id:"chaise-beige-japandi",cat:"Chaise",nm:"Chaise beige — Japandi",p:{3:25,6:16,12:9},buy:219,img:"1_a98b6d62-2e3e-4e7b-8b0c-9a2882667b70.jpg?v=1770376632"}, {id:"chaise-beige-japandi-1",cat:"Chaise",nm:"Chaise beige — Japandi II",p:{3:25,6:16,12:9},buy:219,img:"1_99cb375b-522e-440d-bf60-80c73b29b069.jpg?v=1770376686"}, {id:"chaise-beige-scandi",cat:"Chaise",nm:"Chaise beige — Scandi",p:{3:25,6:16,12:9},buy:219,img:"1_0bf6c323-48fd-4822-8286-ab6cbe80b85b.jpg?v=1770375836"}, {id:"chaise-beige-okura",cat:"Chaise",nm:"Chaise beige — Okura",p:{3:25,6:16,12:9},buy:219,img:"1_c99e63dc-768f-4e45-8bac-520508bcd95c.jpg?v=1770376546"}, {id:"chaise-whale",cat:"Chaise",nm:"Chaise taupe — Whale",p:{3:25,6:16,12:9},buy:219,img:"Captured_ecran2024-01-15a15.28.55.png?v=1705328976"}, {id:"chaise-beige-whale-1",cat:"Chaise",nm:"Chaise beige — Whale",p:{3:25,6:16,12:9},buy:219,img:"Captured_ecran2024-03-07a15.12.41.png?v=1774959569"}, {id:"chaise-beige-whale",cat:"Chaise",nm:"Chaise coco — Whale",p:{3:25,6:16,12:9},buy:219,img:"Captured_ecran2024-01-15a15.33.37.png?v=1705329280"} ]; PRODUCTS.forEach(p=>{p.img=CDN+p.img; p.url="https://swaap.ch/en/products/"+p.id; p.fw=CAT[p.cat].w; p.fh=CAT[p.cat].h; p.ratio=null;}); const BYID = Object.fromEntries(PRODUCTS.map(p=>[p.id,p])); /* ============ TYPES DE PIÈCES ============ */ const ROOM_TYPES = [ {key:"Salon", ico:"🛋️", w:550,h:450}, {key:"Chambre", ico:"🛏️", w:420,h:380}, {key:"Salle à manger", ico:"🍽️", w:430,h:400}, {key:"Bureau", ico:"💼", w:340,h:300}, {key:"Cuisine", ico:"🍳", w:360,h:320}, {key:"Chambre d'amis", ico:"🛌", w:380,h:340}, {key:"Entrée", ico:"🚪", w:280,h:240} ]; const RT_BYKEY = Object.fromEntries(ROOM_TYPES.map(r=>[r.key,r])); /* ============ ÉTAT ============ */ let period = 12; let rooms = []; // {id,type,name,w,h,items:[{uid,id,x,y,rot}]} let activeRoom = null; let uidSeq = 1, roomSeq = 1; let selectedUid = null; let activeFilter = "Tous"; function cur(){ return rooms.find(r=>r.id===activeRoom); } function fmt(n){return Math.round(n).toLocaleString('fr-CH').replace(/[\s ]/g,"'");} /* ============ PIÈCES (rooms) ============ */ function addRoom(typeKey){ const t=RT_BYKEY[typeKey]; const sameCount=rooms.filter(r=>r.type===typeKey).length; const name = sameCount ? `${typeKey} ${sameCount+1}` : typeKey; const room={id:roomSeq++,type:typeKey,name,w:t.w,h:t.h,items:[]}; rooms.push(room); activeRoom=room.id; selectedUid=null; renderRoomTabs(); sizePlan(); renderRecap(); updateTotals(); toast(name,'ajoutée'); } function removeRoom(id){ const room=rooms.find(r=>r.id===id); if(rooms.length<=1){ // on ne supprime pas la dernière : on la vide room.items=[]; selectedUid=null; renderRoomTabs(); renderPlan(); renderRecap(); updateTotals(); return; } rooms=rooms.filter(r=>r.id!==id); if(activeRoom===id){ activeRoom=rooms[0].id; } selectedUid=null; renderRoomTabs(); sizePlan(); renderRecap(); updateTotals(); } function selectRoom(id){ activeRoom=id; selectedUid=null; renderRoomTabs(); sizePlan(); } function renderRoomTabs(){ const el=document.getElementById('roomTabs'); el.innerHTML=''; rooms.forEach(r=>{ const t=RT_BYKEY[r.type]; const b=document.createElement('button'); b.className='rtab'+(r.id===activeRoom?' active':''); b.innerHTML=`<span class="rico">${t?t.ico:'🏠'}</span><span>${r.name}</span> <span class="rcount">${r.items.length}</span> ${rooms.length>1?'<span class="rclose" title="Supprimer">✕</span>':''}`; b.addEventListener('click',(e)=>{ if(e.target.classList.contains('rclose')){ e.stopPropagation(); removeRoom(r.id); } else selectRoom(r.id); }); el.appendChild(b); }); } /* menu "Ajouter une pièce" */ const roomMenu=document.getElementById('roomMenu'); ROOM_TYPES.forEach(t=>{ const b=document.createElement('button'); b.className='mi'; b.innerHTML=`<span class="mico">${t.ico}</span><span>${t.key}</span><span class="mdim">${(t.w/100).toString().replace('.',',')}×${(t.h/100).toString().replace('.',',')} m</span>`; b.onclick=()=>{ addRoom(t.key); roomMenu.classList.remove('open'); }; roomMenu.appendChild(b); }); document.getElementById('addRoomBtn').addEventListener('click',(e)=>{ e.stopPropagation(); roomMenu.classList.toggle('open'); }); document.addEventListener('click',(e)=>{ if(!e.target.closest('.addroom')) roomMenu.classList.remove('open'); }); /* ============ CATALOGUE ============ */ const cats = ["Tous", ...Object.keys(CAT)]; const filtersEl = document.getElementById('filters'); cats.forEach(c=>{ const b=document.createElement('button'); b.className='chip'+(c===activeFilter?' active':''); b.textContent=c; b.onclick=()=>{activeFilter=c; document.querySelectorAll('.chip').forEach(x=>x.classList.toggle('active',x.textContent===c)); renderCatalog();}; filtersEl.appendChild(b); }); function renderCatalog(){ const list=document.getElementById('catList'); list.innerHTML=''; const items = PRODUCTS.filter(p=>activeFilter==="Tous"||p.cat===activeFilter); document.getElementById('catCount').textContent = items.length+" pièces disponibles"; items.forEach(p=>{ const c=document.createElement('div'); c.className='card'; c.innerHTML=` <div class="thumb" style="background-image:url('${p.img}')"></div> <div class="info"> <div class="nm">${p.nm}</div> <div class="tp">${p.cat}</div> <div class="pr">${p.p[period]} <small>CHF/mois</small></div> </div> <button class="add" title="Ajouter à la pièce active">+</button>`; c.querySelector('.add').onclick=()=>addPiece(p.id); list.appendChild(c); }); } /* ============ PLAN ============ */ const plan=document.getElementById('plan'); function planScale(){ return plan.getBoundingClientRect().width / cur().w; } function dispDims(p){ // dimensions affichées en cm (largeur = empreinte ; hauteur = ratio image) const ratio = p.ratio || (p.fw/p.fh); return { w:p.fw, h:p.fw/ratio }; } function sizePlan(){ const room=cur(); const stage=plan.parentElement.getBoundingClientRect(); const pad=48, availW=stage.width-pad, availH=stage.height-pad; const ratio=room.w/room.h; let w=availW, h=w/ratio; if(h>availH){h=availH; w=h*ratio;} plan.style.width=w+'px'; plan.style.height=h+'px'; const fm=v=>(v/100).toString().replace('.',','); document.getElementById('dimW').textContent=fm(room.w)+' m'; document.getElementById('dimH').textContent=fm(room.h)+' m'; const t=RT_BYKEY[room.type]; document.getElementById('roomTag').textContent=(t?t.ico+' ':'')+room.name; renderPlan(); } function addPiece(id){ const p=BYID[id], room=cur(); const n=room.items.length; const x=Math.max(p.fw/2,Math.min(room.w-p.fw/2, room.w/2 + (n%5-2)*35)); const y=Math.max(p.fh/2,Math.min(room.h-p.fh/2, room.h/2 + (Math.floor(n/5)%4-1)*35)); const uid=uidSeq++; room.items.push({uid,id,x,y,rot:0}); selectedUid=uid; renderRoomTabs(); renderPlan(); renderRecap(); updateTotals(); toast(p.nm.split(' — ')[1]||p.nm, 'ajouté'); } function removePiece(uid){ const room=cur(); room.items=room.items.filter(x=>x.uid!==uid); if(selectedUid===uid) selectedUid=null; renderRoomTabs(); renderPlan(); renderRecap(); updateTotals(); } function renderPlan(){ const room=cur(), sc=planScale(); plan.querySelectorAll('.piece').forEach(e=>e.remove()); document.getElementById('planEmpty').style.display = room.items.length?'none':'flex'; room.items.forEach(it=>{ const p=BYID[it.id]; const d=dispDims(p); it._w=d.w; it._h=d.h; // cm affichés (pour les limites) const el=document.createElement('div'); el.className='piece'+(it.uid===selectedUid?' sel':''); el.style.width=(d.w*sc)+'px'; el.style.height=(d.h*sc)+'px'; el.style.left=(it.x*sc)+'px'; el.style.top=(it.y*sc)+'px'; el.style.transform=`translate(-50%,-50%) rotate(${it.rot}deg)`; el.style.backgroundImage=`url('${p.img}')`; el.dataset.uid=it.uid; el.innerHTML=`<span class="plabel">${p.nm.split(' — ')[1]||p.nm}</span> <div class="tools"> <button class="ptool rot" title="Pivoter">⟳</button> <button class="ptool del" title="Retirer">✕</button> </div>`; el.querySelector('.rot').onclick=(e)=>{e.stopPropagation(); it.rot=(it.rot+90)60; renderPlan();}; el.querySelector('.del').onclick=(e)=>{e.stopPropagation(); removePiece(it.uid);}; attachDrag(el,it); plan.appendChild(el); }); } function attachDrag(el,it){ let start=null; const down=(e)=>{ if(e.target.classList.contains('ptool'))return; e.preventDefault(); selectedUid=it.uid; renderPlan(); const sc=planScale(); start={px:e.clientX,py:e.clientY,x:it.x,y:it.y,sc}; window.addEventListener('pointermove',move); window.addEventListener('pointerup',up); }; const move=(e)=>{ if(!start)return; const room=cur(); const dx=(e.clientX-start.px)/start.sc, dy=(e.clientY-start.py)/start.sc; let nx=start.x+dx, ny=start.y+dy; const rotated=it.rot0!==0; const halfW=(rotated?it._h:it._w)/2, halfH=(rotated?it._w:it._h)/2; nx=Math.max(halfW,Math.min(room.w-halfW,nx)); ny=Math.max(halfH,Math.min(room.h-halfH,ny)); it.x=nx; it.y=ny; const active=plan.querySelector(`.piece[data-uid='${it.uid}']`); if(active){active.style.left=(nx*start.sc)+'px'; active.style.top=(ny*start.sc)+'px';} }; const up=()=>{start=null; window.removeEventListener('pointermove',move); window.removeEventListener('pointerup',up);}; el.addEventListener('pointerdown',down); } plan.addEventListener('pointerdown',(e)=>{ if(e.target===plan||e.target.classList.contains('roomtag')){selectedUid=null; renderPlan();} }); /* ============ RECAP ============ */ function renderRecap(){ const list=document.getElementById('recapList'); const totalItems=rooms.reduce((s,r)=>s+r.items.length,0); document.getElementById('recapBadge').textContent=totalItems; if(!totalItems){ list.innerHTML='<div class="recap-empty">Aucun meuble pour l\'instant.<br>Ajoutez des pièces et composez votre logement.</div>'; return; } let html=''; rooms.forEach(r=>{ const t=RT_BYKEY[r.type]; const sub=r.items.reduce((s,it)=>s+BYID[it.id].p[period],0); html+=`<div class="rroom"><span class="rr-nm">${t?t.ico:'🏠'} ${r.name}</span> <span class="rr-sub">${sub?fmt(sub)+' CHF/mois':'—'}</span></div>`; if(!r.items.length){ html+='<div class="rr-empty">Aucun meuble dans cette pièce.</div>'; return; } const g={}; r.items.forEach(it=>{ g[it.id]=(g[it.id]||0)+1; }); Object.keys(g).forEach(id=>{ const p=BYID[id], q=g[id]; html+=`<div class="ritem"> <div class="rt" style="background-image:url('${p.img}')"></div> <div class="rn"><a href="${p.url}" target="_blank">${p.nm}</a> <div class="rp">${p.p[period]} CHF/mois × ${q} = <b>${fmt(p.p[period]*q)} CHF</b></div></div> <div class="qty"> <button class="qbtn" onclick="chgQty(${r.id},'${id}',-1)">–</button> <span class="qn">${q}</span> <button class="qbtn" onclick="chgQty(${r.id},'${id}',1)">+</button> </div></div>`; }); }); list.innerHTML=html; } function chgQty(roomId,id,d){ const prev=activeRoom; activeRoom=roomId; if(d>0){ addPiece(id); } else { const room=cur(); for(let i=room.items.length-1;i>=0;i--){ if(room.items[i].id===id){ removePiece(room.items[i].uid); break; } } } if(rooms.find(r=>r.id===prev)) { activeRoom=prev; renderRoomTabs(); sizePlan(); } } /* ============ TOTAUX ============ */ function updateTotals(){ let monthly=0, buy=0; rooms.forEach(r=>r.items.forEach(it=>{ const p=BYID[it.id]; monthly+=p.p[period]; buy+=p.buy; })); document.getElementById('hdrTotal').innerHTML=`${fmt(monthly)} <span>CHF/mois</span>`; document.getElementById('sumMonthly').textContent=`${fmt(monthly)} CHF/mois`; document.getElementById('sumBuy').textContent=`${fmt(buy)} CHF`; document.getElementById('sumBig').innerHTML=`${fmt(monthly)} <span style="font-size:13px;color:var(--muted);font-weight:600">CHF/mois</span>`; document.getElementById('perLbl').textContent=`Location ${period} mois`; } /* ============ ÉVÉNEMENTS ============ */ document.getElementById('periodSeg').addEventListener('click',(e)=>{ const b=e.target.closest('button'); if(!b)return; period=+b.dataset.p; document.querySelectorAll('#periodSeg button').forEach(x=>x.classList.toggle('active',x===b)); renderCatalog(); renderRecap(); updateTotals(); }); document.getElementById('clearBtn').onclick=()=>{ if(rooms.some(r=>r.items.length)||rooms.length>1){ if(confirm('Réinitialiser entièrement le logement ?')){ rooms=[]; roomSeq=1; selectedUid=null; addRoom("Salon"); } } }; function toast(name,verb){ const t=document.getElementById('toast'); t.textContent=`${name} ${verb} ✓`; t.classList.add('show'); clearTimeout(t._t); t._t=setTimeout(()=>t.classList.remove('show'),1600); } window.addEventListener('resize',()=>sizePlan()); /* ============ Préchargement des ratios d'images (pour un affichage complet, sans rognage) ============ */ let _rt; function scheduleRerender(){ clearTimeout(_rt); _rt=setTimeout(()=>renderPlan(),120); } PRODUCTS.forEach(p=>{ const im=new Image(); im.onload=()=>{ if(im.naturalWidth&&im.naturalHeight){ p.ratio=im.naturalWidth/im.naturalHeight; scheduleRerender(); } }; im.src=p.img; }); /* ============ MODALE : formulaire de validation ============ */ const modalOv=document.getElementById('modalOv'); let modalDur=period; function openModal(){ const totalItems=rooms.reduce((s,r)=>s+r.items.length,0); if(!totalItems){ toast('Ajoutez d\'abord des meubles','—'); return; } modalDur=period; document.getElementById('propForm').reset(); document.getElementById('fldDuree').value=String(period); buildModalRecap(); document.getElementById('modalForm').style.display=''; document.getElementById('modalSuccess').style.display='none'; modalOv.classList.add('open'); } function closeModal(){ modalOv.classList.remove('open'); } function buildModalRecap(){ const dur=modalDur; let monthly=0,items=0; rooms.forEach(r=>r.items.forEach(it=>{const p=BYID[it.id];monthly+=p.p[dur];items++;})); const nRooms=rooms.filter(r=>r.items.length).length; document.getElementById('modalRecap').innerHTML= `<div class="mr-chip accent">Total mensuel<b>${fmt(monthly)} CHF/mois</b></div> <div class="mr-chip">Meubles<b>${items}</b></div> <div class="mr-chip">Pièces<b>${nRooms}</b></div> <div class="mr-chip">Durée<b>${dur} mois</b></div>`; let html=''; rooms.forEach(r=>{ if(!r.items.length)return; const t=RT_BYKEY[r.type]; const sub=r.items.reduce((s,it)=>s+BYID[it.id].p[dur],0); html+=`<div class="ir-room">${t?t.ico:''} ${r.name}<span>${fmt(sub)} CHF/mois</span></div>`; const g={}; r.items.forEach(it=>{g[it.id]=(g[it.id]||0)+1;}); Object.keys(g).forEach(id=>{const p=BYID[id],q=g[id]; html+=`<div class="ir-item"><div class="ir-t" style="background-image:url('${p.img}')"></div> <div class="ir-n">${p.nm} <span class="ir-q">× ${q}</span></div> <div class="ir-p">${fmt(p.p[dur]*q)} CHF/mois</div></div>`;}); }); document.getElementById('modalItemList').innerHTML=html; } document.getElementById('fldDuree').addEventListener('change',(e)=>{modalDur=+e.target.value; buildModalRecap();}); document.getElementById('finalizeBtn').addEventListener('click',(e)=>{e.preventDefault(); openModal();}); document.getElementById('ctaTop').addEventListener('click',(e)=>{e.preventDefault(); openModal();}); document.getElementById('modalX').addEventListener('click',closeModal); document.getElementById('succClose').addEventListener('click',closeModal); modalOv.addEventListener('click',(e)=>{ if(e.target===modalOv) closeModal(); }); document.addEventListener('keydown',(e)=>{ if(e.key==='Escape'&&modalOv.classList.contains('open')) closeModal(); }); document.getElementById('propForm').addEventListener('submit',async function(e){ e.preventDefault(); if(!this.checkValidity()){ this.reportValidity(); return; } const fd=new FormData(this); const btn=this.querySelector('.submit-btn'); const old=btn.textContent; btn.textContent='Envoi en cours…'; btn.disabled=true; const ok=await sendContact(fd); btn.textContent=old; btn.disabled=false; if(!ok){ openMailto(fd); } // repli : ouvre l'e-mail pré-rempli si l'envoi natif échoue showSuccess(fd); }); async function sendContact(fd){ const dur=modalDur, sel=buildSelectionText(dur); const body=[ 'NOUVELLE DEMANDE — Configurateur Swaap (rubrique Mobilier)','', 'PROJET : '+(fd.get('typeclient')||'')+' · Durée '+dur+' mois · Dispo. '+(fd.get('livraison')||'Standard'), 'Date souhaitée : '+(fd.get('date')||'—'),'', 'LIVRAISON & INSTALLATION', ' Adresse : '+(fd.get('rue')||''), ' NPA/Loc.: '+(fd.get('npa')||'')+' '+(fd.get('ville')||''), ' Étage : '+(fd.get('etage')||'—')+' Ascenseur : '+(fd.get('ascenseur')||'—'),'', 'MESSAGE : '+(fd.get('message')||'—'),'', 'SÉLECTION ('+sel.items+' meubles)', '-----------------------------------', sel.text, 'TOTAL LOCATION : '+fmt(sel.monthly)+' CHF/mois ('+dur+' mois)', 'Valeur à l\'achat équivalente : '+fmt(sel.buy)+' CHF', 'Frais de livraison & installation en sus, selon le lieu.' ].join('\n'); const params=new URLSearchParams(); params.append('form_type','contact'); params.append('utf8','✓'); params.append('contact[email]', fd.get('email')||''); params.append('contact[Nom]', ((fd.get('prenom')||'')+' '+(fd.get('nom')||'')).trim()); params.append('contact[Téléphone]', fd.get('tel')||''); params.append('contact[Type]', fd.get('typeclient')||''); params.append('contact[Total mensuel]', fmt(sel.monthly)+' CHF/mois ('+dur+' mois)'); params.append('contact[body]', body); try{ const res=await fetch('/contact', {method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body:params.toString()}); return res.ok || res.status===302 || res.status===0; // Shopify redirige (302) en cas de succès }catch(err){ return false; } } function buildSelectionText(dur){ const lines=[]; let monthly=0, buy=0, items=0; rooms.forEach(r=>{ if(!r.items.length)return; const t=RT_BYKEY[r.type]; lines.push((t?t.ico+' ':'')+r.name.toUpperCase()); const g={}; r.items.forEach(it=>{g[it.id]=(g[it.id]||0)+1;}); Object.keys(g).forEach(id=>{const p=BYID[id],q=g[id]; monthly+=p.p[dur]*q; buy+=p.buy*q; items+=q; lines.push(' - '+p.nm+' x'+q+' -> '+fmt(p.p[dur]*q)+' CHF/mois');}); lines.push(''); }); return {text:lines.join('\n'), monthly, buy, items}; } function openMailto(fd){ const dur=modalDur, sel=buildSelectionText(dur); const body=[ 'NOUVELLE DEMANDE — Configurateur Swaap (rubrique Mobilier)', '=========================================================','', 'COORDONNÉES', ' Prénom : '+(fd.get('prenom')||''), ' Nom : '+(fd.get('nom')||''), ' E-mail : '+(fd.get('email')||''), ' Tél. : '+(fd.get('tel')||''),'', 'LIVRAISON & INSTALLATION', ' Adresse : '+(fd.get('rue')||''), ' NPA/Loc.: '+(fd.get('npa')||'')+' '+(fd.get('ville')||''), ' Étage : '+(fd.get('etage')||'—')+' Ascenseur : '+(fd.get('ascenseur')||'—'),'', 'PROJET', ' Type : '+(fd.get('typeclient')||''), ' Durée : '+dur+' mois', ' Date souh. : '+(fd.get('date')||'—'), ' Dispo. : '+(fd.get('livraison')||'Standard'), ' Message : '+(fd.get('message')||'—'),'', 'SÉLECTION ('+sel.items+' meubles)', '---------------------------------------------------------', sel.text, 'TOTAL LOCATION : '+fmt(sel.monthly)+' CHF/mois ('+dur+' mois)', 'Valeur à l\'achat équivalente : '+fmt(sel.buy)+' CHF', 'Frais de livraison & installation en sus, selon le lieu.' ].join('\n'); const subject='Demande configurateur — '+(fd.get('prenom')||'')+' '+(fd.get('nom')||'')+' ('+fmt(sel.monthly)+' CHF/mois)'; const a=document.createElement('a'); a.href='mailto:info@swaap.ch?subject='+encodeURIComponent(subject)+'&body='+encodeURIComponent(body); a.style.display='none'; document.body.appendChild(a); a.click(); a.remove(); } function showSuccess(fd){ const dur=modalDur; let monthly=0,buy=0,items=0; rooms.forEach(r=>r.items.forEach(it=>{const p=BYID[it.id];monthly+=p.p[dur];buy+=p.buy;items++;})); const ref='SWA-'+Math.floor(100000+Math.random()*899999); document.getElementById('succTitle').textContent='Merci '+(fd.get('prenom')||'')+' !'; const exp = fd.get('livraison')==='Express' ? ' Vous avez sélectionné un <b>pack Express</b> : nous vérifions les disponibilités immédiates pour une livraison rapide.' : ' Certains articles pouvant avoir un délai de commande supérieur à un mois, nous vous confirmerons les dates précises.'; document.getElementById('succText').innerHTML='Votre demande a bien été envoyée à <b>info@swaap.ch</b>. Un conseiller Swaap vous recontacte sous 24 h ouvrées pour organiser la livraison à '+(fd.get('npa')||'')+' '+(fd.get('ville')||'')+'.'+exp; document.getElementById('succRef').textContent=ref; document.getElementById('succRecap').innerHTML= `<div class="sr-line"><span>Meubles / pièces</span><b>${items} · ${rooms.filter(r=>r.items.length).length}</b></div> <div class="sr-line"><span>Durée de location</span><b>${dur} mois</b></div> <div class="sr-line"><span>Disponibilité</span><b>${fd.get('livraison')||'Standard'}</b></div> <div class="sr-line"><span>Valeur à l'achat équivalente</span><b>${fmt(buy)} CHF</b></div> <div class="sr-line sr-total"><span>Total location</span><span>${fmt(monthly)} CHF/mois</span></div>`; document.getElementById('modalForm').style.display='none'; document.getElementById('modalSuccess').style.display=''; } /* ============ PAGE D'ENTRÉE ============ */ document.getElementById('startBtn').addEventListener('click',()=>{ document.getElementById('landing').style.display='none'; sizePlan(); }); (function(){ const lt=document.getElementById('landingThumbs'); ['canape-amsterdam','table-a-manger-ellipse','fauteuil-melvia','table-basse-litto','chaise-bosca'].forEach(id=>{ const p=BYID[id]; if(!p)return; const d=document.createElement('div'); d.className='lt'; d.style.backgroundImage=`url('${p.img}')`; lt.appendChild(d); }); })(); /* ============ INIT ============ */ addRoom("Salon"); // pièce de départ renderCatalog(); renderRecap(); updateTotals(); </script> <style> /* Black banner behind the review stars */.ss-hero-15 .review {background-color: #000; /* black background */ color: #fff; /* make text/icons white */ width: 100%; /* full width */ text-align: center; /* center stars */ padding: 8px 0; /* spacing top/bottom */} /* Make sure stars remain visible */.ss-hero-15 .review svg,.ss-hero-15 .review span {color: #fff !important; /* force stars/text white */} </style> <div id="shopify-block-AZFd6aGFnS21FS1hVa__13768625480086291342" class="shopify-block shopify-app-block"><script> window['ShopifyForms'] = { ...window['ShopifyForms'], currentPageType: "page" }; </script> </div></body>
