Current File : //proc/self/root/var/www/html/downloads/power-calculators.shtml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Vertex-power-calculators-2025">
    <title>Power Calculators</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 <!--=============== FLATICON ===============-->
  <link rel="stylesheet"
    href="https://cdn-uicons.flaticon.com/2.0.0/uicons-regular-straight/css/uicons-regular-straight.css" />

  <!--=============== SWIPER CSS ===============-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <!--=============== CSS ===============-->
  <link rel="stylesheet" href="../css/vtp.css">
<link rel="stylesheet" href="../css/vtp-slider.css">
    <link rel="stylesheet" type="text/css" href="../css/vtp-vm-carousel.css">
    <link rel="stylesheet" href="../css/vtp.css" type="text/css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        /* Simple transition for the results block */
        .results-container {
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }
header {
            position: sticky;
        }
    </style>
</head>
<body class="bg-slate-100 overflow-x-hidden">

<header>
    <section class="top-header">
      <ul class="fluid-container">
        <!--<li><a href="tel:+91 9940058974" class="home-link">Chennai: +91 99400 58974</a>-->
        <!--<a href="tel:+91 9940058974" class="home-link">Bangalore: +91 91646 57788</a>-->
        <!--<a href="tel:+91 9940058974" class="home-link">Chennai: +91 9940058974</a></li>-->
        <li><a href="../index.shtml" class="home-link"><i class="fa fa-home"></i></a></li>
        <li><a href="../https://www.facebook.com/vertexpspl?mibextid=ZbWKwL"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="../https://www.instagram.com/vertexpowersolution/"><i class="fa-brands fa-instagram"></i></a></li>
        <li><a href="../https://www.linkedin.com/company/vertexpower/"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a href="../https://www.youtube.com/@vertexpower4351"><i class="fab fa-youtube"></i></a></li>
        <li><a href="../sitemap.shtml"><i class="fas fa-sitemap"></i></a></li>
      </ul>
    </section>
    <section class="bottom-header">
      <div class="fluid-container">
        <a href="../index.shtml" class="header-logo">
          <img src="../images/logo/vertex-power-logo.png" alt="logo">
          <div></div>
        </a>
        <ul>
          <li><a href="../index.shtml" title="Home">Home</a></li>
          <li><a title="About Us">About Us</a>
            <ul class="first-route">
              <li><a href="../about-us.shtml">About Company</a></li>
              <li><a href="../our-team.shtml">Our Core Team</a></li>
              <li><a href="../testimonials.shtml">Testimonials</a></li>
              <li><a href="../clientle.shtml">Clientele</a></li>
            </ul>
          </li>
          <li style="position: initial;"><a href="../products-overview.shtml" title="Products"
              style="position: relative;">Products</a>
            <div class="first-route full-width-route">
              <div class="sub-route-img">
                <h2>Products Overview</h2>
                <span><img src="../images/home-page-imgs/about-us-img.png" alt="product-overview-image"></span>
                <a href="../products-overview.shtml">View All</a>
              </div>
              <div class="sub-route-ul">
                <h2>Product Range</h2>
                <ul>
                  <li><a href="../single-phase-servo-stabiliser.shtml"><span><img
                          src="../images/home-page-imgs/header-images/single-phase-servo-stabiliser.png"
                          alt="link-icon"></span>Single Phase Servo Stabiliser </a></li>
                  <li><a href="../three-phase-aircooled-servo-stabiliser.shtml"><span><img
                          src="../images/home-page-imgs/header-images/three-phase-aircooled-servo-stabiliser.png"
                          alt="link-icon"></span>Three Phase Aircoooled Servo
                      Stabiliser</a></li>
                  <li><a href="../three-phase-oilcooled-servo-stabiliser.shtml"><span><img
                          src="../images/home-page-imgs/header-images/three-phase-oilcooled-servo-stabiliser.png"
                          alt="link-icon"></span>Three Phase Oilcooled Servo
                      Stabiliser</a></li>
                  <li><a href="../static-voltage-stabiliser.shtml"><span><img
                          src="../images/home-page-imgs/header-images/static-voltage-stabiliser.png"
                          alt="link-icon"></span> Static Voltage Stabiliser</a></li>
                  <li><a href="../isolation-transformer.shtml"><span><img
                          src="../images/home-page-imgs/header-images/isolation-transformer.png" alt="link-icon"></span>
                      Isolation Transformer</a></li>
                  <li><a href="../cvt.shtml"><span><img src="../images/home-page-imgs/header-images/cvt.png"
                          alt="link-icon"></span> Constant Voltage Transformer (CVT)</a>
                  </li>
                  <li><a href="../ups.shtml"><span><img src="../images/icons/header-icons/product-7.png"
                          alt="link-icon"></span> Un-interrupted Power Supplies (UPS)</a>
                  </li>
                  <li><a href="../step-down-transformer.shtml"><span><img
                          src="../images/inner-page-images/Images-for-product-landing-page/three-pase-aircooled-servo-stabiliser/Step-Down-Transformer-3.png"
                          alt="link-icon"></span> Step Down Transformer</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li><a href="../eaton/index.html" title="Eaton Products">Eaton</a></li>
          <li><a title="Solutions">Solutions</a>
            <ul class="first-route">
              <li><a href="../power-quality-solutions.shtml">Power Quality Solutions</a></li>
              <li><a href="../power-management-solutions.shtml">Power Management Solutions</a></li>
              <li><a href="../monitoring-solutions.shtml">Monitoring Solutions</a></li>
            </ul>
          </li>
          <li><a href="javascript:void(0)" title="Knowledge Centre">Knowledge Centre</a>
            <ul class="first-route">
              <li><a href="../case-studies.shtml">Case Studies</a></li>
              <li><a href="../faqs.shtml">FAQs</a></li>
              <li><a href="../https://vertexpower.co.in/blog/">Blog</a></li>
            </ul>
          </li>
          <li class="cont-head-btn-li"><a href="../vertex-contact-us.php" title="Contact Us"
              class="cont-head-btn">Contact Us</a></li>
        </ul>

        <!-- responsive menu -->
        <nav class="resp-menu">
          <a class="toggle hc-nav-trigger hc-nav-1"><span></span></a>
          <nav id="main-nav">
            <ul class="first-nav" style="background-color: #fff !important;">
              <li><a style="background-color: #fff !important;margin: 0px 0;" href="../index.shtml" title="HOME"><img
                    src="../images/logo/vertex-power-logo.png" alt="logo"
                    style="width: 100%; max-width: 80px; margin: auto;"></a></li>
            </ul>
            <ul class="first-nav">
              <li><a class="resp-home" href="../index.shtml" title="HOME">Home</a></li>
            </ul>
            <ul class="second-nav">
              <li><a title="About Us">About Us</a>
                <ul>
                  <li><a href="../about-us.shtml">About Company</a></li>
                  <li><a href="../our-team.shtml">Our Core Team</a></li>
                  <li><a href="../testimonials.shtml">Testimonials</a></li>
                  <li><a href="../clientle.shtml">Clientele</a></li>
                </ul>
              </li>
            </ul>
            <ul class="second-nav">
              <li><a title="Products">Products</a>
                <ul>
                  <li><a href="../products-overview.shtml">Products Overview</a></li>
                  <li><a href="../single-phase-servo-stabiliser.shtml">Single Phase Servo Stabiliser
                    </a></li>
                  <li><a href="../three-phase-aircooled-servo-stabiliser.shtml">Three Phase
                      Aircoooled Servo Stabiliser</a></li>
                  <li><a href="../three-phase-oilcooled-servo-stabiliser.shtml">Three Phase Oilcooled
                      Servo Stabiliser</a></li>
                  <li><a href="../static-voltage-stabiliser.shtml">Static Voltage Stabiliser</a></li>
                  <li><a href="../isolation-transformer.shtml">Isolation Transformer</a></li>
                  <li><a href="../cvt.shtml">Constant Voltage Transformer (CVT)</a></li>
                  <li><a href="../ups.shtml">Un-interrupted Power Supplies (UPS)</a></li>
                  <li><a href="../step-down-transformer.shtml">Step Down Transformer</a></li>
                </ul>
              </li>
            </ul>
            <ul class="first-nav">
              <li><a class="resp-home" href="../eaton/index.html" title="Eaton Products">Eaton</a></li>
            </ul>
            <ul class="first-nav">
              <li><a title="Solutions">Solutions</a>
                <ul>
                  <li><a href="../power-quality-solutions.shtml">Power Quality Solutions</a></li>
                  <li><a href="../power-management-solutions.shtml">Power Management Solutions</a>
                  </li>
                  <li><a href="../monitoring-solutions.shtml">Monitoring Solutions</a></li>
                </ul>
              </li>
            </ul>
            <ul class="second-nav">
              <li><a title="Knowledge Centre">Knowledge Centre</a>
                <ul>
                  <li><a href="../case-studies.shtml">Case Studies</a></li>
                  <li><a href="../faqs.shtml">FAQs</a></li>
                  <li><a href="../https://vertexpower.co.in/blog/">Blog</a></li>
                </ul>
              </li>
            </ul>
            <ul class="second-nav">
              <li><a href="../vertex-contact-us.php" title="Contact Us">Contact Us</a></li>
            </ul>
          </nav>
        </nav>
        <!-- responsive menu -->
      </div>
    </section>
    <div class="progres-fix">
      <div class="progress-container">
        <div class="progress-bar" id="myBar" style="width: 0%;"></div>
      </div>
    </div>
  </header>

