|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GarTime - Gestión Profesional de Tareas</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> |
|
|
.timer-active { |
|
|
animation: pulse 1.5s infinite ease-in-out; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } |
|
|
50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); } |
|
|
} |
|
|
.task-completed { |
|
|
background-color: #f0fdf4; |
|
|
border-left: 4px solid #10b981; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.dark .task-completed { |
|
|
background-color: #052e16; |
|
|
border-left: 4px solid #10b981; |
|
|
} |
|
|
.dark-mode { |
|
|
background-color: #1a1a2e; |
|
|
color: #e6f1ff; |
|
|
} |
|
|
.dark-mode-secondary { |
|
|
background-color: #16213e; |
|
|
} |
|
|
.smooth-transition { |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
} |
|
|
.slide-down { |
|
|
animation: slideDown 0.3s ease-out forwards; |
|
|
} |
|
|
@keyframes slideDown { |
|
|
from { opacity: 0; transform: translateY(-20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen transition-colors duration-300"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
|
|
<header class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-600 text-white p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-clock text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-gray-800 dark:text-white">GarTime</h1> |
|
|
<p class="text-gray-600 dark:text-gray-300">Gestión profesional de tareas y tiempo</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<span class="mr-2 text-gray-700 dark:text-gray-300">Modo oscuro</span> |
|
|
<button id="darkModeToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-600"> |
|
|
<span class="sr-only">Toggle dark mode</span> |
|
|
<span id="darkModeToggleCircle" class="inline-block h-4 w-4 transform rounded-full bg-white dark:bg-gray-300 translate-x-1 dark:translate-x-6 transition-transform"></span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:block"> |
|
|
<div class="flex items-center bg-blue-50 dark:bg-blue-900/30 p-2 rounded-lg"> |
|
|
<i class="fas fa-dollar-sign text-blue-600 dark:text-blue-300 mr-2"></i> |
|
|
<span class="font-medium text-blue-600 dark:text-blue-300">Tarifa:</span> |
|
|
<input id="hourlyRate" type="number" min="0" step="0.01" value="50.00" class="ml-2 w-20 bg-transparent border-b border-blue-300 dark:border-blue-600 focus:outline-none text-blue-800 dark:text-blue-100"> |
|
|
<span class="ml-1 text-blue-600 dark:text-blue-300">/h</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg smooth-transition hover:shadow-xl p-6 flex items-center"> |
|
|
<div class="bg-green-100 dark:bg-green-900/30 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-check-circle text-green-600 dark:text-green-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Tareas completadas</p> |
|
|
<h3 id="completedTasksCount" class="text-2xl font-bold text-gray-800 dark:text-white">0</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg smooth-transition hover:shadow-xl p-6 flex items-center"> |
|
|
<div class="bg-blue-100 dark:bg-blue-900/30 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-clock text-blue-600 dark:text-blue-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Tiempo hoy</p> |
|
|
<h3 id="todayTime" class="text-2xl font-bold text-gray-800 dark:text-white">00:00:00</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg smooth-transition hover:shadow-xl p-6 flex items-center"> |
|
|
<div class="bg-purple-100 dark:bg-purple-900/30 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-money-bill-wave text-purple-600 dark:text-purple-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Valor total</p> |
|
|
<h3 id="totalValue" class="text-2xl font-bold text-gray-800 dark:text-white">$0.00</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg smooth-transition hover:shadow-xl p-6 flex items-center"> |
|
|
<div class="bg-amber-100 dark:bg-amber-900/30 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-stopwatch text-amber-600 dark:text-amber-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Tiempo total</p> |
|
|
<h3 id="totalTime" class="text-2xl font-bold text-gray-800 dark:text-white">00:00:00</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-1/3"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 sticky top-4"> |
|
|
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Nueva Tarea</h2> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="taskName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nombre de la tarea</label> |
|
|
<input type="text" id="taskName" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" placeholder="Ej: Diseño de logo"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="taskDescription" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Descripción</label> |
|
|
<textarea id="taskDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" placeholder="Detalles de la tarea..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="taskProject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Proyecto</label> |
|
|
<input type="text" id="taskProject" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" placeholder="Ej: Sitio web cliente X"> |
|
|
</div> |
|
|
|
|
|
<div class="md:hidden mb-6"> |
|
|
<label for="mobileHourlyRate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tarifa por hora</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> |
|
|
<span class="text-gray-500 dark:text-gray-400">$</span> |
|
|
</div> |
|
|
<input id="mobileHourlyRate" type="number" min="0" step="0.01" value="50.00" class="pl-8 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="addTaskBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Agregar Tarea |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/3"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden"> |
|
|
<div class="border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-between items-center"> |
|
|
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Mis Tareas</h2> |
|
|
<div class="relative"> |
|
|
<select id="taskFilter" class="appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-white py-2 px-4 pr-8 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="all">Todas</option> |
|
|
<option value="active">Activas</option> |
|
|
<option value="completed">Completadas</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="taskList" class="divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
|
|
|
<div class="p-6 text-center text-gray-500 dark:text-gray-400"> |
|
|
<i class="fas fa-tasks text-4xl mb-2"></i> |
|
|
<p>No hay tareas registradas</p> |
|
|
<p class="text-sm">Agrega tu primera tarea usando el formulario</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<template id="taskTemplate"> |
|
|
<div class="task-item p-6 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<h3 class="task-name font-medium text-lg text-gray-800 dark:text-white"></h3> |
|
|
<p class="task-project text-sm text-blue-600 dark:text-blue-400 mt-1"></p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="timer-toggle-btn bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-800 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-md text-sm flex items-center transition-colors duration-200"> |
|
|
<i class="fas fa-play mr-1"></i> <span class="timer-label">Iniciar</span> |
|
|
</button> |
|
|
<button class="complete-btn bg-green-100 dark:bg-green-900/30 hover:bg-green-200 dark:hover:bg-green-800 text-green-800 dark:text-green-200 px-3 py-1 rounded-md text-sm flex items-center transition-colors duration-200"> |
|
|
<i class="fas fa-check mr-1"></i> Completar |
|
|
</button> |
|
|
<button class="delete-btn bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-800 text-red-800 dark:text-red-200 px-3 py-1 rounded-md text-sm flex items-center transition-colors duration-200"> |
|
|
<i class="fas fa-trash mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="task-description text-gray-600 dark:text-gray-300 mb-3"></p> |
|
|
|
|
|
<div class="flex flex-wrap justify-between items-center pt-3 border-t border-gray-200 dark:border-gray-700"> |
|
|
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400"> |
|
|
<i class="fas fa-clock mr-1"></i> |
|
|
<span class="task-time">00:00:00</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm font-medium"> |
|
|
<span class="text-gray-500 dark:text-gray-400 mr-1">Valor:</span> |
|
|
<span class="task-value text-blue-600 dark:text-blue-400">$0.00</span> |
|
|
</div> |
|
|
<div class="text-xs text-gray-400 task-date"></div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
const darkModeToggleCircle = document.getElementById('darkModeToggleCircle'); |
|
|
const hourlyRateInput = document.getElementById('hourlyRate'); |
|
|
const mobileHourlyRateInput = document.getElementById('mobileHourlyRate'); |
|
|
const taskNameInput = document.getElementById('taskName'); |
|
|
const taskDescriptionInput = document.getElementById('taskDescription'); |
|
|
const taskProjectInput = document.getElementById('taskProject'); |
|
|
const addTaskBtn = document.getElementById('addTaskBtn'); |
|
|
const taskList = document.getElementById('taskList'); |
|
|
const taskFilter = document.getElementById('taskFilter'); |
|
|
const completedTasksCount = document.getElementById('completedTasksCount'); |
|
|
const totalTimeElement = document.getElementById('totalTime'); |
|
|
const totalValueElement = document.getElementById('totalValue'); |
|
|
const taskTemplate = document.getElementById('taskTemplate'); |
|
|
|
|
|
|
|
|
let tasks = JSON.parse(localStorage.getItem('garTimeTasks')) || []; |
|
|
let activeTimer = null; |
|
|
let isDarkMode = localStorage.getItem('darkMode') === 'true'; |
|
|
|
|
|
|
|
|
updateUI(); |
|
|
updateStats(); |
|
|
applyDarkMode(); |
|
|
|
|
|
|
|
|
darkModeToggle.addEventListener('click', toggleDarkMode); |
|
|
addTaskBtn.addEventListener('click', addTask); |
|
|
taskFilter.addEventListener('change', filterTasks); |
|
|
hourlyRateInput.addEventListener('change', updateHourlyRate); |
|
|
mobileHourlyRateInput.addEventListener('change', updateHourlyRate); |
|
|
|
|
|
|
|
|
function toggleDarkMode() { |
|
|
isDarkMode = !isDarkMode; |
|
|
localStorage.setItem('darkMode', isDarkMode); |
|
|
applyDarkMode(); |
|
|
} |
|
|
|
|
|
function applyDarkMode() { |
|
|
if (isDarkMode) { |
|
|
document.body.classList.add('dark-mode'); |
|
|
document.body.classList.add('dark'); |
|
|
darkModeToggleCircle.classList.remove('translate-x-1'); |
|
|
darkModeToggleCircle.classList.add('translate-x-6'); |
|
|
} else { |
|
|
document.body.classList.remove('dark-mode'); |
|
|
document.body.classList.remove('dark'); |
|
|
darkModeToggleCircle.classList.add('translate-x-1'); |
|
|
darkModeToggleCircle.classList.remove('translate-x-6'); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateHourlyRate() { |
|
|
const rate = parseFloat(hourlyRateInput.value) || 0; |
|
|
hourlyRateInput.value = rate.toFixed(2); |
|
|
mobileHourlyRateInput.value = rate.toFixed(2); |
|
|
updateTasksValues(); |
|
|
updateStats(); |
|
|
saveTasks(); |
|
|
} |
|
|
|
|
|
function addTask() { |
|
|
const name = taskNameInput.value.trim(); |
|
|
const description = taskDescriptionInput.value.trim(); |
|
|
const project = taskProjectInput.value.trim(); |
|
|
|
|
|
if (!name) { |
|
|
alert('Por favor ingresa un nombre para la tarea'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const newTask = { |
|
|
id: Date.now(), |
|
|
name, |
|
|
description, |
|
|
project, |
|
|
isCompleted: false, |
|
|
timeSpent: 0, |
|
|
timerInterval: null, |
|
|
createdAt: new Date().toISOString(), |
|
|
lastActiveAt: null |
|
|
}; |
|
|
|
|
|
tasks.push(newTask); |
|
|
saveTasks(); |
|
|
updateUI(); |
|
|
|
|
|
|
|
|
taskNameInput.value = ''; |
|
|
taskDescriptionInput.value = ''; |
|
|
taskProjectInput.value = ''; |
|
|
taskNameInput.focus(); |
|
|
} |
|
|
|
|
|
function updateUI() { |
|
|
taskList.innerHTML = ''; |
|
|
|
|
|
if (tasks.length === 0) { |
|
|
taskList.innerHTML = ` |
|
|
<div class="p-6 text-center text-gray-500 dark:text-gray-400"> |
|
|
<i class="fas fa-tasks text-4xl mb-2"></i> |
|
|
<p>No hay tareas registradas</p> |
|
|
<p class="text-sm">Agrega tu primera tarea usando el formulario</p> |
|
|
</div> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
const filteredTasks = filterTasksByStatus(taskFilter.value); |
|
|
|
|
|
filteredTasks.forEach(task => { |
|
|
const taskElement = createTaskElement(task); |
|
|
taskList.appendChild(taskElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
function filterTasksByStatus(status) { |
|
|
if (status === 'all') return [...tasks].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); |
|
|
if (status === 'active') return tasks.filter(task => !task.isCompleted); |
|
|
if (status === 'completed') return tasks.filter(task => task.isCompleted); |
|
|
return tasks; |
|
|
} |
|
|
|
|
|
function filterTasks() { |
|
|
updateUI(); |
|
|
} |
|
|
|
|
|
function createTaskElement(task) { |
|
|
const taskElement = taskTemplate.content.cloneNode(true); |
|
|
const taskContainer = taskElement.querySelector('.task-item'); |
|
|
|
|
|
if (task.isCompleted) { |
|
|
taskContainer.classList.add('task-completed'); |
|
|
} |
|
|
|
|
|
|
|
|
taskElement.querySelector('.task-name').textContent = task.name; |
|
|
taskElement.querySelector('.task-description').textContent = task.description || 'Sin descripción'; |
|
|
taskElement.querySelector('.task-project').textContent = task.project || 'Sin proyecto'; |
|
|
taskElement.querySelector('.task-time').textContent = formatTime(task.timeSpent); |
|
|
taskElement.querySelector('.task-value').textContent = calculateTaskValue(task.timeSpent); |
|
|
taskElement.querySelector('.task-date').textContent = formatDate(task.createdAt); |
|
|
|
|
|
|
|
|
const timerBtn = taskElement.querySelector('.timer-toggle-btn'); |
|
|
const timerLabel = taskElement.querySelector('.timer-label'); |
|
|
|
|
|
if (task.timerInterval) { |
|
|
timerBtn.classList.add('timer-active'); |
|
|
timerBtn.classList.remove('bg-blue-100', 'dark:bg-blue-900/30'); |
|
|
timerBtn.classList.add('bg-blue-600', 'text-white'); |
|
|
timerLabel.textContent = 'En progreso'; |
|
|
timerLabel.innerHTML = `<i class="fas fa-spinner fa-spin mr-1"></i> En progreso`; |
|
|
} else { |
|
|
timerBtn.classList.remove('timer-active'); |
|
|
timerLabel.textContent = 'Iniciar'; |
|
|
} |
|
|
|
|
|
|
|
|
timerBtn.addEventListener('click', () => toggleTimer(task.id)); |
|
|
taskElement.querySelector('.complete-btn').addEventListener('click', () => toggleTaskCompletion(task.id)); |
|
|
taskElement.querySelector('.delete-btn').addEventListener('click', () => deleteTask(task.id)); |
|
|
|
|
|
return taskElement; |
|
|
} |
|
|
|
|
|
function toggleTimer(taskId) { |
|
|
|
|
|
if (activeTimer) { |
|
|
stopTimer(activeTimer); |
|
|
} |
|
|
|
|
|
const task = tasks.find(t => t.id === taskId); |
|
|
|
|
|
if (task.timerInterval) { |
|
|
stopTimer(taskId); |
|
|
} else { |
|
|
startTimer(taskId); |
|
|
activeTimer = taskId; |
|
|
} |
|
|
|
|
|
updateUI(); |
|
|
saveTasks(); |
|
|
} |
|
|
|
|
|
function startTimer(taskId) { |
|
|
const task = tasks.find(t => t.id === taskId); |
|
|
|
|
|
if (!task) return; |
|
|
|
|
|
task.lastActiveAt = new Date().toISOString(); |
|
|
|
|
|
task.timerInterval = setInterval(() => { |
|
|
task.timeSpent++; |
|
|
updateStats(); |
|
|
|
|
|
|
|
|
const taskElement = document.querySelector(`[data-task-id="${taskId}"]`); |
|
|
if (taskElement) { |
|
|
taskElement.querySelector('.task-time').textContent = formatTime(task.timeSpent); |
|
|
taskElement.querySelector('.task-value').textContent = calculateTaskValue(task.timeSpent); |
|
|
} |
|
|
}, 1000); |
|
|
|
|
|
saveTasks(); |
|
|
} |
|
|
|
|
|
function stopTimer(taskId) { |
|
|
const task = tasks.find(t => t.id === taskId); |
|
|
|
|
|
if (!task || !task.timerInterval) return; |
|
|
|
|
|
clearInterval(task.timerInterval); |
|
|
task.timerInterval = null; |
|
|
|
|
|
if (activeTimer === taskId) { |
|
|
activeTimer = null; |
|
|
} |
|
|
|
|
|
saveTasks(); |
|
|
} |
|
|
|
|
|
function toggleTaskCompletion(taskId) { |
|
|
const task = tasks.find(t => t.id === taskId); |
|
|
|
|
|
if (!task) return; |
|
|
|
|
|
|
|
|
if (task.timerInterval) { |
|
|
stopTimer(taskId); |
|
|
if (activeTimer === taskId) { |
|
|
activeTimer = null; |
|
|
} |
|
|
} |
|
|
|
|
|
task.isCompleted = !task.isCompleted; |
|
|
updateUI(); |
|
|
updateStats(); |
|
|
saveTasks(); |
|
|
} |
|
|
|
|
|
function deleteTask(taskId) { |
|
|
if (!confirm('¿Estás seguro de que quieres eliminar esta tarea?')) return; |
|
|
|
|
|
|
|
|
const task = tasks.find(t => t.id === taskId); |
|
|
if (task && task.timerInterval) { |
|
|
stopTimer(taskId); |
|
|
if (activeTimer === taskId) { |
|
|
activeTimer = null; |
|
|
} |
|
|
} |
|
|
|
|
|
tasks = tasks.filter(t => t.id !== taskId); |
|
|
updateUI(); |
|
|
updateStats(); |
|
|
saveTasks(); |
|
|
} |
|
|
|
|
|
function updateTasksValues() { |
|
|
tasks.forEach(task => { |
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
updateUI(); |
|
|
} |
|
|
|
|
|
function updateStats() { |
|
|
const completedTasks = tasks.filter(t => t.isCompleted).length; |
|
|
const totalTime = tasks.reduce((sum, task) => sum + task.timeSpent, 0); |
|
|
const totalValue = tasks.reduce((sum, task) => { |
|
|
const hourlyRate = parseFloat(hourlyRateInput.value) || 0; |
|
|
return sum + (task.timeSpent / 3600 * hourlyRate); |
|
|
}, 0); |
|
|
|
|
|
completedTasksCount.textContent = completedTasks; |
|
|
totalTimeElement.textContent = formatTime(totalTime); |
|
|
totalValueElement.textContent = `$${totalValue.toFixed(2)}`; |
|
|
} |
|
|
|
|
|
function formatTime(seconds) { |
|
|
const hrs = Math.floor(seconds / 3600); |
|
|
const mins = Math.floor((seconds % 3600) / 60); |
|
|
const secs = seconds % 60; |
|
|
|
|
|
return `${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`; |
|
|
} |
|
|
|
|
|
function calculateTaskValue(seconds) { |
|
|
const hourlyRate = parseFloat(hourlyRateInput.value) || 0; |
|
|
const value = (seconds / 3600) * hourlyRate; |
|
|
return `$${value.toFixed(2)}`; |
|
|
} |
|
|
|
|
|
function formatDate(isoString) { |
|
|
const date = new Date(isoString); |
|
|
return date.toLocaleDateString('es-ES', { |
|
|
day: '2-digit', |
|
|
month: '2-digit', |
|
|
year: 'numeric', |
|
|
hour: '2-digit', |
|
|
minute: '2-digit' |
|
|
}); |
|
|
} |
|
|
|
|
|
function saveTasks() { |
|
|
localStorage.setItem('garTimeTasks', JSON.stringify(tasks)); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (e.target.closest('.task-item')) { |
|
|
const taskElement = e.target.closest('.task-item'); |
|
|
const taskId = parseInt(taskElement.dataset.taskId); |
|
|
|
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
tasks.forEach(task => { |
|
|
if (task.timerInterval) { |
|
|
|
|
|
if (task.timerInterval) { |
|
|
clearInterval(task.timerInterval); |
|
|
} |
|
|
|
|
|
|
|
|
if (task.lastActiveAt) { |
|
|
const lastActive = new Date(task.lastActiveAt); |
|
|
const now = new Date(); |
|
|
const secondsPassed = Math.floor((now - lastActive) / 1000); |
|
|
task.timeSpent += secondsPassed; |
|
|
} |
|
|
|
|
|
|
|
|
startTimer(task.id); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=fgarola/gartime" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
