Zum Inhalt springen
Veranstaltung
Home Staging
Auswanderer
Mobiliar
Alles anzeigen
Sofas
Sessel
Stühle
Esstische
Buffets
Niedrige Tische
Beistelltische
Außenbereich
Facebook
Instagram
022 518 00 84
E-Mail
info@swaap.ch
Swaap-Projekt
Menü
Schließen
Zurück
Veranstaltung
Home Staging
Auswanderer
Mobiliar
Alles anzeigen
Sofas
Sessel
Stühle
Esstische
Buffets
Niedrige Tische
Beistelltische
Außenbereich
Swaap-Projekt
Sich anmelden
022 518 00 84
E-Mail
info@swaap.ch
Facebook
Instagram
Startseite
Alles anzeigen
Sofas
Sessel
Stühle
Esstische
Buffets
Niedrige Tische
Beistelltische
Außenbereich
Swaap
Suche
Close
Suche
Close
Einreichen
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Swaap – Gestalten Sie Ihre Wohnung</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/de/pages/calculateur" hreflang="de" rel="alternate"><link href="https://swaap.ch/en/pages/calculateur" hreflang="en" rel="alternate"></head> <body> <!-- ======= PAGE D'ENTRÉE : rubrique Mobilier ======= --> <div class="landing" id="landing"> <div class="landing-inner"> <div class="crumb">Startseite <span>›</span> <b>Möbel</b></div> <div class="logo-row"><div class="logo">S</div><span>Swaap</span></div> <div class="eyebrow">Rubrik „Möbel“</div> <h1>Stellen Sie sich Ihre Wohnung zusammen –<br/>– Möbel für Möbel.</h1> <p>Sofas, Tische, Sessel und hochwertige Aufbewahrungsmöbel zur flexiblen Miete. Richten Sie jeden Raum ein, sehen Sie sich Ihr monatliches Budget in Echtzeit an und senden Sie Ihr Angebot mit einem Klick an Swaap.</p> <div class="landing-cta"> <button class="lp-primary" id="startBtn">Stellen Sie Ihre Unterkunft zusammen →</button> <a class="lp-secondary" href="https://swaap.ch/de/collections/mobilier" target="_blank">Den gesamten Katalog anzeigen</a> </div> <div class="landing-feat"> <span>🚚 Lieferung & Montage in der Schweiz</span> <span>🔁 Miete für 3, 6 oder 12 Monate</span> <span>⚡ Express-Pakete verfügbar</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>Stellen Sie Ihre Unterkunft zusammen</h1> <p>Premium-Möbel zum Mieten — Swaap</p> </div> </div> <div class="period-wrap"> <span class="period-lbl">Dauer</span> <div class="seg" id="periodSeg"> <button data-p="3">3 Monate</button> <button data-p="6">6 Monate</button> <button data-p="12" class="active">12 Monate</button> </div> </div> <div class="total-pill"> <div class="total-box"> <div class="lbl">Wohnraum insgesamt</div> <div class="val" id="hdrTotal">0 <span>CHF/Monat</span></div> </div> <a class="cta" id="ctaTop" href="https://swaap.ch/de/collections/mobilier" target="_blank">Abschließen</a> </div> </header> <div class="main"> <!-- CATALOGUE --> <aside class="catalog"> <div class="cat-head"> <h2>Möbelkatalog</h2> <p id="catCount">Fügen Sie Ihrem Plan Räume hinzu</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">+ Ein Dokument hinzufügen</button> <div class="roommenu" id="roomMenu"></div> </div> <span class="hint">Verschieben Sie die Möbel · fahren Sie mit der Maus über ein Möbelstück, um es zu drehen oder zu entfernen</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>Dieser Raum ist leer.<br/>Fügen Sie Möbel aus dem Katalog hinzu, um sie hier zu platzieren.</div> </div> </div> </div> </section> <!-- RECAP --> <aside class="recap"> <div class="recap-head"> <h2>Meine Wohnung <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">Mietdauer: 12 Monate</span><span class="amt" id="sumMonthly">0 CHF/Monat</span></div> <div class="srow"><span>Entweder beim Kauf</span><span class="amt" id="sumBuy">0 CHF</span></div> <div class="srow big"><span>Wohnkosten insgesamt</span><span class="amt" id="sumBig">0 <span style="font-size:13px;color:var(--muted);font-weight:600">CHF/Monat</span></span></div> <div class="buy-note">Versand- und Montagekosten fallen zusätzlich an, je nach Lieferort.</div> <a class="finalize" id="finalizeBtn" href="https://swaap.ch/de/collections/mobilier" target="_blank">Meine Auswahl abschließen →</a> <button class="clearbtn" id="clearBtn">Wohnung zurücksetzen</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">Ihren Vorschlag abschließen</h2> <p>Geben Sie bitte Ihre Kontaktdaten an: Ein Swaap-Berater wird sich mit Ihnen in Verbindung setzen, um die Lieferung und die Installation zu bestätigen.</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>Ihre Auswahl</h3> <div id="modalItemList" class="item-recap"></div> <div class="info-callout"> <span class="ic">⏱️</span> <div><b>Lieferzeiten. Bei</b> einigen Artikeln beträgt die Lieferzeit mehr als einen Monat. Für eine schnelle Lieferung bietet Swaap <b>Express-Pakete</b> an (Artikel auf Lager, Lieferung innerhalb weniger Tage). Geben Sie unten Ihre Präferenz an.</div> </div> </div> <!-- Coordonnées --> <div class="fsec"> <h3>Ihre Kontaktdaten</h3> <div class="frow"> <div class="fld"><label>Vorname <span class="req">*</span></label><input name="prenom" required=""></div> <div class="fld"><label>Name <span class="req">*</span></label><input name="nom" required=""></div> </div> <div class="frow"> <div class="fld"><label>E-Mail <span class="req">*</span></label><input type="email" name="email" required="" placeholder="vous@exemple.ch"></div> <div class="fld"><label>Telefon <span class="req">*</span></label><input type="tel" name="tel" required="" placeholder="+41 …"></div> </div> </div> <!-- Livraison --> <div class="fsec"> <h3>Liefer- und Aufstellungsadresse</h3> <div class="frow"> <div class="fld full"><label>Straße und Hausnummer <span class="req">*</span></label><input name="rue" required="" placeholder="Rue du Rhône 12"></div> </div> <div class="frow"> <div class="fld small"><label>PLZ <span class="req">*</span></label><input name="npa" required="" inputmode="numeric" pattern="[0-9]{4}" placeholder="1204" title="4 Ziffern"></div> <div class="fld"><label>Ort <span class="req">*</span></label><input name="ville" required="" placeholder="Genf"></div> </div> <div class="frow"> <div class="fld"><label>Etage</label><input name="etage" placeholder="z. B. 3. Klasse"></div> <div class="fld"><label>Aufzug</label> <select name="ascenseur"><option value="">—</option><option>Ja</option><option>Nein</option></select></div> </div> </div> <!-- Projet --> <div class="fsec"> <h3>Ihr Projekt</h3> <div class="frow"> <div class="fld"><label>Mietdauer</label> <select name="duree" id="fldDuree"><option value="3">3 Monate</option><option value="6">6 Monate</option><option value="12">12 Monate</option></select></div> <div class="fld"><label>Gewünschtes Lieferdatum</label><input type="date" name="date"></div> </div> <div class="fld full"><label>Art des Projekts</label> <div class="seg-radio"> <label><input type="radio" name="typeclient" value="Particulier" checked=""><span>Privatperson</span></label> <label><input type="radio" name="typeclient" value="Professionnel"><span>Beruflich</span></label> <label><input type="radio" name="typeclient" value="Événementiel"><span>Veranstaltungen</span></label> </div> </div> <div class="fld full" style="margin-top:12px"><label>Verfügbarkeit der Artikel</label> <div class="seg-radio"> <label><input type="radio" name="livraison" value="Standard" checked=""><span>Standard (Lieferzeiten je nach Artikel)</span></label> <label><input type="radio" name="livraison" value="Express"><span>⚡ Express-Paket (schnelle Lieferung)</span></label> </div> </div> <div class="fld full" style="margin-top:12px"><label>Nachricht / Anmerkungen</label> <textarea name="message" placeholder="Geben Sie Ihre Zugangsbedingungen, einen Einzugstermin und eventuelle Fragen an…"></textarea></div> </div> <label class="chk"><input type="checkbox" name="consent" required=""> <span>Ich bin damit einverstanden, dass Swaap mich bezüglich meiner Anfrage erneut kontaktiert und dass meine Daten gemäß den Datenschutzbestimmungen verarbeitet werden. <span class="req">*</span></span></label> </div> <div class="modal-foot"> <button type="submit" class="submit-btn">Meine Anfrage absenden →</button> <div class="foot-note">Unverbindlich · Ein Berater meldet sich innerhalb von 24 Arbeitsstunden bei Ihnen</div> </div> </form> </div> <!-- CONFIRMATION --> <div id="modalSuccess" style="display:none"> <div class="modal-body success"> <div class="chk-ic">✓</div> <h2 id="succTitle">Danke!</h2> <p id="succText">Ihre Anfrage wurde erfolgreich übermittelt. Ein Swaap-Berater wird sich in Kürze mit Ihnen in Verbindung setzen, um die Lieferung und die Installation zu vereinbaren.</p> <div class="ref">Referenz: <span id="succRef">—</span></div> <div class="s-recap" id="succRecap"></div> <button class="close2" id="succClose">Schließen</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/de/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>
