Spaces:

jrrade
/

myworkouts

Running

App Files Files Community

jrrade commited on Apr 2

Commit

ffd507a

verified ·

1 Parent(s): 84f47ed

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +852 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Myworkouts
-emoji: 🏢
-colorFrom: red
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: myworkouts
+emoji: 🐳
+colorFrom: pink
+colorTo: yellow
 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,852 @@
-<!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>Workout Logger - Push Legs Pull Split</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>
+        .fade-in {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .workout-day.active {
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+        }
+        .progress-bar {
+            transition: width 0.5s ease-in-out;
+        }
+        .history-item {
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+        .history-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .history-item.active {
+            border-left: 4px solid #3b82f6;
+        }
+        .history-exercises {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        .history-exercises.show {
+            max-height: 1000px;
+        }
+        .edit-history-form {
+            background-color: rgba(243, 244, 246, 0.8);
+            backdrop-filter: blur(5px);
+        }
+    </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 text-center">
+            <h1 class="text-4xl font-bold text-blue-600 mb-2">Workout Logger</h1>
+            <p class="text-gray-600">Track your Push, Legs, Pull split progress</p>
+        </header>
+        <!-- Week Navigation -->
+        <div class="bg-white rounded-xl shadow-md p-4 mb-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">This Week</h2>
+                <div class="flex space-x-2">
+                    <button id="prev-week" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    <button id="next-week" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="grid grid-cols-6 gap-2">
+                <div class="workout-day rounded-lg p-3 text-center cursor-pointer transition-all" data-day="monday" data-type="push">
+                    <div class="font-medium">Monday</div>
+                    <div class="text-xs text-blue-500">Push</div>
+                </div>
+                <div class="workout-day rounded-lg p-3 text-center cursor-pointer transition-all" data-day="tuesday" data-type="pull">
+                    <div class="font-medium">Tuesday</div>
+                    <div class="text-xs text-green-500">Pull</div>
+                </div>
+                <div class="workout-day rounded-lg p-3 text-center cursor-pointer transition-all" data-day="wednesday" data-type="legs">
+                    <div class="font-medium">Wednesday</div>
+                    <div class="text-xs text-purple-500">Legs</div>
+                </div>
+                <div class="workout-day rounded-lg p-3 text-center cursor-pointer transition-all" data-day="thursday" data-type="push">
+                    <div class="font-medium">Thursday</div>
+                    <div class="text-xs text-blue-500">Push</div>
+                </div>
+                <div class="workout-day rounded-lg p-3 text-center cursor-pointer transition-all" data-day="friday" data-type="pull">
+                    <div class="font-medium">Friday</div>
+                    <div class="text-xs text-green-500">Pull</div>
+                </div>
+                <div class="workout-day rounded-lg p-3 text-center cursor-pointer transition-all" data-day="saturday" data-type="legs">
+                    <div class="font-medium">Saturday</div>
+                    <div class="text-xs text-purple-500">Legs</div>
+                </div>
+            </div>
+        </div>
+        <!-- Current Workout -->
+        <div id="current-workout" class="bg-white rounded-xl shadow-md p-6 mb-6 fade-in">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">
+                    <span id="current-day">Monday</span> -
+                    <span id="workout-type" class="text-blue-500">Push</span>
+                </h2>
+                <div class="text-sm text-gray-500" id="workout-date">June 12, 2023</div>
+            </div>
+            <!-- Progress -->
+            <div class="mb-6">
+                <div class="flex justify-between text-sm mb-1">
+                    <span>Workout Progress</span>
+                    <span id="progress-percent">0%</span>
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                    <div id="progress-bar" class="progress-bar h-2.5 rounded-full bg-blue-500" style="width: 0%"></div>
+                </div>
+            </div>
+            <!-- Exercises List -->
+            <div id="exercises-container" class="mb-6">
+                <!-- Exercises will be added here -->
+            </div>
+            <!-- Add Exercise Form -->
+            <div class="bg-gray-50 p-4 rounded-lg">
+                <h3 class="font-medium mb-3">Add New Exercise</h3>
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Exercise</label>
+                        <input type="text" id="exercise-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Bench Press">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Weight (lbs)</label>
+                        <input type="number" id="exercise-weight" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="45">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Sets</label>
+                        <input type="number" id="exercise-sets" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="3" value="3">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Reps</label>
+        <input type="number" id="exercise-reps" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="10" value="10">
+                    </div>
+                </div>
+                <button id="add-exercise" class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">
+                    <i class="fas fa-plus mr-2"></i> Add Exercise
+                </button>
+            </div>
+        </div>
+        <!-- Workout History -->
+        <div class="bg-white rounded-xl shadow-md p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">Workout History</h2>
+                <button id="toggle-history-view" class="text-sm text-blue-600 hover:text-blue-800">
+                    <i class="fas fa-list mr-1"></i> Toggle View
+                </button>
+            </div>
+            <div id="history-container">
+                <!-- History items will be added here -->
+                <div class="text-center py-8 text-gray-400">
+                    <i class="fas fa-dumbbell text-4xl mb-2"></i>
+                    <p>Your workout history will appear here</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Edit History Modal -->
+    <div id="edit-history-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
+        <div class="absolute inset-0 bg-black bg-opacity-50"></div>
+        <div class="edit-history-form relative bg-white rounded-xl shadow-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-semibold">Edit Workout</h3>
+                <button id="close-edit-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div id="edit-history-content">
+                <!-- Content will be added here -->
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const workoutDays = document.querySelectorAll('.workout-day');
+            const currentDayElement = document.getElementById('current-day');
+            const workoutTypeElement = document.getElementById('workout-type');
+            const workoutDateElement = document.getElementById('workout-date');
+            const exercisesContainer = document.getElementById('exercises-container');
+            const historyContainer = document.getElementById('history-container');
+            const progressBar = document.getElementById('progress-bar');
+            const progressPercent = document.getElementById('progress-percent');
+            const toggleHistoryViewBtn = document.getElementById('toggle-history-view');
+            const editHistoryModal = document.getElementById('edit-history-modal');
+            const editHistoryContent = document.getElementById('edit-history-content');
+            const closeEditModalBtn = document.getElementById('close-edit-modal');
+            // Form elements
+            const exerciseNameInput = document.getElementById('exercise-name');
+            const exerciseWeightInput = document.getElementById('exercise-weight');
+            const exerciseSetsInput = document.getElementById('exercise-sets');
+            const exerciseRepsInput = document.getElementById('exercise-reps');
+            const addExerciseBtn = document.getElementById('add-exercise');
+            // Data
+            let currentDay = 'monday';
+            let currentWorkoutType = 'push';
+            let workouts = {
+                monday: { exercises: [], completed: false, date: new Date().toISOString() },
+                tuesday: { exercises: [], completed: false, date: new Date().toISOString() },
+                wednesday: { exercises: [], completed: false, date: new Date().toISOString() },
+                thursday: { exercises: [], completed: false, date: new Date().toISOString() },
+                friday: { exercises: [], completed: false, date: new Date().toISOString() },
+                saturday: { exercises: [], completed: false, date: new Date().toISOString() }
+            };
+            // View state
+            let historyViewMode = 'detailed'; // 'detailed' or 'compact'
+            // Initialize the app
+            initApp();
+            // Event Listeners
+            workoutDays.forEach(day => {
+                day.addEventListener('click', function() {
+                    currentDay = this.dataset.day;
+                    currentWorkoutType = this.dataset.type;
+                    updateUI();
+                });
+            });
+            addExerciseBtn.addEventListener('click', addExercise);
+            toggleHistoryViewBtn.addEventListener('click', toggleHistoryView);
+            closeEditModalBtn.addEventListener('click', () => editHistoryModal.classList.add('hidden'));
+            // Functions
+            function initApp() {
+                // Load data from localStorage if available
+                const savedWorkouts = localStorage.getItem('workoutLoggerData');
+                if (savedWorkouts) {
+                    workouts = JSON.parse(savedWorkouts);
+                    // Ensure all dates are properly formatted
+                    Object.keys(workouts).forEach(day => {
+                        if (workouts[day].date) {
+                            // If date is already in ISO format, keep it
+                            if (typeof workouts[day].date === 'string' && workouts[day].date.includes('T')) {
+                                return;
+                            }
+                            // Otherwise, convert to ISO format
+                            workouts[day].date = new Date(workouts[day].date).toISOString();
+                        } else {
+                            workouts[day].date = new Date().toISOString();
+                        }
+                        // Ensure each exercise has a date
+                        workouts[day].exercises.forEach(exercise => {
+                            if (!exercise.date) {
+                                exercise.date = workouts[day].date;
+                            } else if (!exercise.date.includes('T')) {
+                                exercise.date = new Date(exercise.date).toISOString();
+                            }
+                        });
+                    });
+                }
+                // Set current date
+                updateDate();
+                // Initialize UI
+                updateUI();
+                loadHistory();
+            }
+            function updateDate() {
+                const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+                const today = new Date();
+                workoutDateElement.textContent = today.toLocaleDateString('en-US', options);
+            }
+            function updateUI() {
+                // Update active day
+                workoutDays.forEach(day => {
+                    day.classList.remove('active', 'bg-blue-50', 'bg-green-50', 'bg-purple-50');
+                    if (day.dataset.day === currentDay) {
+                        day.classList.add('active');
+                        if (day.dataset.type === 'push') day.classList.add('bg-blue-50');
+                        if (day.dataset.type === 'pull') day.classList.add('bg-green-50');
+                        if (day.dataset.type === 'legs') day.classList.add('bg-purple-50');
+                    }
+                });
+                // Update header
+                currentDayElement.textContent = currentDay.charAt(0).toUpperCase() + currentDay.slice(1);
+                workoutTypeElement.textContent = currentWorkoutType.charAt(0).toUpperCase() + currentWorkoutType.slice(1);
+                // Update color based on workout type
+                workoutTypeElement.className = '';
+                if (currentWorkoutType === 'push') workoutTypeElement.classList.add('text-blue-500');
+                if (currentWorkoutType === 'pull') workoutTypeElement.classList.add('text-green-500');
+                if (currentWorkoutType === 'legs') workoutTypeElement.classList.add('text-purple-500');
+                // Update exercises list
+                renderExercises();
+                // Update progress
+                updateProgress();
+            }
+            function renderExercises() {
+                exercisesContainer.innerHTML = '';
+                const dayExercises = workouts[currentDay].exercises;
+                if (dayExercises.length === 0) {
+                    exercisesContainer.innerHTML = `
+                        <div class="text-center py-8 text-gray-400">
+                            <i class="fas fa-plus-circle text-4xl mb-2"></i>
+                            <p>Add your first exercise to get started</p>
+                        </div>
+                    `;
+                    return;
+                }
+                dayExercises.forEach((exercise, index) => {
+                    const exerciseElement = document.createElement('div');
+                    exerciseElement.className = 'exercise-item bg-gray-50 rounded-lg p-4 mb-3 fade-in';
+                    exerciseElement.innerHTML = `
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-medium">${exercise.name}</h3>
+                            <div class="flex space-x-2">
+                                <button class="edit-exercise p-1 text-blue-500 hover:text-blue-700" data-index="${index}">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="delete-exercise p-1 text-red-500 hover:text-red-700" data-index="${index}">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-3 gap-2 text-sm">
+                            <div class="bg-white p-2 rounded">
+                                <div class="text-gray-500">Weight</div>
+                                <div>${exercise.weight} lbs</div>
+                            </div>
+                            <div class="bg-white p-2 rounded">
+                                <div class="text-gray-500">Sets</div>
+                                <div>${exercise.sets}</div>
+                            </div>
+                            <div class="bg-white p-2 rounded">
+                                <div class="text-gray-500">Reps</div>
+                                <div>${exercise.reps}</div>
+                            </div>
+                        </div>
+                        <div class="text-xs text-gray-400 mt-1">${formatShortDate(exercise.date)}</div>
+                    `;
+                    exercisesContainer.appendChild(exerciseElement);
+                });
+                // Add event listeners to delete buttons
+                document.querySelectorAll('.delete-exercise').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const index = parseInt(this.dataset.index);
+                        deleteExercise(index);
+                    });
+                });
+                // Add event listeners to edit buttons
+                document.querySelectorAll('.edit-exercise').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const index = parseInt(this.dataset.index);
+                        editExercise(index);
+                    });
+                });
+            }
+            function addExercise() {
+                const name = exerciseNameInput.value.trim();
+                const weight = parseFloat(exerciseWeightInput.value);
+                const sets = parseInt(exerciseSetsInput.value);
+                const reps = parseInt(exerciseRepsInput.value);
+                if (!name || isNaN(weight) || isNaN(sets) || isNaN(reps)) {
+                    alert('Please fill in all fields with valid values');
+                    return;
+                }
+                const newExercise = {
+                    name,
+                    weight,
+                    sets,
+                    reps,
+                    date: new Date().toISOString()
+                };
+                workouts[currentDay].exercises.push(newExercise);
+                workouts[currentDay].completed = workouts[currentDay].exercises.length > 0;
+                workouts[currentDay].date = new Date().toISOString();
+                saveData();
+                updateUI();
+                loadHistory();
+                // Reset form
+                exerciseNameInput.value = '';
+                exerciseWeightInput.value = '';
+                exerciseSetsInput.value = '3';
+                exerciseRepsInput.value = '10';
+                exerciseNameInput.focus();
+            }
+            function deleteExercise(index) {
+                if (confirm('Are you sure you want to delete this exercise?')) {
+                    workouts[currentDay].exercises.splice(index, 1);
+                    workouts[currentDay].completed = workouts[currentDay].exercises.length > 0;
+                    saveData();
+                    updateUI();
+                    loadHistory();
+                }
+            }
+            function editExercise(index) {
+                const exercise = workouts[currentDay].exercises[index];
+                // Fill the form with exercise data
+                exerciseNameInput.value = exercise.name;
+                exerciseWeightInput.value = exercise.weight;
+                exerciseSetsInput.value = exercise.sets;
+                exerciseRepsInput.value = exercise.reps;
+                // Delete the exercise (we'll add it again when saved)
+                workouts[currentDay].exercises.splice(index, 1);
+                updateUI();
+                loadHistory();
+                // Focus on the name field
+                exerciseNameInput.focus();
+            }
+            function updateProgress() {
+                const dayExercises = workouts[currentDay].exercises;
+                const totalExercises = dayExercises.length;
+                // Simple progress calculation (could be enhanced)
+                const progress = totalExercises > 0 ? Math.min(100, totalExercises * 20) : 0;
+                progressBar.style.width = `${progress}%`;
+                progressPercent.textContent = `${progress}%`;
+                // Change color based on progress
+                progressBar.className = 'progress-bar h-2.5 rounded-full';
+                if (progress < 30) progressBar.classList.add('bg-red-500');
+                else if (progress < 70) progressBar.classList.add('bg-yellow-500');
+                else progressBar.classList.add('bg-green-500');
+            }
+            function saveData() {
+                localStorage.setItem('workoutLoggerData', JSON.stringify(workouts));
+            }
+            function loadHistory() {
+                historyContainer.innerHTML = '';
+                // Get all workout days that have exercises
+                const workoutDaysWithData = Object.entries(workouts)
+                    .filter(([day, data]) => data.exercises.length > 0)
+                    .sort((a, b) => new Date(b[1].date) - new Date(a[1].date));
+                if (workoutDaysWithData.length === 0) {
+                    historyContainer.innerHTML = `
+                        <div class="text-center py-8 text-gray-400">
+                            <i class="fas fa-dumbbell text-4xl mb-2"></i>
+                            <p>Your workout history will appear here</p>
+                        </div>
+                    `;
+                    return;
+                }
+                workoutDaysWithData.forEach(([day, workoutData]) => {
+                    const historyItem = document.createElement('div');
+                    historyItem.className = 'history-item bg-gray-50 rounded-lg p-4 mb-3';
+                    if (historyViewMode === 'detailed') {
+                        historyItem.innerHTML = `
+                            <div class="flex justify-between items-center mb-2">
+                                <div>
+                                    <h3 class="font-medium">${day.charAt(0).toUpperCase() + day.slice(1)} -
+                                    <span class="${getWorkoutTypeColorClass(day)}">
+                                        ${getWorkoutType(day)}
+                                    </span></h3>
+                                    <div class="text-xs text-gray-500">${formatDate(workoutData.date)}</div>
+                                </div>
+                                <div class="flex space-x-2">
+                                    <button class="edit-history p-1 text-blue-500 hover:text-blue-700" data-day="${day}">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                    <span class="text-sm text-gray-500">${workoutData.exercises.length} ex.</span>
+                                </div>
+                            </div>
+                            <div class="flex space-x-2 text-sm mb-2">
+                                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">${workoutData.completed ? 'Completed' : 'In Progress'}</span>
+                                <span class="bg-green-100 text-green-800 px-2 py-1 rounded">${formatShortDate(workoutData.date)}</span>
+                            </div>
+                            <div class="history-exercises">
+                                ${renderHistoryExercises(workoutData.exercises)}
+                            </div>
+                        `;
+                    } else {
+                        historyItem.innerHTML = `
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <h3 class="font-medium">${day.charAt(0).toUpperCase() + day.slice(1)} -
+                                    <span class="${getWorkoutTypeColorClass(day)}">
+                                        ${getWorkoutType(day)}
+                                    </span></h3>
+                                    <div class="text-xs text-gray-500">${formatDate(workoutData.date)}</div>
+                                </div>
+                                <div class="flex space-x-2 items-center">
+                                    <button class="edit-history p-1 text-blue-500 hover:text-blue-700" data-day="${day}">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                    <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">${workoutData.exercises.length} ex.</span>
+                                </div>
+                            </div>
+                        `;
+                    }
+                    historyContainer.appendChild(historyItem);
+                    // Add click event to toggle exercises visibility (detailed view only)
+                    if (historyViewMode === 'detailed') {
+                        const header = historyItem.querySelector('.flex.justify-between.items-center');
+                        const exercisesSection = historyItem.querySelector('.history-exercises');
+                        header.addEventListener('click', function(e) {
+                            // Don't toggle if clicking the edit button
+                            if (!e.target.closest('.edit-history')) {
+                                historyItem.classList.toggle('active');
+                                exercisesSection.classList.toggle('show');
+                            }
+                        });
+                    }
+                    // Add event listener to edit button
+                    historyItem.querySelector('.edit-history').addEventListener('click', function() {
+                        const day = this.dataset.day;
+                        openEditHistoryModal(day);
+                    });
+                });
+            }
+            function renderHistoryExercises(exercises) {
+                if (exercises.length === 0) return '';
+                let html = '<div class="space-y-2">';
+                exercises.forEach((exercise, index) => {
+                    html += `
+                        <div class="bg-white p-3 rounded-lg border border-gray-200">
+                            <div class="flex justify-between items-start">
+                                <div class="font-medium">${exercise.name}</div>
+                                <div class="flex space-x-2">
+                                    <button class="edit-history-exercise p-1 text-blue-500 hover:text-blue-700" data-index="${index}">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                    <button class="delete-history-exercise p-1 text-red-500 hover:text-red-700" data-index="${index}">
+                                        <i class="fas fa-trash"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-3 gap-2 text-sm mt-2">
+                                <div>
+                                    <div class="text-gray-500">Weight</div>
+                                    <div>${exercise.weight} lbs</div>
+                                </div>
+                                <div>
+                                    <div class="text-gray-500">Sets</div>
+                                    <div>${exercise.sets}</div>
+                                </div>
+                                <div>
+                                    <div class="text-gray-500">Reps</div>
+                                    <div>${exercise.reps}</div>
+                                </div>
+                            </div>
+                            <div class="text-xs text-gray-400 mt-1">${formatShortDate(exercise.date)}</div>
+                        </div>
+                    `;
+                });
+                html += '</div>';
+                return html;
+            }
+            function openEditHistoryModal(day) {
+                const workoutData = workouts[day];
+                editHistoryContent.innerHTML = `
+                    <div class="mb-4">
+                        <h4 class="font-medium text-lg mb-2">${day.charAt(0).toUpperCase() + day.slice(1)} Workout</h4>
+                        <div class="text-sm text-gray-600 mb-4">${formatDate(workoutData.date)}</div>
+                        <div class="flex items-center mb-4">
+                            <label class="block text-sm font-medium text-gray-700 mr-2">Completed:</label>
+                            <input type="checkbox" id="edit-completed" ${workoutData.completed ? 'checked' : ''} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        </div>
+                        <div class="mb-2">
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Workout Date</label>
+                            <input type="datetime-local" id="edit-workout-date" value="${formatDateTimeLocal(workoutData.date)}" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                    </div>
+                    <div class="border-t border-gray-200 pt-4">
+                        <h5 class="font-medium mb-3">Exercises</h5>
+                        <div id="edit-exercises-list" class="space-y-3 mb-4">
+                            ${renderEditExercisesList(workoutData.exercises)}
+                        </div>
+                        <div class="bg-gray-50 p-3 rounded-lg">
+                            <h6 class="font-medium mb-2">Add New Exercise</h6>
+                            <div class="grid grid-cols-1 md:grid-cols-4 gap-2">
+                                <div>
+                                    <input type="text" id="new-exercise-name" placeholder="Exercise" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                                </div>
+                                <div>
+                                    <input type="number" id="new-exercise-weight" placeholder="Weight" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                                </div>
+                                <div>
+                                    <input type="number" id="new-exercise-sets" placeholder="Sets" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                                </div>
+                                <div>
+                                    <input type="number" id="new-exercise-reps" placeholder="Reps" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                                </div>
+                            </div>
+                            <button id="add-new-exercise" class="mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded-md text-sm transition-colors">
+                                <i class="fas fa-plus mr-1"></i> Add Exercise
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex justify-end space-x-3 mt-6">
+                        <button id="cancel-edit" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
+                            Cancel
+                        </button>
+                        <button id="save-edit" data-day="${day}" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium">
+                            Save Changes
+                        </button>
+                    </div>
+                `;
+                // Add event listeners to delete buttons
+                editHistoryContent.querySelectorAll('.delete-history-exercise').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const index = parseInt(this.dataset.index);
+                        if (confirm('Are you sure you want to delete this exercise?')) {
+                            workoutData.exercises.splice(index, 1);
+                            openEditHistoryModal(day); // Refresh the modal
+                        }
+                    });
+                });
+                // Add event listener to add new exercise button
+                editHistoryContent.querySelector('#add-new-exercise').addEventListener('click', function() {
+                    const name = editHistoryContent.querySelector('#new-exercise-name').value.trim();
+                    const weight = parseFloat(editHistoryContent.querySelector('#new-exercise-weight').value);
+                    const sets = parseInt(editHistoryContent.querySelector('#new-exercise-sets').value);
+                    const reps = parseInt(editHistoryContent.querySelector('#new-exercise-reps').value);
+                    if (!name || isNaN(weight) || isNaN(sets) || isNaN(reps)) {
+                        alert('Please fill in all fields with valid values');
+                        return;
+                    }
+                    workoutData.exercises.push({
+                        name,
+                        weight,
+                        sets,
+                        reps,
+                        date: new Date().toISOString()
+                    });
+                    openEditHistoryModal(day); // Refresh the modal
+                });
+                // Add event listener to save button
+                editHistoryContent.querySelector('#save-edit').addEventListener('click', function() {
+                    const day = this.dataset.day;
+                    const completed = editHistoryContent.querySelector('#edit-completed').checked;
+                    const date = new Date(editHistoryContent.querySelector('#edit-workout-date').value).toISOString();
+                    workouts[day].completed = completed;
+                    workouts[day].date = date;
+                    // Update all exercises dates if workout date changed
+                    if (workouts[day].date !== workoutData.date) {
+                        workouts[day].exercises.forEach(exercise => {
+                            exercise.date = workouts[day].date;
+                        });
+                    }
+                    saveData();
+                    updateUI();
+                    loadHistory();
+                    editHistoryModal.classList.add('hidden');
+                });
+                // Add event listener to cancel button
+                editHistoryContent.querySelector('#cancel-edit').addEventListener('click', function() {
+                    editHistoryModal.classList.add('hidden');
+                });
+                editHistoryModal.classList.remove('hidden');
+            }
+            function renderEditExercisesList(exercises) {
+                if (exercises.length === 0) return '<div class="text-center py-4 text-gray-400">No exercises</div>';
+                let html = '';
+                exercises.forEach((exercise, index) => {
+                    html += `
+                        <div class="bg-white p-3 rounded-lg border border-gray-200">
+                            <div class="grid grid-cols-1 md:grid-cols-5 gap-2">
+                                <div>
+                                    <label class="text-xs text-gray-500">Exercise</label>
+                                    <input type="text" value="${exercise.name}" data-index="${index}" data-field="name" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                                </div>
+                                <div>
+                                    <label class="text-xs text-gray-500">Weight</label>
+                                    <input type="number" value="${exercise.weight}" data-index="${index}" data-field="weight" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                                </div>
+                                <div>
+                                    <label class="text-xs text-gray-500">Sets</label>
+                                    <input type="number" value="${exercise.sets}" data-index="${index}" data-field="sets" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                                </div>
+                                <div>
+                                    <label class="text-xs text-gray-500">Reps</label>
+                                    <input type="number" value="${exercise.reps}" data-index="${index}" data-field="reps" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                                </div>
+                                <div>
+                                    <label class="text-xs text-gray-500">Actions</label>
+                                    <button class="delete-history-exercise w-full px-2 py-1 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm" data-index="${index}">
+                                        <i class="fas fa-trash mr-1"></i> Delete
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="mt-2">
+                                <label class="text-xs text-gray-500">Date</label>
+                                <input type="datetime-local" value="${formatDateTimeLocal(exercise.date)}" data-index="${index}" data-field="date" class="w-full px-2 py-1 border border-gray-300 rounded-md text-sm">
+                            </div>
+                        </div>
+                    `;
+                });
+                // Add input change listeners
+                setTimeout(() => {
+                    editHistoryContent.querySelectorAll('input[data-index]').forEach(input => {
+                        input.addEventListener('change', function() {
+                            const index = parseInt(this.dataset.index);
+                            const field = this.dataset.field;
+                            const value = field === 'name' ? this.value :
+                                         field === 'date' ? new Date(this.value).toISOString() :
+                                         parseFloat(this.value);
+                            workouts[currentDay].exercises[index][field] = value;
+                        });
+                    });
+                }, 0);
+                return html;
+            }
+            function toggleHistoryView() {
+                historyViewMode = historyViewMode === 'detailed' ? 'compact' : 'detailed';
+                toggleHistoryViewBtn.innerHTML = historyViewMode === 'detailed' ?
+                    '<i class="fas fa-list mr-1"></i> Compact View' :
+                    '<i class="fas fa-list mr-1"></i> Detailed View';
+                loadHistory();
+            }
+            function getWorkoutType(day) {
+                if (day === 'monday' || day === 'thursday') return 'Push';
+                if (day === 'tuesday' || day === 'friday') return 'Pull';
+                if (day === 'wednesday' || day === 'saturday') return 'Legs';
+                return '';
+            }
+            function getWorkoutTypeColorClass(day) {
+                if (day === 'monday' || day === 'thursday') return 'text-blue-500';
+                if (day === 'tuesday' || day === 'friday') return 'text-green-500';
+                if (day === 'wednesday' || day === 'saturday') return 'text-purple-500';
+                return '';
+            }
+            function formatDate(dateString) {
+                try {
+                    const date = new Date(dateString);
+                    if (isNaN(date.getTime())) {
+                        return 'Date not available';
+                    }
+                    return date.toLocaleDateString('en-US', {
+                        weekday: 'long',
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+                } catch (e) {
+                    console.error('Error formatting date:', e);
+                    return 'Date not available';
+                }
+            }
+            function formatShortDate(dateString) {
+                try {
+                    const date = new Date(dateString);
+                    if (isNaN(date.getTime())) {
+                        return '';
+                    }
+                    return date.toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+                } catch (e) {
+                    console.error('Error formatting short date:', e);
+                    return '';
+                }
+            }
+            function formatDateTimeLocal(dateString) {
+                try {
+                    const date = new Date(dateString);
+                    if (isNaN(date.getTime())) {
+                        return '';
+                    }
+                    const year = date.getFullYear();
+                    const month = String(date.getMonth() + 1).padStart(2, '0');
+                    const day = String(date.getDate()).padStart(2, '0');
+                    const hours = String(date.getHours()).padStart(2, '0');
+                    const minutes = String(date.getMinutes()).padStart(2, '0');
+                    return `${year}-${month}-${day}T${hours}:${minutes}`;
+                } catch (e) {
+                    console.error('Error formatting datetime-local:', e);
+                    return '';
+                }
+            }
+        });
+    </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=jrrade/myworkouts" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>