%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/ugotscom/public_html/backwater-old2/
Upload File :
Create Path :
Current File : /home/ugotscom/public_html/backwater-old2/reg.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>40th KMA National Manangement Convention</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  
  <!-- Vendor CSS Files -->
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">
<style>
  .registration{
    position: relative;
max-width: 700px;
width: 100%;
background: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
margin-top: 41px;
  }
  .registration h1{
    font-size: 24px;
max-width: 820px;
font-family: "Poppins";
color: #c31425;
font-weight: 700;
padding-bottom: 20px;
  }
  .form .input-box {
  width: 100%;
  margin-top: 20px;
}
.input-box label {
  color: #494949;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.form :where(.input-box input, .select-box) {
  position: relative;
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #707070;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 15px;
}
.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.form .column {
  display: flex;
  column-gap: 15px;
}
.form .gender-box {
  margin-top: 20px;
}
.gender-box h3 {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 8px;
}
.form :where(.gender-option, .gender) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}
.form .gender {
  column-gap: 5px;
}
.gender input {
  accent-color: rgb(195, 20, 37);
}
.form :where(.gender input, .gender label) {
  cursor: pointer;
}
.gender label {
  color: #707070;
}
.address :where(input, .select-box) {
  margin-top: 15px;
}
.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #707070;
  font-size: 1rem;
}
.form button {
  height: 55px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgb(195, 20, 37);
}
.form button:hover {
  background: rgb(88, 56, 250);
}
.wrapper{
  height: 39px;
width: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  border-radius: 12px;
  border: 1px solid #cecece;
  margin-top: 12px;
}
.wrapper span{
  width: 100%;
  text-align: center;
  font-size: 27px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.wrapper span.num{
  font-size: 15px;
  border-right: 2px solid rgba(0,0,0,0.2);
  border-left: 2px solid rgba(0,0,0,0.2);
  pointer-events: none;
}
/*Responsive*/
@media screen and (max-width: 500px) {
  .form .column {
    flex-wrap: wrap;
  }
  .form :where(.gender-option, .gender) {
    row-gap: 15px;
  }
}


</style>
</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center ">
    <div class="container d-flex align-items-center justify-content-between">

      <div class="logo">
     
        <!-- Uncomment below if you prefer to use an image logo -->
   <a href="index.html"><img src="assets/img/logo.jpg " alt="" class="img-fluid"></a>
      </div>

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
          <li><a class="nav-link scrollto" href="#about">About</a></li>
          <li><a class="nav-link scrollto" href="#team">Speakers</a></li>
                  <li><a class="nav-link scrollto" href="#gallery">Gallery</a></li>
        
          <li><a class="nav-link scrollto" href="#pricing">Pricing</a></li>

          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <section>
    <div class="container">
    <div class="registration">
    <h1>KMA Annual Management Convention 2023 Registration Form</h1>
    <form action="payment/meTrnReq.php" method="post"  class="form">
      <div class="input-box">
        <label>Name of Organization / Institution</label>
        <input type="text" name="org" placeholder="Enter full name" required />
      </div>
      <div class="input-box">
          <label>Name of Participant</label>
          <input type="text" name="name" placeholder="Enter full name" required />
        </div>



      <div class="column">
        <div class="input-box">
          <label>Phone Number</label>
          <input type="number" name="phone" placeholder="Enter phone number" required />
        </div>
        <div class="input-box">
          <label>Email </label>
          <input type="text" name="email" placeholder="Enter email " required />
        </div>
      </div>
      <div class="input-box address">
        <label>Address</label>
        <input type="text" name="address" placeholder="Enter street address" required />
      
      </div>
      <div class="gender-box">
        <h3>Delegate Type</h3>
        <div class="gender-option">
          <div class="gender">
            <input type="radio" id="kma-member" name="gender" value="1"  onclick="rates('');"/>
            <label for="check-male">KMA Member</label>
          </div>
          <div class="gender">
            <input type="radio" id="non-kma-member" name="gender" value="2" onclick="rates('');" />
            <label for="check-female">Non-KMA Member</label>
          </div>
          <div class="gender">
            <input type="radio" id="check-other" name="gender" value="3" onclick="rates('');"/>
            <label for="check-other">KMA Student Members</label>
          </div>
          <div class="gender">
              <input type="radio" id="check-other" name="gender" value="4" onclick="rates('');"/>
              <label for="check-other">Non-KMA Student Members</label>
            </div>
        </div>
      </div>

      <div class="input-box">
        <label>No. of Participants</label>
        <div class="wrapper">
          <span class="minus">-</span>
          <span class="num" id="span_Id">01</span>
          <span class="plus">+</span>
        </div>
        </div>
        <input type="text" name="span_Id" value="<?php echo $span_Id; ?>" />
        <div class="input-box">
          <label>Payment Amount (including GST 18%)</label>
          <input type="text" name="amount" id="amount" value="0"/>
        </div>


     
      <button>Submit</button>
    </form>
  </div>
</div>
  </section>
   


  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer id="footer">
    <div class="footer-top">
      <div class="container">
        <div class="row">

          <div class="col text-center">
            <div class="footer-info">
              <h3>Kerala Management Association</h3>                           <p>
                Management House, Kerala Management Avenue,<br>
                Panampilly Nagar PO: Kochi - 682036 <br><br>
                <strong>Phone:</strong> 90727 75588, 0484 - 2317966, Fax: 2317966<br>
                <strong>Email:</strong> info@kma.org.in<br>
              </p>
              <div class="social-links mt-3">
                <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
                <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
                <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
                <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
                <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
              </div>
            </div>
          </div>

     




        </div>
      </div>
    </div>

    <div class="container">

      <div class="credits">
            Designed by <a href="https://straightcurve.in/">STRAIGHTCURVE</a>
      </div>
    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>


  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>
  <script>
    var value;
     function rates(){
     value = document.querySelector('input[name="gender"]:checked').value;
      if(value==1){
       document.getElementById("amount").value =(3500 * a)+((3500 * a)*0.18);
      }
      else if(value==2){
       document.getElementById("amount").value = (4500 * a)+((4500 * a)*0.18);
      }
      else if(value==3){
       document.getElementById("amount").value = (1500 * a)+((1500 * a)*0.18);
      }
      else if(value==4){
       document.getElementById("amount").value = (2500 * a)+((2500 * a)*0.18);
      }
     }
         const plus = document.querySelector(".plus"),
          minus = document.querySelector(".minus"),
          num = document.querySelector(".num");
          let a = 1;
          plus.addEventListener("click", ()=>{
            a++;
            a = (a < 10) ? "0" + a : a;
            num.innerText = a;
   
            if ((value==1) && (a>10)) {
           document.getElementById("amount").value =(3000 * a)+((3000 * a)*0.18);
   }
   else if ((value==1) && (a<10)) {
           document.getElementById("amount").value = (3500 * a)+((3500 * a)*0.18);
   }
   else if ((value==1) && (a==10)) {
           document.getElementById("amount").value = (3500 * a)+((3500 * a)*0.18);
   }
   else if ((value==2)) {
           document.getElementById("amount").value = (4500 * a)+((4500 * a)*0.18);
   }
   
   else if ((value==3) && (a>1)){
    document.getElementById("amount").value = (1500 * a)+((1500 * a)*0.18);
   }
   else if ((value==4) && (a>1)){
    document.getElementById("amount").value = (2500 * a)+((1500 * a)*0.18);
   }


          });
      
          minus.addEventListener("click", ()=>{
            if(a > 1){
              a--;
              a = (a < 10) ? "0" + a : a;
              num.innerText = a;
            }
            if ((value==1) && (a<10)) {
              document.getElementById("amount").value = (3500 * a)+((3500 * a)*0.18);
   }
   else if ((value==1) && (a>10)) {
    document.getElementById("amount").value =(3000 * a)+((3000 * a)*0.18);
   }
   else if ((value==1) && (a==10)) {
           document.getElementById("amount").value = (3500 * a)+((3500 * a)*0.18);
   }
   else if ((value==3) && (a>1)){
    document.getElementById("amount").value = (1500 * a)+((1500 * a)*0.18);
   }
   else if ((value==3) && (a==1)){
    document.getElementById("amount").value = (1500 * a)+((1500 * a)*0.18);
   }
          });
   
        </script>
     </body>
   
   </html>
   
   
</body>

</html>

Zerion Mini Shell 1.0