Gym Tracker with Bulk Import: A web-based application for fitness enthusiasts to log and analyze workout sessions, featuring bulk data import, exercise tracking, and performance visualization. This tool enhances workout planning and progress monitoring for improved fitness results.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gym Session Tracker</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <style>
        /* Previous styles remain the same */
        body {
            font-family: 'Inter', sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #1a1c2e 0%, #0f172a 100%);
        }
        .card-gradient {
            background: linear-gradient(160deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%);
        }
        .stats-card {
            background: linear-gradient(160deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
        }
        @keyframes pulse-border {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .pulse-button {
            animation: pulse-border 2s infinite;
        }
        .session-item {
            transition: all 0.3s ease;
        }
        .session-item:hover {
            transform: translateX(8px);
        }
        .modal {
            backdrop-filter: blur(8px);
        }
    </style>
    <script>
        let sessions = JSON.parse(localStorage.getItem('gymSessions')) || [];
        let datePicker;

        function toggleBulkImportModal() {
            const modal = document.getElementById('bulkImportModal');
            modal.classList.toggle('hidden');
            if (!modal.classList.contains('hidden')) {
                // Initialize Flatpickr when opening modal
                datePicker = flatpickr("#datePicker", {
                    mode: "multiple",
                    dateFormat: "Y-m-d",
                    theme: "dark",
                    maxDate: "today",
                    disable: sessions.map(s => s.date), // Disable dates that already have sessions
                    onChange: function(selectedDates) {
                        document.getElementById('selectedDatesCount').textContent = selectedDates.length;
                    }
                });
            }
        }

        function bulkImportSessions() {
            const selectedDates = datePicker.selectedDates;
            if (selectedDates.length === 0) {
                showNotification('Please select at least one date', 'error');
                return;
            }

            selectedDates.forEach(date => {
                const dateStr = date.toISOString().split('T')[0];
                if (!sessions.some(s => s.date === dateStr)) {
                    sessions.push({
                        date: dateStr,
                        time: '12:00:00' // Default time for bulk imports
                    });
                }
            });

            localStorage.setItem('gymSessions', JSON.stringify(sessions));
            updateSessionsList();
            updateStats();
            showNotification(`Successfully imported ${selectedDates.length} sessions!`, 'success');
            toggleBulkImportModal();
        }

        // ... (previous functions remain the same) ...

        function logSession() {
            const today = new Date().toISOString().split('T')[0];
            const now = new Date().toLocaleTimeString();
            
            if (sessions.some(session => session.date === today)) {
                showNotification('You already logged a session for today!', 'error');
                return;
            }

            sessions.push({ date: today, time: now });
            localStorage.setItem('gymSessions', JSON.stringify(sessions));
            updateSessionsList();
            updateStats();
            showNotification('Session logged successfully!', 'success');
        }

        function deleteSession(index) {
            if (confirm('Are you sure you want to delete this session?')) {
                sessions.splice(index, 1);
                localStorage.setItem('gymSessions', JSON.stringify(sessions));
                updateSessionsList();
                updateStats();
                showNotification('Session deleted!', 'success');
            }
        }

        function showNotification(message, type) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg transition-opacity duration-500 ${type === 'error' ? 'bg-red-500' : 'bg-green-500'}`;
            setTimeout(() => {
                notification.className += ' opacity-0';
            }, 2000);
        }

        function formatDate(dateStr) {
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            return new Date(dateStr).toLocaleDateString('en-US', options);
        }

        function getStreak() {
            if (sessions.length === 0) return 0;
            
            let streak = 0;
            const sortedDates = sessions.map(s => s.date).sort((a, b) => new Date(b) - new Date(a));
            const today = new Date().toISOString().split('T')[0];
            let lastDate = today;

            for (let date of sortedDates) {
                const diff = Math.abs(new Date(lastDate) - new Date(date)) / (1000 * 60 * 60 * 24);
                if (diff <= 1) {
                    streak++;
                    lastDate = date;
                } else break;
            }
            return streak;
        }

        function updateStats() {
            const totalWorkouts = sessions.length;
            const streak = getStreak();
            const thisMonth = sessions.filter(s => new Date(s.date).getMonth() === new Date().getMonth()).length;

            document.getElementById('totalWorkouts').textContent = totalWorkouts;
            document.getElementById('currentStreak').textContent = streak;
            document.getElementById('thisMonth').textContent = thisMonth;
        }

        function updateSessionsList() {
            const list = document.getElementById('sessionsList');
            list.innerHTML = '';
            
            sessions.sort((a, b) => new Date(b.date) - new Date(a.date));

            if (sessions.length === 0) {
                list.innerHTML = `
                    <div class="text-center text-gray-400 py-8">
                        <p class="text-lg">No sessions logged yet</p>
                        <p class="text-sm mt-2">Start by clicking the button above!</p>
                    </div>
                `;
                return;
            }

            sessions.forEach((session, index) => {
                const li = document.createElement('li');
                li.className = 'session-item card-gradient rounded-xl mb-4 overflow-hidden shadow-lg';
                li.innerHTML = `
                    <div class="p-4 flex justify-between items-center">
                        <div class="flex flex-col">
                            <span class="text-lg font-semibold text-white">${formatDate(session.date)}</span>
                            <span class="text-sm text-blue-400">${session.time}</span>
                        </div>
                        <button 
                            onclick="deleteSession(${index})" 
                            class="bg-red-500/10 hover:bg-red-500/20 text-red-500 px-4 py-2 rounded-lg transition-colors duration-200"
                        >
                            Delete
                        </button>
                    </div>
                `;
                list.appendChild(li);
            });
        }

        window.onload = () => {
            updateSessionsList();
            updateStats();
        };
    </script>
</head>
<body class="gradient-bg text-white min-h-screen">
    <div id="notification" class="fixed top-4 right-4 opacity-0 transition-opacity duration-500"></div>
    
    
    <div id="bulkImportModal" class="hidden fixed inset-0 bg-black/50 modal flex items-center justify-center z-50">
        <div class="bg-slate-900 rounded-2xl p-6 max-w-md w-full mx-4 shadow-xl border border-blue-500/20">
            <h3 class="text-xl font-bold mb-4">Bulk Import Sessions</h3>
            <p class="text-gray-400 mb-4">Select multiple dates to import past sessions. You've selected <span id="selectedDatesCount" class="text-blue-500 font-bold">0</span> dates.</p>
            
            <input type="text" id="datePicker" class="w-full bg-slate-800 rounded-lg p-3 mb-4" placeholder="Select dates...">
            
            <div class="flex justify-end gap-3">
                <button onclick="toggleBulkImportModal()" class="px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors">
                    Cancel
                </button>
                <button onclick="bulkImportSessions()" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition-colors">
                    Import Sessions
                </button>
            </div>
        </div>
    </div>

    <div class="max-w-2xl mx-auto p-6">
        <div class="text-center mb-8 pt-8">
            <h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-blue-600 text-transparent bg-clip-text">Gym Session Tracker</h1>
            <p class="text-gray-400">Track your daily workout sessions with one click</p>
        </div>

        
        <div class="grid grid-cols-3 gap-4 mb-8">
            <div class="stats-card rounded-xl p-4 text-center border border-blue-500/20">
                <div class="text-3xl font-bold text-blue-500" id="totalWorkouts">0</div>
                <div class="text-sm text-gray-400">Total Workouts</div>
            </div>
            <div class="stats-card rounded-xl p-4 text-center border border-blue-500/20">
                <div class="text-3xl font-bold text-blue-500" id="currentStreak">0</div>
                <div class="text-sm text-gray-400">Day Streak</div>
            </div>
            <div class="stats-card rounded-xl p-4 text-center border border-blue-500/20">
                <div class="text-3xl font-bold text-blue-500" id="thisMonth">0</div>
                <div class="text-sm text-gray-400">This Month</div>
            </div>
        </div>
        
        <div class="text-center mb-6">
            <button 
                onclick="logSession()" 
                class="pulse-button bg-blue-600 hover:bg-blue-700 text-white font-bold py-6 px-12 rounded-2xl text-xl shadow-lg transform transition-all duration-200 hover:scale-105 hover:shadow-blue-500/20"
            >
                Log Today's Session 💪
            </button>
        </div>

        <div class="text-center mb-12">
            <button 
                onclick="toggleBulkImportModal()" 
                class="text-blue-400 hover:text-blue-300 transition-colors"
            >
                📅 Import past sessions
            </button>
        </div>

        <div class="bg-slate-900/50 rounded-2xl p-6 backdrop-blur-sm shadow-xl">
            <h2 class="text-2xl font-semibold mb-6 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
                Workout History
            </h2>
            <ul id="sessionsList" class="space-y-4"></ul>
        </div>
    </div>
</body>
</html>

SPARKS

Gym Tracker with Bulk Import