One Hat Cyber Team

Edit File: header.php

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Optional styling */
.dropdown {
  position: relative;
}

.dropdown-menu li {
  margin-bottom: 5px;
}

.dropdown-menu li:last-child {
  margin-bottom: 0;
}
.main-menu .navigation > li.dropdown > a:before{
    top: 6px!important;
}
.sticky-header .main-menu .navigation > li > a {
    padding-top: 6px;
    padding-bottom: 25px;
}
.floating-btn {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: #60aa31;
  color: white;
  border: none;
  padding: 12px 18px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 0 5px 5px 0;
  z-index: 9999;
  user-select: none;
}
 </style>

<header class="main-header">
            
            <div class="header-lower">
                <div class="shape" style="background-image: url(assets/images/shape/shape-1.png);"></div>
                <div class="outer-box" style="    margin-bottom: -50px;">
                    <div class="logo-box">
                        <figure class="logo"><a href="index.php"><img src="assets/images/logo1.png" alt=""></a></figure>
                    </div>
                    <div class="menu-area clearfix">
                        
                        <div class="mobile-nav-toggler">
                            <i class="icon-bar"></i>
                            <i class="icon-bar"></i>
                            <i class="icon-bar"></i>
                        </div>
                        <nav class="main-menu navbar-expand-md navbar-light">
                            <div class="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
                                <ul class="navigation clearfix">
                                    <li ><a href="index.php">Home</a>
                                       
                                    </li>
                                    <li ><a href="about.php">About Us</a>
                                       
                                    </li> 
                                   <li class="dropdown">
                                      <a href="products.php">Products</a>
                                      <ul class="dropdown-menu">
                                          <li><a href="filter.php">Biocera Ionizer WI-7600</a></li>
                                        <li><a href="jug.php">Biocera Alkaline Jug</a></li>
                                        <li><a href="bottle.php">Biocera A.H.A Water Bottle</a></li>
                                      </ul>
                                    </li>
                                      <li ><a href="certificates.php">Certificates</a>
                                       
                                    </li> 
                                     
                                    <li><a href="contact.php">Contact</a></li>   
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <ul class="nav-right">
                        
                        
                    </ul>
                </div>
            </div>

<div class="sticky-header">
                <div class="outer-box">
                    <div class="logo-box">
                        <figure class="logo"><a href="index-2.html"><img src="assets/images/logo1.png" alt=""></a></figure>
                    </div>
                    <div class="menu-area clearfix">
                        <nav class="main-menu clearfix">
                            
                        </nav>
                    </div>
                    <ul class="nav-right">
                      
                       
                    </ul>
                </div>
            </div>
        </header>
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><i class="fas fa-times"></i></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="index-2.html"><img src="assets/images/logo1.png" alt="" title=""></a></div>
                <div class="menu-outer"></div>
                <div class="contact-info">
                    <h4>Contact Info</h4>
                    <ul>
                        <li>Ideal Trade Center, Office No.131,<br> Plot No.64, Sector 11,CBD Belapur, Navi Mumbai- 400 614</li>
                        <li><a href="tel:9969122221">9969122221</a></li>
                        <li><a href="mailto:info@biocera.com">info@biocera.com</a></li>
                    </ul>
                </div>

</nav>
        </div>
        


<div id="popupForm" class="popup-overlay">
  <div class="popup-content"style="background-color:#002c8f;">
    <span class="close-btn" onclick="closePopup()">&times;</span>
    <h2>Book a Free Demo</h2>
    <form id="demoForm">
      
      <div class="form-row">
        <div class="form-group1">
          <label>Name</label>
          <input type="text" id="name" placeholder="Enter your name">
        </div>
        <div class="form-group1">
          <label>Phone</label>
          <div style="display: flex; gap: 5px;">
            
            <input type="tel" id="phone" placeholder="Enter your number" required>
          </div>
        </div>
      </div>

<div class="form-row">
        <div class="form-group1">
          <label>Email Address</label>
          <input type="email" id="email" placeholder="Enter your email">
        </div>
        <div class="form-group1">
          <label>Full Address</label>
          <input type="text" id="address" placeholder="Enter your full address" required>
        </div>
       
      </div>

<div class="form-row">
         <div class="form-group1">
          <label>City</label>
          <input type="text" id="city" placeholder="Enter your city" required>
        </div>
        <div class="form-group1">
          <label>Time and Date for Demo Visit</label>
          <input type="text" id="datetime" placeholder="E.g., 10 AM, 10 May 2025" required>
        </div>
      </div>

<style>
@media (max-width: 768px) {
  .popup-content {
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
  }

.form-row {
    flex-direction: column;
    gap: 10px;
  }

.popup-content input,
  .popup-content button {
    font-size: 16px;
  }
}
  .popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
  }

.popup-content h2 {
    margin-top: 0;
    font-size: 20px;
    text-align: center;
    color:white;
  }

.popup-content input {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

.popup-content button {
    width: 100%;
    padding: 10px;
        background: #67ab45;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
    color: #aaa;
  }

.close-btn:hover {
    color: #000;
  }

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  .popup-content {
  max-width: 700px;
  margin: auto;
  background: #002c8f;
  padding: 30px;
  border-radius: 8px;
  position: relative;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.form-group1 {
  
  display: flex;
  flex-direction: column;
}

.form-group input {
  padding: 8px;
  font-size: 14px;
}
.contact-style-two .info-list li i{
        color: #67ab45;
}
.theme-btn.btn-one{
     background-color: #67ab45;
}
label{
        color: white;
}

</style>

<script>
  function showPopup() {
    document.getElementById('popupForm').style.display = 'flex';
  }

function closePopup() {
    document.getElementById('popupForm').style.display = 'none';
  }

// Show every 1 minute
  setTimeout(() => {
    showPopup();
    setInterval(showPopup, 60000);
  }, 60000);

// WhatsApp submit
  document.getElementById('demoForm').addEventListener('submit', function (e) {
    e.preventDefault();

const name = document.getElementById('name').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const email = document.getElementById('email').value.trim();
    const address = document.getElementById('address').value.trim();
    const city = document.getElementById('city').value.trim();
    const datetime = document.getElementById('datetime').value.trim();

const phoneNumber = "917020418160"; // Add your WhatsApp number with country code
    const message = `Book a Free Demo Request:\nName: ${name}\nPhone: +91 ${phone}\nEmail: ${email}\nAddress: ${address}, ${city}\nPreferred Demo Time: ${datetime}`;

const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
    window.open(url, '_blank');
    closePopup();
  });
</script>
<script>
  const dragButton = document.getElementById("dragButton");

let isDragging = false;
  let offsetY = 0;

dragButton.addEventListener("mousedown", function(e) {
    isDragging = true;
    offsetY = e.clientY - dragButton.getBoundingClientRect().top;
    document.body.style.userSelect = "none"; // prevent text selection
  });

document.addEventListener("mouseup", function() {
    isDragging = false;
    document.body.style.userSelect = "";
  });
</script>