Hugging Face's logo

Spaces:
Cezarxil
/
app
Running

App Files Community
app / index.html
Cezarxil's picture
Cezarxil
undefined - Initial Deployment
ada55c0 verified
Raw
History Blame Contribute Delete
22.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Client Tracker</title>
 <script src="https://cdn.tailwindcss.com"></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: 100px;
 }
 .calendar-day.today {
 background-color: #f0f9ff;
 }
 .client-event {
 font-size: 0.8rem;
 border-left: 3px solid;
 }
 .client-event:hover {
 transform: scale(1.02);
 }
 #addClientModal {
 transition: all 0.3s ease;
 }
 .modal-open {
 opacity: 1;
 pointer-events: all;
 }
 .modal-closed {
 opacity: 0;
 pointer-events: none;
 }
 </style>
</head>
<body class="bg-gray-50">
 <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-600 mb-4 md:mb-0">Client Tracker</h1>
 <div class="flex items-center space-x-4">
 <button id="prevMonth" class="p-2 rounded-full hover:bg-gray-200">
 <i class="fas fa-chevron-left"></i>
 </button>
 <h2 id="currentMonth" class="text-xl font-semibold">January 2023</h2>
 <button id="nextMonth" class="p-2 rounded-full hover:bg-gray-200">
 <i class="fas fa-chevron-right"></i>
 </button>
 <button id="todayBtn" class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200">
 Today
 </button>
 <button id="addClientBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
 <i class="fas fa-plus mr-2"></i>Add Client
 </button>
 </div>
 </header>
<!-- Calendar Grid -->
 <div class="bg-white rounded-lg shadow overflow-hidden">
 <!-- Weekday Headers -->
 <div class="grid grid-cols-7 bg-gray-100">
 <div class="py-2 text-center font-medium text-gray-500">Sun</div>
 <div class="py-2 text-center font-medium text-gray-500">Mon</div>
 <div class="py-2 text-center font-medium text-gray-500">Tue</div>
 <div class="py-2 text-center font-medium text-gray-500">Wed</div>
 <div class="py-2 text-center font-medium text-gray-500">Thu</div>
 <div class="py-2 text-center font-medium text-gray-500">Fri</div>
 <div class="py-2 text-center font-medium text-gray-500">Sat</div>
 </div>
<!-- Calendar Days -->
 <div id="calendarDays" class="grid grid-cols-7 border-t border-l border-gray-200">
 <!-- Days will be populated by JavaScript -->
 </div>
 </div>
<!-- Stats Section -->
 <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="bg-white p-4 rounded-lg shadow">
 <h3 class="text-lg font-semibold text-gray-700 mb-2">Upcoming Appointments</h3>
 <p id="upcomingCount" class="text-3xl font-bold text-blue-600">0</p>
 </div>
 <div class="bg-white p-4 rounded-lg shadow">
 <h3 class="text-lg font-semibold text-gray-700 mb-2">Total Clients</h3>
 <p id="totalClients" class="text-3xl font-bold text-green-600">0</p>
 </div>
 <div class="bg-white p-4 rounded-lg shadow">
 <h3 class="text-lg font-semibold text-gray-700 mb-2">Recent Follow-ups</h3>
 <p id="recentFollowups" class="text-3xl font-bold text-purple-600">0</p>
 </div>
 </div>
 </div>
