Spaces:

MarcRyan
/

mindfullness-schedule

Running

App Files Files Community

MarcRyan commited on May 7

Commit

1ab1062

verified ·

1 Parent(s): 19147ab

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +568 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mindfullness Schedule
-emoji: 🏢
-colorFrom: indigo
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mindfullness-schedule
+emoji: 🐳
+colorFrom: blue
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,568 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neural Synchronization Calendar</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <style>
+        .event-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-left: 2px;
+        }
+        .calendar-day:hover {
+            background-color: #f0f4ff;
+        }
+        .calendar-day.active {
+            background-color: #2a5298;
+            color: white;
+        }
+        .calendar-day.inactive {
+            color: #ccc;
+        }
+        .event-item {
+            border-left: 4px solid;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-blue-900 to-blue-700 min-h-screen p-4 md:p-8">
+    <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden">
+        <div class="p-6">
+            <!-- Header -->
+            <div class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
+                <div class="flex space-x-2">
+                    <button id="monthView" class="px-4 py-2 bg-blue-800 text-white rounded-lg hover:bg-blue-700 transition">Month</button>
+                    <button id="weekView" class="px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition">Week</button>
+                    <button id="dayView" class="px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition">Day</button>
+                </div>
+                <h2 id="currentDate" class="text-2xl font-bold text-blue-800"></h2>
+                <div class="flex items-center space-x-4">
+                    <button id="prev" class="text-blue-800 hover:bg-blue-100 p-2 rounded-full">
+                        <span class="material-icons">chevron_left</span>
+                    </button>
+                    <button id="next" class="text-blue-800 hover:bg-blue-100 p-2 rounded-full">
+                        <span class="material-icons">chevron_right</span>
+                    </button>
+                    <button id="exportPDF" class="px-4 py-2 bg-blue-800 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
+                        <span class="material-icons mr-2">picture_as_pdf</span>
+                        Export PDF
+                    </button>
+                </div>
+            </div>
+            <!-- Calendar -->
+            <div id="calendar" class="mb-8"></div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Event Form -->
+                <div class="bg-blue-50 p-6 rounded-xl">
+                    <h3 class="text-xl font-semibold text-blue-800 mb-4">Add Event</h3>
+                    <div class="space-y-4">
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium text-blue-700 mb-1">Date</label>
+                                <input type="date" id="eventDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-blue-700 mb-1">Time</label>
+                                <input type="time" id="eventTime" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-blue-700 mb-1">Title</label>
+                            <input type="text" id="eventTitle" placeholder="Event Title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-blue-700 mb-1">Category</label>
+                            <select id="eventCategory" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option value="Mental Health">Mental Health</option>
+                                <option value="Motor Control">Motor Control</option>
+                                <option value="Lifestyle">Lifestyle</option>
+                                <option value="Research">Research</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-blue-700 mb-1">Description</label>
+                            <input type="text" id="eventDescription" placeholder="Description" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div class="pt-2">
+                            <button id="addEvent" class="w-full py-2 bg-blue-800 text-white rounded-lg hover:bg-blue-700 transition flex justify-center items-center">
+                                <span class="material-icons mr-2">add</span>
+                                Add Event
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Events List -->
+                <div class="bg-blue-50 p-6 rounded-xl">
+                    <h3 class="text-xl font-semibold text-blue-800 mb-4">Scheduled Events</h3>
+                    <ul id="reminderList" class="space-y-2">
+                        <!-- Events will be listed here -->
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize the calendar
+        document.addEventListener('DOMContentLoaded', function() {
+            const calendar = document.getElementById("calendar"),
+                currentDateEl = document.getElementById("currentDate"),
+                prevBtn = document.getElementById("prev"),
+                nextBtn = document.getElementById("next"),
+                monthViewBtn = document.getElementById("monthView"),
+                weekViewBtn = document.getElementById("weekView"),
+                dayViewBtn = document.getElementById("dayView"),
+                eventDate = document.getElementById("eventDate"),
+                eventTime = document.getElementById("eventTime"),
+                eventTitle = document.getElementById("eventTitle"),
+                eventCategory = document.getElementById("eventCategory"),
+                eventDescription = document.getElementById("eventDescription"),
+                addEventBtn = document.getElementById("addEvent"),
+                exportPDFBtn = document.getElementById("exportPDF"),
+                reminderList = document.getElementById("reminderList");
+            let date = new Date(),
+                currYear = date.getFullYear(),
+                currMonth = date.getMonth(),
+                currDay = date.getDate(),
+                currentView = "month";
+            const months = ["January", "February", "March", "April", "May", "June", "July",
+                          "August", "September", "October", "November", "December"];
+            const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+            const categoryColors = {
+                "Mental Health": "#1e90ff",
+                "Motor Control": "#ff4500",
+                "Lifestyle": "#32cd32",
+                "Research": "#9400d3"
+            };
+            // Set today's date in the form
+            const today = new Date();
+            eventDate.valueAsDate = today;
+            eventTime.value = "12:00";
+            // Load events from localStorage
+            const loadEvents = () => {
+                const events = localStorage.getItem('neuralCalendarEvents');
+                return events ? JSON.parse(events) : [];
+            };
+            // Save events to localStorage
+            const saveEvents = (events) => {
+                localStorage.setItem('neuralCalendarEvents', JSON.stringify(events));
+            };
+            // Add sample events if none exist
+            const initializeEvents = () => {
+                let events = loadEvents();
+                if (events.length === 0) {
+                    const sampleEvents = [
+                        {
+                            id: Date.now().toString(),
+                            date: formatDate(new Date()),
+                            time: "08:00",
+                            title: "Mindfulness Meditation",
+                            category: "Mental Health",
+                            description: "10 min morning session"
+                        },
+                        {
+                            id: (Date.now() + 1).toString(),
+                            date: formatDate(new Date(new Date().setDate(new Date().getDate() + 1))),
+                            time: "18:00",
+                            title: "Neurofeedback",
+                            category: "Mental Health",
+                            description: "30 min evening session"
+                        },
+                        {
+                            id: (Date.now() + 2).toString(),
+                            date: formatDate(new Date(new Date().setDate(new Date().getDate() + 2))),
+                            time: "15:00",
+                            title: "Physical Therapy",
+                            category: "Motor Control",
+                            description: "30 min CIMT exercises"
+                        }
+                    ];
+                    saveEvents(sampleEvents);
+                }
+            };
+            // Format date as YYYY-MM-DD
+            const formatDate = (date) => {
+                const d = new Date(date);
+                let month = '' + (d.getMonth() + 1);
+                let day = '' + d.getDate();
+                const year = d.getFullYear();
+                if (month.length < 2) month = '0' + month;
+                if (day.length < 2) day = '0' + day;
+                return [year, month, day].join('-');
+            };
+            // Render the calendar based on current view
+            const renderCalendar = () => {
+                const events = loadEvents();
+                let html = "";
+                if (currentView === "month") {
+                    let firstDayofMonth = new Date(currYear, currMonth, 1).getDay();
+                    let lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate();
+                    let lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay();
+                    let lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate();
+                    // Weekday headers
+                    html += `<div class="grid grid-cols-7 gap-1 mb-2">`;
+                    daysOfWeek.forEach(day => {
+                        html += `<div class="text-center font-semibold text-blue-800 py-2">${day}</div>`;
+                    });
+                    html += `</div>`;
+                    // Calendar days
+                    html += `<div class="grid grid-cols-7 gap-1">`;
+                    // Days from previous month
+                    for (let i = firstDayofMonth; i > 0; i--) {
+                        const day = lastDateofLastMonth - i + 1;
+                        html += `<div class="calendar-day inactive text-center py-2 rounded-lg">${day}</div>`;
+                    }
+                    // Days of current month
+                    for (let i = 1; i <= lastDateofMonth; i++) {
+                        const dateStr = `${currYear}-${String(currMonth + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
+                        const isToday = i === new Date().getDate() && currMonth === new Date().getMonth() && currYear === new Date().getFullYear();
+                        const dayEvents = events.filter(event => event.date === dateStr);
+                        let dayClass = "calendar-day text-center py-2 rounded-lg cursor-pointer";
+                        if (isToday) dayClass += " active";
+                        let eventDots = "";
+                        dayEvents.forEach(event => {
+                            eventDots += `<span class="event-dot" style="background-color: ${categoryColors[event.category]}"></span>`;
+                        });
+                        html += `<div class="${dayClass}" data-date="${dateStr}">
+                            ${i}
+                            <div class="flex justify-center">${eventDots}</div>
+                        </div>`;
+                    }
+                    // Days from next month
+                    for (let i = lastDayofMonth; i < 6; i++) {
+                        const day = i - lastDayofMonth + 1;
+                        html += `<div class="calendar-day inactive text-center py-2 rounded-lg">${day}</div>`;
+                    }
+                    html += `</div>`;
+                    currentDateEl.textContent = `${months[currMonth]} ${currYear}`;
+                }
+                else if (currentView === "week") {
+                    let startOfWeek = new Date(currYear, currMonth, currDay - date.getDay());
+                    // Weekday headers
+                    html += `<div class="grid grid-cols-7 gap-1 mb-2">`;
+                    daysOfWeek.forEach(day => {
+                        html += `<div class="text-center font-semibold text-blue-800 py-2">${day}</div>`;
+                    });
+                    html += `</div>`;
+                    // Calendar days
+                    html += `<div class="grid grid-cols-7 gap-1">`;
+                    for (let i = 0; i < 7; i++) {
+                        const day = new Date(startOfWeek);
+                        day.setDate(startOfWeek.getDate() + i);
+                        const dateStr = formatDate(day);
+                        const isToday = day.getDate() === new Date().getDate() &&
+                                        day.getMonth() === new Date().getMonth() &&
+                                        day.getFullYear() === new Date().getFullYear();
+                        const dayEvents = events.filter(event => event.date === dateStr);
+                        let dayClass = "calendar-day text-center py-2 rounded-lg cursor-pointer";
+                        if (isToday) dayClass += " active";
+                        let eventDots = "";
+                        dayEvents.forEach(event => {
+                            eventDots += `<span class="event-dot" style="background-color: ${categoryColors[event.category]}"></span>`;
+                        });
+                        html += `<div class="${dayClass}" data-date="${dateStr}">
+                            ${day.getDate()}
+                            <div class="flex justify-center">${eventDots}</div>
+                        </div>`;
+                    }
+                    html += `</div>`;
+                    const weekStart = new Date(startOfWeek);
+                    const weekEnd = new Date(startOfWeek);
+                    weekEnd.setDate(weekStart.getDate() + 6);
+                    currentDateEl.textContent = `Week of ${months[weekStart.getMonth()]} ${weekStart.getDate()} - ${months[weekEnd.getMonth()]} ${weekEnd.getDate()}, ${weekEnd.getFullYear()}`;
+                }
+                else if (currentView === "day") {
+                    const dateStr = `${currYear}-${String(currMonth + 1).padStart(2, '0')}-${String(currDay).padStart(2, '0')}`;
+                    const isToday = currDay === new Date().getDate() &&
+                                    currMonth === new Date().getMonth() &&
+                                    currYear === new Date().getFullYear();
+                    const dayEvents = events.filter(event => event.date === dateStr);
+                    let dayClass = "calendar-day text-center py-8 rounded-lg cursor-pointer";
+                    if (isToday) dayClass += " active";
+                    html += `<div class="${dayClass}" data-date="${dateStr}">
+                        <div class="text-2xl font-bold">${currDay}</div>
+                        <div class="text-lg">${months[currMonth]}</div>
+                        <div class="text-lg">${currYear}</div>
+                    </div>`;
+                    currentDateEl.textContent = `${months[currMonth]} ${currDay}, ${currYear}`;
+                }
+                calendar.innerHTML = html;
+                // Add click event to days
+                document.querySelectorAll('.calendar-day:not(.inactive)').forEach(day => {
+                    day.addEventListener('click', () => {
+                        const date = day.dataset.date;
+                        eventDate.value = date;
+                        renderEvents(date);
+                    });
+                });
+            };
+            // Render events for a specific date
+            const renderEvents = (selectedDate) => {
+                const events = loadEvents();
+                const filteredEvents = events.filter(event => event.date === selectedDate);
+                if (filteredEvents.length === 0) {
+                    reminderList.innerHTML = `<li class="text-gray-500 italic">No events for this date</li>`;
+                    return;
+                }
+                reminderList.innerHTML = filteredEvents.map(event => `
+                    <li class="event-item bg-white p-3 rounded-lg mb-2 shadow-sm"
+                        style="border-left-color: ${categoryColors[event.category]}">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <div class="font-semibold">${event.title}</div>
+                                <div class="text-sm text-gray-600">${event.time} • ${event.category}</div>
+                                <div class="text-sm mt-1">${event.description}</div>
+                            </div>
+                            <button class="delete-event text-red-500 hover:text-red-700"
+                                    data-id="${event.id}">
+                                <span class="material-icons">delete</span>
+                            </button>
+                        </div>
+                    </li>
+                `).join('');
+                // Add delete event handlers
+                document.querySelectorAll('.delete-event').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        deleteEvent(btn.dataset.id);
+                    });
+                });
+            };
+            // Add a new event
+            const addEvent = () => {
+                const title = eventTitle.value.trim();
+                const category = eventCategory.value;
+                const description = eventDescription.value.trim();
+                const date = eventDate.value;
+                const time = eventTime.value;
+                if (!title || !date || !time) {
+                    alert("Please fill in all required fields");
+                    return;
+                }
+                const events = loadEvents();
+                const newEvent = {
+                    id: Date.now().toString(),
+                    date,
+                    time,
+                    title,
+                    category,
+                    description
+                };
+                events.push(newEvent);
+                saveEvents(events);
+                // Clear form
+                eventTitle.value = '';
+                eventDescription.value = '';
+                // Update calendar and events list
+                renderCalendar();
+                renderEvents(date);
+                // Show notification
+                showNotification(`Event added: ${title} on ${date} at ${time}`);
+            };
+            // Delete an event
+            const deleteEvent = (id) => {
+                const events = loadEvents();
+                const updatedEvents = events.filter(event => event.id !== id);
+                saveEvents(updatedEvents);
+                // Get the date of the deleted event to refresh that date
+                const deletedEvent = events.find(event => event.id === id);
+                if (deletedEvent) {
+                    renderCalendar();
+                    renderEvents(deletedEvent.date);
+                }
+            };
+            // Export to PDF
+            const exportToPDF = () => {
+                const { jsPDF } = window.jspdf;
+                const doc = new jsPDF();
+                doc.setFontSize(16);
+                doc.text("Neural Synchronization Calendar - Events", 10, 10);
+                const events = loadEvents();
+                if (events.length === 0) {
+                    doc.setFontSize(12);
+                    doc.text("No events to display", 10, 20);
+                } else {
+                    doc.setFontSize(10);
+                    let y = 20;
+                    events.forEach(event => {
+                        doc.text(`${event.date} ${event.time}: ${event.title} (${event.category})`, 10, y);
+                        doc.text(`Description: ${event.description}`, 10, y + 5);
+                        y += 12;
+                    });
+                }
+                doc.save("neural-calendar-events.pdf");
+            };
+            // Show notification
+            const showNotification = (message) => {
+                if (!("Notification" in window)) {
+                    console.log("This browser does not support desktop notification");
+                    return;
+                }
+                if (Notification.permission === "granted") {
+                    new Notification(message);
+                } else if (Notification.permission !== "denied") {
+                    Notification.requestPermission().then(permission => {
+                        if (permission === "granted") {
+                            new Notification(message);
+                        }
+                    });
+                }
+            };
+            // Navigation handlers
+            prevBtn.addEventListener('click', () => {
+                if (currentView === "month") {
+                    currMonth--;
+                    if (currMonth < 0) {
+                        currMonth = 11;
+                        currYear--;
+                    }
+                } else if (currentView === "week") {
+                    currDay -= 7;
+                    const newDate = new Date(currYear, currMonth, currDay);
+                    currYear = newDate.getFullYear();
+                    currMonth = newDate.getMonth();
+                    currDay = newDate.getDate();
+                } else {
+                    currDay--;
+                    const newDate = new Date(currYear, currMonth, currDay);
+                    currYear = newDate.getFullYear();
+                    currMonth = newDate.getMonth();
+                    currDay = newDate.getDate();
+                }
+                renderCalendar();
+            });
+            nextBtn.addEventListener('click', () => {
+                if (currentView === "month") {
+                    currMonth++;
+                    if (currMonth > 11) {
+                        currMonth = 0;
+                        currYear++;
+                    }
+                } else if (currentView === "week") {
+                    currDay += 7;
+                    const newDate = new Date(currYear, currMonth, currDay);
+                    currYear = newDate.getFullYear();
+                    currMonth = newDate.getMonth();
+                    currDay = newDate.getDate();
+                } else {
+                    currDay++;
+                    const newDate = new Date(currYear, currMonth, currDay);
+                    currYear = newDate.getFullYear();
+                    currMonth = newDate.getMonth();
+                    currDay = newDate.getDate();
+                }
+                renderCalendar();
+            });
+            // View switchers
+            monthViewBtn.addEventListener('click', () => {
+                currentView = "month";
+                monthViewBtn.className = "px-4 py-2 bg-blue-800 text-white rounded-lg hover:bg-blue-700 transition";
+                weekViewBtn.className = "px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition";
+                dayViewBtn.className = "px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition";
+                renderCalendar();
+            });
+            weekViewBtn.addEventListener('click', () => {
+                currentView = "week";
+                monthViewBtn.className = "px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition";
+                weekViewBtn.className = "px-4 py-2 bg-blue-800 text-white rounded-lg hover:bg-blue-700 transition";
+                dayViewBtn.className = "px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition";
+                renderCalendar();
+            });
+            dayViewBtn.addEventListener('click', () => {
+                currentView = "day";
+                monthViewBtn.className = "px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition";
+                weekViewBtn.className = "px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition";
+                dayViewBtn.className = "px-4 py-2 bg-blue-800 text-white rounded-lg hover:bg-blue-700 transition";
+                renderCalendar();
+            });
+            // Form submission
+            addEventBtn.addEventListener('click', addEvent);
+            // Export PDF
+            exportPDFBtn.addEventListener('click', exportToPDF);
+            // Initialize the app
+            initializeEvents();
+            renderCalendar();
+            renderEvents(formatDate(new Date()));
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarcRyan/mindfullness-schedule" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ fix this so it works