ok

Mini Shell

Direktori : /home2/selectio/public_html/tnssa/
Upload File :
Current File : /home2/selectio/public_html/tnssa/header.php

<!DOCTYPE html>
<html lang="zxx">
    <?php // include("../admin/config/config.php"); ?>
    <head>
	<!-- Meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Awaiken">
	<!-- Page Title -->
	<title>TNSSA</title>
	<!-- Favicon Icon -->
	<link rel="shortcut icon" type="image/x-icon" href="banner/favicon.png">
	<!-- Google Fonts css-->
	<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=Rajdhani:wght@400;500;600;700&amp;family=Rubik:wght@400;500&amp;display=swap" rel="stylesheet">
	<!-- Bootstrap css -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<!-- SlickNav css -->
	<link href="css/slicknav.min.css" rel="stylesheet">
	<!-- Swiper css -->
	<link rel="stylesheet" href="css/swiper-bundle.min.css">
	<!-- Font Awesome icon css-->
	<link href="css/all.min.css" rel="stylesheet" media="screen">
	<!-- Animated css -->
	<link href="css/animate.css" rel="stylesheet">
	<!-- Magnific css -->
	<link href="css/magnific-popup.css" rel="stylesheet">
	<!-- Main custom css -->
	<link href="css/custom.css" rel="stylesheet" media="screen">
	
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style>
 .topbar {
        padding: 6px 0; 
        background-color: #3b3e93;
    }
header.main-header .header-sticky {
    padding: 0px 0px;
}
header.main-header .header-sticky.active {
    height:130px;
}
.hero.hero-slider .hero-slider-layout1 .hero-slide:before {
    z-index: unset;
    
}
</style>
<body class="tt-magic-cursor">

	<!-- Preloader Start -->
<!--	<div class="preloader">
		<div class="loading-container">
			<div class="loading"></div>
			<div id="loading-icon"><img src="images/loader.svg" alt=""></div>
		</div>
	</div>-->
	<!-- Preloader End -->

	<!-- Magic Cursor Start -->
	<div id="magic-cursor">
		<div id="ball"></div>
	</div>
	<!-- Magic Cursor End -->

	<!-- Topbar Section Start -->
	<div class="topbar wow fadeInUp">
		<div class="container">
			<div class="row">
				<div class="col-md-8">
					<!-- Topbar Contact Information Start -->
					<div class="topbar-contact-info">
						<ul>
							<li><a href="#"><i class="fa-solid fa-envelope" style="font-size:23px;"></i><b style="font-size:16px;">tnssa.in@gmail.com</b></a></li>
							<li><a href="tel:+91 9600635806"><i class="fa-solid fa-phone" style="font-size:23px;"></i><b style="font-size:16px;">+91 9600635806</b></a></li>
						</ul>
					</div>
					<!-- Topbar Contact Information End -->
				</div>

				<div class="col-md-4">
					<!-- Topbar Social Links Start -->
					<div class="header-social-links">
						<ul>
							<li><a href="https://www.facebook.com/TNSSA/"><i class="fa-brands fa-facebook-f"></i></a></li>
							<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li><!--
							<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>-->
							<li><a href="https://www.instagram.com/tnssa_11/?hl=en"><i class="fa-brands fa-instagram"></i></a></li>
						</ul>
					</div>
					<!-- Topbar Social Links End -->
				</div>
			</div>
		</div>
	</div>
	<!-- Topbar Section End -->

	<!-- Header Start -->
	<header class="main-header" style="height: 110.547px !important;">
		<div class="header-sticky">
			<nav class="navbar navbar-expand-lg">
				<div class="container">
					<!-- Logo Start -->
					<a class="navbar-brand" href="index.html">
						<img src="banner/new-logo_banner.png" style="border-radius:5%;vertical-align:middle;box-sizing:border-box;/* height: 87px; */align-items: center;text-align: center;margin-top: 2px;" alt="Logo" style="height:119px">
					</a>
					<!-- Logo End -->

					<!-- Main Menu start -->
					<div class="collapse navbar-collapse main-menu">
						<ul class="navbar-nav mr-auto" id="menu">
						
							<li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
							<li class="nav-item"><a class="nav-link" href="about.php">About&nbsp;Us</a></li>
							<li class="nav-item"><a class="nav-link" href="gallery.php">Gallery</a></li>
							<li class="nav-item"><a class="nav-link" href="contact.php">Contact&nbsp;Us</a></li>
							<li class="nav-item submenu"><a class="nav-link" href="#">Registration</a>
								<ul>
									<li class="nav-item"><a class="nav-link" href="#">Skater Registration</a></li>
									<li class="nav-item"><a class="nav-link" href="#">Secretary Registration</a></li>
									<li class="nav-item"><a class="nav-link" href="#">Coach Registration</a></li>
								</ul>
							</li>
							
							<li class="nav-item submenu"><a class="nav-link" href="#">Events</a>
								<ul>
									<li class="nav-item"><a class="nav-link" href="#">Event Registration</a></li>
									<li class="nav-item"><a class="nav-link" href="#">Results</a></li>
								</ul>
							</li>
						    <li class="nav-item highlighted-menu"><button class="nav-link" data-bs-toggle="modal" data-bs-target="#exampleModal">Donation</button></li>
							
							</li>
						</ul>
					</div>
					<!-- Main Menu End -->

					<div class="navbar-toggle"></div>
				</div>
			</nav>

			<div class="responsive-menu"></div>
		</div>
	</header>
	<!-- Header End -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <center><h1 class="modal-title fs-5 text-anime" id="exampleModalLabel" style="text-align:center;">Add Your Donation</h1></center>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="load" id="donation_process_div">
               <center> <img src="preloader.gif"><br><b class="blinking load">Registration Inprocess Pls Wait...</b></center>
            </div>
            <div style="" id="donation_preloader_div" class="load">
               <center> <img src="preloader.gif" class="venkat"><br><b class="blinking">Loading Pls Wait...</b></center>
            </div>


        <div id="donation_div"> 
           <form id="donation_form">
            <div class="row">
            
           <div class="form-group col-md-6 mb-4">
				<input type="text" name="name" class="form-control" autocomplete="off" id="name" placeholder="Name" required >
				<div class="help-block with-errors"></div>
			</div>
			<div class="form-group col-md-6 mb-4">
				<input type="text" name="mobile_no" class="form-control" autocomplete="off" id="mobile_no" placeholder="Mobile No" required >
				<div class="help-block with-errors"></div>
			</div>
			<div class="form-group col-md-6 mb-4">
				<input type="email" name="email" class="form-control" autocomplete="off" id="email" placeholder="Email"  >
				<div class="help-block with-errors"></div>
			</div>
			<div class="form-group col-md-6 mb-4">
				<input type="text" name="amount" class="form-control" autocomplete="off" id="amount" placeholder="Amount" required >
				<div class="help-block with-errors"></div>
			</div>
			<div class="form-group col-md-6 mb-4">
				<input type="text" name="city" class="form-control" autocomplete="off" id="city" placeholder="City">
				<div class="help-block with-errors"></div>
			</div>
			<div class="form-group col-md-6 mb-4">
				<select class="form-control select2" name="district" id="district">
				    <option>Select Your District</option>
				    <option value="Salem">Salem</option>
				    <option value="Salem">Salem</option>
				</select>
				<div class="help-block with-errors"></div>
			</div>
			<div class="form-group col-md-6 mb-4">
				<input type="file" name="donation_logo" class="form-control" id="donation_logo" >
				<div class="help-block with-errors"></div>
			</div>
			<div class="form-group col-md-6 mb-4">
				<textarea class="form-control" name="address" autocomplete="off" id="address" placeholder="Address"></textarea>
				<div class="help-block with-errors"></div>
			</div>
			<div class="form-group col-md-6 mb-4">
				<textarea class="form-control" name="description" autocomplete="off" id="description" placeholder="Description"></textarea>
				<div class="help-block with-errors"></div>
			</div><br>
			<center> <button class="btn btn-primary" type="submit" >Add Donation</button></center>
        </div>
        </form>  
        </div> 
        <div id="donation_success_div">
            <center><b class="blinking" style="font-size:22px;">Donation Completed</b><br>
                <img src="https://i.pinimg.com/originals/af/8d/9a/af8d9ac62dd43026957e1cf82a027637.gif" style="width: 250px;">
                <br>Note:<br>Check Your Mail for Details...<br><a href="https://tnssa.in/"><button class="btn btn-warning">Back to Home</button></center></a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>

