1#@!#!123s

��JFIF�� 1#@!#!123s
: / home4 / mcspunei / public_html / chitpavan.in /
Filename : upcomingevent_admin.php
back
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Maharashtra Chitpavan Sangh</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <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;600&family=Roboto:wght@500;700&display=swap" rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">

    <style>
        .service .nav .nav-link {
    transition: .5s;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    /*color: #;*/
    background-color: transperent;
}

/*.service .nav .nav-link.active {*/
/*    border-color: var(--primary) !important;*/
/*    background: var(--primary);*/
/*}*/

/*.service .nav .nav-link.active h5 {*/
/*    color: black !important;*/
/*}*/

.service .nav .nav-link.active h5 i {
    color: #FFFFFF !important;
}



        .card-img-overlay{
        position: absolute;
        bottom: 85px !important;
        left: -16px;
        top: 38%;
        padding: 1rem;
        border-radius: 0;
        }
        .lext-event{
            margin-top: -40px !important;
        }

        @media (max-width:768px){
            .card-img-overlay{
          position: absolute;
          bottom: 85px !important;
          left: -16px;
         top: 40%;
        padding: 1rem;
        border-radius: 0;
            }
        }
        @media (max-width:480px) {
            .card-img-overlay {
    position: absolute;
    bottom: 85px !important;
    left: -16px;
    top: 22%;
    padding: 1rem;
    border-radius: 0;
}
            .lext-event{
                margin-top: 0% !important;
            }
            .mob-box{
                margin: 0 0 10px 28px !important;
                margin-right: 0 !important;
                width: 85%;
                padding: 15px !important;
            }
            
            .card{
                margin-bottom: 30px;
                width: 95% !important;
            }
        }




        .card-img-overlay h5{
            width: 120px;
            /* height: 12vh; */
            background-color: #FF6A00;
            
        }
        .card {
   
    margin-top: -20px !important;
     width: 100%;
     height: 100%;
    aspect-ratio: 0 / 5;
    position: relative;
    border-radius: 10px;
    /* margin-left: 20px; */
    overflow: hidden;
    color: #000;
    transform: translateZ(0); 

}



.slider-container {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	height: 100vh;
	width: 100%;
}

.slider-container h1 {
	color: #fff;
	font-size: 100px;
	letter-spacing: 5px;
	position: relative;
	z-index: 100;
	text-align: center;
}

.slider-container::after {
	background-color: #000;
	content: '';
	position: absolute;
	opacity: 0.3;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
}

.slide {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	height: 100%;
	width: 100%;
	transform: scale(1.15);
	transition: opacity .6s ease;
}

.slide.active {
	animation: grow 4s linear forwards;
	opacity: 1;
}

@keyframes grow {
	0%, 20% {
		transform: scale(1);
	}
	
	75%, 100% {
		transform: scale(1.15);
	}
}

.controls-container {
	position: absolute;
	top: 50%;
	right: 10px;
	display: flex;
	flex-direction: column;
	transform: translateY(-50%);
	z-index: 2;
}

.control {
	background-color: #fff;
	cursor: pointer;
	opacity: 0.5;
	margin: 6px;
	height: 40px;
	width: 5px;
	transition: opacity 0.3s, background-color 0.3s, transform 0.3s;
}

.control.active, .control:hover {
	background-color: #fff;
	opacity: 1;
	transform: scale(1.2);
}


