Merge remote-tracking branch 'origin/main'

# Conflicts:
#	src/metadata/anilist.exe
#	src/views/views.routes.ts

README.md

@@ -10,7 +10,7 @@ The official recode repo, its private no one should know about this or have the
 | Better Code Organization | ✅ |  N/A |
 | Mobile View | Not Done | N/A |
 | Gallery | Not Done |   N/A |
-| Anime Schedule (Release Calendar for the month) | Not Done | N/A |
+| Anime Schedule (Release Calendar for the week/month) | ✅ | N/A |
 | My List (Tracking) | Not Done | Persistent data would be in a data.db file in waifuboard directory |
 | Marketplace | Not Done | Uses the gitea repo |
 | Add to list / library | Not Done | Persistent data would be in data.db file in waifuboard directory| 

server.js

@@ -73,6 +73,36 @@ function startCppScraper() {
     });
 }
 
+function startCppScraper() {
+    const exePath = path.join(__dirname, 'src', 'metadata', 'anilist.exe');
+    const dllPath = path.join(__dirname, 'src', 'metadata', 'binaries');
+
+    if (!fs.existsSync(exePath)) {
+        console.error(`❌ C++ Error: Could not find executable at: ${exePath}`);
+        console.error("   Did you compile it? (g++ src/metadata/anilist.cpp -o src/metadata/anilist.exe ...)");
+        return;
+    }
+
+    const env = { ...process.env };
+    env.PATH = `${dllPath};${env.PATH}`;
+ 
+    console.log("⚡ Starting WaifuBoard Scraper Engine (C++)...");
+
+    const scraper = spawn(exePath, [], {
+        stdio: 'inherit', 
+        cwd: __dirname,   
+        env: env        
+    });
+
+    scraper.on('error', (err) => {
+        console.error('❌ Failed to spawn C++ process:', err);
+    });
+
+    scraper.on('close', (code) => {
+        console.log(`✅ Scraper process finished with code ${code}`);
+    });
+}
+
 const start = async () => {
     try {
         initDatabase();

src/scripts/schedule/schedule.js

@@ -0,0 +1,360 @@
+const ANILIST_API = 'https://graphql.anilist.co';
+const CACHE_NAME = 'waifuboard-schedule-v1';
+const CACHE_DURATION = 5 * 60 * 1000;
+
+const state = {
+    currentDate: new Date(),
+    viewType: 'MONTH',
+    mode: 'SUB',
+    loading: false,
+    abortController: null,
+    refreshInterval: null
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    renderHeader();
+    fetchSchedule();
+
+    state.refreshInterval = setInterval(() => {
+        console.log("Auto-refreshing schedule...");
+        fetchSchedule(true);
+    }, CACHE_DURATION);
+});
+
+async function getCache(key) {
+    try {
+        const cache = await caches.open(CACHE_NAME);
+
+        const response = await cache.match(`/schedule-cache/${key}`);
+
+        if (!response) return null;
+
+        const cached = await response.json();
+        const age = Date.now() - cached.timestamp;
+
+        if (age < CACHE_DURATION) {
+            console.log(`[Cache Hit] Loaded ${key} (Age: ${Math.round(age / 1000)}s)`);
+            return cached.data;
+        }
+
+        console.log(`[Cache Stale] ${key} expired.`);
+
+        cache.delete(`/schedule-cache/${key}`);
+        return null;
+    } catch (e) {
+        console.error("Cache read failed", e);
+        return null;
+    }
+}
+
+async function setCache(key, data) {
+    try {
+        const cache = await caches.open(CACHE_NAME);
+        const payload = JSON.stringify({
+            timestamp: Date.now(),
+            data: data
+        });
+
+        const response = new Response(payload, {
+            headers: { 'Content-Type': 'application/json' }
+        });
+        await cache.put(`/schedule-cache/${key}`, response);
+    } catch (e) {
+        console.warn("Cache write failed", e);
+    }
+}
+
+function getCacheKey() {
+    if (state.viewType === 'MONTH') {
+        return `M_${state.currentDate.getFullYear()}_${state.currentDate.getMonth()}`;
+    } else {
+        const start = getWeekStart(state.currentDate);
+        return `W_${start.toISOString().split('T')[0]}`;
+    }
+}
+
+function navigate(delta) {
+    if (state.abortController) state.abortController.abort();
+
+    if (state.viewType === 'MONTH') {
+        state.currentDate.setMonth(state.currentDate.getMonth() + delta);
+    } else {
+        state.currentDate.setDate(state.currentDate.getDate() + (delta * 7));
+    }
+
+    renderHeader();
+    fetchSchedule();
+}
+
+function setViewType(type) {
+    if (state.viewType === type) return;
+    state.viewType = type;
+
+    document.getElementById('btnViewMonth').classList.toggle('active', type === 'MONTH');
+    document.getElementById('btnViewWeek').classList.toggle('active', type === 'WEEK');
+
+    if (state.abortController) state.abortController.abort();
+
+    renderHeader();
+    fetchSchedule();
+}
+
+function setMode(mode) {
+    if (state.mode === mode) return;
+    state.mode = mode;
+    document.getElementById('btnSub').classList.toggle('active', mode === 'SUB');
+    document.getElementById('btnDub').classList.toggle('active', mode === 'DUB');
+
+    fetchSchedule();
+}
+
+function renderHeader() {
+    const options = { month: 'long', year: 'numeric' };
+    let title = state.currentDate.toLocaleDateString('en-US', options);
+
+    if (state.viewType === 'WEEK') {
+        const start = getWeekStart(state.currentDate);
+        const end = new Date(start);
+        end.setDate(end.getDate() + 6);
+
+        const startStr = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+        const endStr = end.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+        title = `Week of ${startStr} - ${endStr}`;
+    }
+
+    document.getElementById('monthTitle').textContent = title;
+}
+
+function getWeekStart(date) {
+    const d = new Date(date);
+    const day = d.getDay();
+    const diff = d.getDate() - day + (day === 0 ? -6 : 1);
+    return new Date(d.setDate(diff));
+}
+
+async function fetchSchedule(forceRefresh = false) {
+    const key = getCacheKey();
+
+    if (!forceRefresh) {
+        const cachedData = await getCache(key);
+        if (cachedData) {
+            renderGrid(cachedData);
+            updateAmbient(cachedData);
+            return;
+        }
+    }
+
+    if (state.abortController) state.abortController.abort();
+    state.abortController = new AbortController();
+    const signal = state.abortController.signal;
+
+    if (!forceRefresh) setLoading(true);
+
+    let startTs, endTs;
+    if (state.viewType === 'MONTH') {
+        const year = state.currentDate.getFullYear();
+        const month = state.currentDate.getMonth();
+        startTs = Math.floor(new Date(year, month, 1).getTime() / 1000);
+        endTs = Math.floor(new Date(year, month + 1, 0, 23, 59, 59).getTime() / 1000);
+    } else {
+        const start = getWeekStart(state.currentDate);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(start);
+        end.setDate(end.getDate() + 7);
+        startTs = Math.floor(start.getTime() / 1000);
+        endTs = Math.floor(end.getTime() / 1000);
+    }
+
+    const query = `
+                query ($start: Int, $end: Int, $page: Int) {
+                    Page(page: $page, perPage: 50) {
+                        pageInfo { hasNextPage }
+                        airingSchedules(airingAt_greater: $start, airingAt_lesser: $end, sort: TIME) {
+                            airingAt
+                            episode
+                            media {
+                                id
+                                title { userPreferred english }
+                                coverImage { large }
+                                bannerImage
+                                isAdult
+                                countryOfOrigin
+                                popularity
+                            }
+                        }
+                    }
+                }
+            `;
+
+    let allData = [];
+    let page = 1;
+    let hasNext = true;
+    let retries = 0;
+
+    try {
+        while (hasNext && page <= 6) {
+            if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+
+            try {
+                const res = await fetch(ANILIST_API, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+                    body: JSON.stringify({
+                        query,
+                        variables: { start: startTs, end: endTs, page }
+                    }),
+                    signal: signal
+                });
+
+                if (res.status === 429) {
+                    if (retries > 2) throw new Error("Rate Limited");
+                    console.warn("429 Hit. Waiting...");
+                    await delay(4000);
+                    retries++;
+                    continue;
+                }
+
+                const json = await res.json();
+                if (json.errors) throw new Error("API Error");
+
+                const data = json.data.Page;
+                allData = [...allData, ...data.airingSchedules];
+                hasNext = data.pageInfo.hasNextPage;
+                page++;
+
+                await delay(600);
+
+            } catch (e) {
+                if (e.name === 'AbortError') throw e;
+                console.error(e);
+                break;
+            }
+        }
+
+        if (!signal.aborted) {
+
+            await setCache(key, allData);
+            renderGrid(allData);
+            updateAmbient(allData);
+        }
+
+    } catch (e) {
+        if (e.name !== 'AbortError') console.error("Fetch failed:", e);
+    } finally {
+        if (!signal.aborted) {
+            setLoading(false);
+            state.abortController = null;
+        }
+    }
+}
+
+function renderGrid(data) {
+    const grid = document.getElementById('daysGrid');
+    grid.innerHTML = '';
+
+    let items = data.filter(i => !i.media.isAdult && i.media.countryOfOrigin === 'JP');
+    if (state.mode === 'DUB') {
+        items = items.filter(i => i.media.popularity > 20000);
+    }
+
+    if (state.viewType === 'MONTH') {
+        const year = state.currentDate.getFullYear();
+        const month = state.currentDate.getMonth();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        let firstDayIndex = new Date(year, month, 1).getDay() - 1;
+        if (firstDayIndex === -1) firstDayIndex = 6;
+
+        for (let i = 0; i < firstDayIndex; i++) {
+            const empty = document.createElement('div');
+            empty.className = 'day-cell empty';
+            grid.appendChild(empty);
+        }
+
+        for (let day = 1; day <= daysInMonth; day++) {
+            const dateObj = new Date(year, month, day);
+            renderDayCell(dateObj, items, grid);
+        }
+    } else {
+        const start = getWeekStart(state.currentDate);
+        for (let i = 0; i < 7; i++) {
+            const dateObj = new Date(start);
+            dateObj.setDate(start.getDate() + i);
+            renderDayCell(dateObj, items, grid);
+        }
+    }
+}
+
+function renderDayCell(dateObj, items, grid) {
+    const cell = document.createElement('div');
+    cell.className = 'day-cell';
+
+    if (state.viewType === 'WEEK') cell.style.minHeight = '300px';
+
+    const day = dateObj.getDate();
+    const month = dateObj.getMonth();
+    const year = dateObj.getFullYear();
+
+    const now = new Date();
+    if (day === now.getDate() && month === now.getMonth() && year === now.getFullYear()) {
+        cell.classList.add('today');
+    }
+
+    const dayEvents = items.filter(i => {
+        const eventDate = new Date(i.airingAt * 1000);
+        return eventDate.getDate() === day && eventDate.getMonth() === month && eventDate.getFullYear() === year;
+    });
+
+    dayEvents.sort((a, b) => b.media.popularity - a.media.popularity);
+
+    if (dayEvents.length > 0) {
+        const top = dayEvents[0].media;
+        const bg = document.createElement('div');
+        bg.className = 'cell-backdrop';
+        bg.style.backgroundImage = `url('${top.coverImage.large}')`;
+        cell.appendChild(bg);
+    }
+
+    const header = document.createElement('div');
+    header.className = 'day-header';
+    header.innerHTML = `
+                <span class="day-number">${day}</span>
+                <span class="today-label">Today</span>
+            `;
+    cell.appendChild(header);
+
+    const list = document.createElement('div');
+    list.className = 'events-list';
+
+    dayEvents.forEach(evt => {
+        const title = evt.media.title.english || evt.media.title.userPreferred;
+        const link = `/anime/${evt.media.id}`;
+
+        const chip = document.createElement('a');
+        chip.className = 'anime-chip';
+        chip.href = link;
+        chip.innerHTML = `
+                    <span class="chip-title">${title}</span>
+                    <span class="chip-ep">Ep ${evt.episode}</span>
+                `;
+        list.appendChild(chip);
+    });
+
+    cell.appendChild(list);
+    grid.appendChild(cell);
+}
+
+function setLoading(bool) {
+    state.loading = bool;
+    const loader = document.getElementById('loader');
+    if (bool) loader.classList.add('active');
+    else loader.classList.remove('active');
+}
+
+function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+function updateAmbient(data) {
+    if (!data || !data.length) return;
+    const top = data.reduce((prev, curr) => (prev.media.popularity > curr.media.popularity) ? prev : curr);
+    const img = top.media.bannerImage || top.media.coverImage.large;
+    if (img) document.getElementById('ambientBg').style.backgroundImage = `url('${img}')`;
+}