$(document).ready(function(){
            $('#donation_success_div').hide();
            $('#donation_process_div').hide();
            $('#donation_div').hide();
            $('#donation_preloader_div').show();
            
            $(function() {
                setTimeout(function() {
                    $('#donation_div').show();
                    $('#donation_preloader_div').hide();
                }, 500);
            });
            $('#donation_form').on('submit', function(e){
                 alert("Please Don't Close The Window Untill Payment Success..\nPress Ok To Continue...");
                 event.preventDefault();
                var sub = false;
               
                
                
                console.log('Form Submitted U can Enable Payment Option...');
                var formData = new FormData(this);
                var phone = $('#mobile_no').val();
                var email = $('#email').val();
                var amount = $('#amount').val();
                 if(amount<100){
                     alert('A gift of at least Rs100 is required. Please provide a number greater than 100.');
                     sub = false;
                 }else{
                     sub = false;
                 }
                 if(sub){
                    var options = {
                    "key": "rzp_live_KxA2ObhhPI9pbL", //rzp_live_KxA2ObhhPI9pbL-live   ,,,,test Key :rzp_test_Lpb1YmSn17xsPg
                    "amount": (amount*100), //100 paise
                    "name": "Tamilnadu Speed Skating Association-TNSSA",
                    "description": "Skater Registration Fees",
                    "image": "logo.png",
                    "handler": function (response){
                        formData.append('amount', amount);
                         formData.append('razorpay_payment_id', response.razorpay_payment_id);
                         formData.append('razorpay_order_id', response.razorpay_order_id);
                         formData.append('razorpay_signature', response.razorpay_signature);

                        $('#register_process_div').show();
                        $('#register_div').hide();
                        $('#success_div').hide();
                        console.log('Response : '+response);
                         $.ajax({
                            url: 'api/donation-add-api.php',
                            type: 'post',
                            dataType: 'json',
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                          enctype: 'multipart/form-data',
                            success: function (response) {
                                console.log(response['code']);
                                if(response['code']==200){
                                    $('#donation_div').hide();
                                    $('#donation_form').trigger("reset");
                                    $('#donation_process_div').hide();
                                    $('#donation_success_div').show();
                                }else{
                                    alert('something went wrong pls try again...');
                                    $('#donation_process_div').hide();
                                    $('#donation_div').show();
                                    
                                
                                };
                            }
                        });
                    },
                    "prefill": {
                        "contact": phone,
                        "email":   email,
                    },
                    "theme": {
                        "color": "#528FF0"
                    }
                };
                var rzp1 = new Razorpay(options);
                rzp1.open();
                
                 }
            });
            
        });

</script>

Zerion Mini Shell 1.0