<!-- Hero Banner -->
    <div class="relative pt-24 pb-32">
        <!-- Faded calculator icon -->
        <div class="absolute top-0 right-0 -mt-16 -mr-16 text-white opacity-5 hidden lg:block">
            <svg class="w-96 h-96" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 2a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V4a2 2 0 00-2-2H5zm2.5 4a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h5a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-5zM6 10a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1zm3.5 0a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h1a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-1zM6 14a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1zm3.5 0a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h1a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-1z" clip-rule="evenodd"></path></svg>
        </div>
        <div class="relative container mx-auto px-4 text-center">
            <h1 class="text-4xl sm:text-5xl font-bold leading-tight text-slate-800 text-center">Electrical Power Calculators</h1>
            <p class="mt-4 text-lg max-w-2xl mx-auto text-center">
                Quick and accurate tools to help with your 3-phase power and kW to kVA conversions.
            </p>
        </div>
    </div>

    <div class="w-full max-w-8xl mx-auto flex flex-col lg:flex-row bg-white rounded-xl shadow-2xl overflow-hidden">
        
        <!-- Sidebar Navigation -->
        <aside class="w-full lg:w-1/4 bg-slate-50 p-6">
            <h2 class="text-xl font-bold text-slate-800 mb-6">Calculators</h2>
            <nav>
                <ul id="nav-links" class="space-y-2">
                    <li><a href="#" onclick="showCalculator('3-phase-power')" data-nav="3-phase-power" class="nav-link block px-4 py-2 text-slate-900 font-semibold bg-blue-100 rounded-md">3-Phase Power</a></li>
                    <li><a href="#" onclick="showCalculator('kw-to-kva')" data-nav="kw-to-kva" class="nav-link block px-4 py-2 text-slate-600 rounded-md hover:bg-slate-200">kW to kVA</a></li>
                </ul>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="w-full lg:w-3/4 bg-slate-800 text-white p-8 md:p-12">
            
            <!-- 3-Phase Power Calculator -->
            <div id="calculator-3-phase-power" class="calculator-view">
                <h1 class="text-3xl md:text-4xl font-bold mb-6">An easy way to obtain the power of a 3-phase motor</h1>
                
                <!-- Formulas Section -->
                <div class="bg-slate-700/50 p-6 rounded-lg mb-8 border border-slate-600">
                    <div class="flex items-center mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        <h2 class="text-xl font-semibold">Formulas</h2>
                    </div>
                    <p class="text-slate-300 text-sm leading-relaxed">
                        The power formula of a 3-phase motor is as follows:<br>
                        <strong>Power (kW) = (Voltage × Amps × Power Factor × √3) / 1000</strong><br><br>
                        To find the power factor and the amps, kW must first be determined by dividing the horsepower by 1.341. Then, divide the result by the generator sizing (kVA) to obtain the power factor.
                    </p>
                </div>
                
                <!-- Input Form -->
                <form id="power-form" onsubmit="event.preventDefault(); calculatePower();">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-end">
                        <div class="space-y-2">
                            <label for="horsepower" class="font-medium text-slate-300">Horsepower *</label>
                            <input type="number" id="horsepower" placeholder="e.g., 100" step="any" required class="w-full bg-slate-700 border border-slate-600 rounded-lg p-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-200">
                            <p id="hp-error" class="text-red-400 text-sm h-4"></p>
                        </div>
                        <div class="space-y-2">
                            <label for="voltage" class="font-medium text-slate-300">Voltage *</label>
                            <input type="number" id="voltage" placeholder="e.g., 480" step="any" required class="w-full bg-slate-700 border border-slate-600 rounded-lg p-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-200">
                            <p id="voltage-error" class="text-red-400 text-sm h-4"></p>
                        </div>
                         <div class="md:col-span-2 mt-4">
                            <h3 class="text-lg font-semibold text-blue-300 mb-4 border-t border-slate-700 pt-4">Generator</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-end">
                                 <div class="space-y-2">
                                    <label for="sizing" class="font-medium text-slate-300">Sizing *</label>
                                    <div class="flex">
                                        <input type="number" id="sizing" placeholder="e.g., 90" step="any" required class="w-full bg-slate-700 border border-slate-600 rounded-l-lg p-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-200 z-10">
                                        <span class="inline-flex items-center px-4 rounded-r-md border border-l-0 border-slate-600 bg-slate-600 text-slate-300 text-sm">kVA</span>
                                    </div>
                                    <p id="sizing-error" class="text-red-400 text-sm h-4"></p>
                                </div>
                                <button type="submit" class="w-full md:w-auto justify-self-start md:justify-self-end bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-lg transition-transform transform hover:scale-105 duration-300 shadow-lg">Calculate <span class="ml-2">›</span></button>
                            </div>
                        </div>
                    </div>
                </form>
                
                <div id="results-container-3-phase-power" class="results-container hidden opacity-0 transform -translate-y-4 mt-10 bg-slate-900/50 p-6 rounded-lg border border-slate-700">
                    <h3 class="text-xl font-semibold mb-4 text-blue-300">Calculation Results</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
                        <div>
                            <p class="text-sm text-slate-400">Power (kW)</p>
                            <p id="kw-result" class="text-3xl font-bold text-green-400"></p>
                        </div>
                        <div>
                            <p class="text-sm text-slate-400">Power Factor</p>
                            <p id="pf-result" class="text-3xl font-bold text-green-400"></p>
                        </div>
                        <div>
                            <p class="text-sm text-slate-400">Current (Amps)</p>
                            <p id="amps-result" class="text-3xl font-bold text-green-400"></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- kW to kVA Calculator -->
            <div id="calculator-kw-to-kva" class="calculator-view hidden">
                <h1 class="text-3xl md:text-4xl font-bold mb-6">Convert Kilowatts (kW) to Kilovolt-Amps (kVA)</h1>

                <div class="bg-slate-700/50 p-6 rounded-lg mb-8 border border-slate-600">
                     <div class="flex items-center mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        <h2 class="text-xl font-semibold">Formula</h2>
                    </div>
                    <p class="text-slate-300 text-sm leading-relaxed">
                        The formula to convert real power (kW) to apparent power (kVA) is:<br>
                        <strong>kVA = kW / Power Factor (PF)</strong><br><br>
                        The Power Factor is the ratio of real power to apparent power, and is a number between 0 and 1.
                    </p>
                </div>

                <form id="kw-to-kva-form" onsubmit="event.preventDefault(); calculateKva();">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-end">
                        <div class="space-y-2">
                            <label for="kilowatts" class="font-medium text-slate-300">Kilowatts (kW) *</label>
                            <input type="number" id="kilowatts" placeholder="e.g., 75" step="any" required class="w-full bg-slate-700 border border-slate-600 rounded-lg p-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-200">
                            <p id="kw-error" class="text-red-400 text-sm h-4"></p>
                        </div>
                        <div class="space-y-2">
                            <label for="power-factor" class="font-medium text-slate-300">Power Factor *</label>
                            <input type="number" id="power-factor" placeholder="e.g., 0.8" step="0.01" min="0" max="1" required class="w-full bg-slate-700 border border-slate-600 rounded-lg p-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-200">
                            <p id="pf-error" class="text-red-400 text-sm h-4"></p>
                        </div>
                        <div class="md:col-span-2">
                            <button type="submit" class="w-full md:w-auto justify-self-start md:justify-self-end bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-lg transition-transform transform hover:scale-105 duration-300 shadow-lg mt-4">Calculate <span class="ml-2">›</span></button>
                        </div>
                    </div>
                </form>

                 <div id="results-container-kw-to-kva" class="results-container hidden opacity-0 transform -translate-y-4 mt-10 bg-slate-900/50 p-6 rounded-lg border border-slate-700">
                    <h3 class="text-xl font-semibold mb-4 text-blue-300">Calculation Result</h3>
                    <div class="text-center">
                        <div>
                            <p class="text-sm text-slate-400">Apparent Power (kVA)</p>
                            <p id="kva-result" class="text-3xl font-bold text-green-400"></p>
                        </div>
                    </div>
                </div>
            </div>

             <!-- Error Modal -->
            <div id="error-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                <div class="bg-white rounded-lg p-8 shadow-xl text-slate-800 max-w-sm text-center">
                    <h3 class="text-xl font-bold mb-4">Invalid Input</h3>
                    <p id="error-message" class="mb-6"></p>
                    <button onclick="closeModal()" class="bg-blue-600 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-700">OK</button>
                </div>
            </div>

        </main>
    </div>

        <!-- testimonial section  -->
        <section class="testimonial-wrapper">
            <!-- <div class="fluid-container"> -->
            <div class="inner-testimonial-wrapper">
                <div class="left-testimonial-card"></div>
                <div class="right-testimonial-card">
                    <div class="top-testimonials-wrapper">
                        <div class="left-top-testimonial"></div>
                        <div class="right-top-testimonial">
                            <h2>Testimonial</h2>
                            <h3>Read what some of our valued <br> customers have to say about <br> <span>our products
                                    and services</span></h3>
                        </div>
                    </div>
                    <div class="testimonial-slider-wrapper">
                        <ul class="vmcarousel-centered vmc-centered testimonial-slider">
                            <li>
                                <div class="vm-cards">
                                    <div class="vm-test-logo">
                                        <img src="../images/home-page-imgs/client-logos/big-basket.png" alt="logo">
                                    </div>
                                    <div class="vm-test-txt">
                                        <!-- <h2>Big Basket</h2> -->
                                        <p>We are happy to inform you that the VERTEX Servo Stabilisers supplied to us
                                            are functioning satisfactorily. The after-sales support is also excellent.
                                            We would be glad to recommend your products to others.</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="vm-cards">
                                    <div class="vm-test-logo">
                                        <img src="../images/home-page-imgs/client-logos/rolastar.png" alt="logo">
                                    </div>
                                    <div class="vm-test-txt">
                                        <!-- <h2>Rolastar</h2> -->
                                        <p>We are using Vertex Stabilisers in main line and in CNC machines at various
                                            plants. We are fully satisfied with its working and as well as with the
                                            services provided.</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="vm-cards">
                                    <div class="vm-test-logo">
                                        <img src="../images/home-page-imgs/client-logos/The-Times-Group-logo.png"
                                            alt="logo">
                                    </div>
                                    <div class="vm-test-txt">
                                        <!-- <h2>The Times Group</h2> -->
                                        <p>We have installed 500 kVA VERTEX Servo Stabilisers at our Vijay Karnataka
                                            Press, Mangalore & Mysore. The units are performing satisfactorily. The
                                            after-sales support is good.</p>
                                    </div>
                                </div>
                            </li>
                           
                        </ul>
                    </div>
                </div>
            </div>
            <!-- </div> -->
        </section>
        <!-- testimonial section  -->
 <!-- gent in touch section  -->
        <section class="get-in-touch-wrapper">
            <div class="fluid-container">
                <div class="inner-get-in-touch-wrapper">
                    <div class="left-get-in-touch-from">
                        <!-- <h2>Trusted by 800+ Worldwide Companies</h2> -->
                        <h2>Get in Touch With Us</h2>
                        <p>We at Vertex believe that the organisation success is valued by its satisfied customers.</p>

                        <!-- <form action="common-footer-index.php" class="vtpGetinTouch" name="vtpGetinTouch" id="myForm" method="POST" onsubmit="return ;"> -->
                        <form  action="common-footer-index.php" id="vtpGetinTouch" name="vtpGetinTouch" method="POST" class="vtpGetinTouch"
                            action="common-footer-index.php">
                            <!-- <form action="common-footer-index.php" class="vtpGetinTouch" name="vtpGetinTouch" id="myForm" method="POST" onsubmit="return validationIndex();"> -->
                            <div class="vtp-form-input-wrapper">
                                <label>Name</label>
                                <input type="text" placeholder="Name" name="txtName" maxlength="60">
                                <input type="hidden" name="txtPageName" value="index.shtml">
                            </div>
                            <div class="vtp-form-input-wrapper">
                                <label>Email Id</label>
                                <input type="text" placeholder="Email Id" name="txtEmailid" maxlength="35">
                            </div>
                            <div class="vtp-form-input-wrapper">
                                <label>Message</label>
                                <input type="text" placeholder="Message" name="txtMessage" maxlength="560">
                            </div>
                            <input type="hidden" name="recaptcha_response" id="recaptchaResponse">

                            <!-- Submit button -->
                            <!-- <button type="submit">Submit</button> -->
                            <button class="get-in-touch-btn" value="submits" name="submits"
                                type="submit">Submit</button>
                        </form>
                    </div>
                    <div class="right-get-in-touch-img"
                        style="background: url('../images/home-page-imgs/india-map.png') no-repeat center center/contain;">
                    </div>
                </div>
            </div>
        </section>
        <!-- gent in touch section  -->