.bit{
    overflow-y:scroll;
    overflow-x:hidden;
    height:580px;
}






    



    </style>
            <script>
        function loadProducts(categoryId) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "getEventdetails.php?category_id=" + categoryId, true);
            xhr.onload = function () {
                if (xhr.status == 200) {
                    document.getElementById('products').innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>
        </head>
        
        <body>
           
         
        
         
        
        
 <!-- Navbar Start -->
      <?php
   include('header.php');
   ?>
    <!-- Navbar End -->

        


    <!-- Page Header Start -->
   <div class="container-fluid page-header  py-5"  style="background-image: url(images/banner_image2.jpg); background-repeat:repeat; height: 450px; "> 
          </div> 
    <!-- Page Header End -->

    <div class="container mt-5">
      <div class="text-center mb-2  mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
               <h1 class=" text-center " style="color: #1c013c;">Upcoming Events </h1>
        <div class="separator "></div>
            </div>
       </div>

<!--<div class="container-xxl service py-5" id="service">-->
<!--        <div class="container">-->
            
            <div class="row g-4 wow fadeInUp" data-wow-delay="0.3s">
                
                <div class="col-lg-7 d-flex justify-content-center " id="products">
                    
              <!--      <div class="tab-content w-100 ">-->
              <!--          <br>-->
              <!--          <div class="tab-pane fade show active" id="tab-pane-1">-->
              <!--              <div class="offset-lg-0 col-lg-12 offset-md-1 col-md-10 mb-md-5 d-flex align-items-center">-->
              <!--  <div class="card shadow">-->
              <!--    <img class="card-img" src="images/chitpavan-banner-image-activities-01-01.png" alt="succulent" width="100%" height="100%" style="position: relative;">-->
              <!--    <div class="card-img-overlay text-white" style="position: absolute;">-->
              <!--      <h5 class="card-title text-light text-center p-3">03 Dec <br> 2023</h5>-->
                    
              <!--    </div>-->
              <!--    <div class="card-body pb-4">-->
              <!--      <h4 class="card-title" style="color:black">Headingsss Of Event</h4>-->
              <!--      <div class="card-text">-->
              <!--          <p>Content here</p>-->
              <!--          <div class="icon d-flex align-items-center justify-content-start">-->
              <!--              <i class="fa-regular fa-clock " style="font-size: 30px;  "></i>-->
              <!--               <p class="pt-3 ps-3" style="font-size: 18px;color: #000;">8:30AM - 12:30PM Sunday</p>-->
              <!--             </div>-->
              <!--             <div class="location d-flex justify-content-start align-items-center">-->
              <!--              <i class="fa-solid fa-location-dot" style="font-size: 30px; "></i>-->
              <!--               <p class="pt-3 ps-3" style="font-size: 18px;color: #000;">Location</p>-->
              <!--             </div>-->
              <!--      </div>-->
              <!--    </div>-->
              <!--  </div>-->
              <!--</div>-->
              <!--          </div>-->
              
              <!--      </div>-->
                </div>
                
                
                <div class="bit col-lg-5">
                    <div class="nav nav-pills d-flex justify-content-between w-100 h-100 me-4">
                        <?php
include"config.php";
        $result = $conn->query("SELECT * FROM upcomingevents");

if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo '<li class="nav-link w-100 d-flex align-items-center text-start  mb-2 active" data-bs-toggle="pill" data-bs-target="#tab-pane-1" type="button"  onclick="loadProducts(' . $row['id'] . ')">';
            ?>
                    <div class="box1 w-100" style="border: 1px solid grey;border-right: 8px solid #FF6A00; border-radius: 15px; padding: 10px;">
                        
                                    <div class="date">
                                       <h6 class="text-left text-light mt-2 "style="background-color: #FF6A00; color: #fff;padding:10px; width:30%;height:auto;"><?php echo $row['date'];?></h6>
                                    </div>
                                     <div class="heading-event ps-2">
                                           <h5 class="mt-1"><?php echo $row['event_title'];?></h5>
                                           <div class="icon d-flex align-items-center justify-content-start">
                                            <i class="fa-regular fa-clock " style="font-size: 30px; color: #000;"></i>
                                             <p class="pt-2 ps-2" style="font-size: 18px;color: #000;"><?php echo $row['event_timing'];?></p>
                                           </div>
                                           <div class="location d-flex justify-content-start align-items-center">
                                            <i class="fa-solid fa-location-dot" style="font-size: 30px;color: #000; "></i>
                                             <p class="pt-2 ps-2" style="font-size: 18px;color: #000;"><?php echo $row['location'];?></p>
                                           </div>
                                        </div>
        
                                       
                                   </div>
                        </li>
                
           <?php }
        } else { 
            echo "No categories found.";
        }
        $conn->close();
        ?>
                        
                        
                      
                        
                     
                    </div>
                </div>
            </div>
        </div>
    </div>



    
   
        

      <!-- Footer Start -->

 <?php
   include('footer.php');
   ?>
  <!-- Footer End -->


  <!-- Back to Top -->
  <a href="#" class="btn btn-lg btn-secondary btn-lg-square rounded-0 back-to-top"><i class="bi bi-arrow-up"></i></a>


    
        <!-- JavaScript Libraries -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
        <script src="lib/wow/wow.min.js"></script>
        <script src="lib/easing/easing.min.js"></script>
        <script src="lib/waypoints/waypoints.min.js"></script>
        <script src="lib/counterup/counterup.min.js"></script>
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
        <script src="lib/tempusdominus/js/moment.min.js"></script>
        <script src="lib/tempusdominus/js/moment-timezone.min.js"></script>
        <script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>
    
        <!-- Template Javascript -->
        <script src="js/main.js"></script>






        <script>
            let anims = [...document.querySelectorAll("[anim]")];
console.log(anims);
let click = (el, cb) => el.addEventListener("click", cb);
let toggle = (el) => el.classList.toggle("toggled");
let clickTog = (el) => click(el, () => toggle(el));
anims.map(clickTog);



const slides = document.querySelectorAll('.slide');
const controls = document.querySelectorAll('.control');
let activeSlide = 0;
let prevActive = 0;

changeSlides();
let int = setInterval(changeSlides, 4000);

function changeSlides() {
	slides[prevActive].classList.remove('active');
	controls[prevActive].classList.remove('active');

	slides[activeSlide].classList.add('active');
	controls[activeSlide].classList.add('active');
	
	prevActive = activeSlide++;
	
	if(activeSlide >= slides.length) {
		activeSlide = 0;
	}
	
	console.log(prevActive, activeSlide);
}

controls.forEach(control => {
	control.addEventListener('click', () => {
		let idx = [...controls].findIndex(c => c === control);
		activeSlide = idx;

		changeSlides();

		clearInterval(int);
		int = setInterval(changeSlides, 4000);
	});
});


// readmore button script start

function toggleContainer() {
    var hiddenContent = document.getElementById('hiddenContent');
    if (hiddenContent.style.display === 'none') {
        hiddenContent.style.display = 'block';
    } else {
        hiddenContent.style.display = 'none';
    }
}



        </script>

        
    </body>
    
    </html>