Skip to content

Commit 65c6135

Browse files
feat (update): departments page data and styling (#23)
1 parent 2f6d498 commit 65c6135

8 files changed

Lines changed: 352 additions & 131 deletions

File tree

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
Pawsitive 2025-26 _ Dog Population Census - Sheet1.csv
22
/Pawsitive 2025-26 _ Dog Population Census
3-
Pawsitive 2025-26 _ Dog Population Census - Current Census.csv
3+
Pawsitive 2025-26 _ Dog Population Census - Current Census.csv
4+
/Department Write-Ups

index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@
6666
</div>
6767
</div>
6868

69+
<!-- Dept entry detail modal -->
70+
<div class="dept-entry-modal-bg" id="deptEntryModal" onclick="closeDeptEntryModal(event)">
71+
<div class="dept-entry-modal-box" onclick="event.stopPropagation()">
72+
<button class="dept-entry-modal-close" onclick="closeDeptEntryModal({closeForced:true})">&#x2715;</button>
73+
<div class="dept-entry-modal-content" id="deptEntryModalContent"></div>
74+
</div>
75+
</div>
76+
6977
<!-- JS modules -->
7078
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
7179
<script src="js/gallery.js"></script>

js/app.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,9 +258,31 @@ document.addEventListener('keydown', e => {
258258
if (e.key === 'Escape') {
259259
const links = document.getElementById('nav-links');
260260
if (links && links.classList.contains('open')) closeNav();
261+
const entryModal = document.getElementById('deptEntryModal');
262+
if (entryModal && entryModal.classList.contains('open')) closeDeptEntryModal({ closeForced: true });
261263
}
262264
});
263265

266+
/* Dept entry detail modal */
267+
function openEntryModal(card) {
268+
const tpl = card.querySelector('template.dept-entry-full');
269+
if (!tpl) return;
270+
const content = document.getElementById('deptEntryModalContent');
271+
content.innerHTML = '';
272+
content.appendChild(tpl.content.cloneNode(true));
273+
document.getElementById('deptEntryModal').classList.add('open');
274+
lockScroll();
275+
}
276+
277+
function closeDeptEntryModal(e) {
278+
const modal = document.getElementById('deptEntryModal');
279+
if (!modal) return;
280+
if (e && (e.target === modal || e.closeForced)) {
281+
modal.classList.remove('open');
282+
unlockScroll();
283+
}
284+
}
285+
264286
function toggleTheme() {
265287
const html = document.documentElement;
266288
html.dataset.theme = html.dataset.theme === 'dark' ? 'light' : 'dark';

js/gallery.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -371,8 +371,10 @@ function renderMediaGrid() {
371371

372372
/* ── Image lightbox ── */
373373
let _lbIndex = 0;
374+
let _lbImages = null; // null = gallery mode; array = dept entry mode
374375

375376
function openLightbox(i) {
377+
_lbImages = null;
376378
_lbIndex = i;
377379
const lb = document.getElementById('imgLightbox');
378380
document.getElementById('lbImg').src = _imgUrl(mediaImages[_lbIndex]);
@@ -381,18 +383,33 @@ function openLightbox(i) {
381383
lockScroll();
382384
}
383385

386+
function openDeptLightbox(imgs, i) {
387+
_lbImages = imgs;
388+
_lbIndex = i;
389+
const lb = document.getElementById('imgLightbox');
390+
document.getElementById('lbImg').src = imgs[i];
391+
document.getElementById('lbCounter').textContent = imgs.length > 1 ? (i + 1) + ' / ' + imgs.length : '';
392+
lb.classList.add('open');
393+
lockScroll();
394+
}
395+
384396
function closeLightbox(e) {
385397
const lb = document.getElementById('imgLightbox');
386-
if (e.target === lb || e.closeForced) { lb.classList.remove('open'); unlockScroll(); }
398+
if (e.target === lb || e.closeForced) {
399+
lb.classList.remove('open');
400+
_lbImages = null;
401+
unlockScroll();
402+
}
387403
}
388404

389405
function lightboxNav(dir) {
390-
_lbIndex = (_lbIndex + dir + mediaImages.length) % mediaImages.length;
406+
const pool = _lbImages || mediaImages;
407+
_lbIndex = (_lbIndex + dir + pool.length) % pool.length;
391408
const img = document.getElementById('lbImg');
392409
img.style.opacity = '0';
393410
setTimeout(() => {
394-
img.src = _imgUrl(mediaImages[_lbIndex]);
395-
document.getElementById('lbCounter').textContent = (_lbIndex + 1) + ' / ' + mediaImages.length;
411+
img.src = _lbImages ? _lbImages[_lbIndex] : _imgUrl(mediaImages[_lbIndex]);
412+
document.getElementById('lbCounter').textContent = (_lbIndex + 1) + ' / ' + pool.length;
396413
img.style.opacity = '1';
397414
}, 150);
398415
}

pages/dept-events.html

Lines changed: 80 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -26,76 +26,101 @@ <h2>responsibilities</h2>
2626
</div>
2727
<div class="dept-detail-section">
2828
<h2>past highlights</h2>
29-
<div class="dept-highlights">
30-
<div class="dept-highlight-card">
31-
<span class="dept-highlight-icon">🐶</span>
32-
<div>
33-
<strong>Adoption Drives</strong>
34-
<p>Coordinating with shelters to host on-campus adoption events connecting students with dogs in need of homes.</p>
29+
<div class="dept-entries">
30+
31+
<div class="dept-entry-card" onclick="openEntryModal(this)">
32+
<div class="dept-entry-thumb">
33+
<img src="Department%20Write-Ups/images/image17.jpg" alt="Pupcert">
3534
</div>
36-
</div>
37-
<div class="dept-highlight-card">
38-
<span class="dept-highlight-icon">🎨</span>
39-
<div>
40-
<strong>Awareness Campaigns</strong>
41-
<p>Themed campaigns around World Animal Day, anti-cruelty awareness, and responsible pet ownership.</p>
35+
<div class="dept-entry-body">
36+
<h3>Pupcert &amp; Pupcert Week</h3>
37+
<p class="dept-entry-preview">Pupcert is Pawsitive's annual flagship open-floor concert, held in collaboration with Vistaar, the Music Society. The most recent edition, Pupcert 4.0, helped raise over ₹51,000 in support of animal welfare initiatives.</p>
38+
<button class="dept-entry-btn" onclick="event.stopPropagation();openEntryModal(this.closest('.dept-entry-card'))">view more →</button>
4239
</div>
40+
<template class="dept-entry-full">
41+
<h3>Pupcert &amp; Pupcert Week</h3>
42+
<p>Pupcert, a portmanteau of the words <em>"puppy"</em> and <em>"concert,"</em> is Pawsitive's annual flagship open-floor concert held in collaboration with Vistaar, the Music Society. This ticketed event takes place at Dr. Reddy's Auditorium and showcases musically talented individuals and bands from the Ashokan student community.</p>
43+
<p>The most recent edition, Pupcert 4.0, featured performances by bands such as <em>Dysfunction, Half ka Double,</em> and <em>Three by Fork</em>, helping Pawsitive raise over ₹51,000 in support of its animal welfare initiatives.</p>
44+
<p>Each edition of Pupcert is preceded by Pupcert Week, a series of collaborations between Pawsitive and other Ashokan clubs, collectives, ministries, and societies. These collaborations — ranging from social media campaigns to interactive campus activities — help further the fundraising objectives of the event while enabling an on-ground club like Pawsitive to engage more widely with the student body.</p>
45+
<p>During Pupcert Week 4.0, Pawsitive collaborated with student-led organizations including Farm Fresh, the vegetable cooking club, and Mad Batter, the baking club, to serve freshly prepared frozen yoghurt, pup-cakes, and cake-pawps. The week also included a screening of Zoya Akhtar's <em>Dil Dhadakne Do</em> (2015) organized with Khayal, the filmmaking club. Rotaract Club of Ashoka University Youth (RC-AUY) contributed by providing popcorn inspired by the campus dogs.</p>
46+
<p>The evening of the main event was further enhanced by collaborations with creative clubs across campus: Kaagazi, the origami club, crafted paper canines to decorate the stage, while Caperture, the photography club, set up a dog-themed photobooth for attendees.</p>
47+
<div class="dept-event-photos">
48+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image17.jpg" alt="Pupcert" onclick="openDeptLightbox(['Department%20Write-Ups/images/image17.jpg','Department%20Write-Ups/images/image21.jpg','Department%20Write-Ups/images/image4.jpg','Department%20Write-Ups/images/image18.jpg'],0)">
49+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image21.jpg" alt="Pupcert" onclick="openDeptLightbox(['Department%20Write-Ups/images/image17.jpg','Department%20Write-Ups/images/image21.jpg','Department%20Write-Ups/images/image4.jpg','Department%20Write-Ups/images/image18.jpg'],1)">
50+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image4.jpg" alt="Pupcert" onclick="openDeptLightbox(['Department%20Write-Ups/images/image17.jpg','Department%20Write-Ups/images/image21.jpg','Department%20Write-Ups/images/image4.jpg','Department%20Write-Ups/images/image18.jpg'],2)">
51+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image18.jpg" alt="Pupcert" onclick="openDeptLightbox(['Department%20Write-Ups/images/image17.jpg','Department%20Write-Ups/images/image21.jpg','Department%20Write-Ups/images/image4.jpg','Department%20Write-Ups/images/image18.jpg'],3)">
52+
</div>
53+
</template>
4354
</div>
44-
<div class="dept-highlight-card">
45-
<span class="dept-highlight-icon">🤝</span>
46-
<div>
47-
<strong>Inter-Club Collaborations</strong>
48-
<p>Joint events with cultural clubs, sustainability groups, and student government to broaden reach.</p>
55+
56+
<div class="dept-entry-card" onclick="openEntryModal(this)">
57+
<div class="dept-entry-thumb">
58+
<img src="Department%20Write-Ups/images/image13.png" alt="Open Floof">
4959
</div>
50-
</div>
51-
</div>
52-
</div>
53-
<div class="dept-detail-section">
54-
<h2>who thrives here</h2>
55-
<p>You love organising things. You think in checklists but act with creativity. You're comfortable taking ownership of a project from zero and shepherding it through to completion. You don't mind the chaos that comes with event day — in fact, you enjoy it.</p>
56-
</div>
57-
<div class="dept-detail-section">
58-
<h2>our events & drives</h2>
59-
<p style="font-size:0.97rem;color:var(--ink-soft);line-height:1.72;margin-bottom:1rem;">Click on any event to expand and learn more about it.</p>
60-
<div class="event-cards-grid">
61-
<div class="event-acc-card open" onclick="toggleEventCard(this)" role="button" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' ')toggleEventCard(this)">
62-
<div class="event-acc-top">
63-
<div class="event-acc-img">🐶</div>
64-
<div class="event-acc-title">Dog Adoption Drive</div>
65-
<span class="event-acc-arrow"></span>
60+
<div class="dept-entry-body">
61+
<h3>Open Floof</h3>
62+
<p class="dept-entry-preview">Open Floof is Pawsitive's secondary annual flagship event organized in collaboration with Abhinaya, the Dance Society. It brings together dancers, club leaders, sports teams, and groups of friends who perform purely for the joy of it.</p>
63+
<button class="dept-entry-btn" onclick="event.stopPropagation();openEntryModal(this.closest('.dept-entry-card'))">view more →</button>
6664
</div>
67-
<div class="event-acc-body">
68-
<div class="event-acc-body-inner">
69-
<p>A curated adoption event held in collaboration with city shelters, connecting campus students with dogs looking for permanent homes. We handle everything from shelter coordination and transport to on-the-day documentation and adoption paperwork support.</p>
65+
<template class="dept-entry-full">
66+
<h3>Open Floof</h3>
67+
<p>Open Floof, a playful take on the phrase <em>"open floor,"</em> is Pawsitive's secondary annual flagship event organized in collaboration with Abhinaya, the Dance Society.</p>
68+
<p>The event brings together not only experienced dancers but also leadership teams from Ashokan clubs and societies, sports teams, and groups of friends who participate purely for the joy of performing. While Open Floof is not a major crowdfunding initiative, it encourages both participants and spectators to contribute small donations toward Pawsitive's animal welfare efforts.</p>
69+
<div class="dept-event-photos">
70+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image13.png" alt="Open Floof" onclick="openDeptLightbox(['Department%20Write-Ups/images/image13.png'],0)">
7071
</div>
71-
</div>
72+
</template>
7273
</div>
73-
<div class="event-acc-card open" onclick="toggleEventCard(this)" role="button" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' ')toggleEventCard(this)">
74-
<div class="event-acc-top">
75-
<div class="event-acc-img">🌍</div>
76-
<div class="event-acc-title">World Animal Day Campaign</div>
77-
<span class="event-acc-arrow"></span>
74+
75+
<div class="dept-entry-card" onclick="openEntryModal(this)">
76+
<div class="dept-entry-thumb">
77+
<img src="Department%20Write-Ups/images/image10.png" alt="Meet 'N Treat">
7878
</div>
79-
<div class="event-acc-body">
80-
<div class="event-acc-body-inner">
81-
<p>An on-campus awareness campaign held around World Animal Day featuring stalls, interactive activities, artwork, and adoption spotlights — coordinated with external NGO partners and fellow student clubs to maximise reach and impact.</p>
82-
</div>
79+
<div class="dept-entry-body">
80+
<h3>Meet 'N Treat</h3>
81+
<p class="dept-entry-preview">Held at the start of every academic year, Meet 'N Treat lets newly admitted first-year students interact with Ashoka's canine residents under trained supervision. For many students, it is their first engagement with the club.</p>
82+
<button class="dept-entry-btn" onclick="event.stopPropagation();openEntryModal(this.closest('.dept-entry-card'))">view more →</button>
8383
</div>
84+
<template class="dept-entry-full">
85+
<h3>Meet 'N Treat</h3>
86+
<p>Held at the beginning of every academic year, Meet 'N Treat offers newly admitted first-year students an opportunity to interact with Ashoka's canine residents under the supervision of trained Pawsitive members.</p>
87+
<p>The event introduces students to the dogs who inhabit the campus — their territories, personalities, and the ways in which Pawsitive cares for them. For many students, this serves as their first engagement with the club; those who express interest during Meet 'N Treat often go on to become active members of Pawsitive.</p>
88+
<div class="dept-event-photos">
89+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image10.png" alt="Meet 'N Treat" onclick="openDeptLightbox(['Department%20Write-Ups/images/image10.png','Department%20Write-Ups/images/image15.png','Department%20Write-Ups/images/image7.png','Department%20Write-Ups/images/image6.png'],0)">
90+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image15.png" alt="Meet 'N Treat" onclick="openDeptLightbox(['Department%20Write-Ups/images/image10.png','Department%20Write-Ups/images/image15.png','Department%20Write-Ups/images/image7.png','Department%20Write-Ups/images/image6.png'],1)">
91+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image7.png" alt="Meet 'N Treat" onclick="openDeptLightbox(['Department%20Write-Ups/images/image10.png','Department%20Write-Ups/images/image15.png','Department%20Write-Ups/images/image7.png','Department%20Write-Ups/images/image6.png'],2)">
92+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image6.png" alt="Meet 'N Treat" onclick="openDeptLightbox(['Department%20Write-Ups/images/image10.png','Department%20Write-Ups/images/image15.png','Department%20Write-Ups/images/image7.png','Department%20Write-Ups/images/image6.png'],3)">
93+
</div>
94+
</template>
8495
</div>
85-
<div class="event-acc-card open" onclick="toggleEventCard(this)" role="button" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' ')toggleEventCard(this)">
86-
<div class="event-acc-top">
87-
<div class="event-acc-img">📚</div>
88-
<div class="event-acc-title">Awareness & Education Workshops</div>
89-
<span class="event-acc-arrow"></span>
96+
97+
<div class="dept-entry-card" onclick="openEntryModal(this)">
98+
<div class="dept-entry-thumb">
99+
<img src="Department%20Write-Ups/images/image3.png" alt="Fests and Haats">
90100
</div>
91-
<div class="event-acc-body">
92-
<div class="event-acc-body-inner">
93-
<p>Workshops and panel discussions with veterinarians, animal welfare advocates, and shelter workers — bringing expert perspectives on responsible pet ownership, campus animal welfare, and anti-cruelty law directly to students.</p>
94-
</div>
101+
<div class="dept-entry-body">
102+
<h3>Collaborations with Annual Fests and Haats</h3>
103+
<p class="dept-entry-preview">Pawsitive sets up stalls at other student organizations' flagship events to raise funds through dog-themed souvenirs. Recent examples include Jazbaa's Diwali Haat 2025, BudgetCon 2025, and Mad Batter's Valentine's Wonderland 2026.</p>
104+
<button class="dept-entry-btn" onclick="event.stopPropagation();openEntryModal(this.closest('.dept-entry-card'))">view more →</button>
95105
</div>
106+
<template class="dept-entry-full">
107+
<h3>Collaborations with Annual Fests and Haats</h3>
108+
<p>Pawsitive also participates in other student organizations' flagship events to raise funds on a smaller scale. At these events, the club typically sets up stalls selling dog-themed souvenirs such as stickers and postcards.</p>
109+
<p>Recent examples include Jazbaa, the Cultural Ministry's <em>Diwali Haat 2025</em>, and the Anime Club's annual haat, BudgetCon 2025. Pawsitive often tailors its stall to match the theme of the event; for instance, the club sold popcorn at Mad Batter's Valentine's Wonderland 2026.</p>
110+
<div class="dept-event-photos">
111+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image3.png" alt="Fests and Haats" onclick="openDeptLightbox(['Department%20Write-Ups/images/image3.png','Department%20Write-Ups/images/image16.png','Department%20Write-Ups/images/image20.png'],0)">
112+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image16.png" alt="Fests and Haats" onclick="openDeptLightbox(['Department%20Write-Ups/images/image3.png','Department%20Write-Ups/images/image16.png','Department%20Write-Ups/images/image20.png'],1)">
113+
<img class="dept-photo-img" src="Department%20Write-Ups/images/image20.png" alt="Fests and Haats" onclick="openDeptLightbox(['Department%20Write-Ups/images/image3.png','Department%20Write-Ups/images/image16.png','Department%20Write-Ups/images/image20.png'],2)">
114+
</div>
115+
</template>
96116
</div>
117+
97118
</div>
98119
</div>
120+
<div class="dept-detail-section">
121+
<h2>who thrives here</h2>
122+
<p>You love organising things. You think in checklists but act with creativity. You're comfortable taking ownership of a project from zero and shepherding it through to completion. You don't mind the chaos that comes with event day — in fact, you enjoy it.</p>
123+
</div>
99124
</div>
100125
<footer>made with <span class="heart">❤️</span> by pawsitive · ashoka university · 🐾</footer>
101126
</div>

0 commit comments

Comments
 (0)