<!doctype html>
<html lang="zxx">
   <head>
      <!--========= Required meta tags =========-->
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>ESD - Early Researcher’s Seminars </title>
      <link rel="shortcut icon" href="assets/img/favicon.png" type="images/x-icon" />
      <!-- css include -->
      <link rel="stylesheet" href="assets/css/bootstrap.min.css">
      <link rel="stylesheet" href="assets/css/fontawesome.css">
      <link rel="stylesheet" href="assets/css/animate.css">
      <link rel="stylesheet" href="assets/css/swiper.min.css">
      <link rel="stylesheet" href="assets/css/odometer.css">
      <link rel="stylesheet" href="assets/css/magnific-popup.css">
      <link rel="stylesheet" href="assets/css/recoleta-font.css">
      <link rel="stylesheet" href="assets/css/nice-select.css">
      <link rel="stylesheet" href="assets/css/main.css">
   </head>
   <body>
      <!-- backtotop - start -->
      <div class="xb-backtotop">
         <a href="#" class="scroll">
         <i class="far fa-arrow-up"></i>
         </a>
      </div>
      <!-- backtotop - end -->
      <!-- Preloader - Start -->
      <div id="preloader">
         <div id="loader" class="loader">
            <div class="loader-container">
               <div class="loader-icon"><img src="assets/img/logo/preloader.png" alt="preloader"></div>
            </div>
         </div>
      </div>
      <!-- Preloader - End -->
      <div class="body_wrap">
      <?php include_once("header.php") ?>
      <!-- main area start  -->
      <main>
         <!-- breadcrumb start -->
         <section class="breadcrumb bg_img ul_li" data-background="assets/img/internal-page.jpg">
            <div class="container">
               <div class="breadcrumb__content text-center">
                  <h2 class="breadcrumb__title">Events </h2>
                  <p class="breadcrumb__desc">Early Researcher’s Seminars </p>
               </div>
            </div>
         </section>
         <!-- breadcrumb end -->
         <!-- contact start -->
         <section class="team pt-120 pb-120" data-bg-color="#F1F1E9" style="background-color: rgb(241, 241, 233);">
            <div class="container">
               <div class="section-title text-center mb-60">
                  <h2 class="title">Early Researcher’s Seminars</h2>
               </div>
               <div class="row mt-none-30">
                    
                    <div class="col-lg-6 mt-30">
                        <div class="xb-event-item">
                            <div class="xb-item--img">
                                <a href="#!"><img src="assets/img/flyer/Pre-Doc-Flyer_27April.PNG" alt=""></a>
                            </div>
                            <div class="ul_li xb-item--wrap">
                                <div class="xb-item--content">
                                    <span class="xb-item--location">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10 11.1917C11.436 11.1917 12.6 10.0276 12.6 8.5917C12.6 7.15576 11.436 5.9917 10 5.9917C8.56408 5.9917 7.40002 7.15576 7.40002 8.5917C7.40002 10.0276 8.56408 11.1917 10 11.1917Z" stroke="#292D32" stroke-width="1.5"></path>
                                        <path d="M3.01663 7.07484C4.65829 -0.141827 15.35 -0.133494 16.9833 7.08317C17.9416 11.3165 15.3083 14.8998 13 17.1165C11.325 18.7332 8.67496 18.7332 6.99163 17.1165C4.69163 14.8998 2.05829 11.3082 3.01663 7.07484Z" stroke="#292D32" stroke-width="1.5"></path>
                                        </svg>ESE Auditorium (Hybrid)
                                    </span>
                                    <h2 class="xb-item--title border-effect">
                                        <a href="#!">Early Researcher’s Seminars</a>
                                    </h2>
                                    <div class="xb-event-btn pt-15">
                                        <a class="thm-btn event-popup-trigger" style="cursor:pointer;"
                                            data-img="assets/img/flyer/Pre-Doc-Flyer_27April.PNG"
                                            data-title="Early Researcher’s Seminars"
                                            data-location="ESE Auditorium (Hybrid)"
                                            data-date="27 April 2026"
                                            data-desc="Department of Electronic Systems Engineering in collaboration with IEEE Bangalore section organizing Pre-Doctoral Research Engagement Talk Series">
                                            View
                                            <span class="icon">
                                                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M10.4795 21C9.10959 21 7.81507 20.7539 6.59589 20.2617C5.37671 19.7695 4.30137 19.0962 3.36986 18.2417C2.43836 17.3872 1.67808 16.3857 1.08904 15.2373C0.486301 14.0752 0.123288 12.8311 0 11.5049V11.4639H8.56849V14.3145C8.56849 14.5742 8.66096 14.7998 8.84589 14.9912C9.03082 15.1826 9.25342 15.2783 9.5137 15.2783C9.65068 15.2783 9.7774 15.251 9.89384 15.1963C10.0103 15.1416 10.1096 15.0732 10.1918 14.9912L14.0137 11.1768C14.0959 11.0947 14.1644 10.9956 14.2192 10.8794C14.274 10.7632 14.3014 10.6367 14.3014 10.5C14.3014 10.3633 14.274 10.2368 14.2192 10.1206C14.1644 10.0044 14.0959 9.90527 14.0137 9.82324L10.1918 6.00879C10.1096 5.92676 10.0103 5.8584 9.89384 5.80371C9.7774 5.74902 9.65068 5.72168 9.5137 5.72168C9.25342 5.72168 9.0274 5.81738 8.83562 6.00879C8.64384 6.2002 8.54794 6.42578 8.54794 6.68555V9.53613H0C0.123288 8.19629 0.486301 6.94531 1.08904 5.7832C1.67808 4.62109 2.44178 3.61279 3.38014 2.7583C4.31849 1.90381 5.39041 1.23047 6.59589 0.738281C7.81507 0.246094 9.10959 0 10.4795 0C11.9315 0 13.2945 0.273439 14.5685 0.820312C15.8425 1.38086 16.9555 2.13623 17.9075 3.08643C18.8596 4.03662 19.6096 5.14746 20.1575 6.41895C20.7192 7.69043 21 9.05078 21 10.5C21 11.9492 20.7192 13.3096 20.1575 14.5811C19.6096 15.8662 18.8596 16.9839 17.9075 17.9341C16.9555 18.8843 15.8425 19.6328 14.5685 20.1797C13.2945 20.7266 11.9315 21 10.4795 21Z" fill="#170006"></path>
                                                </svg>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="xb-item--date-inner text-center">
                                    <div class="xb-item--icon">
                                        <img src="assets/img/icon/note-book.svg" alt="">
                                    </div>
                                    <span class="xb-item--date">27 April 2026</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
               </div>
            </div>
         </section>
         <!-- contact end -->
      </main>

        <div class="modal fade" id="eventModalDynamic" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" style="max-width: fit-content; width: auto;">
                <div class="modal-content" style="border-radius: 12px; overflow: hidden; border: none; width: auto;">
        
                    <!-- Close Button -->
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        style="position: absolute; top: 12px; right: 12px; z-index: 10;
                        background-color: #fff; border-radius: 50%; padding: 8px; opacity: 1;">
                    </button>
        
                    <!-- Event Image — original size -->
                    <img id="eventModalImg" src="" alt=""
                        style="max-width: 90vw; max-height: 85vh; object-fit: contain; display: block; width: auto; height: auto;">
        
                    <!-- Event Info -->
                    <div class="modal-body" style="padding: 24px 28px;">
        
                        <!-- Date Badge -->
                        <span id="eventModalDate"
                            style="display: inline-block; background: #f4f0ff; color: #6a0dad;
                            font-size: 16px; font-weight: 600; padding: 4px 12px;
                            border-radius: 20px; margin-bottom: 5px;">
                        </span>
                        
                        <!-- Location -->
                        <p id="eventModalLocation"
                            style="margin: 0 0 14px; font-size: 14px; color: #666; display: flex; align-items: center; gap: 6px;">
                            <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10 11.1917C11.436 11.1917 12.6 10.0276 12.6 8.5917C12.6 7.15576 11.436 5.9917 10 5.9917C8.56408 5.9917 7.40002 7.15576 7.40002 8.5917C7.40002 10.0276 8.56408 11.1917 10 11.1917Z" stroke="#666" stroke-width="1.5"></path>
                                <path d="M3.01663 7.07484C4.65829 -0.141827 15.35 -0.133494 16.9833 7.08317C17.9416 11.3165 15.3083 14.8998 13 17.1165C11.325 18.7332 8.67496 18.7332 6.99163 17.1165C4.69163 14.8998 2.05829 11.3082 3.01663 7.07484Z" stroke="#666" stroke-width="1.5"></path>
                            </svg>
                            <span id="eventModalLocationText"></span>
                        </p>
        
                        <!-- Title -->
                        <h4 id="eventModalTitle"
                            style="margin: 0 0 10px; font-size: 20px; color: #170006; font-weight: 700; line-height: 1.4;">
                        </h4>
        
                        <!-- Description -->
                        <p id="eventModalDesc"
                            style="margin: 0; font-size: 15px; color: #444; line-height: 1.7;">
                        </p>
        
                    </div>
                </div>
            </div>
        </div>
      <!-- main area end  -->
      <script>
        document.querySelectorAll('.event-popup-trigger').forEach(function(trigger) {
            trigger.addEventListener('click', function() {

                // Read data from clicked card
                var img      = this.getAttribute('data-img');
                var title    = this.getAttribute('data-title');
                var location = this.getAttribute('data-location');
                var date     = this.getAttribute('data-date');
                var desc     = this.getAttribute('data-desc');

                // Inject into modal
                document.getElementById('eventModalImg').src                = img;
                document.getElementById('eventModalImg').alt                = title;
                document.getElementById('eventModalTitle').innerText        = title;
                document.getElementById('eventModalLocationText').innerText = location;
                document.getElementById('eventModalDate').innerText         = date;
                document.getElementById('eventModalDesc').innerText         = desc;

                // Open modal
                var modal = new bootstrap.Modal(document.getElementById('eventModalDynamic'));
                modal.show();
            });
        });
    </script>
      <?php include_once("footer.php") ?>