index.html

---
layout: default
title: Home
---
<div class="relative h-96 overflow-hidden">
    <div class="absolute inset-0">
        <img src="/assets/images/hero-background.jpg" alt="Background"
            class="w-full h-full object-cover filter blur-sm brightness-50">
    </div>
    <div class="relative z-10 flex items-center justify-center h-full">
        <h1 class="p-3 text-4xl sm:text-5xl font-bold text-white text-center">
            Welcome to ACM's Academic Committee Website!
        </h1>
    </div>
</div>


<!-- Announcements Section -->
<section class="container mx-auto px-6 py-12">
    <h2 class="text-3xl font-bold mb-8 dark:text-white transition-colors duration-200">Announcements</h2>
    <div class="max-h-96 overflow-y-auto pr-2 space-y-6">
        {% for announcement in site.data.announcements %}
        <div
            class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border-2 border-blue-500 dark:border-blue-900 transition-colors duration-200 dark:hover:bg-gray-800 hover:bg-gray-100">
            <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">{{ announcement.title }}</h3>
            <p class="text-lg text-gray-600 dark:text-gray-100">{{ announcement.content }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-300 mt-2">{{ announcement.date | date: "%B %d, %Y" }}</p>
        </div>
        {% endfor %}
    </div>
</section>

<!-- Events Section -->
<section class="container mx-auto px-6 py-12 transition-colors duration-200">
    <h2 class="text-3xl font-bold mb-8 dark:text-white">Upcoming Events</h2>
    <div class="overflow-x-auto">
        <table id="events-table" class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md">
            <thead
                class="text-lg bg-gray-100 dark:bg-gray-900 transition-colors duration-200 text-gray-700 dark:text-gray-100">
                <tr>
                    <th class="px-6 py-3 text-left">Event Name</th>
                    <th class="px-6 py-3 text-left">Date</th>
                    <th class="px-6 py-3 text-left">Start Time</th>
                    <th class="px-6 py-3 text-left">End Time</th>
                    <th class="px-6 py-3 text-left">Location</th>
                </tr>
            </thead>
            <tbody id="events-body" class="divide-y divide-gray-200 dark:divide-gray-600">
                <!-- Events will be populated here via JavaScript -->
                <tr>
                    <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">Loading events...
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        fetchEvents();
    });

    function fetchEvents() {
        fetch('{{site.core_api_url}}/api/v1/events?host=Academic%20Committee&upcomingOnly=true')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                populateEventsTable(data);
            })
            .catch(error => {
                console.error('Error fetching events:', error);
                document.getElementById('events-body').innerHTML = `
                <tr>
                    <td colspan="5" class="px-6 py-4 text-center text-red-500">
                        Failed to load events. Please try again later.
                    </td>
                </tr>
            `;
            });
    }

    function populateEventsTable(events) {
        const eventsBody = document.getElementById('events-body');

        if (events.length === 0) {
            eventsBody.innerHTML = `
            <tr>
                <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    No upcoming events.
                </td>
            </tr>
        `;
            return;
        }

        // Sort events by date
        events.sort((a, b) => new Date(b.start_time) - new Date(a.start_time));

        // Create table rows
        eventsBody.innerHTML = events.map(event => {
            const startDate = new Date(event.start);
            const endDate = new Date(event.end);

            const formattedDate = startDate.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });

            const formattedStartTime = startDate.toLocaleTimeString('en-US', {
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
            });

            const formattedEndTime = endDate.toLocaleTimeString('en-US', {
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
            });

            return `
            <tr class="text-sm sm:text-base text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-600 bg-white dark:bg-gray-700 transition-colors duration-150">
                <td class="px-6 py-4">${event.title || 'TBD'}</td>
                <td class="px-6 py-4">${formattedDate || 'TBD'}</td>
                <td class="px-6 py-4">${formattedStartTime || 'TBD'}</td>
                <td class="px-6 py-4">${formattedEndTime || 'TBD'}</td>
                <td class="px-6 py-4">
                    ${event.locationLink
                    ? `<a href="${event.locationLink}" target="_blank" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">${event.location || 'TBD'}</a>`
                    : event.location || 'TBD'}
                </td>
            </tr>
        `;
        }).join('');
    }
</script>