📁 File Manager

Dosya Düzenle: index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mangaldai College – Empowering Minds, Shaping Futures</title>
  <meta name="description" content="Mangaldai College, Darrang, Assam – Estd. 1951. Affiliated to Gauhati University. Quality education fostering innovation." />
  
  <meta property="og:title" content="Mangaldai College" />
  <meta property="og:description" content="Empowering Minds, Shaping Futures since 1951." />
  <meta property="og:type" content="website" />
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
  
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
  
  <link rel="stylesheet" href="style2.css" />
  
  
  <style>
  
  .pc-photo-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.pc-photo-square{
    width:90%;
    height:170px;
    border-radius:12px;
    overflow:hidden;
    border:5px solid #d4af37;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    background:#fff;
}

.pc-photo-square img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.pc-name-block{
    text-align:center;
}

.pc-name{
    margin-top:15px;
    margin-bottom:6px;
}

/* ══════════════════════════════════════════
   FLOATING HELP AGENT (mascot -> faqHD1.php)
══════════════════════════════════════════ */
.help-agent{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1200;
  display:flex;
  align-items:flex-end;
  gap:10px;
  text-decoration:none;
  cursor:pointer;
}

.help-agent-bubble{
  background:#0f2740;
  color:#fff;
  font-family:'Poppins', sans-serif;
  font-size:13px;
  font-weight:600;
  padding:8px 14px;
  border-radius:16px;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  margin-bottom:14px;
}
.help-agent:hover .help-agent-bubble{
  opacity:1;
  transform:translateY(0);
}

.help-agent-avatar{
  position:relative;
  width:66px;
  height:66px;
  border-radius:50%;
  background:linear-gradient(160deg,#ffd36e 0%,#d4af37 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:agentBob 2.6s ease-in-out infinite;
  border:3px solid #fff;
}

.help-agent-avatar::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(212,175,55,.55);
  animation:agentPulse 2.2s ease-out infinite;
}

.help-agent-avatar svg{
  width:70%;
  height:70%;
  overflow:visible;
}

.help-agent-ping{
  position:absolute;
  top:2px;
  right:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#28c76f;
  border:2px solid #fff;
}

/* Blinking NEW Badge */
.flash-badge.new,
.ns-badge.imp-badge{
    background: #ff0000;
    color: #fff;
    font-weight: 700;
    animation: blinkNew 1s infinite;
    box-shadow: 0 0 8px rgba(255,0,0,.6);
}

@keyframes blinkNew{
    0%,100%{
        opacity:1;
        transform:scale(1);
        box-shadow:0 0 5px rgba(255,0,0,.5);
    }
    50%{
        opacity:.25;
        transform:scale(1.08);
        box-shadow:0 0 15px rgba(255,0,0,1);
    }
}

@keyframes agentBob{
  0%, 100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-8px) rotate(2deg); }
}

@keyframes agentPulse{
  0%{ transform:scale(0.9); opacity:.9; }
  100%{ transform:scale(1.35); opacity:0; }
}

@media (max-width: 576px){
  .help-agent{ right:14px; bottom:14px; }
  .help-agent-avatar{ width:56px; height:56px; }
  .help-agent-bubble{ display:none; }
}
  
  
  
  
  
  
  </style>
  
  
  
</head>
<body>
<?php include 'includes/page_head.php'; ?>
<?php include 'includes/utility_bar.php'; ?>
<?php include 'includes/header.php'; ?>
<?php include 'includes/navbar.php'; ?> 
 
 
  
  <section id="hero" aria-label="Hero section">
    
    <div class="hero-bg" aria-hidden="true"></div>
   
    
    <div class="hero-overlay" aria-hidden="true"></div>

<div class="hero-content container-fluid px-4">
        
      
      <div class="hero-text">
          
          
          
          
          
          
           
  <div class="hero-slide active">
    <span class="estd-badge" aria-label="Established 1951">ESTD. 1951</span>
    <h2 class="hero-heading">
     NAAC Accredited,<br />
      <span class="hero-gold">with 'A' Grade Excellence</span>
    </h2>
    <p class="hero-para">
     A NAAC 'A' Grade institution dedicated to nurturing excellence,<br class="d-none d-md-inline"/>
leadership, innovation, and lifelong learning.
    </p>
    <div class="hero-buttons">
      <a href="#" class="btn-apply">
        <i class="bi bi-pencil-square me-2"></i>Apply Now
      </a>
      <a href="#" class="btn-explore">
        <i class="bi bi-book me-2"></i>Explore Courses
      </a>
    </div>
  </div>

