One Hat Cyber Team

View File Name : appointment.php

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <title>DiabEase Sugar and Thyroid Clinic</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Favicon -->
    <link
      rel="icon"
      type="image/png"
      sizes="56x56"
      href="assets/images/diabease/DiabEaseLogo.png"
    />
    <!-- bootstrap CSS -->
    <link
      rel="stylesheet"
      href="assets/css/bootstrap.min.css"
      type="text/css"
      media="all"
    />

    <!-- animate CSS -->
    <link
      rel="stylesheet"
      href="assets/css/animate.css"
      type="text/css"
      media="all"
    />

    <!-- font-awesome CSS -->
    <link
      rel="stylesheet"
      href="assets/css/all.min.css"
      type="text/css"
      media="all"
    />
    <!-- font-flaticon CSS -->
    <link
      rel="stylesheet"
      href="assets/css/flaticon.css"
      type="text/css"
      media="all"
    />
    <!-- theme-default CSS -->
    <link
      rel="stylesheet"
      href="assets/css/theme-default.css"
      type="text/css"
      media="all"
    />

    <!-- meanmenu CSS -->
    <link
      rel="stylesheet"
      href="assets/css/meanmenu.min.css"
      type="text/css"
      media="all"
    />
    <!-- venobox CSS -->
    <link
      rel="stylesheet"
      href="venobox/venobox.css"
      type="text/css"
      media="all"
    />
    <!-- bootstrap icons -->
    <link
      rel="stylesheet"
      href="assets/css/bootstrap-icons.css"
      type="text/css"
      media="all"
    />
    <!-- magnific popup css -->
    <link
      rel="stylesheet"
      href="assets/css/magnific-popup.css"
      type="text/css"
      media="all"
    />

    <!-- carousel css -->
    <link
      rel="stylesheet"
      href="assets/css/owl.carousel.min.css"
      type="text/css"
      media="all"
    />

    <!-- Main Style CSS -->
    <link
      rel="stylesheet"
      href="assets/css/style.css"
      type="text/css"
      media="all"
    />
    <link rel="stylesheet" href="assets/css/odometer-theme-default.css" />
    <!-- responsive CSS -->
    <link rel="stylesheet" href="assets/css/aos.css" />
    <link
      rel="stylesheet"
      href="assets/css/responsive.css"
      type="text/css"
      media="all"
    />
    <link rel="stylesheet" href="assets/css/swiper-bundle.css" />
    <!-- modernizr js -->
    <script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
    
    <style>
        .breadcumb-area {
    background: url(assets/images/diabease/banner/banner.png);
    padding: 150px 0 165px;
    background-repeat: no-repeat;
    background-size: cover;
}

.style-inner .contact-icon a {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 77px;
    border-radius: 40px;
    background-color: #0864ae;
    color: #fff;
    font-size: 30px;
    transition: 0.5s;
}

.style-four.contact-section .submit-button button {
    border: 0;
    outline: 0;
    padding: 16px 43px;
    margin-top: 8px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #ffffff;
    font-weight: 500;
    border-radius: 10px;
    background-color: #0864ae;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-family: "Playfair Display";
}



.style-four.contact-section .submit-button button:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: 0.5s;
    z-index: -1;
    right: -50px;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #f04ba4;
    transform: translateX(-100%);
}

.style-four.contact-section .submit-button button:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    transition: 0.5s;
    left: -50px;
    border-left: 50px solid transparent;
    border-top: 80px solid #f04ba4;
    transform: translateX(100%);
    z-index: -1;
}


.style-four .row.form-space {
    margin-left: 10px;
}

