📁 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:30 AM",
    title: "Flag Hoisting",
    venue: "College Campus",
    description: `
      <div class="event-highlight">
        <span class="event-role">Hoisted by</span>
        <strong>Smt. Nilima Devi</strong>
        <small>
          President, Platinum Jubilee Celebration Committee<br>
          &amp; Cabinet Minister, Government of Assam
        </small>
      </div>

<div class="event-highlight event-presence">
        <span class="event-role">In the Presence of</span>
        <strong>Dr. Kamal Kanta Borah</strong>
        <small>
          Secretary, Platinum Jubilee Celebration Committee<br>
          &amp; Principal, Mangaldai College (Autonomous)
        </small>
      </div>
    `
  
  },
  {
    time: "08:45 AM",
  title: "Tribute Ceremony",
  venue: "College Campus",
  description: `
    <div class="event-highlight">
      <span class="event-role">Tribute by</span>
      <strong>Shri Gurujyoti Das</strong>
      <small>
        Working President, Platinum Jubilee Celebration Committee<br>
        &amp; Chairman, Assam Fisheries Development Corporation
      </small>
    </div>
  `
  },
  {
    time: "10:30 AM",
  title: "Cultural Procession",
  venue: "College Campus",
  description: `
    <div class="event-highlight">
      <span class="event-role">Inaugurated by</span>
      <strong>Shri Dilip Saikia</strong>
      <small>
        Chief Advisor, Platinum Jubilee Celebration Committee<br>
        &amp; Hon'ble Member of Parliament, Darrang–Udalguri Lok Sabha Constituency
      </small>
    </div>
  `
  },
  {
     time: "01:00 PM",
  title: "Lunch",
  venue: "College Campus",
  description: `
    <div class="event-highlight">
      <span class="event-role">Refreshments</span>
      <strong>Lunch</strong>
      <small>
        for invited guests, dignitaries, alumni, faculty members,
        students and participants.
      </small>
    </div>
  `
  },

{
    time: "02:00 PM",
  title: "Speech Programme",
  venue: "Main Auditorium",
  description: `
    <div class="event-highlight">
      <span class="event-role">Chief Guest</span>
      <strong>Dr. Ranoj Pegu</strong>
      <small>
        Hon'ble Minister of Education, Government of Assam
      </small>
    </div>

<div class="event-highlight">
      <span class="event-role">Topic</span>
      <strong class="topic-title">
        "The History, Heritage and Evolution of Mangaldai College over 75 Years"
      </strong>
    </div>

<div class="event-highlight event-presence">
      <span class="event-role">Speaker</span>
      <strong>Dr. Kanak Chandra Saharia</strong>
      <small>
        Professor, Department of Assamese, Gauhati University<br>
        &amp; Former Student, Mangaldai College (Autonomous)
      </small>
    </div>
  `
  },
  {
    time: "05:00 PM",
  title: "Ceremonial Lamp Lighting",
  venue: "Main Auditorium",
  description: `
    <div class="event-highlight">
      <span class="event-role"></span>
      <strong></strong>
      <small>
        Traditional ceremonial lamp lighting marking the celebration
        of the Platinum Jubilee.
      </small>
    </div>
  `
  }
];
/* ---------- Platinum Jubilee Celebration Committee ----------
   `image` should point to a real photo under images/member/.
   If an image is missing or fails to load, the card automatically
   shows a neat gold-on-navy initials avatar instead of a broken
   image icon. */
const people = [
  {
    name: "Shri Dilip Saikia",
    role: "Chief Advisor",
    designation: "Hon'ble Member of Parliament, Darrang–Udalguri Lok Sabha Constituency",
    image: "images/member/dilp.jpg"
  },
  {
    name: "Smt. Nilima Devi",
    role: "President",
    designation: "Cabinet Minister, Animal Husbandry & Veterinary and Fisheries Department, Government of Assam",
    image: "images/member/nilima.jpg"
  },
  {
    name: "Dr. Paramananda Rajbongshi",
    role: "Working President",
    designation: "Hon'ble MLA, Sipajhar Constituency",
    image: "images/member/parama.jpg"
  },
  {
    name: "Shri Gurujyoti Das",
    role: "Working President",
    designation: "Chairman, Assam Fisheries Development Corporation",
    image: "images/member/gorujyoti.jpg"
  },
  {
    name: "Dr. Kamala Kanta Bora",
    role: "Secretary",
    designation: "Principal, Mangaldai College (Autonomous)",
    image: "images/member/princyNew.webp"
  },
  {
    name: "Dr. Santosh Borkakoti",
    role: "Joint Secretary",
    designation: "Member Secretary, Academic Council, Mangaldai College (Autonomous)",
    image: "images/member/sontosh borkotoki.webp"
  },
  {
    name: "Smt. Nirmali Devi",
    role: "Member",
    designation: "Chairperson, Mangaldai Municipal Board",
    image: "images/member/nirmali.png"
  }
];
/* ---------- 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 ----------
   The gallery is intentionally empty here. Photographs are uploaded one by
   one from admin.html and stored under the GALLERY_STORAGE_KEY below.
   Until images are uploaded, the site shows a "Gallery Coming Soon" message.
   See admin.html / admin.js for the upload page. */
const GALLERY_STORAGE_KEY = "mangaldaiGalleryImages";

const gallery = loadGalleryFromStorage();

/* ---------- 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 => {
  const initials = person.name
    .replace(/^(Shri|Smt\.|Dr\.|Prof\.)\s+/i, "")
    .trim()
    .split(/\s+/)
    .map(n => n[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();

return `
  <article class="person-card reveal">
    <div class="person-photo">
      <img
        src="${person.image}"
        alt="${person.name}"
        loading="lazy"
        data-fallback="${initials}"
      >
    </div>

<div class="person-info">
      <p class="person-role">${person.role}</p>
      <h3>${person.name}</h3>
      <p class="person-designation">${person.designation}</p>
    </div>
  </article>
`;
}).join("");

/* Graceful fallback: if a photo is missing/broken, show initials
   on a navy-gold avatar instead of a broken image icon. */
peopleGrid.querySelectorAll(".person-photo img").forEach(img => {
  img.addEventListener("error", () => {
    const wrap = img.parentElement;
    wrap.classList.add("photo-fallback");
    wrap.innerHTML = `<span>${img.dataset.fallback || "?"}</span>`;
  }, { once: true });
});

/* ---------- 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 galleryFilters = document.getElementById("galleryFilters");
const galleryGrid = document.getElementById("galleryGrid");
const galleryEmpty = document.getElementById("galleryEmpty");
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 ? " · " + item.category : ""}</div>
    </article>
  `).join("");

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

function initGallery() {
  if (!gallery.length) {
    galleryFilters.style.display = "none";
    galleryGrid.style.display = "none";
    galleryEmpty.classList.add("show");
    return;
  }

galleryFilters.style.display = "";
  galleryGrid.style.display = "";
  galleryEmpty.classList.remove("show");

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

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));
  });
}
initGallery();

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