<div class="hero-slide ">
    <span class="estd-badge" aria-label="Established 1951">ESTD. 1951</span>
    <h2 class="hero-heading">
      Empowering Minds,<br />
      <span class="hero-gold">Shaping Futures</span>
    </h2>
    <p class="hero-para">
      Mangaldai College is committed to providing quality education,<br class="d-none d-md-inline"/>
      fostering innovation, and building a better tomorrow.
    </p>
    <div class="hero-buttons">
      <a href="#" class="btn-apply">
        <i class="bi bi-pencil-square me-2"></i>Apply Now
      </a>
      <a href="#" class="btn-explore">
        <i class="bi bi-book me-2"></i>Explore Courses
      </a>
    </div>
  </div>

<div class="hero-slide">
    <span class="hero-motto-label">Our Motto</span>
    <div class="hero-motto-text">
      तमसो मा ज्योतिर्गमय
    </div>
    <div class="hero-motto-text" style="font-size: clamp(1rem, 2.2vw, 1.4rem); margin-top: -8px;">
      TAMASO MA JYOTIRGAMAYA
    </div>
    <p class="hero-motto-meaning">
      "Lead me from the darkness of ignorance<br/>
      to the light of wisdom."
    </p>
    <div class="hero-buttons" style="margin-top: 24px;">
      <a href="#" class="btn-apply">
        <i class="bi bi-pencil-square me-2"></i>Apply Now
      </a>
      <a href="#" class="btn-explore">
        <i class="bi bi-book me-2"></i>Explore Courses
      </a>
    </div>
  </div>

<div class="hero-slide-dots" role="tablist" aria-label="Hero slides">
    <button class="hero-slide-dot active" aria-label="Slide 1" role="tab"></button>
    <button class="hero-slide-dot" aria-label="Slide 2" role="tab"></button>
  </div>

</div>

<div class="hero-principal-wrap">
        <div class="hero-principal-card">
          
          <div class="pc-glow" aria-hidden="true"></div>

<div class="pc-label">
            <i class="bi bi-person-badge-fill"></i>
            Principal's Message
          </div>

<div class="pc-photo-wrap">

<div class="pc-name-block text-center mt-3">
        <h3 class="pc-name">Dr. Kamala Kanta Borah</h3>
        <p class="pc-designation">Principal, Mangaldai College (Autonomous)</p>
        <p class="pc-qualification">M.Sc., Ph.D. | Gauhati University</p>
    </div>

</div>

<div class="pc-divider"></div>

<div class="pc-quote-mark" aria-hidden="true">"</div>

<div class="pc-message">
            <p align="justify">Mangaldai College (Autonomous) is a pioneer Higher Educational Institute imparting Science and Arts along with skill based B.Voc & BCA degree Programme. The college strives to build a top -notch academic environment for learners through inclusive quality education. In this connection, I take the opportunity to offer my heartiest greeting to all the respected and talented faculty members for their endeavour to make our students excel in all aspects.... </p>
            
          </div>

<div class="pc-signature">
            <div class="pc-sig-line" aria-hidden="true"></div>
            <span>Dr. Kamala Kanta Borah</span>
          </div>

<a href="principalProfile1.php" class="pc-readmore" >
            Principal Profile <i class="bi bi-arrow-right"></i>
          </a>

<div class="pc-stats">
            <div class="pc-stat">
              <span class="pc-stat-num">75+</span>
              <span class="pc-stat-label">Years</span>
            </div>
            <div class="pc-stat-div"></div>
            <div class="pc-stat">
              <span class="pc-stat-num">5000+</span>
              <span class="pc-stat-label">Students</span>
            </div>
            <div class="pc-stat-div"></div>
            <div class="pc-stat">
              <span class="pc-stat-num">80+</span>
              <span class="pc-stat-label">Faculty</span>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="scroll-indicator" aria-hidden="true">
      <span></span>
    </div>