<footer>
    <div class="fluid-container">
      <article class="footer-intro">
        <a href="../index.shtml"><img src="../images/logo/vertex-white-logo.png" alt="logo"></a>
        <h4>VERTEX POWER SOLUTIONS PVT LTD</h4>
        <p> VERTEX POWER SOLUTIONS PRIVATE LIMITED is managed by a team of Engineers with over 25 years of experience in
          the field of power conditioning equipment. The products are manufactured at Chennai, under the brand name of
          VERTEX. </p>
        <li class="wa"><a href="https://gem.gov.in/" target="_blank"><img
              src="../images/home-page-imgs/icons/Government-e-Marketplace.png" alt="Government-e-Marketplace"
              style="width: 150px;"></a></li>
      </article>
      <article class="footer-links">
        <h4>USEFUL <span> LINKS</span></h4>
        <ul>
          <li><a href="../index.shtml" class="footer-home">Home</a></li>
          <li><a href="../single-phase-servo-stabiliser.shtml">Single Phase Servo Stabiliser </a></li>
          <li><a href="../three-phase-aircooled-servo-stabiliser.shtml">Three Phase Aircoooled Servo Stabiliser</a></li>
          <li><a href="../three-phase-oilcooled-servo-stabiliser.shtml">Three Phase Oilcooled Servo Stabiliser</a></li>
          <li><a href="../static-voltage-stabiliser.shtml">Static Voltage Stabiliser</a></li>
          <li><a href="../isolation-transformer.shtml">Isolation Transformer</a></li>
          <li><a href="../cvt.shtml">Constant Voltage Transformer (CVT)</a></li>
          <li><a href="../ups.shtml">Un-interrupted Power Supplies (UPS)</a></li>
        </ul>
      </article>
      <article>
        <h4>GET CONNECTED<span> THROUGH</span></h4>
        <ul>
          <li><a href="mailto:ho@vertexpower.co.in">ho@vertexpower.co.in</a></li>
          <li><a href="tel:+919940058974"><span>Chennai:</span> +91 9940058974</a></li>
          <li><a href="tel:+919164657788"><span>Bangalore:</span> +91 91646 57788</a></li>
          <li><a href="tel:+919665751973"><span>Pune:</span> +91 9665751973</a></li>
          <li><a href="tel:+919842011332"><span>Coimbatore:</span> +91 9842011332</a></li>
          <li><a href="tel:+919886081610"><span>Hyderabad:</span> +91 9886081610</a></li>
          <li><a href="tel:+919041191782"><span>Ludhiana:</span> +91 9041191782</a></li>
                    
        </ul>
        <ul class="social-icons">
          <li class="fb"><a href="https://www.facebook.com/vertexpspl?mibextid=ZbWKwL" target="_blank"><img
                src="../images/home-page-imgs/icons/facebook.png" alt="facebook"></a></li>
          <li class="fb"><a href="https://www.instagram.com/vertexpowersolution/" target="_blank"><img
                src="../images/home-page-imgs/icons/instagram.png" alt="instagram"></a></li>
          <li class="ig"><a href="https://www.youtube.com/@vertexpower4351" target="_blank"><img
                src="../images/home-page-imgs/icons/youtube.png" alt="youtube"></a></li>
          <li class="li"><a href="https://www.linkedin.com/company/vertexpower/" target="_blank"><img
                src="../images/home-page-imgs/icons/linkedin.png" alt="linkedin"></a></li>
        </ul>
      </article>
    </div>
    <div class="footer-credits">
      <div class="fluid-container">
        <p>Copyright © <span id="current-year">2023</span> . All right reserved.</p>
        <p>Powered by <a href="https://www.swaragh.com/" title="Swaragh Technologies" target="_blank"><img
              src="../images/swaragh-logo.png" alt="swaragh Technologies"></a></p>
      </div>
    </div>
  </footer>


  <div class="to-top"><a class="back-to-top" href="#"> &#8682;</a></div>
  </div>
  <script src="script.js"></script>

  <!-- canvas menu initialisation -->
  <script>
    !function ($) { var $nav = $("#main-nav"), $toggle = $(".toggle"), data = {}, defaultData = { maxWidth: !1, customToggle: $toggle, navTitle: "", levelTitles: !0, position: "left", insertClose: !0, insertBack: !0, labelClose: "Close", labelBack: "Back" }; const initNav = function (a) { var t = $(".hc-offcanvas-nav"); setTimeout(function () { t.length && t.remove() }, $toggle.hasClass("toggle-open") ? 420 : 0), $toggle.hasClass("toggle-open") && $toggle.click(), $toggle.off("click"), $.extend(data, a), $nav.clone().hcOffcanvasNav($.extend({}, defaultData, data)) }; initNav({}), $(".actions").find("a").on("click", function (e) { e.preventDefault(); var $this = $(this).addClass("active"), $siblings = $this.parent().siblings().children("a").removeClass("active"); initNav(eval("(" + $this.data("demo") + ")")) }), $(".actions").find("input").on("change", function () { var $this = $(this), data = eval("(" + $this.data("demo") + ")"); if ($this.is(":checked")) initNav(data); else { var removeData = {}; $.each(data, function (a, t) { removeData[a] = !1 }), initNav(removeData) } }) }(jQuery);
  </script>
  <!-- canvas menu initialisation -->

  <script src="../js/jquery.js"></script>
  <script src="../js/common.js"></script>

  <!-- canvas menu initialisation -->
  <script>
    !function ($) { var $nav = $("#main-nav"), $toggle = $(".toggle"), data = {}, defaultData = { maxWidth: !1, customToggle: $toggle, navTitle: "", levelTitles: !0, position: "left", insertClose: !0, insertBack: !0, labelClose: "Close", labelBack: "Back" }; const initNav = function (a) { var t = $(".hc-offcanvas-nav"); setTimeout(function () { t.length && t.remove() }, $toggle.hasClass("toggle-open") ? 420 : 0), $toggle.hasClass("toggle-open") && $toggle.click(), $toggle.off("click"), $.extend(data, a), $nav.clone().hcOffcanvasNav($.extend({}, defaultData, data)) }; initNav({}), $(".actions").find("a").on("click", function (e) { e.preventDefault(); var $this = $(this).addClass("active"), $siblings = $this.parent().siblings().children("a").removeClass("active"); initNav(eval("(" + $this.data("demo") + ")")) }), $(".actions").find("input").on("change", function () { var $this = $(this), data = eval("(" + $this.data("demo") + ")"); if ($this.is(":checked")) initNav(data); else { var removeData = {}; $.each(data, function (a, t) { removeData[a] = !1 }), initNav(removeData) } }) }(jQuery);
  </script>
  <!-- canvas menu initialisation -->
  <!-- model popup  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
  <!-- model popup  -->
  <!-- owl carouel -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"
    integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- owl carouel -->

  <!-- goto top  -->
  <script>
    $(".to-top").hide(), $(window).scroll(function () { $(this).scrollTop() > 100 ? $(".to-top").fadeIn() : $(".to-top").fadeOut() }), $(".to-top").click(function () { return $("body,html").animate({ scrollTop: 0 }, 500), !1 });
  </script>
  <!-- goto top  -->

  <!-- // header on scroll -->
  <script>
    $(function () { var l = $("header"); $(window).scroll(function () { $(window).scrollTop() >= 50 ? l.addClass("scrolled") : l.removeClass("scrolled") }) });
  </script>
  <!-- // header on scroll -->


    <script>
        const errorModal = document.getElementById('error-modal');
        const errorMessage = document.getElementById('error-message');

        function showCalculator(calculatorId) {
            // Hide all calculator views
            document.querySelectorAll('.calculator-view').forEach(view => {
                view.classList.add('hidden');
            });

            // Show the selected calculator view
            document.getElementById(`calculator-${calculatorId}`).classList.remove('hidden');

            // Update active state in sidebar
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('text-slate-900', 'font-semibold', 'bg-blue-100');
                link.classList.add('text-slate-600', 'hover:bg-slate-200');
            });
            document.querySelector(`[data-nav="${calculatorId}"]`).classList.add('text-slate-900', 'font-semibold', 'bg-blue-100');
            document.querySelector(`[data-nav="${calculatorId}"]`).classList.remove('text-slate-600', 'hover:bg-slate-200');
        }

        // --- 3-Phase Power Calculator Logic ---

        function validatePositiveInput(input, errorEl) {
            const value = parseFloat(input.value);
            if (isNaN(value) || value <= 0) {
                input.classList.add('border-red-500', 'focus:ring-red-500');
                errorEl.textContent = 'Please enter a positive number.';
                return false;
            }
            input.classList.remove('border-red-500', 'focus:ring-red-500');
            errorEl.textContent = '';
            return true;
        }
        
        function calculatePower() {
            const horsepowerInput = document.getElementById('horsepower');
            const voltageInput = document.getElementById('voltage');
            const sizingInput = document.getElementById('sizing');
            const hpError = document.getElementById('hp-error');
            const voltageError = document.getElementById('voltage-error');
            const sizingError = document.getElementById('sizing-error');

            const isHpValid = validatePositiveInput(horsepowerInput, hpError);
            const isVoltageValid = validatePositiveInput(voltageInput, voltageError);
            const isSizingValid = validatePositiveInput(sizingInput, sizingError);

            if (!isHpValid || !isVoltageValid || !isSizingValid) return;

            const horsepower = parseFloat(horsepowerInput.value);
            const voltage = parseFloat(voltageInput.value);
            const generatorSizingKVA = parseFloat(sizingInput.value);

            const kw = horsepower / 1.341;
            let powerFactor = kw / generatorSizingKVA;
            
            if (powerFactor > 1) {
                errorMessage.textContent = 'The calculated Power Factor is > 1. This suggests the generator sizing (kVA) is too low for the given horsepower. Please check inputs.';
                errorModal.classList.remove('hidden');
                powerFactor = 1;
            }
            
            const amps = (kw * 1000) / (voltage * Math.sqrt(3) * powerFactor);

            document.getElementById('kw-result').textContent = kw.toFixed(2);
            document.getElementById('pf-result').textContent = powerFactor.toFixed(2);
            document.getElementById('amps-result').textContent = amps.toFixed(2);
            
            const resultsContainer = document.getElementById('results-container-3-phase-power');
            resultsContainer.classList.remove('hidden');
            setTimeout(() => resultsContainer.classList.remove('opacity-0', 'transform', '-translate-y-4'), 10);
        }

        // --- kW to kVA Calculator Logic ---

        function validatePowerFactor(input, errorEl) {
            const value = parseFloat(input.value);
             if (isNaN(value) || value < 0 || value > 1) {
                input.classList.add('border-red-500', 'focus:ring-red-500');
                errorEl.textContent = 'Power factor must be between 0 and 1.';
                return false;
            }
            input.classList.remove('border-red-500', 'focus:ring-red-500');
            errorEl.textContent = '';
            return true;
        }

        function calculateKva() {
            const kwInput = document.getElementById('kilowatts');
            const pfInput = document.getElementById('power-factor');
            const kwError = document.getElementById('kw-error');
            const pfError = document.getElementById('pf-error');

            const isKwValid = validatePositiveInput(kwInput, kwError);
            const isPfValid = validatePowerFactor(pfInput, pfError);

            if (!isKwValid || !isPfValid) return;

            const kilowatts = parseFloat(kwInput.value);
            const powerFactor = parseFloat(pfInput.value);
            
            // Handle case where power factor is zero to avoid division by zero
            if (powerFactor === 0) {
                 errorMessage.textContent = 'Power Factor cannot be zero.';
                 errorModal.classList.remove('hidden');
                 return;
            }

            const kva = kilowatts / powerFactor;

            document.getElementById('kva-result').textContent = kva.toFixed(2);

            const resultsContainer = document.getElementById('results-container-kw-to-kva');
            resultsContainer.classList.remove('hidden');
            setTimeout(() => resultsContainer.classList.remove('opacity-0', 'transform', '-translate-y-4'), 10);
        }

        function closeModal() {
            errorModal.classList.add('hidden');
        }
    </script>

  <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
  <script src="https://mediafiles.botpress.cloud/6979bbf6-6383-404c-a8f1-97413ade22c1/webchat/config.js" defer></script>

  <!--=============== SWIPER JS ===============-->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <!--=============== MAIN JS ===============-->
  <script src="./main.js"></script>

