benjamin.harris
/
modulos_internal


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830
							<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HOME ROUGH EDITOR v0.95</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> -->
  <link rel="stylesheet" href="css/style.css">
</head>

<body style="background:#f2eee5;margin:0;padding:0; ">

  <header>Make by Home Rough Editor Ver.0.95</header>

  <svg id="lin" viewBox="0 0 1100 700" preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg"
    style="z-index:2;margin:0;padding:0;width:100vw;height:100vh;position:absolute;top:0;left:0;right:0;bottom:0">

    <defs>
      <linearGradient id="gradientRed" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#e65d5e" stop-opacity="1" />
        <stop offset="100%" stop-color="#e33b3c" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientYellow" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#FDEB71" stop-opacity="1" />
        <stop offset="100%" stop-color="#F8D800" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientGreen" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#c0f7d9" stop-opacity="1" />
        <stop offset="100%" stop-color="#6ce8a3" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientSky" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#c4e0f4" stop-opacity="1" />
        <stop offset="100%" stop-color="#87c8f7" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientOrange" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#f9ad67" stop-opacity="1" />
        <stop offset="100%" stop-color="#f97f00" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientWhite" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
        <stop offset="100%" stop-color="#f0f0f0" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientGrey" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#666" stop-opacity="1" />
        <stop offset="100%" stop-color="#aaa" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientBlue" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#4f72a6" stop-opacity="1" />
        <stop offset="100%" stop-color="#365987" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientPurple" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#E2B0FF" stop-opacity="1" />
        <stop offset="100%" stop-color="#9F44D3" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientPink" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#f6c4dd" stop-opacity="1" />
        <stop offset="100%" stop-color="#f699c7" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientBlack" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#3c3b3b" stop-opacity="1" />
        <stop offset="100%" stop-color="#000000" stop-opacity="1" />
      </linearGradient>
      <linearGradient id="gradientNeutral" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#dbc6a0" stop-opacity="1" />
        <stop offset="100%" stop-color="#c69d56" stop-opacity="1" />
      </linearGradient>

      <pattern id="grass" patternUnits="userSpaceOnUse" width="256" height="256">
        <image
          xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWh5nEP_Trwo96CJjev6lnKe0_dRdA63RJFaoc3-msedgxveJd"
          x="0" y="0" width="256" height="256" />
      </pattern>
      <pattern id="wood" patternUnits="userSpaceOnUse" width="32" height="256">
        <image
          xlink:href="https://orig00.deviantart.net/e1f2/f/2015/164/8/b/old_oak_planks___seamless_texture_by_rls0812-d8x6htl.jpg"
          x="0" y="0" width="256" height="256" />
      </pattern>
      <pattern id="tiles" patternUnits="userSpaceOnUse" width="25" height="25">
        <image
          xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrkoI2Eiw8ya3J_swhfpZdi_ug2sONsI6TxEd1xN5af3DX9J3R"
          x="0" y="0" width="256" height="256" />
      </pattern>
      <pattern id="granite" patternUnits="userSpaceOnUse" width="256" height="256">
        <image
          xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9_nEMhnWVV47lxEn5T_HWxvFwkujFTuw6Ff26dRTl4rDaE8AdEQ"
          x="0" y="0" width="256" height="256" />
      </pattern>
      <pattern id="smallGrid" width="60" height="60" patternUnits="userSpaceOnUse">
        <path d="M 60 0 L 0 0 0 60" fill="none" stroke="#777" stroke-width="0.25" />
      </pattern>
      <pattern id="grid" width="180" height="180" patternUnits="userSpaceOnUse">
        <rect width="180" height="180" fill="url(#smallGrid)" />
        <path d="M 200 10 L 200 0 L 190 0 M 0 10 L 0 0 L 10 0 M 0 190 L 0 200 L 10 200 M 190 200 L 200 200 L 200 190"
          fill="none" stroke="#999" stroke-width="0.8" />
      </pattern>
      <pattern id="hatch" width="5" height="5" patternTransform="rotate(50 0 0)" patternUnits="userSpaceOnUse">
        <path d="M 0 0 L 0 5 M 10 0 L 10 10 Z" style="stroke:#666;stroke-width:5;" />
      </pattern>
    </defs>
    <g id="boxgrid">
      <rect width="8000" height="5000" x="-3500" y="-2000" fill="url(#grid)" />
    </g>
    <g id="boxpath"></g>
    <g id="boxSurface"></g>
    <g id="boxRoom"></g>
    <g id="boxwall"></g>
    <g id="boxcarpentry"></g>
    <g id="boxEnergy"></g>
    <g id="boxFurniture"></g>
    <g id="boxbind"></g>
    <g id="boxArea"></g>
    <g id="boxRib"></g>
    <g id="boxScale"></g>
    <g id="boxText"></g>
    <g id="boxDebug"></g>
  </svg>

  <div id="areaValue"></div>

  <div id="reportTools" class="leftBox" style="width:500px;overflow-y: scroll;overflow-x: hidden">
    <h2><i class="fa fa-calculator" aria-hidden="true"></i> Report plan.</h2>
    <br /><br />
    <h2 class="toHide" id="reportTotalSurface" style="display:none"></h2>
    <h2 class="toHide" id="reportNumberSurface" style="display:none"></h2>
    <hr />
    <section id="reportRooms" class="toHide" style="display:none">
    </section>
    <button class="btn btn-info fully" style="margin-top:50px"
      onclick="$('#reportTools').hide('500', function(){$('#panel').show(300);});mode = 'select_mode';"><i
        class="fa fa-2x fa-backward" aria-hidden="true"></i></button>
  </div>

  <!-- Combined Import Modal -->
  <div class="modal fade" id="combinedImportModal" tabindex="-1" aria-labelledby="combinedImportLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="combinedImportLabel">Import Floorplan JSON + Image</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Floorplan JSON</label>
            <input type="file" id="combined_json_input" accept=".json" class="form-control" />
            <small id="combined_json_name" class="form-text text-muted"></small>
          </div>
          <div class="mb-3">
            <label class="form-label">Background image (PNG, JPG)</label>
            <input type="file" id="combined_image_input" accept="image/png,image/jpeg,image/jpg" class="form-control" />
            <small id="combined_image_name" class="form-text text-muted"></small>
          </div>
          <div id="combined_error_msg" class="text-danger small"></div>
          <div id="combined_success_msg" class="text-success small"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="combined_import_btn" disabled>Import</button>
        </div>
      </div>
    </div>
  </div>

  <!-- AI Import Modal -->
  <div class="modal fade" id="aiImportModal" tabindex="-1" aria-labelledby="aiImportLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="aiImportLabel">Import from AI</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">AI Floorplan JSON</label>
            <input type="file" id="ai_json_input" accept=".json" class="form-control" />
            <small id="ai_json_name" class="form-text text-muted">Expected format: {"walls": [[x0,y0,x1,y1], ...]}</small>
          </div>
          <div class="mb-3">
            <label class="form-label">Floorplan Width (meters)</label>
            <div class="input-group">
              <input type="number" id="ai_target_width" min="0.1" step="0.1" class="form-control" placeholder="e.g. 10.5" />
              <span class="input-group-text">m</span>
            </div>
            <small class="form-text text-muted">The imported floorplan will be scaled to this width</small>
          </div>
          <div id="ai_error_msg" class="text-danger small"></div>
          <div id="ai_success_msg" class="text-success small"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="ai_import_btn" disabled>Import & Scale</button>
        </div>
      </div>
    </div>
  </div>

  <div id="wallTools" class="leftBox">
    <h2 id="titleWallTools">Modify the wall</h2>
    <hr />
    <section id="rangeThick">
      <p>Width [<span id="wallWidthScale"></span>] : <span id="wallWidthVal"></span> cm</span></p>
      <input type="range" id="wallWidth" step="0.1" class="range" />
    </section>
    <ul class="list-unstyled">
      <section id="cutWall">
        <p>Cut the wall :<br /><small>A cut will be made at each wall encountered.</small></p>
        <li><button class="btn btn-light shadow fully" onclick="editor.splitWall();"><i class="fa fa-2x fa-cutlery"
              aria-hidden="true"></i></button></li>
      </section>
      <br />
      <section id="separate">
        <p>Separation wall :<br /><small>Transform the wall into simple separation line.</small></p>
        <li><button class="btn btn-light shadow fully" onclick="editor.invisibleWall();" id="wallInvisible"><i
              class="fa fa-2x fa-crop" aria-hidden="true"></i></button></li>
      </section>
      <section id="recombine">
        <p>Transform to wall :<br /><small>The thickness will be identical to the last known.</small></p>
        <li><button class="btn btn-light shadow fully" onclick="editor.visibleWall();" id="wallVisible"><i
              class="fa fa-2x fa-crop" aria-hidden="true"></i></button></li>
      </section>
      <br />
      <li><button class="btn btn-danger fully" id="wallTrash"><i class="fa fa-2x fa-trash"
            aria-hidden="true"></i></button></li>
      <li><button class="btn btn-info fully" style="margin-top:50px"
          onclick="fonc_button('select_mode');$('#boxinfo').html('Selection mode');$('#wallTools').hide('300');$('#panel').show('300');"><i
            class="fa fa-2x fa-backward" aria-hidden="true"></i></button></li>
    </ul>
  </div>

  <div id="objBoundingBox" class="leftBox">
    <h2>Modify object</h2>
    <hr />
    <section id="objBoundingBoxScale">
      <p>Width [<span id="bboxWidthScale"></span>] : <span id="bboxWidthVal"></span> cm</span></p>
      <input type="range" id="bboxWidth" step="1" class="range" />
      <p>Length [<span id="bboxHeightScale"></span>] : <span id="bboxHeightVal"></span> cm</span></p>
      <input type="range" id="bboxHeight" step="1" class="range" />
    </section>

    <section id="objBoundingBoxRotation">
      <p><i class="fa fa-compass" aria-hidden="true"></i> Rotation : <span id="bboxRotationVal"></span> °</p>
      <input type="range" id="bboxRotation" step="1" class="range" min="-180" max="180" />
    </section>

    <div id="stepsCounter" style="display:none;">
      <p><span id="bboxSteps">Nb steps [2-15] : <span id="bboxStepsVal">0</span></span></p>
      <button class="btn btn-info" id="bboxStepsAdd"><i class="fa fa-plus" aria-hidden="true"></i></button>
      <button class="btn btn-info" id="bboxStepsMinus"><i class="fa fa-minus" aria-hidden="true"></i></button>
    </div>

    <div id="objBoundingBoxColor" style="display:none">
      <div class="color textEditorColor" data-type="gradientRed"
        style="color:#f55847;background:linear-gradient(30deg, #f55847, #f00);"></div>
      <div class="color textEditorColor" data-type="gradientYellow"
        style="color:#e4c06e;background:linear-gradient(30deg,#e4c06e, #ffb000);"></div>
      <div class="color textEditorColor" data-type="gradientGreen"
        style="color:#88cc6c;background:linear-gradient(30deg,#88cc6c, #60c437);"></div>
      <div class="color textEditorColor" data-type="gradientSky"
        style="color:#77e1f4;background:linear-gradient(30deg,#77e1f4, #00d9ff);"></div>
      <div class="color textEditorColor" data-type="gradientBlue"
        style="color:#4f72a6;background:linear-gradient(30deg,#4f72a6, #284d7e);"></div>
      <div class="color textEditorColor" data-type="gradientGrey"
        style="color:#666666;background:linear-gradient(30deg,#666666, #aaaaaa);"></div>
      <div class="color textEditorColor" data-type="gradientWhite"
        style="color:#fafafa;background:linear-gradient(30deg,#fafafa, #eaeaea);"></div>
      <div class="color textEditorColor" data-type="gradientOrange"
        style="color:#f9ad67;background:linear-gradient(30deg, #f9ad67, #f97f00);"></div>
      <div class="color textEditorColor" data-type="gradientPurple"
        style="color:#a784d9;background:linear-gradient(30deg,#a784d9, #8951da);"></div>
      <div class="color textEditorColor" data-type="gradientPink"
        style="color:#df67bd;background:linear-gradient(30deg,#df67bd, #e22aae);"></div>
      <div class="color textEditorColor" data-type="gradientBlack"
        style="color:#3c3b3b;background:linear-gradient(30deg,#3c3b3b, #000000);"></div>
      <div class="color textEditorColor" data-type="gradientNeutral"
        style="color:#e2c695;background:linear-gradient(30deg,#e2c695, #c69d56);"></div>
      <div style="clear:both"></div>
    </div>

    <br /><br />
    <button class="btn btn-danger fully" id="bboxTrash"><i class="fa fa-2x fa-trash" aria-hidden="true"></i></button>
    <button class="btn btn-info" style="margin-top:100px"
      onclick="fonc_button('select_mode');$('#boxinfo').html('Selection mode');$('#objBoundingBox').hide(100);$('#panel').show(200);binder.graph.remove();delete binder;"><i
        class="fa fa-2x fa-backward" aria-hidden="true"></i></button>
  </div>

  <div id="objTools" class="leftBox">
    <h2>Modify door/window</h2>
    <hr />
    <ul class="list-unstyled">
      <br /><br />
      <li><button class="btn btn-light shadow fully" id="objToolsHinge">Reverse hinges</button></li>

      <p>Width [<span id="doorWindowWidthScale"></span>] : <span id="doorWindowWidthVal"></span> cm</span></p>
      <input type="range" id="doorWindowWidth" step="1" class="range" />
      <br />
      <li><button class="btn btn-danger fully objTrash"><i class="fa fa-2x fa-trash" aria-hidden="true"></i></button>
      </li>
      <li><button class="btn btn-info" style="margin-top:100px"
          onclick="fonc_button('select_mode');$('#boxinfo').html('Selection mode');$('#objTools').hide('100');$('#panel').show('200');binder.graph.remove();delete binder;rib();"><i
            class="fa fa-2x fa-backward" aria-hidden="true"></i></button></li>
    </ul>
  </div>

  <div id="roomTools" class="leftBox">
    <span style="color:#08d">Home Rough Editor</span> estimated a surface of :<br /><b><span class="size"></span></b>
    <br /><br />
    <p>If you have the actual area, you can write it</p>
    <div class="input-group">
      <input type="text" class="form-control" id="roomSurface" placeholder="surface réelle"
        aria-describedby="basic-addon2">
      <span class="input-group-addon" id="basic-addon2">m²</span>
    </div>
    <br />
    <input type="hidden" id="roomName" value="" />
    Wording :<br />
    <select class="form-select" aria-label="Default select example" id="roomLabel">
      <option selected value="0">None</option>
      <option value="1">Lounge</option>
      <option value="2">Lunchroom</option>
      <option value="3">Kitchen</option>
      <option value="4">Toilet</option>
      <option value="5">Bathroom</option>
      <option value="6">Bedroom 1</option>
      <option value="7">Bedroom 2</option>
      <option value="8">Bedroom 3</option>
      <option value="9">Locker</option>
      <option value="10">Office</option>
      <option value="11">Hall</option>
      <option value="12">Loggia</option>
      <option value="13">Bath 2</option>
      <option value="14">Toilet 2</option>
      <option value="15">Bedroom 4</option>
      <option value="16">Bedroom 5</option>
      <option value="17">Balcony</option>
      <option value="18">Terrace</option>
      <option value="19">Corridor</option>
      <option value="20">Garage</option>
      <option value="21">Clearance</option>
    </select>
    <br />
    <br />
    Meter :
    <div class="funkyradio">
      <div class="funkyradio-success">
        <input type="checkbox" name="roomShow" value="showSurface" id="seeArea" checked />
        <label for="seeArea">Show the surface</label>
      </div>
    </div>
    <div class="funkyradio">
      <div class="funkyradio-success">
        <input type="radio" name="roomAction" id="addAction" value="add" checked />
        <label for="addAction">Add the surface</label>
      </div>
      <div class="funkyradio-warning">
        <input type="radio" name="roomAction" id="passAction" value="pass" />
        <label for="passAction">Ignore the surface</label>
      </div>
    </div>
    <hr />

    <p>Colors</p>
    <div class="roomColor" data-type="gradientRed" style="background:linear-gradient(30deg, #f55847, #f00);"></div>
    <div class="roomColor" data-type="gradientYellow" style="background:linear-gradient(30deg,#e4c06e, #ffb000);"></div>
    <div class="roomColor" data-type="gradientGreen" style="background:linear-gradient(30deg,#88cc6c, #60c437);"></div>
    <div class="roomColor" data-type="gradientSky" style="background:linear-gradient(30deg,#77e1f4, #00d9ff);"></div>
    <div class="roomColor" data-type="gradientBlue" style="background:linear-gradient(30deg,#4f72a6, #284d7e);"></div>
    <div class="roomColor" data-type="gradientGrey" style="background:linear-gradient(30deg,#666666, #aaaaaa);"></div>
    <div class="roomColor" data-type="gradientWhite" style="background:linear-gradient(30deg,#fafafa, #eaeaea);"></div>
    <div class="roomColor" data-type="gradientOrange" style="background:linear-gradient(30deg, #f9ad67, #f97f00);">
    </div>
    <div class="roomColor" data-type="gradientPurple" style="background:linear-gradient(30deg,#a784d9, #8951da);"></div>
    <div class="roomColor" data-type="gradientPink" style="background:linear-gradient(30deg,#df67bd, #e22aae);"></div>
    <div class="roomColor" data-type="gradientBlack" style="background:linear-gradient(30deg,#3c3b3b, #000000);"></div>
    <div class="roomColor" data-type="gradientNeutral" style="background:linear-gradient(30deg,#e2c695, #c69d56);">
    </div>
    <br /><br />
    <p>Matérials</p>
    <div class="roomColor" data-type="wood"
      style="background: url('https://orig00.deviantart.net/e1f2/f/2015/164/8/b/old_oak_planks___seamless_texture_by_rls0812-d8x6htl.jpg');">
    </div>
    <div class="roomColor" data-type="tiles"
      style="background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrkoI2Eiw8ya3J_swhfpZdi_ug2sONsI6TxEd1xN5af3DX9J3R');">
    </div>
    <div class="roomColor" data-type="granite"
      style="background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9_nEMhnWVV47lxEn5T_HWxvFwkujFTuw6Ff26dRTl4rDaE8AdEQ');">
    </div>
    <div class="roomColor" data-type="grass"
      style="background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWh5nEP_Trwo96CJjev6lnKe0_dRdA63RJFaoc3-msedgxveJd');">
    </div>
    <div data-type="#ff008a" style="clear:both"></div>
    <br /><br />
    <input type="hidden" id="roomBackground" value="gradientNeutral" />
    <input type="hidden" id="roomIndex" value="" />
    <button type="button" class="btn btn-primary" id="applySurface">Apply</button>
    <button type="button" class="btn btn-danger" id="resetRoomTools">Cancel</button>

    <br />
  </div>

  <div id="furniturePanel" class="leftBox">
    <h2>Furniture Placement</h2>
    <hr />
    <p>Select furniture to place:</p>
    <div id="furniture_options" style="max-height: 400px; overflow-y: auto;">
      <!-- Furniture options will be populated here -->
    </div>
    <hr />
    <button class="btn btn-info fully" onclick="exitFurnitureMode();">
      <i class="fa fa-backward" aria-hidden="true"></i> Back to Selection
    </button>
  </div>

  <div id="furnitureTools" class="leftBox">
    <h2>Furniture Details</h2>
    <hr />
    <div id="furnitureDetails">
      <p><strong>Name:</strong> <span id="furnitureName"></span></p>
      <p><strong>Category:</strong> <span id="furnitureCategory"></span></p>
      <p><strong>ID:</strong> <span id="furnitureId"></span></p>
      <p><strong>Rotation:</strong> <span id="furnitureRotationValue">0</span>°</p>
      <input type="range" id="furnitureRotationSlider" min="-180" max="180" value="0" step="1" class="range" style="width: 100%; margin: 10px 0;" />
    </div>
    <br />
    <button class="btn btn-danger fully" id="furnitureRemove"><i class="fa fa-2x fa-trash" aria-hidden="true"></i></button>
    <button class="btn btn-info" style="margin-top:50px"
      onclick="hideFurnitureTools();"><i
        class="fa fa-2x fa-backward" aria-hidden="true"></i></button>
  </div>

  <div id="backgroundImageTools" class="leftBox">
    <h2>Background Image Settings</h2>
    <hr />
    <section id="backgroundImageSize">
      <p>Size (meters)</p>
      <div class="input-group mb-2" style="display:flex; align-items:center; gap:8px;">
        <span class="input-group-text" style="min-width:60px; font-size:12px; padding:4px 6px;">Width</span>
        <input type="number" step="0.1" min="0.1" id="backgroundImageWidthM" class="form-control" style="flex:1 1 auto; width:100%; max-width:none;" />
        <span class="input-group-text" style="font-size:12px; padding:4px 6px;">m</span>
      </div>
      <div class="input-group mb-2" style="display:flex; align-items:center; gap:8px;">
        <span class="input-group-text" style="min-width:60px; font-size:12px; padding:4px 6px;">Height</span>
        <input type="number" step="0.1" min="0.1" id="backgroundImageHeightM" class="form-control" style="flex:1 1 auto; width:100%; max-width:none;" />
        <span class="input-group-text" style="font-size:12px; padding:4px 6px;">m</span>
      </div>
      <small id="backgroundImageAspectInfo" class="text-muted"></small>
      <hr />
      <p>Opacity [<span id="backgroundImageOpacityRange"></span>] : <span id="backgroundImageOpacityVal">70</span>%</p>
      <input type="range" id="backgroundImageOpacitySlider" step="5" min="0" max="100" value="70" class="range" />
    </section>
    <br />
    <button class="btn btn-danger fully" id="backgroundImageRemove"><i class="fa fa-2x fa-trash" aria-hidden="true"></i></button>
    <button class="btn btn-info" style="margin-top:50px"
      onclick="exitFloorplanMode();fonc_button('select_mode');$('#boxinfo').html('Selection mode');"><i
        class="fa fa-2x fa-backward" aria-hidden="true"></i></button>
  </div>

  <div id="scalingTools" class="leftBox" style="display:none;">
    <h2>Floorplan Scaling</h2>
    <hr />
    <p>Current floorplan dimensions:</p>
    <section id="scalingDimensions">
      <div class="input-group mb-2" style="display:flex; align-items:center; gap:8px;">
        <span class="input-group-text" style="min-width:60px; font-size:12px; padding:4px 6px;">Width</span>
        <input type="number" id="floorplanWidth" min="0.1" step="0.1" class="form-control" style="flex:1 1 auto; width:100%; max-width:none;" oninput="updateFloorplanWidth()" />
        <span class="input-group-text" style="font-size:12px; padding:4px 6px;">m</span>
      </div>
      <div class="input-group mb-2" style="display:flex; align-items:center; gap:8px;">
        <span class="input-group-text" style="min-width:60px; font-size:12px; padding:4px 6px;">Height</span>
        <input type="number" id="floorplanHeight" min="0.1" step="0.1" class="form-control" style="flex:1 1 auto; width:100%; max-width:none;" oninput="updateFloorplanHeight()" />
        <span class="input-group-text" style="font-size:12px; padding:4px 6px;">m</span>
      </div>
    </section>
    <hr />
    <section id="scalingInfo">
      <div class="small text-muted">
        <div>Original: <span id="originalDimensions">-</span></div>
        <div>Scale factor: <span id="scaleFactor">1.0</span></div>
      </div>
    </section>
    <br />
    <button class="btn btn-info" onclick="exitScalingMode()"><i
        class="fa fa-2x fa-backward" aria-hidden="true"></i> Exit Scaling</button>
  </div>

  <div id="panel" class="leftBox">
    <ul class="list-unstyled">
      <li><button class="btn disabled halfy " id="undo" title="undo"><i class="fa fa-chevron-circle-left"
            aria-hidden="true"></i>
          <button class="btn disabled halfy pull-right" id="redo" title="redo"><i class="fa fa-chevron-circle-right"
              aria-hidden="true"></i></button>
      </li>
      <br />
      <li><button class="btn btn-success fully " id="select_mode" style="box-shadow:2px 2px 3px #ccc;"><i
            class="fa fa-2x fa-mouse-pointer" aria-hidden="true"></i></button></li>
      <br />
      <li>
        <button class="btn btn-light shadow fully " style="margin-bottom:0px" id="line_mode" data-toggle="tooltip"
          data-placement="right" title="Make walls">WALL</button>
        <button class="mt-2 btn btn-light shadow fully " style="margin-bottom:0px" id="partition_mode"
          data-toggle="tooltip" data-placement="right" title="Make partitions wall">PARTITION</button>
        <div class="funkyradio" style="font-size:0.8em">
          <div class="funkyradio-success">
            <input type="checkbox" id="multi" checked />
            <label for="multi">MULTIPLE</label>
          </div>
        </div>
      </li>
      <br />
      <li><button class="btn btn-light shadow fully " id="room_mode">CONFIG. ROOMS</button></li>
      <br />
      <li><button class="btn btn-light shadow fully " id="node_mode"><i class="fa fa-2x fa-scissors"
            aria-hidden="true"></i></button></li>
      <br />
      <li><button class="btn btn-light shadow fully " id="distance_mode" data-toggle="tooltip" data-placement="right" style="display:none"
          title="Add a measurement">MEASURE</button></li>
      <li><button class="btn btn-light shadow fully " id="text_mode" data-toggle="tooltip" data-placement="right" style="display:none"
          title="Add text">TEXT</button></li>
      <br />
      <div id="door_list" class="list-unstyled sub"
        style="box-shadow:2px 2px 3px #ccc;display:none;background:#fff;border-radius: 0 5px 5px 0; padding:10px;position:absolute;left:200px;width:150px;display:none">
        <button class="btn fully door" id="aperture">Aperture</button>
        <button class="btn fully door" id="simple">Simple</button>
        <button class="btn fully door" id="double">Double</button>
        <button class="btn fully door" id="pocket">Pocket</button>
      </div>
      <li><button class="btn btn-light shadow fully " id="door_mode" style="display:none"
          onclick="$('.sub').hide();$('#door_list').toggle(200);$('#window_list').hide();">DOOR</button></li>

      <!-- New simplified Door button maps to Door/Simple without duplicating IDs -->
      <li><button class="btn btn-light shadow fully" id="door_simple_btn" title="Add a simple door"
          onclick="$('#select_mode').trigger('click'); linElement.css('cursor','crosshair');$('#boxinfo').html('Add a door');fonc_button('door_mode','simple');">Door</button></li>

      <div id="window_list" class="list-unstyled sub"
        style="box-shadow:2px 2px 3px #ccc;display:none;background:#fff;border-radius: 0 5px 5px 0; padding:10px;position:absolute;left:200px;width:150px;display:none">
        <button class="btn fully window" id="fix">Fix</button>
        <button class="btn fully window" id="flap">Simple</button>
        <button class="btn fully window" id="twin">Double</button>
        <button class="btn fully window" id="bay">Slide</button>
      </div>
      <li><button class="btn btn-light shadow fully " id="window_mode" style="display:none"
          onclick="$('.sub').hide();$('#window_list').toggle(200);$('#door_list').hide()">WINDOW</button></li>

      <!-- New simplified Window button maps to Window/Fix without duplicating IDs -->
      <li><button class="btn btn-light shadow fully" id="window_fix_btn" title="Add a fixed window"
          onclick="$('#select_mode').trigger('click'); linElement.css('cursor','crosshair');$('#boxinfo').html('Add a window');fonc_button('door_mode','fix');">Window</button></li>
      <li><button class="btn btn-light shadow fully object" id="stair_mode" style="display:none"
          onclick="$('.sub').hide();$('#door_list').hide()">STAIR</button></li>
      <br />
      <div id="energy_list" class="list-unstyled sub"
        style="box-shadow:2px 2px 3px #ccc;display:none;background:#fff;border-radius: 0 5px 5px 0; padding:10px;position:absolute;left:200px;bottom:40px;width:600px">
        <div style="width:600px;float:left;padding:10px">
          <p>Energy</p>
          <div style="float:left;padding:10px;margin:5px;border:1px solid #ddd;border-radius:5px">
            <p>High current</p>
            <div style="width:120px;float:left;padding:2px">
              <button class="btn btn-light fully object" id="gtl">Switchboard</button>
              <button class="btn btn-light fully object" id="switch">Switch</button>
              <button class="btn btn-light fully object" id="doubleSwitch">Multiways</button>
              <button class="btn btn-light fully object" id="dimmer">Variator</button>

            </div>
            <div style="width:120px;float:left;padding:2px">
              <button class="btn btn-light fully object" id="plug">Electrical outlet</button>
              <button class="btn btn-light fully object" id="plug20">Outlet 20A</button>
              <button class="btn btn-light fully object" id="plug32">Outlet 32A</button>
              <button class="btn btn-light fully object" id="rooflight shadow">Ceiling lamp</button>
              <button class="btn btn-light fully object" id="walllight shadow">Wall light</button>
            </div>
          </div>
          <div style="width:130px;float:left;padding:10px;margin:5px;border:1px solid #ddd;border-radius:5px">
            <p>Low current</p>
            <button class="btn btn-light fully object" id="www">Internet access</button>
            <button class="btn btn-light fully object" id="rj45">RJ45 plug</button>
            <button class="btn btn-light fully object" id="tv">Antenna plug</button>
          </div>

          <div style="width:130px;float:left;padding:10px;margin:5px;border:1px solid #ddd;border-radius:5px">
            <p>Thermal</p>
            <button class="btn btn-light fully object" id="boiler">Boiler</button>
            <button class="btn btn-light fully object" id="heater">Water heater</button>
            <button class="btn btn-light fully object" id="radiator">Radiator</button>
          </div>
        </div>

      </div>
      <li><button class="btn btn-light shadow fully " id="object_mode" style="display:none"
          onclick="$('.sub').hide();$('#energy_list').toggle(200);">ENERGY</button></li>
      <li><button class="btn btn-light shadow fully " id="furniture_mode" onclick="enterFurnitureMode();">FURNITURE</button></li>
      <br />

      <li><button class="btn btn-light shadow fully " id="layer_mode"
          onclick="$('.sub').hide();$('#layer_list').css('top', $('#layer_mode').position().top + 'px').toggle(200);">Layers</button></li>
      <li>
        <button class="btn btn-light shadow fully" id="floorplan_mode_btn" title="Toggle floorplan mode" disabled
          onclick="toggleFloorplanMode(this);">Floorplan mode</button>
        <div id="floorplan_filename" class="small text-muted mt-1" style="word-break: break-all;"></div>
      </li>
      <li>
        <button class="btn btn-light shadow fully" id="scaling_mode_btn" title="Toggle floorplan scaling mode"
          onclick="toggleScalingMode(this);">Scaling mode</button>
      </li>

      <div id="layer_list" class="list-unstyled sub"
        style="box-shadow:2px 2px 3px #ccc;display:none;background:#fff;border-radius: 0 5px 5px 0; padding:10px;position:absolute;left:200px;width:200px">
        <div class="funkyradio" style="font-size:0.8em">
          <div class="funkyradio-info">
            <input type="checkbox" id="showRib" checked />
            <label for="showRib">Measurement</label>
          </div>
        </div>
        <div class="funkyradio" style="font-size:0.8em">
          <div class="funkyradio-info">
            <input type="checkbox" id="showArea" checked />
            <label for="showArea">Surface</label>
          </div>
        </div>
        <div class="funkyradio" style="font-size:0.8em">
          <div class="funkyradio-info">
            <input type="checkbox" id="showLayerRoom" checked />
            <label for="showLayerRoom">Texture</label>
          </div>
        </div>
        <div class="funkyradio" style="font-size:0.8em;display:none">
          <div class="funkyradio-info">
            <input type="checkbox" id="showLayerEnergy" checked />
            <label for="showLayerEnergy">Energy</label>
          </div>
        </div>
        <div class="funkyradio" style="font-size:0.8em">
          <div class="funkyradio-info">
            <input type="checkbox" id="showLayerBackground" checked />
            <label for="showLayerBackground">Background Image</label>
          </div>
        </div>
        <div class="funkyradio" style="font-size:0.8em">
          <div class="funkyradio-info">
            <input type="checkbox" id="showLayerFurniture" checked />
            <label for="showLayerFurniture">Furniture</label>
          </div>
        </div>
      </div>
      
      <div id="furniture_list" class="list-unstyled sub"
        style="box-shadow:2px 2px 3px #ccc;display:none;background:#fff;border-radius: 0 5px 5px 0; padding:10px;position:absolute;left:200px;width:300px;max-height:400px;overflow-y:auto">
        <h5>Select Furniture</h5>
        <div id="furniture_options"></div>
        <button class="btn btn-secondary fully" onclick="closeFurnitureMode();">Close Furniture Mode</button>
      </div>
      <br />
      <div id="export_list" class="list-unstyled sub"
        style="box-shadow:2px 2px 3px #ccc;display:none;background:#fff;border-radius: 0 5px 5px 0; padding:10px;position:absolute;left:200px;width:200px">
        <button class="btn fully" id="export_mode" title="Export floorplan as JSON"><i class="fa fa-download" aria-hidden="true"></i> Export to Json</button>
        <button class="btn fully" id="export_blender_mode" title="Export floorplan for Blender"><i class="fa fa-cube" aria-hidden="true"></i> Export for Blender</button>
      </div>
      <li><button class="btn btn-light shadow fully" id="export_menu"
          onclick="$('.sub').hide();$('#export_list').toggle(200);">Export</button></li>
      <div id="import_list" class="list-unstyled sub"
        style="box-shadow:2px 2px 3px #ccc;display:none;background:#fff;border-radius: 0 5px 5px 0; padding:10px;position:absolute;left:200px;width:200px">
        <button class="btn fully" id="import_mode" title="Import floorplan from JSON file"><i class="fa fa-upload" aria-hidden="true"></i> Import Json</button>
        <button class="btn fully" id="import_image_mode" title="Import background image"><i class="fa fa-image" aria-hidden="true"></i> Import Floorplan Image</button>
        <button class="btn fully" id="import_ai_mode" title="Import floorplan from AI JSON file"><i class="fa fa-robot" aria-hidden="true"></i> Import from AI</button>
        </div>
      <li><button class="btn btn-light shadow fully" id="import_menu"
          onclick="$('.sub').hide();$('#import_list').toggle(200);">Import</button></li>
      <br />
      <li><button class="btn btn-light shadow halfy " id="report_mode" title="Show report"><i class="fa fa-calculator"
            aria-hidden="true"></i>
          <button class="btn btn-light shadow halfy pull-right"
            onclick="fullscreen();this.style.display='none';$('#nofull_mode').show();" id="full_mode"
            title="Full screen"><i class="fa fa-expand" aria-hidden="true"></i></button>
          <button class="btn btn-light shadow halfy pull-right" style="display:none"
            onclick="outFullscreen();this.style.display='none';$('#full_mode').show();" id="nofull_mode"
            data-toggle="tooltip" data-placement="right" title="Full screen"><i class="fa fa-compress"
              aria-hidden="true"></i></button>
      <li>

        <div style="clear:both"></div>
    </ul>
  </div>

  <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg  modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">

          <h4 class="modal-title" id="myModalLabel">Welcome Home Rough Editor v0.95</h4>
        </div>
        <div class="modal-body m-2">
          <div id="recover">
            <p>A plan exists in historical, would you like recover him ?</p>
            <button class="btn btn-success shadow" data-bs-dismiss="modal"
              onclick="initHistory('recovery');">YES</button></p>
            <hr />
            <p>Or are you prefer start a new plan ?</p>
          </div>
          <div class="w-100 d-flex justify-content-center  flex-column gap-4 flex-md-row">
            <div class="boxMouseOver"><img src="img/newPlanEmpty.jpg" class="img-fluid" onclick="initHistory();"
                data-bs-dismiss="modal" /></div>
            <div class=" boxMouseOver"><img src="img/newPlanSquare.jpg" class="img-fluid"
                onclick="initHistory('newSquare');" data-bs-dismiss="modal" /></div>
            <div class=" boxMouseOver"><img src="img/newPlanL.jpg" class="img-fluid" onclick="initHistory('newL');"
                data-bs-dismiss="modal" /></div>
          </div>
          <hr />
          <div class="mt-3">
            <h5>Import existing floorplan (JSON + Image)</h5>
            <p class="text-muted">Select both your floorplan JSON and its background image to start where you left off.</p>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#combinedImportModal">Import JSON + Image</button>
          </div>
        </div>
        <!-- <div class="modal-footer">
          <button type="button" class="btn btn-light shadow" data-dismiss="modal">CLOSE</button>
          <button type="button" class="btn btn-primary">YES</button>
        </div> -->
      </div>
    </div>
  </div>

  <div class="modal fade" id="textToLayer" tabindex="-1" role="dialog" aria-labelledby="textToLayerLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="textToLayerLabel">Text editor</h4>
        </div>
        <div class="modal-body">
          <p>Choose police color</p>
          <div class="color textEditorColor" data-type="gradientRed"
            style="color:#f55847;background:linear-gradient(30deg, #f55847, #f00);"></div>
          <div class="color textEditorColor" data-type="gradientYellow"
            style="color:#e4c06e;background:linear-gradient(30deg,#e4c06e, #ffb000);"></div>
          <div class="color textEditorColor" data-type="gradientGreen"
            style="color:#88cc6c;background:linear-gradient(30deg,#88cc6c, #60c437);"></div>
          <div class="color textEditorColor" data-type="gradientSky"
            style="color:#77e1f4;background:linear-gradient(30deg,#77e1f4, #00d9ff);"></div>
          <div class="color textEditorColor" data-type="gradientBlue"
            style="color:#4f72a6;background:linear-gradient(30deg,#4f72a6, #284d7e);"></div>
          <div class="color textEditorColor" data-type="gradientGrey"
            style="color:#666666;background:linear-gradient(30deg,#666666, #aaaaaa);"></div>
          <div class="color textEditorColor" data-type="gradientWhite"
            style="color:#fafafa;background:linear-gradient(30deg,#fafafa, #eaeaea);"></div>
          <div class="color textEditorColor" data-type="gradientOrange"
            style="color:#f9ad67;background:linear-gradient(30deg, #f9ad67, #f97f00);"></div>
          <div class="color textEditorColor" data-type="gradientPurple"
            style="color:#a784d9;background:linear-gradient(30deg,#a784d9, #8951da);"></div>
          <div class="color textEditorColor" data-type="gradientPink"
            style="color:#df67bd;background:linear-gradient(30deg,#df67bd, #e22aae);"></div>
          <div class="color textEditorColor" data-type="gradientBlack"
            style="color:#3c3b3b;background:linear-gradient(30deg,#3c3b3b, #000000);"></div>
          <div class="color textEditorColor" data-type="gradientNeutral"
            style="color:#e2c695;background:linear-gradient(30deg,#e2c695, #c69d56);"></div>
          <div style="clear:both"></div>
          <hr />
          <p>Police size</p>
          <input type="range" list="tickmarks" id="sizePolice" step="0.1" min="10" max="30" value="15" class="range"
            style="width:200px" />
          <hr />
          <p contenteditable="true" id="labelBox" onfocus="this.innerHTML='';"
            style="font-size:15px;padding:5px;border-radius:5px;color:#333">Your text</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light shadow" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" onclick="$('#textToLayer').modal('hide');">Apply</button>
        </div>
      </div>
    </div>
  </div>

  <div style="position:absolute;bottom:10px;left:210px;font-size:1.5em;color:#08d" id="boxinfo">
  </div>

  <div id="moveBox"
    style="position:absolute;right:-150px;top:10px;color:#08d;background:transparent;z-index:2;text-align:center;transition-duration: 0.2s;transition-timing-function: ease-in;">
    <p style="margin:0px 0 0 0;font-size:11px" onclick="document.location='https://github.com/ekymoz/homeRoughEditor'">
      <img src="https://cdn4.iconfinder.com/data/icons/mathematics-doodle-3/48/102-128.png" width=20px /> Home Rough
      Editor
    </p>
    <div class="pull-right" style="margin:10px">
      <p style="margin:0"><button class="btn btn-xs btn-info zoom" data-zoom="zoomtop"
          style="box-shadow:2px 2px 3px #ccc;"><i class="fa fa-arrow-up" aria-hidden="true"></i></button></p>
      <p style="margin:0">
        <button class="btn btn-xs btn-info zoom" data-zoom="zoomleft" style="box-shadow:2px 2px 3px #ccc;"><i
            class="fa fa-arrow-left" aria-hidden="true"></i></button>
        <button class="btn btn-xs btn-light shadow zoom" data-zoom="zoomreset" style="box-shadow:2px 2px 3px #ccc;"><i
            class="fa fa-bullseye" aria-hidden="true"></i></button>
        <button class="btn btn-xs btn-info zoom" data-zoom="zoomright" style="box-shadow:2px 2px 3px #ccc;"><i
            class="fa fa-arrow-right" aria-hidden="true"></i></button>
      </p>
      <p style="margin:0"><button class="btn btn-xs btn-info zoom" data-zoom="zoombottom"
          style="box-shadow:2px 2px 3px #ccc;"><i class="fa fa-arrow-down" aria-hidden="true"></i></button></p>
    </div>
  </div>

  <div id="zoomBox"
    style="position:absolute;z-index:100;right:-150px;bottom:20px;text-align:center;background:transparent;padding:0px;color:#fff;transition-duration: 0.2s;transition-timing-function: ease-in;">
    <div class="pull-right" style="margin-right:10px">
      <button class="btn btn btn-light shadow zoom" data-zoom="zoomin" style="box-shadow:2px 2px 3px #ccc;"><i
          class="fa fa-plus" aria-hidden="true"></i></button>
      <button class="btn btn btn-light shadow zoom" data-zoom="zoomout" style="box-shadow:2px 2px 3px #ccc;"><i
          class="fa fa-minus" aria-hidden="true"></i></button>
    </div>
    <div style="clear:both"></div>
    <div id="scaleVal" class="pull-right"
      style="box-shadow:2px 2px 3px #ccc;width:60px;height:20px;background:#4b79aa;border-radius:4px;margin-right:10px">
      1m
    </div>

    <div style="clear:both"></div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"
  integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="mousewheel.js"></script>
<script src="qSVG.js"></script>
<script src="func.js"></script>
<script src="engine.js"></script>
<script src="editor.js"></script>
<script src="export.js"></script>
<script src="furniture.js"></script>

</html>