Spaces:

BitDown
/

calendrier-interactif

Running

App Files Files Community

PAUTREL Johan commited on 15 days ago

Commit

035a859

verified ·

1 Parent(s): a8a99b7

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +681 -19

README.md CHANGED Viewed

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

 ---
+title: calendrier-interactif
+emoji: 🐳
+colorFrom: gray
+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,681 @@
-<!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="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calendrier Interactif 2025-2030</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .calendar-day {
+            min-height: 120px;
+            transition: all 0.2s ease;
+        }
+        .calendar-day:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .task-item {
+            transition: all 0.2s ease;
+        }
+        .task-item:hover {
+            transform: translateX(2px);
+        }
+        .multi-day-selected {
+            background-color: #e0f2fe !important;
+        }
+        .multi-day-start {
+            border-top-left-radius: 0.5rem;
+            border-bottom-left-radius: 0.5rem;
+        }
+        .multi-day-end {
+            border-top-right-radius: 0.5rem;
+            border-bottom-right-radius: 0.5rem;
+        }
+        .multi-day-middle {
+            border-radius: 0;
+        }
+        @media (max-width: 768px) {
+            .calendar-day {
+                min-height: 100px;
+            }
+        }
+    </style>
+</head>
+<body class="bg-blue-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex flex-col md:flex-row justify-between items-center mb-8">
+            <h1 class="text-3xl font-bold text-blue-800 mb-4 md:mb-0">Calendrier Interactif</h1>
+            <div id="auth-section" class="flex items-center space-x-4">
+                <div id="user-info" class="hidden items-center">
+                    <img id="user-pic" class="w-10 h-10 rounded-full mr-2" src="" alt="Profile">
+                    <span id="user-name" class="text-blue-800 font-medium"></span>
+                </div>
+                <div id="g_id_onload"
+                    data-client_id="YOUR_GOOGLE_CLIENT_ID"
+                    data-context="signin"
+                    data-ux_mode="popup"
+                    data-callback="handleGoogleSignIn"
+                    data-auto_prompt="false">
+                </div>
+                <div class="g_id_signin"
+                    data-type="standard"
+                    data-shape="pill"
+                    data-theme="filled_blue"
+                    data-text="signin_with"
+                    data-size="medium"
+                    data-logo_alignment="left">
+                </div>
+                <button id="sign-out" class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm font-medium transition">
+                    Déconnexion
+                </button>
+            </div>
+        </header>
+        <!-- Controls -->
+        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+                <div class="flex items-center space-x-4">
+                    <button id="prev-year" class="bg-blue-100 hover:bg-blue-200 text-blue-800 p-2 rounded-full transition">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    <h2 id="current-year" class="text-2xl font-bold text-blue-800">2025</h2>
+                    <button id="next-year" class="bg-blue-100 hover:bg-blue-200 text-blue-800 p-2 rounded-full transition">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <button id="export-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center">
+                        <i class="fas fa-file-export mr-2"></i> Exporter
+                    </button>
+                    <label for="import-file" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-lg text-sm font-medium transition flex items-center cursor-pointer">
+                        <i class="fas fa-file-import mr-2"></i> Importer
+                        <input id="import-file" type="file" accept=".json" class="hidden">
+                    </label>
+                    <button id="save-drive-btn" class="hidden bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center">
+                        <i class="fab fa-google-drive mr-2"></i> Sauvegarder
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Calendar -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="calendar-container">
+            <!-- Months will be inserted here by JavaScript -->
+        </div>
+        <!-- Task Modal -->
+        <div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+            <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-blue-800" id="modal-date">Ajouter une tâche</h3>
+                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="space-y-4">
+                    <div>
+                        <label for="task-text" class="block text-sm font-medium text-gray-700 mb-1">Tâche</label>
+                        <input type="text" id="task-text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <div>
+                        <label for="task-time" class="block text-sm font-medium text-gray-700 mb-1">Heure (optionnel)</label>
+                        <input type="time" id="task-time" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <div class="flex justify-end space-x-3 pt-2">
+                        <button id="cancel-task" class="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium rounded-lg transition">
+                            Annuler
+                        </button>
+                        <button id="save-task" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition">
+                            Ajouter
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Multi-day selection info -->
+        <div id="multi-day-info" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 hidden">
+            <span class="text-blue-800 font-medium">Sélection multiple activée - Sélectionnez plusieurs jours</span>
+            <button id="cancel-multi-day" class="ml-4 text-blue-600 hover:text-blue-800">
+                <i class="fas fa-times"></i> Annuler
+            </button>
+        </div>
+    </div>
+    <script>
+        // Global variables
+        let currentYear = 2025;
+        let calendarData = {};
+        let selectedDate = null;
+        let multiDaySelection = false;
+        let multiDayStart = null;
+        let multiDayEnd = null;
+        let currentUser = null;
+        let isDragging = false;
+        // Initialize the calendar
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeCalendar();
+            setupEventListeners();
+            loadFromLocalStorage();
+        });
+        function initializeCalendar() {
+            // Initialize empty calendar data structure
+            for (let year = 2025; year <= 2030; year++) {
+                calendarData[year] = {};
+                for (let month = 0; month < 12; month++) {
+                    calendarData[year][month] = {};
+                    const daysInMonth = new Date(year, month + 1, 0).getDate();
+                    for (let day = 1; day <= daysInMonth; day++) {
+                        calendarData[year][month][day] = [];
+                    }
+                }
+            }
+            renderCalendar();
+        }
+        function renderCalendar() {
+            const container = document.getElementById('calendar-container');
+            container.innerHTML = '';
+            document.getElementById('current-year').textContent = currentYear;
+            for (let month = 0; month < 12; month++) {
+                const monthElement = document.createElement('div');
+                monthElement.className = 'bg-white rounded-xl shadow-md overflow-hidden';
+                const monthName = new Date(currentYear, month, 1).toLocaleString('fr-FR', { month: 'long' });
+                const capitalizedMonthName = monthName.charAt(0).toUpperCase() + monthName.slice(1);
+                monthElement.innerHTML = `
+                    <div class="bg-blue-600 text-white px-4 py-3 font-bold">
+                        ${capitalizedMonthName} ${currentYear}
+                    </div>
+                    <div class="grid grid-cols-7 gap-px bg-gray-200 p-px">
+                        ${['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'].map(day => `
+                            <div class="bg-blue-100 text-blue-800 text-center text-sm font-medium py-1">
+                                ${day}
+                            </div>
+                        `).join('')}
+                    </div>
+                    <div class="grid grid-cols-7 gap-px bg-gray-200 p-px" id="month-${month}">
+                        <!-- Days will be inserted here -->
+                    </div>
+                `;
+                container.appendChild(monthElement);
+                renderMonthDays(month);
+            }
+        }
+        function renderMonthDays(month) {
+            const monthContainer = document.getElementById(`month-${month}`);
+            const firstDay = new Date(currentYear, month, 1).getDay();
+            const daysInMonth = new Date(currentYear, month + 1, 0).getDate();
+            // Adjust for Monday as first day (French calendar)
+            const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
+            // Add empty cells for days before the first day of the month
+            for (let i = 0; i < adjustedFirstDay; i++) {
+                const emptyCell = document.createElement('div');
+                emptyCell.className = 'bg-gray-100 h-12';
+                monthContainer.appendChild(emptyCell);
+            }
+            // Add cells for each day of the month
+            for (let day = 1; day <= daysInMonth; day++) {
+                const date = new Date(currentYear, month, day);
+                const dayOfWeek = date.getDay();
+                const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+                const dayElement = document.createElement('div');
+                dayElement.className = `calendar-day bg-white ${isWeekend ? 'bg-blue-50' : ''} p-2 relative`;
+                dayElement.dataset.year = currentYear;
+                dayElement.dataset.month = month;
+                dayElement.dataset.day = day;
+                // Check if this day is part of a multi-day selection
+                const isMultiDay = checkMultiDaySelection(currentYear, month, day);
+                if (isMultiDay) {
+                    dayElement.classList.add('multi-day-selected', isMultiDay.position);
+                }
+                dayElement.innerHTML = `
+                    <div class="flex justify-between items-start mb-1">
+                        <span class="text-lg font-medium ${isWeekend ? 'text-blue-600' : 'text-gray-800'}">${day}</span>
+                        <button class="add-task-btn text-blue-500 hover:text-blue-700 text-sm p-1 rounded-full transition">
+                            <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+                    <div class="tasks-container space-y-1 overflow-y-auto max-h-20">
+                        ${renderTasks(currentYear, month, day)}
+                    </div>
+                `;
+                monthContainer.appendChild(dayElement);
+            }
+        }
+        function renderTasks(year, month, day) {
+            if (!calendarData[year] || !calendarData[year][month] || !calendarData[year][month][day]) {
+                return '';
+            }
+            return calendarData[year][month][day].map((task, index) => `
+                <div class="task-item bg-blue-100 rounded px-2 py-1 text-sm flex justify-between items-center" data-index="${index}">
+                    <div>
+                        ${task.time ? `<span class="text-blue-600 font-medium">${task.time}</span> - ` : ''}
+                        <span>${task.text}</span>
+                        ${task.user ? `<span class="text-xs text-gray-500 ml-1">(${task.user})</span>` : ''}
+                    </div>
+                    <button class="delete-task text-red-500 hover:text-red-700 text-xs p-1">
+                        <i class="fas fa-trash-alt"></i>
+                    </button>
+                </div>
+            `).join('');
+        }
+        function setupEventListeners() {
+            // Year navigation
+            document.getElementById('prev-year').addEventListener('click', () => {
+                if (currentYear > 2025) {
+                    currentYear--;
+                    renderCalendar();
+                }
+            });
+            document.getElementById('next-year').addEventListener('click', () => {
+                if (currentYear < 2030) {
+                    currentYear++;
+                    renderCalendar();
+                }
+            });
+            // Task modal
+            document.addEventListener('click', function(e) {
+                if (e.target.closest('.add-task-btn')) {
+                    const dayElement = e.target.closest('.calendar-day');
+                    selectedDate = {
+                        year: parseInt(dayElement.dataset.year),
+                        month: parseInt(dayElement.dataset.month),
+                        day: parseInt(dayElement.dataset.day)
+                    };
+                    const dateStr = new Date(selectedDate.year, selectedDate.month, selectedDate.day)
+                        .toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' });
+                    document.getElementById('modal-date').textContent = `Tâche pour le ${dateStr}`;
+                    document.getElementById('task-text').value = '';
+                    document.getElementById('task-time').value = '';
+                    document.getElementById('task-modal').classList.remove('hidden');
+                }
+                if (e.target.closest('.delete-task')) {
+                    const taskItem = e.target.closest('.task-item');
+                    const dayElement = e.target.closest('.calendar-day');
+                    const taskIndex = parseInt(taskItem.dataset.index);
+                    const year = parseInt(dayElement.dataset.year);
+                    const month = parseInt(dayElement.dataset.month);
+                    const day = parseInt(dayElement.dataset.day);
+                    calendarData[year][month][day].splice(taskIndex, 1);
+                    saveToLocalStorage();
+                    renderCalendar();
+                }
+            });
+            // Modal buttons
+            document.getElementById('close-modal').addEventListener('click', () => {
+                document.getElementById('task-modal').classList.add('hidden');
+            });
+            document.getElementById('cancel-task').addEventListener('click', () => {
+                document.getElementById('task-modal').classList.add('hidden');
+            });
+            document.getElementById('save-task').addEventListener('click', () => {
+                const taskText = document.getElementById('task-text').value.trim();
+                const taskTime = document.getElementById('task-time').value;
+                if (taskText) {
+                    const newTask = {
+                        text: taskText,
+                        time: taskTime || null,
+                        user: currentUser ? currentUser.name : null
+                    };
+                    calendarData[selectedDate.year][selectedDate.month][selectedDate.day].push(newTask);
+                    saveToLocalStorage();
+                    renderCalendar();
+                    document.getElementById('task-modal').classList.add('hidden');
+                }
+            });
+            // Export/Import
+            document.getElementById('export-btn').addEventListener('click', exportCalendar);
+            document.getElementById('import-file').addEventListener('change', function(e) {
+                const file = e.target.files[0];
+                if (!file) return;
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    try {
+                        const importedData = JSON.parse(e.target.result);
+                        mergeCalendarData(importedData);
+                        saveToLocalStorage();
+                        renderCalendar();
+                        alert('Données importées avec succès!');
+                    } catch (error) {
+                        alert('Erreur lors de l\'importation: ' + error.message);
+                    }
+                };
+                reader.readAsText(file);
+                e.target.value = ''; // Reset file input
+            });
+            // Multi-day selection
+            document.addEventListener('mousedown', handleDayMouseDown);
+            document.addEventListener('mousemove', handleDayMouseMove);
+            document.addEventListener('mouseup', handleDayMouseUp);
+            document.addEventListener('touchstart', handleDayTouchStart, { passive: false });
+            document.addEventListener('touchmove', handleDayTouchMove, { passive: false });
+            document.addEventListener('touchend', handleDayTouchEnd);
+            document.getElementById('cancel-multi-day').addEventListener('click', cancelMultiDaySelection);
+            // Enable multi-day selection mode
+            document.addEventListener('keydown', function(e) {
+                if (e.key === 'Shift' && !multiDaySelection) {
+                    startMultiDaySelection();
+                }
+            });
+            document.addEventListener('keyup', function(e) {
+                if (e.key === 'Shift' && multiDaySelection) {
+                    endMultiDaySelection();
+                }
+            });
+        }
+        // Google Sign-In
+        function handleGoogleSignIn(response) {
+            const user = response.credential ? parseJWT(response.credential) : response;
+            currentUser = {
+                name: user.name,
+                email: user.email,
+                picture: user.picture
+            };
+            document.getElementById('user-info').classList.remove('hidden');
+            document.getElementById('user-pic').src = currentUser.picture;
+            document.getElementById('user-name').textContent = currentUser.name;
+            document.querySelector('.g_id_signin').classList.add('hidden');
+            document.getElementById('sign-out').classList.remove('hidden');
+            document.getElementById('save-drive-btn').classList.remove('hidden');
+            // Load data from Google Drive if available
+            // This would require additional Google Drive API implementation
+        }
+        function parseJWT(token) {
+            const base64Url = token.split('.')[1];
+            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+            const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+            }).join(''));
+            return JSON.parse(jsonPayload);
+        }
+        document.getElementById('sign-out').addEventListener('click', function() {
+            google.accounts.id.disableAutoSelect();
+            currentUser = null;
+            document.getElementById('user-info').classList.add('hidden');
+            document.querySelector('.g_id_signin').classList.remove('hidden');
+            document.getElementById('sign-out').classList.add('hidden');
+            document.getElementById('save-drive-btn').classList.add('hidden');
+        });
+        // Save to Google Drive (placeholder - would need actual implementation)
+        document.getElementById('save-drive-btn').addEventListener('click', function() {
+            if (!currentUser) return;
+            // In a real implementation, this would use the Google Drive API
+            alert('Fonctionnalité de sauvegarde sur Google Drive à implémenter');
+        });
+        // Local storage
+        function saveToLocalStorage() {
+            localStorage.setItem('calendarData', JSON.stringify(calendarData));
+        }
+        function loadFromLocalStorage() {
+            const savedData = localStorage.getItem('calendarData');
+            if (savedData) {
+                try {
+                    const parsedData = JSON.parse(savedData);
+                    // Merge with existing structure to ensure all years are present
+                    for (let year in parsedData) {
+                        if (parsedData.hasOwnProperty(year)) {
+                            if (!calendarData[year]) {
+                                calendarData[year] = {};
+                            }
+                            for (let month in parsedData[year]) {
+                                if (parsedData[year].hasOwnProperty(month)) {
+                                    if (!calendarData[year][month]) {
+                                        calendarData[year][month] = {};
+                                    }
+                                    for (let day in parsedData[year][month]) {
+                                        if (parsedData[year][month].hasOwnProperty(day)) {
+                                            calendarData[year][month][day] = parsedData[year][month][day];
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    renderCalendar();
+                } catch (error) {
+                    console.error('Error loading from localStorage:', error);
+                }
+            }
+        }
+        // Export/Import functions
+        function exportCalendar() {
+            const dataStr = JSON.stringify(calendarData, null, 2);
+            const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+            const exportName = `calendrier_${currentYear}.json`;
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', dataUri);
+            linkElement.setAttribute('download', exportName);
+            linkElement.click();
+        }
+        function mergeCalendarData(importedData) {
+            for (let year in importedData) {
+                if (importedData.hasOwnProperty(year)) {
+                    if (!calendarData[year]) {
+                        calendarData[year] = {};
+                    }
+                    for (let month in importedData[year]) {
+                        if (importedData[year].hasOwnProperty(month)) {
+                            if (!calendarData[year][month]) {
+                                calendarData[year][month] = {};
+                            }
+                            for (let day in importedData[year][month]) {
+                                if (importedData[year][month].hasOwnProperty(day)) {
+                                    if (!calendarData[year][month][day]) {
+                                        calendarData[year][month][day] = [];
+                                    }
+                                    // Add imported tasks with user prefix if available
+                                    const importedTasks = importedData[year][month][day];
+                                    for (let task of importedTasks) {
+                                        if (currentUser) {
+                                            task.text = `[${currentUser.name}] ${task.text}`;
+                                            task.user = currentUser.name;
+                                        }
+                                        calendarData[year][month][day].push(task);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Multi-day selection functions
+        function startMultiDaySelection() {
+            multiDaySelection = true;
+            document.getElementById('multi-day-info').classList.remove('hidden');
+        }
+        function endMultiDaySelection() {
+            multiDaySelection = false;
+            document.getElementById('multi-day-info').classList.add('hidden');
+            if (multiDayStart && multiDayEnd) {
+                // Here you would implement what happens when a multi-day selection is made
+                // For example, create a task that spans multiple days
+                alert(`Sélection multiple du ${formatDate(multiDayStart)} au ${formatDate(multiDayEnd)}`);
+            }
+            multiDayStart = null;
+            multiDayEnd = null;
+            renderCalendar();
+        }
+        function cancelMultiDaySelection() {
+            multiDaySelection = false;
+            multiDayStart = null;
+            multiDayEnd = null;
+            document.getElementById('multi-day-info').classList.add('hidden');
+            renderCalendar();
+        }
+        function formatDate(date) {
+            return new Date(date.year, date.month, date.day).toLocaleDateString('fr-FR');
+        }
+        function checkMultiDaySelection(year, month, day) {
+            if (!multiDayStart || !multiDayEnd) return false;
+            const currentDate = new Date(year, month, day).getTime();
+            const startDate = new Date(multiDayStart.year, multiDayStart.month, multiDayStart.day).getTime();
+            const endDate = new Date(multiDayEnd.year, multiDayEnd.month, multiDayEnd.day).getTime();
+            const minDate = Math.min(startDate, endDate);
+            const maxDate = Math.max(startDate, endDate);
+            if (currentDate >= minDate && currentDate <= maxDate) {
+                if (currentDate === minDate) return { selected: true, position: 'multi-day-start' };
+                if (currentDate === maxDate) return { selected: true, position: 'multi-day-end' };
+                return { selected: true, position: 'multi-day-middle' };
+            }
+            return false;
+        }
+        // Mouse event handlers for multi-day selection
+        function handleDayMouseDown(e) {
+            if (!multiDaySelection) return;
+            const dayElement = e.target.closest('.calendar-day');
+            if (!dayElement) return;
+            isDragging = true;
+            const year = parseInt(dayElement.dataset.year);
+            const month = parseInt(dayElement.dataset.month);
+            const day = parseInt(dayElement.dataset.day);
+            multiDayStart = { year, month, day };
+            multiDayEnd = { year, month, day };
+            renderCalendar();
+        }
+        function handleDayMouseMove(e) {
+            if (!isDragging || !multiDaySelection) return;
+            const dayElement = e.target.closest('.calendar-day');
+            if (!dayElement) return;
+            const year = parseInt(dayElement.dataset.year);
+            const month = parseInt(dayElement.dataset.month);
+            const day = parseInt(dayElement.dataset.day);
+            multiDayEnd = { year, month, day };
+            renderCalendar();
+        }
+        function handleDayMouseUp() {
+            isDragging = false;
+        }
+        // Touch event handlers for multi-day selection
+        function handleDayTouchStart(e) {
+            if (!multiDaySelection) return;
+            e.preventDefault();
+            const touch = e.touches[0];
+            const dayElement = document.elementFromPoint(touch.clientX, touch.clientY).closest('.calendar-day');
+            if (!dayElement) return;
+            isDragging = true;
+            const year = parseInt(dayElement.dataset.year);
+            const month = parseInt(dayElement.dataset.month);
+            const day = parseInt(dayElement.dataset.day);
+            multiDayStart = { year, month, day };
+            multiDayEnd = { year, month, day };
+            renderCalendar();
+        }
+        function handleDayTouchMove(e) {
+            if (!isDragging || !multiDaySelection) return;
+            e.preventDefault();
+            const touch = e.touches[0];
+            const dayElement = document.elementFromPoint(touch.clientX, touch.clientY).closest('.calendar-day');
+            if (!dayElement) return;
+            const year = parseInt(dayElement.dataset.year);
+            const month = parseInt(dayElement.dataset.month);
+            const day = parseInt(dayElement.dataset.day);
+            multiDayEnd = { year, month, day };
+            renderCalendar();
+        }
+        function handleDayTouchEnd() {
+            isDragging = false;
+        }
+    </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=johanpautrel/calendrier-interactif" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>