</div> <div class="bgrad notouch"></div> <div class="loader" style="display:none"><div data-l10n="loader">Bitte warten Sie, bis das Ladeprogramm beendet.</div><div class='loaderinfo' data-l10n="initializing"></div></div> <div class="custlogo notouch hidden"><img src=""></div> <div id="logo" class="notouch" style="position:absolute;left:0;bottom:80px;margin-left:20px;font-size:9px;z-index:1000" class=""><a href="http://www.configure1st.com" target="_blank" style="color:#6490B2;">by Configure 1st</a></div> <div id="pic" class="hide"><div class="logo hide"><!--<img src="../media/images/printlogo.jpg" alt="logo">--></div><button gradient class="closebtn button gradient " onclick="Ui.hidePic();"><span class="fa fa-close"></span></button gradient ><button gradient style="position:absolute;right:10px;" class="closebtn button gradient " onclick="Ui.printw();"><span class="fa fa-print"></span></button gradient ><div id="screenshot"></div></div> <div id="info" class="shadow hidden"><span data-l10n="Click wall to place doors and windows">Click wall to place doors and windows</span><div class="button gradient " style="margin-left:15px;" onclick="hideInfo();" data-l10n="Continue">Continue</div></div> <div id="navi" class="notouch"> <table width="100%"> <tr > <td class="naviitemtd filetab" style="text-align:center;display:none"><div class="" onclick="Ui.setActive('filetab',this)"><i class="fa fa-save"></i></div></td> <!--<td class="naviitemtd basicinfo" style="text-align:center;"><div class="naviitem gradient" onclick="Ui.setActive('basicinfo',this)"><div class="ntext" data-l10n="navi1" ></div></div></td>--> <!--<td class="naviitemtd snowload" style="text-align:center;" nosidebuilding><div class="naviitem gradient" onclick="Ui.setActive('snowload',this)"><div class="ntext" data-l10n="navi2" ></div></div></td>--> <td class="naviitemtd" style="text-align:center;"><div class="naviitem gradient measures" onclick="Ui.setActive('measures',this)"><div class="ntext" data-l10n="navi1" ></div></div></td> <!--<td onlypro class="naviitemtd" style="text-align:center;" nosidebuilding><div class="naviitem gradient sidebuilding" onclick="Ui.setActive('sidebuilding',this)"><div class="ntext" data-l10n="navisidebuilding" ></div></div></td>--> <td class="naviitemtd" style="text-align:center;" nosidebuilding><div class="naviitem gradient features" onclick="Ui.setActive('features',this)"><div class="ntext" data-l10n="navi2"></div></div></td> <td class="naviitemtd" style="text-align:center;"><div class="naviitem gradient elements2" onclick="Ui.setActive('elements2',this)"><div class="ntext" data-l10n="navi3"></div></div></td> <td class="naviitemtd " style="text-align:center;" nosidebuilding><div class="naviitem gradient colors" onclick="Ui.setActive('colors',this)"><div class="ntext" data-l10n="navi4"></div></div></td> <td class="naviitemtd" style="text-align:center;"><div class="naviitem gradient ready" style="float:left;" onclick="Ui.setActive('ready',this)"><div class="ntext" data-l10n="navi5"></div></div></td></tr> </table> </div> <div id="navimobile"> <table width="100%"> <tr style="height:50px;"> <td> <!--<div id="naviroller">--> <div class='mnaviico gradient' style="margin-left:5px;" onclick="Navi.goleft()" arr_left><i class="fa fa-arrow-left"></i></div> </td> <td style="width:50%;text-align:center"><div id="rollitems"></div></td> <td><div class='mnaviico gradient' onclick="Navi.goright()" arr_right><i class="fa fa-arrow-right"></i></div></td> <!-- </div>--> <td style='width:100px;'><div id='show3D' class="gradient" style="" onclick="Ui.closeAll()">3D</div> </td> </tr> </table> </div> <div class="pads"> <div id="filetab" class="pad white" ti="0" style="padding:5px;"> <div class="closetab" onclick="Navi.closeTabs();"></div> <div id="file" class=""> <div class='btn'> <div data-l10n='loadfile'></div> <input type='file' autocomplete="off" class='button' accept=".json" data-buttonText='Open' id='fileinput' onchange='File_actions.loadFile();'><br><br> </div> <div onclick='File_actions.savefile(App.project)' class='button' style="clear:right" data-l10n='savefile'></div> </div> </div> <!-- <div id="basicinfo" style="display:none" class="pad white"> <table style="width:100%"> <tr class="colorhl"><th colspan="2"><div data-l10n="custtype"></th></tr> <tr class="gradient"><td><label for="company"><span data-l10n="company">Company</span></label></td><td style="width:10%"><input type="radio" onclick="Calculator.calculate()" autocomplete="off" checked="checked" name="custtype" id="company"></td></tr> <tr class="gradient"><td><label for="private"><span data-l10n="private">Private</span></label></td><td style="width:10%"><input type="radio" onclick="Calculator.calculate()" autocomplete="off" name="custtype" id="private"></td></tr> </table> <center class="grey"><div class=" button gradient" style="margin-top:20px;margin-bottom:20px;" data-l10n="close" onclick="Ui.resetNavi();Calculator.calculate()"></div></center> </div>--> <!-- <div id="snowload" class="pad white" style="display:none"> <table style="width:100%" class="white"> <tr class="colorhl"><th colspan="2"><div data-l10n="snowloadhelp" style="padding: 5px;"></div></th></tr> <tr class="litegrey"> <td style="width:200px" colspan="2"><div style='font-weight:bold;float:left' data-l10n="halladdress"></div></td> </tr> <tr><td colspan='2' style="text-align:center;"><div id="locationField"><input id="autocomplete" autocomplete="off" onblur="" style="width:100%" type="text"></div></td></tr> <tr> <td colspan="2" class="snowload"> </td></tr> <tr class='' style="font-weight:bold;"><td class='greyborder' style="height:40px;"><div data-l10n="zip" class="lilhl-"></div></td><td class='greyborder' style=";text-align: center"><input autocomplete="off" style="font-size:14px;text-align: center" id="postal_code" value="10000" onblur="" type="text" disabled=disabled></td></tr> <tr class="litegrey" style="font-weight:bold;"><td class='greyborder' style="height:40px;"><label for="solarconnector"><div data-l10n="solarconnector" class="lilhl-"></div></label></td><td class='greyborder' style="text-align:center"><input autocomplete="off" id="solarconnector" type="checkbox" value="1" onchange="Ui.setCheckboxParam(this);LocationApp.calculateSnowLoad()" style=""></td></tr> <tr class="litegrey" style="font-weight:bold;"><td class='greyborder' style="height:40px;"><div data-l10n="Snowload" class="" style="float:left;margin-right:10px;">Snowload</div></td><td class='greyborder' style="text-align:center"><div id="snowloadval" class='vitem'></div></td></tr> <tr class="litegrey" style="font-weight:bold;"><td class='greyborder' style="height:40px"><div style='float:left' data-l10n="snowloadzone"></div></td><td class='greyborder' style="text-align:center"><div class='hilitedvalue' id="snowloadzone"></div></td></tr> <tr class="litegrey" style="font-weight:bold;"><td class='greyborder' style="height:40px;"><div data-l10n="windloadzone" class="" style="float:left;margin-right:10px;"></div></td><td class='greyborder' style="text-align:center"><div id="windloadzone" class='vitem'></div></td></tr> </table> <center class="grey"><div class=" button gradient" style="margin-top:20px;margin-bottom:20px;" data-l10n="close" onclick="Ui.resetNavi();"></div></center> </div>--> <div id="measures" class="pad white" style="display:none"> <table> <tr nosidebuilding class="colorhl"><th><div data-l10n="rooftype"></th></tr> <tr nosidebuilding><td class="tall"><center><div id="rooftypeui" style="padding:5px;" class="uiblock"> <div onclick="Building.changeParamFromUi('buildingtype','normal');" style="padding:0;" class="button normal roofsel"> <img style="width:100%;height:auto;" src="../media/images/roof2.png"></div> <div onclick="Building.changeParamFromUi('buildingtype','pent');" style="padding:0;margin-left:10px;" class="button pent roofsel green"><img style="width:100%;height:auto;" src="../media/images/roof1.png"></div> <!-- <div onclick="Building.changeParamFromUi('buildingtype','pent2');" style="padding:0;width:40px;margin-left:10px;" class="button pent2 roofsel green"><img style="width:100%;height:auto;margin-bottom: -10px;" src="../media/images/roofpent2.png"></div>--> </div> </center></td></tr> <tr class="colorhl" style="display:none"><th><div data-l10n="angle" style="display:inline-block"></div></th></tr> <tr style="display:none"><td class="tall" > <div class="button gradient lil " style="margin-right:10px;margin-left: 20px;" onclick="Building.reduceAngle();"><span class="fa fa-minus"></span></div><input type="number" onblur="Building.setAngle()" onchange="Building.setAngle()" value="5" id="angle" style="width:70px;text-align:center;"><div class="button gradient lil" onclick="Building.addAngle();" style="margin-left:10px;"><span class="fa fa-plus"></span></div> <div style="font-size: 10px;color: #aea7a7;">(6-20)</div> </td></tr> <tr class="colorhl"><th><div data-l10n="Width"></th></tr> <tr><td class="tall" > <div nosidebuilding id="defaultwidths"></div> <div style="display:none"> <div class="button gradient lil " style="margin-right:10px" onclick="Building.reduceWidth();"><span class="fa fa-minus"></span></div><input onlypro type="number" onblur="Building.setWidth()" onchange="Building.setWidth()" value="5" id="width" style="width:70px;text-align:center;"><div onlypro class="button gradient lil" onclick="Building.addWidth();" style="margin-left:10px;"><span class="fa fa-plus"></span></div> </div> </td></tr> <tr class="colorhl"><th><div data-l10n="Height"></th></tr> <tr><td class=""> <div nosidebuilding id="defaultheights"></div> <div style="display:none"> <div onlypro class="button gradient lil " style="margin-right:10px;" onclick="Building.reduceHeight();"><span class="fa fa-minus"></span></div><input onlypro type="number" step="100" value="100" id="height" onblur="Building.setHeight()" onchange="Building.setHeight()" style="width:70px;text-align:center;"><div onlypro class="button gradient lil" onclick="Building.addHeight();" style="margin-left:10px;"><span class="fa fa-plus"></span></div> </div> </td></tr> <tr class="colorhl"><th><div data-l10n="Depth"></th></tr> <tr><td class="tall"> <div class="button gradient lil " style="margin-right:10px;" onclick="Building.reduceDepth();"><span class="fa fa-minus"></span></div><input onblur="Building.setDepth()" onchange="" type="number" value="5" id="depth" style="width:70px;text-align:center;"><div class="button gradient lil" onclick="Building.addDepth();" style="margin-left:10px;"><span class="fa fa-plus"></span></div></td></tr> <tr onlypro eavesvalid style="display:none"><td class="colorhl"><div class="ctypehl eaves" onclick="Ui.toggleHallStyleNavi('eaves')"><span data-l10n="eaves">Eaves</span> <i class="right"></i></div></td></tr> <tr onlypro eaves eavesvalid ctype style="display:none"><td style="padding-bottom: 0px;"><div id="eaves" class="" > <table> <tr><td></td><td>C(mm) <input onblur="Building.setEaves()" style="width:50px" id="eaves_wall_c"></td><td></td></tr> <tr><td>D(mm) <input id="eaves_wall_d" style="width:50px" onblur="Building.setEaves()"></td><td><center><div style="width:150px;height:auto"><img src="../media/images/overhang_ico.svg" style="width:100%"></div></center></td><td>B(mm) <input id="eaves_wall_b" style="width:50px" onblur="Building.setEaves()"></td></tr> <tr><td></td><td>A(mm) <input id="eaves_wall_a" style="width:50px" onblur="Building.setEaves()"></td><td></td></tr> </table> </div></td></tr> </table> <center class="grey"><div class=" button gradient" style="margin-top:20px;margin-bottom:20px;" data-l10n="close" onclick="Ui.closeAll();"></div></center> </div> <div id="sidebuilding" class="pad white" style="display:none"> <table style="width:100%" class="white"> <tr class="colorhl"><th><div data-l10n="choosesidebuilding"></th></tr> <tr><td style="padding-bottom: 0px;"><div class="" > <table class='sidebuildingtable'> <tr><td></td><td><!--<span style="float:left;" data-l10n="back">Back</span> <input type="checkbox">--></td><td></td></tr> <tr><td><span style="float:left;" data-l10n="left">Left</span> <input onclick="Building.activateSideBuildings()" id="sideb_left" type="checkbox" autocomplete="off"><div class="button gradient lil" onclick="Building.toggleSideLeft()">↕</div></td> <td><center><div style="width:100px;height:100px"><svg id="rooficonside"><defs> <linearGradient id="grad1side" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(250,250,250);stop-opacity:1" /> </linearGradient> <linearGradient id="grad2side" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(250,250,250);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(200,200,200);stop-opacity:1" /> </linearGradient> </defs><polygon points="0,10,50,0,50,100,0,90" style="stroke-width: 1;" fill="url(#grad1side)" stroke="#000000"></polygon><polygon points="50,0,100,10,100,90,50,100" fill="url(#grad2side)" style="stroke-width: 1;" stroke="#000000"></polygon></svg></div></center></td> <td><span style="float:left;" data-l10n="right">Right</span> <input onclick="Building.activateSideBuildings()" id="sideb_right" type="checkbox" autocomplete="off"> <div onclick="Building.toggleSideRight()" class="button gradient lil" >↕</div> </td></tr> <tr><td></td><td><!--<span style="float:left;" data-l10n="front">Front</span> <input type="checkbox">--></td><td></td></tr> </table> </div></td></tr> <!--<tr><td class="colorhl"><div class="ctypehl sidetype1" onclick="Ui.toggleHallStyleNavi('sidetype1')"><span data-l10n="front">Front</span> <i class="down"></i></div></td></tr> <tr sidetype1 sidetype><td style="padding-bottom: 0px;"><div id="frontbuilding" class="colorcol" ></div></td></tr> <tr><td class="colorhl"><div class="ctypehl sidetype1" onclick="Ui.toggleHallStyleNavi('sidetype2')"><span data-l10n="right">Front</span> <i class="down"></i></div></td></tr> <tr sidetype2 sidetype><td style="padding-bottom: 0px;"><div id="rightbuilding" class="colorcol" ></div></td></tr> <tr><td class="colorhl"><div class="ctypehl sidetype1" onclick="Ui.toggleHallStyleNavi('sidetype3')"><span data-l10n="back">Front</span> <i class="down"></i></div></td></tr> <tr sidetype3 sidetype><td style="padding-bottom: 0px;"><div id="backbuilding" class="colorcol" ></div></td></tr> <tr><td class="colorhl"><div class="ctypehl sidetype1" onclick="Ui.toggleHallStyleNavi('sidetype4')"><span data-l10n="left">Front</span> <i class="down"></i></div></td></tr> <tr sidetype4 sidetype><td style="padding-bottom: 0px;"><div id="leftbuilding" class="colorcol" ></div></td></tr> --> </table> <center class="grey"><div class=" button gradient" style="margin-top:20px;margin-bottom:20px;" data-l10n="close" onclick="Ui.resetNavi();"></div></center> </div> <div id="elements2" class="pad white" style="padding:30px;width:450px;" style="display:none"> <div data-l10n="Click wall to place doors and windows" style="font-size:14px;line-height:18px">Please click wall to apply elements</div> </div> <div id="elements" class="pad white" style="display:none;width:220px;"> <div class=" button gradient" style="position:fixed;right:10px;top:50px;z-index:5000;display:none" data-l10n="close" onclick="Ui.closeAll();"></div> <div data-l10n="additems" class="colorhl" style="padding:5px;padding-top: 8px;">Add Items</div> <div style="margin-bottom:10px;display:none" onlypro><div style="margin-right:10px;font-weight:bold" data-l10n="applywallcladding">Apply wall cladding</div> </div> <table onlypro style="display:none;width: 300px;max-width: 600px;background: #f1f1f1;margin-bottom: 5px;"> <tr><td><label for="hidewall"><span data-l10n="nocladding">Cladding</span></label></td><td><input type="checkbox" id="hidewall" style="width:20px;margin-top:-2px;" onclick="WallEditor.toggleWall(this)"></td></tr> <tr><td><label for="cladding"><span data-l10n="cladding">no Cladding</span></label></td><td><input type="checkbox" id="cladding" style="width:20px;margin-top:-2px;" onclick="WallEditor.toggleWall(this)"></td></tr> <!--<tr nomiddle><td><label for="bconnection"><span data-l10n="building_connection">Building connection</span></label></td><td><input type="checkbox" id="bconnection" style="width:20px;margin-top:-2px;" onclick="WallEditor.toggleWall(this)"></td></tr>--> </table> <div> <div class="item" data-item-id="thermo30x30" onclick="Interactive.populateContainer('thermo30x30');"> <div class="thumbnail"><img src="images/ico_d5.jpg"></div> <span class="title" data-l10n="thermo30x30"></span> </div><div class="item" data-item-id="thermo35x35" onclick="Interactive.populateContainer('thermo35x35');"> <div class="thumbnail"><img src="images/ico_d5.jpg"></div> <span class="title" data-l10n="thermo35x35"></span> </div><div class="item" data-item-id="thermo40x40" onclick="Interactive.populateContainer('thermo40x40');"> <div class="thumbnail"><img src="images/ico_d5.jpg"></div> <span class="title" data-l10n="thermo40x40"></span> </div> <!-- <div class="item" data-item-id="thermo47x42" onclick="Interactive.populateContainer('thermo47x42');"> <div class="thumbnail"><img src="images/ico_d5.jpg"></div> <span class="title" data-l10n="thermo47x42"></span> </div><div class="item" data-item-id="thermo47x35" onclick="Interactive.populateContainer('thermo47x35');"> <div class="thumbnail"><img src="images/ico_d5.jpg"></div> <span class="title" data-l10n="thermo47x35"></span> </div><div class="item" data-item-id="roller47x42" onclick="Interactive.populateContainer('roller47x42');"> <div class="thumbnail"><img src="images/ico_d5.jpg"></div> <span class="title" data-l10n="roller47x42"></span> </div> <div class="item" data-item-id="roller47x35" onclick="Interactive.populateContainer('roller47x35');"> <div class="thumbnail"><img src="images/ico_d5.jpg"></div> <span class="title" data-l10n="roller47x35"></span> </div>--> <div class="item" data-item-id="office_door" onclick="Interactive.populateContainer('office_door');"> <div class="thumbnail"><img src="images/ico_door.jpg"></div> <span class="title" data-l10n="office_door"></span> </div> <div class="item" data-item-id="office_door2" onclick="Interactive.populateContainer('office_door2');"> <div class="thumbnail"><img alt="" src="images/ico_door.jpg"></div> <span class="title" data-l10n="office_door2"></span> </div> <div class="item" data-item-id="glass_door" onclick="Interactive.populateContainer('glass_door');"> <div class="thumbnail"><img src="images/ico_door.jpg"></div> <span class="title" data-l10n="glass_door"></span> </div> <div class="item" data-item-id="entrance" onclick="Interactive.populateContainer('entrance');"> <div class="thumbnail"><img src="images/ico_e.jpg"></div> <span class="title" data-l10n="Entrance"></span> </div> <div class="item" data-item-id="G1000x1200" onclick="Interactive.populateContainer('G1000x1200');"> <div class="thumbnail"><img src="images/ico_w1.jpg"></div> <span class="title" data-l10n="G1000x1200"></span> </div><div class="item" data-item-id="G2000x1200" onclick="Interactive.populateContainer('G2000x1200');"> <div class="thumbnail"><img src="images/ico_w1.jpg"></div> <span class="title" data-l10n="G2000x1200"></span> </div><div class="item" data-item-id="G3000x1200" onclick="Interactive.populateContainer('G3000x1200');"> <div class="thumbnail"><img src="images/ico_w1.jpg"></div> <span class="title" data-l10n="G3000x1200"></span> </div><div class="item" data-item-id="G4000x1200" onclick="Interactive.populateContainer('G4000x1200');"> <div class="thumbnail"><img src="images/ico_w1.jpg"></div> <span class="title" data-l10n="G4000x1200"></span> </div> </div> <div class='eseltab' style="display:none"> <div data-l10n="gates" class="newdd-headline button" onclick="$('.newdd:not(.newdd-gsel_gates)').hide();$('.newdd-gsel_gates').toggle()">Gates</div> <div class="newdd newdd-gsel_gates"> <div class='dd-tools'></div> <div id="gsel_gates" class='newdd-list' style="width:100%" > </div> </div> </div> <div class='eseltab' style="display:none"> <div data-l10n="doors" class="newdd-headline button" onclick="$('.newdd:not(.newdd-gsel_doors)').hide();$('.newdd-gsel_doors').toggle()">Doors</div> <div class="newdd newdd-gsel_doors"> <div class='dd-tools'></div> <div id="gsel_doors" class='newdd-list' style="width:100%" > </div> </div> </div> <div class='eseltab' style="display:none"> <div data-l10n="windows" class="newdd-headline button" onclick="$('.newdd:not(.newdd-gsel_windows)').hide();$('.newdd-gsel_windows').toggle()">Windows</div> <div class="newdd newdd-gsel_windows"> <div class='dd-tools'><div class="buttonlil2 dd-tool-button dd-tool-button-all toolactive" data-l10n="all" onclick="Ui.sortDD('gsel_windows','all')">all</div><div class="buttonlil2 dd-tool-button dd-tool-button-wide" data-l10n="wide" onclick="Ui.sortDD('gsel_windows','wide')">wide</div><div class="buttonlil2 dd-tool-button dd-tool-button-narrow" data-l10n="narrow" onclick="Ui.sortDD('gsel_windows','narrow')">narrow</div><div class="buttonlil2 dd-tool-button dd-tool-button-square" data-l10n="square" onclick="Ui.sortDD('gsel_windows','square')">square</div></div> <div id="gsel_windows" class='newdd-list' style="width:100%" > </div> </div> </div> <div class='eseltab' style="display:none"> <div data-l10n="canopies" class="newdd-headline button" onclick="$('.newdd:not(.newdd-gsel_canopies)').hide();$('.newdd-gsel_canopies').toggle()">canopies</div> <div class="newdd newdd-gsel_canopies"> <div class='dd-tools'></div> <div id="gsel_canopies" class='newdd-list' style="width:100%" > </div> </div> </div> <!- end wall editor-> <center class="" style="background-:#b7bdc8" editorok> <div class=" button gradient nomobile" style="margin-top:20px;margin-bottom:20px;width: calc(100% - 10px);font-weight: bold;" onclick="Ui.showElementEditor();"><span data-l10n="editpositions"></span><span style="margin-left:10px;" class="fa fa-arrows"></span></div> <div class=" button gradient" style="margin-bottom:20px;width: calc(100% - 10px);font-weight: bold;" onclick="WallEditor.clearElements(true);"><span data-l10n="clearelements"></span></div> <div class=" button gradient" style="position: absolute;bottom: 10px;display: block;left: 50%;margin-left: -20px;" data-l10n="close" onclick="Ui.closeAll();"></div> </center> <!--<div style="font-size:10px;color:#7f7f7f;margin-top:5px;letter-spacing: 1px;padding:3px;font-weight: normal"> Hint: drag elements to move, red corner to remove.<br> - safety margins applies automatically </div>--> </div> <div id='elementeditor' style="display:none"> <div class="elementtools"> <div class='eseltab' > <div data-l10n="gates" class="newdd-headline button" onclick="$('.newdd:not(.newdd-gsel_gates2)').hide();$('.newdd-gsel_gates2').toggle()">Gates</div> <div class="newdd newdd-gsel_gates2"> <div class='dd-tools'></div> <div id="gsel_gates2" class='newdd-list' style="width:100%" > </div> </div> </div> <div class='eseltab'> <div data-l10n="doors" class="newdd-headline button" onclick="$('.newdd:not(.newdd-gsel_doors2)').hide();$('.newdd-gsel_doors2').toggle()">Doors</div> <div class="newdd newdd-gsel_doors2"> <div class='dd-tools'></div> <div id="gsel_doors2" class='newdd-list' style="width:100%" > </div> </div> </div> <div class='eseltab'> <div data-l10n="windows" class="newdd-headline button" onclick="$('.newdd:not(.newdd-gsel_windows2)').hide();$('.newdd-gsel_windows2').toggle()">Windows</div> <div class="newdd newdd-gsel_windows2"> <div class='dd-tools'><div class="buttonlil2 dd-tool-button dd-tool-button-all toolactive" data-l10n="all" onclick="Ui.sortDD('gsel_windows2','all')">all</div><div class="buttonlil2 dd-tool-button dd-tool-button-wide" data-l10n="wide" onclick="Ui.sortDD('gsel_windows','wide')">wide</div><div class="buttonlil2 dd-tool-button dd-tool-button-narrow" data-l10n="narrow" onclick="Ui.sortDD('gsel_windows','narrow')">narrow</div><div class="buttonlil2 dd-tool-button dd-tool-button-square" data-l10n="square" onclick="Ui.sortDD('gsel_windows','square')">square</div></div> <div id="gsel_windows2" class='newdd-list' style="width:100%" > </div> </div> </div> <div class='eseltab' style="display:none"> <div data-l10n="canopies" class="newdd-headline button" onclick="$('.newdd:not(.newdd-gsel_canopies2)').hide();$('.newdd-gsel_canopies2').toggle()">canopies</div> <div class="newdd newdd-gsel_canopies2"> <div class='dd-tools'></div> <div id="gsel_canopies2" class='newdd-list' style="width:100%" > </div> </div> </div> <div class=" button gradient walleditorclose2" style="z-index:10000;" data-l10n="back" onclick="Ui.hideElementEditor();"></div> </div> <div class="svgcontainer"> <svg id="guides" class="walleditor" fill="#cccccc" stroke="#000000" style="pointer-events:none;stroke-width:1 ;float:left;position:absolute;z-index:0"></svg> <svg id="eemeasures" fill="rgba(0,0,0,0)" stroke="#000000" style="pointer-events:none;stroke-width:1 ;float:left;position:absolute;z-index:6000"></svg> <svg id="ee" style="position:absolute;z-index:5000"class="ee" width="300" height="512"> </svg> </div> <div class=" button gradient walleditorclose" style="z-index:10000;" data-l10n="back" onclick="Ui.hideElementEditor();"></div> <div data-l10n="elementmarginhelp" style="padding:5px;font-size:10px;z-index:10100;position:fixed;pointer-events: none;"></div> </div> <div id="elements3" class="pad white" style="display:none;padding:5px"> <div style="clear:both;margin-bottom:20px;">Hint: Hide roof (from left bottom) to access Interiors. Select interior slot and assign style.</div> <div class="item selected" data-item-id="none" onclick="Interactive.populateContainer('clear');$('[data-item-id]').removeClass('selected');$(this).addClass('selected')"> <div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div> <span class="title" data-l10n="Blank">No selection</span> </div> <div class="item selected" data-item-id="2-store" minh="4.2" onclick="Interactive.populateContainer('2-store');$('[data-item-id]').removeClass('selected');$(this).addClass('selected')"> <div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div> <span class="title" data-l10n="stores">2-store</span> </div> <div class="item selected" data-item-id="2-store-stairs" minh="4.2" onclick="Interactive.populateContainer('2-store-stairs');$('[data-item-id]').removeClass('selected');$(this).addClass('selected')"> <div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div> <span class="title" data-l10n="stores_stairs">2-store</span> </div> <!-- <div class="item selected" data-item-id="shelves" onclick="Interactive.populateContainer('shelves');"> <div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div> <span class="title" data-l10n="shelves">Shelves</span> </div> --> <center class="grey"><div class=" button gradient" style="margin-top:20px;margin-bottom:20px;" data-l10n="close" onclick="Ui.closeAll();"></div></center> </div> <div id="roofelements" class="pad white" style="display:none"> <!--<div style="clear:both;margin-bottom:20px;">Hint: Hide roof (from left bottom) to access Interiors. Select interior slot and assign style.</div>--> <div class="itemgroup"> <div class="item button selected" data-item-id="none" onclick="Interactive.populateContainer('clear');"> <!--<div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div>--> <span class="title" data-l10n="Blank">No selection</span> </div> </div> <div class="itemgroup" roofridge roofgroup> <!-- <div class="item" lightridge style="float:none" onclick="Interactive.populateContainer('lightridge');$('.item').removeClass('selected');$('div[lightridge]').addClass('selected')"> <div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div> <span class="title" data-l10n="lichtfirst">Transparent roof</span> </div>--> <div class="item button" lightridge_thermo style="float:none" onclick="Interactive.populateContainer('lightridge_thermo');$('.item').removeClass('selected');$('div[lightridge_thermo]').addClass('selected')"> <!--<div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div>--> <span class="title" data-l10n="lichtfirst_thermo">Transparent roof</span> </div> <div class="item button" lightridge_flap style="float:none" onclick="Interactive.populateContainer('lightridge_flap');$('.item').removeClass('selected');$('div[lightridge_flap]').addClass('selected')"> <!-- <div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div>--> <span class="title" data-l10n="lichtfirst_flap">Transparent roof</span> </div> </div> <div class="itemgroup" roof roofgroup> <div class="item button" domelight_thermo onclick="Interactive.populateContainer('domelight_thermo');$('.item').removeClass('selected');$('div[domelight_thermo]').addClass('selected')"> <span class="title" data-l10n="lichtkupp_thermo">Dome light</span> </div> <!-- <div class="item button" domelight_flap onclick="Interactive.populateContainer('domelight_flap');$('.item').removeClass('selected');$('div[domelight_flap]').addClass('selected')"> <span class="title" data-l10n="lichtkupp_flap">Dome light</span> </div> --> <!--<div class="item button" lace_light onclick="Interactive.populateContainer('lace_light');$('.item').removeClass('selected');$('div[lace_light]').addClass('selected')"> <span class="title" data-l10n="lace_light">lace light</span> </div> --> </div> <!-- <div class="itemgroup" roof roofgroup> <div class="item" solarpanel onclick="Interactive.populateContainer('solarpanel');$('.item').removeClass('selected');$('div[solarpanel]').addClass('selected')"> <div class="thumbnail"><img src="../media/images/ico_wall.jpg"></div> <span class="title" data-l10n="solarpanel"></span> </div> </div>--> <div style="clear:both"><center class="grey"><div class=" button gradient" style="margin-top:20px;margin-bottom:20px;" data-l10n="close" onclick="Ui.closeAll();"></div></center></div> </div> <div id="colors" class="pad" style="margin-bottom:50px;display:none" > <table style="width:100%;border-collapse:collapse"> <tr><td class="colorhl"><div class="ctypehl ctype1" data-l10n="Roof" onclick="Ui.toggleHallStyleNavi('ctype1')">Dach <i class="down"></i></div></td></tr> <tr ctype1 ctype><td style="padding-bottom: 0px;"><div id="roof" class="colorcol" ></div></td></tr> <tr><td class="colorhl"><div class="ctypehl ctype2" data-l10n="Wall" onclick="Ui.toggleHallStyleNavi('ctype2')">Wände <i class="right"></i></div></td></tr> <tr ctype2 ctype style="display:none;"><td style="padding-bottom: 0px;"><div id="wall" class="colorcol" ></div></td></tr> <tr class="frow"><td class="colorhl"><div class="ctypehl ctype3" data-l10n="Flashings" onclick="Ui.toggleHallStyleNavi('ctype3')">Kantbleche <i class="right"></i></div></td></tr> <tr ctype3 ctype style="display:none;" class="frow"><td><div id="flashings" class="colorcol" ></div></td></tr> <tr><td class="colorhl"><div class="ctypehl ctype4" data-l10n="gate" onclick="Ui.toggleHallStyleNavi('ctype4')">Sektionaltor <i class="right"></i></div></td></tr> <tr ctype4 ctype style="display:none;"><td style="padding-bottom: 0px;"><div id="gate" class="colorcol" ></div></td></tr> <!--<tr><td class="colorhl"><div class="ctypehl ctype5" data-l10n="Window" onclick="Ui.toggleHallStyleNavi('ctype5')">Fenster <i class="right"></i></div></td></tr> <tr ctype5 ctype style="display:none;"><td style="padding-bottom: 0px;"><div id="window" class="colorcol" ></div></td></tr>--> <tr><td class="colorhl"><div class="ctypehl ctype6" data-l10n="doors" onclick="Ui.toggleHallStyleNavi('ctype6')">Tür <i class="right"></i></div></td></tr> <tr ctype6 ctype style="display:none;"><td style="padding-bottom: 0px;"><div id="door" class="colorcol" ></div></td></tr> <tr class="hidden"><td><div style="font-size:10px;" data-l10n="colorinfo" style="padding:3px;"></div></tr> </table> </div> <div id="features" class="pad white" style="display:none"> <table class="btypetable"> <tr><td class="colorhl" colspan="2"><div class="btype1 btypehl" style="" data-l10n="insulation" onclick="Ui.toggleHallStyleNavi('btype1')"><i class="right"></i></div></tr> <tr btype1_ btype_ class="gradient"><td><label for="profilesheet"><span data-l10n="ins0">Ungedämmt Stahlhalle</span></label></td><td style="text-align:right"><input type="radio" name="warm" onclick="Ui.setBuildingType(this)" id="0"></td></tr> <tr btype1_ btype_ class="gradient"><td><label for="60"><span data-l10n="ins60">60 mm wärmegedämmt <br><span style="font-size:9px;display:none">(U-wert Wand: 0,383 W/m<sup>2</sup>K Dach: 0,334 W/m<sup>2</sup>K)</span></span></label></td><td style="text-align:right"><input type="radio" onclick="Ui.setBuildingType(this)" name="warm" id="60"></td></tr> <tr btype1_ btype_ class="gradient"><td><label for="80"><span data-l10n="ins80">80 mm wärmegedämmt <br><span style="font-size:9px;display:none">(U-wert Wand: 0,284 W/m<sup>2</sup>K Dach: 0,254 W/m<sup>2</sup>K)</span></span></label></td><td style="text-align:right"><input type="radio" onclick="Ui.setBuildingType(this)" name="warm" id="80"></td></tr> <tr btype1_ btype_ class="gradient"><td><label for="100"><span data-l10n="ins100">100 mm wärmegedämmt <br><span style="font-size:9px;display:none">(U-wert Wand: 0,226 W/m<sup>2</sup>K Dach: 0,206 W/m<sup>2</sup>K)</span></span></label></td><td style="text-align:right"><input type="radio" onclick="Ui.setBuildingType(this)" name="warm" id="100"></td></tr> <tr btype1_ btype_ class="gradient"><td><label for="120"><span data-l10n="ins120">120 mm wärmegedämmt <br><span style="font-size:9px;display:none">(U-wert Wand: 0,187 W/m<sup>2</sup>K Dach: 0,172 W/m<sup>2</sup>K)</span></span></label></td><td style="text-align:right"><input type="radio" onclick="Ui.setBuildingType(this)" name="warm" id="120"></td></tr> <tr btype1_ btype_ class="gradient"><td><label for="140"><span data-l10n="ins140">140 mm wärmegedämmt<br><span style="font-size:9px;display:none">(U-wert Wand: 0,163 W/m<sup>2</sup>K Dach: 0,149 W/m<sup>2</sup>K)</span></span></label></td><td style="text-align:right"><input type="radio" onclick="Ui.setBuildingType(this)" name="warm" id="140"></td></tr> <tr btype1_ btype_ class="gradient"><td><label for="150"><span data-l10n="ins150">150 mm wärmegedämmt<br><span style="font-size:9px;display:none">(U-wert Wand: 0,163 W/m<sup>2</sup>K Dach: 0,149 W/m<sup>2</sup>K)</span></span></label></td><td style="text-align:right"><input type="radio" onclick="Ui.setBuildingType(this)" name="warm" id="150"></td></tr> <!--<tr><td class="colorhl" colspan="2"><div class="btype1 btypehl" style="" data-l10n="features" onclick="Ui.toggleHallStyleNavi('btype1')"><i class="right"></i></div></tr> <tr class="gradient"><td><label for="rws"><span data-l10n="rws">Rain water gutters</span></label></td><td style="text-align:right"><input type="checkbox" name="rws" autocomplete="off" onclick="Ui.setUserParams(this)" id="rws"></td></tr> --> </table> <center class="grey"><div class="button gradient" style="margin-top:20px;margin-bottom:20px;" data-l10n="close" onclick="Ui.resetNavi();"></div></center> </div> <div id="roofwalls" class="pad white"> <!--<hr>--> </div> <div id="ready" class="pad" style="display:none"> <div id="orderForm" > <div id="facts" style="" class="nomobile"> <!--<iframe width="100%" height="100%" id="pdf">
-->
Dimensions
Width
??m
Length
??m
Height
??m
FirstHeight
??m
Floor area
??m
Bauart
??m
Pitch
??m
??m
kg/m
2
Colors
Fill this information for an offer
Company
Name
Email
Telephone
Address
Address
Address
Building location
Location postcode
Hall purpose
select
Storage
Agricultural
Retail and offices
Production Buildings
Aircraft Hangers
Other uses
Additional info
Cancel »
Submit »
Thank you for using our building configurator,
your detailed quotation will be sent to you shortly.
Close and return to design
