calendar added

index.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="style/ahmet.css">
     <link rel="stylesheet" href="style/comments.css">
     <link rel="stylesheet" href="style/yuukabot.css">
+    <link rel="stylesheet" href="style/calendar.css">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <title>Esef</title>
   </head>
@@ -19,6 +20,7 @@
       <button id="gallery-btn">Gallery</button>
       <button id="ahmet-btn">Ahmet Museum</button>
       <button id="yuukabot-btn">Yuuka Bot</button>
+      <button id="calendar-btn">Calendar</button>
     </div>
 
     <section id="about" class="tab-content">
@@ -171,6 +173,23 @@
       </div>
     </section>
 
+    <section id="calendar" class="tab-content">
+      <div class="cal-wrap">
+        <div class="cal-main">
+          <div class="cal-nav">
+            <button id="cal-prev">&lt;</button>
+            <h2 id="cal-nav-title">Loading...</h2>
+            <button id="cal-next">&gt;</button>
+          </div>
+          <div class="cal-grid" id="cal-grid"></div>
+        </div>
+        <div class="cal-sidebar">
+          <h3>Upcoming</h3>
+          <div id="cal-sidebar-list"><p class="cal-side-empty">Loading...</p></div>
+        </div>
+      </div>
+    </section>
+
     <script src="js/gallery.js" defer></script>
     <script src="js/tabs.js" defer></script>
 
@@ -179,6 +198,7 @@
     <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore-compat.js"></script>
     <script src="js/comments.js"></script>
     <script src="js/yuukabot.js"></script>
+    <script src="js/calendar.js"></script>
 
     <!-- Lightbox -->
     <div id="lightbox" class="lightbox">

js/calendar.js