<!-- Add Client Modal -->
 <div id="addClientModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center modal-closed">
 <div class="bg-white rounded-lg p-6 w-full max-w-md">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-semibold">Add New Client</h3>
 <button id="closeModal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <form id="clientForm" class="space-y-4">
 <div>
 <label for="clientName" class="block text-sm font-medium text-gray-700">Client Name</label>
 <input type="text" id="clientName" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <div>
 <label for="appointmentDate" class="block text-sm font-medium text-gray-700">Appointment Date</label>
 <input type="date" id="appointmentDate" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <div>
 <label for="appointmentTime" class="block text-sm font-medium text-gray-700">Appointment Time</label>
 <input type="time" id="appointmentTime" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <div>
 <label for="clientEmail" class="block text-sm font-medium text-gray-700">Email</label>
 <input type="email" id="clientEmail" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <div>
 <label for="clientPhone" class="block text-sm font-medium text-gray-700">Phone</label>
 <input type="tel" id="clientPhone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <div>
 <label for="clientNotes" class="block text-sm font-medium text-gray-700">Notes</label>
 <textarea id="clientNotes" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
 </div>
 <div class="flex justify-end space-x-3">
 <button type="button" id="cancelAddClient" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
 Cancel
 </button>
 <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
 Save Client
 </button>
 </div>
 </form>
 </div>
 </div>
<!-- Client Details Modal -->
 <div id="clientDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center modal-closed">
 <div class="bg-white rounded-lg p-6 w-full max-w-md">
 <div class="flex justify-between items-center mb-4">
 <h3 id="clientDetailsTitle" class="text-xl font-semibold">Client Details</h3>
 <button id="closeDetailsModal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div id="clientDetailsContent" class="space-y-3">
 <!-- Client details will be populated here -->
 </div>
 <div class="mt-6 flex justify-between">
 <button id="deleteClientBtn" class="px-4 py-2 bg-red-100 text-red-600 rounded-md hover:bg-red-200">
 Delete
 </button>
 <button id="editClientBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
 Edit
 </button>
 </div>
 </div>
 </div>
