Spaces:

kasramojallal
/

application-tracker

Running

App Files Files Community

kasramojallal commited on Apr 23, 2025

Commit

6a87196

verified ·

1 Parent(s): 44b0e60

Add 2 files

Browse files

Files changed (2) hide show

index.html +426 -766
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -3,850 +3,510 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Job Application Tracker Pro</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">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script>
     <style>
-        .fade-in {
-            animation: fadeIn 0.3s ease-in-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .pulse {
-            animation: pulse 1s infinite;
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        .modal {
-            transition: opacity 0.3s ease;
-        }
-        .modal-overlay {
-            background-color: rgba(0, 0, 0, 0.5);
         }
         .chart-bar {
-            transition: height 0.5s ease-out;
-        }
-        .progress-ring__circle {
-            transition: stroke-dashoffset 0.5s ease-out;
-            transform: rotate(-90deg);
-            transform-origin: 50% 50%;
-        }
-        .glow {
-            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
     <div class="container mx-auto px-4 py-8 max-w-4xl">
-        <header class="text-center mb-8">
-            <h1 class="text-4xl font-bold text-indigo-800 mb-2">Job Application Tracker Pro</h1>
-            <p class="text-indigo-600">Track, analyze, and optimize your job search</p>
         </header>
-        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
-            <div class="flex flex-col md:flex-row justify-between items-center mb-6">
-                <div class="text-center md:text-left mb-4 md:mb-0">
-                    <h2 class="text-2xl font-semibold text-gray-800">Today's Applications</h2>
-                    <p class="text-gray-500" id="today-date">Loading date...</p>
-                    <div class="mt-2 flex items-center justify-center md:justify-start">
-                        <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full flex items-center">
-                            <i class="fas fa-clock mr-1 text-xs"></i>
-                            <span id="timezone-display">Detecting timezone...</span>
-                        </span>
                     </div>
                 </div>
-                <div class="flex items-center space-x-4">
-                    <div class="relative">
-                        <svg class="w-24 h-24">
-                            <circle
-                                class="text-gray-200"
-                                stroke-width="8"
-                                stroke="currentColor"
-                                fill="transparent"
-                                r="36"
-                                cx="40"
-                                cy="40"
-                            />
-                            <circle
-                                class="progress-ring__circle text-indigo-600"
-                                stroke-width="8"
-                                stroke-linecap="round"
-                                stroke="currentColor"
-                                fill="transparent"
-                                r="36"
-                                cx="40"
-                                cy="40"
-                                id="progress-ring"
-                            />
-                        </svg>
-                        <div class="absolute inset-0 flex items-center justify-center">
-                            <span class="text-2xl font-bold text-indigo-800" id="today-count">0</span>
-                        </div>
-                    </div>
-                    <div class="flex flex-col space-y-2">
-                        <div class="flex space-x-2">
-                            <button id="decrease-btn" class="bg-red-500 hover:bg-red-600 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-md transition-all transform hover:scale-105">
-                                <i class="fas fa-minus text-lg"></i>
-                            </button>
-                            <button id="add-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-md transition-all transform hover:scale-105">
-                                <i class="fas fa-plus text-lg"></i>
-                            </button>
-                        </div>
-                        <button id="add-custom-btn" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-full w-full h-8 flex items-center justify-center shadow-md text-sm transition-all">
-                            <i class="fas fa-calendar-day mr-1"></i> Custom Date
                         </button>
                     </div>
                 </div>
             </div>
-            <div class="border-t pt-4">
-                <div class="flex justify-between items-center mb-2">
-                    <h3 class="font-medium text-gray-700">Total Applications</h3>
-                    <span class="text-xl font-bold text-indigo-800" id="total-count">0</span>
-                </div>
-                <div class="w-full bg-gray-200 rounded-full h-2.5">
-                    <div id="total-progress" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
-                </div>
-            </div>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-            <div class="bg-white rounded-xl shadow-lg p-6">
-                <h2 class="text-xl font-semibold text-gray-800 mb-4">Weekly Overview</h2>
-                <div class="flex justify-between items-end h-40 mt-6">
-                    <!-- Weekly chart bars will be added here -->
-                </div>
-            </div>
-            <div class="bg-white rounded-xl shadow-lg p-6">
-                <h2 class="text-xl font-semibold text-gray-800 mb-4">Monthly Progress</h2>
-                <div class="flex justify-center">
-                    <div id="monthly-chart" class="w-full h-40">
-                        <!-- Monthly chart will be added here -->
-                    </div>
-                </div>
             </div>
         </div>
-        <div class="bg-white rounded-xl shadow-lg p-6">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-2xl font-semibold text-gray-800">Application History</h2>
-                <div class="flex space-x-2">
-                    <button id="settings-btn" class="text-indigo-600 hover:text-indigo-800 flex items-center">
-                        <i class="fas fa-cog mr-1"></i>
-                        <span>Settings</span>
-                    </button>
-                </div>
-            </div>
-            <div id="history-list" class="space-y-3">
-                <div class="text-center py-8 text-gray-400" id="empty-state">
-                    <i class="fas fa-clipboard-list text-4xl mb-2"></i>
-                    <p>No applications recorded yet</p>
-                    <button id="get-started-btn" class="mt-4 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md">
-                        Add Your First Application
-                    </button>
-                </div>
-                <!-- History items will be added here dynamically -->
-            </div>
-        </div>
-        <div class="mt-6 text-center text-sm text-gray-500">
-            <p>Every application is a step closer to your dream job. Keep going!</p>
-        </div>
-    </div>
-    <!-- Modal for custom date entry -->
-    <div id="date-modal" class="fixed inset-0 flex items-center justify-center z-50 modal opacity-0 pointer-events-none">
-        <div class="modal-overlay absolute inset-0"></div>
-        <div class="bg-white rounded-xl shadow-xl p-6 z-10 w-full max-w-md transform transition-all scale-95">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-xl font-semibold text-gray-800">Add/Edit Applications</h3>
-                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <div class="mb-4">
-                <label for="custom-date" class="block text-sm font-medium text-gray-700 mb-1">Select Date</label>
-                <input type="date" id="custom-date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-            </div>
             <div class="mb-4">
-                <label for="custom-count" class="block text-sm font-medium text-gray-700 mb-1">Number of Applications</label>
-                <div class="flex items-center">
-                    <button id="decrease-custom" class="bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-l-md w-10 h-10 flex items-center justify-center">
-                        <i class="fas fa-minus"></i>
-                    </button>
-                    <input type="number" id="custom-count" min="0" value="1" class="w-full px-3 py-2 border-t border-b border-gray-300 text-center focus:outline-none">
-                    <button id="increase-custom" class="bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-r-md w-10 h-10 flex items-center justify-center">
-                        <i class="fas fa-plus"></i>
-                    </button>
                 </div>
             </div>
-            <div class="mb-4">
-                <label for="custom-notes" class="block text-sm font-medium text-gray-700 mb-1">Notes (optional)</label>
-                <textarea id="custom-notes" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Add any notes about these applications..."></textarea>
-            </div>
-            <div class="flex justify-end space-x-3">
-                <button id="delete-entry" class="px-4 py-2 text-red-600 hover:text-red-800 hidden">
-                    <i class="fas fa-trash mr-1"></i> Delete
-                </button>
-                <button id="cancel-modal" class="px-4 py-2 text-gray-600 hover:text-gray-800">
-                    Cancel
                 </button>
-                <button id="save-custom" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md">
-                    Save
                 </button>
             </div>
         </div>
-    </div>
-    <!-- Settings Modal -->
-    <div id="settings-modal" class="fixed inset-0 flex items-center justify-center z-50 modal opacity-0 pointer-events-none">
-        <div class="modal-overlay absolute inset-0"></div>
-        <div class="bg-white rounded-xl shadow-xl p-6 z-10 w-full max-w-md transform transition-all scale-95">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-xl font-semibold text-gray-800">Settings</h3>
-                <button id="close-settings" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
             </div>
-            <div class="mb-4">
-                <label for="timezone-select" class="block text-sm font-medium text-gray-700 mb-1">Timezone</label>
-                <select id="timezone-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                    <option value="auto">Auto-detect</option>
-                    <!-- Timezone options will be added dynamically -->
-                </select>
-            </div>
-            <div class="mb-4">
-                <label for="daily-goal" class="block text-sm font-medium text-gray-700 mb-1">Daily Goal</label>
-                <input type="number" id="daily-goal" min="1" value="5" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-            </div>
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Visual Theme</label>
-                <div class="flex space-x-2">
-                    <button data-theme="indigo" class="theme-btn w-8 h-8 rounded-full bg-indigo-600 border-2 border-indigo-800"></button>
-                    <button data-theme="emerald" class="theme-btn w-8 h-8 rounded-full bg-emerald-600 border-2 border-transparent"></button>
-                    <button data-theme="rose" class="theme-btn w-8 h-8 rounded-full bg-rose-600 border-2 border-transparent"></button>
-                    <button data-theme="violet" class="theme-btn w-8 h-8 rounded-full bg-violet-600 border-2 border-transparent"></button>
-                    <button data-theme="sky" class="theme-btn w-8 h-8 rounded-full bg-sky-600 border-2 border-transparent"></button>
-                </div>
             </div>
-            <div class="flex justify-end space-x-3">
-                <button id="cancel-settings" class="px-4 py-2 text-gray-600 hover:text-gray-800">
-                    Cancel
-                </button>
-                <button id="save-settings" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md">
-                    Save Settings
-                </button>
             </div>
         </div>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Get elements
-            const addBtn = document.getElementById('add-btn');
-            const decreaseBtn = document.getElementById('decrease-btn');
-            const addCustomBtn = document.getElementById('add-custom-btn');
-            const todayCountEl = document.getElementById('today-count');
-            const totalCountEl = document.getElementById('total-count');
-            const historyList = document.getElementById('history-list');
-            const emptyState = document.getElementById('empty-state');
-            const getStartedBtn = document.getElementById('get-started-btn');
-            const todayDateEl = document.getElementById('today-date');
-            const timezoneDisplay = document.getElementById('timezone-display');
-            const progressRing = document.getElementById('progress-ring');
-            const totalProgress = document.getElementById('total-progress');
-            // Modal elements
-            const dateModal = document.getElementById('date-modal');
-            const closeModal = document.getElementById('close-modal');
-            const cancelModal = document.getElementById('cancel-modal');
-            const saveCustom = document.getElementById('save-custom');
-            const customDate = document.getElementById('custom-date');
-            const customCount = document.getElementById('custom-count');
-            const customNotes = document.getElementById('custom-notes');
-            const decreaseCustom = document.getElementById('decrease-custom');
-            const increaseCustom = document.getElementById('increase-custom');
-            const deleteEntryBtn = document.getElementById('delete-entry');
-            // Settings modal elements
-            const settingsModal = document.getElementById('settings-modal');
-            const settingsBtn = document.getElementById('settings-btn');
-            const closeSettings = document.getElementById('close-settings');
-            const cancelSettings = document.getElementById('cancel-settings');
-            const saveSettings = document.getElementById('save-settings');
-            const timezoneSelect = document.getElementById('timezone-select');
-            const dailyGoalInput = document.getElementById('daily-goal');
-            const themeButtons = document.querySelectorAll('.theme-btn');
-            // Initialize with default settings
-            let userSettings = JSON.parse(localStorage.getItem('jobAppSettings')) || {
-                timezone: 'manual',
-                dailyGoal: 5,
-                theme: 'indigo'
-            };
-            // Apply theme
-            function applyTheme(theme) {
-                const colors = {
-                    indigo: { primary: 'indigo', secondary: 'blue' },
-                    emerald: { primary: 'emerald', secondary: 'green' },
-                    rose: { primary: 'rose', secondary: 'pink' },
-                    violet: { primary: 'violet', secondary: 'purple' },
-                    sky: { primary: 'sky', secondary: 'cyan' }
-                };
-                const colorSet = colors[theme] || colors.indigo;
-                // Update all elements with theme classes
-                document.querySelectorAll('[class*="bg-indigo-"]').forEach(el => {
-                    el.className = el.className.replace(/bg-indigo-\d+/g, `bg-${colorSet.primary}-600`);
-                });
-                document.querySelectorAll('[class*="text-indigo-"]').forEach(el => {
-                    el.className = el.className.replace(/text-indigo-\d+/g, `text-${colorSet.primary}-800`);
-                });
-                document.querySelectorAll('[class*="border-indigo-"]').forEach(el => {
-                    el.className = el.className.replace(/border-indigo-\d+/g, `border-${colorSet.primary}-800`);
-                });
-                document.querySelectorAll('[class*="from-blue-"]').forEach(el => {
-                    el.className = el.className.replace(/from-blue-\d+/g, `from-${colorSet.secondary}-50`);
-                });
-                document.querySelectorAll('[class*="to-indigo-"]').forEach(el => {
-                    el.className = el.className.replace(/to-indigo-\d+/g, `to-${colorSet.primary}-100`);
-                });
-                // Update progress bar
-                if (totalProgress) {
-                    totalProgress.className = totalProgress.className.replace(/bg-indigo-\d+/g, `bg-${colorSet.primary}-600`);
-                }
-                // Update theme buttons
-                themeButtons.forEach(btn => {
-                    if (btn.dataset.theme === theme) {
-                        btn.classList.replace('border-transparent', `border-${colorSet.primary}-800`);
-                    } else {
-                        btn.classList.replace(`border-${colorSet.primary}-800`, 'border-transparent');
-                    }
-                });
-            }
-            // Apply saved theme
-            applyTheme(userSettings.theme);
-            // Populate timezone dropdown
-            function populateTimezones() {
-                const timezones = moment.tz.names();
-                timezoneSelect.innerHTML = '<option value="auto">Auto-detect</option>';
-                timezones.forEach(tz => {
-                    const option = document.createElement('option');
-                    option.value = tz;
-                    option.textContent = tz;
-                    if (tz === userSettings.timezone && userSettings.timezone !== 'auto') {
-                        option.selected = true;
-                    }
-                    timezoneSelect.appendChild(option);
-                });
-            }
-            populateTimezones();
-            // Get current date based on user's timezone
-            function getCurrentDate() {
-                if (userSettings.timezone === 'auto') {
-                    return moment().format('YYYY-MM-DD');
-                } else {
-                    return moment().tz(userSettings.timezone).format('YYYY-MM-DD');
-                }
-            }
-            // Format date for display
-            function formatDateDisplay(dateStr) {
-                if (userSettings.timezone === 'auto') {
-                    return moment(dateStr).format('dddd, MMMM D, YYYY');
-                } else {
-                    return moment.tz(dateStr, userSettings.timezone).format('dddd, MMMM D, YYYY');
-                }
-            }
-            // Set today's date
-            const todayKey = getCurrentDate();
-            todayDateEl.textContent = formatDateDisplay(todayKey);
-            // Display timezone
-            function displayTimezone() {
-                if (userSettings.timezone === 'auto') {
-                    const detectedTz = moment.tz.guess();
-                    timezoneDisplay.textContent = detectedTz;
-                } else {
-                    timezoneDisplay.textContent = userSettings.timezone;
-                }
-            }
-            displayTimezone();
-            // Set default date in modal to today
-            customDate.value = todayKey;
-            dailyGoalInput.value = userSettings.dailyGoal;
-            // Initialize data from localStorage or create new
-            let appData = JSON.parse(localStorage.getItem('jobAppData')) || {
-                total: 0,
-                history: []
-            };
-            // Check if today's date exists in history
-            let todayEntry = appData.history.find(entry => entry.date === todayKey);
-            if (!todayEntry) {
-                todayEntry = { date: todayKey, count: 0, notes: '' };
-                appData.history.unshift(todayEntry);
-                saveData();
             }
-            // Update UI
-            updateCounts();
-            renderHistory();
-            renderCharts();
-            // Update progress ring
-            function updateProgressRing() {
-                const radius = 36;
-                const circumference = radius * 2 * Math.PI;
-                const progress = (todayEntry.count / userSettings.dailyGoal) * 100;
-                const offset = circumference - (progress / 100) * circumference;
-                progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
-                progressRing.style.strokeDashoffset = offset;
-                if (progress >= 100) {
-                    progressRing.classList.add('glow');
-                } else {
-                    progressRing.classList.remove('glow');
-                }
-            }
-            // Add button click handler
-            addBtn.addEventListener('click', function() {
-                todayEntry.count++;
-                appData.total++;
-                // Add animation effect
-                this.classList.add('pulse');
-                setTimeout(() => this.classList.remove('pulse'), 1000);
-                saveData();
-                updateCounts();
-                renderHistory();
-                renderCharts();
-            });
-            // Decrease button click handler
-            decreaseBtn.addEventListener('click', function() {
-                if (todayEntry.count > 0) {
-                    todayEntry.count--;
-                    appData.total--;
-                    saveData();
-                    updateCounts();
-                    renderHistory();
-                    renderCharts();
-                }
-            });
-            // Add custom date button click handler
-            addCustomBtn.addEventListener('click', function() {
-                // Reset modal values
-                customDate.value = todayKey;
-                customCount.value = 1;
-                customNotes.value = '';
-                deleteEntryBtn.classList.add('hidden');
-                // Show modal
-                openModal();
-            });
-            // Get started button
-            getStartedBtn.addEventListener('click', function() {
-                addBtn.click();
             });
-            // Modal open/close handlers
-            function openModal() {
-                dateModal.classList.remove('opacity-0', 'pointer-events-none');
-                dateModal.classList.add('opacity-100', 'pointer-events-auto');
-                setTimeout(() => {
-                    dateModal.querySelector('.z-10').classList.remove('scale-95');
-                    dateModal.querySelector('.z-10').classList.add('scale-100');
-                }, 10);
-            }
-            function closeModalHandler() {
-                dateModal.querySelector('.z-10').classList.remove('scale-100');
-                dateModal.querySelector('.z-10').classList.add('scale-95');
-                setTimeout(() => {
-                    dateModal.classList.remove('opacity-100', 'pointer-events-auto');
-                    dateModal.classList.add('opacity-0', 'pointer-events-none');
-                }, 200);
             }
-            closeModal.addEventListener('click', closeModalHandler);
-            cancelModal.addEventListener('click', closeModalHandler);
-            // Settings modal handlers
-            function openSettingsModal() {
-                settingsModal.classList.remove('opacity-0', 'pointer-events-none');
-                settingsModal.classList.add('opacity-100', 'pointer-events-auto');
-                setTimeout(() => {
-                    settingsModal.querySelector('.z-10').classList.remove('scale-95');
-                    settingsModal.querySelector('.z-10').classList.add('scale-100');
-                }, 10);
             }
-            function closeSettingsHandler() {
-                settingsModal.querySelector('.z-10').classList.remove('scale-100');
-                settingsModal.querySelector('.z-10').classList.add('scale-95');
-                setTimeout(() => {
-                    settingsModal.classList.remove('opacity-100', 'pointer-events-auto');
-                    settingsModal.classList.add('opacity-0', 'pointer-events-none');
-                }, 200);
             }
-            settingsBtn.addEventListener('click', openSettingsModal);
-            closeSettings.addEventListener('click', closeSettingsHandler);
-            cancelSettings.addEventListener('click', closeSettingsHandler);
-            // Save settings
-            saveSettings.addEventListener('click', function() {
-                userSettings.timezone = timezoneSelect.value;
-                userSettings.dailyGoal = parseInt(dailyGoalInput.value);
-                // Find and apply selected theme
-                themeButtons.forEach(btn => {
-                    if (btn.classList.contains('border-indigo-800') ||
-                        btn.classList.contains('border-emerald-800') ||
-                        btn.classList.contains('border-rose-800') ||
-                        btn.classList.contains('border-violet-800') ||
-                        btn.classList.contains('border-sky-800')) {
-                        userSettings.theme = btn.dataset.theme;
-                    }
-                });
-                localStorage.setItem('jobAppSettings', JSON.stringify(userSettings));
-                applyTheme(userSettings.theme);
-                displayTimezone();
-                closeSettingsHandler();
-                // Update today's date if timezone changed
-                const newTodayKey = getCurrentDate();
-                if (newTodayKey !== todayKey) {
-                    // Need to handle timezone change - this would require more complex logic
-                    // For now, we'll just refresh the display
-                    location.reload();
-                }
-            });
-            // Theme selection
-            themeButtons.forEach(btn => {
-                btn.addEventListener('click', function() {
-                    themeButtons.forEach(b => {
-                        b.classList.replace(/border-\w+-800/g, 'border-transparent');
-                    });
-                    const theme = this.dataset.theme;
-                    const colorSet = {
-                        indigo: 'indigo',
-                        emerald: 'emerald',
-                        rose: 'rose',
-                        violet: 'violet',
-                        sky: 'sky'
-                    }[theme];
-                    this.classList.replace('border-transparent', `border-${colorSet}-800`);
-                });
-            });
-            // Custom count controls
-            decreaseCustom.addEventListener('click', function() {
-                if (customCount.value > 0) {
-                    customCount.value--;
-                }
-            });
-            increaseCustom.addEventListener('click', function() {
-                customCount.value++;
-            });
-            // Save custom entry
-            saveCustom.addEventListener('click', function() {
-                const selectedDate = customDate.value;
-                const count = parseInt(customCount.value);
-                const notes = customNotes.value.trim();
-                if (isNaN(count) || count < 0) {
-                    alert('Please enter a valid number of applications');
-                    return;
-                }
-                // Find or create entry for selected date
-                let entry = appData.history.find(entry => entry.date === selectedDate);
-                if (entry) {
-                    // Calculate the difference to update total correctly
-                    const diff = count - (entry.count || 0);
-                    entry.count = count;
-                    entry.notes = notes;
-                    appData.total += diff;
                 } else {
-                    // Create new entry
-                    entry = { date: selectedDate, count: count, notes: notes };
-                    appData.history.unshift(entry);
-                    appData.total += count;
-                }
-                // If this is today's entry, update todayEntry reference
-                if (selectedDate === todayKey) {
-                    todayEntry = entry;
                 }
-                saveData();
-                updateCounts();
-                renderHistory();
-                renderCharts();
-                closeModalHandler();
-            });
-            // Delete entry
-            deleteEntryBtn.addEventListener('click', function() {
-                const selectedDate = customDate.value;
-                const entryIndex = appData.history.findIndex(entry => entry.date === selectedDate);
-                if (entryIndex !== -1) {
-                    const entry = appData.history[entryIndex];
-                    appData.total -= entry.count;
-                    appData.history.splice(entryIndex, 1);
-                    saveData();
-                    updateCounts();
-                    renderHistory();
-                    renderCharts();
-                    closeModalHandler();
-                }
-            });
-            // Update count displays
-            function updateCounts() {
-                todayCountEl.textContent = todayEntry.count;
-                totalCountEl.textContent = appData.total;
-                // Update progress ring
-                updateProgressRing();
-                // Update total progress (simple visualization)
-                const maxTotal = 100; // Just for visualization purposes
-                const progressPercent = Math.min((appData.total / maxTotal) * 100, 100);
-                totalProgress.style.width = `${progressPercent}%`;
-                // Add animation when count changes
-                todayCountEl.classList.add('fade-in');
-                totalCountEl.classList.add('fade-in');
-                setTimeout(() => {
-                    todayCountEl.classList.remove('fade-in');
-                    totalCountEl.classList.remove('fade-in');
-                }, 300);
             }
-            // Render history list
-            function renderHistory() {
-                if (appData.history.length === 0 || (appData.history.length === 1 && appData.history[0].count === 0)) {
-                    emptyState.style.display = 'block';
-                    return;
-                }
-                emptyState.style.display = 'none';
-                historyList.innerHTML = '';
-                // Sort history by date (newest first)
-                const sortedHistory = [...appData.history].sort((a, b) => new Date(b.date) - new Date(a.date));
-                sortedHistory.forEach(entry => {
-                    if (entry.count === 0 && entry.date === todayKey) return;
-                    const entryDate = new Date(entry.date);
-                    const isToday = entry.date === todayKey;
-                    let formattedEntryDate;
-                    if (userSettings.timezone === 'auto') {
-                        formattedEntryDate = moment(entry.date).format('ddd, MMM D, YYYY');
-                    } else {
-                        formattedEntryDate = moment.tz(entry.date, userSettings.timezone).format('ddd, MMM D, YYYY');
-                    }
-                    const historyItem = document.createElement('div');
-                    historyItem.className = 'flex justify-between items-center p-3 bg-gray-50 rounded-lg fade-in hover:bg-gray-100 cursor-pointer transition-colors';
-                    if (isToday) {
-                        historyItem.classList.add('border-l-4', `border-${userSettings.theme}-500`);
-                    }
-                    historyItem.innerHTML = `
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 rounded-full bg-${userSettings.theme}-100 flex items-center justify-center mr-3">
-                                <i class="fas fa-briefcase text-${userSettings.theme}-600"></i>
-                            </div>
-                            <div>
-                                <p class="font-medium ${isToday ? `text-${userSettings.theme}-800` : 'text-gray-800'}">${formattedEntryDate}</p>
-                                ${entry.notes ? `<p class="text-xs text-gray-500 truncate max-w-xs">${entry.notes}</p>` : ''}
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <span class="text-lg font-bold ${isToday ? `text-${userSettings.theme}-800` : 'text-gray-700'}">${entry.count}</span>
-                        </div>
-                    `;
-                    // Add click handler to edit entry
-                    historyItem.addEventListener('click', function() {
-                        customDate.value = entry.date;
-                        customCount.value = entry.count;
-                        customNotes.value = entry.notes || '';
-                        deleteEntryBtn.classList.remove('hidden');
-                        // Change save button behavior to update existing entry
-                        saveCustom.onclick = function() {
-                            const newCount = parseInt(customCount.value);
-                            const notes = customNotes.value.trim();
-                            if (isNaN(newCount) || newCount < 0) {
-                                alert('Please enter a valid number of applications');
-                                return;
-                            }
-                            // Calculate the difference to update total correctly
-                            const diff = newCount - entry.count;
-                            entry.count = newCount;
-                            entry.notes = notes;
-                            appData.total += diff;
-                            // If this is today's entry, update todayEntry reference
-                            if (entry.date === todayKey) {
-                                todayEntry = entry;
-                            }
-                            saveData();
-                            updateCounts();
-                            renderHistory();
-                            renderCharts();
-                            closeModalHandler();
-                        };
-                        openModal();
-                    });
-                    historyList.appendChild(historyItem);
-                });
             }
-            // Render charts
-            function renderCharts() {
-                // Weekly chart
-                const weeklyChart = document.querySelector('.flex.justify-between.items-end');
-                weeklyChart.innerHTML = '';
-                // Get last 7 days
-                const days = [];
-                for (let i = 6; i >= 0; i--) {
-                    const date = new Date();
-                    date.setDate(date.getDate() - i);
-                    const dateKey = moment(date).format('YYYY-MM-DD');
-                    days.push(dateKey);
-                }
-                // Find max count for scaling
-                let maxCount = 1;
-                days.forEach(day => {
-                    const entry = appData.history.find(e => e.date === day);
-                    if (entry && entry.count > maxCount) {
-                        maxCount = entry.count;
-                    }
-                });
-                // Create bars for each day
-                days.forEach(day => {
-                    const entry = appData.history.find(e => e.date === day) || { count: 0 };
-                    const heightPercent = (entry.count / maxCount) * 100;
-                    const isToday = day === todayKey;
-                    const dayName = moment(day).format('ddd');
-                    const barContainer = document.createElement('div');
-                    barContainer.className = 'flex flex-col items-center';
-                    const bar = document.createElement('div');
-                    bar.className = `chart-bar w-8 rounded-t-md bg-${userSettings.theme}-${isToday ? '600' : '400'} mb-1`;
-                    bar.style.height = `${heightPercent}%`;
-                    bar.style.minHeight = '4px';
-                    const dayLabel = document.createElement('span');
-                    dayLabel.className = 'text-xs text-gray-500';
-                    dayLabel.textContent = dayName;
-                    const countLabel = document.createElement('span');
-                    countLabel.className = `text-xs font-medium text-${userSettings.theme}-800`;
-                    countLabel.textContent = entry.count;
-                    barContainer.appendChild(countLabel);
-                    barContainer.appendChild(bar);
-                    barContainer.appendChild(dayLabel);
-                    weeklyChart.appendChild(barContainer);
-                });
-                // Monthly chart (simplified)
-                const monthlyChart = document.getElementById('monthly-chart');
-                monthlyChart.innerHTML = '';
-                // Create a simple bar for monthly progress
-                const thisMonth = moment().format('YYYY-MM');
-                const monthEntries = appData.history.filter(entry => entry.date.startsWith(thisMonth));
-                const monthTotal = monthEntries.reduce((sum, entry) => sum + entry.count, 0);
-                const monthContainer = document.createElement('div');
-                monthContainer.className = 'flex flex-col h-full justify-center';
-                const monthBar = document.createElement('div');
-                monthBar.className = `h-6 rounded-full bg-${userSettings.theme}-200 relative overflow-hidden`;
-                const monthProgress = document.createElement('div');
-                monthProgress.className = `absolute top-0 left-0 h-full bg-${userSettings.theme}-600 rounded-full`;
-                monthProgress.style.width = `${Math.min((monthTotal / 50) * 100, 100)}%`;
-                const monthText = document.createElement('div');
-                monthText.className = 'flex justify-between items-center mt-2';
-                monthText.innerHTML = `
-                    <span class="text-sm text-gray-600">${moment().format('MMMM')}</span>
-                    <span class="text-sm font-medium text-${userSettings.theme}-800">${monthTotal} apps</span>
-                `;
-                monthBar.appendChild(monthProgress);
-                monthContainer.appendChild(monthBar);
-                monthContainer.appendChild(monthText);
-                monthlyChart.appendChild(monthContainer);
             }
-            // Save data to localStorage
-            function saveData() {
-                localStorage.setItem('jobAppData', JSON.stringify(appData));
             }
         });
     </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=kasramojallal/application-tracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Job Application 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>
+        .progress-bar {
+            transition: width 0.5s ease-in-out;
         }
         .chart-bar {
+            transition: height 0.5s ease-in-out;
         }
     </style>
 </head>
+<body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Header -->
+        <header class="mb-8">
+            <h1 class="text-3xl font-bold text-indigo-700 mb-2">Job Application Tracker</h1>
+            <p class="text-gray-600">Track your daily job applications and reach your goals</p>
         </header>
+        <!-- User Section -->
+        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">User Profile</h2>
+            <div class="flex flex-col md:flex-row gap-4">
+                <div class="flex-1">
+                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
+                    <div class="flex">
+                        <input type="text" id="username" placeholder="Enter your username"
+                            class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:ring-indigo-500 focus:border-indigo-500">
+                        <button id="saveUserBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-r-md hover:bg-indigo-700 transition">
+                            Save
+                        </button>
                     </div>
                 </div>
+                <div class="flex-1">
+                    <label for="dailyGoal" class="block text-sm font-medium text-gray-700 mb-1">Daily Goal</label>
+                    <div class="flex">
+                        <input type="number" id="dailyGoal" min="1" value="30"
+                            class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:ring-indigo-500 focus:border-indigo-500">
+                        <button id="saveGoalBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-r-md hover:bg-indigo-700 transition">
+                            Set Goal
                         </button>
                     </div>
                 </div>
             </div>
+            <div id="currentUser" class="mt-4 text-sm text-gray-600 hidden">
+                <span class="font-medium">Current user:</span> <span id="userDisplay"></span> |
+                <span class="font-medium">Daily goal:</span> <span id="goalDisplay"></span>
             </div>
         </div>
+        <!-- Today's Progress -->
+        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">Today's Progress</h2>
             <div class="mb-4">
+                <div class="flex justify-between mb-1">
+                    <span class="text-sm font-medium text-gray-700">Applications today</span>
+                    <span id="progressText" class="text-sm font-medium text-gray-700">0/30</span>
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                    <div id="progressBar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
                 </div>
             </div>
+            <div class="flex items-center justify-center gap-4 mb-4">
+                <button id="decreaseBtn" class="bg-red-500 text-white p-3 rounded-full hover:bg-red-600 transition disabled:opacity-50" disabled>
+                    <i class="fas fa-minus"></i>
                 </button>
+                <div class="text-4xl font-bold w-20 text-center" id="countDisplay">0</div>
+                <button id="increaseBtn" class="bg-green-500 text-white p-3 rounded-full hover:bg-green-600 transition">
+                    <i class="fas fa-plus"></i>
                 </button>
             </div>
+            <button id="saveTodayBtn" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition">
+                Save Today's Applications
+            </button>
         </div>
+        <!-- Weekly History -->
+        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">Weekly History</h2>
+            <div class="flex justify-between items-end h-40 mb-4 border-b border-gray-200">
+                <!-- Chart bars will be inserted here by JavaScript -->
             </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Applications</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Goal</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody id="historyTable" class="bg-white divide-y divide-gray-200">
+                        <!-- History rows will be inserted here by JavaScript -->
+                    </tbody>
+                </table>
             </div>
+        </div>
+        <!-- All Users Data (Admin View) -->
+        <div id="adminSection" class="bg-white rounded-lg shadow-md p-6 hidden">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">All Users Data</h2>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Today</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Weekly Avg</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
+                        </tr>
+                    </thead>
+                    <tbody id="usersTable" class="bg-white divide-y divide-gray-200">
+                        <!-- Users data will be inserted here by JavaScript -->
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>
     <script>
+        // DOM Elements
+        const usernameInput = document.getElementById('username');
+        const saveUserBtn = document.getElementById('saveUserBtn');
+        const dailyGoalInput = document.getElementById('dailyGoal');
+        const saveGoalBtn = document.getElementById('saveGoalBtn');
+        const currentUserDiv = document.getElementById('currentUser');
+        const userDisplay = document.getElementById('userDisplay');
+        const goalDisplay = document.getElementById('goalDisplay');
+        const decreaseBtn = document.getElementById('decreaseBtn');
+        const increaseBtn = document.getElementById('increaseBtn');
+        const countDisplay = document.getElementById('countDisplay');
+        const progressText = document.getElementById('progressText');
+        const progressBar = document.getElementById('progressBar');
+        const saveTodayBtn = document.getElementById('saveTodayBtn');
+        const historyTable = document.getElementById('historyTable');
+        const adminSection = document.getElementById('adminSection');
+        const usersTable = document.getElementById('usersTable');
+        // State
+        let currentUser = localStorage.getItem('currentUser') || '';
+        let dailyGoal = parseInt(localStorage.getItem(`${currentUser}_dailyGoal`)) || 30;
+        let todayCount = 0;
+        let applicationsData = JSON.parse(localStorage.getItem('applicationsData')) || {};
+        let allUsersData = JSON.parse(localStorage.getItem('allUsersData')) || {};
+        // Initialize
+        function init() {
+            if (currentUser) {
+                usernameInput.value = currentUser;
+                dailyGoalInput.value = dailyGoal;
+                showCurrentUser();
+                loadTodayCount();
+                loadHistory();
+                loadAllUsersData();
+            }
+            // Check if current user is admin
+            if (currentUser === 'admin') {
+                adminSection.classList.remove('hidden');
+            }
+        }
+        // Show current user info
+        function showCurrentUser() {
+            currentUserDiv.classList.remove('hidden');
+            userDisplay.textContent = currentUser;
+            goalDisplay.textContent = dailyGoal;
+            progressText.textContent = `0/${dailyGoal}`;
+        }
+        // Load today's count
+        function loadTodayCount() {
+            const today = new Date().toISOString().split('T')[0];
+            if (applicationsData[currentUser] && applicationsData[currentUser][today]) {
+                todayCount = applicationsData[currentUser][today].count;
+                updateCountDisplay();
+            }
+        }
+        // Update count display
+        function updateCountDisplay() {
+            countDisplay.textContent = todayCount;
+            progressText.textContent = `${todayCount}/${dailyGoal}`;
+            const progressPercentage = Math.min((todayCount / dailyGoal) * 100, 100);
+            progressBar.style.width = `${progressPercentage}%`;
+            // Change progress bar color based on completion
+            if (progressPercentage >= 100) {
+                progressBar.classList.remove('bg-indigo-600');
+                progressBar.classList.add('bg-green-500');
+            } else if (progressPercentage >= 75) {
+                progressBar.classList.remove('bg-green-500', 'bg-yellow-500');
+                progressBar.classList.add('bg-indigo-600');
+            } else if (progressPercentage >= 50) {
+                progressBar.classList.remove('bg-indigo-600', 'bg-red-500');
+                progressBar.classList.add('bg-yellow-500');
+            } else {
+                progressBar.classList.remove('bg-indigo-600', 'bg-yellow-500');
+                progressBar.classList.add('bg-red-500');
+            }
+            // Enable/disable buttons
+            decreaseBtn.disabled = todayCount <= 0;
+        }
+        // Load history
+        function loadHistory() {
+            if (!applicationsData[currentUser]) {
+                historyTable.innerHTML = '<tr><td colspan="4" class="px-6 py-4 text-center text-gray-500">No data available</td></tr>';
+                return;
+            }
+            // Clear existing rows
+            historyTable.innerHTML = '';
+            // Get sorted dates (newest first)
+            const userData = applicationsData[currentUser];
+            const dates = Object.keys(userData).sort((a, b) => new Date(b) - new Date(a));
+            // Limit to 30 entries for display
+            const displayDates = dates.slice(0, 30);
+            // Create chart
+            createWeeklyChart(displayDates.slice(0, 7).reverse());
+            // Add rows
+            displayDates.forEach(date => {
+                const entry = userData[date];
+                const row = document.createElement('tr');
+                const dateCell = document.createElement('td');
+                dateCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+                dateCell.textContent = formatDate(date);
+                const countCell = document.createElement('td');
+                countCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+                countCell.textContent = entry.count;
+                const goalCell = document.createElement('td');
+                goalCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+                goalCell.textContent = entry.goal;
+                const statusCell = document.createElement('td');
+                statusCell.className = 'px-6 py-4 whitespace-nowrap text-sm';
+                const statusSpan = document.createElement('span');
+                statusSpan.className = entry.count >= entry.goal ?
+                    'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800' :
+                    'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800';
+                statusSpan.textContent = entry.count >= entry.goal ? 'Completed' : 'Pending';
+                statusCell.appendChild(statusSpan);
+                row.appendChild(dateCell);
+                row.appendChild(countCell);
+                row.appendChild(goalCell);
+                row.appendChild(statusCell);
+                historyTable.appendChild(row);
+            });
+        }
+        // Create weekly chart
+        function createWeeklyChart(dates) {
+            const chartContainer = document.querySelector('.flex.justify-between.items-end');
+            chartContainer.innerHTML = '';
+            if (!dates.length) return;
+            // Find max value for scaling
+            const maxValue = Math.max(...dates.map(date => {
+                return applicationsData[currentUser][date].count;
+            }), dailyGoal);
+            dates.forEach(date => {
+                const entry = applicationsData[currentUser][date];
+                const day = new Date(date).toLocaleDateString('en-US', { weekday: 'short' });
+                const count = entry.count;
+                const goal = entry.goal;
+                const barContainer = document.createElement('div');
+                barContainer.className = 'flex flex-col items-center';
+                const barWrapper = document.createElement('div');
+                barWrapper.className = 'relative h-32 w-10';
+                // Goal bar (background)
+                const goalBar = document.createElement('div');
+                goalBar.className = 'absolute bottom-0 w-full bg-gray-200 rounded-t';
+                goalBar.style.height = `${(goal / maxValue) * 100}%`;
+                // Count bar (foreground)
+                const countBar = document.createElement('div');
+                countBar.className = 'chart-bar absolute bottom-0 w-full bg-indigo-600 rounded-t';
+                countBar.style.height = `${(count / maxValue) * 100}%`;
+                // Label
+                const label = document.createElement('div');
+                label.className = 'text-xs text-gray-500 mt-1';
+                label.textContent = day;
+                barWrapper.appendChild(goalBar);
+                barWrapper.appendChild(countBar);
+                barContainer.appendChild(barWrapper);
+                barContainer.appendChild(label);
+                chartContainer.appendChild(barContainer);
+            });
+        }
+        // Load all users data (for admin)
+        function loadAllUsersData() {
+            if (currentUser !== 'admin') return;
+            usersTable.innerHTML = '';
+            const users = Object.keys(allUsersData);
+            if (users.length === 0) {
+                usersTable.innerHTML = '<tr><td colspan="4" class="px-6 py-4 text-center text-gray-500">No user data available</td></tr>';
+                return;
             }
+            users.forEach(user => {
+                if (user === 'admin') return;
+                const userData = allUsersData[user];
+                const today = new Date().toISOString().split('T')[0];
+                const todayCount = userData.applications[today] ? userData.applications[today].count : 0;
+                // Calculate weekly average
+                const dates = Object.keys(userData.applications);
+                const last7Days = dates
+                    .filter(date => {
+                        const dateObj = new Date(date);
+                        const todayObj = new Date();
+                        return dateObj >= new Date(todayObj.setDate(todayObj.getDate() - 7));
+                    })
+                    .map(date => userData.applications[date].count);
+                const weeklyAvg = last7Days.length > 0 ?
+                    Math.round(last7Days.reduce((a, b) => a + b, 0) / last7Days.length) : 0;
+                // Calculate total
+                const total = dates.reduce((sum, date) => sum + userData.applications[date].count, 0);
+                const row = document.createElement('tr');
+                const userCell = document.createElement('td');
+                userCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
+                userCell.textContent = user;
+                const todayCell = document.createElement('td');
+                todayCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+                todayCell.textContent = todayCount;
+                const weeklyCell = document.createElement('td');
+                weeklyCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+                weeklyCell.textContent = weeklyAvg;
+                const totalCell = document.createElement('td');
+                totalCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+                totalCell.textContent = total;
+                row.appendChild(userCell);
+                row.appendChild(todayCell);
+                row.appendChild(weeklyCell);
+                row.appendChild(totalCell);
+                usersTable.appendChild(row);
             });
+        }
+        // Format date for display
+        function formatDate(dateString) {
+            const options = { year: 'numeric', month: 'short', day: 'numeric', weekday: 'short' };
+            return new Date(dateString).toLocaleDateString('en-US', options);
+        }
+        // Event Listeners
+        saveUserBtn.addEventListener('click', () => {
+            const newUser = usernameInput.value.trim();
+            if (!newUser) {
+                alert('Please enter a username');
+                return;
             }
+            currentUser = newUser;
+            localStorage.setItem('currentUser', currentUser);
+            // Initialize user data if it doesn't exist
+            if (!applicationsData[currentUser]) {
+                applicationsData[currentUser] = {};
             }
+            // Initialize allUsersData if it doesn't exist
+            if (!allUsersData[currentUser]) {
+                allUsersData[currentUser] = {
+                    goal: dailyGoal,
+                    applications: {}
+                };
+                localStorage.setItem('allUsersData', JSON.stringify(allUsersData));
             }
+            // Load user's daily goal
+            dailyGoal = allUsersData[currentUser].goal || 30;
+            dailyGoalInput.value = dailyGoal;
+            showCurrentUser();
+            loadTodayCount();
+            loadHistory();
+            // Show admin section if user is admin
+            if (currentUser === 'admin') {
+                adminSection.classList.remove('hidden');
+                loadAllUsersData();
+            } else {
+                adminSection.classList.add('hidden');
+            }
+        });
+        saveGoalBtn.addEventListener('click', () => {
+            const newGoal = parseInt(dailyGoalInput.value);
+            if (isNaN(newGoal) || newGoal < 1) {
+                alert('Please enter a valid goal (minimum 1)');
+                return;
+            }
+            dailyGoal = newGoal;
+            goalDisplay.textContent = dailyGoal;
+            progressText.textContent = `${todayCount}/${dailyGoal}`;
+            // Save goal for current user
+            if (currentUser) {
+                if (!allUsersData[currentUser]) {
+                    allUsersData[currentUser] = {
+                        goal: dailyGoal,
+                        applications: {}
+                    };
                 } else {
+                    allUsersData[currentUser].goal = dailyGoal;
                 }
+                localStorage.setItem('allUsersData', JSON.stringify(allUsersData));
+                localStorage.setItem(`${currentUser}_dailyGoal`, dailyGoal);
             }
+            updateCountDisplay();
+        });
+        increaseBtn.addEventListener('click', () => {
+            todayCount++;
+            updateCountDisplay();
+        });
+        decreaseBtn.addEventListener('click', () => {
+            if (todayCount > 0) {
+                todayCount--;
+                updateCountDisplay();
+            }
+        });
+        saveTodayBtn.addEventListener('click', () => {
+            if (!currentUser) {
+                alert('Please set a username first');
+                return;
             }
+            const today = new Date().toISOString().split('T')[0];
+            // Save to applicationsData
+            applicationsData[currentUser][today] = {
+                count: todayCount,
+                goal: dailyGoal
+            };
+            localStorage.setItem('applicationsData', JSON.stringify(applicationsData));
+            // Save to allUsersData
+            if (!allUsersData[currentUser]) {
+                allUsersData[currentUser] = {
+                    goal: dailyGoal,
+                    applications: {}
+                };
             }
+            allUsersData[currentUser].applications[today] = {
+                count: todayCount,
+                goal: dailyGoal
+            };
+            localStorage.setItem('allUsersData', JSON.stringify(allUsersData));
+            // Reload history
+            loadHistory();
+            // If admin, reload all users data
+            if (currentUser === 'admin') {
+                loadAllUsersData();
             }
+            alert('Today\'s applications saved successfully!');
         });
+        // Initialize the app
+        init();
     </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=kasramojallal/application-tracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,2 +1,4 @@
 add a few functionalities for me to also decrease the number if I added by mistake. also let me choose another date if I want to add the number for previous days.
-add option for decreasing as well. also you got the todays date wrong. add the option to add time zone or location so it can figure the todays day correct. also make the visualization better and delete the clear data option. add as many editing options as possible.

 add a few functionalities for me to also decrease the number if I added by mistake. also let me choose another date if I want to add the number for previous days.
+add option for decreasing as well. also you got the todays date wrong. add the option to add time zone or location so it can figure the todays day correct. also make the visualization better and delete the clear data option. add as many editing options as possible.
+the website is not working. fix the issue and forget about detecting timezone we can add it manually.
+I want you to create a job application tracker for me so that I can add each day I applied for how many jobs and there should be a add and decrease button and also it should show the history of the number of jobs I applied each day and there should be a weekly history and each day I should set a goal of like 30 jobs that it should be filled. also I want other peolpe to use it so I want them to be able to add their username.