@@ -0,0 +1,131 @@
+// Calendar tab — monthly grid + sidebar + day hover popups
+const CAL_FB_CONFIG = {
+    apiKey: "AIzaSyDuSjEGEKx5FnWYnQq8f_owbpYRBRrl5x0",
+    authDomain: "esef-514bf.firebaseapp.com",
+    projectId: "esef-514bf",
+    storageBucket: "esef-514bf.firebasestorage.app",
+    messagingSenderId: "353969651290",
+    appId: "1:353969651290:web:41e3aaf8e54c743702a263"
+};
+
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = ["January","February","March","April","May","June",
+                "July","August","September","October","November","December"];
+
+document.addEventListener("DOMContentLoaded", () => {
+    const tab = document.getElementById("calendar");
+    if (!tab) return;
+
+    if (!firebase.apps.length) firebase.initializeApp(CAL_FB_CONFIG);
+    const db = firebase.firestore();
+
+    let allEvents = [];
+    let viewDate = new Date();
+
+    const gridEl = document.getElementById("cal-grid");
+    const navEl = document.getElementById("cal-nav-title");
+    const sidebarEl = document.getElementById("cal-sidebar-list");
+
+    db.collection("calendar_events").onSnapshot(snap => {
+        allEvents = [];
+        snap.forEach(doc => {
+            const d = doc.data();
+            allEvents.push({
+                id: doc.id,
+                title: d.title || "",
+                date: d.date || "",
+                time: d.time || "",
+                description: d.description || "",
+                createdBy: d.createdBy || ""
+            });
+        });
+        allEvents.sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time));
+        render();
+    }, () => {
+        if (gridEl) gridEl.innerHTML = '<p class="cal-side-empty">Could not load.</p>';
+    });
+
+    document.getElementById("cal-prev").onclick = () => { viewDate.setMonth(viewDate.getMonth()-1); render(); };
+    document.getElementById("cal-next").onclick = () => { viewDate.setMonth(viewDate.getMonth()+1); render(); };
+
+    function render() {
+        const year = viewDate.getFullYear();
+        const month = viewDate.getMonth();
+        navEl.textContent = MONTHS[month] + " " + year;
+
+        // Group events by date for quick lookup
+        const byDate = {};
+        allEvents.forEach(e => {
+            if (!byDate[e.date]) byDate[e.date] = [];
+            byDate[e.date].push(e);
+        });
+
+        // Build grid
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const today = new Date();
+        const todayStr = today.getFullYear() + "-" +
+            String(today.getMonth()+1).padStart(2,"0") + "-" +
+            String(today.getDate()).padStart(2,"0");
+
+        let html = "";
+        WEEKDAYS.forEach(d => html += '<div class="cal-day-header">' + d + "</div>");
+
+        for (let i = 0; i < firstDay; i++) {
+            html += '<div class="cal-day other-month"><div class="day-num"></div></div>';
+        }
+
+        for (let d = 1; d <= daysInMonth; d++) {
+            const dateStr = year + "-" +
+                String(month+1).padStart(2,"0") + "-" +
+                String(d).padStart(2,"0");
+            const dayEvents = byDate[dateStr] || [];
+            const isToday = dateStr === todayStr;
+            const hasEvents = dayEvents.length > 0;
+
+            html += '<div class="cal-day' +
+                (isToday ? " today" : "") +
+                (hasEvents ? " has-events" : "") + '">';
+
+            html += '<div class="day-num">' + d + "</div>";
+            if (hasEvents) {
+                // Dot indicators
+                dayEvents.forEach(() => html += '<span class="day-dot"></span>');
+
+                // Hover popup
+                html += '<div class="cal-popup"><h4>' + dateStr + "</h4>";
+                dayEvents.forEach(e => {
+                    html += '<div class="cal-popup-item">';
+                    if (e.time) html += '<span class="pop-time">' + e.time + "</span>";
+                    html += esc(e.title);
+                    if (e.description) html += '<div class="pop-desc">' + esc(e.description) + "</div>";
+                    html += "</div>";
+                });
+                html += "</div>";
+            }
+            html += "</div>";
+        }
+
+        gridEl.innerHTML = html;
+
+        // Sidebar: upcoming events
+        const upcoming = allEvents.filter(e => e.date >= todayStr);
+        if (upcoming.length === 0) {
+            sidebarEl.innerHTML = '<p class="cal-side-empty">No upcoming events.<br>Use !book in Discord.</p>';
+        } else {
+            sidebarEl.innerHTML = upcoming.slice(0, 15).map(e =>
+                '<div class="cal-side-event">' +
+                '<div class="se-date">' + e.date + (e.time ? " at " + e.time : "") + "</div>" +
+                '<div class="se-title">' + esc(e.title) + "</div>" +
+                (e.description ? '<div class="se-desc">' + esc(e.description) + "</div>" : "") +
+                "</div>"
+            ).join("");
+        }
+    }
+
+    function esc(s) {
+        if (!s) return "";
+        return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;")
+            .replace(/>/g,"&gt;").replace(/"/g,"&quot;");
+    }
+});

style/calendar.css