<div class="quick-cards-row" role="list" aria-label="Quick access links">
      <a href="https://assamshesp.samarth.edu.in/index.php/site/login" class="quick-card" role="listitem" aria-label="Admissions">
        <div class="quick-card-icon"><i class="bi bi-person-plus-fill"></i></div>
        <div class="quick-card-text">
          <span class="qc-title">Admissions</span>
          <span class="qc-sub">Apply Now</span>
        </div>
      </a>
      <a href="allNoticeView.php" class="quick-card" role="listitem" aria-label="Notices">
        <div class="quick-card-icon"><i class="bi bi-bell-fill"></i></div>
        <div class="quick-card-text">
          <span class="qc-title">Notices</span>
          <span class="qc-sub">Latest Updates</span>
        </div>
      </a>
      <a href="https://alumni.mangaldaicollege.org/" class="quick-card" role="listitem" aria-label="Results">
        <div class="quick-card-icon"><i class="bi bi-trophy-fill"></i></div>
        <div class="quick-card-text">
          <span class="qc-title">Alumni</span>
          <span class="qc-sub">Alumni Portal</span>
        </div>
      </a>
      <a href="https://www.mangaldaicollege.org/alldepartments.php" class="quick-card" role="listitem" aria-label="Departments">
        <div class="quick-card-icon"><i class="bi bi-building-fill"></i></div>
        <div class="quick-card-text">
          <span class="qc-title">Departments</span>
          <span class="qc-sub">Explore</span>
        </div>
      </a>
      <a href="https://mangaldaicollege-opac.in/" class="quick-card" role="listitem" aria-label="Library">
        <div class="quick-card-icon"><i class="bi bi-book-fill"></i></div>
        <div class="quick-card-text">
          <span class="qc-title">Library</span>
          <span class="qc-sub">Resources</span>
        </div>
      </a>
      <a href="app/toolsX.html" class="quick-card" role="listitem" aria-label="Alumni">
        <div class="quick-card-icon"><i class="bi bi-people-fill"></i></div>
        <div class="quick-card-text">
          <span class="qc-title">Tools</span>
          <span class="qc-sub">For daily Life</span>
        </div>
      </a>
    </div>
  </section>

<section id="flash-news" aria-label="Flash News and Notifications">
    <div class="flash-news-bar">

<div class="flash-label" aria-label="Flash News">
        <i class="bi bi-broadcast-pin"></i>
        <span>Notification</span>
        <div class="flash-live-dot" aria-hidden="true"></div>
      </div>

<div class="flash-ticker-outer" aria-live="polite" aria-atomic="false">
        <div class="flash-ticker-track" id="flashTrack">

<?php 
          
          include 'connect.php';
					$snotice = "select * from notice  ORDER BY Sno DESC LIMIT 8 ";  
				
					$noticeQ = mysqli_query($con, $snotice);
          
            while($NoticeRow=mysqli_fetch_array($noticeQ))
					{
						$topic =$NoticeRow['Topic'];
						$Link =$NoticeRow['Link'];
						$date2 = $NoticeRow['Date'];   // Database date
$days = floor((strtotime(date('Y-m-d')) - strtotime($date2)) / (60 * 60 * 24));
						?>
          
          
          <span class="flash-item">

<?php if ($days >= 0 && $days <= 7) { ?>
        <span class="flash-badge new">NEW</span>
    <?php } ?>

</span>
  <?php 
  
  }
  ?>

</div>
      </div>

<div class="flash-controls">
        <button class="flash-ctrl-btn" id="flashPauseBtn" aria-label="Pause ticker">
          <i class="bi bi-pause-fill" id="flashPauseIcon"></i>
        </button>
        <a href="#" class="flash-all-btn" aria-label="View all notices">
          All Notices <i class="bi bi-arrow-right-short"></i>
        </a>
      </div>

</div>
  </section>

<div class="notices-bridge" aria-hidden="true"></div>

<section id="notices-section" aria-label="Notices and Announcements">

<div class="ns-header">
    <div class="ns-header-inner">
      <div class="ns-eyebrow">
        <span class="ns-eyebrow-line"></span>
        <span class="ns-eyebrow-text">Stay Informed</span>
        <span class="ns-eyebrow-line"></span>
      </div>
      <h2 class="ns-title">Notices &amp; Announcements</h2>
      <p class="ns-subtitle">All official communications from Mangaldai College (Autonomous)</p>
    </div>
  </div>

<div class="ns-grid-wrap">
    <div class="ns-grid">
        
        
        
        
        
        
        
      
      <div class="ns-col" data-type="academic">
        <div class="ns-col-header">
          <div class="ns-col-icon-wrap">
            <i class="bi bi-mortarboard-fill"></i>
          </div>
          <div class="ns-col-title-block">
            <h3 class="ns-col-title">Academic</h3>
            <span class="ns-col-count" id="acadCount">All notices</span>
          </div>
          <a href="#" class="ns-view-all" aria-label="View all academic notices">
            <i class="bi bi-arrow-right-short"></i>
          </a>
        </div>
        
<div class="ns-search-wrap">
  <i class="bi bi-search ns-search-icon"></i>
  <input
    type="search"
    class="ns-search-input"
    placeholder="Search notices..."
    aria-label="Search notices"
  />
  <div class="ns-search-results-count"></div>
