<!--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">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="pb-6">Des facteurs tels que les dimensions de votre sauna, les fenêtres et le type de chauffage (électrique ou à bois) détermineront le volume chauffé de votre sauna. Notez que plus votre sauna est grand, plus votre appareil de chauffage a besoin de puissance pour atteindre les températures de baignade.</p>
    <p class="mb-3 text-lg font-semibold">Système de mesure préféré:</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>Impérial</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>Métrique</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">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="pb-6">Savoir si votre sauna sera exposé aux saisons contribue grandement à la sélection d'un appareil de chauffage qui fonctionnera bien toute l'année.</p>
    <p class="mb-3 text-lg font-semibold">Sélectionnez l'emplacement de votre 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>Intérieur</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>Extérieur</span>
        </label>
    </div>
</section>
<input type="hidden" id="cat_electric_val_fr" value="Poêles de Sauna Électriques">
<input type="hidden" id="cat_wood_val_fr" value="Poêles de sauna à bois">
<!-- STEP 3 -->
<section id="r3" class="section section-three">
    <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="pb-6">Le choix du type de chauffage est une décision déterminante pour votre sauna. Opterez-vous pour le poêle de sauna électrique pratique et efficace ou préférerez-vous la puissance et l'artisanat d'un poêle de sauna à bois ?</p>
    <p class="mb-3 text-lg font-semibold">Sélectionnez le type de chauffage souhaité pour:</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="Poêles de Sauna Électriques" onchange="calculate_val()"/>   <span>Électrique</span>
        </label>
        <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="radio" name="cat"  class="cate w-3 h-3"
    value="Poêles de sauna à bois" onchange="calculate_val()"/>   <span>Chauffage au bois</span>
       
            <!-- <input type="radio" id="cat" class="cate w-3 h-3" name="cat" value="Poêles de sauna à bois" onchange="calculate_val()"/>
            <span>Chauffage au bois</span> -->
        </label>
    </div>
</section> 