src/views/views.routes.ts

@@ -14,8 +14,8 @@ async function viewsRoutes(fastify: FastifyInstance) {
         reply.type('text/html').send(stream);
     });
 
-    fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
+    fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery.html'));
+        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'schedule.html'));
         reply.type('text/html').send(stream);
     });
 
@@ -48,11 +48,6 @@ async function viewsRoutes(fastify: FastifyInstance) {
         const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'read.html'));
         reply.type('text/html').send(stream);
     });
-
-    fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery-image.html'));
-        reply.type('text/html').send(stream);
-    });
 }
 
 export default viewsRoutes;

views/css/schedule/schedule.css

@@ -0,0 +1,453 @@
+:root {
+
+    --bg-base: #09090b;
+    --bg-surface: #121215;
+    --bg-glass: rgba(18, 18, 21, 0.8);
+    --bg-cell: #0c0c0e;
+    --accent: #8b5cf6;
+    --accent-glow: rgba(139, 92, 246, 0.3);
+    --text-primary: #ffffff;
+    --text-secondary: #a1a1aa;
+    --border: rgba(255, 255, 255, 0.08);
+    --radius-md: 12px;
+    --radius-lg: 24px;
+    --nav-height: 80px;
+    --font-main: 'Inter', sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+    outline: none;
+}
+
+body {
+    margin: 0;
+    background-color: var(--bg-base);
+    color: var(--text-primary);
+    font-family: var(--font-main);
+    overflow: hidden;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.navbar {
+    height: var(--nav-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 2rem;
+    background: var(--bg-glass);
+    backdrop-filter: blur(16px);
+    border-bottom: 1px solid var(--border);
+    z-index: 100;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.nav-brand {
+    position: absolute;
+    left: 2rem;
+    font-weight: 900;
+    font-size: 1.4rem;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    color: white;
+    text-decoration: none;
+    letter-spacing: -0.02em;
+}
+
+.brand-icon {
+    width: 36px;
+    height: 36px;
+    background: transparent;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.brand-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.nav-center {
+    display: flex;
+    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 0.3rem;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+}
+
+.nav-button {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    padding: 0.5rem 1.2rem;
+    border-radius: 999px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.nav-button:hover {
+    color: white;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.nav-button.active {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.ambient-bg {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background-size: cover;
+    background-position: center;
+    opacity: 0.06;
+    filter: blur(120px) saturate(1.2);
+    transition: background-image 1s ease-in-out;
+    pointer-events: none;
+}
+
+.calendar-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0 2rem 2rem 2rem;
+    max-width: 1920px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.calendar-controls {
+    padding: 1.5rem 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.month-selector {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.month-title {
+    font-size: 2.2rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    background: linear-gradient(to right, #fff, #a1a1aa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    min-width: 350px;
+}
+
+.icon-btn {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border);
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.2s;
+}
+
+.icon-btn:hover {
+    background: var(--accent);
+    border-color: var(--accent);
+    transform: translateY(-2px);
+}
+
+.controls-right {
+    display: flex;
+    gap: 1rem;
+}
+
+.view-toggles {
+    display: flex;
+    background: #0f0f12;
+    padding: 4px;
+    border-radius: 99px;
+    border: 1px solid var(--border);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.toggle-item {
+    padding: 10px 24px;
+    border-radius: 99px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.toggle-item.active {
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 2px 10px var(--accent-glow);
+}
+
+.calendar-board {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--bg-surface);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+}
+
+.weekdays-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    border-bottom: 1px solid var(--border);
+    background: rgba(255, 255, 255, 0.02);
+    flex-shrink: 0;
+}
+
+.weekday-header {
+    padding: 16px;
+    text-align: center;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    font-weight: 800;
+    color: var(--text-secondary);
+    letter-spacing: 0.1em;
+    border-right: 1px solid var(--border);
+}
+
+.weekday-header:last-child {
+    border-right: none;
+}
+
+.days-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    width: 100%;
+    overflow-y: auto;
+    flex: 1;
+
+    grid-auto-rows: minmax(180px, 1fr);
+    background: var(--bg-base);
+}
+
+.day-cell {
+    position: relative;
+    background: var(--bg-cell);
+    border-right: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    transition: background 0.2s;
+    overflow: hidden;
+}
+
+.day-cell:nth-child(7n) {
+    border-right: none;
+}
+
+.day-cell.empty {
+    background: rgba(0, 0, 0, 0.2);
+    pointer-events: none;
+}
+
+.day-cell:hover {
+    background: #16161a;
+}
+
+.day-cell.today {
+    background: rgba(139, 92, 246, 0.03);
+    box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.day-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    z-index: 2;
+    pointer-events: none;
+}
+
+.day-number {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--text-secondary);
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.day-cell.today .day-number {
+    background: var(--accent);
+    color: white;
+    box-shadow: 0 0 15px var(--accent-glow);
+}
+
+.today-label {
+    font-size: 0.65rem;
+    font-weight: 800;
+    color: var(--accent);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    display: none;
+}
+
+.day-cell.today .today-label {
+    display: block;
+}
+
+.events-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    overflow-y: auto;
+    z-index: 2;
+    padding-right: 4px;
+}
+
+.events-list::-webkit-scrollbar {
+    width: 4px;
+}
+
+.events-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.anime-chip {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    color: #d4d4d8;
+    text-decoration: none;
+    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.anime-chip::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--accent);
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.anime-chip:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    padding-left: 14px;
+}
+
+.anime-chip:hover::before {
+    opacity: 1;
+}
+
+.chip-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500;
+    margin-right: 8px;
+}
+
+.chip-ep {
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: var(--text-secondary);
+    background: rgba(0, 0, 0, 0.4);
+    padding: 2px 6px;
+    border-radius: 4px;
+    white-space: nowrap;
+}
+
+.cell-backdrop {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    filter: grayscale(100%) brightness(0.25);
+    z-index: 1;
+    pointer-events: none;
+}
+
+.day-cell:hover .cell-backdrop {
+    opacity: 1;
+}
+
+.loader {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: #18181b;
+    border: 1px solid var(--border);
+    padding: 12px 24px;
+    border-radius: 99px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    transform: translateY(100px);
+    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    z-index: 1000;
+}
+
+.loader.active {
+    transform: translateY(0);
+}
+
+.spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s infinite linear;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

views/schedule.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WaifuBoard - Schedule</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/views/css/schedule/schedule.css">
+</head>
+
+<body>
+
+    <div class="ambient-bg" id="ambientBg"></div>
+
+    <nav class="navbar" id="navbar">
+        <a href="/" class="nav-brand">
+            <div class="brand-icon">
+                <img src="/public/assets/waifuboards.ico" alt="WB" onerror="this.style.display='none'; this.parentNode.innerHTML='<svg width=\'20\' height=\'20\' viewBox=\'0 0 24 24\' fill=\'white\'><path d=\'M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z\'/></svg>'">
+            </div>
+            WaifuBoard
+        </a>
+
+        <div class="nav-center">
+            <button class="nav-button" onclick="window.location.href='/'">Anime</button>
+            <button class="nav-button" onclick="window.location.href='/books'">Books</button>
+            <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
+            <button class="nav-button active">Schedule</button>
+            <button class="nav-button">My List</button>
+            <button class="nav-button">Marketplace</button>
+        </div>
+
+    </nav>
+
+    <div class="calendar-wrapper">
+        <div class="calendar-controls">
+            <div class="month-selector">
+                <button class="icon-btn" onclick="navigate(-1)">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+                </button>
+                <div class="month-title" id="monthTitle">Loading...</div>
+                <button class="icon-btn" onclick="navigate(1)">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+                </button>
+            </div>
+
+            <div class="controls-right">
+
+                <div class="view-toggles">
+                    <button class="toggle-item active" id="btnViewMonth" onclick="setViewType('MONTH')">Month</button>
+                    <button class="toggle-item" id="btnViewWeek" onclick="setViewType('WEEK')">Week</button>
+                </div>
+
+                <div class="view-toggles">
+                    <button class="toggle-item active" id="btnSub" onclick="setMode('SUB')">Sub</button>
+                    <button class="toggle-item" id="btnDub" onclick="setMode('DUB')">Dub</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="calendar-board">
+            <div class="weekdays-grid">
+                <div class="weekday-header">Mon</div>
+                <div class="weekday-header">Tue</div>
+                <div class="weekday-header">Wed</div>
+                <div class="weekday-header">Thu</div>
+                <div class="weekday-header">Fri</div>
+                <div class="weekday-header">Sat</div>
+                <div class="weekday-header">Sun</div>
+            </div>
+            <div class="days-grid" id="daysGrid">
+
+            </div>
+        </div>
+    </div>
+
+    <div class="loader" id="loader">
+        <div class="spinner"></div>
+        <span id="loadingText">Syncing Schedule...</span>
+    </div>
+
+    <script src="/src/scripts/schedule/schedule.js"></script>
+</body>
+</html>