</div>

<div class="ns-scroll-wrap">
          
          <?php
					$snotice1 = "select * from notice where NoticeType = 'Notice' ORDER BY Sno DESC";
					$noticeQ1 = mysqli_query($con, $snotice1);
					while($NoticeRow1=mysqli_fetch_array($noticeQ1))
					{
						$topi1c =$NoticeRow1['Topic'];
						$Link1 =$NoticeRow1['Link'];
						$date2 = $NoticeRow1['Date'];
					$date1 = date('Y-m-d');
					
$diff = abs(strtotime($date1)-strtotime($date2));

$years = floor($diff / (365*60*60*24));

$months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));

$days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));

//echo "posted: " . $years . " Years " . $months . " Months " . $days . " days ago";

?>
          
          <ul class="ns-list" id="acadList">
            <li class="ns-item ns-item--imp">
              <div class="ns-item-left">
                <span class="ns-dot acad"></span>
              </div>
              <div class="ns-item-body">
                <a href="http://mangaldaicollege.org/<?php echo $Link1;  ?>" class="ns-item-title"><?php echo $topi1c; ?></a>
               
               
               <div class="ns-item-meta">
    
    <span class="ns-date">
    <i class="bi bi-calendar3"></i>
    <?php echo date("d- M- Y", strtotime($date2)); ?>
</span>

<?php
    $days = floor((strtotime(date('Y-m-d')) - strtotime($date2)) / (60 * 60 * 24));

if ($days >= 0 && $days <= 7) {
        echo '<span class="ns-badge imp-badge">NEW</span>';
    }
    ?>
</div>
               
               
              </div>
            </li>
            
          </ul>
          
          <?php
					}
					
					?>
          
          
          
        </div>

<a href="#" class="ns-col-footer-link">
          View all academic notices <i class="bi bi-arrow-right"></i>
        </a>
      </div>

<div class="ns-col" data-type="dept">
        <div class="ns-col-header">
          <div class="ns-col-icon-wrap">
            <i class="bi bi-building-fill"></i>
          </div>
          <div class="ns-col-title-block">
            <h3 class="ns-col-title">Departmental</h3>
            <span class="ns-col-count" id="deptCount">All notices</span>
          </div>
          <a href="#" class="ns-view-all" aria-label="View all departmental notices">
            <i class="bi bi-arrow-right-short"></i>
          </a>
        </div>
        
<div class="ns-search-wrap">
  <i class="bi bi-search ns-search-icon"></i>
  <input
    type="search"
    class="ns-search-input"
    placeholder="Search notices..."
    aria-label="Search notices"
  />
  <div class="ns-search-results-count"></div>
</div>

<div class="ns-scroll-wrap">
          
          	<?php
					$snotice1x = "select * from dept_notice ORDER BY dn_id DESC ";
					$noticeQ1x = mysqli_query($con, $snotice1x);
					while($NoticeRow1=mysqli_fetch_array($noticeQ1x))
					{
						$topi1c =$NoticeRow1['notice'];
						$Link1 =$NoticeRow1['link'];
						$date2 = $NoticeRow1['date'];
						$pub = $NoticeRow1['publisher'];
						$date1 = date('Y-m-d');
						
						
						$parts = explode('@', $pub);

$user = $parts[0];
                        // Stick the @ back onto the domain since it was chopped off.
                        $domain =  $parts[0];
                        
                        
					
$diff = abs(strtotime($date1)-strtotime($date2));

$years = floor($diff / (365*60*60*24));

$months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));

$days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));

//echo "posted: " . $years . " Years " . $months . " Months " . $days . " days ago";
						?>
          
          
          
          <ul class="ns-list" id="deptList">
            
            
            
            <li class="ns-item">
              <div class="ns-item-left">
                <span class="ns-dot dept"></span>
              </div>
              
               <div class="ns-item-body">
                <a href="http://mangaldaicollege.org/deptadminpanel/<?php echo $Link1; ?>" class="ns-item-title"><?php echo $topi1c; ?></a>
                <div class="ns-item-meta">
                  <span class="ns-tag dept-tag"><?php echo $domain; ?></span>
                  <span class="ns-date"><i class="bi bi-calendar3"></i> <?php echo $date2; ?></span>
                </div>
              </div>
            </li>
            
            </ul>
            
            <?php }
            ?>
        </div>

<a href="#" class="ns-col-footer-link">
          View all departmental notices <i class="bi bi-arrow-right"></i>
        </a>
      </div>