<!-- STEP 4 -->
<section id="r4" class="section section-four">
    <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="pb-6">Les saunas se présentent sous différentes formes et formes, la sélection du type de sauna que vous possédez nous permettra de calculer son volume avec plus de précision.</p>
    <p class="mb-3 text-lg font-semibold">Sélectionnez votre type de sauna:</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>Sauna traditionnel</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>Sauna baril</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">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="pb-6">Un sauna isolé aura une meilleure rétention de la chaleur qu'un sauna non isolé, un facteur qui peut affecter les performances d'un appareil de chauffage.</p>
    <p class="mb-3 text-lg font-semibold">Les murs et le plafond de votre sauna seront-ils isolés?:</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>Isolé (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">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="pb-6">Le verre a une masse thermique plus élevée que le bois et doit être compensé lors du choix d'un appareil de chauffage.</p>
    <p class="mb-3 text-lg font-semibold">Y a-t-il des fenêtres ou des portes vitrées dans votre 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>Oui</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>Non</span>
        </label>
    </div>
</section>

<!-- STEP 7 -->
<section id="r7" class="section section-seven">
    <h1 class="md:text-[30px] text-[20px] font-semibold mb-2">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="mb-10">Les dimensions d'une vitre dans un sauna sont directement corrélées à la masse thermique de ladite vitre.</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">Combien y a-t-il de fenêtres ou de portes vitrées dans votre 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">Longueur (<span id="gd-unit">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">Largeur (<span id="gd-unit1">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">Longueur (<span id="gd-unit2">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">Largeur (<span id="gd-unit3">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">Longueur (<span id="gd-unit4">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">Largeur (<span id="gd-unit5">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">Longueur (<span id="gd-unit6">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">Largeur (<span id="gd-unit7">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="pb-6">Les carreaux et la pierre ont une masse thermique plus élevée que le bois et doivent être compensés lors du choix d'un appareil de chauffage.</p>
    <p class="mb-3 text-lg font-semibold">Y a-t-il des carreaux, des pierres ou d'autres surfaces de mur ou de plafond non en bois dans votre 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>Oui</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>Non</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">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="mb-10">Les dimensions d'un carreau, d'une pierre ou d'une autre surface non en bois dans un sauna sont directement corrélées à la masse thermique dudit carreau, pierre ou autre surface non en bois.</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">Combien y a-t-il de carreaux, de pierres ou d'autres surfaces de murs ou de plafonds non en bois dans votre 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-[120px]">Longueur (<span id="ni-unit">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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-[120px]">Largeur (<span id="ni-unit1">Pouces</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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-[120px]">Longueur (<span id="ni-unit2">Pi</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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-[120px]">Largeur (<span id="ni-unit3">Pi</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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-[120px]">Longueur (<span id="ni-unit4">Pi</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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-[120px]">Largeur (<span id="ni-unit5">Pi</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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-[120px]">Longueur (<span id="ni-unit6">Pi</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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-[120px]">Largeur (<span id="ni-unit7">Pi</span>)</label>
                <input type="number" placeholder="0" class="no-spinner px-3 py-2 placeholder-white w-[100px] bg-[#95958d] rounded-[5px] appearance-none 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">CALCULATEUR DE VOLUME DE SAUNA</h1>
    <p class="pb-6">Le facteur le plus important pour déterminer quel appareil de chauffage fonctionnera le mieux dans votre sauna est la taille du sauna lui-même.</p>
    <p class="mb-3 text-lg font-semibold">Quelles sont les dimensions intérieures finies de votre sauna?</p>
    <h3 class="text-[14px] md:text-[18px] mb-3 font-medium uppercase">Dimensions de la pièce</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-1">
                <label class="text-sm font-semibold mb-1">Profondeur (<span id="unit">Pi</span>) <span class="text-red-600">*</span></label>
                <input type="number" placeholder="0" required class="no-spinner w-full sm:w-[80px] 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-1">
                <label class="text-sm font-semibold mb-1">Largeur (<span id="unit1">Pi</span>) <span class="text-red-600">*</span></label>
                <input type="number" placeholder="0" required class="w-full sm:w-[80px] 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-1">
                <label class="text-sm font-semibold mb-1">Hauteur (<span id="unit2">Pi</span>) <span class="text-red-600">*</span></label>
                <input type="number" placeholder="0" required class="no-spinner w-full sm:w-[80px] 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">Diamètre (<span id="unit">Pi</span>) <span class="text-red-600">*</span></label>
                <input type="number" placeholder="0" required class="no-spinner w-full px-3 py-2 bg-[#95958d] border border-white rounded-none 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">Longueur (<span id="unit1">Pi</span>) <span class="text-red-600">*</span></label>
                <input type="number" placeholder="0" required class="no-spinner w-full px-3 py-2 bg-[#95958d] border border-white rounded-none 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 rounded-[5px] px-6 py-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-black uppercase text-sm" id="previous">Précédente</button>
    <button class="next px-6 py-2 rounded-[5px] bg-white text-black uppercase text-sm" id="next">Suivante</button>
    <button value="View Recommended Heaters" style="display:none" class="calculate_val rounded-[5px] 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">Afficher les appareils de chauffage recommandés</button>
    <button value="View Recommended Heaters" class="view_calc rec-btn px-6 py-2 bg-white rounded-[5px] text-black uppercase text-sm" style="display:none" id="calbut">Calculer</button>
</div>

<!-- RIGHT SIDE - Display area (shown in main file) -->
<!-- <div class="absolute inset-0 flex items-center justify-center text-center px-6 bg-[#00000063]" style="display:none;">
    <div>
        <p class="mb-6 font-semibold">Vous trouverez ci-dessous les appareils de chauffage recommandés en fonction des informations que vous avez fournies. Veuillez vous assurer que toutes les informations fournies étaient exactes pour vous assurer que les appareils de chauffage recommandés sont adaptés à votre sauna.</p>
        <p class="text-xl font-semibold">Le volume total calculé de votre sauna est de:</p>
        <h2 class="text-[3em] font-extrabold"><span id="amount">0</span>&nbsp;<span id="final_unit">Pi<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="fr">
        </form>
    </div>
</div> -->

<!-- <div id="shop"></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">Vous trouverez ci-dessous les appareils de chauffage recommandés en fonction des informations que vous avez fournies. Veuillez vous assurer que toutes les informations fournies étaient exactes pour vous assurer que les appareils de chauffage recommandés sont adaptés à votre sauna.</p>
                        <p class="text-xl font-semibold">Le volume total calculé de votre sauna est de:</p>
                        <h2 class="text-[3em] font-extrabold"><span id="amount">0</span>&nbsp;<span id="final_unit">Pi<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="fr">
                        </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>

# calculateur de sauna

- Link: https://newsa.ntplstaging.com/calculateur-de-sauna-2/?lang=fr
- Published: 2022-03-18T04:22:44-04:00
- Author: Hari
