📁 File Manager

Dosya Düzenle: script.js

/* ============================================================
   MANGALDAI COLLEGE PLATINUM JUBILEE 2026
   Edit the data arrays below to update the webpage.
   ============================================================ */

const EVENT_DATE = "2026-09-20T09:00:00+05:30";

/* ---------- Programme ---------- */
const events = [
  {
    time: "08:00 AM",
    title: "Registration & Reception",
    venue: "College Campus",
    description: "Registration of invited guests, alumni, students and participants."
  },
  {
    time: "09:00 AM",
    title: "Inauguration Ceremony",
    venue: "Main Auditorium",
    description: "Formal inauguration of the Platinum Jubilee celebration."
  },
  {
    time: "10:00 AM",
    title: "Felicitation & Commemoration",
    venue: "Main Auditorium",
    description: "Honouring distinguished members and celebrating milestones of the institution."
  },
  {
    time: "11:30 AM",
    title: "Platinum Jubilee Address",
    venue: "Main Auditorium",
    description: "Special address by the invited dignitaries and institutional leadership."
  },
  {
    time: "01:00 PM",
    title: "Lunch & Interaction",
    venue: "College Campus",
    description: "Community lunch and interaction with guests, alumni, faculty and students."
  },
  {
    time: "03:00 PM",
    title: "Cultural Programme",
    venue: "Open Stage",
    description: "A vibrant cultural presentation celebrating the heritage and spirit of Assam."
  },
  {
    time: "05:00 PM",
    title: "Valedictory Ceremony",
    venue: "Main Auditorium",
    description: "Closing ceremony and expression of gratitude to all participants."
  }
];

/* ---------- Members / Guests ----------
   Replace image URLs, names and designations with official details. */
const people = [
  {
    name: "Chief Guest",
    role: "Distinguished Guest",
    image: "",
    initials: "CG"
  },
  {
    name: "President",
    role: "Platinum Jubilee Celebration",
    image: "",
    initials: "P"
  },
  {
    name: "Principal",
    role: "Mangaldai College (Autonomous)",
    image: "",
    initials: "PR"
  },
  {
    name: "Jubilee Secretary",
    role: "Organising Committee",
    image: "",
    initials: "JS"
  },
  {
    name: "Coordinator",
    role: "Platinum Jubilee Committee",
    image: "",
    initials: "C"
  },
  {
    name: "Alumni Representative",
    role: "Alumni Coordination",
    image: "",
    initials: "AR"
  }
];

/* ---------- Historical milestones ---------- */
const milestones = [
  { year: "1951", title: "The Beginning", text: "The journey of Mangaldai College begins." },
  { year: "1975", title: "Growing Horizons", text: "A period of expansion, learning and community development." },
  { year: "1990", title: "New Milestones", text: "Academic and institutional growth continues." },
  { year: "2000", title: "A New Century", text: "The institution enters a new era with renewed aspirations." },
  { year: "2010", title: "Moving Forward", text: "New opportunities, programmes and achievements shape the journey." },
  { year: "2020", title: "Resilience", text: "The college community continues to learn and adapt through change." },
  { year: "2026", title: "Platinum Jubilee", text: "75 glorious years of education, service and legacy." }
];

/* ---------- Gallery ----------
   Replace these sample URLs with your own image paths, e.g.
   "images/gallery/preparation-01.webp" */