<div class="ns-col" data-type="events">
        <div class="ns-col-header">
          <div class="ns-col-icon-wrap">
            <i class="bi bi-calendar-event-fill"></i>
          </div>
          <div class="ns-col-title-block">
            <h3 class="ns-col-title">Events</h3>
            <span class="ns-col-count" id="evtCount">All upcoming</span>
          </div>
          <a href="#" class="ns-view-all" aria-label="View all events">
            <i class="bi bi-arrow-right-short"></i>
          </a>
        </div>
        
<div class="ns-search-wrap">
  <i class="bi bi-search ns-search-icon"></i>
  <input
    type="search"
    class="ns-search-input"
    placeholder="Search notices..."
    aria-label="Search notices"
  />
  <div class="ns-search-results-count"></div>
</div>

<div class="ns-scroll-wrap">
          
          
          <?php
					$snotice1 = "select * from notice where NoticeType = 'Event' or NoticeType = 'NoticeU' ORDER BY Sno DESC ";
					$noticeQ1 = mysqli_query($con, $snotice1);
					while($NoticeRow1=mysqli_fetch_array($noticeQ1))
					{
						$topi1c =$NoticeRow1['Topic'];
						$Link1 =$NoticeRow1['Link'];
						$date2 = $NoticeRow1['Date'];
						$date1 = date('Y-m-d');
					
$diff = abs(strtotime($date1)-strtotime($date2));

$years = floor($diff / (365*60*60*24));

$months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));

$days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));

//echo "posted: " . $years . " Years " . $months . " Months " . $days . " days ago";
						?>
          
          
          <ul class="ns-list" id="evtList">
            <li class="ns-item">
              <div class="ns-item-left">
                <div class="ns-event-date">
                  <span class="ns-ev-day"></span>
                  <span class="ns-ev-mon"></span>
                </div>
              </div>
              <div class="ns-item-body">
                <a href="http://mangaldaicollege.org/<?php echo $Link1;  ?>" class="ns-item-title"><?php echo $topi1c; ?></a>
                <div class="ns-item-meta">
                  <span class="ns-tag evt-cultural">Event</span>
                  <span class="ns-date"><i class="bi bi-clock"></i> <?php  echo $date2; ?></span>
                </div>
              </div>
            </li>
            
          </ul>
          
         <?php }
         
         ?>
          
          
          
          
          
        </div>

<a href="#" class="ns-col-footer-link">
          View all events <i class="bi bi-arrow-right"></i>
        </a>
      </div>

<div class="ns-col" data-type="tender">
        <div class="ns-col-header">
          <div class="ns-col-icon-wrap">
            <i class="bi bi-file-earmark-text-fill"></i>
          </div>
          <div class="ns-col-title-block">
            <h3 class="ns-col-title">Tender</h3>
            <span class="ns-col-count" id="tenderCount">All active</span>
          </div>
          <a href="#" class="ns-view-all" aria-label="View all tenders">
            <i class="bi bi-arrow-right-short"></i>
          </a>
        </div>
        
<div class="ns-search-wrap">
  <i class="bi bi-search ns-search-icon"></i>
  <input
    type="search"
    class="ns-search-input"
    placeholder="Search notices..."
    aria-label="Search notices"
  />
  <div class="ns-search-results-count"></div>
</div>

<div class="ns-scroll-wrap">
          <ul class="ns-list" id="tenderList">
            
            
            <?php
					$snotice1 = "select * from notice where NoticeType = 'Tender' ORDER BY Sno DESC";
					$noticeQ1 = mysqli_query($con, $snotice1);
					while($NoticeRow1=mysqli_fetch_array($noticeQ1))
					{
						$topi1c =$NoticeRow1['Topic'];
						$Link1 =$NoticeRow1['Link'];
						$date2 = $NoticeRow1['Date'];
						$date1 = date('Y-m-d');					
						$diff = abs(strtotime($date1)-strtotime($date2));
						$years = floor($diff / (365*60*60*24));
						$months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));
						$days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));
						//echo "posted: " . $years . " Years " . $months . " Months " . $days . " days ago";
						?>
            
            
            
            
            
            <li class="ns-item ns-item--imp">
              <div class="ns-item-left">
                <span class="ns-dot tender"></span>
              </div>
              
              
              <div class="ns-item-body">
                <a href="http://mangaldaicollege.org/<?php echo $Link1; ?>" class="ns-item-title"><?php echo $topi1c; ?> </a>
                <div class="ns-item-meta">
                  
                  <span class="ns-date tender-due"><i class="bi bi-alarm"></i> Due: <?php  echo $years . " Years " . $months . " Months " . $days . " days ago" ?> </span>
                </div>
              </div>
            </li>
            
            <?php
					    
					}
            ?>
            
            
            
          </ul>
        </div>

