File: /home/imensosw/www/imenso.co/dev/board-customization/index.html
<!DOCTYPE html>
<html>
<head>
<title>board-customization</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" href="js/jquery-ui.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src="js/drag_drop.js"></script>
<style type="text/css"></style>
</head>
<body>
<header>
<span>Titan Boards Product Customization Tool</span>
<div class="header-top-right">
<div class="total-amount">Total Amount <span id="totalAmount">$0</span></div>
<div class="bucket">
<a href="#"><img src="img/cart.png" alt="cart" /></a><span>00</span>
</div>
</div>
</header>
<div class="dashboard">
<!-- left panel open -->
<div class="col pro-thumb-area">
<div class="col-heading active producrt-accordion">Products</div>
<div class="m-2 accordion-panel open">
<select class="form-control" id="category">
<option value="">Category</option>
<option value="whiteboards">WHITEBOARDS</option>
<option value="pinboard">PINBOARD</option>
</select>
<select class="form-control" id="whiteboardsSubcategory" style="display: none;">
<optgroup label="STANDARD MAGNETIC">
<option>STD FRAME</option>
</optgroup>
</select>
<select class="form-control" id="pinboardSubcategory" style="display: none;">
<optgroup label="AUTEX">
<option>LX RANGE</option>
</optgroup>
</select>
<div class="cloneBoard">
<table class="table-custom" cellspacing="0" id="whiteboardsTable" style="display: none">
<tr>
<td>
<span class="mozgat f75x30">
<img src="img/VB1290.png" data-category="whiteboards" data-width="120" data-height="90" alt="WHITEBOARD COMMUNICATE" class="cust_board-img" />
<p class="size size_h">450</p>
<p class="size size_w">600</p>
</span>
<h6 class="text-center">WHITEBOARD COMMUNICATE</h6>
</td>
</tr>
</table>
<table class="table-custom" cellspacing="0" id="pinboardTable" style="display: none">
<tr>
<td>
<span id="drag3" class="mozgat f75x30">
<img src="img/LX7-1590-K.png" data-category="pinboard" data-width="180" data-height="120" alt="PINBOARD LX7 FABRIC" class="cust_board-img" />
<p class="size size_h">600</p>
<p class="size size_w">900</p>
</span>
<h6 class="text-center">PINBOARD LX7 FABRIC</h6>
</td>
</tr>
</table>
</div>
</div>
<div class="dimention">
<div class="col-heading producrt-accordion">Wall Dimension <small>(mm)</small></div>
<div class="m-2 accordion-panel">
<input type="text" name="" class="size" value="2000" id="wall-width" />
<strong>X</strong>
<input type="text" name="" class="size" value="2000" id="wall-height" />
</div>
<!-- <hr /> -->
</div>
<div class="other-artical">
<div class="col-heading producrt-accordion">Object</div>
<div class="m-2 accordion-panel">
<table class="table-custom" cellspacing="0">
<tr>
<td>
<span id="drag3" class="mozgat object f75x30">
<img src="img/windows.png" alt="windows" data-category="object" data-width="60" data-height="82" />
<p class="size size_h">300</p>
<p class="size size_w">410</p>
</span>
</td>
<td>
<span id="drag3" class="mozgat object f75x30">
<img src="img/door.png" alt="windows" data-category="object" data-width="51" data-height="51" />
<p class="size size_h">255</p>
<p class="size size_w">255</p>
</span>
</td>
</tr>
</table>
</div>
</div>
<div class="wall-pallet">
<div class="col-heading producrt-accordion">Wall Pallet</div>
<div class="m-2 accordion-panel">
<a href="javascript:;" class="wall-pallet-link"> <img src="img/parquet.svg" alt="windows" /></a>
<a href="javascript:;" class="wall-pallet-link"> <img src="img/floor.svg" alt="windows" /></a>
<a href="javascript:;" class="wall-pallet-link"> <img src="img/parquet_1.svg" alt="windows" /></a>
<a href="javascript:;" class="wall-pallet-link active" > <img style="border: 1px solid #000;" src="img/no-bg.svg" alt="windows" /></a>
</div>
</div>
<div class="wall-color">
<div class="col-heading producrt-accordion">Wall Color</div>
<div class="m-2 accordion-panel">
<a href="javascript:;" class="color-thumb" data-color="#fc0" style="background: #fc0"></a>
<a href="javascript:;" class="color-thumb" data-color="#f00" style="background: #f00"></a>
<a href="javascript:;" class="color-thumb" data-color="#cf0" style="background: #cf0"></a>
<a href="javascript:;" class="color-thumb active" data-color="#fff" style="background: #fff"></a>
</div>
</div>
</div>
<!-- left panel close -->
<!-- Dashboard open -->
<div class="col wall-area" id="dndBoard">
<div class="base-area" >
<div class="area-show area_x">2000</div>
<div class="area-show area_y">2000</div>
</div>
<div id="ch_dndBoard1" class="bal-oszlop tapad bal"></div>
</div>
<!-- Dashboard close -->
<!-- right panel open -->
<div class="col product-details">
<div class="m-2 productRigthSection">
</div>
</div>
<!-- right panel close -->
</div>
<!-- <div class="action-bottom">
<div class="pull-left">
<a href="#">Download PDF Plan</a>
<a href="#">Download Excel Quote</a>
</div>
<div class="pull-right text-right">
<a href="#" class="add2cart">Add to Cart</a>
</div>
</div> -->
<!-- <footer class="text-center border-top"> product-customization </footer> -->
<script src="js/custom.js"></script>
</body>
</html>