<script src="js/jquery.js"></script>
        <script src="js/common.js"></script>

<script>
  document.querySelector('.common-button').addEventListener('click', function(event) {
    event.preventDefault();
    document.getElementById('ex6').style.display = 'block';
  });
</script>

<!-- progress bar js  -->
        <script>
            function myFunction() { var n = (document.body.scrollTop || document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100; document.getElementById("myBar").style.width = n + "%" } window.onscroll = function () { myFunction() };
        </script>
        <!-- progress bar js  -->
    </div>
   
    <!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
    var swiper = new Swiper(".swiper", {
        loop: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false
        },
        speed: 1000,
        slidesPerView: 1,
        effect: 'fade',
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true
        }
    });
});

</script>

    <!-- counter-->
    <script>
        var a = 0;
        $(window).scroll(function () {
            var t = $("#counter").offset().top - window.innerHeight;
            0 == a && $(window).scrollTop() > t && ($(".counter-value").each(function () {
                var t = $(this),
                    n = t.attr("data-count");
                $({
                    countNum: t.text()
                }).animate({
                    countNum: n
                }, {
                    duration: 4e3,
                    easing: "swing",
                    step: function () {
                        t.text(Math.floor(this.countNum))
                    },
                    complete: function () {
                        t.text(this.countNum)
                    }
                })
            }), a = 1)
        });
    </script>
    <!-- counter-->
    <!-- our product js  -->
    <script>
        var screenWidth = $(window).width();
        $(window).on("load resize", function () { screenWidth >= 992 && ($("#tabs-nav-new li:first-child").addClass("active"), $(".tab-content-new").hide(), $(".tab-content-new:first").show(), $("#tabs-nav-new li").click(function () { $("#tabs-nav-new li").removeClass("active"), $(this).addClass("active"), $(".tab-content-new").hide(); var t = $(this).find("a").attr("href"); return $(t).fadeIn(1e3), !1 })) });
    </script>
    <!-- our product js  -->
    <script src="js/vtp-vm-carousel.js"></script>
    <script>
        jQuery(function ($) {
            $('.vmcarousel-centered').vmcarousel({
                centered: true,
                start_item: 1,
                autoplay: true,
                infinite: false
            });
        });
    </script>



    <script>
        // Handle form submission
        document.getElementById("vtpGetinTouch").addEventListener("submit", function (event) {
            event.preventDefault(); // Prevent the form from submitting

            var x = document.forms['vtpGetinTouch']['txtName'];
            var y = x.value;
            if (y == "") {
                alert('Please Enter Your Name....');
                x.focus();
                return false;
            }
            var reg = /^[ a-zA-Z]*$/;
            /* var reg=/^[ a-zA-Z. ]*$/; */
            if (reg.test(y) == false) {
                alert('Invalid Name! Please Enter only Alphabets....');
                x.focus();
                return false;
            }
            // 2. mail
            var x = document.forms['vtpGetinTouch']['txtEmailid'];
            var y = x.value;
            if (y == "") {
                alert('Please Enter Your Email-Id....');
                x.focus();
                return false;
            } else {
                var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z_ ]{2,4})$/;
                if (reg.test(y) == false) {
                    alert('Invalid Email Address....');
                    x.focus();
                    return false;
                }
            }
            // mail

            // message
            var x = document.forms['vtpGetinTouch']['txtMessage'];
            var y = x.value;
            if (y == "") {
                alert('Please enter your message....');
                x.focus();
                return false;
            }

            // Call the function to execute reCAPTCHA validation
            validateRecaptcha();
        });

        // Execute reCAPTCHA validation
        function validateRecaptcha() {
            grecaptcha.ready(function () {
                grecaptcha.execute('6LekLRwmAAAAAF6ubqfiXStSUHb5mA8eslZ7RSiz', { action: 'submit' }).then(function (token) {
                    // Add the reCAPTCHA response to the hidden field
                    document.getElementById("recaptchaResponse").value = token;

                    // Submit the form
                    document.getElementById("vtpGetinTouch").submit();
                });
            });
        }
    </script>

</body>
</html>