<a href="#" class="ns-col-footer-link">
          View all tenders <i class="bi bi-arrow-right"></i>
        </a>
      </div>

</div>
  </div>

</section>

<div class="ce-header">
    <div class="ce-header-inner">
      <div class="ce-eyebrow">
        <span class="ce-eyebrow-line"></span>
        <i class="bi bi-calendar2-heart-fill ce-eyebrow-icon"></i>
        <span class="ce-eyebrow-text">Life at Mangaldai College</span>
        <i class="bi bi-calendar2-heart-fill ce-eyebrow-icon"></i>
        <span class="ce-eyebrow-line"></span>
      </div>
      <h2 class="ce-title">College <span class="ce-title-accent">Events</span></h2>
      <p class="ce-subtitle">Celebrating milestones, culture, sports, and academic excellence</p>
    </div>

<div class="ce-controls">
      <button class="ce-ctrl-btn" id="cePrev" aria-label="Previous event">
        <i class="bi bi-chevron-left"></i>
      </button>
      <div class="ce-dots" id="ceDots" aria-label="Carousel pagination"></div>
      <button class="ce-ctrl-btn" id="ceNext" aria-label="Next event">
        <i class="bi bi-chevron-right"></i>
      </button>
      <button class="ce-pause-btn" id="cePause" aria-label="Pause auto-scroll">
        <i class="bi bi-pause-fill" id="cePauseIcon"></i>
      </button>
    </div>
  </div>

<div class="ce-carousel-outer" id="ceOuter">
    <div class="ce-track" id="ceTrack">

<?php
							
								$event = "select * from Event_recent ORDER BY date DESC LIMIT 10";
								$qEvent = mysqli_query($con,$event );
								while($eventRow=mysqli_fetch_array($qEvent))
								{
								$date = $eventRow['date'];
									$title =$eventRow['title'];
									$des =$eventRow['description'];
									$img = $eventRow['icon'];
									$id1= $eventRow['e_id'];
									$dept= $eventRow['department'];
									$venue= $eventRow['venue'];
							
						
						// Separate variables
$day   = date("d", strtotime($date));   // 22
$month = strtolower(date("M", strtotime($date)));   // April
$year  = date("Y", strtotime($date));   // 2026
						
						
							?>

<article class="ce-card" tabindex="0">
        <div class="ce-card-img-wrap">
          <img
            src="../<?php echo $img ?>"
            alt="Annual Cultural Fest Utsav 2026"
            loading="lazy"
            onerror="this.onerror=null; this.src='img/banner-bg.jpg';"
          />
          <div class="ce-card-img-overlay"></div>
          <span class="ce-card-tag cultural"><?php echo $dept; ?></span>
          <div class="ce-card-date-badge">
            <span class="ce-badge-day"><?php echo $day; ?></span>
            <span class="ce-badge-mon"><?php echo $month; ?></span>
            <span class="ce-badge-day"><?php echo $year; ?></span>
          </div>
        </div>
        <div class="ce-card-body">
          <h3 class="ce-card-title"><?php  echo $title; ?></h3>
          <p class="ce-card-text"><?php  echo $des; ?></p>
          <div class="ce-card-footer">
            <span class="ce-card-meta"><i class="bi bi-geo-alt-fill"></i> <?php echo $venue; ?></span>
            <a href="Eventbyid.php?id=<?php echo $id1; ?>" class="ce-card-link">Know More <i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </article>
      
      
      <?php
							}
      ?>

</div>
  </div>

<div class="ce-view-all-wrap">
    <a href="#" class="ce-view-all-btn">
      <i class="bi bi-calendar3"></i>
      View All Events
      <i class="bi bi-arrow-right"></i>
    </a>
  </div>

</section>