const gallery = [
  { image: "https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=900&q=85", title: "Campus Memories", category: "College" },
  { image: "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=900&q=85", title: "Academic Journey", category: "College" },
  { image: "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=900&q=85", title: "Graduation Memories", category: "Alumni" },
  { image: "https://images.unsplash.com/photo-1519452575417-564c1401ecc0?auto=format&fit=crop&w=900&q=85", title: "Students & Learning", category: "Events" },
  { image: "https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=900&q=85", title: "A Place to Learn", category: "College" },
  { image: "https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&w=900&q=85", title: "Celebration", category: "Events" },
  { image: "https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=900&q=85", title: "Young Minds", category: "Students" },
  { image: "https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=900&q=85", title: "Community", category: "Alumni" },
  { image: "https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=900&q=85", title: "Learning Together", category: "Students" },
  { image: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=900&q=85", title: "Memorable Moments", category: "Events" }
];

/* ---------- Render programme ---------- */
const eventTimeline = document.getElementById("eventTimeline");
eventTimeline.innerHTML = events.map((event, index) => `
  <article class="event-item reveal" style="transition-delay:${index * 70}ms">
    <span class="event-dot"></span>
    <div class="event-time">${event.time}</div>
    <h3 class="event-title">${event.title}</h3>
    <div class="event-meta"><i class="fa-solid fa-location-dot"></i> ${event.venue}</div>
    <p class="event-desc">${event.description}</p>
  </article>
`).join("");

/* ---------- Render people ---------- */
const peopleGrid = document.getElementById("peopleGrid");
peopleGrid.innerHTML = people.map(person => `
  <article class="person-card reveal">
    <div class="person-photo">
      ${
        person.image
        ? `<img src="${person.image}" alt="${person.name}" loading="lazy">`
        : `<div class="person-placeholder">${person.initials}</div>`
      }
    </div>
    <div class="person-info">
      <h3>${person.name}</h3>
      <p>${person.role}</p>
    </div>
  </article>
`).join("");

/* ---------- Render history ---------- */
document.getElementById("historyTrack").innerHTML = milestones.map(item => `
  <article class="history-card reveal">
    <div class="year">${item.year}</div>
    <h3>${item.title}</h3>
    <p>${item.text}</p>
  </article>
`).join("");

/* ---------- Gallery filters ---------- */
const categories = ["All", ...new Set(gallery.map(item => item.category))];
const galleryFilters = document.getElementById("galleryFilters");
galleryFilters.innerHTML = categories.map((category, index) => `
  <button class="filter-btn ${index === 0 ? "active" : ""}" data-category="${category}">${category}</button>
`).join("");

const galleryGrid = document.getElementById("galleryGrid");
let currentGallery = gallery;

function renderGallery(items) {
  currentGallery = items;
  galleryGrid.innerHTML = items.map((item, index) => `
    <article class="gallery-item" data-index="${index}">
      <img src="${item.image}" alt="${item.title}" loading="lazy">
      <div class="gallery-caption">${item.title} · ${item.category}</div>
    </article>
  `).join("");

document.querySelectorAll(".gallery-item").forEach(item => {
    item.addEventListener("click", () => openLightbox(Number(item.dataset.index)));
  });
}
renderGallery(gallery);

galleryFilters.addEventListener("click", e => {
  const button = e.target.closest(".filter-btn");
  if (!button) return;

document.querySelectorAll(".filter-btn").forEach(btn => btn.classList.remove("active"));
  button.classList.add("active");

const category = button.dataset.category;
  renderGallery(category === "All" ? gallery : gallery.filter(item => item.category === category));
});

/* ---------- Lightbox ---------- */
const lightbox = document.getElementById("lightbox");
const lightboxImage = document.getElementById("lightboxImage");
let lightboxIndex = 0;

/* ---------- Countdown ---------- */
const countdownElements = {
  days: document.getElementById("days"),
  hours: document.getElementById("hours"),
  minutes: document.getElementById("minutes"),
  seconds: document.getElementById("seconds")
};

function updateCountdown() {
  const distance = new Date(EVENT_DATE).getTime() - Date.now();

if (distance <= 0) {
    document.querySelector(".countdown-wrap > p").textContent = "TODAY WE CELEBRATE 75 GLORIOUS YEARS";
    Object.values(countdownElements).forEach(el => el.textContent = "00");
    return;
  }

countdownElements.days.textContent = String(Math.floor(distance / 86400000)).padStart(2, "0");
  countdownElements.hours.textContent = String(Math.floor(distance / 3600000) % 24).padStart(2, "0");
  countdownElements.minutes.textContent = String(Math.floor(distance / 60000) % 60).padStart(2, "0");
  countdownElements.seconds.textContent = String(Math.floor(distance / 1000) % 60).padStart(2, "0");
}
updateCountdown();
setInterval(updateCountdown, 1000);

/* ---------- Header / mobile menu ---------- */
const siteHeader = document.getElementById("siteHeader");
const menuToggle = document.getElementById("menuToggle");
const mainNav = document.getElementById("mainNav");

/* ---------- Scroll reveal ---------- */
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.12 });

document.querySelectorAll(".reveal").forEach(el => observer.observe(el));

/* ---------- Stat counters ---------- */
const statObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) return;
    const element = entry.target;
    const target = Number(element.dataset.count);
    const duration = 1300;
    const start = performance.now();

function tick(now) {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      element.textContent = Math.floor(target * eased).toLocaleString("en-IN");
      if (progress < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
    statObserver.unobserve(element);
  });
}, { threshold: .6 });

document.querySelectorAll("[data-count]").forEach(el => statObserver.observe(el));

/* ---------- Preloader ---------- */
window.addEventListener("load", () => {
  setTimeout(() => document.getElementById("preloader").classList.add("hide"), 450);
});

İptal