
<script src="https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/js/croppie.js"></script>
<script type="text/javascript" src="https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/js/upload.js"></script>
<link href="https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/css/croppie.css" rel="stylesheet">


    <div class="joint-filler-visualizer">
        <div class="container position-relative">
            <div class="row gx-0">
                <div class="col-lg-3">
                    <div class="left-column bg-clr-1 p-3 h-100">
                        <div class="room-filter-category-wrapper">
                            <div class="joint-wrap mb-4">
                                <h5 class="fw-normal mb-3">Joint Filler Colourant</h5>
                                <ul class="colors list-unstyled mb-0">
                                                                                <li class="active" style="--bgClr:#D2B189;" data-hexa="D2B189" data-bs-toggle="tooltip" data-bs-title="Limestone"></li>
                                                                                        <li class="" style="--bgClr:#F2F0EA;" data-hexa="F2F0EA" data-bs-toggle="tooltip" data-bs-title="Nano White"></li>
                                                                                        <li class="" style="--bgClr:#3D1E12;" data-hexa="3D1E12" data-bs-toggle="tooltip" data-bs-title="Terra Red"></li>
                                                                                        <li class="" style="--bgClr:#F4E9B8;" data-hexa="F4E9B8" data-bs-toggle="tooltip" data-bs-title="Ivory"></li>
                                                                                        <li class="" style="--bgClr:#FFFFFF;" data-hexa="FFFFFF" data-bs-toggle="tooltip" data-bs-title="White"></li>
                                                                                        <li class="" style="--bgClr:#343C42;" data-hexa="343C42" data-bs-toggle="tooltip" data-bs-title="Dark Grey"></li>
                                                                                        <li class="" style="--bgClr:#9A785A;" data-hexa="9A785A" data-bs-toggle="tooltip" data-bs-title="Brown"></li>
                                                                                        <li class="" style="--bgClr:#76513F;" data-hexa="76513F" data-bs-toggle="tooltip" data-bs-title="Dusty Brown"></li>
                                                                                        <li class="" style="--bgClr:#240F12;" data-hexa="240F12" data-bs-toggle="tooltip" data-bs-title="Chocolate"></li>
                                                                                        <li class="" style="--bgClr:#705F50;" data-hexa="705F50" data-bs-toggle="tooltip" data-bs-title="Sand Stone"></li>
                                                                                        <li class="" style="--bgClr:#000000;" data-hexa="000000" data-bs-toggle="tooltip" data-bs-title="Black"></li>
                                                                                        <li class="" style="--bgClr:#41A7C3;" data-hexa="41A7C3" data-bs-toggle="tooltip" data-bs-title="Aqua Blue"></li>
                                                                                        <li class="" style="--bgClr:#18317A;" data-hexa="18317A" data-bs-toggle="tooltip" data-bs-title="Dark Blue"></li>
                                                                                        <li class="" style="--bgClr:#1F0B07;" data-hexa="1F0B07" data-bs-toggle="tooltip" data-bs-title="Coffee Brown"></li>
                                                                                        <li class="" style="--bgClr:#8F8D7F;" data-hexa="8F8D7F" data-bs-toggle="tooltip" data-bs-title="Silver Dusk"></li>
                                                                                        <li class="" style="--bgClr:#343C42;" data-hexa="343C42" data-bs-toggle="tooltip" data-bs-title="Stone Grey"></li>
                                                                                        <li class="" style="--bgClr:#6D6759;" data-hexa="6D6759" data-bs-toggle="tooltip" data-bs-title="Natural Grey"></li>
                                                                                        <li class="" style="--bgClr:#999898;" data-hexa="999898" data-bs-toggle="tooltip" data-bs-title="Portland Grey"></li>
                                                                                        <li class="" style="--bgClr:#9C171F;" data-hexa="9C171F" data-bs-toggle="tooltip" data-bs-title="Chilly Red"></li>
                                                                                        <li class="" style="--bgClr:#C78B54;" data-hexa="C78B54" data-bs-toggle="tooltip" data-bs-title="Terra Light"></li>
                                                                                        <li class="" style="--bgClr:#D8C110;" data-hexa="D8C110" data-bs-toggle="tooltip" data-bs-title="Lemon Yellow"></li>
                                                                                        <li class="" style="--bgClr:#2863AE;" data-hexa="2863AE" data-bs-toggle="tooltip" data-bs-title="Blue"></li>
                                                                                        <li class="" style="--bgClr:#A1C90B;" data-hexa="A1C90B" data-bs-toggle="tooltip" data-bs-title="Kelly Green"></li>
                                                                                        <li class="" style="--bgClr:#00352C;" data-hexa="00352C" data-bs-toggle="tooltip" data-bs-title="Moss Green"></li>
                                                                                        <li class="" style="--bgClr:#B34115;" data-hexa="B34115" data-bs-toggle="tooltip" data-bs-title="Sunset"></li>
                                                                                        <li class="" style="--bgClr:#BA8405;" data-hexa="BA8405" data-bs-toggle="tooltip" data-bs-title="Sweat Gold"></li>
                                                                                        <li class="" style="--bgClr:#A6B998;" data-hexa="A6B998" data-bs-toggle="tooltip" data-bs-title="Light Green"></li>
                                                                                        <li class="" style="--bgClr:#A65933;" data-hexa="A65933" data-bs-toggle="tooltip" data-bs-title="Spectra Brown"></li>
                                                                                        <li class="" style="--bgClr:#604D3D;" data-hexa="604D3D" data-bs-toggle="tooltip" data-bs-title="Burlywood"></li>
                                                                                        <li class="" style="--bgClr:#250F08;" data-hexa="250F08" data-bs-toggle="tooltip" data-bs-title="Scarlet"></li>
                                                                                        <li class="" style="--bgClr:#611F16;" data-hexa="611F16" data-bs-toggle="tooltip" data-bs-title="Ruby Red"></li>
                                                                                        <li class="" style="--bgClr:#DCBC8E;" data-hexa="DCBC8E" data-bs-toggle="tooltip" data-bs-title="Pale White"></li>
                                                                                        <li class="" style="--bgClr:#1B1C1B;" data-hexa="1B1C1B" data-bs-toggle="tooltip" data-bs-title="Abone"></li>
                                                                                        <li class="" style="--bgClr:#6D6759;" data-hexa="6D6759" data-bs-toggle="tooltip" data-bs-title="Ash Grey"></li>
                                                                                        <li class="" style="--bgClr:#B83706;" data-hexa="B83706" data-bs-toggle="tooltip" data-bs-title="Peach"></li>
                                                                                        <li class="" style="--bgClr:#A85900;" data-hexa="A85900" data-bs-toggle="tooltip" data-bs-title="Jaisalmer"></li>
                                                                                        <li class="" style="--bgClr:#473179;" data-hexa="473179" data-bs-toggle="tooltip" data-bs-title="Indigo"></li>
                                                                
                                </ul>
                            </div>
                        
                            <div class="joint-filler-wrap border-bottom pb-2 mb-3">
                                <h5 class="mb-2">Joint Filler Size</h5>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input room-size-selection" type="radio" name="rdjointFillerSize" id="rdjointFillerSize1" value="0.5" checked>
                                    <label class="form-check-label" for="rdjointFillerSize1">3mm</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input room-size-selection" type="radio" name="rdjointFillerSize" id="rdjointFillerSize2" value="1">
                                    <label class="form-check-label" for="rdjointFillerSize2">4mm</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input room-size-selection" type="radio" name="rdjointFillerSize" id="rdjointFillerSize3" value="1.5">
                                    <label class="form-check-label" for="rdjointFillerSize3">5mm</label>
                                </div>
                            </div>
        
                            <div class="tile-size-wrap border-bottom pb-2 mb-3">
                                <h5 class="mb-2">Tile Size</h5>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input tile-size-selection" type="radio" name="rdtileSize" id="rdtileSize1" value="100" checked>
                                    <label class="form-check-label" for="rdtileSize1">Small</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input tile-size-selection" type="radio" name="rdtileSize" id="rdtileSize2" value="200">
                                    <label class="form-check-label" for="rdtileSize2">Medium</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input tile-size-selection" type="radio" name="rdtileSize" id="rdtileSize3" value="300">
                                    <label class="form-check-label" for="rdtileSize3">Large</label>
                                </div>
                            </div>
        
                            <div class="tile-angle-wrap border-bottom pb-2 mb-3">
                                <h5 class="mb-2">Tile Angle</h5>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input tile-angle-selection" type="radio" name="rdtileAngle" id="rdtileAngle1" value="" checked>
                                    <label class="form-check-label" for="rdtileAngle1">Square</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input tile-angle-selection" type="radio" name="rdtileAngle" id="rdtileAngle2" value="rectangle">
                                    <label class="form-check-label" for="rdtileAngle2">Rectangle</label>
                                </div>
                            </div>
        
                            <div class="room-surface-wrap">
                                <h5 class="mb-2">Room Surface</h5>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input room-surface-selection" type="radio" name="rdroomSurface" id="rdroomSurface1" value="1" checked>
                                    <label class="form-check-label" for="rdroomSurface1">Floor</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input room-surface-selection" type="radio" name="rdroomSurface" id="rdroomSurface2" value="2">
                                    <label class="form-check-label" for="rdroomSurface2">Wall</label>
                                </div>  
                            </div>
        
                            <div class="room-filter-category-wrapper upload-image-selection-wrapper"> 
                                <h5 class="mb-2">Upload Image</h5>
                                <div class="input-group form-group custom-file-button">
                                    <label class="input-group-text upload-text rounded-0 border-0 visualizer-select-label" for="txtFile">
                                        <input type="file" class="form-control images" id="txtFile">                                        
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="right-column position-relative">
                        <h5 class="color-name-wrap"><span>Brilliant White</span></h5>
                        <div class="room-wrapper">
                            <div class="tile-block" style="background-color:#D2B189;">
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                                    <div class="tile-wrap">
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                                <div class="tile" style="background-image: url('https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/tile-template.jpg');"></div>
                                                                            </div>
                                                
                            </div>
                            <img src="https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/images/room-pic.png" alt="" class="img-fluid room-pic">
                            <div id="upload-image" style="display:none; position:absolute; inset: 0; z-index:2;">
                                <button class="btn btn-success cropped_image">Replace Image</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        jQuery(document).ready(function () {
            /*var vWWidth = $(window).width();
            var vCWidth = $('.container').width();
            var vLWidth = (vWWidth - vCWidth) / 2;
            $('.joint-filler-visualizer .left-column').css({'width': vLWidth + 'px'});*/

            $('.joint-wrap li').click(function () {
                $('.joint-wrap .colors li').removeClass('active');
                $(this).addClass('active');

                var hexa = $(this).attr('data-hexa');
                $('.joint-filler-visualizer .tile-block').css('background-color', '#' + hexa);
                $('.color-name-wrap span').html($(this).attr('data-bs-title'));
            });

            $('.room-size-selection').click(function(){
                $('.tile-wrap .tile').css('margin', $(this).val() + 'px');
            });

            $('.tile-size-selection').change(function(){
                $('.tile-wrap .tile').css('width', $(this).val() + 'px');
            });

            $('.tile-angle-selection').change(function(){
                if($(this).val() != '') $('.room-wrapper').addClass($(this).val());
                else $('.room-wrapper').removeClass('rectangle');
            });

            $('.room-surface-selection').change(function(){
                if($(this).val() == 1) { $('.room-wrapper').removeClass('room-wall-surface'); }
                else $('.room-wrapper').addClass('room-wall-surface');
            });

            $('.images').change(function(){
                $('#upload-image').show();
            });

            $('.cropped_image').on('click', function (ev) {
                $image_crop.croppie('result', {
                    type: 'canvas',
                    size: 'viewport'
                }).then(function (response) {

                    jQuery.ajax(
                    {
                        url: "https://www.powergraceindustries.com/tile-joint-filler/wp-admin/admin-ajax.php",
                        data: {action: "upload_image", image:response},
                        type: 'POST',
                        dataType: "json",
                        success: function (data) {
                            html = '<img src="' + response + '" />';
                            $("#upload-image-i").html(html);

                            $('#upload-image').hide();
                            $('#upload-image .cr-boundary').remove();
                            $('#upload-image .cr-slider-wrap').remove();
                            $image_crop = $('#upload-image').croppie({enableExif: true,
                                viewport: { width: 200, height: 200, type: 'square' },
                                boundary: { width: 300, height: 300 }
                            });

                            setTimeout(function () {
                                $('.tile-block .tile').css('background-image', 'url(https://www.powergraceindustries.com/tile-joint-filler/wp-content/plugins/bapl-tile-filler/upload/' + data['image'] +')');
                            }, 1000);
                        }
                    });  
                });
            });
        });
    </script>
{"id":236,"date":"2024-05-30T09:52:49","date_gmt":"2024-05-30T09:52:49","guid":{"rendered":"https:\/\/www.powergraceindustries.com\/?page_id=236"},"modified":"2024-05-30T10:37:35","modified_gmt":"2024-05-30T10:37:35","slug":"tile-joint-filler-visualizer","status":"publish","type":"page","link":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/","title":{"rendered":"Tile Joint Filler Visualizer"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-236","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/wp-json\/wp\/v2\/pages\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":4,"href":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/wp-json\/wp\/v2\/pages\/236\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/wp-json\/wp\/v2\/pages\/236\/revisions\/242"}],"wp:attachment":[{"href":"https:\/\/www.powergraceindustries.com\/tile-joint-filler\/wp-json\/wp\/v2\/media?parent=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}