<a href="faqHD1.php" class="help-agent" aria-label="Need help? Visit our FAQ page">
  <span class="help-agent-bubble">Need help? Ask me 👋</span>
  <span class="help-agent-avatar">
    <span class="help-agent-ping" aria-hidden="true"></span>
    <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      
      <circle cx="10" cy="26" r="6" fill="#173a5e"/>
      <circle cx="54" cy="26" r="6" fill="#173a5e"/>
      
      <circle cx="32" cy="30" r="20" fill="#ffffff" stroke="#173a5e" stroke-width="2.5"/>
      
      <path d="M32 6 L52 14 L32 22 L12 14 Z" fill="#173a5e"/>
      <rect x="30.5" y="14" width="3" height="10" fill="#173a5e"/>
      <circle cx="33.5" cy="24" r="2" fill="#d4af37"/>
      
      <circle cx="24" cy="31" r="3.2" fill="#173a5e"/>
      <circle cx="40" cy="31" r="3.2" fill="#173a5e"/>
      <circle cx="25" cy="30" r="1" fill="#fff"/>
      <circle cx="41" cy="30" r="1" fill="#fff"/>
      
      <circle cx="19" cy="37" r="3" fill="#ffb3ba" opacity="0.7"/>
      <circle cx="45" cy="37" r="3" fill="#ffb3ba" opacity="0.7"/>
      
      <path d="M23 39 Q32 47 41 39" stroke="#173a5e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
    </svg>
  </span>
</a>

if (!track) return;

const cards      = Array.from(track.querySelectorAll('.ce-card'));
  const total      = cards.length;
  let current      = 0;
  let paused       = false;
  let autoTimer    = null;
  let visibleCount = getVisibleCount();

/* ── Dots ── */
  const dotCount = total - visibleCount + 1;
  for (let i = 0; i < dotCount; i++) {
    const d = document.createElement('button');
    d.className = 'ce-dot';
    d.setAttribute('aria-label', `Go to event ${i + 1}`);
    d.addEventListener('click', () => goTo(i));
    dotsWrap.appendChild(d);
  }
  const dots = Array.from(dotsWrap.querySelectorAll('.ce-dot'));

function getVisibleCount() {
    const w = window.innerWidth;
    if (w < 640)  return 1;
    if (w < 900)  return 2;
    if (w < 1200) return 3;
    return 5; // show all 5 on wide screens → still scrollable
  }

function getCardWidth() {
    const card = cards[0];
    const style = getComputedStyle(card);
    const gap = parseFloat(getComputedStyle(track).gap) || 24;
    return card.offsetWidth + gap;
  }

function goTo(index) {
    const maxIdx = Math.max(0, total - visibleCount);
    current = Math.min(Math.max(index, 0), maxIdx);
    track.style.transform = `translateX(-${current * getCardWidth()}px)`;
    dots.forEach((d, i) => d.classList.toggle('active', i === current));
  }

function next() { goTo(current + 1 >= total - visibleCount + 1 ? 0 : current + 1); }
  function prev() { goTo(current - 1 < 0 ? Math.max(0, total - visibleCount) : current - 1); }

function startAuto() {
    clearInterval(autoTimer);
    autoTimer = setInterval(next, 3200);
  }
  function stopAuto() { clearInterval(autoTimer); }

prevBtn.addEventListener('click', () => { prev(); if (!paused) { stopAuto(); startAuto(); } });
  nextBtn.addEventListener('click', () => { next(); if (!paused) { stopAuto(); startAuto(); } });

pauseBtn.addEventListener('click', () => {
    paused = !paused;
    pauseIcon.className = paused ? 'bi bi-play-fill' : 'bi bi-pause-fill';
    pauseBtn.setAttribute('aria-label', paused ? 'Resume auto-scroll' : 'Pause auto-scroll');
    paused ? stopAuto() : startAuto();
  });

/* Pause on hover */
  outer.addEventListener('mouseenter', stopAuto);
  outer.addEventListener('mouseleave', () => { if (!paused) startAuto(); });

/* Touch swipe */
  let touchStartX = 0;
  outer.addEventListener('touchstart', e => { touchStartX = e.touches[0].clientX; }, { passive: true });
  outer.addEventListener('touchend', e => {
    const diff = touchStartX - e.changedTouches[0].clientX;
    if (Math.abs(diff) > 50) diff > 0 ? next() : prev();
  });

/* Keyboard on cards */
  cards.forEach(card => {
    card.addEventListener('keydown', e => {
      if (e.key === 'ArrowRight') next();
      if (e.key === 'ArrowLeft')  prev();
    });
  });

/* Resize */
  window.addEventListener('resize', () => {
    visibleCount = getVisibleCount();
    goTo(current);
  });

goTo(0);
  startAuto();
})();
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  
  <script src="script3.js"></script>
  
 
 
 <script>