<script>
 // Initialize variables
 let currentDate = new Date();
 let clients = JSON.parse(localStorage.getItem('clients')) || [];
 let selectedClientId = null;
 // DOM Elements
 const calendarDays = document.getElementById('calendarDays');
 const currentMonth = document.getElementById('currentMonth');
 const prevMonthBtn = document.getElementById('prevMonth');
 const nextMonthBtn = document.getElementById('nextMonth');
 const todayBtn = document.getElementById('todayBtn');
 const addClientBtn = document.getElementById('addClientBtn');
 const addClientModal = document.getElementById('addClientModal');
 const closeModal = document.getElementById('closeModal');
 const cancelAddClient = document.getElementById('cancelAddClient');
 const clientForm = document.getElementById('clientForm');
 const clientDetailsModal = document.getElementById('clientDetailsModal');
 const closeDetailsModal = document.getElementById('closeDetailsModal');
 const deleteClientBtn = document.getElementById('deleteClientBtn');
 const editClientBtn = document.getElementById('editClientBtn');
 const upcomingCount = document.getElementById('upcomingCount');
 const totalClients = document.getElementById('totalClients');
 const recentFollowups = document.getElementById('recentFollowups');
 // Event Listeners
 prevMonthBtn.addEventListener('click', () => {
 currentDate.setMonth(currentDate.getMonth() - 1);
 renderCalendar();
 });
 nextMonthBtn.addEventListener('click', () => {
 currentDate.setMonth(currentDate.getMonth() + 1);
 renderCalendar();
 });
 todayBtn.addEventListener('click', () => {
 currentDate = new Date();
 renderCalendar();
 });
 addClientBtn.addEventListener('click', () => {
 // Set default date to today
 const today = new Date();
 const formattedDate = today.toISOString().split('T')[0];
 document.getElementById('appointmentDate').value = formattedDate;
// Set default time to next hour
 const nextHour = today.getHours() + 1;
 document.getElementById('appointmentTime').value = `${nextHour.toString().padStart(2, '0')}:00`;
addClientModal.classList.remove('modal-closed');
 addClientModal.classList.add('modal-open');
 });
 closeModal.addEventListener('click', closeModals);
 cancelAddClient.addEventListener('click', closeModals);
 closeDetailsModal.addEventListener('click', closeModals);
 clientForm.addEventListener('submit', (e) => {
 e.preventDefault();
 addNewClient();
 });
 deleteClientBtn.addEventListener('click', deleteClient);
 editClientBtn.addEventListener('click', editClient);
 // Functions
 function renderCalendar() {
 // Clear previous calendar days
 calendarDays.innerHTML = '';
 // Set current month text
 currentMonth.textContent = new Intl.DateTimeFormat('en-US', {
month: 'long',
year: 'numeric'
}).format(currentDate);
 // Get first day of month and total days in month
 const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
 const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
 const daysInMonth = lastDay.getDate();
 // Get day of week for first day (0 = Sunday, 6 = Saturday)
 const startingDay = firstDay.getDay();
 // Get today's date for comparison
 const today = new Date();
 const isCurrentMonth = today.getFullYear() === currentDate.getFullYear() &&
today.getMonth() === currentDate.getMonth();
 // Add empty cells for days before the first day of the month
 for (let i = 0; i < startingDay; i++) {
 const dayElement = document.createElement('div');
 dayElement.className = 'calendar-day border-r border-b border-gray-200 p-2 bg-gray-50';
 calendarDays.appendChild(dayElement);
 }
 // Add cells for each day of the month
 for (let day = 1; day <= daysInMonth; day++) {
 const dayElement = document.createElement('div');
 dayElement.className = 'calendar-day border-r border-b border-gray-200 p-2';
// Highlight today's date
 if (isCurrentMonth && day === today.getDate()) {
 dayElement.classList.add('today');
 }
 // Add day number
 const dayNumber = document.createElement('div');
 dayNumber.className = 'text-right font-medium';
 dayNumber.textContent = day;
 dayElement.appendChild(dayNumber);
 // Add client events for this day
 const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
 const clientsForDay = getClientsForDate(dayDate);
clientsForDay.forEach(client => {
 const eventElement = document.createElement('div');
 eventElement.className = 'client-event mb-1 p-1 rounded bg-blue-50 border-l-blue-500 cursor-pointer hover:shadow';
 eventElement.innerHTML = `
 <div class="font-medium text-blue-700">${client.time}</div>
 <div class="text-blue-600 truncate">${client.name}</div>
 `;
 eventElement.addEventListener('click', () => showClientDetails(client.id));
 dayElement.appendChild(eventElement);
 });
 calendarDays.appendChild(dayElement);
 }
 updateStats();
 }
 function getClientsForDate(date) {
 return clients.filter(client => {
 const clientDate = new Date(client.date);
 return clientDate.getFullYear() === date.getFullYear() &&
 clientDate.getMonth() === date.getMonth() &&
 clientDate.getDate() === date.getDate();
 }).sort((a, b) => a.time.localeCompare(b.time));
 }
 function addNewClient() {
 const name = document.getElementById('clientName').value;
 const date = document.getElementById('appointmentDate').value;
 const time = document.getElementById('appointmentTime').value;
 const email = document.getElementById('clientEmail').value;
 const phone = document.getElementById('clientPhone').value;
 const notes = document.getElementById('clientNotes').value;
 const newClient = {
 id: Date.now().toString(),
 name,
 date,
 time,
 email,
 phone,
 notes,
 createdAt: new Date().toISOString()
 };
 clients.push(newClient);
 saveClients();
 renderCalendar();
 closeModals();
 clientForm.reset();
 }
 function showClientDetails(clientId) {
 selectedClientId = clientId;
 const client = clients.find(c => c.id === clientId);
if (!client) return;
 document.getElementById('clientDetailsTitle').textContent = client.name;
const detailsContent = document.getElementById('clientDetailsContent');
 detailsContent.innerHTML = `
 <div class="flex items-center">
 <i class="fas fa-calendar-day text-blue-500 mr-2"></i>
 <div>
 <div class="text-sm text-gray-500">Date</div>
 <div>${formatDate(client.date)} at ${client.time}</div>
 </div>
 </div>
 ${client.email ? `
 <div class="flex items-center">
 <i class="fas fa-envelope text-blue-500 mr-2"></i>
 <div>
 <div class="text-sm text-gray-500">Email</div>
 <div>${client.email}</div>
 </div>
 </div>` : ''}
 ${client.phone ? `
 <div class="flex items-center">
 <i class="fas fa-phone text-blue-500 mr-2"></i>
 <div>
 <div class="text-sm text-gray-500">Phone</div>
 <div>${client.phone}</div>
 </div>
 </div>` : ''}
 ${client.notes ? `
 <div class="flex items-start">
 <i class="fas fa-sticky-note text-blue-500 mr-2 mt-1"></i>
 <div>
 <div class="text-sm text-gray-500">Notes</div>
 <div>${client.notes}</div>
 </div>
 </div>` : ''}
 `;
 clientDetailsModal.classList.remove('modal-closed');
 clientDetailsModal.classList.add('modal-open');
 }
 function deleteClient() {
 clients = clients.filter(client => client.id !== selectedClientId);
 saveClients();
 renderCalendar();
 closeModals();
 }
 function editClient() {
 const client = clients.find(c => c.id === selectedClientId);
 if (!client) return;
 // Fill the form with client data
 document.getElementById('clientName').value = client.name;
 document.getElementById('appointmentDate').value = client.date;
 document.getElementById('appointmentTime').value = client.time;
 document.getElementById('clientEmail').value = client.email || '';
 document.getElementById('clientPhone').value = client.phone || '';
 document.getElementById('clientNotes').value = client.notes || '';
 // Change form to update mode
 clientForm.removeEventListener('submit', addNewClient);
 clientForm.addEventListener('submit', updateClient);
 // Show the add client modal
 closeModals();
 addClientModal.classList.remove('modal-closed');
 addClientModal.classList.add('modal-open');
 }
 function updateClient(e) {
 e.preventDefault();
const name = document.getElementById('clientName').value;
 const date = document.getElementById('appointmentDate').value;
 const time = document.getElementById('appointmentTime').value;
 const email = document.getElementById('clientEmail').value;
 const phone = document.getElementById('clientPhone').value;
 const notes = document.getElementById('clientNotes').value;
 const updatedClient = {
 id: selectedClientId,
 name,
 date,
 time,
 email,
 phone,
 notes,
 createdAt: clients.find(c => c.id === selectedClientId).createdAt
 };
 clients = clients.map(client =>
client.id === selectedClientId ? updatedClient : client
 );
 saveClients();
 renderCalendar();
 closeModals();
 clientForm.reset();
 // Reset form to add mode
 clientForm.removeEventListener('submit', updateClient);
 clientForm.addEventListener('submit', addNewClient);
 }
 function closeModals() {
 addClientModal.classList.remove('modal-open');
 addClientModal.classList.add('modal-closed');
 clientDetailsModal.classList.remove('modal-open');
 clientDetailsModal.classList.add('modal-closed');
 }
 function saveClients() {
 localStorage.setItem('clients', JSON.stringify(clients));
 updateStats();
 }
 function formatDate(dateString) {
 const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
 return new Date(dateString).toLocaleDateString('en-US', options);
 }
 function updateStats() {
 // Upcoming appointments (next 7 days)
 const today = new Date();
 const nextWeek = new Date(today);
 nextWeek.setDate(today.getDate() + 7);
const upcoming = clients.filter(client => {
 const clientDate = new Date(client.date);
 return clientDate >= today && clientDate <= nextWeek;
 });
upcomingCount.textContent = upcoming.length;
 totalClients.textContent = clients.length;
// Recent follow-ups (last 7 days)
 const lastWeek = new Date(today);
 lastWeek.setDate(today.getDate() - 7);
const recent = clients.filter(client => {
 const clientDate = new Date(client.createdAt);
 return clientDate >= lastWeek && clientDate <= today;
 });
recentFollowups.textContent = recent.length;
 }
 // Initialize the calendar
 renderCalendar();
 </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=Cezarxil/app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>