.section-main-title h1 {
    font-size: 45px;
    line-height: 40px;
    color: #5d3127;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-title.left-text {
    margin-bottom: 15px;
}
    </style>
  </head>
  <body>
  <?php include 'header.php' ?>
    <!--==================================================-->
    <!--start mediful breadcumb Area-->
    <!--==================================================-->
    <div class="breadcumb-area">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="breadcumb-content">
              <h4>Appointment</h4>
              <ul class="breadcumb-list">
                <li><a href="index.php">Home</a></li>
                <li class="list-arrow">/</li>
                <li>Appointment</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

  
  <div class="contact-section style-four app mt-5">
  <div class="container">
    <div class="row align-items-center" style="border: 1px solid #0864ae; padding: 15px;">
      <!-- Left Column (Contact Info) -->
      <div class="col-lg-5" style="background-color: #0864ae; padding: 7% 2%;">
        <div class="google-map">
          <div class="container pt-5 pb-5">
            <div class="row">
              <div class="col-md-12 pt-5 pb-5">
                <p class="text-white f14" style="font-size: 20px">
                  <i class="fa fa-phone text-white" style="font-size: 20px"></i>
                  <a href="tel:+7947149459" style="font-size: 20px" class="text-white"> 7947149459</a>
                </p>
                <p style="font-size: 20px" class="text-black f14">
                  <i style="font-size: 20px" class="fa fa-envelope text-white"></i>
                  <a style="font-size: 20px" href="mailto:info@diabease.com" class="text-white"> info@diabease.com</a>
                </p>
                <p style="font-size: 20px" class="text-white f14">
                  <i style="font-size: 20px" class="fa fa-map-marker text-white"></i>
                  309 3rd Floor Nms Icon Babam Dongri Railway Station, Sector 19, Ulwe, Navi Mumbai - 410206
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Column (Form) -->
      <div class="col-lg-7" style="background-image: url(assets/images/diabease/appoint.avif); padding: 12px;">
        <div class="row form-space">
          <form id="contactForm" onsubmit="submitForm(event)">
            <div class="row form">
              <div class="section-title left-text">
                <div class="section-sub-title">
                  <h5>GET IN TOUCH</h5>
                </div>
                <div class="section-main-title">
                  <h1>Book An Appointment</h1>
                </div>
              </div>

              <!-- Name Input -->
              <div class="col-lg-6">
                <div class="form-box">
                  <input type="text" id="name" name="Name" placeholder="Your Name *" required />
                </div>
              </div>

              <!-- Email Input -->
              <div class="col-lg-6">
                <div class="form-box">
                  <input type="email" id="email" name="Email" placeholder="E-Mail *" required />
                </div>
              </div>

              <!-- Phone Input -->
              <div class="col-lg-6">
                <div class="form-box">
                  <input type="text" id="phone" name="Phone" placeholder="Phone No." required />
                </div>
              </div>

              <!-- Subject Dropdown -->
              <div class="col-lg-6">
                <div class="form-box">
                  <select class="form-control p-3" id="subject" name="Subject" required>
                    <option value="" disabled selected>Choose a subject</option>
                    <option value="Diabetes">Diabetes</option>
                    <option value="Thyroid">Thyroid</option>
                    <option value="Others">Others</option>
                  </select>
                </div>
              </div>

              <!-- Message Textarea -->
              <div class="col-lg-12">
                <div class="form-box">
                  <textarea name="message" id="message" cols="30" rows="10" placeholder="Write Message"></textarea>
                </div>
              </div>

              <!-- Submit Button -->
              <div class="col-lg-12">
                <div class="submit-button">
                  <button type="submit">Submit Message</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function submitForm(event) {
    event.preventDefault();  // Prevents the default form submission

    // Get the values from the form inputs
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const phone = document.getElementById('phone').value;
    const subject = document.getElementById('subject').value;
    const message = document.getElementById('message').value;

    // Create the message to send to WhatsApp
    const whatsappMessage = `*New Appointment Request*\n\nName: ${name}\nEmail: ${email}\nPhone: ${phone}\nSubject: ${subject}\nMessage: ${message}`;

    // Encode the message for URL
    const encodedMessage = encodeURIComponent(whatsappMessage);

    // WhatsApp URL for sending message
    const whatsappUrl = `https://wa.me/7947149459?text=${encodedMessage}`;

    // Open the WhatsApp link
    window.open(whatsappUrl, '_blank');
  }
</script>


    <!--==================================================-->
    <!--End  mediful  contact section style-four-->
    <!--==================================================-->

  <?php include 'footer.php' ?>
    <script src="assets/js/vendor/jquery-3.6.2.min.js"></script>

    <script src="assets/js/odometer.min.js"></script>

    <script src="assets/js/bootstrap.min.js"></script>

    <script src="assets/js/imagesloaded.pkgd.min.js"></script>

    <script src="assets/js/isotope.pkgd.min.js"></script>

    <script src="venobox/venobox.js"></script>

    <script src="venobox/venobox.min.js"></script>

    <script src="assets/js/jquery.meanmenu.js"></script>

    <script src="assets/js/jquery.scrollUp.js"></script>

    <script src="assets/js/appear.js"></script>

    <script src="assets/js/magnific-popup-js.html"></script>

    <script src="assets/js/jquery.barfiller.js"></script>

    <script src="assets/js/swiper-bundle.js"></script>

    <script src="assets/js/owl.carousel.min.js"></script>

    <script src="assets/js/theme.js"></script>

    <script src="assets/js/my.js"></script>
  </body>
</html>