(function () {

if (window.innerWidth >= 900) return;

var cols = document.querySelectorAll('.ns-col');

cols.forEach(function(col, i) {
    var progress = col.querySelector('.ns-col-progress');
    var scroll   = col.querySelector('.ns-scroll-wrap');
    var header   = col.querySelector('.ns-col-header');

/* hide all except first on load */
    if (i !== 0) {
      if (progress) progress.style.display = 'none';
      scroll.style.display = 'none';
    } else {
      col.classList.add('is-open');
    }

header.addEventListener('click', function() {

var isCurrentlyOpen = scroll.style.display !== 'none';

/* close all */
      cols.forEach(function(c) {
        var p = c.querySelector('.ns-col-progress');
        var s = c.querySelector('.ns-scroll-wrap');
        c.classList.remove('is-open');
        if (p) p.style.display = 'none';
        if (s) s.style.display = 'none';
      });

/* open this one if it was closed */
      if (!isCurrentlyOpen) {
        col.classList.add('is-open');
        if (progress) progress.style.display = '';
        scroll.style.display = '';
      }

});
  });

})();
</script>
 
 
 
 
 
 <script>
 
 // Sticky nav
(function () {
  const header = document.getElementById('main-header');
  const nav    = document.getElementById('primary-nav');
  if (!header || !nav) return;

const headerH = header.offsetHeight;

document.querySelectorAll('.ns-col').forEach(col => {
    const input      = col.querySelector('.ns-search-input');
    const countEl    = col.querySelector('.ns-search-results-count');
    const scrollWrap = col.querySelector('.ns-scroll-wrap');
    if (!input || !scrollWrap) return;

/* inject empty message node */
    const emptyMsg = document.createElement('div');
    emptyMsg.className = 'ns-col-empty-msg';
    emptyMsg.textContent = 'No notices found.';
    scrollWrap.appendChild(emptyMsg);

let debounceTimer = null;

input.addEventListener('input', function () {
      clearTimeout(debounceTimer);

/* debounce 220ms — mimics async/AJAX feel */
      debounceTimer = setTimeout(() => {
        const query = input.value.trim().toLowerCase();
        const items = scrollWrap.querySelectorAll('.ns-item');
        let visible = 0;

items.forEach(item => {
          const titleEl = item.querySelector('.ns-item-title');
          const tagEl   = item.querySelector('.ns-tag');
          if (!titleEl) return;

const titleText = titleEl.textContent || '';
          const tagText   = tagEl ? tagEl.textContent : '';
          const combined  = (titleText + ' ' + tagText).toLowerCase();

if (!query || combined.includes(query)) {
            item.classList.remove('ns-item--hidden');

/* highlight matched text in title */
            if (query) {
              const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
              const regex   = new RegExp(`(${escaped})`, 'gi');
              titleEl.innerHTML = titleText.replace(
                regex,
                '<mark class="ns-highlight">$1</mark>'
              );
            } else {
              titleEl.textContent = titleText; /* restore original */
            }

visible++;
          } else {
            item.classList.add('ns-item--hidden');
            titleEl.textContent = titleText; /* remove highlight */
          }
        });

/* update count badge */
        if (query) {
          countEl.textContent = visible + '/' + items.length;
        } else {
          countEl.textContent = '';
        }

/* empty state message */
        emptyMsg.classList.toggle('visible', visible === 0 && query.length > 0);

/* on mobile: make sure the column is open */
        if (window.innerWidth < 900 && query.length > 0) {
          const s = col.querySelector('.ns-scroll-wrap');
          if (s) s.style.display = '';
          col.classList.add('is-open');
        }

}, 220);
    });

/* clear on Escape */
    input.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        input.value = '';
        input.dispatchEvent(new Event('input'));
        input.blur();
      }
    });
  });

})();
</script>

<script> 
 const style = document.createElement('style');
style.id = 'debug-fix-style';
style.innerHTML = `
  /* Ensure the container maintains 3D space */
  .deg-flip {
    perspective: 1000px;
  }

.deg-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
  }

/* Fix: Manage stacking and pointer events during and after flip */
  .deg-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

.deg-face.deg-front {
    z-index: 2;
    transform: rotateY(0deg);
  }

.deg-face.deg-back {
    transform: rotateY(180deg);
    z-index: 1;
  }

/* Active State (Hover) */
  .deg-flip:hover .deg-flip-inner {
    transform: rotateY(180deg);
  }

/* CRITICAL FIX: Swap z-index and pointer-events when flipped */
  .deg-flip:hover .deg-face.deg-front {
    z-index: 1;
    pointer-events: none;
  }

.deg-flip:hover .deg-face.deg-back {
    z-index: 2;
    pointer-events: auto;
  }
`;
document.head.appendChild(style);

const data = {
  message: "Applied definitive CSS fix for flip card interaction."
};

</script>
 
 
  <?php include 'degreeSection.php'; ?>

<?php include 'youtube_videos.php'; ?>

<?php include 'footerNew.php'; ?>
</body>
</html>

İptal