<!--sauna calc start!-->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<!-- <script src="https://cdn.tailwindcss.com"></script> -->

<style>

/* Newly added for remove up and down arrow in input field  */
@layer components {
  .no-spinner {
    appearance: textfield;
  }
  
  .no-spinner::-webkit-outer-spin-button,
  .no-spinner::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
}


::-webkit-input-placeholder { color: #fff !important; }
:-moz-placeholder { color: #fff !important; }
::-moz-placeholder { color: #fff !important; }
:-ms-input-placeholder { color: #fff !important; }

.section { display: none; }
.section.active { display: block; }
.invisible { display: none; }

button { border-radius: 5px; font-weight: 600; }

.loaderbutt {  
    position: fixed;  
    left: 0px;  
    top: 0%;  
    width: 100%;  
    height: 100%;  
    z-index: 9999;  
    background:url('https://newsa.ntplstaging.com/wp-content/themes/sauna-specialiste/inc/sauna-room-calculator/images/ajax-loader.gif') 50% 50% no-repeat #fff;
    opacity:0.8;
}
.load-txt { color:#fff !important; }
</style>

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> -->

<body data-rsssl=1>
<div style="display:none" class="loaderbutt">
    <p class="load-txt">Please wait...</p>
</div>

<div>
    <ul class="my_nav" style="display: none;">
        <li class="active my_li" data-cont="r1"><h4></h4></li>
        <li class="my_li" data-cont="r2">2</li>
        <li class="my_li" data-cont="r3">3</li>
        <li class="my_li" data-cont="r4">4</li>
        <li class="my_li" data-cont="r5">5</li>
        <li class="my_li" data-cont="r6">6</li>
        <li class="my_li" data-cont="r7">7</li>
        <li class="my_li" data-cont="r8">8</li>
        <li class="my_li" data-cont="r9">9</li>
        <li class="my_li" data-cont="r10">10</li>
    </ul>
</div>

<!-- Page Container -->
<div class="mt-10 mb-10">
    <!-- Main Wrapper -->
    <div class="grid grid-cols-1 lg:grid-cols-12 items-stretch text-white min-h-[450px]">
        
        <!-- LEFT SIDE -->
        <div class="col-span-12 lg:col-span-7 bg-[#4A5135] p-4 md:p-8 flex">
            <div class="my-auto w-full">
                        <!-- STEP 1 -->
            <section id="r1" class="section section-one active">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="pb-6">Factors such as your sauna's dimensions, windows, and type of heater (electric or woodburning) will determine the heated volume of your sauna. Note that the larger your sauna is, the more power is required by your heater to achieve bathing temperatures.</p>
                <p class="mb-3 text-lg font-semibold">Preferred measuring system:</p>
                <div class="flex flex-col gap-1 mb-3">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" id="imp" checked="" class="tool w-3 h-3" value="i" name="tool" onchange="calculate_val()"/>
                        <span>Imperial</span>
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" id="met" class="tool w-3 h-3" value="m" name="tool" onchange="calculate_val()"/>
                        <span>Metric</span>
                    </label>
                </div>
                <input type="hidden" id="sauna_mul" value="1">
                <input type="hidden" id="imp_int" value="1">
                <input type="hidden" id="imp_ext" value="1.2">
                <input type="hidden" id="imp_max_volume" value="1">
                <input type="hidden" id="met_int" value="1">
                <input type="hidden" id="met_ext" value="1.2">
                <input type="hidden" id="met_max_volume" value="1">
            </section>

            <!-- STEP 2 -->
            <section id="r2" class="section section-two">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="pb-6">Knowing whether your sauna will be exposed to the seasons goes a long way when selecting a heater that will perform well all year long.</p>
                <p class="mb-3 text-lg font-semibold">Select the location of your sauna:</p>
                <div class="flex flex-col gap-1 mb-3">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" class="location w-3 h-3" checked="" name="location" value="interior" onchange="calculate_val()"/>
                        <span>Interior</span>
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" class="location w-3 h-3" name="location" value="exterior" onchange="calculate_val()"/>
                        <span>Exterior</span>
                    </label>
                </div>
            </section>
<input type="hidden" id="cat_electric_val" value="Electric Sauna heaters">
<input type="hidden" id="cat_wood_val"     value="Wood-Burning Sauna Stoves">
            <!-- STEP 3 -->
            <section id="r3" class="section section-three">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="pb-6">Choosing the type of heating is a seminal decision for your sauna. Will you opt for the practical and efficient electrical sauna heater or will you prefer the power and craft of a woodburning sauna stove?</p>
                <p class="mb-3 text-lg font-semibold">Select the type of heating you would like for:</p>
                <div class="flex flex-col gap-1 mb-3">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="cat" checked class="cate w-3 h-3"
    value="Electric Sauna heaters" onchange="calculate_val()"/>
<span>Electric</span>
                        <!-- <input type="radio" id="cat" checked class="cate w-3 h-3" name="cat" value="Electric Sauna heaters" onchange="calculate_val()"/>
                        <span>Electric</span> -->
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="cat" class="cate w-3 h-3"
    value="Wood-Burning Sauna Stoves" onchange="calculate_val()"/>
<span>Woodburning</span>
                        <!-- <input type="radio" id="cat" class="cate w-3 h-3" name="cat" value="Wood-Burning Sauna Stoves" onchange="calculate_val()"/>
                        <span>Woodburning</span> -->
                    </label>
                </div>
            </section>

            <!-- STEP 4 -->
            <section id="r4" class="section section-four">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="pb-6">Saunas come in different shapes and forms, selecting the type of sauna you have will allow us to calculate it's volume more accurately.</p>
                <p class="mb-3 text-lg font-semibold">Select your sauna type:</p>
                <div class="flex flex-col gap-1 mb-3">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" id="shape" checked class="shape w-3 h-3" onchange="calculate_val()" name="shape" value="square"/>
                        <span>Traditional Sauna</span>
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" id="shape" class="shape w-3 h-3" onchange="calculate_val()" name="shape" value="barrel"/>
                        <span>Barrel Sauna</span>
                    </label>
                </div>
                <input type="hidden" id="imp_yes" value="1">
                <input type="hidden" id="imp_no" value="1.43">
                <input type="hidden" id="met_yes" value="1">
                <input type="hidden" id="met_no" value="1.5">
            </section>

            <!-- STEP 5 -->
            <section id="r5" class="section section-five">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="pb-6">An insulated sauna will have better heat retention than a non-insulated sauna, a factor which can affect a heater's performance.</p>
                <p class="mb-3 text-lg font-semibold">Will the walls and ceiling of your sauna be Insulated?:</p>
                <div class="flex flex-col gap-1 mb-3">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" checked value="yes" class="w-3 h-3" onchange="calculate_val()" name="insulated"/>
                        <span>Insulated (min R11)</span>
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" value="no" class="w-3 h-3" onchange="calculate_val()" name="insulated"/>
                        <span>Non-Insulated</span>
                    </label>
                </div>
            </section>

            <!-- STEP 6 -->
            <section id="r6" class="section section-six">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="pb-6">Glass has a higher thermal mass than wood and must be compensated for when selecting a heater.</p>
                <p class="mb-3 text-lg font-semibold">Are there any windows or glass doors in your sauna?</p>
                <div class="flex flex-col gap-1 mb-3">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" class="winyes w-3 h-3" name="winyes" checked value="yes"/>
                        <span>Yes</span>
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" class="winyes w-3 h-3" onchange="calculate_val()" name="winyes" value="no"/>
                        <span>No</span>
                    </label>
                </div>
            </section>

            <!-- STEP 7 -->
            <section id="r7" class="section section-seven">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="mb-10">The dimensions of a glass pane in a sauna directly correlates to the thermal mass of said glass panel.</p>
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
                    <p class="mb-3 text-lg font-semibold">How many windows or glass doors are in your sauna?</p>
                    <div class="relative">
                        <select id="glassdoor" class=" md:w-[100px] w-full px-3 py-2 text-white bg-[#95958d]  rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white" onchange="calculate_val()">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                        <svg class="w-4 h-4 text-white absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                </div>

                <div id="cal4">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap">Length (<span id="gd-unit">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white  w-[100px] bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white gdepth4" id="depth0" name="depth0" onkeyup="calculate_val()" onchange="calculate_val()" />
                        </div>
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap">Width (<span id="gd-unit1">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white  w-[100px] bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white gwidth4" id="width0" name="width0" onkeyup="calculate_val()" onchange="calculate_val()" />
                        </div>
                    </div>
                </div>

                <div id="cal3" style="display:none;">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap">Length (<span id="gd-unit2">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white gdepth3" id="depth1" name="depth1" onkeyup="calculate_val()" onchange="calculate_val()" />
                        </div>
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap">Width (<span id="gd-unit3">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white gwidth3" id="width1" name="width1" onkeyup="calculate_val()" onchange="calculate_val()" />
                        </div>
                    </div>
                </div>

                <div id="cal2" style="display:none;">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap">Length (<span id="gd-unit4">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white  w-[100px] bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white gdepth2" id="depth2" name="depth2" onkeyup="calculate_val()" onchange="calculate_val()" />
                        </div>
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap">Width (<span id="gd-unit5">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d]  rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white gwidth2" id="width2" name="width2" onkeyup="calculate_val()" onchange="calculate_val()" />
                        </div>
                    </div>
                </div>

                <div id="cal1" style="display:none;">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap">Length (<span id="gd-unit6">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white  w-[100px] bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white gdepth1" id="depth3" name="depth3" onkeyup="calculate_val()" onchange="calculate_val()" />
                        </div>
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap">Width (<span id="gd-unit7">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white  w-[100px] bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white gwidth1" id="width3" name="width3" onkeyup="calculate_val()" onchange="calculate_val()" />
                        </div>
                    </div>
                </div>
            </section>

            <!-- STEP 8 -->
            <section id="r8" class="section section-nine">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="pb-6">Tile and stone has higher thermal mass than wood and must be compensated for when selecting a heater.</p>
                <p class="mb-3 text-lg font-semibold">Are there any tile, stone, or other non-wood wall or ceiling surfaces in your sauna?</p>
                <div class="flex flex-col gap-1 mb-3">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" class="woodyes w-3 h-3" name="woodyes" checked value="yes"/>
                        <span>Yes</span>
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" class="woodyes w-3 h-3" name="woodyes" value="no"/>
                        <span>No</span>
                    </label>
                </div>
            </section>
            
            <input type="hidden" name="" id="imp_glass" value="4.04">
            <input type="hidden" name="" id="met_glass" value="1.231392">
            <input type="hidden" name="" id="imp_ins" value="4.9">
            <input type="hidden" name="" id="met_ins" value="1.49352">

            <!-- STEP 9 -->
            <section id="r9" class="section section-ten">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="mb-10">The dimensions of a tile, stone, or other non-wood surface in a sauna directly correlates to the thermal mass of said tile, stone, or other non-wood surface.</p>
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
                    <p class="text-lg font-semibold">How many tile, stone, or other non-wood wall or ceiling surfaces are in your sauna?</p>
                    <div class="relative ">
                        <select id="non-surf" class="md:w-[100px] w-full px-3 py-2 text-white bg-[#95958d]  rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white" onchange="calculate_val()">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                        <svg class="w-4 h-4 text-white absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                </div>

                <div id="cal_ins4">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap w-auto md:w-[100px]">Length (<span id="ni-unit">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px]
               bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white ndepth4" id="depth4" name="depth4" onkeyup="calculate_val()" />
                        </div>
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap w-auto md:w-[100px]">Width (<span id="ni-unit1">Inches</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px]
               bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white nwidth4" id="width4" name="width4" onkeyup="calculate_val()" />
                        </div>
                    </div>
                </div>

                <div id="cal_ins3" style="display:none;">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap  w-auto md:w-[100px]">Length (<span id="ni-unit2">Ft</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px]
               bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white ndepth3" id="depth5" name="depth5" onkeyup="calculate_val()" />
                        </div>
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap w-auto md:w-[100px]">Width (<span id="ni-unit3">Ft</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px]
               bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white nwidth3" id="width5" name="width5" onkeyup="calculate_val()" />
                        </div>
                    </div>
                </div>

                <div id="cal_ins2" style="display:none;">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap  w-auto md:w-[100px]">Length (<span id="ni-unit4">Ft</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px]
               bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white ndepth2" id="depth6" name="depth6" onkeyup="calculate_val()" />
                        </div>
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap w-auto md:w-[100px]">Width (<span id="ni-unit5">Ft</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px]
               bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white nwidth2" id="width6" name="width6" onkeyup="calculate_val()" />
                        </div>
                    </div>
                </div>

                <div id="cal_ins1" style="display:none;">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap w-auto md:w-[100px]">Length (<span id="ni-unit6">Ft</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px]
               bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white ndepth1" id="depth7" name="depth7" onkeyup="calculate_val()" />
                        </div>
                        <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-8">
                            <label class="whitespace-nowrap w-auto md:w-[100px]">Width (<span id="ni-unit7">Ft</span>)</label>
                            <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px]
               bg-[#95958d] rounded-[5px] appearance-none focus:outline-none focus:ring-0 focus:border-white nwidth1" id="width7" name="width7" onkeyup="calculate_val()" />
                        </div>
                    </div>
                </div>
            </section>

            <!-- STEP 10 -->
            <section id="r10" class="section section-eight">
                <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">SAUNA VOLUME CALCULATOR</h1>
                <p class="pb-6">The largest factor in determining which heater will perform best in your sauna is the size of the sauna itself.</p>
                <p class="mb-3 text-lg font-semibold">What are the finished interior dimensions of your sauna?</p>
                <h3 class="text-[14px] md:text-[18px] mb-3 font-medium uppercase">Room Dimensions</h3>
                
                <div id="square">
                    <div class="flex flex-wrap items-center justify-between gap-y-4 mb-4">
                        <div class="w-1/2 pr-2 md:pr-0 md:w-auto flex flex-col md:flex-row md:items-center gap-3">
                        
                            <label class=" text-base font-semibold mb-1 ">Depth (<span id="unit3">Ft</span>) <span class="text-red-600">*</span></label>
                            <input type="number" placeholder="0" required class="no-spinner w-full sm:w-[90px] px-3 py-2 bg-[#95958d] rounded-[5px] placeholder-white focus:outline-none focus:ring-0 focus:border-white" id="r_depth0" name="r_depth0" onkeyup="calculate_val1()" />
                        </div>
                        <div class="w-1/2 pl-2 md:pl-0 md:w-auto flex flex-col md:flex-row md:items-center gap-3">
                            <label class=" text-base font-semibold mb-1">Width (<span id="unit4">Ft</span>) <span class="text-red-600">*</span></label>
                            <input type="number" placeholder="0" required class="no-spinner  w-full sm:w-[90px]  px-3 py-2 bg-[#95958d]  rounded-[5px] placeholder-white focus:outline-none focus:ring-0 focus:border-white" id="r_width0" name="r_width0" onkeyup="calculate_val1()" />
                        </div>
                        <div class="w-full md:w-auto flex flex-col md:flex-row md:items-center gap-3">
                            <label class=" text-base font-semibold mb-1 whitespace-nowrap">Height (<span id="unit2">Ft</span>) <span class="text-red-600">*</span></label>
                            <input type="number" placeholder="0" required class="no-spinner w-full sm:w-[90px]  px-3 py-2 bg-[#95958d]  rounded-[5px] placeholder-white focus:outline-none focus:ring-0 focus:border-white" id="r_height0" name="r_height0" onkeyup="calculate_val1()" />
                        </div>
                    </div>
                </div>

                <div id="barrel" style="display:none;">
                    <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                        <div class="flex items-center gap-2">
                            <label class="block text-lg font-semibold mb-1">Diameter (<span id="unit">Ft</span>) <span class="text-red-600">*</span></label>
                            <input type="number" placeholder="0" required class="no-spinner px-3 py-2 bg-[#95958d]  w-[100px] rounded-[5px] placeholder-white focus:outline-none focus:ring-0 focus:border-white" id="rs_depth0" name="rs_depth0" onkeyup="calculate_val1()" />
                        </div>
                        <div class="flex items-center gap-2">
                            <label class="block text-lg font-semibold mb-1">Length (<span id="unit1">Ft</span>) <span class="text-red-600">*</span></label>
                            <input type="number" placeholder="0" required class="no-spinner  px-3 py-2 bg-[#95958d]  w-[100px] rounded-[5px] placeholder-white focus:outline-none focus:ring-0 focus:border-white" id="rs_width0" name="rs_width0" onkeyup="calculate_val1()" />
                        </div>
                    </div>
                </div>
            </section>

            <!-- Navigation Buttons -->
            <div class="flex justify-center gap-4 mt-8">
                <button class="previous disable px-6 py-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-black uppercase rounded-[5px] text-sm" id="previous">Prev</button>
                <button class="next px-6 py-2 bg-white text-black uppercase text-sm rounded-[5px]" id="next">Next</button>
                <button value="View Recommended Heaters" style="display:none" class="calculate_val vrh-btn px-6 py-2 bg-white text-black uppercase text-sm rounded-[5px] transition-colors duration-300 hover:bg-black hover:text-white" id="viewcalbut">View Recommended Heaters</button>
                <button value="View Recommended Heaters" class="view_calc rec-btn px-6 py-2 bg-white text-black uppercase text-sm rounded-[5px]" style="display:none" id="calbut">Calculate</button>
            </div>

                        </div>
        </div>

        <!-- RIGHT SIDE (IMAGE + TEXT) -->
       <div class="col-span-12 lg:col-span-5 relative min-h-[400px] lg:min-h-full">
            <!-- Image -->
            <img   
            src="https://newsa.ntplstaging.com/wp-content/themes/sauna-specialiste/inc/sauna-room-calculator/images/heater-side-bg-1.jpg"
                    alt="calculator" class="absolute inset-0 w-full h-full object-cover"/>
            <!-- Overlay -->
            <div class="absolute inset-0 bg-black/70"></div>
            <!-- Text on Image -->
            <div class="absolute inset-0 flex items-center justify-center text-center px-6 bg-[#00000063]">
                <div>
                                            <p class="mb-6 font-semibold">Below are recommended heaters based on the information you provided. Please ensure that all information provided was accurate to ensure that the heaters recommended are correct for your sauna.</p>
                        <p class="text-xl font-semibold">The total calculated volume of your sauna is:</p>
                        <h2 class="text-[3em] font-extrabold"><span id="amount">0</span>&nbsp;<span id="final_unit">Ft<sup>3</sup></span></h2>
                        <form method="get" target="_blank" action="/shop/?_sauna_min_max">
                            <input id="amount_txt" name="_sauna_min_max" type="hidden"> 
                            <input type="hidden" id="lang" value="en">
                        </form>
                                    </div>
            </div>
        </div>
    </div>
</div>

<div id="shop" class="m-10"></div>

<script>
let currentSection = 0;
let sections = document.querySelectorAll(".section");
let sectionButtons = document.querySelectorAll(".my_nav > .my_li");
let nextButton = document.querySelector(".next");
let previousButton = document.querySelector(".previous");

for (let i = 0; i < sectionButtons.length; i++) {
    sectionButtons[i].addEventListener("click", function () {
        sections[currentSection].classList.remove("active");
        sectionButtons[currentSection].classList.remove("active");
        sections[currentSection = i].classList.add("active");
        sectionButtons[currentSection].classList.add("active");
        
        if (i === 0) {
            if (previousButton.className.split(" ").indexOf("disable") < 0) {
                previousButton.classList.add("disable");
            }
        } else {
            if (previousButton.className.split(" ").indexOf("disable") >= 0) {
                previousButton.classList.remove("disable");
            }
        }
        if (i === sectionButtons.length - 1) {
            if (nextButton.className.split(" ").indexOf("disable") < 0) {
                nextButton.classList.add("disable");
                jQuery('#next').hide();
                jQuery('#calbut').show();
            }
        } else {
            if (nextButton.className.split(" ").indexOf("disable") >= 0) {
                nextButton.classList.remove("disable");
                jQuery('#next').show();
                jQuery('#calbut').hide();
                jQuery('#viewcalbut').hide();
            }
        }
    });
}

nextButton.addEventListener("click", function () {
    var location = jQuery('input[name=location]:checked').val(); 
    var winyes = jQuery('input[name=winyes]:checked').val();
    var woodyes = jQuery('input[name=woodyes]:checked').val();
    var sauna_type = jQuery('input[name=shape]:checked').val();
    
    if (currentSection < sectionButtons.length - 1) {
        if(currentSection==1 && location=="interior"){
            sectionButtons[currentSection+2].click();
        }
        if(currentSection==5 && winyes=="no"){
            sectionButtons[currentSection+1].click();
        }
        if(currentSection==9 && sauna_type=='square'){
            var r_depth0 = jQuery('#r_depth0').val();
            var r_width0 = jQuery('#r_width0').val();
            var r_height0 = jQuery('#r_height0').val();
            var lang = jQuery('#lang').val();
            
            if(r_depth0=='' && r_width0=='' && r_height0=='') {
                if(lang=='en'){
                    alert('Please enter the mandatory fields');
                }else{
                    alert('Veuillez remplir les champs obligatoires');
                }
                return;
            }
            else if(r_depth0==0 || r_width0==0 || r_height0==0) {
                if(lang=='en'){
                    alert('Room dimensions should be greater than 0');
                }else{
                    alert('Les dimensions de la pièce doivent être supérieures à 0');
                }
                return;
            }
        }
        else if(currentSection==9 && sauna_type=='barrel'){
            var rs_depth0 = jQuery('#rs_depth0').val();
            var rs_width0 = jQuery('#rs_width0').val();
            var lang = jQuery('#lang').val();
            
            if(rs_depth0=='' && rs_width0=='') {
                if(lang=='en'){
                    alert('Please enter the mandatory fields');
                }else{
                    alert('Veuillez remplir les champs obligatoires');
                }
                return;
            }
            else if(rs_depth0==0 || rs_width0==0) {
                if(lang=='en'){
                    alert('Room dimensions should be greater than 0');
                }else{
                    alert('Les dimensions de la pièce doivent être supérieures à 0');
                }
                return;
            }
        }
        
        if(currentSection==7 && woodyes=="no"){
            sectionButtons[currentSection+1].click();
        }
        if(currentSection==3 && sauna_type=="barrel" && location=="exterior"){
            sectionButtons[currentSection+1].click();
        }
        sectionButtons[currentSection + 1].click();
    }
});

previousButton.addEventListener("click", function () {
    var location = jQuery('input[name=location]:checked').val(); 
    var winyes = jQuery('input[name=winyes]:checked').val();
    var woodyes = jQuery('input[name=woodyes]:checked').val();
    var sauna_type = jQuery('input[name=shape]:checked').val();
    
    if (currentSection > 0) {
        if(location=="interior" && currentSection==5){
            sectionButtons[currentSection-0].click();
        }
        if(currentSection==5 && sauna_type=="barrel"){
            sectionButtons[currentSection-1].click();
        }
        if(location=="interior" && currentSection==4){
            sectionButtons[currentSection-2].click();
        }
        if(winyes=="no" && currentSection==7){
            sectionButtons[currentSection-1].click();
        }
        if(currentSection==9 && woodyes=="no"){
            sectionButtons[currentSection-1].click();
        }
        sectionButtons[currentSection - 1].click();
    }
});
</script>

</body>

# Sauna Calculator

- Link: https://newsa.ntplstaging.com/sauna-calculator/
- Published: 2022-03-09T02:18:29-05:00
- Author: Hari