@@ -0,0 +1,118 @@
+/* Calendar tab */
+
+#calendar-btn {
+    background-color: aliceblue; color: #153dee;
+    border: none; padding: 12px 24px; border-radius: 8px;
+    cursor: pointer; transition: box-shadow 0.3s ease;
+}
+
+/* ── Two-column layout ─────────────────────────────────────── */
+.cal-wrap {
+    max-width: 1200px; margin: 0 auto;
+    padding: 120px 40px 60px;
+    display: flex; gap: 28px;
+    color: #fff;
+}
+.cal-main { flex: 1; min-width: 0; }
+.cal-sidebar { width: 280px; flex-shrink: 0; }
+
+/* ── Month nav ─────────────────────────────────────────────── */
+.cal-nav {
+    display: flex; align-items: center; justify-content: center;
+    gap: 20px; margin-bottom: 18px;
+}
+.cal-nav h2 {
+    font-size: 1.4rem; margin: 0; min-width: 200px; text-align: center;
+    color: rgba(255,255,255,0.9);
+}
+.cal-nav button {
+    background: rgba(91,111,222,0.2); border: 1px solid rgba(91,111,222,0.3);
+    color: #fff; font-size: 1.1rem; width: 36px; height: 36px;
+    border-radius: 8px; cursor: pointer; transition: background 0.2s;
+}
+.cal-nav button:hover { background: rgba(91,111,222,0.4); }
+
+/* ── Month grid ────────────────────────────────────────────── */
+.cal-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 3px;
+}
+.cal-day-header {
+    text-align: center; font-size: 0.7rem; text-transform: uppercase;
+    color: rgba(255,255,255,0.35); padding: 6px 0;
+    font-family: Arial, sans-serif; letter-spacing: 1px;
+}
+.cal-day {
+    background: rgba(15,15,35,0.5); border: 1px solid rgba(91,111,222,0.12);
+    border-radius: 6px; min-height: 70px; padding: 4px 6px;
+    position: relative; transition: border-color 0.2s;
+}
+.cal-day.today { border-color: rgba(91,111,222,0.45); }
+.cal-day.other-month { opacity: 0.2; pointer-events: none; }
+.cal-day.has-events { cursor: pointer; }
+.cal-day.has-events:hover {
+    border-color: rgba(91,111,222,0.6);
+    box-shadow: 0 0 16px rgba(91,111,222,0.15);
+    z-index: 2;
+}
+.cal-day .day-num {
+    font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-bottom: 2px;
+}
+.cal-day .day-dot {
+    display: inline-block; width: 6px; height: 6px;
+    border-radius: 50%; background: #a5b4fc;
+    margin: 1px 2px 0 0; vertical-align: middle;
+}
+
+/* ── Hover popup ───────────────────────────────────────────── */
+.cal-popup {
+    display: none; position: absolute;
+    top: 100%; left: 50%; transform: translateX(-50%);
+    background: rgba(20,20,45,0.95); backdrop-filter: blur(12px);
+    border: 1px solid rgba(91,111,222,0.4); border-radius: 10px;
+    padding: 14px 16px; min-width: 200px; max-width: 280px;
+    z-index: 10; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+    pointer-events: none;
+}
+.cal-day:hover .cal-popup { display: block; }
+.cal-popup h4 {
+    margin: 0 0 10px; font-size: 0.85rem; color: #a5b4fc;
+    font-family: Arial, sans-serif;
+}
+.cal-popup-item {
+    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
+    font-size: 0.82rem; color: rgba(255,255,255,0.85);
+}
+.cal-popup-item:last-child { border-bottom: none; }
+.cal-popup-item .pop-time {
+    font-weight: bold; color: #c4b5fd; margin-right: 6px;
+}
+.cal-popup-item .pop-desc {
+    font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 2px;
+}
+
+/* ── Sidebar ───────────────────────────────────────────────── */
+.cal-sidebar h3 {
+    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
+    color: rgba(255,255,255,0.4); margin: 0 0 14px;
+    font-family: Arial, sans-serif;
+}
+.cal-side-event {
+    padding: 10px 12px; background: rgba(15,15,35,0.4);
+    border: 1px solid rgba(91,111,222,0.1); border-radius: 8px;
+    margin-bottom: 6px; font-size: 0.82rem;
+}
+.cal-side-event .se-date {
+    color: rgba(255,255,255,0.35); font-size: 0.7rem; margin-bottom: 2px;
+}
+.cal-side-event .se-title {
+    color: #fff; font-weight: 500;
+}
+.cal-side-event .se-desc {
+    color: rgba(255,255,255,0.35); font-size: 0.7rem; margin-top: 2px;
+}
+.cal-side-empty {
+    text-align: center; color: rgba(255,255,255,0.2); padding: 30px 0;
+    font-family: Arial, sans-serif; font-size: 0.8rem;
+}