📁 File Manager

Dosya Düzenle: college_events.php

<?php
/**
 * INCLUDE: College Events Carousel Section
 * Usage: <?php include 'includes/college_events.php'; ?>
 * Requires: $con (MySQLi connection from connect.php)
 */
?>

<section id="college-events" aria-label="College Events">

<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'];
          $day   = date("d",   strtotime($date));
          $month = strtolower(date("M", strtotime($date)));
          $year  = date("Y",   strtotime($date));
      ?>
      <article class="ce-card" tabindex="0">
        <div class="ce-card-img-wrap">
          <img
            src="../<?php echo htmlspecialchars($img); ?>"
            alt="<?php echo htmlspecialchars($title); ?>"
            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 htmlspecialchars($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 htmlspecialchars($title); ?></h3>
          <p class="ce-card-text"><?php echo htmlspecialchars($des); ?></p>
          <div class="ce-card-footer">
            <span class="ce-card-meta"><i class="bi bi-geo-alt-fill"></i> <?php echo htmlspecialchars($venue); ?></span>
            <a href="Eventbyid.php?id=<?php echo (int)$id1; ?>" class="ce-card-link">
              Know More <i class="bi bi-arrow-right"></i>
            </a>
          </div>
        </div>
      </article>
      <?php endwhile; ?>

</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>

<script>
(function () {
  const track    = document.getElementById('ceTrack');
  const outer    = document.getElementById('ceOuter');
  const prevBtn  = document.getElementById('cePrev');
  const nextBtn  = document.getElementById('ceNext');
  const pauseBtn = document.getElementById('cePause');
  const pauseIcon= document.getElementById('cePauseIcon');
  const dotsWrap = document.getElementById('ceDots');

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;
  }

function getCardWidth() {
    const card = cards[0];
    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();
  });

outer.addEventListener('mouseenter', stopAuto);
  outer.addEventListener('mouseleave', () => { if (!paused) startAuto(); });

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

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

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

İptal