Spaces:

BitDown
/

calendrier-interactif

Running

File size: 31,553 Bytes

035a859

<!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>