Spaces:

Cezarxil
/

app

Running

App Files Files Community

Cezarxil commited on Jun 23

Commit

ada55c0

verified ·

1 Parent(s): 3527ed1

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +491 -19

README.md CHANGED Viewed

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

 ---
+title: app
+emoji: 🐳
+colorFrom: red
 colorTo: blue
 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,491 @@
-<!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>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>